Библиотека миксинов (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.
Установка библиотеки сводиться к одной вещи - установке пакета
1
bourbon
под Ruby. Выполняется это одной командой:
Проверяю, какая версия этой библиотеки “попала” ко мне:
Отлично! Теперь можно приступать к разворачиванию проекта с поддержкой Bourbon.
Создание проекта Bourbon
Перехожу в директорию с опытными (подопытными?) образцами всего разного и создаю там папку с именем
1
bourbon
:
… и запускаю там команду:
Не знаю, как вы, а я сразу после этого задал себе вопрос - “А что это было?” Что это за команда и зачем она нужна? Все оказалось просто.
В библиотеке Compass в таблице стилей конкретно указывается, какой модуль необходимо подключить к проекту. К примеру, таким образом:
В результате Compass выборочно подгружает по сети только указанные модули. И ничего больше.
Библиотека Bourbon поступает прямо противоположно - она устанавливает локально, в отдельную папку проекта (имя этой папки всегда -
1
bourbon
) все миксины сразу, на все случаи жизни. Если посмотреть на содержимое папки
1
bourbon
, то увидим такую картину:
Видим, что все миксины “расфасованы” по папкам в зависимости от их назначения. Давайте “заглянем” в одну из этих подпапок - пусть это будет
1
css3
:
Видим здесь готовые миксины для создания самых различных CSS3-эффектов -
1
border-radius
,
1
gradient
,
1
transform
,
1
transition
и так далее. Ну, теперь все понятно, не правда ли?
Включение библиотеки Bourbon в проект
Дело осталось за малым - включить поддержку миксинов библиотеки в таблицу стилей. Выполняется это обычно, директивой
1
@import
. Для этого создаю структуру папок и файлов будущего проекта (однако, Compass это может делать одной командой!):
… и помещаю одну строку в таблице стилей
1
style.scss
:
Мониторинг изменений в проекте Bourbon
Чтобы автоматически отслеживать изменения в файле таблиц стилей
1
style.scss
и выполнять компиляцию в CSS-стили, запускаю команду мониторинга:
Использование библиотеки Bourbon
Ну и что, скажете вы? Что дальше? А ничего - дальше только пользоваться библиотекой Bourbon. Для этого с главной страницы проекта Bourbon переходим на страницу документации, нажав кнопочку Bourbon Documentation. В правом верхнем углу есть две ссылки, одна из которых “View Spec” - ведет на страницу CSS-документации MDN, а вторая “View Source” - на страницу GitHub c рабочими примерами миксинов.
Также видим, что миксинов здесь даже на беглый взгляд значительно меньше, чем в библиотеке Compass. Ну это ничего.
Bourbon - создаем кнопки
Давайте для начала создадим на Bourbon что-нибудь простенькое. Пусть это будут кнопки. Для этого перейдем на страницу документации по созданию кнопок - Button.
Видим, что в библиотеке Bourbon есть три готовых миксина для создания кнопок:
1
simple
1
pill
1
shiny
Поэтому в HTML-коде создаю кнопку:
… и прописываю для нее миксин в таблице стилей
1
style.scss
:
Смотрим результат в браузере - готовая красивая синенькая кнопочка! Точно также можно создать еще две другие кнопки, с помощью миксинов
1
pill
и
1
shiny
. При этом можно передать в качестве аргумента фоновый цвет создаваемой кнопки:
Ради любопытства посмотрите на скомпилированный CSS-код этих кнопок в файле
1
style.css
- вы будете поражены однозначно!
Bourbon - создаем треугольники
Кто из внимательных читателей может на память создать треугольник на чистом CSS? Конечно, там нет ничего сложного, но уверен - время у вас все равно уйдет на то, чтобы вспомнить все тонкости этого процесса - обнулить ширину и высоту, задать ширину и цвет границы, убрать ее с трех остальных сторон и так далее.
А вот в библиотеке Bourbon эта задача выполняется в одну строку, для этого достаточно миксину
1
triangle
передать всего лишь три аргумента - ширину границы, цвет границы, направление треугольник’а:
Все - треугольник готов! Самые разные варианты создания теругольников хорошо описаны на странице документации - Triangle.
Заключение
На этом задачу ознакомления с библиотекой Bourbon считаю законченной. Читайте документацию - там все хорошо описано!
На моем пути повстречался еще один плагин для создания карусели (carousel), основанный на библиотеке jQuery.
Имя этого плагина запоминающиеся - liSlidik и проживает он здесь - liSlidik - jQuery Responsive Slider. Насколько я правильно понял, этот плагин был создан одним или несколькими русскоязычными веб-разработчиками. В принципе, вся документация с примерами подробно расписана на русском языке на этой странице и нет нужды пересказывать уже сказанное.
Однако, я хотел разобраться с плагином liSlidik - понять, как его подключать, настраивать и управлять. Поэтому все же появился обзор этого слайдера, который будет представлен ниже.
Сразу скажу, что плагин liSlidik мне не понравился. На это есть несколько причин, которые я укажу ниже, в самом обзоре. Причины эти могут быть субъективными, но все же они повлияли на мой вывод.
Установка плагина liSlidik
Установка и подключение плагина liSlidik производится совершенно стандартно для скриптов подобного рода. Сначала подключается библиотека jQuery (в этом обзоре использовалась версия 1.8), затем подключается сам скрипт liSlidik, а в конце - js-файл с инициализацией скрипта и его настройками:
Скачать архив скрипта liSlidik можно с домашней страницы проекта по это ссылке - liSlidik Download. Помимо этого, на jsFiddle выложен исходный код скрипта с примерами создания разных вариантов слайдов - liSlidik Demo. Библиотеку jQuery можно подключить через CDN или скачать для локального подключения - это кому как нравиться.
HTML-разметка для liSlidik
Разметка в HTML-документе для будущего слайдера под управлением скрипта liSlidik проста и семантична - в этом плане все на уровне современной веб-разработки. Структура будущего слайдера представляет из себя обычный маркированный список с вложенными изображениями:
Единственный важный момент при создании HTML-разметки заключается в том, что для элемента
1
ul
необходимо задать идентификатор, к которому будет “цепляться” скрипт liSlidik - иначе слайдер не заработает (мне этот факт не понравился, так как я не люблю идентификаторы и стараюсь всячески избегать их использования). Класс для элемента
1
ul
понадобиться для последующей стилизации слайдера на HTML-странице.
Инициализация скрипта liSlidik
Для “запуска” скрипта liSlidik нужно его инициализировать, создав простой js-файл и прописав в нем такие строки:
Минимальная стилизация скрипта liSlidik
Слайдер liSlidik после всех выполненных выше мною шагов не заработает, на самом деле. Потому что для его работы необходима минимальная CSS-стилизация, которую я выполню ниже. Стоит ли говорить, что данный шаг я бы не смог выполнить без незаменимого плагина Firebug под Mozilla Firefox?!
Минимальная CSS-стилизация слайдера liSlidik:
Конечно, можно воспользоваться готовыми CSS-стилями из архива скрипта liSlidik; но зачем пользоваться чужим кодом, когда можно создать более чистый и маленький по размеру свой собственный код, мне не понятно. Конечно, в приведенном выше коде значения свойств
1
width
и
1
height
являются произвольными и зависят от конкретных условий - ставить нужно вместо них то, что необходимо. Это же относится и к
1
margin: 20px auto;
, которое было применено здесь для “красоты”.
Вот теперь слайдер liSlidik готов к работе. Более того - он работает! Это минималистичный слайдер, без каких-либо кнопок управления:
Кнопки управления для liSlidik
Скрипт liSlidik имеет в своем составе полный набор органов управления создаваемым им слайдером. Начну с малого и приступлю к созданию кнопок перемотки взад-вперед для слайдшоу. Стоит сразу сказать, что все органы управления показом слайдшоу в скрипте liSlidik не создаются автоматически - их нужно создавать вручную (данный факт мне также не совсем понравился):
HTML-разметка для кнопок перемотки создается через элемент
1
a
, у которого обязательным атрибутом должен быть
1
data-slidik="slider"
, где
1
slider
- это имя идентификатора нашего слайдера. Классы
1
class="next"
и
1
class="prev"
присутствуют для тех же целей, что и в элементе
1
ul
- на них “вешаются” CSS-стили:
Смотрим результат подключения кнопок перемотки в liSlidik:
Пагинация в слайдере liSlidik
Подключение пагинации в скрипте liSlidik выполняется аналогично - нужно вручную создать блочный элемент
1
div
с атрибутом
1
data-slidik="slider"
и классом
1
class="dotted"
(который также обязателен в данном случае!):
Создаю для нового элемента CSS-стили. Снова оговорюсь, что для блока пагинации (насколько я правильно понял) имя класса
1
dotted
является обязательным. Я пробовал менять это имя на произвольное и в результате слайдер перестал работать (вот такие мелкие обязательства мне и не нравятся в этом плагине!):
Присутствующее в коде выше имя класса
1
.cur
обозначает активный элемент, который можно стилизовать на свой выбор. Еще один странный момент, связанный со слайдером liSlidik - внимательно посмотрите на снимок работающего скрипта:
Ничего не замечаете? Нумерация в данной пагинации начинается с нуля! Это весьма странный факт, ибо обычные посетители сайта не являются программистами и для них нумерация с нуля, мягко выражаясь, непривычна и необычна.
Заголовок слайдера liSlidik
Заголовок для слайдера liSlidik создается вручную (неужели нельзя создать скрипт, который автоматически генерирует нужные HTML-элементы?) также с помощью блочного элемента
1
div
, для которого прописывается атрибут
1
data-slidik="slider"
с обязательным именем класса
1
class="caption"
:
И произвольные CSS-стили для него:
Текст для показа на странице скрипт liSlidik берет из содержимого атрибута
1
alt=
для элемента
1
img
. Поэтому не забудьте его прописать в своей HTML-разметке!
Миниатюры в скрипте liSlidik
Плагин liSlidik имеет возможность создания миниатюр в виде галлереи изображений, которая выступает в роли пагинации. На странице демо-примеров показан вариант такого слайдшоу. Однако, у меня не было желания разбираться с вопросом построения
1
thumnnails
в этом примере.
Заключение
Все примеры и варианты создания слайдеров под управлением скрипта liSlidik можно посмотреть на официальной страничке проекта - liSlidik - jQuery Responsive Slider. Ниже привожу полный HTML и SCSS-код примера, рассмотренного в данной статье:
Обзор еще одного слайдера под библиотеку jQuery под названием bxSlider.
Данный слайдер обладает полным набором возможностей, адаптивный и легко устанавливается в проекте. Адрес проживания слайдера bxSlider - The Responsive jQuery Content Slider.
Конкретно какими возможностями обладает bxSlider:
полностью адаптивный
может быть горизонтальным, вертикальным
может содержать в себе изображения, видео или HTML-контент
поддержка функций touch/swipe
для анимаций используются CSS transitions
маленький размер файла, легко видоизменяется и настраивается
поддержка браузерами Firefox, Chrome, Safari, iOS, Android, Ie7+
большое число настроек
Установка слайдера bxSlider
Установка bxSlider ничем не отличается от установки ему подобных скриптов для создания carousel. Скачиваем с сайта архив - в нем есть все необходимое для подключения и работы. Помимо этого, там есть несколько дополнительных файлов типа
1
jquery.easing.1.3.js
и
1
jquery.fitvids.js
. Но нет библиотеки jQuery, которую автор рекомендует подключать в проект через CDN. Я подключу jQuery локально, версии 1.11.1.
В HTML-файле перед закрывающим тегом body произвожу подключение скриптов в таком порядке:
Файл
1
jquery.bxslider.min.js
беру из скачанного архива, файл
1
bxslider.js
- произвольного имени, для настроек плагина bxSlider.
В
1
head
HTML-документа, помимо этого, производится подключение таблицы стилей для плагина bxSlider, которую также беру из скачанного архива. Данный шаг выполнять совершенно необязательно - можно обойтись без файла
1
jquery.bxslider.css
и тогда получим “чистый” слайдер, который можно видоизменять по своему с помощью CSS:
Плагин bxSlider подключен и готов к работе. Осталось создать HTML-разметку для него.
HTML-разметка для слайдера bxSlider
Внутри тега
1
body
создаю разметку для будущего слайдера. Она проста и семантична, представляет из себя обычный маркированный список, в котором каждый элемент
1
li
является слайдом. Внутри
1
li
может размещаться изображение, видео или любой другой HTML-контент. Контейнер
1
ul
должен иметь класс с произвольным именем:
Инициализация скрипта bxSlider
В созданном ранее js-файле
1
bxslider.js
произвожу инициализацию плагина bxSlider. Важно заметить, что строка инициализации должна быть обязательно заключена в “обертку”
1
$(document).ready()
, иначе слайдер не будет работать:
Смотрю готовый результат:
Слайдер bxSlider запущен и работает - есть кнопки пагинации и перемотки, изображения крутятся при нажатии на них. Пробую отключить таблицу стилей
1
jquery.bxslider.css
и смотрю результат. Действительно, слайдер bxSlider получается “голым”, но рабочим:
Стилизация слайдера bxSlider
Произведу небольшую стилизацию слайдера bxSlider. Для этого необходимо воспользоваться плагином Firebug под браузер Mozilla Firefox, чтобы инспектировать DOM-дерево и находить нужные HTML-элементы с их классами. Как можно было понять из базовой HTML-разметки, все элеметы управления слайдером генерируются скриптом автоматически.
Стилизация слайдера bxSlider с помощью CSS-правил (в данном примере это SCSS) может быть такой:
И посмотрим результат наших трудов. Уже гораздо лучше, однако:
Настройка слайдера bxSlider
Плагин bxSlider имеет большое количество настроек, которые легко подключать в коде. Разнообразные (и многочисленные) примеры создания слайдера приведены на странице - Examples. Эти примеры можно и стоит изучить (хотя бы слегка, для будущего).
В этой статье давайте я воссоздам один из приведенных на странице Examples примеров. Пусть это будет слайдер с автоматической прокруткой и кнопками управления прокруткой - запуско и остановкой. Такой готовый пример размещен здесь - Auto show with start / stop controls. Я просто сделаю свой собственный дубликат, со своими стилями.
Для этого в SCSS-коде добавляю такие строки:
HTML-разметку на странице я не меняю, как вы могли заметить. Блок
1
.bx-controls-auto
генерируется скриптом bxSlider автоматически.
Файл настроек
1
bxslider.js
подправляю, чтобы он выглядел таким образом:
Смотрю результат в браузере:
Отлично! Появились кнопки запуска и остановки показа слайдшоу; сам слайдер стартует автоматически, при открытии страницы в окне браузера.
Заключение
Плагин bxSlider мне однозначно понравился. Семнатичная простая разметка, использование произвольного имени класса (а не идентификатора), автоматическое генерирование HTML-элементов слайдера, большое количество настроек, хорошие эффекты, простота подключения.
Все эти преимущества однозначно сделали плагин bxSlider номером один в моей копилке.
Сегодня мы рассмотрим пошаговый процесс создания впечатляющей технологии, которую можно использовать для создания эффекта, очень похожего на параллакс, не используя при этом ни строчки Javascript; она может быть достигнута с помощью очень простого способа и на чистом CSS.
Прежде чем продолжить чтение, посмотрите на демо-результат, чтобы сразу оценить, что мы будет изучать в данной статье (чтобы увидеть эффект, вам необходимо воспользоваться настольным компьютером или ноутбуком).
Данный прием может быть применен для создания страниц с описанием продукта или даже для своего рода презентаций типа Powerpoint/Keynote. В этом приеме кроется большой потенциал для создания иллюстрированных online-страниц.
Ниже описан способ, как можно добиться такого результата.
Это все CSS
Основой данного приема является CSS-свойство
1
background-attachment: fixed
, которое доступно для использования веб-разработчиками, начиная с версии CSS2.1. Любое фоновое изображение, к которому применено данное свойство, начинает занимать фиксированное положение относительно окна браузера. Мы воспользуемся данным свойством для того, чтобы зафиксировать иллюстрации страницы в определенном месте, в то время как весь остальной контент будет перемещаться при прокрутке.
Стоит обратить внимание на пару моментов относительно данного CSS-свойства - оно применяется для фоновых изображений и задает им фиксированное положение относительно окна браузера; на изображение с данным свойством не оказывают влияние CSS-свойство margin, как если бы это было с обычными фоновыми изображениями.
Также необходимо помнить, что данное CSS-свойство прекрасно работает в десктопных версиях браузеров; однако в мобильной версии браузера Chrome оно работает некорректно, а в остальных мобильных браузерах возможно отображение страницы рывками. Поэтому, несмотря на то, что посетители с мобильных устройств будут прекрасно видеть все изображения на странице, сам эффект скроллинга лучше всего смогут оценить пользователи настольных систем.
Основные шаги
Основные шаги, которые нужно выполнить, чтобы получить тот результат, который был на демо-странице, следующие:
Создать элемент-контейнер и наполнить его содержимым
Задать для контейнера (в нашем случае это блок
1
div
) с одной стороны padding, равный 50%-м от ширины контейнера, таким образом сдвинув весь контент в противоположную сторону
Добавить на страницу фоновое изображение шириной, равной 50%-м от ширины контейнера и поместить его на противоположной стороне от контента
Задать для фонового изображения CSS-свойство
1
background-attachment: fixed;
и любоваться результатом!
Давайте шаг за шагом детально разберемся с тем, как все это делается. Для статьи подготовлены исходные материалы, которые вы можете получить по данной ссылке, так что в вашем распоряжении уже будут готовые изображения нужного размера.
1. Основная настройка
Для начала давайте создадим папку проекта и добавим в нее индексный файл
1
index.html
, а также папку
1
css
с вложенным в нее файлом стилей
1
style.css
. Скопируйте и поместите четыре изображения из скачанного архива в папку с именем
1
images
.
Добавьте следующую HTML-разметку в файл
1
index.html
:
Данным действием мы создали основной HTML-каркас страницы, подключили к нему файл CSS-стилей и шрифт Roboto с сервиса Google Fonts. Внутри HTML-каркаса мы создали первый блок-контейнер
1
div
с содержимым, к которому будем применять CSS-свойства.
Блок-контейнер div имеет три класса:
1
.content
- служит для задания CSS-свойств, общих для всех блоков-контейнеров;
1
.right
- задает контейнеру правило для смещения его содержимого вправо (немного позже мы будет создавать контейнеры со смещенным влево контентом);
1
.illustration_01
- создает правило для использования конкретного фонового изображения и для задания фонового цвета блока-контейнера.
Стилизация
Теперь у нас все готово для создания CSS-стилей нашей страницы. Начнем с добавления в файл style.css основных правил сброса стилей и форматирования шрифта:
В этом классе заключена почти вся магия нашего примера. Для текста задаем размер шрифта и цвет. Для фона блока-контейнера задаем свойство
1
background-size: 49% auto;
.
Это означает, что фоновое изображение блока будет всегда растягиваться или сжиматься в своем размере, стремясь заполнить 49% от ширины страницы; высота изображения при этом будет изменяться пропорционально. В нашем примере мы используем значение 49% вместо 50%, потому что браузер Firefox иначе будет отображать артефакт в виде странной линии по середине окна браузера.
Затем мы задаем правило
1
background-attachment: fixed;
, которое, как вы уже знаете из предыдущего описания, заставляет фоновое изображение занимать фиксированное положение относительно окна браузера.
И наконец, мы задаем правило
1
background-repeat: no-repeat;
чтобы наше изображение повторялось только один раз на странице.
Теперь добавим в стили еще один класс
1
.right
:
Этот последний класс помещает текст контейнера в одной половине экрана, а фоновое изображение - в другой половине.
Правило
1
background-position: 0 50%;
задает для фонового изображения нулевую позицию относительно левого края окна браузера и выравнивает его точно по центру по вертикали окна.
Наконец, для класса
1
.illustration_01
добавляем следующее содержимое:
Таким образом задается конкретное изображение и фоновый цвет контейнера.
Проверим нашу страницу - мы должны увидеть следующий результат:
Когда вы будете прокручивать страницу вниз, то увидите, что содержимое этой страницы будет перемещаться, в то время как изображение будет оставаться на своем месте.
Добавляем второй контейнер
Давайте добавим еще один контейнер, в котором содержимое будет смещено влево. Добавьте HTML-контейнер ниже последнего блока
1
div
:
Обратите внимание, что на этот раз мы используем класс
1
.left
вместо класса
1
.right
; также изменяем порядковый номер класса
1
.illustration_01
на
1
.illustration_02
.
Добавляем два новых класса в таблицу стилей:
На этот раз мы добавляем padding, равный 50%, с правой стороны блока-контейнера так, чтобы контент внутри блока смещался влево; фоновое изображение позиционируем по горизонтали на 100% - другими словами, вправо до упора. Также добавляем другой цвет для фоновой заливки блока и меняем файл изображения для фоновой картинки.
Снова проверим результат нашей работы и прокрутим страницу вниз в окне браузера. Когда мы достигнем нижнего края первого блока-контейнера то увидим, как начнет появляться верхний край второго блока, постепенно скрывая при этом первое фоновое изображение и открывая второе:
Добавляем блок-разделитель
Наш пример будет гораздо эффектнее смотреться, если мы добавим блок-разделитель между двумя блоками-контейнерами. Давайте так и поступим.
Между двумя блоками div вставляем следующий HTML-код:
И для него в таблице стилей создаем отдельный класс с несколькими правилами:
Теперь, если обновить нашу страницу-пример, то мы заметим, как между двумя контейнерами появился замечательный блок-разделитель:
Третий и четвертый контейнеры
Пример почти готов и мы можем добавить в него оставшиеся блоки-разделители и блоки-контейнеры. Для этого вставим нижеследующий HTML-код в индексную страницу index.html:
И добавим в таблицу стилей классы для двух оставшихся фоновых изображений:
Теперь потребуется вся ширина монитора для того, чтобы отобразились третий и четвертый блоки-контейнеры:
Прокручиваем страницу до конца и видим последний блок-разделитель:
Делаем страницу адаптивной
Последний штрих, который нам необходимо выполнить - это учесть вариант отображения нашей страницы на экранах устройств с разными размерами. Когда область просмотра страницы становится слишком маленькой для того, чтобы вмешать фоновые изображения, нам необходимо сделать так, чтобы картинки страницы из фоновых становились встраиваемыми (через тег
1
img
).
Для этого в начале каждого из блоков-контейнеров вставим еще один блок
1
figure
с классом
1
.smallscreen
, внутри которого поместим тег
1
img
для вставки тех же самых изображений, которые мы использовали для фона нашей страницы.
Для первого блока-контейнера добавим в его начало:
Второй блок-контейнер будет содержать:
Начало третьего блока-контейнера:
Четвертый контейнер:
Класс
1
.smallscreen
мы будем использовать для того, чтобы по умолчанию скрывать изображения
1
<image src="images/miniblack.png">
, но показывать их, когда размер экрана становиться маленьким.
Для этого добавим в таблицу стилей следующее правило:
И затем добавим медиа-запросы, которые будут отвечать за то, отображать ли на странице изображение как фоновую картинку или же как встроенную (обычную) картинку. Они также будут отвечать за то, чтобы пропорционально уменьшать размер текста страницы и расстояния в разметке таким образом, чтобы ширина страницы точно отвечала различной ширине области просмотра экрана устройств.
Для этого добавим медиа-запросы в таблицу стилей:
В приведенном выше коде первые четыре медиа-запроса просто уменьшают размер теста страницы и padding внутри блоков-контейнеров таким образом, чтобы ширина страницы соответсвовала ширине экрана.
В пятом медиа-запросе с правилом
1
max-width: 50rem
мы включаем код, который делает класс
1
.smallscreen
видимым, удаляет 50%-ый padding у содержимого блока-контейнера и скрывает фоновое изображение на странице. Когда медиа-запрос “обнаруживает”, что большое фоновое изоражение больше не вписывается в размер окна, он заменяет фоновое изображение на обычное, которое помещается в начале контента блока-контейнера.
Теперь после обновления уменьшаем страницу и в результате получаем плавно изменяемую ширину, которая подстаивается под различные размеры областей просмотра, до тех пор, пока размер не станет самым маленьким:
Заключение
Даже после многих лет работы с CSS я не устаю удивляться все увеличивающемуся количеству потрясающих вещей, которые можно сделать с помощью CSS. И чем проще прием, тем более впечатляющий получается результат.
Попробуйте сами создать описанный выше прием - это быстро и легко и должно вам понравиться!
Краткий обзор плагина jQuery Mask Plugin, упоминание о котором я нашел на Google+.
Этот плагин понравился мне простотой установки и настройки. Работа плагина jQuery Mask Plugin заключается в том, чтобы форматировать вводимые пользователем в полях данных и приводить их к виду, заданному соответствующей маской в коде.
Помимо этого, плагин jQuery Mask Plugin производит фильтрацию данных и не позволяет пользователю вводить недопустимое количество данных и данных другого формата.
В общем, весьма полезный и удобный плагин, который можно положить в копилку веб-разработчика “на всякий случай”. Наверняка такой может пригодиться при случае. Поэтому приступаю к установке и настройке плагина jQuery Mask Plugin.
Подключение jQuery Mask Plugin
Плагин jQuery Mask Plugin “живет” по этому адресу - jQuery Mask Plugin, где дано подробное описание работы этого скрипта. На этой странице дано краткое описание установки и настройки плагина “от автора” Igor Escobar - Masks With Jquery Mask Plugin.
Подключение скрипта в рабочем проекте производится стандартно для всех плагинов, созданных под библиотеку jQuery. Сначала производится подключение самой библиотеки jQuery, а затем скрипта jQuery Mask Plugin:
Плагин совместим со всеми версиями библиотеки jQuery. Более того, в архиве с исходниками находятся тестовые HTML-странички, с помощью которых можно проверить все возможности работы скрипта под конкретную библиотеку jQuery, конкретный браузер и конкретную ОС:
Создание разметки под jQuery Mask Plugin
Для примера работы с плагином jQuery Mask Plugin создаю тестовую разметку с несколькими полями ввода:
Как видно из примера выше, каждое поле предназначено для ввода определенной информации пользователем, будь то дата, время, проценты, номер телефона или денежная сумма. В принципе, больше ничего сказать по поводу HTML нечего. Самое интересное будет в настройке скрипта.
Расширенный пример с возможными вариантами масок можно посмотреть на странице примера - Basic Usage Examples. На ней также показаны примеры расширенной настройки плагина jQuery Mask Plugin.
Инициализация плагина jQuery Mask Plugin
Создаю еще один js-файл, в котором будет производиться инициализация скрипта и заданы маски для каждого из полей ввода. Файл будет иметь произвольное имя
1
masks.js
и в нем будет такое содержимое:
Видно, что из DOM-модели производится выборка элементов с указанными классами, к которым применяется функция
1
mask
с указанием в каждом конкретном случае маски. Ничего сложного в представленных масках нет, достаточно внимательно их изучить.
Открываю в браузере созданный мною HTML-файл и вижу форму с полями ввода:
Тестирование плагина jQuery Mask Plugin
Давайте попробуем ввести в созданные на примере поля данные. При вводе в каждом из полей хорошо видно, как данные приводятся именно к тому виду, который задан маской в js-коде. Более того, плагин не позволит ввести данные другого формата, то есть будет производиться фильтрация данных:
В поле ввода номера телефона маска создана мною произвольно, буквально на лету. Этот факт говорит о том, что создание масок в плагине jQuery Mask Plugin - дело очень простое и легкое.
На этом обзор плагина jQuery Mask Plugin можно завершить.