۲۰ ترفند CSS که هر طراح وب باید بداند

در این مقاله، فهرستی از نکات و تکنیک های css مطرح‌شده است که لازم است هر طراح front-end بداند.

موقعیت ثابت

اگر قصد دارید که المان موردنظر شما همیشه در یک موقعیت ثابت و مشخص قرار گیرد، استفاده از این روش می‌تواند نیاز شمارا برآورده سازد. اگر به مرورگر خود به چشم یک جعبه بزرگ نگاه کنید، position:absolute این امکان را در اختیار شما قرار می‌دهد که المان‌های خود را در هر قسمت از این صفحه مستقر کنید. خاصیت‌های top، right، bottom و left به همراه یک مقدار عددی برحسب پیکسل مورداستفاده قرار می‌گیرد تا مکان المان موردنظر خود را کنترل نمایید.

position:absolute;
top:20px;
right:20px

کد CSS فوق، المان موردنظر شمارا در گوشه سمت راست و بالای صفحه مرورگر و بافاصله ۲۰ پیکسلی از حاشیه‌های مرورگر قرار می‌دهد. همچنین شما می‌توانید با قرار دادن کد فوق در داخل تگ DIV نیز همین خروجی را از کدهای خود بگیرید.

* + سلکتور

استفاده از علامت * این امکان را در اختیار شما قرار می‌دهد که تمامی المان‌های یک سلکتور را تغییر دهید. برای مثال، اگر از*p استفاده نمایید و کدهای CSS را در آن اعمال کنید، نتیجه آن تغییرات به‌تمامی تگ‌های <p> در صفحه موردنظر شما اعمال خواهد شد. با این روش می‌توانید بخش‌های خاصی از سایت خود را مورد هدف قرار داده و تمامی المان‌های آن را تغییر دهید.

 نادیده گرفتن تمام استایل ها

تا جایی که ممکن است نباید از این تکنیک استفاده نمود، چراکه استفاده بیش‌ازحد از آن، در طولانی‌مدت وب‌سایت شمارا دچار مشکل خواهد نمود. اگر می‌خواهید بدون توجه به کدهای پایین‌تر، کدی را به فایل CSS اضافه نمایید، از important! مقابل کد جدید خود استفاده کنید. برای مثال، اگر بخواهیم محتوای تگ H2 ما در بخش خاصی از وب‌سایت به‌جای آبی، قرمز باشد، می‌توانیم از CSS زیر استفاده کنیم:

.section h2 { color:red!important; }

وسط‌چین

وسط‌چین کردن المان‌ها برای طراحان کمی مشکل است، چراکه این کار به نوع المان موردنظر بستگی دارد.
کدهای CSS ای که می‌توان برای وسط‌چینی المان‌ها بر اساس محتوایشان، استفاده کرد عبارت‌اند از:

متن

متن‌ها را می‌توان به کمک دستور;text-align: center، وسط‌چین نمود. درصورتی‌که بخواهید متن خود را در گوشه‌ها قرار دهید، می‌توانید از دستورهای right (راست) و left (چپ) استفاده کنید.

سایر محتویات

تگ div و یا هر تگ دیگری که در کدهای HTML استفاده می‌شود را می‌توانید با اضافه کردن خاصیت block و سپس قرار دادن حاشیه‌های آن در حالت خودکار، وسط‌چین کنید. کد CSS مربوطه به‌صورت زیر است:

#div1 {
 display: block;
 margin: auto;
 width: anything under 100% 
 }

دلیل اینکه مقدار width با “۱۰۰%anything under ” (هر مقداری کمتر از ۱۰۰ درصد) قرار داده‌شده این است که اگر مقدار آن ۱۰۰ درصد باشد، کل بخشی که برای آن در نظر گرفته‌شده را پوشش خواهد داد و دیگر نیاز به وسط‌چین کردن آن نخواهد بود. همچنین می‌توان برای عرض آن نیز مقدار مشخصی را در نظر گرفت.

تنظیم عمودی متن (برای یک خط متن)

این تکنیک معمولاً در منوهای وب‌سایت استفاده می‌شود. کلید کار این است که ارتفاع منو و ارتفاع خط متن را مساوی قرار دهید. مثال زیر مشاهده کنید:

.nav li{
 line-height:50px;
 height:50px;
}

افکت هاور

این تکنیک بیشتر برای لینک‌ها، دکمه‌ها، آیکون‌ها، تصاویر و … مورداستفاده قرار می‌گیرد. اگر می‌خواهید زمانی که کاربر ماوس خود را روی قسمتی می‌برد، رنگ آن تغییر کند، می‌توانید با اضافه کردن کد hover: به کدهای قبلی این کار را به‌راحتی انجام دهید.
مثال:

.entry h2{
 font-size:36px;
 color:#000;
 font-weight:800;
}

.entry h1:hover{
 color:#f00;
 }

این کد باعث می‌شود زمانی که ماوس را روی تگ h2 قرار می‌دهید رنگ آن از مشکی به قرمز تغییر کند. از دیگر مزایای هاور این است که دیگر احتیاجی به تعریف دوباره اندازه و وزن فونت نیست؛ چراکه اگر با حرکت ماوس تغییر نمی‌کنند، مقادیر قبلی همچنان بر قوت خود باقی خواهند ماند.

انتقال

برای افکت‌های مربوط به حرکت ماوس، مثلاً برای تصاویر و منوهای وب‌سایت، نباید رنگ‌ها به‌طور ناگهانی تغییر کنند، بلکه می‌بایست رنگ‌ها به هنگام قرار گرفتن ماوس روی آن به‌آرامی تغییر نماید.

.entry h2:hover{
 color:#f00;
 transition: all 0.4s ease;
 }

وضعیت لینک‌ها

با انجام این کار رنگ المان بجای تغییر ناگهانی، در عرض ۰.۴ ثانیه تغییر می‌کند. این تکنیک افکت‌ها را بسیار جذاب و زیباتر کرده و باعث بهبود تجربه کاربری وب‌سایت شما خواهد شد.

توجه به حالت لینک‌ها از جزئیات طراحی وب‌ سایت محسوب می‌شود که کمتر طراحی به آن توجه می‌کند. کلاس کاذب link: تمامی لینک‌هایی را که هنوز روی آن‌ها کلیک نشده است، مشخص می‌کند و کلاس visited: نیز آن دسته از لینک‌هایی را انتخاب می‌کند که پیش‌ازاین بازدید شده‌اند نشان می‌دهد. استفاده از این تکنیک به کاربران این امکان را می‌دهد قسمت‌های بازدید شده و قسمت باقی‌مانده را تشخیص دهند.

a:link { color: blue; }
a:visited { color: purple; }

تغییر اندازه تصاویر برای جای‌گیری بهتر

در برخی موارد هنگام سایزبندی تصاویر نیاز به تغییر عرض تصاویر وجود دارد. اما باید توجه داشت که ابعاد تغییر نکند. یک‌راه حل ساده برای دستیابی به این هدف، استفاده از حداکثر عرض صفحه است. به مثال زیر توجه کنید:

img {
 max-width:100%;
 height:auto;
}

کنترل المان‌های یک بخش

این بدان معنی است که بزرگ‌ترین اندازه‌ای که تصویر می‌تواند به خود بگیرد ۱۰۰% است و ارتفاع آن نیز به‌طور خودکار محاسبه‌شده و به میزانی که عرض تصویر تغییر کند ارتفاع آن نیز کم یا زیاد خواهد شد. در برخی موارد نیز ممکن است مجبور باشید عرض تصویر را ۱۰۰% قرار دهید.

ضمن استفاده از مثال بالا، اگر بخواهید تصاویر بخش‌های خاصی، برای مثال بلاگ خود را به‌صورت یکجا تغییر دهید، می‌بایست از یک کلاس برای بخش بلاگ استفاده نمایید. با این کار فقط تصاویر تحت قسمت بلاگ را انتخاب می‌کنید و سایر تصاویر ازجمله آیکون‌ها، لوگو و… دست‌نخورده باقی خواهد ماند.

.blog img{
 max-width:100%;
 height:auto;
}

Direct children

در صورت استفاده از این تکنیک می‌توان در وقت خود صرفه‌جویی نمود. شما می‌توانید با استفاده از > به‌صورت مستقیم یک المان را انتخاب کنید. برای مثال:

#footer > a

المان‌های Direct Children

این کد تمامی استایل های لینک‌های موجود در شناسه footer را انتخاب می‌کند و تمام چیزهای دیگری که داخل این تگ استفاده‌شده باشد، نادیده گرفته می‌شود. از این تکنیک برای ساخت منوهای پیشرفته استفاده می‌شود.

این تکنیک در ساخت منوی وب‌سایت به کار شما خواهد آمد، فقط کافی است شماره المانی را که می‌خواهید روی آن کارکنید را بدانید و سپس کدهای خود را به آن اعمال کنید.

li:nth-child(2) {
 font-weight:800;
 color: blue;
 text-style:underline;
}

کد CSS فوق دومین آیتم از لیست را انتخاب کرده، سپس با پررنگ کردن و خط کشیدن زیر آن، استایل یک آیتم را تغییر می‌دهد. همچنین شما می‌توانید با اضافه کردن حرف n مقابل عدد ۲ تمامی آیتم‌های دوم را تغییر دهید. فرض کنید که می‌خواهید یک خط در میان برای خوانایی بهتر CSS رنگ متفاوتی اعمال کنید.

برای اعمال تغییرات از نمونه کد زیر استفاده نمایید:

li:nth-child(2)

تا حد امکان CSS را به چند کلاس و سلکتور اعمال کنید

برای درک بهتر این موضوع فرض کنید که می‌خواهید یک حاشیه مشخص را به‌تمامی تصاویر، بخش بلاگ و بخش کناری سایت اعمال کنید. برای انجام چنین چیزی لازم نیست که یک کد CSS را سه بار برای هر یک از کلاس‌ها تکرار نمایید. تنها کافی است که نامشان را لیست نموده و با کاما (,) از یکدیگر جدا نمایید. برای مثال:

.blog, img,.sidebar {
 border: 1px solid #000;
 }

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

BOX-SIZING: BORDER-BOX

بسیاری از طراحان وب‌ سایت به این تکنیک علاقه زیادی دارند چراکه مشکلات مربوط به فاصله‌بندی‌ها و لایه گذاری‌ها به‌وسیله این تکنیک قابل‌حل است. معمولاً زمانی که عرض خاصی را برای باکسی در نظر می‌گیرید و حاشیه داخلی یا padding به آن اضافه می‌کنید، این حاشیه به عرض جعبه اضافه خواهد شد. اما با;box-sizing: border-box می‌توانید این مشکل را برطرف کنید و باکس‌ها را در همان اندازه‌ای که تعیین کرده‌اید نگه‌دارید.

BEFORE

این سلکتور به شما کمک می‌کند تا المان را انتخاب کرده و محتوا را قبل از آن، قرار دهید. برای مثال درصورتی‌که بخواهیم قبل از هر تگ H2 یک متن قرار گیرد از کد زیر استفاده می‌کنیم:

h2:before { 
 content: "Read: ";
<span class="Apple-converted-space"> color: #F00;</span>
 }

AFTER

استفاده از این تکنیک بسیار مفید و کاربردی است. به‌ویژه زمانی که می‌خواهید قبل از متن خود از فونت آیکون استفاده نمایید. می‌توانید آیکون‌ها را قبل المان موردنظر خود قرار داده، و آن را به سایر المان‌ها نسبت دهید.

این سلکتور دقیقاً همانند before: است، و به شما این امکان را می‌دهد که متن یا فونت آیکون موردنظر خود را بعد از یک المان قرار دهید.

p:after{ 
 content: " -Read more… ";
 color:#f00;
}

CONTENT

content یکی از خاصیت‌های CSS است، این ویژگی زمانی مورداستفاده قرار می‌گیرد که بخواهید یک المان را بسازید و بتوانید کنترل آن را در دسترس بگیرید. معمول‌ترین استفاده این تکنیک، استفاده از آیکون و یا فونت آیکون در بخشی خاص است. در مثال‌های بالا، می‌توانید مشاهده کنید که متن‌های واردشده، درون علامت ” ” قرارگرفته است.

 ریست CSS

هر مرورگر تنظیمات پیش‌فرض خاص خود را برای کدهای CSS در نظر می‌گیرد، بنابراین لازم است تا این تنظیمات را ریست نموده تا فضای کافی برای نوشتن کدهای CSS داشته باشید.
همانند ساخت خانه، ابتدا لازم است تا فضا و بستری مناسب را برای ساخت، فراهم آورید. در مورد کدهای CSS نیز این قضیه صدق می‌کند. با ریست کردن CSS پایه استانداردی را برای وب‌سایت شما فراهم می‌شود و پایداری را به کدهای شما بخصوص در زمان شروع کار، می‌بخشد. به کمک این تکنیک می‌توانید حاشیه‌ها و مرزبندی‌هایی که به‌طور ناخواسته به وجود آمده‌اند را حذف کنید.

Drop caps

Drop caps (حروف بزرگ ابتدایی پاراگراف) روشی برای اعلام شروع یک متن است. این حرف بزرگ در ابتدای متن بسیار جلب ‌توجه خواهد کرد. راه ساده‌ای برای ساخت این افکت در CSS وجود دارد و آن استفاده از المان
first-letter: است. مثال:

p:first-letter{
 display:block;
 float:left;
 margin:3px;
 color:#f00;
 font-size:300%;
}

کوچک و بزرگ بودن حروف

این کد اندازه اولین حرف را سه برابر سایر حروف قرار می‌دهد و px 3 فاصله دور حرف قرار می‌دهد تا از به‌هم‌ریختگی متن جلوگیری شود همچنین رنگ آن حرف را به قرمز تغییر می‌دهد.

با استفاده از کدهای CSS زیر فرمت و اندازه فونت متن را تعیین کنید:

h2 { text-transform: uppercase; }– تمامی حروف بزرگ می‌شوند
h2 { text-transform: lowercase; }– تمامی حروف کوچک می‌شوند
h2 { text-transform: capitalize; }– حروف اول هر کلمه بزرگ می‌شود

ارتفاع عمودی صفحه

برای مواقعی که می‌خواهید یک بخش یا یک المان با پر کردن فضای تمام صفحه جلوه ظاهری بهتری به سایت بدهد می‌توانید از ویژگی vh یا view height استفاده کنید. اگر می‌خواهید یک المان کل صفحه مرورگر را پوشش دهد می‌توانید با قرار دادن عدد ۱۰۰ قبل از vh این کار را انجام دهید.
کلاسی را برای container ساخته و مقدار vh ای را که مایل هستید به آن اختصاص بدهید. چیزی که باید به آن توجه کنید کدهای مربوط به media است بخصوص برای صفحات عمودی مانند صفحه‌نمایش در حالت موبایل.

.fullheight { height: 85vh; }

طراحی لینک شماره تلفن

اگر از لینکی استفاده می‌کنید که کاربر با کلیک بر روی آن می‌تواند با شماره تلفن شما تماس بگیرد بهتر است از قطعه کد زیر استفاده نمایید.

a[href^=tel] {
<span class="Apple-converted-space"> color: #FFF;</span>
<span class="Apple-converted-space"> text-decoration: none;</span>
}