ترفندهای ضروری CSS برای طراحان وب

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

استفاده از ABSOLUTE POSITIONING

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

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

ویژگی CSS بالا موقعیت یک عنصر را تنظیم می کند تا 20px را از لبه های بالا و راست مرورگر خود حفظ کند. شما همچنین می توانید از موقعیت مطلق در داخل div نیز استفاده کنید.

استفاده از SELECTOR

با استفاده از * ما میتوانیم به تمامی عناصر موجود در یک سند ویژگی‌های Css اعمال کنیم.به عنوان مثال اگر شما از p* در داخل استایل خود استفاده کنید،تمای تگ ها p از آن ویژگی های Css بهره‌مند خواهند بود.این ویژگی باعث میشود وب سایت شما بر اساس استاندارد‌های جهانی توسعه داده شود.

* { 
       background-color: yellow;
}

استفاده از IMPORTANT!

با توجه به قوانین آبشاری سی اس اس (CSS) آخرین کدهای نوشته شده همواره اعمال می شوند. حال زمان هایی برای ما پیش می آید که نیاز داریم این قانون آبشاری کدهای سی اس اس را نقض کنیم. برای این منظور می بایست از دستور important استفاده کرد.برای روشن شدن نحوه استفاده از این دستور، کدهای اچ تی ام ال (HTML) زیر را وارد ویرایشگر متن خود می کنیم:

<!DOCTYPE html>
<html>
      <head>
         <meta charset="utf-8">
         <title>Stunning CSS</title>
         <link type="text/css" rel="stylesheet" href="css/main.css">
     </head>
     <body>
         <p>This is a paragraph.</p>
     </body>
</html>

همانطور که می بینیم یک تگ پاراگراف را داخل تگ <body> قرار داده ایم. حال با استفاده از کدهای سی اس اس (CSS) قصد داریم تا استایلی را برای این تگ در نظر بگیریم. برای این منظور کدهای زیر را وارد فایل مرتبط با کدهای سی اس اس (CSS) می کنیم:

p {
    color:red;
 }
p {
    color:green;
}

همانطور که در کد فوق ملاحظه می شود ابتدا یک Selector از جنس p نوشته و رنگ قرمز را برای آن در نظر گرفته ایم. مجدد این Selector را نوشته و این بار رنگ سبز برای آن در نظر گرفته شده است. همانطور که پیش از این توضیح دادیم در سی اس اس (CSS) همواره آخرین کدها اعمال می شوند. بنابراین این انتظار می رود که رنگ متن پاراگراف به کار گرفته شده در این مثال سبز باشد،اکنون اگر بخواهیم این قانون سی اس اس (CSS) را نقض کنیم، می بایست کدهای سی اس اس (CSS) خود را به صورت زیر تکمیل کنیم:

p {
    color:red !important;
}
p {
    color:green;
}

همانطور که در کد فوق ملاحظه می شود، در Selector اول که تاثیر خود را از دست داده است، پس از Value که در اینجا red است یک فاصله قرار داده سپس علامت ! را تایپ می کنیم و بلافاصله دستور important را می نویسیم و در نهایت علامت ; را قرار می دهیم. در واقع با اینکار به مرورگر دستور می دهیم که رنگ قرمز از رنگ سبز به مراتب “مهم تر” است از اینرو می بایست این رنگ را مد نظر قرار دهد.

چیدمان عمودی VERTICAL ALIGNMENT

ما از این ویژکی و قابلیت بیشتر در استایل دهی به منو یا navigation menu استفاده میکنیم.در واقع وظیفه این ویژگی برابری اندازه ارتفاع منو و متن یا text آن است تا به خوبی در یک راستا قرار بگیرند،

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

استفاده از HOVER EFFECTS

این ویژگی برای دکمه ها، لینک های متنی، و بخشهای مختلف از سایت، آیکون ها و موارد دیگر استفاده می شود.اگر می خواهید زمانی که نشانگر موس بر روی لینک،تصویر و یا هر بخش از سایت که مدنظر شماست حرکت کرد تغییر رنگ دهد میتوانید از ویژگی Hover استفاده کنید.

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

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

استفاده از TRANSITION

شما میتوانید داخل ویژگی Hover از ویژگی transition هم استفاده کنید.این ویژگی زمانی مورد استفاده قرار میگیرد که نمی خواهیم بلافاصله با حرکت نشان گر موس عملیات Hover انجام گیرد و به نوعی میخواهیم کمی با تاخیر انجام گیرد.این باعث می شود که تغییر بیش از 3 ثانیه رخ دهد، به جای آن که فقط فورا به رنگ قرمز برسد.کمی با تاخیر و کمی هم چشم نوازتر عملیات Hover صورت گیرد.

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

منبع: http://bit.ly/2J6dyXt

برای مطالعه پست‌های بیشتر ما را در وبلاگ کارادمی و یا در ویرگول دنبال کنید.