В моем последнем посте, Pure CSS3 Speech Bubbles Without Images , мы увидели, как псевдоэлементы: before и: after могут использоваться для создания различных эффектов. В этом посте мы будем использовать похожие приемы для создания различных лент.
Эффекты ленты в моде. Большинство дизайнеров используют позиционированные изображения, но мы создадим их без использования граничных эффектов и одного тега h2 :
<h2>My Heading</h2>
Давайте добавим немного стиля и сделаем так, чтобы он перекрывал содержащий элемент:
/* containing element */ #page { width: 500px; padding: 50px; margin: 0 auto; background-color: #fff; border: 1px solid #333; } h2 { position: relative; width: 50%; font-size: 1.5em; font-weight: bold; padding: 6px 20px 6px 70px; margin: 30px 10px 10px -70px; color: #555; background-color: #999; text-shadow: 0px 1px 2px #bbb; -webkit-box-shadow: 0px 2px 4px #888; -moz-box-shadow: 0px 2px 4px #888; box-shadow: 0px 2px 4px #888; }
В этом примере наша #page имеет отступы 50px и границу 1px. Заголовок имеет левое поле -71px, поэтому он перекрывает край на 20px. Обратите внимание, что мы также используем position: relative так что другие элементы ленты могут быть расположены по мере необходимости.
Теперь нам нужно создать сложенную часть ленты, которая идет «позади» страницы. Как мы видели в предыдущем посте , мы можем использовать эффекты границ для создания любого типа треугольной формы на псевдоэлементе: after с нулевой шириной и высотой:
h2:after { content: ' '; position: absolute; width: 0; height: 0; left: 0px; top: 100%; border-width: 5px 10px; border-style: solid; border-color: #666 #666 transparent transparent; }того, какh2:after { content: ' '; position: absolute; width: 0; height: 0; left: 0px; top: 100%; border-width: 5px 10px; border-style: solid; border-color: #666 #666 transparent transparent; }
Это выглядит великолепно, и это может быть все, что вам нужно. Но клиент любит чрезмерно оформленные страницы, поэтому давайте пойдем дальше. Во-первых, мы могли бы применить форму флага к правому краю, наложив белый треугольник, примененный к псевдоэлементу: before:
h2:before { content: ' '; position: absolute; width: 0; height: 0; right: -2px; top: 0px; border-color: transparent #fff transparent transparent; }темh2:before { content: ' '; position: absolute; width: 0; height: 0; right: -2px; top: 0px; border-color: transparent #fff transparent transparent; }
Это хорошо, но как насчет эффекта отогнутой ленты на левом краю? Нет проблем:
h2:before { content: ' '; position: absolute; width: 30px; height: 0; left: -30px; top: 12px; border-width: 20px 10px; border-style: solid; border-color: #999 #999 #999 transparent; }темh2:before { content: ' '; position: absolute; width: 30px; height: 0; left: -30px; top: 12px; border-width: 20px 10px; border-style: solid; border-color: #999 #999 #999 transparent; }
Цвет границы псевдоэлементов во многом соответствует цвету фона h2, поскольку он фактически отображается над заголовком. Изменение z-индекса не работает на псевдоэлементах, если родительский элемент расположен.
Пожалуйста, посмотрите демонстрационную страницу для примера, который показывает все три стиля ленты. Он работает как положено в IE8, IE9, Firefox, Chrome, Safari и Opera. IE6 и IE7 изящно деградируют и показывают главное перекрывающееся название. Весь код CSS содержится в источнике HTML.
Кому нужен фотошоп ?!
И если вам понравилось читать этот пост, вы полюбите Learnable ; место, чтобы узнать новые навыки и приемы у мастеров. Участники получают мгновенный доступ ко всем электронным книгам и интерактивным онлайн-курсам SitePoint, таким как HTML5 и CSS3 для реального мира .
Комментарии к этой статье закрыты. У вас есть вопрос о CSS3? Почему бы не спросить об этом на наших форумах ?