Linux, кодинг, митолл и прочая хрень :)

Градиенты на CSS 3

Скоро, скоро он придет и всем вебмастерам станет жить легче. Тени для текста и круглые уголки уже есть, теперь вот появилась градиентная заливка цветом. Фишка крайне полезная, у многих сайтов есть градиенты, но если раньше надо было колдовать гиф-полосками шириной в 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));
}
 

И по кругу
Как угодно можно заливку делать.
Совместимость? Ну, для старых браузеров в цсс прописана картинка, если не поймет заливку то выведет ее. Есть и другое решение — по принципу кто не с нами, тот против нас. У кого браузер не понимает таких красот, тому сайт не показывать )) Или вообще завешивать его ))
Вот тут подсмотрел.

5.00 avg. rating (90% score) - 1 vote
Твитнуть

26 комментариев

  • Классно))

    • By 3TAJIOH

  • Шикарная новость. Но, ИМХО, не хватает списка браузеров и версий которые понимают эту фишку.
    Все таки надо ориентироваться на массовость.

  • В ие последнее время дырок много находят, глядишь в скором времени юзеры на браузеры с нормальной поддержкой css3 пересядут, вот тогда вообще красота будет.

  • Хорошая новость. Присоеденюсь Vinaction насчет списка браузеров и версий

    • By Ser

  • Вот это да! Думал, что кроме как картинками, по-другому этого не сделать. Оказалось что ошибался. Алексей Валеев, а когда юзеры пересядут на один и тот же браузер с поддержкой css3, тогда наступит рай для верстальщиков =)

    • By Foxelm

  • Хм… Когда пересядут — найдётся один, которому что-то не понравится в функционале, и он сделает свой. Потом сколотит команду, начнёт завоёвывать себе приверженцев… Эх, не будет у нас полной совместимости:(

  • Красота, но я статистику посещения своего сайта глянул — половина пользователей не оценит, как минимум. Так что только с дублированием картинкой и никак иначе.

    • By Fazgen

  • Чувствую, что скоро графические редакторы будут совсем не нужны.

    • By Пира

  • CSS творит чудеса, но все равно, есть задачи, где без графики невозможно обойтись. А если и можно, то я, как правило, выбираю более легкий путь, не люблю заморачиваться, так как код получается огромным и не всегда удается учесть все нюансы. Статья полезная, но ее применение придется отложить до момента, пока исчезнут последние сторонники IE 6.

    • By Max

    • Max, адрес блога у тебя прям кодерский, IF.ua )) Это что за город на IF ?

  • Alex Volkov, :), Ивано-Франковск, на западе Украины.

    • By Max

  • Прикольно, если только разработчики браузеров в очередной раз не выпендрятся и не будут отображать все это по-разному

    • By Серж

  • все сведется как обычно к проблемам в IE по моему )

    • By Rishka

  • Шикарно! Честно говоря, не знала, что так можно сделать. Правда, приписка «только в продвинутых браузерах» настораживает. Опять мозилла и опера? А остальных будем ждать, «когда подтянутся». Жаль…

    • By ivolga

  • Закрывать сайт от «левых» браузеров конечно не стоит, чтоб не потерять часть аудитории 🙂 , но кроссбраузерность обеспечивать все-таки нужно. Радует, что вроде как дождались — все больше браузеров начинают правильно отображать фишки CSS3. Еще немного и можно писать новую шкурку со всеми прелестями новой CSS ))

  • Действительно здорово, но жаль, что последней версией браузера пользуются процентов 15-20, так что воспользоваться новшествами все равно не получится.

  • Класс! Все идет к тому, чтобы использовать как меньше графики, а это естественно только плюс.. Правда и верстальщикам обучаться новым приемам необходимо 🙂 Спасибо!

    • By Alexseo

  • А я пользуюсь таким способом:

    .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 */
    }

  • ух ты, даже в ие работают )

    • By Poetik

  • Да… жить вебмастерам становится проще 🙂

  • Александр, а можно с CSS3 сделать 3х цветный градиент под углом? как здесь http://emfire.ru/

    • By betaboy

    • betaboy,такие градиенты я не встречал, но вот видел одну статейку вот тут http://css-tricks.com/css3-gradients/, там описывается, что мозилла и вебкит понимают некий stop, которому можно указать свободный цвет и получится трехцветный градиент.

  • Простите, но так и хочется крикнуть «Ну бля 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=''…..

    • By Me

  • я использую для меню следующее

    background: -webkit-gradient(linear, left top, left bottom, from(#073d6e), to(#6CCAEA)) !important;
    background: -moz-linear-gradient(center bottom , #073d6e 80%, #6CCAEA 20%) !important;
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr=’#073d6e’, endColorstr=’#6CCAEA’);
    в Opera не хочет работать хоть тресни. уже замахался

  • при чём тут CSS3?

    • By qnub

  • Пора дополнить статью, уже Opera и IE это умеют делать
    Линейные градиенты на CSS3

    • By Filsh
css.php