Добавляем градиент в 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); }
Цель — сделать pop-up окно без использования Fancybox. В общем, его можно сделать даже без…
Суть задачи: На сайте есть несколько вариантов фоновой картинки и несколько вариантов блока модального окна…
Пример реализации красивого чекбокса вместо стандартного. Это простой пример, а визуально оформить сам чекбокс каждый…
Добавлю для себя быстрое подключение шрифтов Google (Open Sans, Roboto, Ubuntu, Montserrat, Cuprum), просто потому…