DJ-ImageSlider
Компонент DJ-ImageSliderот Joomla-Monster – это типичный слайдер joomla: занимает всё пространство экрана, может быть полностью кликабельным (по всей поверхности фото), иметь надписи. Единственное отличие от стандартного набора функций – возможность прикрепить ссылку на материал джумла. С помощью компонента создается не только слайдер, а также красивая карусель.
Возможности DJ-ImageSlider
Позволяет изменять размеры слайдера, не влияя на качество изображений (не изменяя параметры картинки). Добавлять описания к слайдам, устанавливать разные эффекты перехода. Выбирать количество отображаемых картинок, создавать слайды, группировать их по категориям. Возможно создание горизонтальной версии слайд-шоу.
Интересный технический момент – можно работать с DJ-ImageSlider как с компонентом (для презентации материалов), можно как с модулем, который позволяет загружать картинки из папок (ссылка добавляется только одна; если предпочесть компонент, можно разместить на каждое изображение).
Настройка модуля DJ-ImageSlider
Рассмотрим процесс создания модуля.
Создание категорий и вывод материалов доступен через компонент.
Главные преимущества данного расширения (компонент+модуль) – он позволяет:
- значительно экономить время: не нужно обрезать, подгонять под один размер все картинки, модуль сделает это за вас; всего в два клика. Если нужно показать зрителю больше – дополнительные настройки имеются в компоненте расширения. Чтобы подробнее познакомиться с возможностями, советуем изучить официальную документацию: https://dj-extensions.com/dj-imageslider.
- выводить контент в слайд-шоу, галереей, каруселью, мозайкой для вывода новостей или материалов (сочетает несколько простых модулей joomla).
DJ-ImageSlider достоин внимания, поскольку является, пожалуй, одним из самых лучших слайдеров для джумла.
Smart Slider
Также как и предыдущий, Smart Slider является распространенным названием слайдера для джумла. Чем отличается этот компонент от разработки под названием SP Smart Slider и других подобных? Узнаем.
Главные особенности Smart Slider
- изначально существовал только в платной версии, сегодня доступна бесплатная;
- адаптивный;
- поддерживает версии joomla 3.х.
Возможности и настройки Smart Slider
Преимущества компонента:
- удобная панель управления слайдами — drag-n-drop;
- многослойность (можно наложить текст, картинку на картинку, кнопку, видео – до 6 слоев, в PRO версии их 16), можно настроить видимость слоев для разных типов устройств;
- короткий код для быстрой вставки модуля;
- возможно без «конфликтов» вывести несколько слайдеров на одной странице;
-
встроено 7 видов анимационных эффектов перехода от слайда к слайду (38 доступны после оплаты).
Модуль Smart Slider является универсальным, многофункциональным, удобным инструментом работы с контентом. На каждом из этапов создания слайдера вас ждут подсказки, оповещения об успешно завершенном действии, а также наглядные видеоуроки и ограмная библиотека (имеются и бесплатные) готовых шаблонов оформления.
Теория
Первое, что нам необходимо сделать, так это изменить значения свойств CSS посредством JavaScript скрипта. Нам необходимо сделать это для элемента #slidesContainer, чтобы устранить область прокрутки. Вдобавок нам необходимо изменить размер элементов с классом .slide на 20px. Также нам необходимо применить свойство float для того, чтобы слайды следовали друг за другом, а не один под другим.
Затем, благодаря манипуляции DOM, мы вставим блок div с id #slideInner, который будет содержать внутри себя все слайды с классом .slide.
В конце концов, мы вставим элементы контроля (с классом .control) для того, чтобы пользователи могли переключать слайды; это мы сделаем средствами JavaScript, чтобы тем, у кого он отключён, элементы контроля не отобразились.
Вашему вниманию я представляю код JavaScript детальное описание которого последует ниже.
Блок 5: Главный скрипт jQuery
$(document).ready(function(){
var currentPosition = 0;
var slideWidth = 560;
var slides = $('.slide');
var numberOfSlides = slides.length;
// Убираем прокрутку
$('#slidesContainer').css('overflow', 'hidden');
// Вставляем все .slides в блок #slideInner
slides
.wrapAll('<div id="slideInner"></div>')
// Float left to display horizontally, readjust .slides width
.css({
'float' : 'left',
'width' : slideWidth
});
// Устанавливаем ширину #slideInner, равную ширине всех слайдов
$('#slideInner').css('width', slideWidth * numberOfSlides);
// Вставляем элементы контроля в DOM
$('#slideshow')
.prepend('<span class="control" id="leftControl">Move left</span>')
.append('<span class="control" id="rightControl">Move right</span>');
// Прячем правую стрелку при загрузке скрипта
manageControls(currentPosition);
// Отлавливаем клик на класс .controls
$('.control')
.bind('click', function(){
// Определение новой позиции
currentPosition = ($(this).attr('id')=='rightControl')
? currentPosition+1 : currentPosition-1;
// Прячет / показывает элементы контроля
manageControls(currentPosition);
// Move slideInner using margin-left
$('#slideInner').animate({
'marginLeft' : slideWidth*(-currentPosition)
});
});
// manageControls: показывает или скрывает стрелки в зависимости от значения currentPosition
function manageControls(position){
// Спрятать левую стрелку, если это левый слайд
if(position==0){ $('#leftControl').hide() }
else{ $('#leftControl').show() }
// Спрятать правую стрелку, если это последний слайд
if(position==numberOfSlides-1){ $('#rightControl').hide() }
else{ $('#rightControl').show() }
}
});
Как это будет работать:
Как это будет работать, очень просто, у нас будет два очень важных блока, первый это видимый блок, внутри его будет сам слайдер, суть заключается в том, что первый блок будет ограничивать слайдер, чтобы не было горизонтальной прокрутки, а сам слайдер будет горизонтальным.
Сам же код, будет просто увеличивать или уменьшать переменную при нажатие кнопки назад, вперёд, и умножать её на размер видимого блока, получившейся значение будем использовать для назначения позиции элемента слайдер, как то так и будет работать наша программа.
Если вам не понятно, то во время разработки я думаю вы всё поймёте.
Ещё посмотрите статью «Как сделать простой слайдер на чистом JavaScript», но она совсем для новичков.
Слайдер для сайта на Джумле (Joomla)
Что за Codecanyon? Это сайт-сборник платных дополнений для сайтов. Цены не кусаются и находятся в пределах от нескольких долларов до полутора десятков долларов. Разработчики скриптов для Codecanyon прилагают к своим решениям подробную документацию — как по настройке, так и по установке jquery слайдеров на сайт. Есть скриншоты и видео — все это станет вам доступным после оплаты выбранного скрипта.
Стоит отметить, что не всегда платное значит наилучшее, ведь существует множество бесплатных и open-source решений, ничем не уступающих по функциональности платным аналогами, продающихся на коммерческих площадках.
Также преимуществом слайдеров в виде плагинов является то, что у них есть админка, а значит для подключения скрипта вам нужно делать минимум телодвижений, а все необходимые действия можно сделать в административной панели кликая мышкой, а не копаясь в коде — неплохое преимущество для неподготовленного или занятого вебмастера.
Slider by WD – Responsive Slider
Этот бесплатный слайдер для WordPress так же довольно простой, но в отличии от MetaSlider он имеет несколько интересных эффектов смены слайдов, больше настроек и некоторые интересные фишки, которых нет в других плагинах.
Основные особенности Slider by WD:
- Простой интерфейс и возможность создавать несколько слайдеров и для каждого задавать свои настройки
- Есть возможность растягивать слайдер на всю ширину или задавать фиксированные размеры
- Позволяет настаивать автопрокрутку, время между сменой слайдов, скорость анимации цикличность слайдов, остановку при наведении
- Можно задать ширину экрана устройства, на которой слайдер будет скрываться или задавать ширину экрана, начиная с которой слайдер будет становиться на всю ширину экрана (в случае если вы изначально задавали фиксированный размер)
- Возможность добавление водяных знаков на слайды
- Задание цвета границы слайд шоу и радиуса скругления углов
- Можно задавать музыку, которая будет играть во время прокрутки слайдов
- Задание отступов и тени в CSS формате
- Защита от щелчка правой кнопкой, на случай если вы не хотите чтобы кто то мог сохранить ваши слайды и использовать у себя
- Расширенные настройки для навигации. Можно задавать тип стрелок и переключателей, возможность переключения слфйдов с клавиатуры или колёсиком мышки, поддержка управления с сенсорных экранов и т.д.
- Возможность добавление Time bar, который представляет собой полоску или круг, отображающий сколько времени осталось до переключения следующего слайда
- Поддержка добавления пользовательских CSS свойств
- Выводится на любой странице, в виджете или статье при помощи шорткода или специальной кнопки на панели инструментов визуального редактора WordPress. Так же можно выводить в шаблоне.
Master Slider
Master Slider — отличный слайдер, который работает на всех устройствах, но специализируется на сенсорных устройствах, таких как мобильные. Он одинаково хорошо работает на настольном компьютере или ноутбуке, но если вы думаете, что большинство ваших посетителей могут использовать свой телефон для посещения вашего сайта, этот плагин определенно стоит рассмотреть.
У Master Slider есть бесплатная и премиум версия. Бесплатная версия позволяет полностью контролировать выбор типов слайдеров, которые вы можете добавить в WordPress.
В премиум-версии добавлен конструктор перетаскивания для создания ползунков и более 90 предопределенных шаблонов слайдов, которые вы можете использовать для своих нужд.
Особенности Master Slider:
- Конструктор слайдов с возможностью перетаскивания с премией
- Широкий выбор отличных шаблонов дизайна слайдов
- Работает с YouTube, Flickr и WooCommerce
- Специализируется на сенсорных устройствах
- Использует интеллектуальную загрузку, чтобы минимизировать время загрузки
Плюсы Master Slider:
- Мастер-слайдер оптимизирован для сенсорного смахивания и хорошо работает
- Конструктор страниц быстро выполняет сборку или настройку
- Протестировано в каждом браузере
- Огромный список функций как для бесплатной, так и для премиум-версии
Минусы Master Slider:
Только конструктор слайдеров премиум-класса
Пишем код
На различных курсах веб-разработки знакомство с фронтендом начинается с описания основных технологий, а именно:
- HTML — язык гипертекстовой разметки, на котором пишется «скелет» сайта. Если провести аналогию с домом, то это каркас. Грубо говоря, вы строите разметку, на которую после будет ложиться оформление.
- CSS — каскадные таблицы стилей или то самое оформление. Вернёмся к примеру с домом: после постройки его нужно облицевать, покрасить, сделать презентабельным, и именно CSS описывает внешний вид сайта.
- JavaScript — язык программирования, который обеспечивает функциональность. Вы можете взаимодействовать с вещами в вашем доме — включать и выключать свет, бытовую технику, воду и многое другое. Вы точно так же можете взаимодействовать с сайтом, нажимая кнопки, наводя курсор на изображения и заполняя формы. JavaScript обрабатывает все эти взаимодействия, и, как язык сценариев, он может предоставлять правила и логику для определения того, что должно произойти дальше.
HTML
Обучение веб-разработке стоит начать с HTML, так как это каркас сайта. Каждый HTML-документ имеет стандартную структуру:
Но в нашем примере прописывать структуру всей страницы не нужно, ведь мы работаем с отдельным компонентом, который потом будет размещаться между тегами . Здесь всё просто: у нас есть основной блок (тег ), который является родительским и содержит ещё три блока с разными картинками — будущими слайдами:
Обратите внимание, что у каждого тега есть свой класс. Именно по этим классам будет применяться оформление CSS
В тегах мы указываем ссылки на те изображения, которые будут показываться. В атрибуте onclick мы обращаемся к конкретной функции JavaScript, привязывая к кнопке действие по клику.
CSS
В каскадных стилях задаём ширину, высоту, позиционирование, цвет и анимацию. В нашем случае мы работаем отдельно с контейнером слайдера, отдельно с контейнерами картинок, которые прописаны как item, кнопками, добавлением к ним фона и анимацией слайдов:
Со всеми значениями можно поэкспериментировать в редакторе. Если есть сомнения по поводу какого-то из атрибутов, достаточно его удалить и посмотреть, что изменилось.
JavaScript
Веб-разработчик, обучение которого ограничивается HTML и CSS, — это скорее веб-дизайнер. Мы же переходим к главному языку фронтенда, который способен вдохнуть жизнь в визуальное решение:
Но не стоит забывать, что не JavaScript единым: современные библиотеки и фреймворки способны упростить разработку и улучшить функциональность веб-компонента. Например, Bootstrap позволяет верстать сайты в разы быстрее, и даже начинающий разработчик может создать рабочий макет с использованием данного фреймворка. А ещё можно написать слайдер на чистом HTML/CSS, чтобы потренировать навыки в вёрстке и каскадных таблицах стилей.
Приведённый в уроке пример довольно прост и призван показать возможности стандартного взаимодействия HTML, CSS и JavaScript.
Общие настройки слайдера в Smart Slider 3
После того как слайдер будет импортирован, перед нами откроется страница редактирования и настройки.
Следующее, что нам нужно сделать – это скорректировать некоторые основные настройки. Для этого:
-
1.Пролистываем страницу вниз до раздела с вкладками. Первая активная вкладка, доступная для редактирования, это вкладка «Опубликовать». Здесь, в первую очередь, для нас важны поле с шорткодом для вставки слайдера на страницу сайта, и поле с php-кодом для вставки слайдера в шаблон страницы:
-
2.Под вкладкой «Опубликовать» имеется дополнительная панель с вкладками:
-
1.)На вкладке «Стрелки» вы можете включить/выключить стрелки перелистывания слайдов, выбрать их стиль, а так же настроить их цвет, размер и положение на слайде.
-
2.)На вкладке «Точки» вы так же можете включить или отключить их отображение, и так же настроить их положение и внешний вид
- 3.)Вкладка «Автовоспроизведение» позволяет добавить на слайдер кнопку автовоспроизвдения и настроить ее положение.
- 4.)На вкладке «Text Bar» вы можете включить полосу с текстовым описанием слайда, и настроить ее положение на слайде.
- 5.)Вкладка «Миниатюры» позволяет добавить и настроить полосу с миниатюрами слайдов, для быстрого перемещения между слайдами.
-
6.)Последняя и очень важная вкладка «Тени» позволяет добавить одну из 7 доступных теней
-
-
3.На следующей вкладке основных настроек «Основное» вы можете изменить название слайдера, настроить управление, задать миниатюру, выравнивание и положение фона слайдера. В разделе «Настройка анимации» можно выбрать один из 7-ми вариантов анимированной смены слайдов и задать скорость аниманиции.
-
4.На вкладке «Размер» можно скорректировать размер слайдера и степень заполнения слайдером тела страницы
В разделе «Адаптивный режим» вы можете включить адаптацию под различные мобильные устройства и задать максимальное разрешение адаптации для книжной и альбомной ориентации:
-
5.На вкладке «Автовоспроизведение» можно включить автоматическую смену слайдов и задать ее скорость.
-
6.Smart Slider 3 имеет в своем функционале уникальную и очень полезную функцию оптимизации изображений. Включив эту опцию и задав процент оптимизации вы можете повысить скорость работы слайдера и страницы сайта в целом.
-
7.На вкладке «Loading» можно задать параметры загрузки и задать предварительно загруженный слайд. Выбранный слайд будет иметь приоритет при загрузке страницы
- 8.На вкладке «Developer» можно задать js-скрипты, отключить скролл страницы и отменить обтекание слайдера. Последняя опция может помочь при неправильной работе адаптивности.
-
9.После того как закончите с настройкой обязательно кликните по кнопке «Сохранить» в правом верхнем углу:
Индикаторы загрузкиСкопировать ссылку
Следует отметить, что теперь можно нажать на кнопку для мгновенной загрузки слайда. При этом может возникнуть очевидный временной разрыв между появлением слайда в области видимости и загрузкой самого изображения.
Есть техника, которая поможет с этим разобраться: использовать для видимого плейсхолдера доминантный цвет изображения. Вы могли такое видеть на Pinterest и других подобных сайтах. Однако, это означает, что мы знаем размеры изображения, и наши картинки по своей природе адаптивны.
Чтобы раскладка не «подпрыгивала», когда изображения подгружаются (так как установлена высота ), мы можем вместо этого схитрить и отцентрировать индикатор загрузки для каждого слайда. Потом он будет скрыт загрузившейся картинкой.
CSS:
.sl-container {
width: 100%;
height: 500px;
margin: 20px 0;
padding: 0;
font-family: ‘Roboto’, sans-serif;
font-size: 1em;
line-height: 1.5em;
color: #000;
position: relative;
}
.swipe {
position: relative;
width: 100%;
height: 100%;
background: #eee;
overflow: hidden;
}
.panel {
position: absolute;
width: 100%;
min-height: 100%;
top: 0;
left: 0;
padding: 20px;
}
.left {
left: -100%;
}
.right {
left: 100%;
}
.sl-info {
position: absolute;
width: 70%;
max-width: 500px;
bottom: 15%;
right: 5%;
pointer-events: none;
}
.inner {
position: relative;
padding: 0.5em 2em 1em;
background: #FFFFFF;
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
.inner h3 {
font-size: 1.7em;
font-weight: normal;
color: #337AB7;
}
.inner p {
font-family: Verdana, sans-serif;
}
.sl-info:before {
content: «»;
position: absolute;
width: 65%;
height: 80%;
top: 0;
left: 0;
transform: translate(-10px, -10px);
background: #337AB7;
}
.sl-buttons {
position: absolute;
bottom: -50px;
right: 5%;
pointer-events: all;
}
.sl-buttons button {
transition: ease .4s;
}
.sl-buttons button svg {
margin: 10px 0;
}
.sl-buttons .btn-prev,
.sl-buttons .btn-next {
width: 60px;
height: 60px;
margin-left: 10px;
border: 2px solid #337AB7;
outline: none;
border-radius: 60px;
color: #FFFFFF;
background: #337AB7;
box-shadow: 0px 3px 15px 2px rgba(0,0,0,.5);
cursor: pointer;
}
.sl-buttons button:hover {
box-shadow: 0px 3px 30px 3px rgba(0,0,0,.5);
}
.sl-buttons button:disabled {
box-shadow: 0px 1px 5px 0px rgba(0,0,0,.5);
background: #BFE2FF;
cursor: default;
}
.optional {
width: 80%;
max-width: 680px;
margin: 6em auto;
padding: 2em 3em;
box-shadow:
0 3px 12px rgba(0,0,0,0.16),
0 3px 12px rgba(0,0,0,0.23);
}
@media (max-width: 620px) {
body {
font-size: 13px;
line-height: 1.5em;
}
.sl-info {
position: absolute;
width: 100%;
max-width: 100%;
bottom: 0;
right: 0;
}
.inner {
padding: .5em 1.5em;
box-shadow: none;
}
.sl-buttons {
display: none;
}
}
|
1 |
.sl-container { width100%; height500px; margin20px; padding; font-family’Roboto’,sans-serif; font-size1em; line-height1.5em; color#000; positionrelative; } .swipe { positionrelative; width100%; height100%; background#eee; overflowhidden; } .panel { positionabsolute; width100%; min-height100%; top; left; padding20px; } .left { left-100%; } .right { left100%; } .sl-info { positionabsolute; width70%; max-width500px; bottom15%; right5%; pointer-eventsnone; } .inner { positionrelative; padding0.5em2em1em; background#FFFFFF; box-shadow14px28pxrgba(0,0,0,0.25),10px10pxrgba(0,0,0,0.22); } .inner h3 { font-size1.7em; font-weightnormal; color#337AB7; } .inner p { font-familyVerdana,sans-serif; } .sl-info:before { content»»; positionabsolute; width65%; height80%; top; left; transformtranslate(-10px,-10px); background#337AB7; } .sl-buttons { positionabsolute; bottom-50px; right5%; pointer-eventsall; } .sl-buttons button { transitionease.4s; } .sl-buttons button svg { margin10px; } .sl-buttons .btn-next { width60px; height60px; margin-left10px; border2pxsolid#337AB7; outlinenone; border-radius60px; color#FFFFFF; background#337AB7; box-shadow0px3px15px2pxrgba(0,0,0,.5); cursorpointer; } .sl-buttons button:hover { box-shadow0px3px30px3pxrgba(0,0,0,.5); } .sl-buttons button:disabled { box-shadow0px1px5px0pxrgba(0,0,0,.5); background#BFE2FF; cursordefault; } .optional { width80%; max-width680px; margin6emauto; padding2em3em; box-shadow 3px12pxrgba(0,0,0,0.16), 3px12pxrgba(0,0,0,0.23); } @media (max-width: 620px) { body { font-size13px; line-height1.5em; } .sl-info { positionabsolute; width100%; max-width100%; bottom; right; } .inner { padding.5em1.5em; box-shadownone; } .sl-buttons { displaynone; } } |
Слайдер на CSS
Хочу рассказать простой способ создания слайдера, без использования JS, при помощи анимации CSS.
1) Для начала напишем HTML, предположим что в слайдере будут сменять друг друга 4 изображения.
2) Далее оформим размеры блока, и еще несколько настроек, position: relative необходимо для того, чтобы создать контекст форматирования, дальше будет понятно зачем.
3) Также определим некоторые свойства для самих слайдов:
Как видно из CSS мы размещаем все слайды в верхнем левом углу слайдера, задавая, таким образом, одинаковую исходную позицию.
4) Далее нужно определить каким именно образом слайды будут сменять друг друга, не создавая разрывов – для каждого слайда я решил использовать следующую последовательность действий:
1. Слайд находится на исходной позиции, демонстрируется пользователю
2. Слайд двигается влево, пока полностью не выйдет за границу слайдера (у слайдера же, как выше указано, overflow: hidden, соответственно слайд не наезжает на окружающие объекты).
3. Далее слайд двигается наверх, пока нижняя граница слайда выйдет за верхнюю границу слайдера
4. Далее слайд двигается вправо, пока левая граница слайда, не выйдет за правую границу слайдера
5. Слайд спускается вниз на один уровень со слайдером
6. Слайд двигается на исходную позицию Иначе говоря (кадры пока назову согласно номерам из списка выше):
5) Итак, стало понятно, как выглядит траектория слайда. Каждый слайд «объезжает» вокруг своего контейнера – слайдера – и возвращается на исходную. Таким образом мы можем бесконечно крутить любое количество слайдов. Но остался один нюанс, который является самым важным в этой схеме – время. Нужно правильно рассчитать раскадровку анимации по времени и установить правильную задержку для каждого слайда, чтобы не все одновременно ринулись анимироваться. Для того чтобы понять, как правильно выставит задержку и рассчитать время анимации, я пошел нижеописанным путем.
Давайте возьмем обозначения шагов из предыдущего пункта и разберемся что же происходит в каждом шаге. По сути, шаги №1, 2 и 6 – это те шаги, в которых слайд заходит в видимую область. Из того, что слайды должны двигаться неразрывно и, как бы, выталкивать друг друга из слайдера, можно заключить, что длительность шагов 2 и 6 должна быть равна. Сразу оговорюсь, что мне удалось удачно работать эту конструкцию только при том условии, что длительность первого шага также равна длительности 2-го и 6-го. То, что происходит во время шагов 3,4 и 5 – по сути, технические нужды, и для простоты, давайте объединим эти три шага в 1.
После упрощения имеем:
1. Шаг – слайдер демонстрируется на исходной 2. Шаг – слайдер сдвигается вправо 3. Шаг – слайдер совершает технические перемещения 4. Шаг – слайдер сдвигается влево, возвращаясь на исходную позицию
Для обеспечения безразрывного показа слайдов, в момент, когда слайд приступает к шагу 2, следующий слайд должен приступить к шагу 4.
Для того чтобы посчитать процент необходимого времени на каждую стадию, так сказать, вывел небольшую формулу, которая работает при условии, что 1,2 и 4 шаг равны.
Если время, на круг всей анимации – t; Кол-во слайдов – n; Длительность 3 шага – y; Длительность шагов 1,2 и 4 – x; Шаг задержки анимации для n-слайда – z; То:
y = (100 * n — 150)/n; x = (100 – y) / 3; x и y необходимо перевести в проценты, и тогда: z = 2 * x * t;
Для случая, когда n = 4, как в примере выше, получаем:
3-ий шаг – 62,5%, 1, 2 и 4-ый — по 12,5%. Шаг задержки анимации для каждого последующего слайда – 25%.
Какие интервалы будут между этапами внутри третьего шага – не имеет значения.
6) Теперь, когда мы все посчитали и знаем все величины можно привести финальный код.
Общий CSS для всех слайдов:
Вот, собственно и все! Спасибо всем, кто дочитал до конца.
Написание общих стилей
Для начала определим те стили, которые будут использоваться повсеместно. Сюда входит основной шрифт и фон страницы, размеры блока-контейнера, вид ссылок, общие стили заголовков, адаптивность картинок, форма и цвет кнопок. Добавьте этот код в таблицу , разместив его под комментарием :
body {
font-family: 'Open Sans', sans-serif;
font-size: 1em;
color: #eee;
background-color: #383838;
background-image: url(../img/bg.png);
}
.container {
width: 100%;
max-width: 960px;
margin-left: auto;
margin-right: auto;
}
a {
text-decoration: none;
color: #fff;
}
h1,
h2,
h3 {
text-transform: uppercase;
}
h2 {
font-size: 32px;
text-align: center;
margin-top: 40px;
margin-bottom: 40px;
}
img {
display: block;
max-width: 100%;
height: auto;
}
.button,
button {
border: 0;
background-image: linear-gradient(145deg, #dd0000, #ff3670);
color: #fff;
text-transform: uppercase;
font-size: 1.2em;
font-family: 'Open Sans', sans-serif;
margin-top: 20px;
margin-bottom: 20px;
display: inline-block;
}
.button:hover,
button:hover {
background-image: linear-gradient(145deg, #ff3670, #dd0000);
}
Как вы могли заметить по макету, дизайн нашей страницы планируется в темных тонах. Белого фона не будет ни у одного элемента, поэтому мы сразу устанавливаем темно-серый фоновый цвет для всего элемента , а вторым фоном добавляем изображение с легкой текстурой. При этом цвет шрифта мы выбираем светлый, чтобы можно было без проблем разглядеть текст.
Настройки для блока остаются идентичны стилям в предыдущем лендинге.
Стандартный подчеркнутый стиль для ссылок нам не нужен, поэтому мы отключаем его, а также меняем цвет с классического синего на белый. А текст всех заголовков, встречающихся на странице, мы делаем прописными буквами. Заголовкам добавляем отступы сверху и снизу (поскольку стандартные отступы обнулил файл Reset.css), задаем размер шрифта и выравниваем по центру.
Все изображения на странице мы делаем адаптивными с помощью приведенного выше кода, чтобы они автоматически подстраивались под размеры экрана, при этом не теряя своих пропорций.
Для тегов и ссылок с классом мы создали общий стиль, поскольку оба вида элементов должны выглядеть в нашем дизайне одинаково. Мы убрали рамку, которую дорисовывает браузер всем кнопкам, а также применили градиентный фон — вот и первый случай использования функции на практике. При наведении на кнопку цвета градиента меняются местами.
Все остальные свойства CSS вы уже видели много раз, поэтому мы думаем, что вы легко поймете, за что они отвечают в данном коде. Что ж, двигаемся дальше!
HTML:
<div class=»slideshow»>
<div class=»slideshow-item»>
<img src=»photo-1.jpg» alt=»»>
<div class=»slideshow-item-text»>
<h5>Заголовок</h5>
<p>Описание</p>
</div>
</div>
<div class=»slideshow-item»>
<img src=»photo-2.jpg» alt=»»>
<div class=»slideshow-item-text»>
<h5>Заголовок</h5>
<p>Описание</p>
</div>
</div>
<div class=»slideshow-item»>
<img src=»photo-3.jpg» alt=»»>
<div class=»slideshow-item-text»>
<h5>Заголовок</h5>
<p>Описание</p>
</div>
</div>
<div class=»slideshow-item»>
<img src=»photo-4.jpg» alt=»»>
<div class=»slideshow-item-text»>
<h5>Заголовок</h5>
<p>Описание</p>
</div>
</div>
</div>
|
1 |
<div class=»slideshow»> <div class=»slideshow-item»> <img src=»photo-1.jpg»alt=»»> <div class=»slideshow-item-text»> <h5>Заголовок</h5> <p>Описание</p> </div> </div> <div class=»slideshow-item»> <img src=»photo-2.jpg»alt=»»> <div class=»slideshow-item-text»> <h5>Заголовок</h5> <p>Описание</p> </div> </div> <div class=»slideshow-item»> <img src=»photo-3.jpg»alt=»»> <div class=»slideshow-item-text»> <h5>Заголовок</h5> <p>Описание</p> </div> </div> <div class=»slideshow-item»> <img src=»photo-4.jpg»alt=»»> <div class=»slideshow-item-text»> <h5>Заголовок</h5> <p>Описание</p> </div> </div> </div> |
ЗаключениеСкопировать ссылку
Инклюзивный дизайн не только про то, как сделать интерфейс одинаковым для всех. Он также о том, как предоставить как сделать интерфейс удобным как можно большему числу людей. У нашего слайдера не самая модная реализация, но он всё ещё достаточно хорош. Это контент должен поражать людей, а не сам интерфейс: эпохальные дадаистские фотомонтажи Ханны Хёх не должны задвигаться на второй план. Убедитесь, что слайдер адаптивный, мало весит, надёжный и совместимый. Тогда у художницы будет большая аудитория, которую она заслуживает.
Я предложил в своём докладе «Пишите меньше чёртового кода» концепцию непрогрессивного неулучшения (unprogressive non-enhancement). Идея заключается в том, что поток контента, на основе которого мы строим вкладки, карусели и тому подобное, часто не следует перестраивать. Отсутствие улучшения может быть лучше «улучшения». Однако при разумном и бережном расширении представления контента, как, например, в слайдерах, это может быть довольно привлекательным способом получения информации. Лучше всего найти хорошую и исследованную причину для такого исключения.
