Градиенты на CSS 3
Мар 02
Скоро, скоро он придет и всем вебмастерам станет жить легче. Тени для текста и круглые уголки уже есть, теперь вот появилась градиентная заливка цветом. Фишка крайне полезная, у многих сайтов есть градиенты, но если раньше надо было колдовать гиф-полосками шириной в 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));
}
И по кругу
Как угодно можно заливку делать.
Совместимость? Ну, для старых браузеров в цсс прописана картинка, если не поймет заливку то выведет ее. Есть и другое решение – по принципу кто не с нами, тот против нас. У кого браузер не понимает таких красот, тому сайт не показывать )) Или вообще завешивать его ))
Вот тут подсмотрел.
Мар 02 at 21:27
Классно))
Мар 03 at 15:40
Шикарная новость. Но, ИМХО, не хватает списка браузеров и версий которые понимают эту фишку.
Все таки надо ориентироваться на массовость.
Мар 04 at 00:52
В ие последнее время дырок много находят, глядишь в скором времени юзеры на браузеры с нормальной поддержкой css3 пересядут, вот тогда вообще красота будет.
Мар 06 at 14:36
Хорошая новость. Присоеденюсь Vinaction насчет списка браузеров и версий
Мар 06 at 15:34
Вот это да! Думал, что кроме как картинками, по-другому этого не сделать. Оказалось что ошибался. Алексей Валеев, а когда юзеры пересядут на один и тот же браузер с поддержкой css3, тогда наступит рай для верстальщиков =)
Мар 08 at 02:47
Хм… Когда пересядут – найдётся один, которому что-то не понравится в функционале, и он сделает свой. Потом сколотит команду, начнёт завоёвывать себе приверженцев… Эх, не будет у нас полной совместимости:(
Мар 11 at 13:55
Красота, но я статистику посещения своего сайта глянул – половина пользователей не оценит, как минимум. Так что только с дублированием картинкой и никак иначе.
Мар 13 at 05:41
Чувствую, что скоро графические редакторы будут совсем не нужны.
Мар 15 at 17:22
CSS творит чудеса, но все равно, есть задачи, где без графики невозможно обойтись. А если и можно, то я, как правило, выбираю более легкий путь, не люблю заморачиваться, так как код получается огромным и не всегда удается учесть все нюансы. Статья полезная, но ее применение придется отложить до момента, пока исчезнут последние сторонники IE 6.
Мар 15 at 19:03
Max, адрес блога у тебя прям кодерский, IF.ua )) Это что за город на IF ?
Мар 15 at 19:05
Alex Volkov,
, Ивано-Франковск, на западе Украины.
Мар 16 at 20:52
Прикольно, если только разработчики браузеров в очередной раз не выпендрятся и не будут отображать все это по-разному
Мар 19 at 17:50
все сведется как обычно к проблемам в IE по моему )
Мар 22 at 10:09
Шикарно! Честно говоря, не знала, что так можно сделать. Правда, приписка «только в продвинутых браузерах» настораживает. Опять мозилла и опера? А остальных будем ждать, «когда подтянутся». Жаль…
Апр 05 at 22:20
Закрывать сайт от «левых» браузеров конечно не стоит, чтоб не потерять часть аудитории
, но кроссбраузерность обеспечивать все-таки нужно. Радует, что вроде как дождались – все больше браузеров начинают правильно отображать фишки CSS3. Еще немного и можно писать новую шкурку со всеми прелестями новой CSS ))
Апр 10 at 16:00
Действительно здорово, но жаль, что последней версией браузера пользуются процентов 15-20, так что воспользоваться новшествами все равно не получится.
Апр 19 at 12:10
Класс! Все идет к тому, чтобы использовать как меньше графики, а это естественно только плюс.. Правда и верстальщикам обучаться новым приемам необходимо
Спасибо!
Апр 24 at 10:01
А я пользуюсь таким способом:
.box_gradient
{
background-image: -moz-linear-gradient(top, #444444, #999999); /* FF3.6 */
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #444444),color-stop(1, #999999)); /* Saf4+, Chrome */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#444444′, endColorstr=’#999999′); /* IE6,IE7 */
-ms-filter: «progid:DXImageTransform.Microsoft.gradient(startColorstr=’#444444′, endColorstr=’#999999′)»; /* IE8 */
}
Май 10 at 20:55
ух ты, даже в ие работают )
Июн 01 at 14:51
Да… жить вебмастерам становится проще
Июл 11 at 14:03
Александр, а можно с CSS3 сделать 3х цветный градиент под углом? как здесь http://emfire.ru/
Июл 12 at 21:44
betaboy,такие градиенты я не встречал, но вот видел одну статейку вот тут http://css-tricks.com/css3-gradients/, там описывается, что мозилла и вебкит понимают некий stop, которому можно указать свободный цвет и получится трехцветный градиент.
Июл 26 at 02:07
Простите, но так и хочется крикнуть «Ну бля M$ так и хочется выебнуться!!! >_<"
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#444444′, endColorstr=’#999999′); /* IE6,IE7 */
-ms-filter: «progid:DXImageTransform.Microsoft.gradient(startColorstr=’#444444′, endColorstr=’#999999′)»; /* IE8 */
а дальше будет:
-ms-world-oppressor-filter:Trans(Start=''…..