August 19, 2014gearmobile Reading time ~7 minutes

Gulp - знакомство и первый запуск

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

Но для начала узнаем, что такое Gulp. Это точно такой менеджер задач, как и Grunt. Оба они являются модулями под Node.js и устанавливаются с помощью пакетного менеждера

npm

Отличие от Grunt в том, что Gulp является переработкой Grunt. Как говорят его разработчики, цель создания была в том, чтобы выбросить из Grunt все лишнее. Кроме того, настройка Gulp значительно упростилась:

Gulp

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

Установка Gulp

Установка будет производиться под операционной системой Linux Mint 17 Cinnamon. Поэтому, пользователи Mac OS найдут все нижеприведенные команды абсолютно идентичными для себя. Подразумевается, что в системе уже установлен Node.js и менеджер пакетов npm.

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

-g

. Давайте так и поступим - произведем установку в системе:

$ sudo npm install -g gulp

Затем создадим тестовую директорию с именем

gulp_test

, в которой будет производить наше знакомство:

$ mkdir gulp_test
$ cd gulp_test/

В этой директории создадим файл

1	package.json

и пропишем в нем имя проекта и его версию:

$ touch package.json
$ cat package.json
{
  "name": "first",
  "version": "0.0.1",
  "devDependencies": {}
}

Этого будет достаточно. Теперь установим Gulp внутри директории

gulp_test

. При этом воспользуемся ключом

1
--save-dev

, который будет “говорить” менеджеру пакетов npm вносить в файл

1
package.json

все устанавливаемые им пакеты в качестве зависимостей проекта:

$ npm install --save-dev gulp

Теперь снова посмотрим на содержимое файла

1	package.json

и увидим, что npm добавил Gulp в качестве зависмости:

$ cat package.json
{
  "name": "first",
  "version": "0.0.1",
  "devDependencies": {
    "gulp": "~3.8.7"
  }
}

Установка завершена и можно переходить к использованию этого менеждера задач.

Первый запуск Gulp

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

1	gulpfile.js

. Первоначально этого файла не существует и его нужно создать самостоятельно, вручную:

$ touch gulpfile.js

Затем в нем пропишем первую задачу. Все задачи деляться на два неравнозначных типа: задача по умолчанию (default task) и именованные задачи (named tasks). Разница между ними в том, что задача по умолчанию имеет имя

default

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

$ gulp

В то время как именованная задача (named task) может иметь произвольное имя. Запуск такой задачи в консоли выполняется с указанием имени конкретной задачи:

$ gulp name_of_task

Еще один важный момент заключается в том, что этот менеджер задач является потоковым. Что это значит? Не знаю, получиться ли у меня достаточно точно объяснить данный вопрос, но вот линуксоиды, хорошо знакомые с командной строкой, меня должны понять. В консоли Linux (Unix) есть такое понятие, как pipe.

Например, простая команда:

$ ls -l | less

… выполняет следующее: результат команды

ls -l

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

1
less

. Редактор

1
less

автоматически открывается в консоли с уже готовым для чтения текстом внутри себя.

Чисто схематично такой пример можно усложнить и представить в таком виде:

$ programm1 | programm2 | programm3 | programm4 | programm5

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

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

$ plugin1 | plugin2 | plugin3 | plugin4 | plugin5 | plugin6

Отлично! С теорией закончили и можно снова возвращаться к практике, к нашему файлу настроек

1	gulpfile.js

. Откроем его и пропишем в нем такие строки:

var gulp = require('gulp');

gulp.task('default', function(){
  console.log('Hello from Gulp!')
});

Первая строка

1	var gulp = require('gulp');

создает переменную

1
gulp

, в которую помещается сам Gulp. Это необходимо для Node.js, который будет читать файл

1
gulpfile.js

и работать с Gulp в виде переменной

1
gulp

Вторая строка, начинающаяся с

gulp.task

- это не что иное, как задача. Именно так создаются задачи в этом менеджере. Здесь

1
'default'

- это имя задачи (в данном случае это задача по умолчанию, как вы помните). Функция

1
function()

имеет в своем теле неограниченное количество инструкций. Так как мы еще не умеем работать с плагинами под Gulp, то в качестве инструкции пропишем вывод в консоль обычной текстовой строки -

1
console.log('Hello from Gulp!')

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

gulp

$ gulp
[19:37:53] Using gulpfile ~/Projects/gulp_test/gulpfile.js
[19:37:53] Starting 'default'...
Hello from Gulp!
[19:37:53] Finished 'default' after 169 μs

Вот это да! А что означают все эти строки в консоли? Означают они только хорошее! Строка

1	Using gulpfile ~/Projects/gulp_test/gulpfile.js

говорит о том, что Gulp для своей работы воспользовался файлом настроек

1
gulpfile

по указанному пути. Затем было запущено выполнение задачи с именем

1
default

1
Starting 'default'...

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

1
Hello from Gulp!

. И задача с именем

1
default

благополучно завершилась -

1
Finished 'default' after 169 μs

, причем на ее выполнение ушло 169 миллисекунд.

Можно поздравить самих себя - мы только что создали и запустили на выполнение свою первую задачу под Gulp!

August 01, 2014gearmobile Reading time ~5 minutes

Слайдер Owl Carousel

Встретил на Google+ упоминание о плагине под jQuery для создания карусели - OWL Carousel.

Попробовал с ним разобраться и посмотреть примеры создания слайдеров на официальной странице. Могу сказать, что я впечатлен данным скриптом и его возможностями. Слайдер адаптивный, имеет множество настроек, обладает хорошими эффектами “из коробки”. Мое личное мнение - отличный выбор для применения на практике!

Официальная страница проекта располагается здесь - OWL Carousel. Стабильная версия скрипта на данный момент -

v1.3.2

, но на странице упоминается о версии

1
2.0.0-beta

. Для своей работы плагин требует библиотеки jQuery версии не ниже

1
1.7

Ниже я попробую создать простой вариант карусели с помощью плагина OWL Carousel. Более интересные и продвинутые варианты, я думаю, показывать не имеет смысла. По той простой причине, что разобравшись с базовым вариантом, всегда можно его улучшить. И для этой цели как ничто лучше подойдут примеры на официальной странице - Demo и More Demo. Стоит сказать, что для себя я увидел там готовые решения практически на все случаи жизни.

Подключение OWL Carousel

Для подключения плагина OWL Carousel к готовому проекту необходимо получить архив плагина с официальной страницы - OWL Carousel или с GitHub - OwlCarousel. В архиве имеется все, что необходимо - библиотека jQuery, плагин

1	owl.carousel.min.js

, готовые CSS-стили для карусели. Ничего сложного или необычного в подключении плагина OWL Carousel нет - все стандартно.

HTML-разметка и подключение скрипта будут выглядеть следующим образом:

<ul id="carousel" class="owl-carousel carousel">
  <li><img src="images/owl1.jpg" width="300" height="200" alt="Owl_1" /></li>
  <li><img src="images/owl2.jpg" width="300" height="200" alt="Owl_2" /></li>
  <li><img src="images/owl3.jpg" width="300" height="200" alt="Owl_3" /></li>
  <li><img src="images/owl4.jpg" width="300" height="200" alt="Owl_4" /></li>
  <li><img src="images/owl5.jpg" width="300" height="200" alt="Owl_5" /></li>
  <li><img src="images/owl6.jpg" width="300" height="200" alt="Owl_6" /></li>
  <li><img src="images/owl7.jpg" width="300" height="200" alt="Owl_7" /></li>
  <li><img src="images/owl8.jpg" width="300" height="200" alt="Owl_8" /></li>
</ul>
<!--  SCRIPTS  -->

head

подключаются две готовых CSS-таблицы из архива -

1
owl.carousel.css

1
owl.theme.css

. Таблица

1
style.css

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

Тип HTML-элементов для создания разметки слайдера, по большому счету, не имеет особого значения, так как скрипт OWL Carousel умеет работать со всеми типами. Главное, чтобы у блока-обертки имелся обязательный класс

1	owl-carousel

, к которому будет производиться привязка стилей из файла

1
owl.carousel.css

В конце тела

body

документа подключаются библиотека jQuery, скрипт плагина OWL Carousel и файл настроек данного скрипта.

Базовая конфигурация js-файла

1	settings.js

выглядит следующим образом:

$(document).ready(function() {
  $("#carousel").owlCarousel();
});

Все, можно смотреть на готовый (слегка подредактированный) результат:

Базовый вариант слайдера OWL Carousel

Настройка плагина OWL Carousel

Скрипт OWL Carousel имеет большое количество настроек, которые добавляются или убираются в файле настроек. Ссылка на страницу с полным списком настроек располагается здесь - Customizing OWL Carousel.

К примеру, переменная

items

задает количество одновременно показываемых в слайдере изображений:

items: 5

Переменные

1	itemsDesktopSmall

1
itemsTablet

1
itemsTabletSmall

1
itemsMobile

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

1
itemsDesktop: [1199,4]

“говорит” браузеру, что при размере окна меньше или равному 1199px следует отображать одновременно только четыре изображения:

itemsDesktop: [1199,4]

Переменная

1	singleItem

устанавливает, отображать ли только одно изображение в слайдере или несколько:

singleItem: false

Переменные

1	navigation

1
pagination

управляют возможностью включения или выключения навигации\пагинации у слайдера:

navigation: true,
pagination: true

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

autoPlay

autoPlay: true

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

Варианты слайдера OWL Carousel

Стоит “побродить” по странице с демонстрационными примерами работы плагина OWL Carousel. Там есть на что посмотреть и что подобрать для себя.

Мне понравились примеры создания слайдеров - Lazy Load и Auto Height.

Наиболее интересные (для меня) примеры расположены в списке со ссылками.

К примеру, по ссылке CSS3 Transitions располагается образец слайдера с эффектом перехода, основанном на CSS3-свойстве transition. Более того, из выпадающего списка можно прямо на странице подобрать себе подходящий эффект - своеобразный конструктор получается:

Слайдер OWL Carousel с эффектом transition

Или пример создания слайдера с расположенной вверху полосой progress bar - Progress Bar.

Заключение

Плагин OWL Carousel мне понравился и я буду стараться применять его на практике, при верстке страниц.

July 19, 2014gearmobile Reading time ~12 minutes

Hexagon на CSS

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

Материал целиком основан на замечательной статье CSS Hexagon Tutorial. В Сети имеется хорошая статья по примерам создания различных видов фигур на CSS, и располагается эта статья на блоге известного CSS-гуру Chris Coyier Shapes of CSS. Среди прочих фигур там есть и желанный шестиугольник

hexagon

с готовым CSS-кодом что называется, “бери и пользуйся”.

Но ведь такой подход для нас не интересен, правда? Это потом, когда мы изучим вопрос создания шестиугольника, мы будем делать так - нашел готовый код, скопировал к себе, подредактировал и готово! А сейчас мы пошагово пройдем весь путь, от начала и до конца - это даст нам понимание процесса.

Как будем строить hexagon

Фигура hexagon изначально кажется неприступной - не понятно, с какого боку к ней подойди, чтобы начать постороение шестиугольника на CSS. Однако, если внимательно присмотреться, то hexagon можно разделить на три простые фигуры:

Три части фигуры hexagon

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

Поэтому, построение шестиугольника hexagon на CSS сводится к двух задачам:

создать два треугольника
создать один прямоугольник

Построение треугольников на CSS

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

100px

и широкой границей

1
30px

определенного цвета

1
#789

<div class="hexagon">

.hexagon{
  width: 100px;
  height: 100px;
  border: 30px solid #789;
}

Квадрат на CSS

“Раскрасим” границы квадрата для того, чтобы можно было визуально отличать их друг от друга:

<div class="hexagon hexagon_colors"></div>

.hexagon_colors{
  border-top-color: lighten(#789, 5%);
  border-right-color: lighten(#789, 10%);
  border-bottom-color: darken(#789, 10%);
  border-left-color: darken(#789, 5%);
}

Квадрат на CSS с границами разного цвета

Затем обнулим высоту

height

и ширину

1
width

нашего квадрата. Он “схлопнется”, оставив для нас видимой только его широкую границу со всех четырех сторон:

<div class="hexagon hexagon_colors hexagon_zero"></div>

.hexagon_zero{
  width: 0;
  height: 0;
}

Квадрат на CSS с нулевой высотой и шириной

Теперь превратим полученную фигуру в настоящий треугольник. Для этого обнулим (уберем) у нее верхнюю границу

1	border-top

, а обе боковые границы

1
border-left

1
border-right

сделаем прозрачного

1
transparent

цвета:

<div class="hexagon hexagon_colors hexagon_zero hexagon_triangle_up"></div>

.hexagon_triangle_up{
  border-top-width: 0;
  border-right-color: transparent;
  border-left-color: transparent;
}

Треугольник на CSS

У получившегося треугольника все стороны равны - высота и ширина по 30px каждая. Нам же необходимо “растянуть” треугольник в ширину, чтобы он у него появился тупой угол. Для этого нужно увеличить ширину боковых границ

1	border-left

1
border-right

треугольника, а ширину нижней границы

1
border-bottom

оставить прежней:

<div class="hexagon hexagon_colors hexagon_zero hexagon_triangle_up hexagon_triangle_up_large"></div>

.hexagon_triangle_up_large{
  border-left-width: 52px;
  border-right-width: 52px;
}

Удлиненный треугольник на CSS

Задача создания треугольника нами выполнена. Теперь необходимо получить точно такой треугольник, только “направленный” вниз. Это просто - достаточно поменять нулевое значение между верхней и нижней границей фигуры. Все остальные значения останутся неизменными. Чуть не забыл сказать, что для “повернутого” треугольника придется создать в HTML-коде новый блок:

<div class="hexagon hexagon_colors hexagon_zero hexagon_triangle_up hexagon_triangle_up_large"></div>
<div class="hexagon hexagon_colors hexagon_zero hexagon_triangle_down hexagon_triangle_down_large"></div>

...

.hexagon_triangle_down{
  border-bottom-width: 0;
  border-right-color: transparent;
  border-left-color: transparent;
}

.hexagon_triangle_down_large{
  border-left-width: 52px;
  border-right-width: 52px;
}

Два треугольника на CSS

Первый шаг по созданию шестиугольника hexagon на CSS выполнен - у нас есть два одинаковых разнонаправленных треугольника. Теперь нужно создать “тело” для шестиугольника - прямоугольник.

Построение прямоугольника на CSS

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

А вот с размерами для прямоугольника нужно разобраться немного подробнее. У него ширина должна быть равна удвоенной ширине боковой границы треугольника:

border-left-width: 52px + border-right-width: 52px = 104px

А высота должна быть равна удвоенной высоте треугольника (или ширине верхней\нижней границы - кому как нравиться):

border-top: 30px * 2 = 60px

В результате код будет следующим:

<div class="hexagon hexagon_colors hexagon_zero hexagon_triangle_up hexagon_triangle_up_large"></div>
<div class="inside"></div>
<div class="hexagon hexagon_colors hexagon_zero hexagon_triangle_down hexagon_triangle_down_large"></div>

...

.inside{
  width: 104px;
  height: 60px;
  background-color: #789;
}

Hexagon на CSS

Все - задача построения шестиугольника hexagon на CSS выполнена - все оказалось достаточно просто!

Создание сетки из hexagon

Теперь можно усложнить задачу и создать из фигур hexagon своеобразную сетку, а-ля пчелиные соты. Задача тривиальная и весь вопрос сводиться к нескольким CSS-свойствам:

float

1
overflow

1
margin

1
padding

Создаю первый ряд сетки:

<div class="row">
  <div class="hexa">
    <div class="hexagon hexagon_colors hexagon_zero hexagon_triangle_up hexagon_triangle_up_large"></div>
    <div class="inside"></div>
    <div class="hexagon hexagon_colors hexagon_zero hexagon_triangle_down hexagon_triangle_down_large"></div>
  </div>
  <!--  end hexa  -->
  <div class="hexa">
    <div class="hexagon hexagon_colors hexagon_zero hexagon_triangle_up hexagon_triangle_up_large"></div>
    <div class="inside"></div>
    <div class="hexagon hexagon_colors hexagon_zero hexagon_triangle_down hexagon_triangle_down_large"></div>
  </div>
  <!--  end hexa  -->
  <div class="hexa">
    <div class="hexagon hexagon_colors hexagon_zero hexagon_triangle_up hexagon_triangle_up_large"></div>
    <div class="inside"></div>
    <div class="hexagon hexagon_colors hexagon_zero hexagon_triangle_down hexagon_triangle_down_large"></div>
  </div>
  <!--  end hexa  -->
  <div class="hexa">
    <div class="hexagon hexagon_colors hexagon_zero hexagon_triangle_up hexagon_triangle_up_large"></div>
    <div class="inside"></div>
    <div class="hexagon hexagon_colors hexagon_zero hexagon_triangle_down hexagon_triangle_down_large"></div>
  </div>
  <!--  end hexa  -->
  <div class="hexa">
    <div class="hexagon hexagon_colors hexagon_zero hexagon_triangle_up hexagon_triangle_up_large"></div>
    <div class="inside"></div>
    <div class="hexagon hexagon_colors hexagon_zero hexagon_triangle_down hexagon_triangle_down_large"></div>
  </div>
  <!--  end hexa  -->
</div>
<!--  end row  -->

...

.inside{
  width: 104px;
  height: 60px;
  background-color: #778899;
}

.hexa{
  float: left;
  margin: 0 3px 0 0;
}

.row{
  overflow: hidden;
}

Первый ряд сетки из hexagons

Второй ряд сетки строиться аналогично, за тем лишь исключением, что его необходимо сдвинуть влево и вверх:

<!--  ROW  -->
<div class="row left_padding top_margin">
  <div class="hexa">
    <div class="hexagon hexagon_colors hexagon_zero hexagon_triangle_up hexagon_triangle_up_large"></div>
    <div class="inside"></div>
    <div class="hexagon hexagon_colors hexagon_zero hexagon_triangle_down hexagon_triangle_down_large"></div>
  </div>
  <!--  end hexa  -->
  <div class="hexa">
    <div class="hexagon hexagon_colors hexagon_zero hexagon_triangle_up hexagon_triangle_up_large"></div>
    <div class="inside"></div>
    <div class="hexagon hexagon_colors hexagon_zero hexagon_triangle_down hexagon_triangle_down_large"></div>
  </div>
  <!--  end hexa  -->
  <div class="hexa">
    <div class="hexagon hexagon_colors hexagon_zero hexagon_triangle_up hexagon_triangle_up_large"></div>
    <div class="inside"></div>
    <div class="hexagon hexagon_colors hexagon_zero hexagon_triangle_down hexagon_triangle_down_large"></div>
  </div>
  <!--  end hexa  -->
  <div class="hexa">
    <div class="hexagon hexagon_colors hexagon_zero hexagon_triangle_up hexagon_triangle_up_large"></div>
    <div class="inside"></div>
    <div class="hexagon hexagon_colors hexagon_zero hexagon_triangle_down hexagon_triangle_down_large"></div>
  </div>
  <!--  end hexa  -->
</div>
<!--  end row  -->

.left_padding{
  padding-left: 53px;
}

.top_margin{
  margin-top: -28px;
}

Первый и второй ряды сетки из hexagons

Дальше продолжать не имеет смысла - все остальные ряды строятся аналогично. Нужно только управлять ими с помощью соотвествующих классов, смещая влево или вверх:

Несколько рядов сетки из hexagons

Лучше перейдем к другому интересному вопросу - созданию такого же шестиугольника hexagon, но несколько иной формы, “повернутого”. У которого углы развернуты по-горизонтали, а не по-вертикали.

Построение повернутого hexagon на CSS

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

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

1	float: left;

Для блока - “тела” hexagon нужно будет изменить значения высоты или ширины на прямопротивоположные.

Но не буду голословным, а лучше создам один такой

hexagon

<div class="hexa">
  <div class="hexagon hexagon_colors hexagon_zero hexagon_triangle_left hexagon_triangle_left_large left"></div>
  <div class="inside_rotate left"></div>
  <div class="hexagon hexagon_colors hexagon_zero hexagon_triangle_right hexagon_triangle_right_large left"></div>
</div>
<!--  end hexa  -->

/*  LEFT ARROW  */

.hexagon_triangle_left{
  border-left-width: 0;
  border-top-color: transparent;
  border-bottom-color: transparent;
}

.hexagon_triangle_left_large{
  border-top-width: 52px;
  border-bottom-width: 52px;
}

/*  RIGHT ARROW  */

.hexagon_triangle_right{
  border-right-width: 0;
  border-top-color: transparent;
  border-bottom-color: transparent;
}

.hexagon_triangle_right_large{
  border-top-width: 52px;
  border-bottom-width: 52px;
}

.inside_rotate{
  width: 60px;
  height: 104px;
  background-color: #778899;
}

.left{
  float: left;
}

Развернутый hexagon

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

Несколько развернутых hexagons в ряд

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

<!--  ROW  -->
<div class="row top_margin_double">
  <div class="hexa left_padding_double_middle">
    <div class="hexagon hexagon_colors hexagon_zero hexagon_triangle_left hexagon_triangle_left_large left"></div>
    <div class="inside_rotate left"></div>
    <div class="hexagon hexagon_colors hexagon_zero hexagon_triangle_right hexagon_triangle_right_large left"></div>
  </div>
  <!--  end hexa  -->
  <div class="hexa left_padding_double">
    <div class="hexagon hexagon_colors hexagon_zero hexagon_triangle_left hexagon_triangle_left_large left"></div>
    <div class="inside_rotate left"></div>
    <div class="hexagon hexagon_colors hexagon_zero hexagon_triangle_right hexagon_triangle_right_large left"></div>
  </div>
  <!--  end hexa  -->
  <div class="hexa left_padding_double">
    <div class="hexagon hexagon_colors hexagon_zero hexagon_triangle_left hexagon_triangle_left_large left"></div>
    <div class="inside_rotate left"></div>
    <div class="hexagon hexagon_colors hexagon_zero hexagon_triangle_right hexagon_triangle_right_large left"></div>
  </div>
  <!--  end hexa  -->
</div>
<!--  end row  -->

.left_padding_double{
  padding-left: 64px;
}

.left_padding_double_middle{
  padding-left: 94px;
}

.top_margin_double{
  margin-top: -50px;
}

Развернутые hexagons в два ряда

Можно продолжать постороние рядов до бесконечности, получая сетку из hexagons все большего размера:

Развернутые hexagons в несколько рядов

3D-проекция hexagons

Можно видоизменить внешний вид сетки из hexagons, воспользовавшись CSS3-свойством

transform

. Создаю отдельный класс, в котором прописываю такие свойстсва:

.hexa_transform{
  -webkit-transform: perspective(600px) rotateX(60deg);
  -moz-transform: perspective(600px) rotateX(60deg);
  -ms-transform: perspective(600px) rotateX(60deg);
  -o-transform: perspective(600px) rotateX(60deg);
  transform: perspective(600px) rotateX(60deg);
}

… и проверяю в окне браузера:

3D-проекция сетки из hexagons

Hexagons с помощью псевдо-классов

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

Можно (и нужно) значительно сократить код, воспользовавшись для этой цели псевдо-классами

:before

1
:after

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

.hex:before {
  content: - ";
  width: 0; height: 0;
  border-bottom: 30px solid #778899;
  border-left: 52px solid transparent;
  border-right: 52px solid transparent;
  position: absolute;
  top: -30px;
}

.hex {
  margin-top: 30px;
  width: 104px;
  height: 60px;
  background-color: #778899;
  position: relative;
  float: left;
}

.hex:after {
  content: "";
  width: 0;
  position: absolute;
  bottom: -30px;
  border-top: 30px solid #778899;
  border-left: 52px solid transparent;
  border-right: 52px solid transparent;
}

Hexagon на CSS с помощью псевдо-классов :before и :after

CSS Hexagon

Рассмотренный выше способ неплох, причем оба его варианта. Но для практического применения оба они достаточно трудоемкие. В Сети, помимо многих других подобного рода, имеется online CSS-генератор для создания hexagon в считанные минуты.

Адрес сервиса располагается здесь - CSS Hexagon. Помимо создания самого hexagon, там можно “прикрутить” к фигуре тень и границу, что просто великолепно!

Все - на этом обзор закончен.

July 18, 2014gearmobile Reading time ~6 minutes

Цикл for в Sass

Очень краткий пример работы с циклом
1
for
в препроцессоре Sass.

С чего вдруг мне приспичило воспользоваться циклом в препроцессоре? Все, как всегда, просто - в предыдущей статье, посвященной плагину Smooth Scroll (Плагин Smooth Scroll), мне потребовался создать пример разметки HTML-документа с заголовками всех уровней, с первого (h1) до шестого (h6). Все бы ничего, но вручную создавать стили для заголовков всех уровней как-то утомительно.

HTML-разметка для цикла for

Вот я и озаботился задачей автоматизировать этот процесс, через цикл. Для этой цели я использовал цикл

for

. Упростил пример, выкинув параграфы и оставив только заголовки всех уровней:

<div class="wrapper">
  <h1>header 1</h1>
  <h2>header 2</h2>
  <h3>header 3</h3>
  <h4>header 4</h4>
  <h5>header 5</h5>
  <h6>header 6</h6>
</div>

Базовые CSS-стили

Затем пропишу основные стили для этой разметки:

$color: #778899;
$percent: 5%;
$percentStep: 5;
$fontSize: 76px;
$fontSizeStep: 10;

.wrapper{
  width: 60%;
  margin: 5% auto 0;
  text-align: center;
}

h1,h2,h3,h4,h5,h6{
  font-family: Arial, sans-serif;
  text-transform: capitalize;
  margin-bottom: 4%;
}

Использую цикл for в Sass

Теперь у меня стоит задача “покрасить” все заголовки в оттенки цвета, указанного в переменной

1	$color: #778899;

. Для создания оттенков воспользуюсь функцией

1
lighten()

из препроцессора Sass.

Цвет будет меняться с шагом в 5% (

1	$percentStep: 5;

h1{
  color: lighten($color,5%);
}

h2{
  color: lighten($color,10%);
}

h3{
  color: lighten($color,15%);
}
...

Также будет изменяться размер шрифта (кегль) в заголовках уровней с первого (

h1

) до шестого (

1
h6

), с шагом 10px (

1
$fontSizeStep: 10

h1 {
  font-size: 76px;
}

h2 {
  font-size: 66px;
}

h3 {
  font-size: 56px;
}
...

Как видим, задача и вправду не для ленивых - это же надо тупо вбивать столько значений! Но мне поможет Sass и его циклы, а точнее - цикл

for

Для этого создаю такую конструкцию цикла

for

@for $i from 1 through 6 {
  h#{$i}{
    color: lighten($color,$percent);
    font-size: $fontSize;
    $percent: $percent + $percentStep;
    $fontSize: $fontSize - $fontSizeStep;
  }
}

Небольшая расшифровка приведенного выше цикла. В данном случае используется цикл

for

, в котором счетчик

1
$i

изменяет свое значение в диапазоне от 1 до 6 включительно. Конструкция

1
#{$i}

называется экранированием в Sass и служит для того, чтобы значение счетчика

1
$i

подставилось в коде “как есть”, в виде текста.

В результате получается такой вывод:

Далее идут CSS-правила с использованием функции

lighten()

препроцессора Sass и переменных

1
$color

1
$percent

1
$fontSize

. Последние две строки производят увеличение значения переменных на указанный шаг:

$percent: $percent + $percentStep;
$fontSize: $fontSize - $fontSizeStep;

Приведенный выше SCSS-код скомпилируется в готовый CSS-код подобного вида:

h1 {
  color: #8695a4;
  font-size: 76px;
}

h2 {
  color: #94a2af;
  font-size: 66px;
}

h3 {
  color: #a3aeba;
  font-size: 56px;
}

h4 {
  color: #b1bbc5;
  font-size: 46px;
}

h5 {
  color: #c0c8d0;
  font-size: 36px;
}

h6 {
  color: #ced5db;
  font-size: 26px;
}

Смотрим результат в браузере и радуемся успеху:

Результат работы цикла for в Sass

Полный код примера цикла for в Sass

Полный код рассмотренного примера создания цикла

for

в Sass приведен ниже:

<div class="wrapper">
  <h1>header 1</h1>
  <h2>header 2</h2>
  <h3>header 3</h3>
  <h4>header 4</h4>
  <h5>header 5</h5>
  <h6>header 6</h6>
</div>

@import "compass/reset";

$color: #778899;
$percent: 5%;
$percentStep: 5;
$fontSize: 76px;
$fontSizeStep: 10;

.wrapper{
  width: 60%;
  margin: 5% auto 0;
  text-align: center;
}

h1,h2,h3,h4,h5,h6{
  font-family: Arial, sans-serif;
  text-transform: capitalize;
  margin-bottom: 4%;
}

@for $i from 1 through 6 {
  h#{$i}{
    color: lighten($color,$percent);
    font-size: $fontSize;
    $percent: $percent + $percentStep;
    $fontSize: $fontSize - $fontSizeStep;
  }
}

Скомпилированный в CSS-код результат нашего кодинга:

.wrapper {
  width: 60%;
  margin: 5% auto 0;
  text-align: center;
}

h1, h2, h3, h4, h5, h6 {
  font-family: Arial, sans-serif;
  text-transform: capitalize;
  margin-bottom: 4%;
}

h1 {
  color: #8695a4;
  font-size: 76px;
}

h2 {
  color: #94a2af;
  font-size: 66px;
}

h3 {
  color: #a3aeba;
  font-size: 56px;
}

h4 {
  color: #b1bbc5;
  font-size: 46px;
}

h5 {
  color: #c0c8d0;
  font-size: 36px;
}

h6 {
  color: #ced5db;
  font-size: 26px;
}

На этом все.

July 17, 2014gearmobile Reading time ~14 minutes

Плагин Smooth Scroll

Обзор краткий такого же небольшого плагина Smooth Scroll, написанного под библиотеку jQuery.

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

Подключение плагина Smooth Scroll

Подключение Smooth Scroll к HTML-странице производится как обычно:

<!--  SCRIPTS  -->
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/jquery.smooth-scroll.min.js"></script>
<script src="js/settings.js"></script>
...

… где первая строка - это библиотека jQuery, вторая строка - плагин Smooth Scroll, третья строка - файл инициализации плагина Smooth Scroll.

Инициализация Smooth Scroll

Для того, чтобы заработал плагин Smooth Scroll и на странице появилась плавная прокрутка, нужно в js-файле скрипта прописать строки:

$(document).ready(function(){
  $('a').smoothScroll();
});

… то есть - всем ссылкам страницы присвоить метод

1	smoothScroll()

, что дает плавный скроллинг. В принципе, этого достаточно - больше ничего и не надо.

Варианты выборки в Smooth Scroll

Помимо показанной выше строчки, скрипт Smooth Scroll имеет несколько других вариантов режима работы. Другими словами, эти режимы работы - все навсего усложненный первый вариант, вариации на тему выборки HTML-элемента в библиотеке jQuery.

Примеры выборок взяты мною из файла

readme.md

, переводить их мне совсем не хочется; да и нет в этом необходимости - все понятно даже по коду:

Allows for easy implementation of smooth scrolling for same-page links.
Works like this: 1 $('a').smoothScroll();
Specify a containing element if you want: 1 $('#container a').smoothScroll();

Exclude links if they are within a containing element:

1
$('#container a').smoothScroll({excludeWithin: ['.container2']});

Exclude links if they match certain conditions:

1
$('a').smoothScroll({exclude: ['.rough','#chunky']});

Adjust where the scrolling stops:

1
$('.backtotop').smoothScroll({offset: -100});

Add a callback function that is triggered before the scroll starts: `$(‘a’).smoothScroll({beforeScroll: function() { alert(‘ready to go!’); }});

Add a callback function that is triggered after the scroll is complete:

1
$('a').smoothScroll({afterScroll: function() { alert('we made it!'); }});

Пример работы Smooth Scroll

Ниже привожу пример HTML, SCSS и JS-кода, на котором проходил “испытание” плагин Smooth Scroll у меня, в моей “лаборатории”.

<head>
  <meta charset="utf-8">
  <title>Smooth Scroll Plugin</title>
  <link rel="stylesheet" href="css/style.css">
</head>

<body>

  <h1 class="head">smooth scroll plugin</h1>

  <ul class="scroll">
    <li><a href="#h1">header 1</a></li>
    <li><a href="#h2">header 2</a></li>
    <li><a href="#h3">header 3</a></li>
    <li><a href="#h4">header 4</a></li>
    <li><a href="#h5">header 5</a></li>
  </ul>

  <h1>header 1</h1>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium odit sunt dicta, consequatur quis totam animi possimus. Dignissimos quod commodi enim accusamus obcaecati delectus, eaque similique quam hic perspiciatis fugiat.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis molestiae eos id provident veniam porro quas et optio vitae dignissimos delectus adipisci dolorum similique numquam necessitatibus sit magni, neque dolor.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non error dolorum, obcaecati, amet officia debitis nesciunt ullam quasi nobis aliquid quae voluptas mollitia ducimus accusantium veritatis quia esse autem inventore?</p>

  <h2>header 2</h2>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium odit sunt dicta, consequatur quis totam animi possimus. Dignissimos quod commodi enim accusamus obcaecati delectus, eaque similique quam hic perspiciatis fugiat.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis molestiae eos id provident veniam porro quas et optio vitae dignissimos delectus adipisci dolorum similique numquam necessitatibus sit magni, neque dolor.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non error dolorum, obcaecati, amet officia debitis nesciunt ullam quasi nobis aliquid quae voluptas mollitia ducimus accusantium veritatis quia esse autem inventore?</p>

  <h3 id="h3">header 3</h3>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium odit sunt dicta, consequatur quis totam animi possimus. Dignissimos quod commodi enim accusamus obcaecati delectus, eaque similique quam hic perspiciatis fugiat.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis molestiae eos id provident veniam porro quas et optio vitae dignissimos delectus adipisci dolorum similique numquam necessitatibus sit magni, neque dolor.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non error dolorum, obcaecati, amet officia debitis nesciunt ullam quasi nobis aliquid quae voluptas mollitia ducimus accusantium veritatis quia esse autem inventore?</p>

  <h4>header 4</h4>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium odit sunt dicta, consequatur quis totam animi possimus. Dignissimos quod commodi enim accusamus obcaecati delectus, eaque similique quam hic perspiciatis fugiat.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis molestiae eos id provident veniam porro quas et optio vitae dignissimos delectus adipisci dolorum similique numquam necessitatibus sit magni, neque dolor.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non error dolorum, obcaecati, amet officia debitis nesciunt ullam quasi nobis aliquid quae voluptas mollitia ducimus accusantium veritatis quia esse autem inventore?</p>

  <h5 id="h5">header 5</h5>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium odit sunt dicta, consequatur quis totam animi possimus. Dignissimos quod commodi enim accusamus obcaecati delectus, eaque similique quam hic perspiciatis fugiat.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis molestiae eos id provident veniam porro quas et optio vitae dignissimos delectus adipisci dolorum similique numquam necessitatibus sit magni, neque dolor.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non error dolorum, obcaecati, amet officia debitis nesciunt ullam quasi nobis aliquid quae voluptas mollitia ducimus accusantium veritatis quia esse autem inventore?</p>

  <h5>header 6</h5>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium odit sunt dicta, consequatur quis totam animi possimus. Dignissimos quod commodi enim accusamus obcaecati delectus, eaque similique quam hic perspiciatis fugiat.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis molestiae eos id provident veniam porro quas et optio vitae dignissimos delectus adipisci dolorum similique numquam necessitatibus sit magni, neque dolor.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non error dolorum, obcaecati, amet officia debitis nesciunt ullam quasi nobis aliquid quae voluptas mollitia ducimus accusantium veritatis quia esse autem inventore?</p>

  <h5>header 7</h5>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium odit sunt dicta, consequatur quis totam animi possimus. Dignissimos quod commodi enim accusamus obcaecati delectus, eaque similique quam hic perspiciatis fugiat.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis molestiae eos id provident veniam porro quas et optio vitae dignissimos delectus adipisci dolorum similique numquam necessitatibus sit magni, neque dolor.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non error dolorum, obcaecati, amet officia debitis nesciunt ullam quasi nobis aliquid quae voluptas mollitia ducimus accusantium veritatis quia esse autem inventore?</p>

  <h1>header 1</h1>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium odit sunt dicta, consequatur quis totam animi possimus. Dignissimos quod commodi enim accusamus obcaecati delectus, eaque similique quam hic perspiciatis fugiat.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis molestiae eos id provident veniam porro quas et optio vitae dignissimos delectus adipisci dolorum similique numquam necessitatibus sit magni, neque dolor.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non error dolorum, obcaecati, amet officia debitis nesciunt ullam quasi nobis aliquid quae voluptas mollitia ducimus accusantium veritatis quia esse autem inventore?</p>

  <h2 id="h2">header 2</h2>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium odit sunt dicta, consequatur quis totam animi possimus. Dignissimos quod commodi enim accusamus obcaecati delectus, eaque similique quam hic perspiciatis fugiat.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis molestiae eos id provident veniam porro quas et optio vitae dignissimos delectus adipisci dolorum similique numquam necessitatibus sit magni, neque dolor.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non error dolorum, obcaecati, amet officia debitis nesciunt ullam quasi nobis aliquid quae voluptas mollitia ducimus accusantium veritatis quia esse autem inventore?</p>

  <h3>header 3</h3>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium odit sunt dicta, consequatur quis totam animi possimus. Dignissimos quod commodi enim accusamus obcaecati delectus, eaque similique quam hic perspiciatis fugiat.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis molestiae eos id provident veniam porro quas et optio vitae dignissimos delectus adipisci dolorum similique numquam necessitatibus sit magni, neque dolor.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non error dolorum, obcaecati, amet officia debitis nesciunt ullam quasi nobis aliquid quae voluptas mollitia ducimus accusantium veritatis quia esse autem inventore?</p>

  <h4>header 4</h4>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium odit sunt dicta, consequatur quis totam animi possimus. Dignissimos quod commodi enim accusamus obcaecati delectus, eaque similique quam hic perspiciatis fugiat.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis molestiae eos id provident veniam porro quas et optio vitae dignissimos delectus adipisci dolorum similique numquam necessitatibus sit magni, neque dolor.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non error dolorum, obcaecati, amet officia debitis nesciunt ullam quasi nobis aliquid quae voluptas mollitia ducimus accusantium veritatis quia esse autem inventore?</p>

  <h5>header 5</h5>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium odit sunt dicta, consequatur quis totam animi possimus. Dignissimos quod commodi enim accusamus obcaecati delectus, eaque similique quam hic perspiciatis fugiat.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis molestiae eos id provident veniam porro quas et optio vitae dignissimos delectus adipisci dolorum similique numquam necessitatibus sit magni, neque dolor.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non error dolorum, obcaecati, amet officia debitis nesciunt ullam quasi nobis aliquid quae voluptas mollitia ducimus accusantium veritatis quia esse autem inventore?</p>

  <h5>header 6</h5>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium odit sunt dicta, consequatur quis totam animi possimus. Dignissimos quod commodi enim accusamus obcaecati delectus, eaque similique quam hic perspiciatis fugiat.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis molestiae eos id provident veniam porro quas et optio vitae dignissimos delectus adipisci dolorum similique numquam necessitatibus sit magni, neque dolor.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non error dolorum, obcaecati, amet officia debitis nesciunt ullam quasi nobis aliquid quae voluptas mollitia ducimus accusantium veritatis quia esse autem inventore?</p>

  <h5>header 7</h5>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium odit sunt dicta, consequatur quis totam animi possimus. Dignissimos quod commodi enim accusamus obcaecati delectus, eaque similique quam hic perspiciatis fugiat.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis molestiae eos id provident veniam porro quas et optio vitae dignissimos delectus adipisci dolorum similique numquam necessitatibus sit magni, neque dolor.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non error dolorum, obcaecati, amet officia debitis nesciunt ullam quasi nobis aliquid quae voluptas mollitia ducimus accusantium veritatis quia esse autem inventore?</p>

  <h1 id="h1">header 1</h1>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium odit sunt dicta, consequatur quis totam animi possimus. Dignissimos quod commodi enim accusamus obcaecati delectus, eaque similique quam hic perspiciatis fugiat.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis molestiae eos id provident veniam porro quas et optio vitae dignissimos delectus adipisci dolorum similique numquam necessitatibus sit magni, neque dolor.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non error dolorum, obcaecati, amet officia debitis nesciunt ullam quasi nobis aliquid quae voluptas mollitia ducimus accusantium veritatis quia esse autem inventore?</p>

  <h2>header 2</h2>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium odit sunt dicta, consequatur quis totam animi possimus. Dignissimos quod commodi enim accusamus obcaecati delectus, eaque similique quam hic perspiciatis fugiat.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis molestiae eos id provident veniam porro quas et optio vitae dignissimos delectus adipisci dolorum similique numquam necessitatibus sit magni, neque dolor.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non error dolorum, obcaecati, amet officia debitis nesciunt ullam quasi nobis aliquid quae voluptas mollitia ducimus accusantium veritatis quia esse autem inventore?</p>

  <h3>header 3</h3>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium odit sunt dicta, consequatur quis totam animi possimus. Dignissimos quod commodi enim accusamus obcaecati delectus, eaque similique quam hic perspiciatis fugiat.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis molestiae eos id provident veniam porro quas et optio vitae dignissimos delectus adipisci dolorum similique numquam necessitatibus sit magni, neque dolor.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non error dolorum, obcaecati, amet officia debitis nesciunt ullam quasi nobis aliquid quae voluptas mollitia ducimus accusantium veritatis quia esse autem inventore?</p>

  <h4 id="h4">header 4</h4>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium odit sunt dicta, consequatur quis totam animi possimus. Dignissimos quod commodi enim accusamus obcaecati delectus, eaque similique quam hic perspiciatis fugiat.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis molestiae eos id provident veniam porro quas et optio vitae dignissimos delectus adipisci dolorum similique numquam necessitatibus sit magni, neque dolor.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non error dolorum, obcaecati, amet officia debitis nesciunt ullam quasi nobis aliquid quae voluptas mollitia ducimus accusantium veritatis quia esse autem inventore?</p>

  <h5>header 5</h5>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium odit sunt dicta, consequatur quis totam animi possimus. Dignissimos quod commodi enim accusamus obcaecati delectus, eaque similique quam hic perspiciatis fugiat.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis molestiae eos id provident veniam porro quas et optio vitae dignissimos delectus adipisci dolorum similique numquam necessitatibus sit magni, neque dolor.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non error dolorum, obcaecati, amet officia debitis nesciunt ullam quasi nobis aliquid quae voluptas mollitia ducimus accusantium veritatis quia esse autem inventore?</p>

  <h5>header 6</h5>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium odit sunt dicta, consequatur quis totam animi possimus. Dignissimos quod commodi enim accusamus obcaecati delectus, eaque similique quam hic perspiciatis fugiat.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis molestiae eos id provident veniam porro quas et optio vitae dignissimos delectus adipisci dolorum similique numquam necessitatibus sit magni, neque dolor.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non error dolorum, obcaecati, amet officia debitis nesciunt ullam quasi nobis aliquid quae voluptas mollitia ducimus accusantium veritatis quia esse autem inventore?</p>

  <h5>header 7</h5>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium odit sunt dicta, consequatur quis totam animi possimus. Dignissimos quod commodi enim accusamus obcaecati delectus, eaque similique quam hic perspiciatis fugiat.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis molestiae eos id provident veniam porro quas et optio vitae dignissimos delectus adipisci dolorum similique numquam necessitatibus sit magni, neque dolor.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non error dolorum, obcaecati, amet officia debitis nesciunt ullam quasi nobis aliquid quae voluptas mollitia ducimus accusantium veritatis quia esse autem inventore?</p>

  <!--  SCRIPTS  -->
  <script src="js/jquery-1.11.1.min.js"></script>
  <script src="js/jquery.smooth-scroll.min.js"></script>
  <script src="js/settings.js"></script>

</body>

$color: #789;

h1,h2,h3,h4,h5{
  text-transform: uppercase;
  font-family: Georgia, sans-serif;
  text-align: center;
}

h1{
  font-size: 36px;
  color: $color;
}
h2{
  font-size: 32px;
  color: lighten($color,5%);
}
h3{
  font-size: 28px;
  color: lighten($color,10%);
}
h4{
  font-size: 24px;
  color: lighten($color,15%);
}
h5{
  font-size: 24px;
  color: lighten($color,20%);
}
h6{
  font-size: 20px;
  color: lighten($color,25%);
}
h7{
  font-size: 18px;
  color: lighten($color,30%);
}

.head{
  text-transform: capitalize;
  font-size: 48px;
  color: darken($color,5%);
}

.scroll{
  list-style-type: none;
  padding: 0 0 0 100px;
  li{
    margin-bottom: 10px;
    a{
      text-transform: capitalize;
      text-decoration: none;
      color: darken($color,10%);
      &:hover{
        color: darken($color,15%);
      }
    }
  }
}

$(document).ready(function(){
  $('a').smoothScroll();
});

На этом все.

Zencoder

Frontend Developer Notebook

Gulp - знакомство и первый запуск

Установка Gulp

Первый запуск Gulp

Слайдер Owl Carousel

Подключение OWL Carousel

Настройка плагина OWL Carousel

Варианты слайдера OWL Carousel

Заключение

Hexagon на CSS

Как будем строить hexagon

Построение треугольников на CSS

Построение прямоугольника на CSS

Создание сетки из hexagon

Построение повернутого hexagon на CSS

3D-проекция hexagons

Hexagons с помощью псевдо-классов

CSS Hexagon

Цикл for в Sass

HTML-разметка для цикла for

Базовые CSS-стили

Использую цикл for в Sass

Полный код примера цикла for в Sass

Плагин Smooth Scroll

Подключение плагина Smooth Scroll

Инициализация Smooth Scroll

Варианты выборки в Smooth Scroll

Пример работы Smooth Scroll