July 16, 2014gearmobile Reading time ~4 minutes

Библиотека Animate.css

В готовом шаблоне одного фрилансера встретил использование Animate.css - библиотеки CSS3-эффектов, созданной на самом же CSS3.

Ранее я уже встречал упоминание об этой библиотеке - Easy CSS3 Animation with Animate.css. Вот теперь пришла пора познакомиться с нею детально, что называется - на практике.

Кстати, официальная страница этого проекта расположена здесь - Animate.css. На ней можно посмотреть все возможные для этой библиотеки эффекты и подобрать подходящий в выпадающем списке.

Откровенно говоря, я приготовился к обстоятельному изучению этой библиотеки, но все оказалось предельно просто. Все, что нужно для подключения Animate.css - это скачать полную версию по ссылке Download Animate.css. Или же перейти на GitHub - View on GitHub, чтобы выбрать сжатую (animate.min.css) или несжатую (animate.css) версию библиотеки.

Подключение Animate.css

Для подключения библиотеки Animate.css в готовый HTML-проект, достаточно подключить в “шапке” документа скачанный CSS-файл animate.css:

<head>
  <meta charset="utf-8">
  <title>Animate CSS</title>
  <link rel="stylesheet" href="css/animate.css">
  ...
</head>

И это все! Больше никаких действий не потребуется - все остальные манипуляции нужно выполнять в HTML-коде, добавляя необходимые CSS-классы из библиотеки Animate.css к нужным HTML-элементам.

Добавление CSS-классов из Animate.css

Первое, что нужно помнить - для нужного HTML-элемента необходимо добавить обязательный класс .animated. CSS-расшифровка этого класса также предельно проста:

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

Второе - на странице проекта подбираем для себя нужный\понравившийся эффект, запоминаем имя (пусть в данном случае это будет bounceIn) этого эффекта и добавляем его в качестве имени класса к HTML-элементу, у которого уже есть класс .animated (вспоминаем основы CSS - такая конструкция называется мультиклассовостью):

<h1 class="animated bounceIn">
  Animate.css
</h1>

Все - можно проверять работу библиотеки Animate.css.

Использование jQuery c Animate.css

Если в проекте используется библиотека jQuery (а она применяется почти всегда), то применение библиотеки Animate.css еще больше упрощается, а HTML-разметка делается семантичной. Для этого подключаю библиотеку jQuery:

… и прописываю в скрипте инициализации animate_me.js:

$(document).ready(function() {
  $('h2').addClass('animated bounceInLeft');
})

Вуаля - все отлично работает!

Можно немного усложнить задачу и добавить с помощью Jquery событие hover к элементу img, затем “повесить” на него класс анимации rotateIn и animated из библиотеки Animate.css:

<figure>
  <img src="images/caramel.jpg" width="800" height="504" alt="Animated Image" />
</figure>

$(document).ready(function() {
  $('figure img').hover(
  function() {
    $(this).addClass('animated rotateIn');
  },
  function() {
    $(this).removeClass('animated rotateIn');
  }
)})

Управление задержкой анимации

Можно управлять задержкой анимации и скоростью анимации, изменив значения в классе .animated. Например, с animation-duration: 1s на animation-duration: .4s;:

.animated {
  -webkit-animation-duration: .4s;
  animation-duration: .4s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

Полный код примера на Animate.css

Полный код рассмотренного в этой статье примера привожу ниже.

<h1 class="animated bounceIn">Animate.css</h1>
<h2>animate me with jquery!</h2>
<figure>
  <img src="images/caramel.jpg" width="800" height="504" alt="Animated Image" />
</figure>
<!--  SCRIPTS  -->

$color: #778899;

h1,h2,figure{
  margin: 50px auto 0;
  text-align: center;
}

h1{
  font: normal 72px/1.3 Georgia, sans-serif;
  color: darken($color,10%);
}

h2{
  font: normal 56px/1.3 Georgia, sans-serif;
  color: lighten($color,5%);
  text-transform: capitalize;
}

figure img:hover{
  cursor: pointer;
}

$(document).ready(function() {
  $('h2').addClass('animated bounceInLeft');
  $('figure img').hover(
  function() {
    $(this).addClass('animated rotateIn');
  },
  function() {
    $(this).removeClass('animated rotateIn');
  }
 )})

Библиотека Animate.css в действии

На этом все.

July 15, 2014gearmobile Reading time ~4 minutes

Кросс-браузерный placeholder

Короткая статья, посвященная вопросу кросс-браузерности такого HTML5-атрибута для формы, как placeholder.

Недавно столкнулся в подобным вопросом, решение не смог найти. Однако, в книге “Недостающее руководство по HTML5” случайно столкнулся с подробным описанием решения этой маленькой проблемы. Проблема и вправду маленькая - вопрос поддержки или не поддержки браузерами данного атрибута на сегодняшний день - это мелочь. Ну правда, разве пострадает функциональность верстаемого сайта от того, что в поле поиска не будет отображаться подстановочный текст? Конечно, нет!

Еще один момент - говоря о кросс-браузерной поддержке атрибута placeholder, почти всегда подразумевается на самом деле поддержка этого атрибута только одним браузером. Конечно, это многострадальный Internet Explorer версии 7 или 8. О версии Internet Explorer 6 можно уже забыть. Остальные браузеры нормально справляются со своей задачей и понимают, что такое placeholder.

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

Кросс-браузерные заплатки для HTML5

Начну с того, что решение вопроса кросс-браузерного placeholder было создано уже давно. Это для меня данный факт был открытием! Более того, существует большое количество способов, решающих данную проблему. Все они собраны воедино по одному адресу на GitHub - HTML5 Cross Browser Polyfills . Вся эта коллекция называется “Кросс-браузерные заплатки для HTML5”, но в нашем случае нужен только один раздел этой коллекции - Web Forms : input placeholder.

Ого - там не одно решение, а целых одиннадцать! Причем, все они реализованы на JavaScript, поэтому и кросс-браузерные. Выбирать можно любой, какой понравиться - принцип работы и способ подключения к HTML-странице у них всех почти одинаков. Я возьму для себя способ jquery.placeholder.js, просто потому, что название понравилось.

Плагин jquery.placeholder.js может реализовать поддержку атрибута placeholder как в Internet Explorer 7 или 8, так и в Internet Explorer 6. Ну, Internet Explorer 6 - это уже слишком! На момент написания статьи многие верстальщики (конечно, не все) имеют тенденцию “забывать” о существовании даже Internet Explorer 8.

Подключение плагина jquery.placeholder.js

Подключение плагина jquery.placeholder.js абсолютно стандартное для такого рода скриптов. Ниже привожу пример такого подключения в HTML-коде:

<!--  SCRIPTS  -->
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery.placeholder.js"></script>
...

Затем идет скрипт инициализации для данного плагина. Общая картина будет выглядеть таким образом:

<!--  SCRIPTS  -->
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery.placeholder.js"></script>
<script>
  $('input, textarea').placeholder();
</script>

Плагин jquery.placeholder.js делает в HTML-документе выборку по двум HTML-элементам - input и textarea. А затем применяет к ним метод placeholder() - все просто.

HTML-форма с placeholder

Ниже привожу пример HTML5-формы, в которой применен атрибут placeholder в полях ввода, реализованных через элемент input. А также в элементе textarea:

<form action="#">
  <h1>zoo keeper application form</h1>
  <p>Please complete the form. Mandatory fields are marked as a <span>*</span></p>

  <!-- CONTACT DETAILS  -->
  <fieldset>
    <legend>contact details</legend>
    <label for="name">name <span>*</span></label>
    <input type="text" name="name" title="Your full name here" placeholder="John Resig" autofocus required><br>
    <label for="telephone">telephone <span>*</span></label>
    <input type="tel" name="telephone" title="Input your phone number here" placeholder="9(989)600-30-20" required><br>
    <label for="email">email <span>*</span></label>
    <input type="email" name="email" title="Your email required" placeholder="test@mail.ru" required>
  </fieldset>

  <!-- PERSONAL INFORMATION  -->
  <fieldset>
    <legend>personal information</legend>
    <label for="age">age <span>*</span></label>
    <input type="number" title="Your real age, please" name="age" min="10" max="90" value="29" step="1" required><br>
    <label for="gender">gender</label>
    <select name="gender" id="gender" size="1">
      <option value="female">female</option>
      <option value="female">male</option>
    </select><br>
    <label for="message">When did you first know you wanted to be a zoo-keeper?</label>
    <textarea name="message" id="message" cols="30" rows="10" placeholder="I have a dream ..."></textarea>
  </fieldset>

  <!-- FAVORITES ANIMALS  -->
  <fieldset>
    <legend>pick your favorite animals</legend>
    <label for="zebra"><input type="checkbox" value="zebra">zebra</label>
    <label for="elephant"><input type="checkbox" value="elephant">elephant</label>
    <label for="cat"><input type="checkbox" value="cat">cat</label>
    <label for="wildebeest"><input type="checkbox" value="wildebeest">wildebeest</label>
    <label for="anaconda"><input type="checkbox" value="anaconda">anaconda</label>
    <label for="pingeon"><input type="checkbox" value="pingeon">pingeon</label>
    <label for="human"><input type="checkbox" value="human" checked="checked">human</label>
    <label for="crab"><input type="checkbox" value="crab">crab</label>
  </fieldset>

  <input type="submit" value="send">
</form>

Проверка поддержки placeholder в IE8

JS-скрипты подключены и создана HTML-разметка. Для тестирования работы плагина jquery.placeholder.js воспользуюсь браузером, в котором заведомо не реализована поддержка атрибута placeholder - это Internet Explorer 8. Открываю созданную HTML-страничку в этом браузере (связка Windows XP + IE8) и вижу результат:

Галочками отмечены поля, в которых сработал плагин jquery.placeholder.js - если бы не он, там было бы пусто. Отлично - плагин работает и его можно применять в деле, на готовом проекте!

July 11, 2014gearmobile Reading time ~5 minutes

Bourbon + Sass - краткое знакомство

Библиотека миксинов (mixin) под препроцессор Sass под названием Bourbon - вот о чем будет сегодняшний краткий обзор.

Данная статья не могла не появиться по нескольким причинам. Первая - я являюсь большим поклонником препроцессора Sass и библиотеки миксинов Compass под него. Библиотека Bourbon является аналогом Compass, просто она меньше по размеру и возможностям. Но это не значит, что она хуже - она обладает некоторыми возможностями, которых нет в Compass.

Помимо этого, существует прекрасная сравнительная статья Sass-гуру Hugo Giraudel, посвященная этим двум библиотекам под один препроцессор. Оригинал статьи находиться здесь - Sass Frameworks: Compass or Bourbon?, а посильный перевод этой статьи размещен здесь - Что выбрать - Compass или Bourbon?. В этой статье Юг Жиродель (Hugo Giraudel) приводит преимущества использования библиотеки Bourbon и сопутствующих ему пакетов, таких как Neat для создания адаптивной CSS-сетки (grid).

Однако, после прочтения вышеназванной статьи один вопрос остается открытым - а как установить библиотеку Bourbon? Что можно в ней делать и как это делать? На эти вопросы я постараюсь ответить самому себе (и возможно - вам, уважаемый читатель).

Установка библиотеки Bourbon

Инсталляцию библиотеки миксинов Bourbon я буду производить под операционной системой Linux Mint 17 Cinnamon, просто потому что мне так интереснее. Под OS Windows процесс ничем не отличается от того, который будет описан здесь. Единственное условие - на момент установки Bourbon в системе уже должны стоять и нормально работать Ruby + Sass.

Установка библиотеки сводиться к одной вещи - установке пакета bourbon под Ruby. Выполняется это одной командой:

$ sudo gem install bourbon

Проверяю, какая версия этой библиотеки “попала” ко мне:

$ bourbon -v
  Bourbon 4.0.2

Отлично! Теперь можно приступать к разворачиванию проекта с поддержкой Bourbon.

Создание проекта Bourbon

Перехожу в директорию с опытными (подопытными?) образцами всего разного и создаю там папку с именем bourbon:

$ cd ~/Projects/
$ mkdir bourbon
$ cd bourbon/

… и запускаю там команду:

$ bourbon install
  Bourbon files installed to bourbon/

Не знаю, как вы, а я сразу после этого задал себе вопрос - “А что это было?” Что это за команда и зачем она нужна? Все оказалось просто.

В библиотеке Compass в таблице стилей конкретно указывается, какой модуль необходимо подключить к проекту. К примеру, таким образом:

@import "compass/reset";
@import "compass/utilities/general/clearfix";
@import "compass/css3/transition";
@import "compass/css3/border-radius";

В результате Compass выборочно подгружает по сети только указанные модули. И ничего больше.

Библиотека Bourbon поступает прямо противоположно - она устанавливает локально, в отдельную папку проекта (имя этой папки всегда - bourbon) все миксины сразу, на все случаи жизни. Если посмотреть на содержимое папки bourbon, то увидим такую картину:

$ ls -l bourbon/
  drwxr-xr-x 2 addons
  -rw-r--r-- 1 _bourbon-deprecated-upcoming.scss
  -rw-r--r-- 1 _bourbon.scss
  drwxr-xr-x 2 css3
  drwxr-xr-x 2 functions
  drwxr-xr-x 2 helpers
  drwxr-xr-x 2 settings

Видим, что все миксины “расфасованы” по папкам в зависимости от их назначения. Давайте “заглянем” в одну из этих подпапок - пусть это будет css3:

Содержимое папки Bourbon

Видим здесь готовые миксины для создания самых различных CSS3-эффектов - border-radius, gradient, transform, transition и так далее. Ну, теперь все понятно, не правда ли?

Включение библиотеки Bourbon в проект

Дело осталось за малым - включить поддержку миксинов библиотеки в таблицу стилей. Выполняется это обычно, директивой @import. Для этого создаю структуру папок и файлов будущего проекта (однако, Compass это может делать одной командой!):

$ mkdir sass
$ mkdir css
$ touch sass/style.scss
$ touch css/style.css
$ touch index.html

… и помещаю одну строку в таблице стилей style.scss:

@import "bourbon/bourbon";

Мониторинг изменений в проекте Bourbon

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

$ sass --watch sass/style.scss:css/style.css

Использование библиотеки Bourbon

Ну и что, скажете вы? Что дальше? А ничего - дальше только пользоваться библиотекой Bourbon. Для этого с главной страницы проекта Bourbon переходим на страницу документации, нажав кнопочку Bourbon Documentation. В правом верхнем углу есть две ссылки, одна из которых “View Spec” - ведет на страницу CSS-документации MDN, а вторая “View Source” - на страницу GitHub c рабочими примерами миксинов.

Также видим, что миксинов здесь даже на беглый взгляд значительно меньше, чем в библиотеке Compass. Ну это ничего.

Bourbon - создаем кнопки

Давайте для начала создадим на Bourbon что-нибудь простенькое. Пусть это будут кнопки. Для этого перейдем на страницу документации по созданию кнопок - Button.

Видим, что в библиотеке Bourbon есть три готовых миксина для создания кнопок:

simple
pill
shiny

Поэтому в HTML-коде создаю кнопку:

<button class="simple" type="button"></button>

… и прописываю для нее миксин в таблице стилей style.scss:

.simple{
  @include button;
}

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

.pill{
  @include button(pill);
}

.shiny{
  @include button(shiny, #ff9900);
}

Ради любопытства посмотрите на скомпилированный CSS-код этих кнопок в файле style.css - вы будете поражены однозначно!

Bourbon - создаем треугольники

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

А вот в библиотеке Bourbon эта задача выполняется в одну строку, для этого достаточно миксину triangle передать всего лишь три аргумента - ширину границы, цвет границы, направление треугольник’а:

@include triangle(2em, #ff9900, up);

Все - треугольник готов! Самые разные варианты создания теругольников хорошо описаны на странице документации - Triangle.

Заключение

На этом задачу ознакомления с библиотекой Bourbon считаю законченной. Читайте документацию - там все хорошо описано!

July 10, 2014gearmobile Reading time ~10 minutes

Слайдер liSlidik

На моем пути повстречался еще один плагин для создания карусели (carousel), основанный на библиотеке jQuery.

Имя этого плагина запоминающиеся - liSlidik и проживает он здесь - liSlidik - jQuery Responsive Slider. Насколько я правильно понял, этот плагин был создан одним или несколькими русскоязычными веб-разработчиками. В принципе, вся документация с примерами подробно расписана на русском языке на этой странице и нет нужды пересказывать уже сказанное.

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

Сразу скажу, что плагин liSlidik мне не понравился. На это есть несколько причин, которые я укажу ниже, в самом обзоре. Причины эти могут быть субъективными, но все же они повлияли на мой вывод.

Установка плагина liSlidik

Установка и подключение плагина liSlidik производится совершенно стандартно для скриптов подобного рода. Сначала подключается библиотека jQuery (в этом обзоре использовалась версия 1.8), затем подключается сам скрипт liSlidik, а в конце - js-файл с инициализацией скрипта и его настройками:

...
<!--  SCRIPTS  -->
<script src="js/jquery-1.8.min.js"></script>
<script src="js/liSlidik.js"></script>
<script src="js/settings.js"></script>
</body>

Скачать архив скрипта liSlidik можно с домашней страницы проекта по это ссылке - liSlidik Download. Помимо этого, на jsFiddle выложен исходный код скрипта с примерами создания разных вариантов слайдов - liSlidik Demo. Библиотеку jQuery можно подключить через CDN или скачать для локального подключения - это кому как нравиться.

HTML-разметка для liSlidik

Разметка в HTML-документе для будущего слайдера под управлением скрипта liSlidik проста и семантична - в этом плане все на уровне современной веб-разработки. Структура будущего слайдера представляет из себя обычный маркированный список с вложенными изображениями:

<ul id="slider" class="slider">
  <li><img src="http://placehold.it/300x200&text=liSlidik 1" alt="liSlidik 0" /></li>
  <li><img src="http://placehold.it/300x200&text=liSlidik 2" alt="liSlidik 1" /></li>
  <li><img src="http://placehold.it/300x200&text=liSlidik 3" alt="liSlidik 2" /></li>
  <li><img src="http://placehold.it/300x200&text=liSlidik 4" alt="liSlidik 3" /></li>
  <li><img src="http://placehold.it/300x200&text=liSlidik 5" alt="liSlidik 4" /></li>
</ul>

Единственный важный момент при создании HTML-разметки заключается в том, что для элемента ul необходимо задать идентификатор, к которому будет “цепляться” скрипт liSlidik - иначе слайдер не заработает (мне этот факт не понравился, так как я не люблю идентификаторы и стараюсь всячески избегать их использования). Класс для элемента ul понадобиться для последующей стилизации слайдера на HTML-странице.

Инициализация скрипта liSlidik

Для “запуска” скрипта liSlidik нужно его инициализировать, создав простой js-файл и прописав в нем такие строки:

$(document).ready(function(){
  $('#slider').liSlidik();
});

Минимальная стилизация скрипта liSlidik

Слайдер liSlidik после всех выполненных выше мною шагов не заработает, на самом деле. Потому что для его работы необходима минимальная CSS-стилизация, которую я выполню ниже. Стоит ли говорить, что данный шаг я бы не смог выполнить без незаменимого плагина Firebug под Mozilla Firefox?!

Минимальная CSS-стилизация слайдера liSlidik:

.slider{
  width: 300px;
  height: 200px;
  margin: 20px auto;
  position: relative;
  li{
    position: absolute;
    top: 0;
    left: 0;
    img{
      vertical-align: top;
    }
  }

Конечно, можно воспользоваться готовыми CSS-стилями из архива скрипта liSlidik; но зачем пользоваться чужим кодом, когда можно создать более чистый и маленький по размеру свой собственный код, мне не понятно. Конечно, в приведенном выше коде значения свойств width и height являются произвольными и зависят от конкретных условий - ставить нужно вместо них то, что необходимо. Это же относится и к margin: 20px auto;, которое было применено здесь для “красоты”.

Вот теперь слайдер liSlidik готов к работе. Более того - он работает! Это минималистичный слайдер, без каких-либо кнопок управления:

Скрипт liSlidik работает

Кнопки управления для liSlidik

Скрипт liSlidik имеет в своем составе полный набор органов управления создаваемым им слайдером. Начну с малого и приступлю к созданию кнопок перемотки взад-вперед для слайдшоу. Стоит сразу сказать, что все органы управления показом слайдшоу в скрипте liSlidik не создаются автоматически - их нужно создавать вручную (данный факт мне также не совсем понравился):

<!--  arrows  -->
<a data-slidik="slider" class="next" href="#">Next</a>
<a data-slidik="slider" class="prev" href="#">Prev</a>

HTML-разметка для кнопок перемотки создается через элемент a, у которого обязательным атрибутом должен быть data-slidik=”slider”, где slider - это имя идентификатора нашего слайдера. Классы class=”next” и class=”prev” присутствуют для тех же целей, что и в элементе ul - на них “вешаются” CSS-стили:

/*  ARROWS  */
.next,
.prev{
  display: block;
  width: 20px;
  height: 20px;
  position: absolute;
  z-index: 2;
  top: 95px;
  background-color: #000;
  @include border-radius(50%);
  @include squish-text;
  @include single-transition(background-color, .2s, ease-in);
}
.next{
  left: 10px;
  &:hover,&:focus{
    background-color: lighten(#000,20%);
  }
}
.prev{
  right: 10px;
  &:hover,&:focus{
    background-color: lighten(#000,20%);
  }
}

Смотрим результат подключения кнопок перемотки в liSlidik:

Плагин liSlidik c кнопками перемотки

Пагинация в слайдере liSlidik

Подключение пагинации в скрипте liSlidik выполняется аналогично - нужно вручную создать блочный элемент div с атрибутом data-slidik=”slider” и классом class=”dotted” (который также обязателен в данном случае!):

<!--  pagination  -->
<div data-slidik="slider" class="dotted"></div>

Создаю для нового элемента CSS-стили. Снова оговорюсь, что для блока пагинации (насколько я правильно понял) имя класса dotted является обязательным. Я пробовал менять это имя на произвольное и в результате слайдер перестал работать (вот такие мелкие обязательства мне и не нравятся в этом плагине!):

/*  PAGINATION  */
.dotted{
  position: absolute;
  bottom: 2px;
  left: 2px;
  z-index: 3;
  @include pie-clearfix;
  .dottedItem{
    cursor: pointer;
    float: left;
    margin: 0 5px;
    width: 20px;
    height: 20px;
    line-height: 20px;
    color: #fff;
    font-size: 12px;
    background-color: lighten(#000,30%);
    text-align: center;
    @include border-radius(50%);
    @include single-transition(background-color, .2s, ease-in);
    &:hover,&:focus{
      background-color: lighten(#000,40%);
    }
    &.cur{
      background-color: lighten(#000,50%);
    }
  }
}

Присутствующее в коде выше имя класса .cur обозначает активный элемент, который можно стилизовать на свой выбор. Еще один странный момент, связанный со слайдером liSlidik - внимательно посмотрите на снимок работающего скрипта:

Скрипт liSlidik c пагинацией

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

Заголовок слайдера liSlidik

Заголовок для слайдера liSlidik создается вручную (неужели нельзя создать скрипт, который автоматически генерирует нужные HTML-элементы?) также с помощью блочного элемента div, для которого прописывается атрибут data-slidik=”slider” с обязательным именем класса class=”caption”:

<!--  caption  -->
<div data-slidik="slider" class="caption"></div>

И произвольные CSS-стили для него:

/*  CAPTION  */
.caption{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  padding: 6px 0;
  text-indent: 1em;
  width: 100%;
  background-color: rgba(0,0,0,.6);
  color: rgba(255,255,255,.5);
}

Текст для показа на странице скрипт liSlidik берет из содержимого атрибута alt= для элемента img. Поэтому не забудьте его прописать в своей HTML-разметке!

Скрипт liSlidik c заголовком

Миниатюры в скрипте liSlidik

Плагин liSlidik имеет возможность создания миниатюр в виде галлереи изображений, которая выступает в роли пагинации. На странице демо-примеров показан вариант такого слайдшоу. Однако, у меня не было желания разбираться с вопросом построения thumnnails в этом примере.

Заключение

Все примеры и варианты создания слайдеров под управлением скрипта liSlidik можно посмотреть на официальной страничке проекта - liSlidik - jQuery Responsive Slider. Ниже привожу полный HTML и SCSS-код примера, рассмотренного в данной статье:

<ul id="slider" class="slider">
  <li class="show"><img src="http://placehold.it/300x200&text=liSlidik 1" alt="liSlidik 0" /></li>
  <li><img src="http://placehold.it/300x200&text=liSlidik 2" alt="liSlidik 1" /></li>
  <li><img src="http://placehold.it/300x200&text=liSlidik 3" alt="liSlidik 2" /></li>
  <li><img src="http://placehold.it/300x200&text=liSlidik 4" alt="liSlidik 3" /></li>
  <li><img src="http://placehold.it/300x200&text=liSlidik 5" alt="liSlidik 4" /></li>
  <!--  arrows  -->
  <a data-slidik="slider" class="next" href="#">Next</a>
  <a data-slidik="slider" class="prev" href="#">Prev</a>
  <!--  pagination  -->
  <div data-slidik="slider" class="dotted"></div>
  <!--  caption  -->
  <div data-slidik="slider" class="caption"></div>
  <!--  previews  -->
  <!-- <div data-slidik="slider" class="thumbs"></div> -->
</ul><!--  SCRIPTS  -->

.slider{
  width: 300px;
  height: 200px;
  margin: 20px auto;
  position: relative;
  li{
    border: 2px solid #000;
    position: absolute;
    top: -2px;
    left: -2px;
    &.show{
      display: block;
      z-index: 2;
    }
    img{
      vertical-align: top;
    }
  }
  /*  ARROWS  */
  .next,
  .prev{
    display: block;
    width: 20px;
    height: 20px;
    position: absolute;
    z-index: 2;
    top: 95px;
    background-color: #000;
    @include border-radius(50%);
    @include squish-text;
    @include single-transition(background-color, .2s, ease-in);
  }
  .next{
    left: 10px;
    &:hover,&:focus{
      background-color: lighten(#000,20%);
    }
  }
  .prev{
    right: 10px;
    &:hover,&:focus{
      background-color: lighten(#000,20%);
    }
  }
  /*  PAGINATION  */
  .dotted{
    position: absolute;
    bottom: 2px;
    left: 2px;
    z-index: 3;
    @include pie-clearfix;
    .dottedItem{
      cursor: pointer;
      float: left;
      margin: 0 5px;
      width: 20px;
      height: 20px;
      line-height: 20px;
      color: #fff;
      font-size: 12px;
      background-color: lighten(#000,30%);
      text-align: center;
      @include border-radius(50%);
      @include single-transition(background-color, .2s, ease-in);
      &:hover,&:focus{
        background-color: lighten(#000,40%);
      }
      &.cur{
        background-color: lighten(#000,50%);
      }
    }
  }
  /*  CAPTION  */
  .caption{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 4;
    padding: 6px 0;
    text-indent: 1em;
    width: 100%;
    background-color: rgba(0,0,0,.6);
    color: rgba(255,255,255,.5);
  }
}

На этом все.

July 07, 2014gearmobile Reading time ~5 minutes

Слайдер bxSlider

Обзор еще одного слайдера под библиотеку jQuery под названием bxSlider.

Данный слайдер обладает полным набором возможностей, адаптивный и легко устанавливается в проекте. Адрес проживания слайдера bxSlider - The Responsive jQuery Content Slider.

Конкретно какими возможностями обладает bxSlider:

полностью адаптивный
может быть горизонтальным, вертикальным
может содержать в себе изображения, видео или HTML-контент
поддержка функций touch/swipe
для анимаций используются CSS transitions
маленький размер файла, легко видоизменяется и настраивается
поддержка браузерами Firefox, Chrome, Safari, iOS, Android, Ie7+
большое число настроек

Установка слайдера bxSlider

Установка bxSlider ничем не отличается от установки ему подобных скриптов для создания carousel. Скачиваем с сайта архив - в нем есть все необходимое для подключения и работы. Помимо этого, там есть несколько дополнительных файлов типа jquery.easing.1.3.js и jquery.fitvids.js. Но нет библиотеки jQuery, которую автор рекомендует подключать в проект через CDN. Я подключу jQuery локально, версии 1.11.1.

В HTML-файле перед закрывающим тегом body произвожу подключение скриптов в таком порядке:

...
<!--  SCRIPTS  -->
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/jquery.bxslider.min.js"></script>
<script src="js/bxslider.js"></script>

Файл jquery.bxslider.min.js беру из скачанного архива, файл bxslider.js - произвольного имени, для настроек плагина bxSlider.

В head HTML-документа, помимо этого, производится подключение таблицы стилей для плагина bxSlider, которую также беру из скачанного архива. Данный шаг выполнять совершенно необязательно - можно обойтись без файла jquery.bxslider.css и тогда получим “чистый” слайдер, который можно видоизменять по своему с помощью CSS:

<head>
  <meta charset="utf-8">
  <title>Document</title>
  <link rel="stylesheet" href="css/jquery.bxslider.css">
  ...
 </head>

Плагин bxSlider подключен и готов к работе. Осталось создать HTML-разметку для него.

HTML-разметка для слайдера bxSlider

Внутри тега body создаю разметку для будущего слайдера. Она проста и семантична, представляет из себя обычный маркированный список, в котором каждый элемент li является слайдом. Внутри li может размещаться изображение, видео или любой другой HTML-контент. Контейнер ul должен иметь класс с произвольным именем:

<ul class="slider">
  <li><img src="http://placehold.it/300x200" alt="bxSlider" /></li>
  <li><img src="http://placehold.it/300x200" alt="bxSlider" /></li>
  <li><img src="http://placehold.it/300x200" alt="bxSlider" /></li>
  <li><img src="http://placehold.it/300x200" alt="bxSlider" /></li>
</ul>

Инициализация скрипта bxSlider

В созданном ранее js-файле bxslider.js произвожу инициализацию плагина bxSlider. Важно заметить, что строка инициализации должна быть обязательно заключена в “обертку” $(document).ready(), иначе слайдер не будет работать:

$(document).ready(function(){
  $('.slider').bxSlider();
});

Смотрю готовый результат:

Запущенный слайдер bxSlider

Слайдер bxSlider запущен и работает - есть кнопки пагинации и перемотки, изображения крутятся при нажатии на них. Пробую отключить таблицу стилей jquery.bxslider.css и смотрю результат. Действительно, слайдер bxSlider получается “голым”, но рабочим:

Чистый слайдер bxSlider

Стилизация слайдера bxSlider

Произведу небольшую стилизацию слайдера bxSlider. Для этого необходимо воспользоваться плагином Firebug под браузер Mozilla Firefox, чтобы инспектировать DOM-дерево и находить нужные HTML-элементы с их классами. Как можно было понять из базовой HTML-разметки, все элеметы управления слайдером генерируются скриптом автоматически.

Стилизация слайдера bxSlider с помощью CSS-правил (в данном примере это SCSS) может быть такой:

$asidePos: 50px;
$color: #778899;

.bx-wrapper{
  margin: 10px auto;
  width: 300px;
  border: 5px solid #fff;
  box-shadow: 0 0 5px #ccc;
  position: relative;
  .bx-viewport{
    box-shadow: 0 0 5px #ccc;
  }
  /*  Скрывать пагинацию  */
  .bx-pager{
    display: none;
  }
  /*  Кнопки перемотки  */
  .bx-prev,
  .bx-next{
    position: absolute;
    top: 92px;
    width: 20px;
    height: 20px;
    background-color: $color;
    @include squish-text;
    @include border-radius(50%);
    @include single-transition(background-color, .1s, ease-in-out);
    &:hover,&:focus{
      outline: none;
      background-color: darken($color,5%);
    }
    &:active{
      background-color: darken($color,10%);
    }
  }
  .bx-prev{
    left: -$asidePos;
  }
  .bx-next{
    right: -$asidePos;
  }
  img{
    vertical-align: top;
  }
}

И посмотрим результат наших трудов. Уже гораздо лучше, однако:

Стилизованный слайдер bxSlider

Настройка слайдера bxSlider

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

В этой статье давайте я воссоздам один из приведенных на странице Examples примеров. Пусть это будет слайдер с автоматической прокруткой и кнопками управления прокруткой - запуско и остановкой. Такой готовый пример размещен здесь - Auto show with start / stop controls. Я просто сделаю свой собственный дубликат, со своими стилями.

Для этого в SCSS-коде добавляю такие строки:

/*  auto controls  */
.bx-controls-auto{
  margin: 5px 0 0;
  @include pie-clearfix;
  .bx-controls-auto-item{
    display: inline-block;
    float: left;
    .bx-start,
    .bx-stop{
      display: block;
      @include squish-text;
      @include single-transition(background-color, .1s, ease-in-out);
    }
    .bx-start{
      @include arrow-right(7px,lighten($color,20%));
    }
    .bx-stop{
      width: 14px;
      height: 14px;
      margin: 0 0 0 5px;
      background-color: lighten($color,20%);
    }
  }
}

HTML-разметку на странице я не меняю, как вы могли заметить. Блок .bx-controls-auto генерируется скриптом bxSlider автоматически.

Файл настроек bxslider.js подправляю, чтобы он выглядел таким образом:

$(document).ready(function(){
  $('.slider').bxSlider({
    auto: true,
    autoControls: true
  });
});

Смотрю результат в браузере:

Слайдер bxSlider с автоматической прокруткой

Отлично! Появились кнопки запуска и остановки показа слайдшоу; сам слайдер стартует автоматически, при открытии страницы в окне браузера.

Заключение

Плагин bxSlider мне однозначно понравился. Семнатичная простая разметка, использование произвольного имени класса (а не идентификатора), автоматическое генерирование HTML-элементов слайдера, большое количество настроек, хорошие эффекты, простота подключения.

Все эти преимущества однозначно сделали плагин bxSlider номером один в моей копилке.

Zencoder

Frontend Developer Notebook

Библиотека Animate.css

Подключение Animate.css

Добавление CSS-классов из Animate.css

Использование jQuery c Animate.css

Управление задержкой анимации

Полный код примера на Animate.css

Кросс-браузерный placeholder

Кросс-браузерные заплатки для HTML5

Подключение плагина jquery.placeholder.js

HTML-форма с placeholder

Проверка поддержки placeholder в IE8

Bourbon + Sass - краткое знакомство

Установка библиотеки Bourbon

Создание проекта Bourbon

Включение библиотеки Bourbon в проект

Мониторинг изменений в проекте Bourbon

Использование библиотеки Bourbon

Bourbon - создаем кнопки

Bourbon - создаем треугольники

Заключение

Слайдер liSlidik

Установка плагина liSlidik

HTML-разметка для liSlidik

Инициализация скрипта liSlidik

Минимальная стилизация скрипта liSlidik

Кнопки управления для liSlidik

Пагинация в слайдере liSlidik

Заголовок слайдера liSlidik

Миниатюры в скрипте liSlidik

Заключение

Слайдер bxSlider

Установка слайдера bxSlider

HTML-разметка для слайдера bxSlider

Инициализация скрипта bxSlider

Стилизация слайдера bxSlider

Настройка слайдера bxSlider

Заключение