суббота, 23 августа 2014 г.
В предыдущей статье мы остановились на том что сделали симпатичный слайдер с прокруткой. В этой статье я покажу доработанный вариант этого слайдера, имеющий большее разнообразие эффектов анимации.
Два рассмотренных ранее слайдера использовали эффект полупрозрачности для перехода от одного изображения к другому. Но что если мы хотим сделать листание изображений с эффектом прокрутки? Старое изображение уезжает за пределы слайдера, а новое выезжает с другой стороны — возможно ли добиться такой анимации? Возможно. Посмотрим, как это сделать.
пятница, 22 августа 2014 г.
В предыдущей статье мы рассмотрели, как сверстать простой слайдер при помощи CSS без использования JS-скриптов. Сейчас разберём еще один вариант оформления слайдера — с кнопками «вперёд» и «назад».
В одной из предыдущих статей мы рассмотрели, как сделать вкладки на CSS при помощи трюка с радио-кнопками. В этой статье мы при помощи аналогичного подхода создадим симпатичный слайдер, не требующий Javascript для работы.
Слайдеры, как правило делаются с использованием Javascript. Обычно для этого задействуют библиотеку JQuery. Хотя CSS и не позволяет создать полнофункциональный слайдер с кучей возможностей, таких как анимация по таймеру, листание пальцем на тач-скрине и т.п., во многих случаях такие продвинутые возможности и не требуются.
Простой слайдер для блога гораздо проще сверстать на чистом HTML и CSS, чем задействовать для этого возможности Javascript. Во-первых, код стилей слайдера получится гораздо проще и понятнее, чем код слайдера на Javascript. Во-вторых, та часть пользователей, которая параноидально не доверяет сайтам и заходит на незнакомые сайты только с аддоном NoScript, вырезающим весь JS-код, тоже сможет воспользоваться вашим слайдером.
Поехали!
суббота, 16 августа 2014 г.
В предыдущей статье мы смогли создать красивую и технологичную панель вкладок с использованием :target и даже сделали приятную анимацию переключения вкладок. Однако панель вкладок получилась фиксированного размера. Можно ли её переверстать так, чтобы высота панели менялась в зависимости от содержимого вкладок?
пятница, 15 августа 2014 г.
Ранее мы рассмотрели два способа создания панели вкладок для сайта: первый на основе якорей и свойства overflow, и второй на основе переключателей (радиокнопок).
Существует также третий способ добиться переключения вкладок — при помощи селектора :target и всё тех же якорей
четверг, 14 августа 2014 г.
В первой части мы рассмотрели, как сделать вкладочный интерфейс при помощи свойства overflow и ссылок-якорей. Этот способ совместим со всеми браузерами, включая самые древние.
Сегодня поговорим о том, как вкладки делаются при помощи небольшой магии с переключателями (радио-кнопками). Этот способ является более технологичным и гибким и более соответствует духу CSS.
Чтобы запоминать выбранную пользователем вкладку, нам нужно хранить некоторое состояние, то есть нам нужны переменные. Работать с переменными мы можем из языков программирования, таких как JavaScript. Но поскольку наша задача — сделать вкладки без JavaScript, нужно придумать что-то еще. Как я говорил в предыдущей части, CSS является описательным языком и не имеет переменных. Тем не менее, запомнить «куда нажал пользователь» мы всё же можем, применив одну хитрость. Для этого используем имеющиеся в HTML элементы управления: флажки (англ. checkboxes) и переключатели (англ. radio buttons).
среда, 13 августа 2014 г.
пятница, 1 августа 2014 г.
Классическим средством навигации по сайту является горизонтальное меню в шапке сайта. Посмотрим, как сделать простое горизонтальное меню на HTML и CSS.