Градиент css

Градиент css

Градиент css

В проектах, с которыми мне приходиться работать, достаточно часто нужно использовать градиенты (согласно дизайнерской задумки). Если брать в качестве градиента картинку с шаблона, тогда страница стает тяжелее ровно на вес этой же картинки, плюс данная картинка будет плохо подходить для сайта, использующего адаптивный шаблон ну и конечно же реализовать  данную задачу (например сверстать блок с градиентом) не очень быстро и не удобно. В таких случаях на выручку к нам приходит градиент css, этим свойством мы можем пользоваться начиная с версии CSS3. Хочется сказать большое спасибо за это (и за другие полезные свойства CCS3) разработчикам, так как они значительно упростили жизнь вебмастерам и верстальщикам.

Итак градиент на css позволяет нам быстро реализовать шаблон без использования картинок и различных фич.

При использовании свойства linear-gradient (не указывая префикс) нужно указать направление к стороне блока или углу. Это выглядит так:  to [сторона или угол], то есть направление градиента можно сочетать, как top right или to bottom left, или указать угол:

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

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

По умолчанию градиент имеет форму эллипса и находиться в центре:

Для определения положения радиальный градиент , использует ключевые слова с приставкой at: at top, at right, at bottom, at left и at center, или задать в пикселях или в процентах:  at 15px 120px или at 25% 55%. Аналогично и линейному градиенту, с отличием того, что здесь есть приставка.

Еще для работы с градиентом используются ключевые слова:
closest-side — градиент заканчивается у начальной границы элемента, который ближе к центру.
farthest-side — градиент заканчивается у дальней границы элемента.
closest-corner — конечная фигура растягивается так, чтобы проходила через угол элемента, ближайший к центру градиента.
farthest-corner — похоже на closest-corner, за отличием того, что конечная фигура проходит через угол, отдаленный от центра. Это значение задано по умолчанию.

P.S. Такую вот заметочку я решил сделать для себя, а может и еще кому то будет полезна, ну вообщем пользуйтесь на здоровье.

0 ответы

Ответить

Хотите присоединиться к дискуссии?
Приглашаем поучаствовать!

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