Как можно использовать градиент CSS, чтобы создать изображение прямо в браузере


Содержание материала:

Как создать CSS градиент

Здравствуйте, сегодня мы поговорим с вами о том как создать градиент в CSS, и это не просто так, градиент очень распространенный эффект на сайтах и применяется повсеместно. Поэтому, если мы с вами изучим все возможности задания градиентов, то непременно ускорим работу своего сайта. Также приемы рассмотренные в статье мы будем использовать при создании шаблона wordpress при верстке макета и поэтому если вы не хотите пропустить выход статьи то обязательно подпишитесь на обновления блога .

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

.gradient <
background: url(picture.png) repeat-x #ссс;
>

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

Как задать градиент.

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

Линейный

Для его реализации у нас есть свойство linear-gradient (); в котором вы можете задать параметры:
bg-position – этот параметр задает координаты начала градиента, можно задавать во всех размерностях, которые приняты в веб, но лучше всего применять пиксели, так надежнее. Параметр не обязателен, по умолчанию будут заданы параметры top 0px left 0px.

Angle – благодаря этому параметру вы можете задать градус распространения, так как у нас линейный градиент то начальное значение будет 0deg.

color-stop – этот обязательный параметр, в нем нужно указать как минимум два цвета – верхнего и нижнего пикселя.

Пример:
.block

Где 30deg угол распространения градиента.

Yellow и blue цвета первого и последнего пикселя в градиенте.

Мы все сделали, сохраняем открываем в браузере и… ничего не видим! Все это потому что стандарты еще не вступили в силу браузеры официально не поддерживают эту команду. Так как быть в данной ситуации? Есть выход из сложившейся ситуации, нужно явно указать каждому браузеру что нужно распознать эту команду.

background: -webkit-linear-gradient(30deg, yellow, blue);
background: -moz-linear-gradient(30deg, yellow, blue);
background: -o-linear-gradient(30deg, yellow, blue);
background: -ms-linear-gradient(30deg, yellow, blue);

Первая строчка задает градиент в браузерах Гугл Хром и Сафари.

Вторая – код для Мазилы.

Третья для оперы а четвертый для Интернет Эксплорер.

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

background: #999;
background: -webkit-linear-gradient(30deg, yellow, blue);
background: -moz-linear-gradient(30deg, yellow, blue);
background: -o-linear-gradient(30deg, yellow, blue);
background: -ms-linear-gradient(30deg, yellow, blue);

Теперь давайте посмотрим результат работы наших команд.

Во всех браузерах отображается одинаково, на этом наша работа можно сказать закончена.

Радиальный

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

Вот общий вид функции:

background: radial-gradient(
позиция или угол, форма или размер, от-стоп, стоп-цвет, до-стоп
);

В данной команде форму можно задать двумя параметрами circle – круг и ellipse – овал. Это не обязательный параметр, по умолчанию будет выбран ellipse.

closest-side — Ближайшая сторона. Градиент будет распространяется от центра к ближней стороне элемента (для circle), или к обоим, и к горизонтальной и к вертикальной стороне (для ellipse).

closest-corner — Ближайший угол. В этом случае градиент будет распространяться от центра к самому близкому углу элемента.

farthest-side — Самая дальняя сторона. Градиент будет идти от центра по направлению к наиболее дальней части элемента (для circle), или к обоим, горизонтальной и вертикальной, сторонам (для ellipse).

farthest-corner — Самый дальний угол. Размер градиента в таком случае будет распространяться от центра в дальний угол элементов.

contain — тоже что и closest-side.

cover — тоже что и farthest-corner.

Теперь посмотрим работу этого свойства на примере.

Circle closest-side.

background: radial-gradient(circle closest-side,#000,#FFF,#000);

Здесь как и в предыдущем случае напрямую браузеры не поддерживают команду и поэтому нужно написать следующий код:

background: -moz-radial-gradient(circle closest-side,#000,#FFF,#000);
background: -ms-radial-gradient(circle closest-side,#000,#FFF,#000);
background: -o-radial-gradient(circle closest-side,#000,#FFF,#000);
background: -webkit-radial-gradient(circle closest-side,#000,#FFF,#000);
Результат:

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

Просто, свежо, красиво: CSS-градиенты

В этой статье я расскажу, как создать градиент с помощью CSS gradient . Градиенты могут быть применены к любому элементу с помощью свойства background или background-color .

Поддержка браузерами

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

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

Линейные градиенты

linear gradient CSS плавно переводит один цвет в другой по прямой линии. Синтаксис следующий:

Замените цвет 1 и цвет 2 обозначениями цветов по своему выбору: распознаваемое имя цвета или шестнадцатеричный код. А затем разделите два цвета запятой.

Этот код создает вертикальный градиент, который начинается с цвета 1 вверху и переходит в цвет 2 внизу. Это выглядит примерно так:

Различные варианты

Описанный выше случай, в котором мы объявляем в коде два цвета, представляет собой минимальный объем кода, который нужен для создания CSS background gradient .

Направления градиента

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

Есть несколько способов, с помощью которых это можно сделать. Три приведенных выше градиента были созданы с помощью следующего кода:

Горизонтальные CSS gradient создаются путем указания направления ( слева или справа ) перед объявлением цветов. Таким же способом можно указать top или bottom .

Диагональные градиенты можно создавать, указывая, в каком углу начинается или заканчивается градиент, например, top left или bottom right — две стороны разделяются пробелом. Это тот случай, когда для браузеров нужно предоставлять немного различающиеся инструкции:

  • для Safari ( -webkit-linear-gradient ) укажите угол, в котором начинается цвет 1 , например: top left ;
  • для Opera и Firefox ( -o-linear-gradient и -moz-linear-gradient ) укажите угол, в котором заканчивается цвет 2 , например: bottom right ;
  • для всех остальных браузеров ( то, что мы обозначили как «Стандартный синтаксис» ) укажите угол, в котором заканчивается цвет 2 , со словом « to «, например: to bottom right .

Определенные углы также можно задать, указав величину угла с единицами измерения « deg » ( без пробела ), например: 60deg . Ноль градусов дает вертикальный градиент, начинающийся снизу, а градусы вращают его по часовой стрелке на 360 градусов.

Несколько переходов цветов

Чтобы получить многоцветный градиент, укажите более двух цветов в нужном порядке, разделяя их запятыми. Вот CSS-код для приведенного на рисунке выше CSS background linear gradient :

Также можно указать, где вы хотите разместить переходы цветов, добавив после цвета значение в процентах или пикселях через пробел. Например, я создал градиент, в котором красный цвет начинает переходить в желтый на 30% ширины, а затем желтый переходит в зеленый на 70% ширины:

Так как я не указал, где должен закончиться последний цвет, он по умолчанию заканчивается на 100% или в самом конце градиента.

Также можно указать точки перехода с использованием пикселей вместо процентов ( например: #c94A4a 100px ). Но не используйте и пиксели, и проценты в одной строке кода.

Радиальные градиенты

Другим видом градиента является radial gradient CSS , который начинается в центре и переходит в другой цвет по краям элемента:

Радиальный градиент задается значением radial-gradient , а не linear-gradient . Первый цвет начинается в центре и переходит в другой цвет по краям. Можно использовать несколько цветов и указать, где должен происходить переход. Установить направление градиента сложно, поскольку он распространяется во всех направлениях.

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

Данная публикация представляет собой перевод статьи « Easy, Breezy, Beautiful: CSS Gradients » , подготовленной дружной командой проекта Интернет-технологии.ру

Как можно использовать градиент CSS, чтобы создать изображение прямо в браузере

Возможность применения CSS-градиента была реализована Webkit несколько лет назад, но он редко использовалася из-за несовместимости с большинством браузеров. Но теперь Firefox, начиная с версии 3.6+, начал поддерживать градиент, и мы можем создавать градиент без обязательного использования изображения. Opera добавила поддержку CSS-градиента начиная с версии 11.10.

В этой статье мы покажем Вам, как создать CSS-градиент, который будет поддерживаться всеми основными браузерами: IE, Firefox 3.6+, Safari, Opera 11.10+ и Chrome.

В CSS3 градиенты бывают двух видов — линейные и радиальные. Рассмотрим сначала линейный градиент.

Линейный градиент

Для Webkitбраузеров:

Следующий код предназначен для webkit браузеров, таких как Safari, Chrome, и т.д. Он создаст линейный градиент, от верхней точки (#ccc) к основанию (#000).

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

Для Firefox 3.6+:

Для Opera

Этот код будет работать в Опере начиная с версии 11.10.

Для Internet Explorer

Градиент для IE 10+

Этот фильтр будет работать в старых версиях IE:

Кроссбраузерный CSS-градиент:

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

background : #999 ; /* for non-css3 browsers */

filter : prog >:DXImageTransform .Microsoft .gradient ( startColorstr = ‘#cccccc’ , endColorstr = ‘#000000’ ) ; /* для IE6-9 */
background : -webkit-linear-gradient ( top , bottom , #ccc , #000 ) ; /* для webkit-браузеров */
background : -moz-linear-gradient ( top , #ccc , #000 ) ; /* для firefox 3.6+ */
background : -o-linear-gradient ( top , #ccc , #000 ) ; /* для Opera 11.10+ */
background : -ms-linear-gradient ( top , #ccc , #000 ) ; /* для IE10+ */

Давайте рассмотрим подробнее синтаксис. Первое значение (point) является необязательным. Если значение не указано, то по умолчанию будет градиент будет идти от верха до низа. Вы можете использовать различные ключевые слова здесь. Это может быть одно ключевое слово или сочетание двух. Вы также можете использовать значения в градусах. Цель этого параметра заключается в определении, в каком направлении градиент будет распространяться. Кроме того, необходимо определить как минимум два цвета. Первый цвет будет в начале градиента, а последний цвет, соответственно, в конце. Здесь перечисленны возможные значения point:

Использование стоп-цвета

Цвета могут иметь необязательные stop значения. Если они не определены, то цвета переходят плавно от первого до последнего. Но вы можете использовать несколько цветов при создании градиента, и при этом вы можете изменять ширину каждого цвета устанавливая stop значения. Устанавливаемое значение может измеряться в любых допустимых CSS единицах (px, pt, em, % и т.д.). Эти значения помещается после цвета. Также вы можете использовать любые допустимые CSS-цвета, такие как ключевые слова (red, yellow, blue), или hex, hsl, rgb или rgba значения.

Радиальный градиент CSS3

Радиальный градиент распространяется от точки в центре по окружности.

Синтаксис похож на линейный градиент, то тут еще добавилась форма и размер. Форма бывает двух видов — ellipse и circle, по умолчанию значение: ellipse. Значение размера может принимать одно из шести значений.

  • closest-side — Ближайшая сторона. Градиент распространяется от центра по направлению к ближайшей стороне элемента (для circle), или к обоим, горизонтальной и вертикальной сторонам (для ellipse).
  • closest-corner — Ближайший угол. Размер градиента таков, что он распространяется от центра к ближайшему углу элемента.
  • farthest-side — Самая дальняя сторона. Градиент распространяется от центра по направлению к наиболее удаленной стороне элемента (для circle), или к обоим, горизонтальной и вертикальной, сторонам (для ellipse).
  • farthest-corner — Самый дальний угол. Размер градиента таков, что он распространяется от центра к самому дальнему углу элемента.
  • contain — тоже что и closest-side.
  • cover — тоже что и farthest-corner.

Онлайн-примеры

Дополнительная информация.

CSS-градиент для выпадающего меню:

Ниже представлено, как пример, выпадающее меню, которое использует только CSS3: CSS-градиент, text-shadow, radius-border и box-shadow (никакого Javascript или изображений).

Ограничения Internet Explorer:

Фильтр градиента для Internet Explorer не поддерживает сolor-stop, gradient angle и radial gradient. Это означает, что Вы можете только определить горизонтальный или вертикальный линейный градиент с 2 цветами: StartColorStr и EndColorStr.

Полезные ссылки по теме:

Заключение.

Пожалуйста отметьте, что не все браузеры поддерживают CSS-градиент. Чтобы не возникло проблем, Вы не должны целиком полагаться на CSS-градиент, верстая шаблон.

Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом

CSS3 градиенты

Safari 4+, Chrome 1+, Firefox 3.6+, и Opera 11.10+ — все поддерживают CSS3 градиенты. Такая большая поддержка создает приемлемые условия для использования градиентов. Хорошая новость и в том, что можно определить изображение, которое будет использовано в том случае, если ваш браузер не поддерживает градиенты.

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

Как это работает

Сразу переходим к сути, вот CSS простого линейного градиента от начала до конца.

Различный синтаксис для различных движков рендеринга

Mozilla (Firefox, Flock, etc)

Синтаксис для мозиллы выглядит так:

Для того чтобы объявить градиент достаточно прописать список цветов через запятую. Стартуем с верха и движемся к основанию с равноудаленными остановками для каждого цвета. В демо примере также задана точка отсчета и угол (90deg), под которым идет градиент. Для радиального градиента: -moz-radial-gradient.

WebKit (Safari, Chrome, etc)

WebKit синтаксис для Chrome 1-9 и Safari 4-5 выглядит так:

Они упростили старый синтаксис и начиная с Chrome 10 и Safari 5.1 синтаксис выглядит следующим образом:

Opera

Начиная с Opera 11.10, Opera поддерживает CSS3 градиенты в том же синтаксисе как Mozilla и последние WebKit’s.

Trident (IE)

В действительности это совсем не CSS3, но для trident’s синтаксис выглядит так:

«filter» должен работать в IE6-IE8, но это не валидный код.
«-ms-filter» валидацию пройдет, но будет работать только в IE8.

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

«Остановки»

Синтаксис градиентов для WebKit и Mozilla включает в себя ‛остановки‛. Любая остановка опционально добавляет объявление, которое включает в себя позицию и цвет. Это значит, что градиент обычно стартует с одним цветом (1-я остановка) и финиширует с другим(2-я остановка). Обозначенные в остановках цвета как бы угасают, если взглянуть на изображение со стороны. Остановок можно использовать несколько.

Оптимизация запросов HTTP

Используя firebug, отобразите во вкладке сеть все ресурсы, задействованные на странице, вы увидите преимущества.

Данный скриншот сделан в firefox 3.6. Мы можем заметить, что резервное изображение не загружено, тем самым мы избавились от лишнего HTTP запроса. Однако в firefox 3.5.8, резервное изображение загрузилось.

Мы не избавимся от лишних HTTP запросов в старых версиях firefox (3.5.8 на vista). Резервное изображение градиентов по-прежнему загружается (и используется). В webkit браузерах неопределенности с запросами еще больше.

Браузеры webkit будут использовать CSS3 свойства отображающие градиент, но в тоже время, резервные изображения по-прежнему загружаются, и сэкономить на HTTP запросах не выйдет. Единственное преимущество: программное объявление цвета.

На 9 августа 2010 года, Safari 5.0.1 по-прежнему загружает резервное изображение, но Chrome 6.0.472.25 ( а также Opera 11.10) присоединяется к браузерам, не загружающим резервные изображения.

Работаем с числами

Скорость, полученная в результате удаления ненужных HTTP запросов, как по мне, является большим преимуществом. Чем больше я изучаю сайтостроение, тем отчетливее мне представляется, что время загрузки страницы играет одну из важнейших ролей. Однако в использовании CSS3 градиентов есть и другие преимущества, например такие: градиенты с точки зрения программы созданы через числа. Требуется отрегулировать некоторые цвета? Просто обозначьте определенные цифры. Отпадает необходимость редактировать большие изображения в определенных программах. Это значит, что обслуживание сайта упрощается, так как позволяет регулировать значения на лету. Я думаю, JavaScript библиотеки скоро смогут анимировать эти значения, что, на мой взгляд, чертовски привлекательно.

Растягиваем

Когда используют изображения с градиентом, обычно в CSS применяют повторение (repeat) вдоль осей (x или y). Для решения данной задачи достаточно изображения шириной 1px, которое очень эффективно, мудрый размер. В результате определенная часть фона будет с градиентом (та часть, которую покроет изображение), а другая часть, которая выйдет за изображение, будет иметь однородный цвет. Местами, все же, использовать CSS3 градиенты, растянув их на всю высоту коробки, лучше. Это еще одна штука, где можно использовать CSS3 градиенты:

Итак, важный вопрос. стоит ли использовать градиенты сейчас?

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

Топ-пост этого месяца:  Вывод постов

Как задать градиент для border в CSS?

Приветствую вас, дорогие друзья!

Рассмотрим как задать в CSS border gradient, это позволит вам создать на своём сайте красивый эффект градиентной рамки. В одной из предыдущих статей я подробно рассматривала как задать градиент в качестве фона.

Так вот, CSS 3 позволяет нам это сделать не только для фона, но и для рамки.

Навигация по статье:

Линейный градиент

Для примера рассмотрим такой блок:

Чтобы задать ему размеры, отступы и так далее я допишу следующие CSS свойства:

Теперь нам нужно задать толщину рамки и её тип:

Для задания градиента допишем свойство border-image в css файле:

Здесь мы в скобках задаём значения цветов, которые будут идти сверху вниз.
Чтобы наше CSS свойство работало во всех браузерах допишем кроссбраузерные префиксы:

И последнее зададим CSS свойство:

Чтобы заданный градиент сместился или растянулся по всей границе.
В итоге весь CSS код задания border gradient будет выглядеть так:

Вот результат работы кода:

Особенности border gradient в CSS

  1. 1 В скобках мы можем задать не обязательно 2 цвета, их может быть больше. Для этого просто указываем значения цветов через запятую:

2 Можно регулировать соотношение цветов в процентах задав число % рядом с цветом:

  • 3 Данное CSS на работает в паре со свойством border-radius, отвечающее за скругление углов.
  • Направление градиента border gradient

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

    При задании градиента с кроссбраузерными префиксами этот пример пишется немного иначе.

    В первом случае мы писали в каком направлении должен распространяться градиент, а во втором – куда он должен идти.
    Пример для border gradient слева направо:

    Создание градиентов. Линейный градиент

    В CSS3.0 появилась возможность создавать градиенты для элементов, что раньше выполнялось только с помощью изображения, предварительно созданного, как правило, в Photoshop.

    Градиенты для CSS бывают линейными (linear-gradient) и радиальными (radial-gradient). И если вы знакомы с Photoshop, то наверняка знаете, что это наиболее часто используемые градиенты.

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

    Итак, сначала о линейном градиенте.

    Линейный градиент

    Подразумевает, как минимум, наличие 2-х значений цвета: начального и конечного. Самая простая запись выглядит так:

    Но вы можете задать направление градиента, используя ключевое слово to и само направление: left (влево), right (вправо), top (вверх), bottom (вниз):

    Кроме того, задать направление градиента можно в градусах, например, диагональный градиент будет иметь угол 45deg:

    Можно задавать и отрицательное значение, тогда градиент «перевернется», т.е. будет направлен в противоположную сторону.

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

    Если вы просто перечисляете цвета через запятую, то количество пространства распределяется между ними поровну. Но вы можете указать в какой точке должен начинаться и заканчиваться цвет. По умолчанию начальная точка задается как 0%, а конечная — как 100%. Поэтому, если вы не планируете ее никуда смещать, можно эти данные не указывать. Записываются значения цвета и значения места расположения через пробел:

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

    В чем еще прелесть назначения позиций для градиента? Да в том, что с помощью указаний одних и тех же позиций для разных маркеров можно градиент превратить в . флаг, например, или сделать макет с 2-х или 3-х-колоночной версткой с колонками разного цвета.

    Посмотреть результат всех предыдущих экспериментов можно здесь:

    Кроссбраузерный линейный градиент

    Теперь о многообразии вариантов градиента: для старых браузеров, не поддерживающих градиенты в принципе, нужно указать цвет фона, соответствующий одному из оттенков градиента: background: #b4e391;

    Есть еще вариант показать для них изображение с градиентом, например:

    Изображение в этом случае должно быть размером, например, 30×1920 px, чтобы охватывать большинство современных экранов. Градиент направлен слева направо.

    Для Mozilla Firefox версий 3.6-15, Chrome версий 10-25, Safari версий 5.1 — 6 и 7+, Opera версии 11.5 и старше нужно указывать и ввендорные префиксы (-moz-, -webkit-, -o-), и убирать ключевое слово to.

    А для IE до версии 10 существует специальный фильтр.

    Результат будет выглядеть так:

    Генератор градиента от Colorzilla

    Чтобы не думать о кроссбраузерности, можно воспользоваться отличным редактором-генератором градиента, представляемым сайтом colorzilla.com. Очень наглядно, как в Photoshop, можно выбирать градиенты из набора существующих, изменять цвета и расположения маркеров, менять направление и вид градиента (линейный, радиальный), выбирать формат цвета, задавать прозрачность. И в конце нужно просто скопировать готовый код. Масса удовольствия, причем абсолютно бесплатно.

    Кроме того, можно установить расширение от Colorzilla для браузеров Chrome и/или Firefox, и пользоваться еще пипеткой, например, или палитрой цветов, или анализировать цветовую палитру любого сайта. Для этого всего навсего нужно нажать на значок пипетки в правом верхнем углу браузера. Там есть опция CSS Gradient Generator — так вот это прямая ссылка на описанный выше генератор градиента.

    CSS Matic Gradients

    Еще один отличный сервис для создания градиента — это CSS Matic Gradients. Он предоставляет примерно те же возможности, что и Colorzilla Gradient Generator, но немного иначе. Мне очень нравится ползунок Hue (оттенок), с помощью которого можно легко изменить цвета выбранного градиента, не правя при этом оттенок каждого маркера.

    На скриншоте ниже видно, что цвет маркера красный, ползунок Hue сдвинут в левую сторону, в результате получился сине-фиолетовый градиент. Ползунок Lightness позволит сделать градиент темнее/светлее.

    Справа от градиента можно выбрать его направление (вправо, вниз, по диагонали) и вид (линейный, радиальный).
    Есть поддержка IE младше 10 версии.

    Кроме того, здесь есть возможность получить цвет в формате SASS, что очень удобно для тех, кто использует этот CSS-препроцессор.

    UI Gradients

    Еще один сайт, посвященный градинтам uiGradients. На нем есть ряд приятных двухцветных линейных градиентов, которые вы можете использовать как при дизайне сайта, так и в его верстке.

    На главной странице вы увидите слайдер, который позволит выбрать градиент, скопировать 16-ричное значение цветов в нем или получить css-код градиента.

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

    Нажав клавишу ENTER или кнопку внизу слайдера, вы получите css-код градиента с предложением скопировать его в буфер обмена.

    CSS3 Maker

    Еще один сервис, на котором вы можете настроить градиент — CSS3 Maker. Он содержит генератор не только градиента, но и других CSS3-свойств. Что касается градиента, то сайт определяет, какой браузер вы используете для серфинга по Интернету и выдает вам код с соответствующим вендорным префиксом (в моем случае -moz-linear-gradient для Mozilla Firefox). Не очень удобно в плане унификации кода. Зато можно поиграться с настройками. И посмотреть заодно, как работают другие свойства.

    Blend — Create and customize beautiful CSS3 gradients.

    В заголовке сервиса Blend написано «Создавайте и изменяйте красивые CSS3 градиенты». И так оно и есть.

    Вы задаете нужные вам цвета, нажимаете на кнопку «Let’s Blend» — и, вуаля, градиент готов.

    Справа вверху вы можете выбрать линейный вам нужен градиент или радиальный и получить код с помощью крайней правой кнопки.

    Минусом этого генератора градиентов является то, что можно настроить градиент только из двух цветов и не более. Хотя, следует признать, что чаще всего больше и не требуется.

    CSS градиенты. Примеры использования градиентов в HTML & CSS

    Пояснения к статье:

    1. — CSS свойство которое принимает несколько значений. Свойство < background : linear-gradient(to top white 20%, red 50%, black 30%)>задает градиент переходящий снизу вверх. Цвета будет располагаться по площади следующим образом: 20% — белый, 50% — красный, 30% — черный.
    2. radial-gradient > — CSS свойство, которое служит для создания радиального градиента. Принимает несколько значений. Запись background: radial-gradient(circle at 65% 15%, aqua, darkblue) создаст фигуру сине-голубого шара.
    3. @keyFrame — ключевое слово, которое используется для стилизации некоторых элементов, чаще всего для анимации.
    4. animation > — свойство, которое отвечает за анимацию. Её значения определяют длительность(в секундах), функции и количество повторений.

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

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

    Синтаксис

    Сейчас мы расскажем о том, как сделать простой градиент в CSS. Существует несколько разновидностей плавного цветового перехода.

    Линейный градиент

    Для начала мы рассмотрим самый простой — создание линейного градиента. Он создается с помощью свойства linear-gradient.

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

    Также, можно задать распределение цвета по всей области градиента. По умолчанию все цвета распределяются равномерно, вдоль указанной линии.

    Способов создания направления несколько, для этого используются точные и не точные значения. Из не точных значений выделяют to top, to bottom, to right и to left, которые задают направления вверх, вниз, вправо и влево соответственно.

    Для указания другого направления записывается значение градусов угла наклона, которое измеряется в deg. 1 deg равен 1 градусу.

    Для создания перехода цвета по диагонали можно использовать и ключевые слова, например сочетание to top left. Он задает линию переходящую влево, в верхний край экрана.

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

    Запись < background : linear-gradient(to top, #fff 20%, #ccc, #000)>будет означать, что белый цвет будет занимать первые 20% области.

    Радиальные градиенты

    Задается с помощью команды radial-gradient. Основное отличие в том, что такой вид градиента распределяет цвета не по ровной линии, а выводит их наружу. Цвета будут располагаться в виде круга.

    • Первое значение, которое принимает команда radial-gradient — форма. Её можно указывать простыми словами — circle, ellipse и другие. По умолчанию стоит 2 значение.
    • Второе значение, в отличие от линейного градиента, задает положение центра. Для этого задаются такие же ключевые слова, с небольшим отличием: приставка to меняется на at.
    • С помощью точных значений можно задавать ширину и высоту градиента. Первое значение определяет ширину, а второе высоту. Для изменения ширины подходят такие размеры: %, rem и em.

    Пример использования градиента. HTML & CSS

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

    Установка фона и градиента

    Фон оказывает значительное воздействие на дизайн сайта. Он помогает создать впечатляюще выглядящий сайт, установить группирование и определить приоритет, фон также серьёзно влияет на юзабилити сайта.

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

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

    Добавление цвета фона

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

    При добавлении цвета фона у нас есть несколько вариантов значений, которые мы можем использовать. Подобно другим цветовым значениям мы можем выбрать из ключевых слов, шестнадцатеричных кодов и значений RGB, RGBa, HSL и HSLa. Чаще мы встретим шестнадцатеричные значения, однако можем иногда пожелать задействовать RGBa или значения HSLa для прозрачности.

    Прозрачный фон

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

    К счастью, есть простой способ обеспечить запасной вариант для фона. CSS каскадирует с верхней части файла до его низа, таким образом, мы можем использовать два свойства background-color в едином наборе правил. Первое свойство background-color будет включать «безопасный» цвет фона в виде шестнадцатеричного значения, а второе свойство background-color будет использовать RGBa или HSLa. При этом, если браузер понимает значение RGBa или HSLa, то отобразит его, а если нет, то вернётся к шестнадцатеричному значению перед ним.

    Добавление фонового изображения

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

    Значение функции url() будет адресом фоновой картинки и к нему применяются знакомые правила для создания пути гиперссылки. Следите за разными папками и не забудьте показать, где именно находится изображение. Путь помещается внутри скобок и кавычек.

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

    background-repeat

    По умолчанию, фоновое изображение будет повторяться бесконечно по вертикали и горизонтали, если не указано иное. Свойство background-repeat может быть использовано чтобы изменить направление, в котором фоновая картинка будет повторяться, если она вообще повторяется.

    Свойство background-repeat принимает четыре разных значения: repeat , repeat-x , repeat-y и no-repeat . repeat является значением по умолчанию и повторяет фоновое изображение по вертикали и по горизонтали.

    Значение repeat-x повторяет фоновое изображение по горизонтали, в то время как значение repeat-y повторяет его по вертикали. Наконец, значение no-repeat говорит браузеру отобразить картинку один раз, то есть не повторять её вообще.

    background-position

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

    Свойство background-position требует два значения: горизонтальное смещение (первое значение) и вертикальное смещение (второе значение). Если указано только одно значение, то оно применяется для горизонтального смещения, а вертикальное по умолчанию задаётся как 50%.

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

    Чтобы установить значение background-position мы можем использовать ключевые слова top , right , bottom и left , пиксели, проценты или любую единицу размера. Ключевые слова и проценты работают очень похоже. Значение left top идентично процентному значению 0 0, которое располагает изображение в левом верхнем углу элемента. Значение right bottom идентично процентной записи 100% 100% и будет позиционировать изображение в правом нижнем углу элемента.

    Рис. 7.01. Фоновые изображения позиционируются от левого верхнего угла элемента

    Одним из преимуществ процентов по сравнению с ключевыми словами является возможность центрирования фонового изображения с помощью значения 50%. Для размещения фонового изображения в верхней части элемента, мы можем использовать значение 50% 0. Применение пикселей в качестве значения background-position также распространено, так как пиксели дают нам точный контроль над положением фона.

    Значения background

    Свойства background-color , background-image , background-position и background-repeat могут выступать значением для единичного свойства background . Порядок этих свойств в background может варьироваться, но обычно он такой: background-color , background-image , background-position , а затем background-repeat .

    Пример фонового изображения

    В следующем примере мы будем использовать свойство background , которое включает значения background-color , background-image , background-position и background-repeat .

    Пожалуйста, обратите внимание, что в background-position содержится относительное и абсолютное значение. Первое значение, 20 пикселей — это горизонтальная величина, позиционирование background-image на 20 пикселей от левого края элемента. Второе значение, 50% — это вертикальная величина, которая центрирует фоновое изображение по вертикали.

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

    Демонстрация фоновой картинки

    На практике

    Возвращаясь к нашему сайту Styles Conference, давайте добавим немного фонового цвета. Пока мы это делаем, изменим несколько других стилей, чтобы заставить все наши стили работать совместно и сохранить всё наше содержание разборчивыми.

    Начнём с большого шага и применим синий фон к элементу наряду с имеющимися свойствами color и font . Все стилевые правила для элемента , установленные на данный момент, включают следующее:

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

    Теперь, когда каждая страница на нашем сайте Styles Conference включает в себя синий фон, давайте очистим несколько областей с этим синим фоном. В частности, наши элементы и останутся синими, как и раздел hero на главной странице.

    Внутри элементов и укажем цвет ссылок белым, а затем при наведении на них курсора мыши тем же зелёным, что и заголовки.

    С классом primary-header у элемента и существующим классом primary-footer у мы можем добавить два новых правила ниже раздела со ссылками в нашем файле main.css.

    Пока мы делаем некоторый текст белым, давайте сделаем текст в разделе hero на главной странице тоже белым, так как он будет оставаться на синем фоне. У нас есть существующий класс hero , к которому можно добавить стили, так что установим белый цвет текста в нём. В целом, набор правил для класса hero должен включать в себя следующее:

    Также в разделе hero нашей главной страницы уберём некоторые стили кнопок. Начнём с добавления нескольких новых свойств для набора правил с классом btn , в разделе с кнопками нашего файла main.css.

    В частности, заменим цвет текста кнопки на белый, зададим cursor как pointer , увеличим font-weight , добавим небольшое расстояние в letter-spacing и изменим text-transform на uppercase .

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

    Мы также очистим некоторые стили запасных кнопок путём установки класса btn-alt . В частности, сделаем рамку у кнопки белой и добавим стиль для :hover , который включает белый фон и синий цвет текста.

    Со всеми дополнениями наш новый класс btn-alt должен выглядеть следующим образом:

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

    В этом новом классе row добавим белый фон, минимальную ширину 960 пикселей (чтобы убедиться, что row всегда больше, чем width у элементов container или grid ) и padding по вертикали. В общей сложности наш новый раздел в нашем файле main.css должен выглядеть следующим образом:

    С этим классом row добавим полосу с белым фоном на главной странице. Мы сделаем это для разделов с тизерами. В настоящее время эта область содержит элемент с классом grid который обёртывает три дополнительных с классами teaser и col-1-3 .

    Чтобы добавить белый background к этому разделу, мы собираемся обернуть все эти элементы в элемент с классом row .

    Поскольку мы хотим обернуть разделы со всеми тизерами элементом , то собираемся добавить новый элемент с классом row , который окружает существующий с классом grid .

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

    Топ-пост этого месяца:  Квиз-сайт что это, примеры + ТОП-10 конструкторов квизов

    Структура наших тизеров должна выглядеть следующим образом:

    Удивительно, как несколько фоновых цветов могут влиять на дизайн веб-сайта. Наш сайт Styles Conference становится всё краше и главная страница тому доказательство.

    Рис. 7.02. Главная страница сайта Styles Conference после добавления нескольких цветов фона

    Дизайн градиентного фона

    Градиентные фоны были введены с CSS3, дизайнеры и фронтенд-разработчики вовсю радовались этому. Хотя градиентные фоны не работают в старых браузерах, они поддерживаются всеми современными браузерами.

    В CSS градиентные фоны рассматриваются как фоновые изображения. Мы можем создать градиент с помощью свойства background или background-image , как обычную фоновую картинку. Значение свойства для градиента меняется в зависимости от того, какой градиент нам бы хотелось — линейный или радиальный.

    Вендорные префиксы для градиента

    В уроке 4, «Открываем блочную модель», мы обсуждали добавление вендорных префиксов к новым свойствам или значениям CSS, так что браузеры могут поддерживать недавно разработанные возможности CSS. Градиенты были одними из значений, которые требовали использование префиксов. К счастью, для большинства браузеров отпала необходимость в префиксах для отображения градиентов, тем не менее, всё равно стоит указать префиксы для обеспечения лучшей поддержки.

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

    Линейный градиент

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

    Демонстрация линейного градиента

    Линейные градиенты определяются с помощью функции linear-gradient() в свойстве background или background-image . Функция linear-gradient() должна включать в себя два значения цвета, первое из которых будет начальным цветов, а второе конечным цветом. Браузер затем обработает переход между двумя цветами.

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

    Смена направления градиента

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

    Например, если мы хотим, чтобы градиент в элементе двигался слева направо, мы можем использовать значение to right для указания направления, в котором линейный градиент должен продвигаться. Ключевые слова также могут быть объединены. Если мы хотим, чтобы градиент переходил от левой верхней до правой нижней части элемента, мы можем использовать значение ключевого слова to right bottom .

    Демонстрация направления линейного градиента

    Когда мы применяем диагональный градиент в не совсем квадратном элементе, градиент не переходит напрямую из одного угла в другой. Вместо этого градиент определит абсолютный центр элемента, поместит опорные точки в противоположных углах, откуда он должен продвигаться и только затем двинется в направлении угла, заданном в значении. Эти углы, которые перемещает градиент, называются «волшебные уголки», так как они не являются абсолютными. Эрик Мейер проделал замечательную работу с изложением этого синтаксиса в своей статье Linear Gradient Keywords.

    Кроме ключевых слов также допускаются углы. Если мы хотим, чтобы наш градиент двигался к левой верхней части элемента мы можем использовать значение угла 315deg, также если мы хотим, чтобы наш градиент двигался к правой нижней части элемента, мы можем использовать значение 135deg. Этот же подход может быть применён для любого значения угла, от 0 до 360º.

    Радиальный градиент

    В то время как линейный градиент идеально подходит для градиентного перехода от одного направления к другому, часто возникает необходимость в радиальном градиенте. Радиальные градиенты работают так же, как линейные и повторяют большинство из тех же значений. Для радиальных градиентов вместо функции linear-gradient() в свойстве background или background-image мы будем использовать функцию radial-gradient() .

    Демонстрация радиального градиента

    Радиальные градиенты работают изнутри наружу элемента. Таким образом, первый цвет заданный в функции radial-gradient() будет располагаться в абсолютном центре элемента, а второй цвет будет находиться на внешней стороне элемента. Браузер затем создаст переход между этими двумя цветами.

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

    Генератор градиентов CSS3

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

    Стоп-цвета

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

    Демонстрация стоп-цветов в градиенте

    По умолчанию браузер будет позиционировать каждый стоп-цвет на равном расстоянии от следующего и переходить между ними соответственно. Если требуется больше контроля над тем, как желательно расположить цвета, то их места в градиенте могут быть определены для каждого цвета. Место должно быть объявлено как значение размера и идёт после значения цвета.

    Позиционирование стоп-цветов в градиенте

    Если не указано иное, то первый цвет будет позиционироваться на 0%, а последний цвет на 100%.

    Пример градиента

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

    Для этого мы включим два свойства background . Первое свойство background определяет шестнадцатеричное значение однотонного цвета, который служит в качестве запасного варианта на случай, если браузер не поддерживает линейные градиенты. Второе свойство background включает в себя функцию linear-gradient() , которая задаёт зелёный градиент, который переходит от верхней части элемента к его нижней части.

    Демонстрация градиентного фона

    На практике

    С имеющимся набором градиентов давайте создадим новую полосу для нашего сайта Styles Conference, на этот раз с помощью градиента.

    Мы сделаем новую полосу с градиентом с помощью класса row-alt . Поскольку для новой полосы задано то же свойство и значение min-width что и для класса row , мы объединим эти два селектора.

    Далее мы хотим создать новый набор правил и применить стили специально к классу row-alt . Эти новые стили будет включать в себя градиентный background , который начинается с зелёного цвета и переходит к жёлтому, слева направо.

    Используя функцию linear-gradient() с соответствующими значениями и вендорными префиксами, мы добавим градиентный background для класса row-alt . Также включим один background перед градиентным background как запасной вариант, на тот случай, если браузер не поддерживает градиенты.

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

    Стили row-alt на месте, давайте воспользуемся ими на всех наших внутренних страницах. В данный момент все они содержат элемент с классом container . Затем, внутри каждого есть элемент

    , содержащий заголовок страницы.

    Мы собираемся изменять эти элементы так же, как мы сделали раздел с тизером на главной странице. Мы обернём каждый элемент с классом container элементом с классом row-alt . Затем изменим каждый элемент с классом container на элемент

    Каждая из наших внутренних страниц должна теперь включать в себя следующее:

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

    в каждом элементе с классом row-alt . Наша страница speakers.html, к примеру, теперь может включать следующий раздел:

    Дополнительно со вставкой абзаца также изменим некоторые стили в разделе со вступлением. Чтобы сделать это, мы добавим класс lead к элементу

    После того, как класс lead находится на своём месте, мы выровняем по центру весь текст внутри этих элементов

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

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

    Рис. 7.03. Страница Спикеры сайта Styles Conference, в комплекте с градиентом

    Демонстрация и исходный код

    Ниже вы можете просмотреть сайт Styles Conference в его нынешнем состоянии, а также скачать исходный код сайта на данный момент.

    Использование нескольких фоновых изображений

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

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

    Данный код использует сокращённое значение для свойства background , связывая несколько фоновых картинок вместе. Эти сокращённые значения также могут быть разбиты по свойствам background-image , background-position и background-repeat со значениями, разделёнными запятыми.

    Пример нескольких фоновых изображений

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

    Чтобы сделать это, мы включим два значения во второе свойство background . Первое значение будет картинкой галочки на переднем плане. Второе значение будет линейным градиентом на заднем плане. Эти два значения разделяются запятой.

    Демонстрация нескольких фоновых изображений

    Изучаем новые свойства фона

    Наряду с градиентами и несколькими фоновыми изображениями, CSS3 представил три новых свойства: background-size , background-clip и background-origin .

    Свойство background-size позволяет изменить размер фонового изображения, в то время как свойства background-clip и background-origin позволяют контролировать, как фоновое изображение обрезается и где фоновое изображение располагается в элементе (внутри border или внутри padding , например).

    background-size

    Свойство background-size позволяет указать размер фонового изображения. Это свойство принимает несколько значений, в том числе размер и ключевые слова.

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

    Следовательно, свойство background-size с шириной 100% установит, что фоновое изображение занимает всю ширину элемента. Если второе значение не определено после ширины, то значение высоты будет задано автоматически, чтобы сохранить пропорции фонового изображения.

    Ключевое слово auto может быть задействовано в качестве значения ширины или высоты, чтобы сохранить пропорции фонового изображения. Так, если мы хотим установить высоту фоновой картинки на 75% от высоты элемента при сохранении её пропорций, то можем задать значение background-size как auto 75% .

    Демонстрация background-size

    Ключевые слова cover и contain

    В дополнение к размерам свойство background-size также допускает ключевые слова cover и contain .

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

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

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

    background-clip и background-origin

    Свойство background-clip определяет площадь поверхности, которую охватывает фоновое изображение, а свойство background-origin определяет, откуда должно начинаться background-position . Внедрение этих двух новых свойств связано с внедрением трёх новых значений: border-box , padding-box и content-box . Каждое из этих трёх значений может быть использовано для свойств background-clip и background-origin .

    Значение свойства background-clip по умолчанию устанавливается как border-box , что позволяет фоновому изображению расширяться в область границ. Между тем, свойство background-origin по умолчанию устанавливается как padding-box , что позволяет фоновому изображению начинаться там же, где и padding у элемента.

    Рис. 7.04. Значение border-box расширяет фон до границ элемента

    Рис. 7.05. Значение padding-box расширяет фон до padding у элемента, но фон при этом находится внутри границ

    Рис. 7.06. Значение content-box содержит фон внутри padding и border у элемента

    Мы уже обсуждали значения этих ключевых слов, когда рассматривали свойство box-sizing в уроке 4, «Открываем блочную модель». Смысл самих значений не изменился, но их функции меняются при использовании разных свойств фона.

    Резюме

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

    Кратко, в этом уроке мы рассмотрели следующее:

    • как добавить цвет фона и фоновое изображение к элементам;
    • линейные и радиальные градиенты и их настройка;
    • как задать несколько фоновых изображений для одного элемента;
    • новые свойства CSS3, которые позволяют менять размер, площадь поверхности и область позиционирования фоновых изображений

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

    Как можно использовать градиент CSS, чтобы создать изображение прямо в браузере

    background-clip — одно из тех свойств, о которых я давно знала, но почти не использовала. Может, лишь пару раз в ответах на Stack Overflow. До прошлого года, когда я начала создавать эту огромную коллекцию ползунковых регуляторов (слайдеров). Некоторые дизайны, что я решила воспроизвести, были довольно-таки сложны, а мне на каждый ползунок отводился один-единственный элемент, и им как назло оказался input , к которому даже псевдоэлементов толком не добавить. Хоть в некоторых браузерах такое и работает, то, что оно работает — на самом деле баг, и мне не хотелось на это полагаться. Так что в итоге мне пришлось использовать фоны, рамки и тени в изобилии. И я многому научилась при этом, и в этой статье делюсь некоторыми их тех уроков.

    Первым делом давайте посмотрим, что такое background-clip и что оно делает.

    На следующей картинке у нас блочная (или всё-таки боксовая? — прим. перев.) модель элемента.

    Если padding равен 0 , то padding-box по размеру точно равен content-box , и край контента совпадает с краем внутреннего отступа.

    Если border-width равен 0 , то border-box по размеру точно равен padding-box , и край рамки совпадает с краем внутреннего отступа.

    при border-width: 0

    Если и padding , и border-width оба равны 0 , то все три области ( content-box , padding-box и border-box ) равны по размеру, и края контента, внутреннего отступа и рамки все совпадают друг с другом.

    при padding: 0 и border-width: 0

    По умолчанию фоны покрывают всю border-box (под рамкой они тоже накладываются), но их background-position (а также проценты для background-size ) отсчитываются от padding-box .

    Чтобы лучше это понять, рассмотрим пример. Возьмем блок с наугад выбранными размерами, зададим ему простой градиентный фон с background-size: 50% 50% и заштрихованный border (с помощью border-image ), так что сквозь штрихи нам будет видно, что там под рамкой:

    В этом примере видно, что градиентный фон целиком покрывает border-box (его видно под штрихованной рамкой). Мы не указывали ему background-position , так что у него значение по умолчанию — 0 0 . Видно, что оно отсчитывается от padding-box , потому что начинается от левого верхнего угла (точки 0 0 ) этой области. Видно также, что background-size , указанный в процентах, отсчитывается от padding-box .

    по умолчанию фон полностью покрывает border-box , но начинается в левой верхней точке padding-box

    Задавая background-size для градиентов (но не для настоящих картинок), мы обычно вынуждены указывать два значения ради единообразия результата в браузерах. Если указать лишь одно значение, то второе в Firefox станет равным 100% (по спецификации), тогда как все остальные браузеры ошибочно делают второе значение равным первому. Пропущенное значение background-size принимается за auto , и так как у градиентов нет внутренних размеров и пропорций, значение auto никак из них не высчитать, так что оно должно восприниматься как 100% . Поэтому, если только мы не собираемся растягивать background-size на 100% по обоим измерениям, нам понадобятся два значения.

    Задание background-size с одним значением не дает кроссбраузерного результата (можно проверить); слева: Firefox (по спецификации, второе значение считается равным 100% ); справа: Chrome/ Opera, Safari, IE/ Edge (ошибочно делают второе значение равным первому)

    Можно заставить фон покрывать только padding-box или только content-box с помощью background-clip . Обрезка (clipping) означает, что всё, что выступает за обрезаемую область, отсекается и не показывается. Обрезаемой областью на иллюстрации ниже будет то, что лежит внутри пунктирной линии.

    иллюстрация, что такое обрезка

    При background-clip: border-box (по умолчанию) обрезаемой областью будет border-box , так что у нас будет фон и под рамкой.

    Если задать background-clip: padding-box , обрезаемой областью будет padding-box , так что фон будет отображаться только в пределах padding-box (под рамкой его уже не будет).

    И наконец, при background-clip: content-box обрезаемой областью будет content-box , так что фон будет показан только в пределах content-box .

    Эти три случая показаны в следующем живом примере:

    У нас есть и еще одно свойство под названием background-origin , которое указывает, от какой из трех областей отсчитывается background-position (и background-size , если выражен в процентах).

    Допустим, у нас опять есть элемент с заштрихованным border , но, на этот раз, с видимым padding . Положим на фон обычную картинку и градиент. У обоих background-size: 50% 50% , и оба они не повторяются. В добавок к этому, у картинки будет background-position: 100% 100% (а для градиента оставим 0 0 по умолчанию):

    Следующий пример показывает, что происходит при каждом из трех возможных значений background-origin — border-box , padding-box и content-box :

    Значение 100% 100% , указанное для background-position настоящей картинки — это 100% 100% от области, указанной в background-origin . В то же время, 50% 50% , указанные для background-size , означают половину ширины и половину высоты области, указанной в background-origin .

    В сокращенной записи background свойства background-origin и background-clip можно указывать именно в таком порядке в конце слоя. Поскольку они оба принимают значение вида *- box , то если указать лишь одно значение такого типа, оно будет присвоено сразу им обоим. Если указать два значения, background-origin получит первое, а background-clip — второе. Если не указывать значений вида *- box , оба свойства останутся со своими значениями по умолчанию ( padding-box для background-origin и border-box для background-clip ).

    Чудесно! Посмотрим теперь, как использовать это в своих интересах!

    Прозрачный зазор между рамкой и фоном

    Кто-то наверняка вспомнит, что с background-clip можно делать полупрозрачные рамки. Но можно еще и добавить зазор между рамкой и областью, покрытой фоном, без дополнительного элемента. Простейший способ этого добиться — задать padding в дополнение к border и указать для background-clip значение content-box . Если сделать это сокращенной записью с единственным значением content-box , мы заодно установим значение content-box и для background-origin , но в данном случае это нормально, никаких побочных эффектов от него нет.

    Обрезка фона по content-box значит, что он не распространится за края контента. Дальше их фона не будет, так что будет видно всё, что находится под нашим элементов. Добавка border значит, что мы увидим этот border в между краем внутреннего отступа и краем рамки. Но, поскольку padding ненулевой, у нас остается прозрачная область между краями контента и внутреннего отступа.

    Топ-пост этого месяца:  8 простых переходов CSS3, которые поразят ваших пользователей

    подсветка рамки, внутреннего отступа и области контента в отладчике

    Можно проверить это вживую в этом примере на CodePen:

    Можно сделать результат еще интереснее, добавив фильтр drop-shadow() , который добавит всей конструкции желтоватое свечение:

    Напоминание насчет префиксов: я видела множество ресурсов, добавляющих префиксы -moz- и -ms- для CSS-фильтров. Пожалуйста, не делайте этого! CSS-фильтры работают в Firefox без префикса с тех самых пор, как их там реализовали (Firefox 34, осенью 2014-го), а сейчас они появились в Edge за флагом — и тоже без префикса! Так что CSS-фильтрам никогда не были нужны префиксы -moz- и -ms- , добавлять их абсолютно бессмысленно, они будут лишь загромождать стили мертвым грузом.

    Можно также получить клёвый визуальный эффект, применив градиент и для background-image , и для border-image . Сделаем градиент, начинающийся со сплошного оранжево-красного цвета вверху и переходящий в полную прозрачность внизу. Поскольку различаются лишь оттенки, а в остальном наши градиенты идентичны, создадим функцию Sass.

    Можно проверить это в действии в этом примере на CodePen:

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

    Загвоздка в том, что текст начинается сразу от края оранжевого фона, а мы не можем добавить внутренний отступ, ведь он уже занят под прозрачный зазор. Можно было бы добавить лишний элемент… а можно воспользоваться box-shadow !

    box-shadow может принимать 2 , 3 либо 4 значения длины. Первое — смещение по x (определяющее, насколько сдвинуть тень вправо), второе — смещение по y (насколько сдвинуть тень вниз), третье — радиус размытия (определяет, насколько будет размыт край тени), и четвертое — радиус распространения (определяет, как далеко тень будет простираться во все стороны).

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

    Заметьте, что если радиус размытия не может быть меньше нуля, смещения и радиус распространения могут быть отрицательными. Отрицательное смещение просто сдвигает тень в обратную сторону по своей оси (влево или вверх). Отрицательный радиус распространения значит, что тень не расширяется, а сжимается.

    Еще одна важная вещь, которую здесь надо отметить — поскольку она удобна для нашей задачи — то, что box-shadow никогда не отображается под border-box , даже когда эта область (полу)прозрачна.

    Если оставить смещения и размытие нулевыми, но задать положительное значение радиусу распространения, то с виду получится вторая сплошная рамка одинаковой со всех сторон толщины, наружу от края настоящей рамки.

    имитация рамки с помощью box-shadow

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

    Возвращаясь к нашему примеру, можно имитировать рамку с помощью box-shadow с распространением, реальный border превратить в прозрачный зазор, задать для background-clip значение padding-box , и применить padding по назначению:

    подсветка областей рамки, внутреннего отступа и контента в отладчике

    Это можно посмотреть в действии в следующем примере на CodePen:

    Можно было бы имитировать рамку и внутренней тенью (с параметром inset ). В этом случае она начинается от края внутреннего отступа (границы между областями padding и border ), и распространяется на указанный радиус внутрь.

    эмуляция второй рамки с помощью внутренней box-shadow

    Поскольку теней может быть много, так можно имитировать несколько рамок. Пусть, к примеру, их у нас две, причем одна из них — inset . Если реальный border элемента ненулевой толщины и при этом transparent , а у background-clip стоит значение padding-box , то получится имитация двойной рамки с прозрачной областью (на месте реальной рамки) между внешней и внутренней частями. Обратите внимание, что ради этого понадобилось увеличить padding для компенсации места, занятого внутренней box-shadow .

    Можно испытать это в действии в этом примере на CodePen, где добавлен еще фильтр drop-shadow() для «светящегося» эффекта.

    Мишень из одного элемента (без псевдоэлементов) с гладкими краями

    Допустим, нам нужно получить вот такую мишень, и при этом нам позволено использовать только один элемент без псевдоэлементов.

    мишень, которую нам надо построить силами CSS

    Первая мысль — воспользоваться repeating-radial-gradient . Структура нашей мишени примерно такая:

    иллюстрация структуры мишени

    Итак, половина мишени составит 9 единиц, т.е. размеры мишени по вертикали и горизонтали будут по 18 единиц. Наш повторяющийся радиальный градиент всю первую единицу черный, потом до третьей единицы (включительно — прим. перев.) прозрачный, потом опять черный и опять прозрачный… звучит как повторение. Вот только первый раз у нас черная область от 0 до 1, т.е. одна единица, а следующая черная область уже от 3 до 5 — две единицы! Так что… нам тут надо начать отсчет не от 0 , а от -1 , верно? Что ж, это должно работать, согласно спецификации.

    Этот пример на CodePen иллюстрирует принцип:

    Первая загвоздка здесь в том, что у IE другое мнение, как это должно работать.

    repeating-radial-gradient с отрицательной первой контрольной точкой: сравните ожидаемый результат (слева) и IE (справа)

    К счастью, это исправили в Edge, но если нужна поддержка IE, проблема остается. Ее можно решить, используя обычный радиальный градиент, нам ведь всё равно не так уж много кругов и нужно. Кода больше, но всё не так уж плохо…

    Можно увидеть его в действии в этом примере на CodePen:

    Теперь окружности распределены во всех браузерах одинаково, но у нас осталась другая проблема: пусть края не слишком отличаются по гладкости от оригинальной картинки в IE/Edge, но в Firefox и Chrome они выглядят просто ужасно!

    сравните оригинал (вверху слева), IE (вверху справа), Firefox (внизу слева) и Chrome (внизу справа)

    Что ж, в IE (где и так было неплохо) и Firefox стало лучше, но в Chrome края по-прежнему безобразные.

    сравните оригинал (вверху слева), IE (вверху справа), Firefox (внизу слева) и Chrome (внизу справа)

    Может быть, радиальные градиенты вообще не лучшее решение, в конце концов. А почему бы нам не приспособить сюда решение на background-clip и box-shadow из предыдущего раздела? С помощью внешней box-shadow мы можем сделать внешнее кольцо, а тенью с inset — внутреннее. Пространство между ними займет прозрачная рамка. Мы также установим для background-clip значение content-box и дадим элементу достаточный внутренний отступ, так что у нас получится прозрачная область между центральным кружком и внутренним кольцом.

    Посмотрите, как это работает, в следующем примере на CodePen, никаких «рваных» краев и прочих неприятностей:

    Реалистичные элементы управления

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

    Для полосы у нас есть -webkit-slider-runnable-track , -moz-range-track и -ms-track . Для ручки — -webkit-slider-thumb , -moz-range-thumb и -ms-thumb . И для заполненной части есть -moz-range-progress , -ms-fill-lower (оба для части слева от ручки) и -ms-fill-upper (справа от ручки). У WebKit-браузеров не предусмотрено псевдоэлемента, которым можно было бы оформить части ползунка до и после ручки по-разному.

    Разнобой между этими псевдоэлементами выглядит ужасно, но еще ужаснее то, что мы не можем перечислить все разнобраузерные версии для одной детали, чтобы оформить их все сразу. Что-то вроде такого не заработает:

    Нам приходится постоянно писать их так:

    Что выглядит как механическое «переливание» в коде одной и той же «воды», и часто это так и есть — хотя при таком обилии разночтений между браузерами, как с ползунками, такие дубликаты полезны для сглаживания этих различий. Моим решением было использовать миксин thumb() и при необходимости передавать ему аргументы для обработки несоответствий. Например, как-то так:

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

    Давайте взглянем на несколько примеров!

    Мягкий пластик

    В качестве визуального примера представим себе что-то вроде ручки ползунка ниже:

    ползунок с ручкой из мягкого пластика

    На первый взгляд всё решение сводится к градиентному background и и градиенту для border-image , потом еще box-shadow для красоты — и такой элемент готов:

    И это даже работает (на примере элемента button вместо ручки ползунка ради простоты):

    За исключением того, что наша ручка круглая, а не квадратная. Нужно просто добавить ей border-radius: 50% , так? Так вот… это не сработает, потому что мы используем border-image , с которым border-radius самого элемента игнорируется, хотя, как это ни забавно, он по-прежнему действует на box-shadow , если она есть.

    Что же делать? Точно, использовать background-clip ! Сначала мы зададим элементу ненулевой padding , уберем рамку и скруглим его с помощью border-radius: 50% . Затем наложим два градиентных фона, обрезав верхний по content-box (обратите внимание, что обрезка входит в сокращенную запись background) . Наконец, добавим две тени, одну темную, создающую собственно тень под ручкой, а вторую с inset , которая будет слегка затемнять низ и бока внешней части ручки.

    Полюбоваться конечным результатом можно в этом примере на CodePen:

    Матовая ручка

    Что-то вроде ручки ползунка со следующей картинки:

    ползунок с матовой ручкой

    Этот случай похож на предыдущий, только теперь у нас светлая линия вверху и внутренняя тень для средней части. Если использовать внешнюю box-shadow для создания светлой линии, вся конструкция потеряет круглую форму, если только заодно не уменьшить высоту для компенсации тени. А тогда потребуется больше расчетов для определения положения внутренней части. Если же сделать ее тенью с inset , то мы уже не сможем использовать ее для затемнения внутренней части. Однако, мы можем эмулировать ее с помощью radial-gradient , которому заданы подходящий размер, положение и обрезка по content-box . То есть делаем всё аналогично предыдущему примеру, но теперь у нас поверх остальных фонов будет наложен дополнительный radial-gradient . Фактический background-size этого радиального градиента больше, чем наш content-box , так что мы можем сдвинуть его вниз так, что его верхний край останется за пределами области контента.

    Можно посмотреть на это вживую в этом примере на Code Pen:

    Объемный элемент

    Например, ручка следующего ползунка:

    ползунок с объемной ручкой

    Это уже посложнее, для этого все три области ( content-box , padding-box и border-box ) должны быть разными, чтобы мы могли накладывать фоны друг на друга и добиваться нужного эффекта с помощью background-clip .

    Итак, для основной части ползунка у нас есть градиентный background , обрезанный по content-box , наложенный поверх другого, обрезанного по padding-box , и оба они поверх третьего linear-gradient , обрезанного по border-box . Мы таже задействовали внутреннюю box-shadow , чтобы подчеркнуть край внутреннего отступа (между padding и border ):

    Результат можно посмотреть на CodePen здесь:

    See the Pen 3D button by Ana Tudor (@thebabydino) on CodePen.

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

    Можно было бы еще приблизиться к нашей цели, лучше подобрав оттенки, добавив еще радиальных градиентов или даже воспользовавшись background-blend-mode , но на подобное мне не хватает художественного чутья.

    С псевдэлементом добиться нужного результата намного проще — сначала нужно задать ему правильные размер и положение, закруглить его с помощью border-radius: 50% . Затем задать ему padding , никакой рамки, и использовать два градиента в background , верхний из которых радиальный и обрезан по content-box :

    Посмотреть, что получилось, можно в следующем примере:

    Для ручки реального ползунка я использовала тот же самый background с радиальными градиентами сверху для всех браузеров, а для Blink добавила псевдоэлемент прямо поверх этих радиальных градиентов. Это потому, что стили ручки ползунка в Safari применяются к ::-webkit-slider-thumb , но Safari не поддерживает псевдоэлементов для ручки (или дорожки). Так что если бы я убрала запасной вариант из стилей для ::-webkit-slider-thumb , то Safari не отобразил бы круглую детальку вообще.

    Иллюзия глубины

    Дорожка следующего ползунка иллюстрирует основную мысль:

    ползунок с дорожкой, уходящей в глубину

    Как и раньше, для этого мы задаем элементу ненулевой прозрачный border , padding , и накладываем друг на друга фоны с разными значениями background-clip (помните, что слои со значением content-box должны лежать поверх слоев со значением padding-box , а те — поверх слоев со значением border-box ). В данном случае у нас есть более светлый linear-gradient для заливки области border , более темный — плюс пара уменьшенных неповторяющихся радиальных, чтобы добавить еще темноты по краям — для области padding , и совсем тёмный для области контента. Затем мы задаем этой конструкции border-radius , равный как минимум половине от суммы height области контента, удвоенного padding и удвоенного border . И еще добавим внутреннюю box-shadow , чтоб слегка подчеркнуть край внутреннего отступа.

    Но тут есть проблема, и ее видно в следующем примере на CodePen:

    Из-за того, как работает border-radius — радиус области контента получается из указанного вычитанием border-width и padding , что дает в итоге отрицательное число — углы области контента не закругляются. Что ж, мы можем это исправить! Можно эмулировать нужную нам форму, сочетая линейные, и радиальные градиенты для области контента.

    Делается это так: сначала убедимся, что width нашей области контента кратна ее height (в нашем случае, 15.75em = 9*1.75em ). Нижним слоем положим linear-gradient по центру так, чтобы по вертикали он покрывал всю height области контента, но оставляет зазоры по половине ее height от обоих боковых краев. Поверх него накладываем radial-gradient , background-size , равным height области контента и по горизонтали, и по вертикали.

    Металлические элементы управления

    Например, что-то вроде кнопки, изображенной ниже:

    металлический элемент управления

    Это уже чуть сложнее, так что давайте разберем его по частям. Прежде всего, мы делаем кнопку круглой, задав ей равные width и height и установив border-radius: 50% . Затем убеждаемся, что ей задан box-sizing: border-box , чтобы border-width и padding отсчитывались внутрь (вычитались из размеров, что мы указали). Теперь зададим ей прозрачную рамку и внутренний отступ. И вот что у нас получилось на данный момент:

    Пока еще это ни на что не похоже, потому что весь общий вид достигается с помощью двух свойств, которые мы еще не добавили: box-shadow и background .

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

    составные части металлического элемента управления

    В порядке от самой внешней детали к центру, у нас есть:

    • широкое внешнее кольцо со светодиодами
    • тонкое внутреннее кольцо
    • решетчатая область (она же включает в себя голубое свечение вокруг следующей внутренней части)
    • большая центральная деталь

    Широкое внешнее кольцо — это область рамки, центральная часть — область контента, а всё, что между ними (тонкое внутреннее кольцо и решетчатая часть) — область внутреннего отступа. Тонкое внутреннее кольцо мы сделаем внутренней тенью:

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

    До цели еще далековато, но уже хоть что-то.

    Теперь нам нужно наложить друг на друга три типа фонов, сверху вниз: ограниченный по content-box (образующий центральную область), ограниченный по padding-box (образующий решетчатую область и голубое свечение) и ограниченный по border-box (образующий широкое внешнее кольцо и светодиоды).

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

    И наконец это становится на что-то похоже!

    Переходим к решетчатой области. Голубое свечение — просто радиальный градиент, сходящий к краям в прозрачность, а вот в основе отверстий лежит паттерн «Карбоновое волокно» из галереи, которую Лиа Веру сделала целых пять лет назад — но всё еще чертовски полезной для людей с ограниченными художественными способностями вроде меня.

    Кажется, у нас начинает вырисовываться что-то приличное:

    Основа широкого внешнего кольца (без светодиодов) делается одним коническим градиентом:

    И вот у нас получился металлический элемент!

    Но на нем пока нет светодиодов, исправим же это поскорее!

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

    Включенными у нас будут светодиоды вплоть до $k -того. Так что до этой отметки используем голубой вариант верхнего градиента, а после нее — серый.

    У нас 24 светодиода, размещенных по окружности, проходящей по середине области рамки. Так что ее радиус — это радиус элемента минус половина толщины рамки.

    Будем генерировать все эти градиенты с помощью Sass. Сначала создадим пустой список градиентов, затем пройдемся по нему циклом и на каждой итерации будем добавлять в список два градиента. Их координаты рассчитаны так, что они окажутся на вышеупомянутой окружности. Первый градиент зависит от счетчика цикла, а второй всегда одинаков (разве что с другими координатами на окружности).

    Окончательным результатом можно полюбоваться в этом примере:

    Тени на перпендикулярной плоскости

    Рассмотрим пример, когда есть элементы управления в вертикальной плоскости, и нам нужна тень на горизонтальной плоскости под ними. Что-то наподобие следующей картинки:

    элементы с тенью на горизонтальной плоскости под ними

    Нам нужно воспроизвести этот эффект с помощью всего одного элемента, без псевдоэлементов.

    Наложение фонов с разными значениями background-clip и background-origin выручает и в этом случае. Саму кнопку мы строим двумя фонами, верхний из которых обрезан по content-box , а тот, что под ним — по padding-box , и используем фоновый radial-gradient() со значением border-box для background-clip и background-origin , чтобы сделать тень.

    Базовое оформление очень похоже на оформление металлического элемента из прошлого раздела:

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

    Первый background наверху — это conic-gradient() для создания металлического отлива. Он обрезан по content-box . Прямо под ним у нас linear-gradient() , обрезанный по padding-box . Мы используем три внутренние тени, чтобы сделать этот второй фон менее плоским — добавляем еще один оттенок вокруг него с нулевым размытием, осветляем его вверху полупрозрачной белой тенью и затемняем внизу полпрозрачной черной тенью.

    Это дает нам металлическую кнопку (пока без тени):

    Для тени добавим третий слой фона, для которого мы зададим обоим свойствам background-clip и background-origin значение border-box . Этим фоном будет неповторяющийся radial-gradient() , положение которого мы привяжем к bottom (а по горизонтали к середине) и который мы сожмем по вертикали так, что он поместится внутри нижней стороны рамки и даже еще немного места останется — пусть он будет размером, скажем, где-то .75 от значения border-width .

    И всё! Можете поиграть с этими кнопками в следующем примере на CodePen:

    Для свойства background-clip наверняка найдётся множество применений! Особенно при наложении разных эффектов по краям элементов.

    Используйте градиент css над фоновым изображением

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

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

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

    Добавить комментарий