Изучаем CSS-градиенты за час

Кладовая теории, в которой собран опыт многих администраторов которые добились успехов в продвижении форумов.
Оптимизация phpbb3 | В каких цветах оформить форум? | Бесплатная раскрутка форума | Поисковая оптимизация (SEO)
Аватара пользователя
CabinetAdmin

Изучаем CSS-градиенты за час

CabinetAdmin 16 сен 2012, 19:13 Сообщение


Вы отказываетесь использовать CSS-градиенты в своих проектах просто потому что не понимаете их, или же вас не устраивает текущая поддержка браузерами? Друзья мои, пришла пора избавиться от изображений, шириной в 1 пиксель. Если вам интересно узнать о том как использовать CSS-градиенты, эта статья для вас. Мы разберем основы синтаксиса, а затем перейдем к сложным эффектам с большим количеством советов и примеров. Изучение CSS-градиентов очень важно, поскольку их поддержка браузерами улучшается день ото дня, а мобильные браузеры изначально хорошо поддерживают CSS3.

Итак, давайте начнем.

Основной синтаксис

Первое о чем вам следует знать – это поддержка браузерами CSS-градиентов. К сожалению, на данный момент придется использовать вендорные префиксы и пользовательский фильтр для IE. Итого, мы имеем пять возможных префиксов, каждый из которых содержит свои характерные особенности, а также множественные различия между версиями браузеров: Opera (presto), Firefox (gecko), Safari / Chrome (Webkit), Konqueror (KHTML), и IE (Trident), содержащий два различных способа выполнения градиентов.

Для начала мы рассмотрим “стандартные” правила браузеров (не принимая во внимание старые правила from() to() ), а ближе к концу будет глава, посвященная IE-совместимости, поскольку его фильтры не оказывают влияния на основной код.

Основной синтаксис CSS-градиентов, выглядит следующим образом:

Код: Выделить всё

#wd { background: vendor-type-gradient( start / position , shape size, color 1, color2 [position] [, other colors / positions] ); /*** реальный пример **/ background: -moz-linear-gradient( top left, red, #c10000, #ae0000 ); background: -webkit-linear-gradient( top left, red, #c10000, #ae0000 ); background: -o-linear-gradient( top left, red, #c10000, #ae0000 ); background: -khtml-linear-gradient( top left, red, #c10000, #ae0000 ); background: -ms-linear-gradient( top left, red, #c10000, #ae0000 ); background: linear-gradient( top left, red, #c10000, #ae0000 ); }


Приведенный код даст следующий результат:
Изображение


Рассмотрим подробнее каждый из параметров:

  • Background: градиент указывается в качестве фона элемента через свойство background, точно так же, как картинка или сплошной цвет.
  • vendor –: указываем “-o” для оперы, “-moz” для Firefox, “-webkit” для safari и chrome, “-khtml” для Konqueror и “-ms” для IE.
  • type: здесь задается тип градиента, может содержать одно из двух значений “linear” или “radial”.
  • start / position: это X/Y-координаты, которые либо задают браузеру направление градиента (в этом случае top – означает сверху вниз, а left – слева направо), либо указывают точные координаты начала градиента (например заданные координаты 600px 300px, инвертируют приведенный выше пример, поскольку точка начала градиента будет расположена в правом нижнем углу блока).
  • shape: при использовании радиального градиента можно указать “circle” для круглого градиента, или оставить свойство пустым, в этом случае градиент останется в форме эллипса.
  • size: определяет размер градиента. Давайте рассмотрим его подробнее.
    Свойство size может принимать одно из шести значений: closest-side, closest-corner, farthest-side, farthest-corner, contain и cover. Рассмотрим каждое из этих свойств на примере простого радиального градиента.

Closest-side

Края градиента подогнаны к ближайшей стороне контейнера.
Изображение


Сlosest-corner

Края градиента подогнаны к ближайшему углу контейнера, в этом случае, градиент частично скрывается за границами контейнера.
Изображение


Farthest-side

Края градиента подогнаны к дальней стороне контейнера.
Изображение


Farthest-corner

Края градиента подогнаны к дальнему углу контейнера, опять же градиент частично скрыт границами. Разница со значением farthest-side почти незаметна, но все же есть.
Изображение


Contain

Градиент целиком размещается внутри контейнера, является аналогом свойства closest-side.
Изображение


Cover

Градиент полностью покрывает область контейнера, аналог свойства farthest-corner.
Изображение


Оставшиеся свойства градиента:

  • Color1: это первый цвет, цвет стартовой позиции, которую вы указали выше.
  • Colors 2, 3, 4…: вы можете указать любое количество цветов по желанию, и они равномерно будут распределены в фоне элемента, если только вы не задали свойство position
  • Positon (для цветов): если вам не нравится равномерное распределение цветов, вы можете задать свои правила для их позиционирования.

Пример пользовательского распределения цветов:

Код: Выделить всё

#wd { background: -moz-linear-gradient( top left, white, black 25% ); background: -webkit-linear-gradient( top left, white, black 25% ); background: -o-linear-gradient( top left, white, black 25% ); background: -khtml-linear-gradient( top left, white, black 25% ); background: -ms-linear-gradient( top left, white, black 25% ); background: linear-gradient( top left, white, black 25% ); }


На картинке вы можете видеть результат распределения черного и белого цвета, в соотношении 25% / 75%, диагональная линия является наглядным примером того, как браузер рассчитывает эти значения:
Изображение



Множественные градиенты

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

Синтаксис очень простой, все что нужно сделать – разделить множественные объявления градиентов, запятыми. Обратите внимание, z-index для градиентов работает в обратном порядке, поэтому самый первый градиент будет сверху.

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

Например, следующий код

Код: Выделить всё

#wd { background: -moz-linear-gradient( top left, white, transparent 25% ), -moz-linear-gradient( bottom right, white, transparent 25% ), -moz-radial-gradient( 25% 50%, circle, white, white 20%, transparent 25% ), -moz-radial-gradient( 75% 50%, contain, white, white 20%, transparent 25% ) black; background: -webkit-linear-gradient( top left, white, transparent 25% ), -webkit-linear-gradient( bottom right, white, transparent 25% ), -webkit-radial-gradient( 25% 50%, circle, white, white 20%, transparent 25% ), -webkit-radial-gradient( 75% 50%, contain, white, white 20%, transparent 25% ) black; background: -o-linear-gradient( top left, white, transparent 25% ), -o-linear-gradient( bottom right, white, transparent 25% ), -o-radial-gradient( 25% 50%, circle, white, white 20%, transparent 25% ), -o-radial-gradient( 75% 50%, contain, white, white 20%, transparent 25% ) black; background: -khtml-linear-gradient( top left, white, transparent 25% ), -khtml-linear-gradient( bottom right, white, transparent 25% ), -khtml-radial-gradient( 25% 50%, circle, white, white 20%, transparent 25% ), -khtml-radial-gradient( 75% 50%, contain, white, white 20%, transparent 25% ) black; background: -ms-linear-gradient( top left, white, transparent 25% ), -ms-linear-gradient( bottom right, white, transparent 25% ), -ms-radial-gradient( 25% 50%, circle, white, white 20%, transparent 25% ), -ms-radial-gradient( 75% 50%, contain, white, white 20%, transparent 25% ) black; background: linear-gradient( top left, white, transparent 25% ), linear-gradient( bottom right, white, transparent 25% ), radial-gradient( 25% 50%, circle, white, white 20%, transparent 25% ), radial-gradient( 75% 50%, contain, white, white 20%, transparent 25% ) black; }


дает вот такой результат:
Изображение


Эффекты градиентов

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

Мягкий световой эффект

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

Для создания тени используется следующий css, включающий правильное позиционирование элементов:

Код: Выделить всё

img { margin: 0 -60px; padding: 25px 60px 40px; background: -moz-radial-gradient( center center, contain, black, white 90% ); background: -webkit-radial-gradient( center center, contain, black, white 90% ); background: -o-radial-gradient( center center, contain, black, white 90% ); background: -khtml-radial-gradient( center center, contain, black, white 90% ); background: -ms-radial-gradient( center center, contain, black, white 90% ); background: radial-gradient( center center, contain, black, white 90% ); }


Получится вот такой результат:
Изображение


Фоновые CSS-паттерны

Существует немалое количество экспериментальных CSS-паттернов, некоторые из них уже вполне можно использовать, особенно те, что основываются на градиентах с размытым краем.

Вот пример того, как можно использовать простой фоновый паттерн, который легко можно интегрировать в свой сайт:

Код: Выделить всё

body { background: -moz-radial-gradient( center center, contain, #757575, transparent ), black; background: -webkit-radial-gradient( center center, contain, #757575, transparent ), black; background: -o-radial-gradient( center center, contain, #757575, transparent ), black; background: -khtml-radial-gradient( center center, contain, #757575, transparent ), black; background: -ms-radial-gradient( center center, contain, #757575, transparent ), black; background: radial-gradient( center center, contain, #757575, transparent ), black; background-size: 100% 30px; }


Получаем вот такой фон:
Изображение


Свойство background-size контролирует высоту и ширину полосок, можно поэкспериментировать с разными значениями, и посмотреть какой получится результат.


CSS-рисование

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

С помощью следующего кода, мы нарисуем простое, испуганное лицо, которое можно отображать для пользователей IE:

Код: Выделить всё

#wd { position: relative; width: 450px; height: 400px; margin: 20px auto; background: -moz-radial-gradient( 25% 30%, contain, black, black 4%, white 5%, white 24%, transparent 25% ), -moz-radial-gradient( 75% 30%, contain, black, black 4%, white 5%, white 24%, transparent 25% ), -moz-radial-gradient( 50% 50%, contain, #e19b92, #e19b92 9%, transparent 10% ), -moz-radial-gradient( 50% 75%, contain, black, black 24%, transparent 25% ) #f3c2bb; background: -webkit-radial-gradient( 25% 30%, contain, black, black 4%, white 5%, white 24%, transparent 25% ), -webkit-radial-gradient( 75% 30%, contain, black, black 4%, white 5%, white 24%, transparent 25% ), -webkit-radial-gradient( 50% 50%, contain, #e19b92, #e19b92 9%, transparent 10% ), -webkit-radial-gradient( 50% 75%, contain, black, black 24%, transparent 25% ) #f3c2bb; background: -o-radial-gradient( 25% 30%, contain, black, black 4%, white 5%, white 24%, transparent 25% ), -o-radial-gradient( 75% 30%, contain, black, black 4%, white 5%, white 24%, transparent 25% ), -o-radial-gradient( 50% 50%, contain, #e19b92, #e19b92 9%, transparent 10% ), -o-radial-gradient( 50% 75%, contain, black, black 24%, transparent 25% ) #f3c2bb; background: -khtml-radial-gradient( 25% 30%, contain, black, black 4%, white 5%, white 24%, transparent 25% ), -khtml-radial-gradient( 75% 30%, contain, black, black 4%, white 5%, white 24%, transparent 25% ), -khtml-radial-gradient( 50% 50%, contain, #e19b92, #e19b92 9%, transparent 10% ), -khtml-radial-gradient( 50% 75%, contain, black, black 24%, transparent 25% ) #f3c2bb; background: -ms-radial-gradient( 25% 30%, contain, black, black 4%, white 5%, white 24%, transparent 25% ), -ms-radial-gradient( 75% 30%, contain, black, black 4%, white 5%, white 24%, transparent 25% ), -ms-radial-gradient( 50% 50%, contain, #e19b92, #e19b92 9%, transparent 10% ), -ms-radial-gradient( 50% 75%, contain, black, black 24%, transparent 25% ) #f3c2bb; background: radial-gradient( 25% 30%, contain, black, black 4%, white 5%, white 24%, transparent 25% ), radial-gradient( 75% 30%, contain, black, black 4%, white 5%, white 24%, transparent 25% ), radial-gradient( 50% 50%, contain, #e19b92, #e19b92 9%, transparent 10% ), radial-gradient( 50% 75%, contain, black, black 24%, transparent 25% ) #f3c2bb; border-radius: 50%; } #wd:after { content: "Are you using IE??"; position: absolute; top: 225px; left: 315px; padding: 5px 10px; width: 150px; font-family: "comic Sans MS",arial,verdana; /* I just couldn't help using comics! */ background: white; border: 2px solid #E19B92; border-radius: 4px 4px 4px 4px; }


Результат:
Изображение



О совместимости

Осталось два важных замечания, относительно CSS-градиентов. Первое, синтаксис для старых webkit-браузеров, немного отличается от приведенных примеров:

Код: Выделить всё

#wd { background-image: -webkit-gradient(type, position, radius, xpos ypos, outer radius, from(startColor), to(endColor) [, color-stop(25%, middleColor)] ); /* пример */ background-image: -webkit-gradient(radial, center center, 0, center center, 120, from(red), to(white), color-stop(10%, blue) ); }


Internet Explorer, начиная с версии 5.5 и до версии 9, поддерживает градиенты через фильтр. Синтаксис следующий:

Код: Выделить всё

#wd{ filter: progid:DXImageTransform.Microsoft.gradient(sProperties); }


Возможные свойства фильтра (sProperties):

  • Enabled – свойство отвечает за отображение градиента, может принимать одно из двух значений: true или false.
  • StartColor – цвет начальной точки градиента, задается в десятичном формате, от 0 (полностью прозрачный) до 4294967295 (непрозрачный белый)
  • StartColorStr – цвет начальной точки градиента, задается в шестнадцатеричном формате #AARRGGBB, где AA – это шестнадцатеричное значение альфа-канала, с помощью которого задается нужная прозрачность. Значение 00 будет указывать на полную прозрачность, а FF – полную непрозрачность.
  • EndColor — цвет конечной точки градиента, задается в десятичном формате, от 0 (полностью прозрачный) до 4294967295 (непрозрачный белый)
  • EndColorStr — цвет конечной точки градиента, задается в шестнадцатеричном формате #AARRGGBB, где AA – это шестнадцатеричное значение альфа-канала, с помощью которого задается нужная прозрачность. Значение 00 будет указывать на полную прозрачность, а FF – полную непрозрачность.
  • GradientType – можно указать тип градиента, горизонтальный (значение 1) или вертикальный (значение 0). По умолчанию используется вертикальный градиент.

Например, чтобы получить вертикальный градиент с двумя непрозрачными цветами, потребуется следующий код:

Код: Выделить всё

#wd{ filter: progid:DXImageTransform.Microsoft.gradient(StartColorStr=#FF27fb27, EndColorStr=#FF033d03, GradientType=0); }


Результат:
Изображение


Обратите внимание на указанные цвета, впереди идет значение альфа-канала FF, поскольку нам требуется два непрозрачных цвета, а затем следует само значение цвета.

А вот такой код потребуется для создания горизонтального градиента, с одним полупрозрачным цветом:

Код: Выделить всё

#wd{ filter: progid:DXImageTransform.Microsoft.gradient(StartColorStr=#FFc21269, EndColorStr=#32f4a5cc, GradientType=1); }


Результат:
Изображение


Здесь первый цвет оставляем непрозрачным, а у второго вместо значения FF, указываем 32, то есть 50 в десятичной системе счисления. Таким образом, мы уменьшаем прозрачность второго цвета на 50%, ну и конечно тип градиента – единица.

Возможности фильтра весьма ограничены, но зато он точно будет работать в шестой, седьмой и восьмой версиях.

А вы используете CSS-градиенты в своих проектах, или считаете что для них еще не пришло время?

Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект


Вернуться в «Статьи / советы / инструкции.»

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и 1 гость