8
تشکر
گرادینت ها در CSS3
گرادینت ها در CSS
همانطور که میدانید قابلیت جدیدی که در CSS3 اضافه شده است و بسیار در نزد طراحان وب معروف است استفاده از گرادینت ها یا طیف رنگی است.
در این مطلب نحوه استفاده از این قابلیت را خواهیم دید.
همواره درست نمایش دادن یک سایت در مرورگرهای مختلف یکی از دغدغه طراحان وب بوده است. در معقوله گرادینت ها نیز این دردسر همراه ما خواهد بود.
نمایش یک گرادینت در مرورگری Chrome و Safari با استفاده از پیشوند -webkit-
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(222,224,220,255)), color-stop(1, rgba(255,255,255,255)));
نمایش یک گرادینت در مرورگرهای Firefox با استفاده از پیشوند -moz-
background-image: -moz-linear-gradient(top, rgba(222,224,220,255) 0%, rgba(238,239,237,255) 50%, rgba(255,255,255,255) 100%);
نمایش یک گرادینت در مروگرهای Opera با استفاده از پیشوند -o-
background-image: -o-linear-gradient(top, rgba(222,224,220,255) 0%, rgba(238,239,237,255) 50%, rgba(255,255,255,255) 100%);
نمایش یک گرادنیت در مروگر IE9 با استفاده از فیلتر
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dee0dc',endColorstr='#eeefed'endColorstr='#ffffff');
نمایش یک گرادنیت بر اساس استاندارد W3
background-image: linear-gradient(top, rgba(222,224,220,255) 0%, rgba(238,239,237,255) 50%, rgba(255,255,255,255) 100%);
نظرات این مطلب بسته است.