Блог студии веб-дизайна «Make a Site» Дизайн, верстка, программирование, наполнение и раскрутка сайтов.

CSS градиент фона двумя способами — линейный градиент и внутренняя тень

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

CSS градиент фона двумя способами — линейный градиент и внутренняя тень
Содержание статьи

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

Надо сказать, что именно в CSS градиент считается фоновым изображением, поэтому для него не выделено специального свойства и он просто приписывается к стандартному CSS свойству background (в случае его сокращенного написания) или, если конкретней, то к background-image именно потому, что градиент в CSS трактуется как фоновое изображение, а не цвет.

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

Первый способ — внутренняя тень

В случае, если вам необходимо придать объем отдельно стоящим элементам, например кнопкам форм, вкладкам и т. д. — можно использовать внутреннюю тень. Как известно, существует такое замечательное CSS свойство, как box-shadow. На данный момент это свойство уже поддерживается всеми известными браузерами, т. к. существует, наверное, больше 5 лет точно и успешно внесено в спецификацию. А это означает, что уже можно не пользоваться вендорными префиксами при описании этого свойства в CSS и оно и так адекватно воспримется всеми популярными браузерами. Дело в том, что тень блока может быть как внешней, что является классическим вариантом использования box-shadow, так и внутренней.

В одной из наших статей мы используем именно это свойство для пошагового создания красивой CSS кнопки и показываем результат на конкретном примере.

Добавляя к элементу внешнюю тень, мы как бы приподнимаем его по вертикальной оси координат над остальными элементами. Это отлично подходит для выпадающих окон (popup), подсказок и прочих элементов, которые должны возвышаться над остальным контентом, находясь в другой плоскости. В нашем же случае, мы будем использовать нестандартную тень, которая будет распространяться не наружу, а внутрь элемента. Для этого существует необязательный параметр свойства box-shadow, называемый inset.

box-shadow: 0 0 10px 0 #000; /* наружная тень */
box-shadow: inset 0 0 10px 0 #000; /* внутренняя тень */

Итак, представим, что у нас есть кнопка, высотой 40 пикселей, тогда для того, чтобы сделать градиент внутри этой кнопки с помощью CSS свойства box-shadow, мы присвоим нашей с вами кнопке следующие стили (обратите внимание на последние два свойства background и box-shadow):

text-decoration: none;
padding: 0 20px;
white-space: nowrap;
display: inline-block;
border: none;
cursor: pointer;
height: 40px;
line-height: 40px;
color: #fff;
background: #54b1ff;
box-shadow: inset 0 -20px 20px 0 #1c7ccd;

Кнопка с градиентом box-shadow

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

Второй способ — линейный градиент

Второй способ — менее кроссбраузерный и более емкий, потому что официально свойство linear-gradient еще не внесено в спецификацию и считается относительно новым, поэтому для достижения кроссбраузерности, необходимо пользоваться вендорными префиксами. Однако именно за этим способом будущее, просто нужно немного подождать.

text-decoration: none;
padding: 0 20px;
white-space: nowrap;
display: inline-block;
border: none;
cursor: pointer;
height: 40px;
line-height: 40px;
color: #fff;
background: linear-gradient(180deg, #54b1ff, #1c7ccd);
/* здесь надо вставить то же свойство с добавлением вендорных префиксов */

Кнопка с градиентом linear-gradient

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


Предыдущая статья:
Защита сайта от SQL инъекций

Читайте также:
CSS спрайты (sprites sheet) — способ ускорения загрузки сайта


Блог студии веб-дизайна «Make a Site».
Дизайн, верстка, программирование, наполнение и раскрутка сайтов.

Текущий проект: «Stream Booster» — раскрутка Twitch и YouTube каналов

Студия веб-дизайна «Make a site»