Ленточный баннер на чистом CSS

Ленточный баннер на чистом CSS

От автора: Время от времени я ставлю себе задачи по разработке, которые могут быть не вполне реалистичными, для того, чтобы увидеть смогу ли я их выполнить. Это помогает мне расти как разработчику, по двум причинам – мне нужно проявлять творческий подход и потому, что это, как правило, требует каких-то исследований. Сегодня задача стоит: создать ленточный баннер на чистом css и html. Никаких картинок.

Создание визуальных элементов без картинок – это не только хорошая идея, но и быстро становится необходимостью. С ростом популярности экранов «ретина» и им подобным, растровые изображения выходят из использования в интерфейсе, потому что они ужасно выглядят на экранах с высоким разрешением. В некоторых ситуациях без изображений трудно обойтись и SVG (масштабируемая векторная графика) быстро становится основным форматах в таких случаях. Однако, там, где мы можем избежать использования картинок как таковых, мы не только получаем красивый, четко очерченный элемент, но и избегаем лишнего запроса на сервер. Так что давайте же с ними разберемся.

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

CSS псевдо-элементы (в частности :before и :after)

CSS3 элементы, такие как box-shadow и box-sizing

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Абсолютное и относительное позиционирование дивов

Вот так выглядит разметка.

В том, что вы видите выше, нет ничего сложного. Див с классом «.content-box» содержит весь контент. В диве с идентификатором «#ribbon-container» находится ссылка и позволяет нам задать позиционирование и часть тени баннеру. Ссылка – основной элемент вашего баннера.

Все понятно? Ну что ж, перейдем к CSS.

Во-первых, мы используем универсальный селектор, чтобы сбросить стили, а также добавить box-sizing:border-box к нашей странице. Это позволит задавать внешние и внутренние отступы (margin, padding) и ширину и не вести расчеты по изменению размеров элементов.

Затем мы добавляем визуальные стили, к элементу, содержащему ленту, и самой ленте. Снова, ничего сложного.
Важные вещи, на которые стоит обратить внимание, это те, что относятся к псевдоэлементам :before и :after. Это те техники, которые помогают нам избежать использования изображений в нашей ленте. И на этом все. Ленточный баннер на чистом CSS и никаких картинок.

Здесь можно посмотреть демо.

Источник: http://www.designcouch.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree