Ленточное меню на CSS3
Используем переходы CSS3 и псевдо-классы CSS2 для создания анимированной навигационной ленты с минимальной разметкой.
Поддержка браузерами
IE8 и IE9 не поддерживают переходы CSS3, поэтому наведение курсора мыши на пункт меню не будет анимироваться в указанных браузерах. IE7 плохо поддерживает псевдо-элементы :before
и :after
, поэтому лента не будет иметь раздвоенных концов и загибов в активном состоянии. При необходимости псевдо-элементы можно заменить другой разметкой.
Во всех остальных браузерах меню отображается и работает отлично.
HTML
<div class='ribbon'> <a href='#'><span>Главная</span></a> <a href='#'><span>О нас</span></a> <a href='#'><span>Сервисы</span></a> <a href='#'><span>Кнотакт</span></a> </div>
Раздвоенные концы и сгибы будут формироваться с помощью псевдо-элементов, поэтому разметка может остается чистой.
CSS
Раздвоенные концы
.ribbon:after, .ribbon:before { margin-top:0.5em; content: ""; float:left; border:1.5em solid #fff; } .ribbon:after { border-right-color:transparent; } .ribbon:before { border-left-color:transparent; }
Здесь псевдо-элементы :before
и :after
используются для создания пустого элемента с тонкой рамкой. Рамка имеет одну сторону прозрачной. Таким образом элемент выглядит с удаленной треугольной секцией, что, в конечном итоге, формирует раздвоенный конец.
Ссылки
.ribbon a:link, .ribbon a:visited { color:#000; text-decoration:none; float:left; height:3.5em; overflow:hidden; }
Ссылки и раздвоенные концы смещаются влево, так что они выстраиваются в одну линию. Скрытие выступающих элементов прячет складки, которые располагаются ниже элементов span
.
Анимированные складки
.ribbon span { background:#fff; display:inline-block; line-height:3em; padding:0 1em; margin-top:0.5em; position:relative; -webkit-transition: background-color 0.2s, margin-top 0.2s; /* Saf3.2+, Chrome */ -moz-transition: background-color 0.2s, margin-top 0.2s; /* FF4+ */ -ms-transition: background-color 0.2s, margin-top 0.2s; /* IE10 */ -o-transition: background-color 0.2s, margin-top 0.2s; /* Opera 10.5+ */ transition: background-color 0.2s, margin-top 0.2s; } .ribbon a:hover span { background:#FFD204; margin-top:0; } .ribbon span:before { content: ""; position:absolute; top:3em; left:0; border-right:0.5em solid #9B8651; border-bottom:0.5em solid #fff; } .ribbon span:after { content: ""; position:absolute; top:3em; right:0; border-left:0.5em solid #9B8651; border-bottom:0.5em solid #fff; }
Оригинальный трюк для вертикального центрирования текста внутри элемента заключается в установке высоты строки текста и удалении вертикальных отступов. Таким образом сохраняется фиксированная высота и центрирование текста, даже при изменении шрифта, его размера или начертания.
Верхнее поле дает пространство для анимации элемента span,
оставаясь внутри ссылки. Элемент span
имеет относительное позиционирование, поэтому может быть опорой для абсолютно позиционированных псевдо-элементов :before
и :after
.
Переходы CSS3 анимируют изменение состояния при наведении курсора мыши на элемент span
. Переходы являются экспериментальными особенностям и не включены в спецификацию CSS3. Поэтому, каждый браузер использует свои префиксы для них.
Псевдо-элементы :before
и :after
создают завернутые грани при наведении курсора мыши на ссылку. Они позиционируются абсолютно под элементами span
и будут скрываться в обычном состоянии. Псевдо-элементы содержат только нижнюю и левую или правую части рамки. Части рамки тонкие, длинные (0.5 x 0.5) и располагаются рядом, поэтому они формируют треугольники. Нижняя часть рамки будет иметь такой же цвет, как и лента, а левая часть - цвет подвернутой стороны.
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/Kg2pt1T8mIY/lessons.php
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-09-30 » Как быстро запустить Laravel на Windows
- 2024-09-25 » Next.js
- 2024-09-05 » OpenAI рассказал, как запретить ChatGPT использовать содержимое сайта для обучения
- 2024-08-28 » Чек-лист: как увеличить конверсию интернет-магазина на примере спортпита
- 2024-08-01 » WebSocket
- 2024-07-26 » Интеграция с Яндекс Еда
- 2024-07-26 » Интеграция с Эквайринг
- 2024-07-26 » Интеграция с СДЕК
- 2024-07-26 » Интеграция с Битрикс-24
- 2024-07-26 » Интеграция с Travelline
- 2024-07-26 » Интеграция с Iiko
- 2024-07-26 » Интеграция с Delivery Club
- 2024-07-26 » Интеграция с CRM
- 2024-07-26 » Интеграция с 1C-Бухгалтерия
- 2024-07-24 » Что такое сторителлинг: техники и примеры
- 2024-07-17 » Ошибка 404: что это такое и как ее использовать для бизнеса
- 2024-07-03 » Размещайте прайс-листы на FarPost.ru и продавайте товары быстро и выгодно
- 2024-07-01 » Профилирование кода в PHP
- 2024-06-28 » Изучаем ABC/XYZ-анализ: что это такое и какие решения с помощью него принимают
- 2024-06-17 » Зачем вам знать потребности клиента
- 2024-06-11 » Что нового в работе Яндекс Метрики: полный обзор обновления
- 2024-06-11 » Поведенческие факторы ранжирования в Яндексе
- 2024-06-11 » Скорость загрузки сайта: почему это важно и как влияет на ранжирование
- 2024-05-27 » Подборка сервисов для расшифровки аудио в текст
- 2024-05-27 » PostgreSQL 16. Изоляция транзакций. Часть 2
- 2024-05-06 » Как настраивать конверсионные стратегии: работа над ошибками
- 2024-04-22 » Комментирование кода и генерация документации в PHP
- 2024-04-22 » SEO в России и на Западе: в чем основные отличия
- 2024-04-22 » SEO для международного масштабирования
- 2024-04-22 » Как использовать XML-карты для продвижения сайта
Секрет быть несчастным: иметь время занудствовать на тему, счастлив ты или нет Шоу Джордж Бернард - (1856-1950) - английский писатель. В своем творчестве ниспровергал догматизм и предвзятость, традиционность представлений |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.