В предыдущей статье “Gulp - знакомство и первый запуск”” мы познакомились с установкой менеджера Gulp и запуском первой задачи под него. В этой статье мы перейдем к еще более интересному материалу, в котором узнаем, как устанавливать и запускать плагины под Gulp на примере одного из них - gulp-uglify.

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

Каждый из плагинов - это код, решающий только одну задачу. Например, один плагин умеет сжимать изображения, другой сжимает js-файлы, третий сжимает css-файлы; еще один умеет компилировать scss-файлы в css-файлы. И так далее - список можно продолжать и продолжать.

Становиться понятно, что для конкретной задачи нам нужно установить нужный плагин и создать задачу (task) в файле

1
gulpfile.js
. А затем запустить Gulp на выполнение этой задачи. Конечно, задач может быть не одна, а несколько. Все зависит о того, какие именно задачи нам необходимо выполнять.

Давайте рассмотрим процесс установки плагинов и настройки задач на примере одного из них -

1
gulp-uglify
. Данный плагин служит для минификации js-файлов - он удаляет пробелы, запятые, точки с запятой. В результате js-файл получается меньшим по размеру.

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

Устанавливаем gulp-uglify под Gulp

На странице плагина gulp-uglify описана команда установки этого плагина, которую мы повторим для себя, в своем проекте:

$ npm install --save-dev gulp-uglify

Опять таки, ключ

1
--save-dev
“говорит” менеджеру
1
npm
добавить плагин
1
gulp-uglify
в качестве зависимости в файл
1
package.json
:

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

Создаем задачу gulp-uglify под Gulp

Плагин

1
gulp-uglify
установлен и теперь самое время прописать в файле
1
gulpfile.js
именованную задачу (named task) под него. Надеюсь, уважаемый читатель помнит о двух типах задач под Gulp, описанных в предыдущей статье “Gulp - знакомство и первый запуск”.

Открываем файл

1
gulpfile.js
в редакторе кода (у меня это Sublime Text) и вносим туда следующие строки:

var gulp = require('gulp'),
    uglify = require('gulp-uglify');
...
// Gulp Uglify
gulp.task('gulp-uglify', function(){
  gulp.src('js/*.js')
  .pipe(uglify())
  .pipe(gulp.dest('build/js'))
});

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

Но это не главное. Важнее разобраться, что из себя представляет каждая из этих строк. Так вот, строка

1
uglify = require('gulp-uglify')
- это создание переменной с именем
1
uglify
, в которую помещается плагин
1
gulp-uglify
. Обратите внимание на синтаксис этой строки и ее табуляцию - оба аспекта важны и их несоблюдение приведет к тому, что Gulp не будет работать. По большому счету, можно написать и так -
1
var uglify = require('gulp-uglify');
, но предыдущая запись является более правильной.

Далее идут строки для новой именованной задачи для Gulp. Имя задачи задаем произвольно и пусть оно будет таким -

1
gulp-uglify
. В теле callback-функции пропишем директорию, содержимое которой Gulp должен отслеживать -
1
gulp.src('js/*.js')
. В данном случае указываем, что Gulp должен следить за изменениями всех файлов с расширением .js, расположенных внутри директории
1
js
.

Следующая строка

1
.pipe(uglify())
получает в виде потока содержимое директории
1
js
и обрабатывает его с помощью плагина
1
gulp-uglify
, помещенного внутрь переменной
1
uglify
. Результат обработки передается в виде потока в строку
1
.pipe(gulp.dest('build/js'))
, которая сохраняет его по пути
1
build/js
.

Вот мы и разобрали суть задачи в Gulp! Ведь ничего сложного, правда?!

Запускаем задачу gulp-uglify в Gulp

Переходим от слов к делу и запустим на выполнение только что созданную нами задачу

1
gulp-uglify
. Не забываем, что именованные задачи в Gulp запускаются с указанием их имени:

$ gulp gulp-uglify
[21:47:43] Using gulpfile ~/Projects/gulp_test/gulpfile.js
[21:47:43] Starting 'gulp-uglify'...
[21:47:43] Finished 'gulp-uglify' after 12 ms

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

1
gulp-uglify
успешно запустилась, выполнилась за 12 миллисекунд и также успешно завершилась. По идее, теперь по пути
1
build/js
у нас должен располагаться минифицированный js-файл (в моем случае это был
1
jquery-1.11.1.js
).

Посмотрим и видим, что так оно и есть, файлик

1
jquery-1.11.1.js
помещен туда, куда мы и прописывали:

$ ls build/js/
jquery-1.11.1.js

А точно ли он минифицированный? Это легко проверить - открываем его в Sublime Text и наблюдаем такую картину:

Минифицированный с помощью gulp-uglify файл в Gulp

Полезные плагины под Gulp

Мы успешно установили и запустили плагин под Gulp - можно в очередной раз поздравить себя! В данном случае это был плагин

1
gulp-uglify
для минификации js-файлов.

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

1
gulp-uglify
.

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

  • 1
    gulp-minify-html
    
    // минификация HTML-файлов
  • 1
    gulp-minify-css
    
    // минификация CSS-файлов
  • 1
    gulp-csso
    
    // еще один плагин минификации CSS-файлов
  • 1
    gulp-uglify
    
    // минификация JS-файлов
  • 1
    gulp-sass
    
    // компиляция SCSS-файлов в CSS-файлы
  • 1
    gulp-ruby-sass
    
    // компиляции SCSS-файлов в CSS-файлы, более стабильный
  • 1
    gulp-concat
    
    // конкатенация (соединение нескольких файлов в один файл)
  • 1
    gulp-jshint
    
    // ???
  • 1
    gulp-livereload
    
    // запуск плагина LiveReload
  • 1
    gulp-watch
    
    // мониторинг файлов в фоновом режиме в Gulp
  • 1
    gulp-notify
    
    // вывод окна с уведомлением о событиях в Gulp
  • 1
    gulp-imagemin
    
    // сжатие изображений в Gulp
  • 1
    gulp-rename
    
    // переименование файлов в Gulp
  • 1
    gulp-plumber
    
    // настройка обработки ошибок в Gulp

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

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

1
npm
.

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

Gulp

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

Установка Gulp

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

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

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

$ sudo npm install -g gulp

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

1
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 внутри директории

1
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). Разница между ними в том, что задача по умолчанию имеет имя

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

$ gulp

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

$ gulp name_of_task

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

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

$ ls -l | less

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

1
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
.

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

1
gulp.task
- это не что иное, как задача. Именно так создаются задачи в этом менеджере. Здесь
1
'default'
- это имя задачи (в данном случае это задача по умолчанию, как вы помните). Функция
1
function()
имеет в своем теле неограниченное количество инструкций. Так как мы еще не умеем работать с плагинами под Gulp, то в качестве инструкции пропишем вывод в консоль обычной текстовой строки -
1
console.log('Hello from Gulp!')
.

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

1
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!


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

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

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

1
v1.3.2
, но на странице упоминается о версии
1
2.0.0-beta
. Для своей работы плагин требует библиотеки jQuery версии не ниже
1
1.7
.

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

Для подключения плагина 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  -->

В

1
head
подключаются две готовых CSS-таблицы из архива -
1
owl.carousel.css
и
1
owl.theme.css
. Таблица
1
style.css
- опциональная, для настройки плагина под конкретные условия.

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

1
owl-carousel
, к которому будет производиться привязка стилей из файла
1
owl.carousel.css
.

В конце тела

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

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

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

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

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

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

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

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

1
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

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

1
autoPlay
:

autoPlay: true

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

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

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

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

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

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

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

Заключение

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


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

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

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

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

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

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

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

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

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

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

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

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

1
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 с границами разного цвета

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

1
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-свойствам:

1
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 нужно будет изменить значения высоты или ширины на прямопротивоположные.

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

1
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-свойством

1
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 хорош, но имеет один недостаток - слишком много дополнительных блоков, одними из которых являются блоки для создания треугольников.

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

1
: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, там можно “прикрутить” к фигуре тень и границу, что просто великолепно!

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


Очень краткий пример работы с циклом

1
for
в препроцессоре Sass.

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

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

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

1
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%);
}
...

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

1
h1
) до шестого (
1
h6
), с шагом 10px (
1
$fontSizeStep: 10
):

h1 {
  font-size: 76px;
}

h2 {
  font-size: 66px;
}

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

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

1
for
.

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

1
for
:

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

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

1
for
, в котором счетчик
1
$i
изменяет свое значение в диапазоне от 1 до 6 включительно. Конструкция
1
#{$i}
называется экранированием в Sass и служит для того, чтобы значение счетчика
1
$i
подставилось в коде “как есть”, в виде текста.

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

  • h1
  • h2
  • h3
  • h4
  • h5
  • h6

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

1
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

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

1
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;
}

На этом все.