8
تشکر

گرادینت ها در CSS3

گرادینت ها در CSS

گرادینت ها در 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%);

نظرات این مطلب بسته است.