Ленточное меню на 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
Новые статьи и публикации
- 2025-03-14 » SPF-запись
- 2025-03-07 » SEO на маркетплейсах: как оптимизировать карточку товара для поисковой выдачи
- 2025-02-18 » Топ-10 бесплатных нейросетей для генерации изображений: лучшие ии генераторы 2024 года
- 2025-02-11 » Критическая уязвимость в 1С-Битрикс
- 2025-02-11 » Google Search Console: руководство для начинающих вебмастеров
- 2025-02-11 » Методы измерения результативности рекламных кампаний: плюсы и минусы
- 2025-02-11 » Тренды SEO в 2025 году
- 2025-02-10 » Свой Google в локалке. Ищем иголку в стоге сена
- 2025-01-29 » SEO — это комплексная работа. Шесть главных факторов ранжирования сайтов
- 2025-01-29 » Гайд для главной страницы e-commerce сайта: как оформить, чтобы повысить конверсию
- 2025-01-20 » Krea AI выпустила бесплатную функцию преобразования изображений в 3D-объекты — их можно вращать и вписывать в фотографии
- 2025-01-19 » Отзывы на Яндекс Картах: как пройти модерацию
- 2025-01-15 » Топ-6 лучших российских нейросетей, в которых можно генерировать тексты и изображения бесплатно и без VPN
- 2025-01-14 » 15 бесплатных способов узнать, чем интересуется ваша аудитория
- 2025-01-11 » Бездепозитные бонусы в казино за регистрацию с выводом: особенности и возможности получения
- 2025-01-09 » Новая модель LAM способна выполнять задачи в Word
- 2024-12-26 » Универсальный промпт для нейросети: как выжать максимум из ChatGPT, YandexGPT, Gemini, Claude в 2025
- 2024-11-26 » Капитан грузового судна, или Как начать использовать Docker в своих проектах
- 2024-11-26 » Обеспечение безопасности ваших веб-приложений с помощью PHP OOP и PDO
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-15 » Перенос сайта на WordPress с одного домена на другой
- 2024-11-08 » OSPanel 6: быстрый старт
- 2024-11-08 » Как установить PhpMyAdmin в Open Server Panel
- 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 » Интеграция с Яндекс Еда
Самое важное в каждом деле – пересилить момент, когда нам не хочется работать. И. Павлов |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.
Или напишите нам в WhatsApp
Или напишите нам в WhatsApp