گرادینت با CSS3 در مرورگر فایرفاکس
در این پست به شما نحوه استفاده درست از یک پس زمینه با گرادينت را تنها با استفاده از CSS در طراحی وب سایت را نشان خواهيم داد.اين امكان در حال حاضر در تمامي مرورگر ها در دسترس نيست اما رسما به عنوان بخشی خاصيت هاي CSS3 معرفی شده است و اكثر مرورگرهاي جديد از اين خاصيت پشتيباني مي كنند.
به عنوان مثال:
#element {
background: -moz-linear-gradient(top, #92989b, #2a2a2a);
background: -webkit-gradient(linear, left top, left bottom, from(#92989b), to(#2a2a2a));
FILTER: progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#92989b, endColorstr=#2a2a2a);
width:250px;
height:90px;
}
همانطور كه مي دانيد براي اكثر خواص css3 بايد پيشوندهايي را تعريف كنيم.
مرورگر فايرفاكس
دو نوع گرادینت radial و linear داریم.
background: -moz-linear-gradient(left, red, white);
رنگ قرمز از سمت چپ آغاز مي شود و در نهايت به رنگ سفيد مي رسد.
background:-moz-linear-gradient(left top,red,white);
اين گرادينت از سمت چپ آغاز مي شود اين در حالي است كه اكثر رنگ در بالا قرار دارد.
background:-moz-linear-gradient(right 85deg, blue, white);
background:-moz-linear-gradient(10deg,red,white);
براي زاويه دادن از deg استفاده مي كنيم.
background:-moz-linear-gradient(top,white 80%,orange,blue);
ColorStop درصد رنگ مورد نظر هست يا همان loction فوتوشاپ مانند كد فوق
background: -moz-linear-gradient(left, red, orange, yellow, green, blue);
مجموعه اي از رنگ ها را در بين كاما قرار مي دهيم (رنگين كمان)
background: -moz-linear-gradient(right, rgba(255,255,255,0), rgba(255,255,255,1)), url(/image/b12.jpg);
با گذاشتن عكس با RGB لايه شفاف بسازيد
اما نوع دوم گرادينت در مرورگر فايرفاكس Radial
background:-moz-radial-gradient(red 30%,yellow 25%,black 50%);
خب الان دايره اي داريم با پس زمينه مشكي هسته اين دايره قرمز رنگ و دور دايره قرمز رنگ, زرد است.
background:-moz-repeating-linear-gradient(top left 30deg, red, blue 8px, white 5px, white 10px);
به اين صورت مي توانيم رنگ ها را در گرادينت تكرار كنيم.
background: -moz-repeating-radial-gradient(black, black 5px, white 5px, white 10px);
مانند مثال بالا به صورت Radial تكرار خواهد شد.
امیدواریم این پست مورد استفاده شما عزیزان قرار گرفته شده باشد.
هیچ نظری موجود نیست:
ارسال یک نظر