گرادینت در CSS3 – فایرفاکس
578 روز پیش
پويا صادقى , آموزش CSS
با توجه به آموزش ساخت گرادینت در CSS3 برای مرورگر های کروم و سافاری (موتور Webkit) امروز گرادینت رو در مرورگر فایرفاکس (موتور Gecko) بررسی میکنیم:
این ویژگی در Firefox 3.6 اضافه شد (+دانلود فایرفاکس)
درواقع ساخت گرادینت در فایرفاکس خیلی آسونتر و ساده تر از وبکیتــه.
باز هم 2 نوع گرادینت radial و linear داریم.
Linear
background: -moz-linear-gradient(left, blue, white);
که از بالا شروع میشه و از آبی به سفید میرسه.
background: -moz-linear-gradient(left top, blue, white);
از گوشه چپ-بالا شروع میشه.
و برای تعیین زاویه های دیگه:(مثلا 20 درجه)
background: -moz-linear-gradient(left 20deg, black, white);
background: -moz-linear-gradient(90deg, red, white);
برای Gecko هم مثل Webkit میتونید از ColorStop ها استفاده کنید. 
ColorStop ها قسمتی از گرادینت که رنگ باید تغییر کنه رو مشخص میکنن. تقریبا مثل همون چیزی که تو نرم افزار های گرافیکی هست:
مثال:
background: -moz-linear-gradient(top, blue, white 80%, orange);
ساخت طیف رنگین کمان با CSS:
background: -moz-linear-gradient(left, red, orange, yellow, green, blue);
حتی میتونیم با استفاده از رنگبندی RGBA که قبلا درموردش توضیح دادیم، شفافیت (Transparency) ایجاد کنیم
background: -moz-linear-gradient(right, rgba(255,255,255,0), rgba(255,255,255,1)), url(my_image.jpg);
Radial
background: -moz-radial-gradient(red, yellow, #1e90ff);
تعیین ColorStop ها برای گرادینت Radial:
در کد زیر
background: -moz-radial-gradient(red 5%, yellow 25%, #1E90FF 50%);
گرادینت های تکرار شدنی:
با این ویژگی میتونیم رنگ ها رو تکرار کنیم:
background: -moz-repeating-linear-gradient(top left -45deg, red, red 5px, white 5px, white 10px);
توضیح کد بالا:
گرادینت از گوشه بالا و سمت چپ، با زاویه 45 درجه و با رنگ قرمز شروع میشه؛وقای به 5پیکسل رسید، (color-stop پنج پیکسل) رنگ قرمز stop میشه و رنگ سفید از پیکسل پنجم شروع میشه~ تا پیکسل دهم میره و دوباره از اول تکرارمیشه
همینطور برای radial :
background: -moz-repeating-radial-gradient(black, black 5px, white 5px, white 10px);
که مثل قبلیه ، فقط به صورت repeating-radial و با رنگ سیاه.
ترجمه از سایت موزیلا
