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

Два рассмотренных ранее слайдера использовали эффект полупрозрачности для перехода от одного изображения к другому. Но что если мы хотим сделать листание изображений с эффектом прокрутки? Старое изображение уезжает за пределы слайдера, а новое выезжает с другой стороны — возможно ли добиться такой анимации? Возможно. Посмотрим, как это сделать.

Ð’ предыдущей статье мы рассмотрели, как сверстать простой слайдер при помощи CSS без использования JS-скриптов. Сейчас разберём еще один вариант оформления слайдера — с кнопками «Ð²Ð¿ÐµÑ€Ñ‘д» и «Ð½Ð°Ð·Ð°Ð´».

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

Слайдеры, как правило делаются с использованием Javascript. Обычно для этого задействуют библиотеку JQuery. Хотя CSS и не позволяет создать полнофункциональный слайдер с кучей возможностей, таких как анимация по таймеру, листание пальцем на тач-скрине и т.п., во многих случаях такие продвинутые возможности и не требуются.

Простой слайдер для блога гораздо проще сверстать на чистом HTML и CSS, чем задействовать для этого возможности Javascript. Во-первых, код стилей слайдера получится гораздо проще и понятнее, чем код слайдера на Javascript. Во-вторых, та часть пользователей, которая параноидально не доверяет сайтам и заходит на незнакомые сайты только с аддоном NoScript, вырезающим весь JS-код, тоже сможет воспользоваться вашим слайдером.

Поехали!

В предыдущей статье мы смогли создать красивую и технологичную панель вкладок с использованием :target и даже сделали приятную анимацию переключения вкладок. Однако панель вкладок получилась фиксированного размера. Можно ли её переверстать так, чтобы высота панели менялась в зависимости от содержимого вкладок?

Ранее мы рассмотрели два способа создания панели вкладок для сайта: первый на основе якорей и свойства overflow, и второй на основе переключателей (радиокнопок).

Существует также третий способ добиться переключения вкладок — при помощи селектора :target и всё тех же якорей

В первой части мы рассмотрели, как сделать вкладочный интерфейс при помощи свойства overflow и ссылок-якорей. Этот способ совместим со всеми браузерами, включая самые древние.

Сегодня поговорим о том, как вкладки делаются при помощи небольшой магии с переключателями (радио-кнопками). Этот способ является более технологичным и гибким и более соответствует духу CSS.

Чтобы запоминать выбранную пользователем вкладку, нам нужно хранить некоторое состояние, то есть нам нужны переменные. Работать с переменными мы можем из языков программирования, таких как JavaScript. Но поскольку наша задача — сделать вкладки без JavaScript, нужно придумать что-то еще. Как я говорил в предыдущей части, CSS является описательным языком и не имеет переменных. Тем не менее, запомнить «ÐºÑƒÐ´Ð° нажал пользователь» мы всё же можем, применив одну хитрость. Для этого используем имеющиеся в HTML элементы управления: флажки (англ. checkboxes) и переключатели (англ. radio buttons).

Классическим средством навигации по сайту является горизонтальное меню в шапке сайта. Посмотрим, как сделать простое горизонтальное меню на HTML и CSS.

Иногда возникает потребность сделать на странице импровизированное «Ð¾ÐºÐ½Ð¾» небольшого размера, в котором отображается большой объем текста с полосой прокрутки. Рассмотрим, как сделать блок div фиксированного размера с прокруткой по вертикали или горизонтали.

Бывает так, что на сайте желательно запретить выделение некоторых элементов страницы. Это можно сделать при помощи CSS.

В этой статье я расскажу о том, как задаются цвета в HTML и CSS.

Как вы, вероятно, знаете, цвет каждой точки (пикселя) экрана формируется из трёх субпикселей: красного (R), зелёного (G) и синего (B). Яркость свечения каждого из субпикселей определяет итоговый цвет, который мы увидим на экране. Вот базовые цвета монитора:

Список названий цветов, поддерживаемых всеми браузерами:

Ð’ наше время никого уже не удивишь выпадающим меню, сделанном на чистом CSS без использования JavaScript — теперь все так делают. Если же нужно оформить контент на странице в виде вкладок (табов), всё еще часто прибегают к помощи JavaScript. Однако многие и не догадываются, какие потрясающие вещи позволяет делать современный CSS. Существует несколько способов добавить на сайт табы, используя только CSS и ни строчки кода скриптов. Ð’ этой серии статей я расскажу вам о них.

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

Есть, как минимум, 4 метода организации вкладок на чистом CSS. Самый старый из мне известных — работает при помощи шаманства с overflow. Второй — самый удобный и технологичный (на мой взгляд) — основан на использовании свойства :checked и радио-кнопок (переключателей). Третий использует :target. Четвёртый позволяет переключать вкладки по наведению мыши, без щелчка.