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

Для примера мы взяли украинский алфавит, кроме этого мы привязали ссылки для каждой буквы, по этому они будут кликабельны. И так, давайте приступим.

Шаг 1. HTML

В разметке нет ничего сложного-буквы помещаем в элемент span, но поскольку мы будем использовать самогенерируемый контент, то воспользуемся data-attribute.

Так же, мы используем специальную сеточную систему, где буквы поместим в элементы списка. У каждого элемента будет специальный класс.

Создаем алфавитный указатель для сайта на CSS | RUDEBOX

Шаг 2. CSS

Начинаем с оформления самой нижней части. Применяем специальные свойства для симуляции 3d:

Заметьте, что span-контейнеру задаём position:relative, в то время как псевдо-элементам absolute. Для клонирования буквы, используем свойство content, извлекая значение из атрибута data-attribute.

Теперь нам необходимо добавлять трансформации. Давайте рассмотрим пример буквы, которая будет раскрываться вправо, используя псевдо-элемент left: и свойство transform-origin:

Теперь добавим 3D поворот по оси Y псевдо-элементу :after; так же меняем размер тени и добавляем небольшой наклон.

Изменяя параметры transform-origin можем получить другой анимационный эффект. Вот пример анимации снизу:

Вот и все. Готово!

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.

Читайте также: