در این پست به شما نحوه استفاده درست از یک پس زمینه با گرادينت را تنها با استفاده از 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);
اما نوع دوم گرادينت در مرورگر فايرفاكس 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 تكرار خواهد شد.
امیدواریم این پست مورد استفاده شما عزیزان قرار گرفته شده باشد.
هیچ نظری موجود نیست:
ارسال یک نظر