۸ ترفند css در طراحی سایت

استایل متن انتخاب شده
در صفحات وب، وقتی متنی را انتخاب می کنید، مشاهده می‌کنید که رنگ پس زمینه آبی می گیرد که نشان می دهد این قسمت select شده است، ما می توانیم با توجه به طراحی سایت، به متن های انتخاب شده استایل های خودمان را بدهیم.
برای انتخاب متن های انتخاب شده مثلا در تگ های p در css به صورت زیر عمل می کنیم:

p::selection {
  background: cyan;
}
p::-moz-selection {
  background: cyan;
}

ویژگی‌های زیر را می‌توان به متن انتخاب شده استایل داد:

• color
• background-color
• cursor
• caret-color
• outline
• text-decoration
• text-emphasis-color
• text-shadow

به مثال زیر توجه کنید:

<div>This text has special styles when you highlight it.<div>
<p>Also try selecting text in this paragraph.<p>

/* Make selected text gold on a red background */
::-moz-selection {
  color: gold;
  background: red;
}
::selection {
  color: gold;
  background: red;
} 
/* Make selected text in a paragraph white on a blue background */
p::-moz-selection {
  color: white;
  background: blue;
}
p::selection {
  color: white;
  background: blue;
}

یکی دیگر مواردی که طراحی سایت را متمایز می کند، دیزاین و استایل دهی با اسکرول است که به صورت زیر انجام می شود:

::-webkit-scrollbar { styles here }

selector های متنوعی برای دیزاین دارد:

• ::webkit-scrollbar : انتخاب کل اسکرول بار
• ::webkit-scrollbar-button : دکمه های موجود در اسکرول اعم از دکمه فلش بالا و پایین
• ::webkit-scrollbar-thumb : دکمه وسط اسکرول که تکان دهنده اسکرول است
• ::webkit-scrollbar-track : نوار مسیر اسکرول
• ::webkit-scrollbar-track-piece : قسمتی از نوار مسیر که با دکمه وسط قابل پوشش نیست
• ::webkit-scrollbar-corner : پایین اسکرول بار قسمتی که هر دو اسکرول عمودی و افقی به هم رسیدند.
• ::webkit-resizer : اهرم تغیر سایز المان

با مثال زیر توجه کنید:

<div class='visible-scrollbar'>
  Etiam sagittis sem sed lacus laoreet, eu fermentum eros auctor.
  Proin at nulla elementum, consectetur ex eget, commodo ante. 
  Sed eros mi, bibendum ut dignissim et, maximus eget nibh. Phasellus
  blandit quam turpis, at mollis velit pretium ut. Aliquam at enim ligula.
</div>
<div class='invisible-scrollbar'>Thisisaveeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeerylongwor</div>
<div class='mostly-customized-scrollbar'>Thisisaveeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeerylongword<br>
And pretty tall<br>
thing with weird scrollbars.<br>
Who thought scrollbars could be made weeeeird?div>

.visible-scrollbar, .invisible-scrollbar, .mostly-customized-scrollbar {
  display: block;
  width: 10em;
  overflow: auto;
  height: 2em;
}
.invisible-scrollbar::-webkit-scrollbar {
  display: none;
}
/* Demonstrate a 'mostly customized' scrollbar
 * (won't be visible otherwise if width/height is specified) */
.mostly-customized-scrollbar::-webkit-scrollbar {
  width: 5px;
  height: 8px;
  background-color: #aaa; /* or add it to the track */
}
/* Add a thumb */
.mostly-customized-scrollbar::-webkit-scrollbar-thumb {
    background: #000; 
}

خروجی به صورت زیر است:

در مرورگر فایل فاکس؛ اگر محتوای صفحه کمتر از اندازه صفحه باشد؛ چون به صورت پیش فرض html استایل overflow:auto را دارد؛ اسکرول بار نمایش داده نمی‌شود ولی وقتی که به هر دلیلی مثل تغییر اندازه صفحه یا زیاد شدن متن صفحه؛ صفحه اسکرول شود و اسکرول بار نمایش داده شود؛ پرشی در مرور گر خواهیم داشت.

با از ابتدا قرار دادن اسکرول بار به کمک css دادن به html به صورت overflow-y:scroll؛ ازین پرش می توانیم جلوگیری کنیم.

به کمک css می توان محل شکسته شدن محتوای صفحه و رفتن به صفحه بعد در پرینت؛ را کنترل کرد. مثلا در اینجا ما کلاس page-break را در نظر گرفتیم که به هر بخش ار محتوا که می خواهیم در صفحه جدید در پرینت قرار بگیرد؛ این کلاس را می دهیم. 

.page-break { page-break-before:always; }

در بعضی از قسمت های دیزاین طراحی سایت لازم است که حداقل ارتفاع کنترل شود، زیرا وبسایت ها دارای محتوای داینامیک و پویا هستند و ممکن است متن واقعی از مقدار در نظر گرفته شده توسط طراح کمتر باشد یا در زمان های مختلف تغییر کند، این موارد نباید دیزان را به هم بزنند. به کمک min-height از چنین بر هم زدن هایی می توان جلوگیری کرد.

اما مشکلی که در اینجا نمایان می شود این است که بعضی از مرورگر ها متاسفانه min-height را درک نمی کنند، برای حل این موضوع به صورت زیر عمل می کنیم:

 .container {
  height: auto !important;
  min-height: 500px;
  height: 500px; /* Should have the same value as the min height above */
}

به عنوان زیبایی می توانید مقاله یا متن را با حرف بزرگ و استایل متفاوت، شروع کنید. انتخاب حرف اول با :first-letter انجام می شود.

  p:first-letter {
  font-size: 20px;
  font-weight: bold;
  color: red; 
}

حتما تا به حال مشاهده کردید که با کلیک روی لینک ها رنگ آبی در حاشیه آنها در مرورگر های مختلف دیده می شود. ممکن است این رنگ یا کلا این ویژگی مناسب طراحی سایت شما نباشد، به کمک ویژگی outline در css می توانید آن را حذف و یا تغییر دهید. 

a:hover, a:focus {
  outline:none;
}

در css خصوصیتی وجود دارد که به شما این امکان را می دهد که حروف انگلیسی را capital ولی با اندازه کوچک بنویسید، البته همان طور که گفته شد و بدیهی ست فقط مناسب حروف لاتین است. این ویژگی با استایل font-variant در css اعمال می شود:

.text-small-caps {
  font-variant:small-caps;
   }