Скоро, скоро он придет и всем вебмастерам станет жить легче. Тени для текста и круглые уголки уже есть, теперь вот появилась градиентная заливка цветом. Фишка крайне полезная, у многих сайтов есть градиенты, но если раньше надо было колдовать гиф-полосками шириной в 1пиксель, просто широкими картинками в шапку, то теперь можно сделать все легко и просто. Видно только в продвинутых браузерах
#linearBg1 {
height: 100px;
background-color: #1a82f7;
background-image: -moz-linear-gradient(100% 100% 180deg, #2F2727, #1a82f7) !important;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727)) !important;
background-image: url(images/linear_bg_1.png);// fallback image
}
И слева направо
#linearBg2 {
height: 100px;
background-color: #1a82f7; /* fallback color */
background-image: url(images/linear_bg_2.png); /* fallback image */
background-image: -moz-linear-gradient(100% 100% 90deg, #2F2727, #1a82f7);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727));
}
И сверху вниз
#radialBg {
width: 100px;
height: 100px;
background-image: url(images/radial_bg.png);// fallback image
background-position: center center;
background-image: -moz-radial-gradient(center 45deg, circle closest-corner, #2F2727 0%, #1a82f7 100%);
background-image: -webkit-gradient(radial, center center, 10, center center, 80, from(#2F2727), to(#2F2727));
}
И по кругу
Как угодно можно заливку делать.
Совместимость? Ну, для старых браузеров в цсс прописана картинка, если не поймет заливку то выведет ее. Есть и другое решение — по принципу кто не с нами, тот против нас. У кого браузер не понимает таких красот, тому сайт не показывать )) Или вообще завешивать его ))
Вот тут подсмотрел.
26 responses
Do you want to comment?
Comments RSS and TrackBack Identifier URI ?
Trackbacks