Добавляем градиент в sass через миксины или с помощью bourbon

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

Вариант #1. Создаем такой миксин:

@mixin linear-gradient($direction, $fromColor, $toColor)
  background-color: $toColor /* Fallback Color */
  background-image: -webkit-gradient(linear, $direction, from($fromColor), to($toColor)) /* Saf4+, Chrome */
  background-image: -webkit-linear-gradient($direction, $fromColor, $toColor) /* Chrome 10+, Saf5.1+, iOS 5+ */
  background-image:    -moz-linear-gradient($direction, $fromColor, $toColor) /* FF3.6 */
  background-image:     -ms-linear-gradient($direction, $fromColor, $toColor) /* IE10 */
  background-image:      -o-linear-gradient($direction, $fromColor, $toColor) /* Opera 11.10+ */
  background-image:         linear-gradient($direction, $fromColor, $toColor)
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#{$fromColor}', EndColorStr='#{$toColor}');

А затем выводим его таким образом для любого элемента

header
  @include linear-gradient(left, $purple, $blue)

Где $purple и $blue — это переменные, заданные выше по коду

$purple: #8e70af
$blue: #48bfed

На выходе получим такой css:

.header {
  background-color: #48bfed;
  background-image: -webkit-gradient(linear, left, from(#8e70af), to(#48bfed));
  background-image: -webkit-linear-gradient(left, #8e70af, #48bfed);
  background-image: -moz-linear-gradient(left, #8e70af, #48bfed);
  background-image: -ms-linear-gradient(left, #8e70af, #48bfed);
  background-image: -o-linear-gradient(left, #8e70af, #48bfed);
  background-image: linear-gradient(left, #8e70af, #48bfed);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#8e70af', EndColorStr='#48bfed');
}

Вариант #2. Если же у вас подключен bourbon, то миксин создавать не нужно, достаточно задать градиент таким образом:

header
  @include linear-gradient(left, $purple, $blue)

Этой строкой @import "bourbon/bourbon" Bourbon импортируется один раз в самом верху кода.

И на выходе получим такой css:

header {
  background-color: #8e70af;
  background-image: -webkit-linear-gradient(left, #8e70af, #48bfed);
  background-image: linear-gradient(to right,#8e70af, #48bfed);
}
Делаем попап без плагина fancybox

Цель — сделать pop-up окно без использования Fancybox. В общем, его можно сделать даже без…

Делаем на сайте случайные картинки для фона и для некоторых элементов

Суть задачи: На сайте есть несколько вариантов фоновой картинки и несколько вариантов блока модального окна…

Делаем красивые чекбоксы

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

Быстрое подключение шрифтов Google Fonts (Open Sans, Roboto, Ubuntu, Montserrat, Cuprum)

Добавлю для себя быстрое подключение шрифтов Google (Open Sans, Roboto, Ubuntu, Montserrat, Cuprum), просто потому…

Ответить