CSS3 с погружением

    CSS3 видели и пробовали все, кого он мог заинтересовать. И закругленные уголки и падающие тени мы уже можем генерировать без лишнего труда.

    Но это только поверхностный уровень. Мне пришлось разобраться с новыми возможностями браузеров более подробно, чтобы ответить на возникшие вопросы типа: насколько кроссбраузерны градиенты со множеством цветовых переходов, где и как можно применять сразу несколько теней к блоку, для каких конкретно браузеров применяются префиксы свойств и т.п.

    Кроме того, меня интересовала поддержка CSS3 на мобильных платформах, неизученные возможности CSS3, а также генераторы, которые создают кроссбраузерный код. Я попробовал восполнить некоторые пробелы и собрать полезную информацию для тех, кто еще только готовится к погружению.

    Браузеры, поддерживающие свойства перечислены в виде CSS комментариев. Генераторы и инструменты чаще всего могут выполнять сразу несколько функций, поэтому в таких случаях я указывал их только там, где они, по-моему, справляются лучше всего.

    Linear-gradient


    На самом деле существует сразу несколько видов CSS3 градиентов. Это самый простой градиент.
    div {
      background-color: #444444;
      background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999)); /* Safari 4-5, Chrome 1-10, iOS 3.2-4.3, Android 2.1-3.0 */
      background-image: -webkit-linear-gradient(top, #444444, #999999); /* Chrome 10+, Safari 5.1+, iOS 5+, Android 4+ */
      background-image: -moz-linear-gradient(top, #444444, #999999); /* Firefox 3.6+ */
      background-image: -ms-linear-gradient(top, #444444, #999999); /* IE 10+ */
      background-image: -o-linear-gradient(top, #444444, #999999); /* Opera 11.10+ */
      background-image: linear-gradient(to bottom, #444444, #999999);
    }

    Кроме указания начального и конечного цветов, градиенты позволяют изменять угол наклона, позицию начала и завершения цветового перехода, количество цветов и направление градиента.

    У Safari до версии 5 и у Chrome до версии 10 был свой собственный синтаксис, да и IE 10 с Opera добавляют свои префиксы, увеличивая количество кода.

    Все возможности градиентов поддерживаются теми браузерами, которые могут отображать CSS3 градиенты, даже если некоторые генераторы предлагают нам только переход между двумя цветами.


    Repeating-linear-gradient


    Позволяет повторять градиент, дает возможность создавать фоновые паттерны.

    div {
      background-color: #444444;
      background-image: -webkit-repeating-linear-gradient(top, #444444 18%, #999999 25%); /* Chrome 10+, Safari 5.1+, iOS 5+, Android 4+ */
      background-image: -moz-repeating-linear-gradient(top, #444444 18%, #999999 25%); /* Firefox 3.6+ */
      background-image: -ms-repeating-linear-gradient(top, #444444 18%, #999999 25%); /* IE 10+ */
      background-image: -o-repeating-linear-gradient(top, #444444 18%, #999999 25%); /* Opera 11.10+ */
      background-image: repeating-linear-gradient(top, #444444 18%, #999999 25%);
    }


    Radial-gradient


    Круговой градиент. Так же можно иметь несколько цветовых переходов, можно определять точку начала градиента (не обязательно из центра круга).

    div {
      background: #444444;
      background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#444444), color-stop(100%,#999999)); /*  Chrome 1-10, Safari 4+, iOS 3.2-4.3, Android 2.1-3.0 */
      background: -webkit-radial-gradient(center, ellipse cover, #444444 0%,#999999 100%); /* Chrome 10+, Safari 5.1+, iOS 5+, Android 4+ */
      background: -moz-radial-gradient(center, ellipse cover, #444444 0%, #999999 100%); /* Firefox 3.6+ */
      background: -o-radial-gradient(center, ellipse cover, #444444 0%,#999999 100%); /* Opera 11.6+ */
      background: -ms-radial-gradient(center, ellipse cover, #444444 0%,#999999 100%); /* IE 10+ */
      background: radial-gradient(center, ellipse cover, #444444 0%,#999999 100%);
    }

    Opera не поддерживала круговой градиент до версии 11.6. В остальном ситуация такая же, как с линейным градиентом.

    Инструменты:


    1. gradients.glrzad.com выдает кроссбраузерный код, можно создавать множество цветовых переходов
    2. www.colorzilla.com/gradient-editor самый навороченный генератор. Можно создавать линейные и круговые градиенты, есть возможность выбора формата записи цветов, множество готовых градиентов.
    3. lea.verou.me/css3patterns галерея CSS3 паттернов. Можно посмотреть код каждого паттерна.


    Множественные фоны


    Это возможность назначать сразу несколько фоновых изображений одному элементу.
    div {
      background: url(fallback.png) no-repeat 0 0;
      background: url(foreground.png) no-repeat 0 0, url(middle-ground.png) no-repeat 0 0, url(background.png) no-repeat 0 0; /* Firefox 3.6+, Safari 1.3+, Chrome 2+, IE 9+, Opera 10.5+, iOS 3.2+, Android 2.1+ */
    }
    Не стоит забывать о браузерах, не поддерживающих множественные фоны.

    Порядок фонов такой: от верхнего к нижнему, то есть самый нижний фон нужно прописывать в конце. Вместо фоновых картинок можно прописывать и CSS3 градиенты.


    Border-radius


    Закругленные уголки у блока. Все просто, если нужен одинаковый радиус закругления.

    div {
      -webkit-border-radius: 12px; /* Safari 3-4, iOS 1-3.2, Android ≤1.6 */
      -moz-border-radius: 12px; /* Firefox 1-3.6 */
      border-radius: 12px; /* Opera 10.5+, IE 9+, Safari 5, Chrome, Firefox 4+, iOS 4+, Android 2.1+ */
    }

    Все производители уже отказались от вендорных префиксов в последних версиях браузеров.


    Но если у разных углов должен быть разный радиус, то нужно перечислить радиусы для каждого угла.

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

    div {
      -moz-border-radius: 15px 30px 45px 60px;
      -webkit-border-radius: 15px 30px 45px 60px;
      border-radius: 15px 30px 45px 60px;
    }




    Интересной возможностью является передача пар значений радиусов для каждого угла. Так можно добиться более сложных форм, чем просто закругления:

    div {
      border-top-left-radius: 5px 30px;
      border-top-right-radius: 30px 60px;
      border-bottom-left-radius: 80px 40px;
      border-bottom-right-radius: 40px 100px;
    }



    Если все одинковы:

    div {
      border-radius: 8px / 13px;
    }



    Инструменты:



    1. css3please.com генерирует множество всего.
    2. border-radius.com специализированный генератор закругленных углов. Удобно делать углы разного разиуса.
    3. css3generator.com генерирует много всего. Для уголков дает возможность выбора между одинаковым радиусом и разными.
    4. layerstyles.org/builder.html имитирует интерфейс Фотошопа. Удобно генерировать не только уголки.


    Box-shadow


    Падающие тени от блоков.

    div {
      -webkit-box-shadow: 0px 0px 4px #000000; /* Safari 3-4, iOS 4.0.2-4.2, Android 2.3+ */
      -moz-box-shadow: 0px 0px 4px #000000; /* Firefox 3.5-3.6 */
      box-shadow: 0px 0px 4px #000000; /* Opera 10.5+, IE 9+, Firefox 4+, Chrome 6+, iOS 5+ */
    }



    Тени можно направить вовнутрь элемента
    div {
      -webkit-box-shadow: inset 6px 6px 12px #000000;
      -moz-box-shadow: inset 6px 6px 12px #000000;
      box-shadow: inset 6px 6px 12px #000000;
    }




    Можно применить сразу несколько теней к одному элементу.
    div {
      -webkit-box-shadow: inset 6px 6px 12px #000000, 4px 6px 3px #dddddd;
      -moz-box-shadow: inset 6px 6px 12px #000000, 4px 6px 3px #dddddd;
      box-shadow: inset 6px 6px 12px #000000, 4px 6px 3px #dddddd;
    }




    Еще одним мало используемым значением является spread-radius, для изменения которого нужно просто добавить его сразу после значения размытия тени. Положительное значение увеличивает тень, отрицательное значение сделает размеры тени меньше размера блока, от которого тень падает.

    div {
      -webkit-box-shadow: 0 5px 5px -6px #000000;
      -moz-box-shadow: 0 5px 5px -6px #000000;
      box-shadow: inset 0 5px 5px -6px #000000;
    }




    Внутренние тени, множественные тени и spread-radius можно применять во всех браузерах, которые поддерживают простые CSS3 тени.

    Практически все производители уже отказались от вендорных префиксов в последних версиях браузеров.

    Инструменты:


    1. css3maker.com многофункциональный генератор. Можно делать внутренние тени, менять цвета.
    2. www.css3.me все настройки можно раскрывать по мере необходимости
    3. css3generator.com можно сразу настроить цвет тени в RGBA


    RGBA


    Это возможность использовать альфа-прозрачность для цветов. В отличие от свойства opacity можно применить и к шрифту и к бордерам и к фону блока без изменения прозрачности содержимого блока.

    div {
      background: rgb(200, 54, 54);
      background: rgba(200, 54, 54, 0.5); /* Firefox 3+, Chrome, Safari 3+, Opera 10.10+, IE 9+, iOS 3.2+, Android 2.1+ */
    }

    Для кроссбраузерности стоит указать цвет без альфа-прозрачности, либо путь к прозрачному PHG.

    Существующий формат записи HSLA можно использовать в тех же версиях браузеров, которые поддерживаю RGBA.

    Инструменты:


    hex2rgba.devoth.com превращает HEX в RGBA



    Псевдоэлементы


    Генерация контента в CSS через :before/:after. Используется как для добавления символов и целых слов в документ, так и для создания новых блоков, которые можно использовать для оформления.

    div:before,
    div:after { /* Firefox 3.5+, Chrome, Safari 1.3+, Opera 6+, IE 8+, iOS 3.2+, Android 2.1+ */
      content:"";
      display:block;
    }

    Поддержка уже очень хорошая, даже на мобильных платформах срабатывают без проблем.

    Интересно, что CSS3 требует применения синтаксиса с двумя двоеточиями (::before / ::after) но IE8 требует использования псевдоэлементов с одним двоеточием.


    Заключение


    Получилось выяснить положение с поддержкой CSS3 разными браузерами. Удалось найти множество инструментов. Не обнаружилось генератора для закруглений с парами значений для угла, генератора, который может создавать сразу несколько теней у блока, а также генератора, который объединял бы все необходимые функции, но при этом был бы прост и имел хороший интерфейс.

    Конечно, есть еще множество свойств, например border-image или transition, но они не так широко используются, либо требуют еще более глубокого изучения, поэтому не вошли в этот обзор. Но инструменты или информацию найти можно попытаться практически для любого случая.

    Источники информации о поддержке свойств браузерами

    caniuse.com
    www.css3files.com
    css3please.com

    upd Для желающих автоматизировать процесс создания префиксов написана другая статья.

    And for those of you who don't speak Russian, this article in English.
    Ads
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More

    Comments 30

      +2
      С нетерпением жду продолжения — было бы очень интересно почитать про transition.
      +4
      «Интересной возможностью является передача пар значений радиусов для каждого угла» ->
      Вообще шокировало. В первый раз слышу. Спасибо!
        +2
        Спасибо, что собрали все в одной статье.
          0
          Если не сложно — хотел-бы попросить вас добавить сводную таблицу:
          эффект, метод реализации, браузер (поддержка в нем этого метода реализации).
          Это было-бы весьма полезно, и достаточно хорошо выглядело-бы визуально
            +4
            см. caiuse, в конце статьи.
            Нет смысла добавлять таблицу здесь, т.к. она через неделю (день, час) устареет.
              0
              Да, тут таблица лучше всего. Просто была необходимость в голове все по местам расставить, заодно поделился с теми, кто только начал изучать
            0
            Инструмент от MS
            CSS Gradient Background Maker
              0
              www.colorzilla.com/gradient-editor/ лучше его для градиентов пока не видно. Но когда пробовал сделать круговой (или радиальный) все равно вручную пришлось потом код править и доки изучать developer.mozilla.org/en/CSS/radial-gradient (например).

              Так что идеального генератора пока не сгенирировали
              +1
              Я на градиентах делал картинки: bolknote.ru/2011/11/12/~3478 (на слова про экономию внимания не обращайте, я там ошибся).

              А вот пример картинки с радиальным градиентом: bolknote.ru/files/webkit-purecss-image.html (только для WebKit).
                0
                У меня картинка с примера при увеличении масштаба покрывается желтой решеткой. Муар?
                  +1
                  :) какие-то огрехи округления. Возможно не на круговых градиентах не будет его, лень проверять :)
                +3
                http://css3clickchart.com/#word-wrap — еще один сервис с описаниями и наглядными представлениями различных CSS3 свойств.
                http://westciv.com/tools/gradients/ — неплохая штука для генерации градиентов.
                http://nerdi.net/ — а здесь собраны многие инструменты и ресурсы для веб-разработки.
                • UFO just landed and posted this here
                  • UFO just landed and posted this here
                      +1
                      Можно добавить еще text-shadow.
                        –1
                        Интересно, что WebKit для Android и iOS становится своего рода аналогом MSIE для Windows.

                        Помните, как приходилось воздерживаться от целого ряда новинок (или подыскивать удовлетворительные костыли) оттого, что все они не работали во MSIE 6 под Windows XP?

                        Ну дык вот теперь совершенно так же поневоле придётся записывать -webkit-gradient, а не то не заработает в iOS 3.2 — 4.3 и в Android 2.1 — 3.0…
                          +1
                          Автору: есть псевдоэлементы и есть псевдоклассы.

                          CSS selector для псевдоэлементов пишется так: elem::before, elem::after, elem::first-line, elem::marker и т.д. Смотрим: www.w3.org/TR/selectors/#pseudo-elements

                          Элементы это сущности (boxes как правило) сгенерированные CSS процессором дополнительно или в помощь отображению конкретного DOM элемента.

                          Псевдо-классы же есть средство описания стиля отображения(rendering) run-time состояний самих DOM и псевдо- элементов. Примеры: elem:hover, elem:visited, elem:invalid, etc.

                            +1
                            Спасибо, но вроде бы в статье путаницы и с ними не было. Специально проверил, все своими именами названо.

                            Проблема-то в том, что IE8 не понимает псевдоэлементов с двумя двоеточиями, так что придется какое-то время так же как псевдоклассы их оформлять.
                            • UFO just landed and posted this here
                              +1
                              -webkit-gradient
                              -webkit-linear-gradient
                              -moz-linear-gradient
                              -ms-linear-gradient
                              -o-linear-gradient
                              linear-gradient

                              Это какое-то издевательство со стороны разработчиков браузеров. Почему всем нельзя просто использовать последний вариант?
                                +1
                                Да потому, что вариант без префикса является стандартом. Но пока стандарт не сформирован, практика употребления того или иного свойства CSS может изменяться. Префикс позволяет записать свойство CSS таким способом, который понятен прежним браузерам, появившимся до формирования стандарта и понимающих только префиксную форму, бытовавшую в момент их появления.

                                Так, например, чуть выше я посетовал на то, что нам поневоле придётся долго-долго ещё записывать не одну только современную форму этого свойства, но и «-webkit-gradient» — для того, чтобы свойства заработали в популярных прежних системах (в iOS 3.2 — 4.3 и в Android 2.1 — 3.0), появившихся до формирования стандарта.

                                Однако, если бы свойство с самого начала называлось «linear-gradient», то тогда всем нам приходилось бы ещё хуже: вообще нельзя было бы записать нынешнюю форму свойства так, чтобы она заработала в iOS 3.2 — 4.3 и в Android 2.1!

                                Я очень рад тому, что разработчикам WebKit хватило ума выбрать меньшее из двух зол.
                                +2
                                почему все — да просто вообще ВСЕ для box-shadow забывают про 2-й радиус

                                box-shadow: none | <shadow> [,<shadow>]*
                                where <shadow> is defined as:
                                inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? ? ]

                                box-shadow: 0 0 5px 10px #f00;

                                что? никто не пробовал? ))
                                  +1
                                  сори за офтоп и такой «широкий» комент — предпросмотр комента ВООБЩЕ не соответсвует действительности… даааа (
                                    +1
                                    А ведь полезная может стать штука. По сути, если добавить еще одно значение к параметрам тени, то это и будет spread-radius. Можно тень делать шире элемента или наоборот, уже элемента. Есть в статье на css-tricks

                                    За одно нашел на сайте мозиллы обсуждение возмножного spread-radius для text-shadow
                                      –1
                                      Spread radius поддерживается, кажется, только в последних версиях Internet Explorer.
                                      • UFO just landed and posted this here
                                        0
                                        Вот замечательная статья на тему исследования box-shadow, которой, между прочим, уже почти полтора года. За это время наверняка всё то, о чём идёт речь в статье, изменилось в лучшую сторону.
                                      • UFO just landed and posted this here
                                          +1
                                          По сути да, мы можем добиться того же эффекта, что и repeating-linear-gradient, если ограничить background-size, то есть повторяется уже не градиент по большому фону, а маленький фон с градиентом.

                                          Но в этой статье на 24 ways можно увидеть, как repeating-linear-gradient решил проблему с диагональным узором (так как повторяется не фон, то изменение угла наклона не разбивает диагональные линии на квадраты как было бы с background-size), причем код получился элегантнее.

                                          Думаю, еще случаи применения для обоих найдутся.

                                        Only users with full accounts can post comments. Log in, please.