Создание простых лент с помощью CSS

В данном уроке мы рассмотрим процесс создания замечательных CSS лент которые будут иметь весьма привлекательный 3D эффект. При этом мы будем использовать только приемы CSS. Эффект 3D ленты это модный и красивый прием оформления заголовков. Так же ее можно использовать в главном меню навигации, фона, заголовка стиля, или любой другой части веб-дизайна. В любом случае, этот маленький и простой способ станет отличным дополнением для вашего сайта. Вот так все выглядит в примерах..

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

Преимущества создания ленты на CSS:

• Нет изображений – нет HTTP запросов
• Гибкость
• Простота обновления: цвет, размер…

Теперь давайте добавим элемент, который будет нашей лентой. Для этого нам понадобится только один элемент, такой как h1:

Помните, я говорил о значении внутреннего отступа в 20px? Для того чтобы создать ленту, нам необходимо, чтобы она выходила за рамки контейнера:

Для создания углов воспользуемся псевдо элементами.

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

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