آموزش CSS – نحوه استفاده از گرادیانت به جای رنگ در سی اس اس (CSS) (جلسه ۱۸)

به طور کلی Gradient به حالتی اطلاق می گردد که بسته به جهتی که انتخاب می کنیم به تدریج یک رنگ به رنگ دیگری تبدیل می شود:

using_gradient_in_css

همانطور که در تصویر فوق می بینیم جهت یا اصطلاحاً Direction این گرادیانت عمودی است به طوری که رنگ این گرادیانت به تدریج از سفید به سمت رنگ تیره تغییر پیدا می کند.
برای اعمال چنین قابلیتی در سی اس اس (CSS) ابتدا کدهای اچ تی ام ال (HTML) زیر را وارد ویرایشگر متن می کنیم:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>asrefonon</title>
    <link type="text/css" rel="stylesheet" href="css/main.css">
</head>
   <body>
      <div id="box"></div>
   </body>
</html>

همانطور که در کد فوق ملاحظه می شود داخل تگ <body> تگی با id یی تحت عنوان box ایجاد کرده ایم. حال در کدهای سی اس اس خود اقدام به نوشتن کدهای مرتبط با تگ <div> می کنیم:

#box {
   width:300px;
   height:200px;
   background:linear-gradient(top, #ffde57 0%, #ffdeff 100%);
}

همانطور که در کد فوق می بینیم با استفاده از Attribute های width و height ابعداد این باکس را به میزان ۳۰۰ در ۲۰۰ پیکسل تعیین می کنیم. سپس با استفاده از Attribute یی تحت عنوان background گرادیانتی را برای این باکس در نظر می گیریم. به منظور ایجاد گرادیانت می بایست از دستور linear-gradiant استفاده کرد. از آنجا که می خواهیم جهت این گرادیانت از بالا به پایین باشد داخل پرانتز ابتدا کلید واژه top به معنی بالا را می نویسیم سپس یک کاما قرار می دهیم (به خاطر داشته باشیم که علاوه بر top می توان از right، left و bottom نیز برای تغییر جهت گرادیانت استفاده نمود). پس از کاما رنگ اولیه را در نظر می گیریم و پس از آن یک فاصله قرار داده و درصد غلظت آن رنگ اولیه را مشخص می کنیم که در این مثال درصد صفر در نظر گرفته شده است. به عبارت دیگر این رنگ اولیه از شفافیت کامل شروع شده و به تدریج ادامه می یابد. مجدد یک کامای دیگر قرار می دهیم و رنگ ثانویه را پس از آن مشخص می سازیم. پس از ذخیره کردن فایل های سی اس اس و اچ تی ام ال، فایل اچ تی ام ال خود را داخل مرورگر باز می کنیم:

همانطور که در تصویر فوق می بینیم این باکس داخل مرورگر فایرفاکس نمایش داده نمی شود و دلیل آن هم این است که می بایست این دستور سی اس اس را برای مرورگرهای مختلف من جمله فایرفاکس بهینه ساخت. برای این منظور کد فوق را به صورت زیر تکمیل می کنیم:

#box {
   width:300px;
   height:200px;
   background:-moz-linear-gradient(top, #ffde57 0%, #ffdeff 100%);
}

همانطورکه در کد فوق می بینیم پیش از دستور linear-gradient دستوری تحت عنوان –moz- را اضافه کرده ایم. این بخش از کد موجب می گردد تا گرادیانت برای مرورگر فایرفاکس بهینه شود. مجدد مرورگر را به روز رسانی می کنیم:

showing_gradient_in_firefox

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

#box {
   width:300px;
   height:200px;
   background:-moz-linear-gradient(top, #ffde57 0%, #ffdeff 100%);
   background:-webkit-linear-gradient(top, #ffde57 0%, #ffdeff 100%);
   background:-o-linear-gradient(top, #ffde57 0%, #ffdeff 100%);
   background:-ms-linear-gradient(top, #ffde57 0%, #ffdeff 100%);
   background:linear-gradient(top, #ffde57 0%, #ffdeff 100%);
}

همانطورکه در کد فوق می بینیم، دستور مربوطه به گرادیانت را چند بار دیگر تکرار کرده ایم و در دستور دوم کلید واژه –webkit- را ضمیمه کرده ایم که مرتبط با مرورگرهای سافاری و گوگل کروم است، در خط بعد کلید واژه –o- را افزوده ایم که مرتبط با مرورگر اپرا است، در خط بعد کلید واژه –ms- را افزوده ایم که مرتبط با مرورگر اینترنت اکسپلورر است. در نهایت هم یک بار دیگر دستور مرتبط با گرادیانت را بدون هیچ دستور ضمیمه شده ای می نویسیم که اگر هر کدام از موارد بالا مورد استفاده مرورگر قرار نگرفت این خط از کد به عنوان جایگزین مبنا قرار داده شود.
سایت های بسیاری در ارتباط با ساخت گرادیانت هستند که خدمات خود را به صورت رایگان در اختیار طراحان سایت قرار می دهند که از جمله آن ها می توان به سایت http://www.colorzilla.com/gradient-editor اشاره نمود. در واقع این سایت در یک محیط کاملا بصری امکان ساخت گرادیانت را به طراح داده که در نهایت به سادگی می تواند کدهای ایجاد شده را کپی کرده و در فایل سی اس اس خود مورد استفاده قرار دهد.

221

اسماعیلی هستم مدیر عصر فنون. فارغ التحصیل مقطع کارشناسی ارشد رشته مهندسی فناوری اطلاعات (IT)