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

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

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

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

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

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

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

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

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

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

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

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

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