Создание простых лент с помощью CSS
В данном уроке мы рассмотрим процесс создания замечательных CSS лент которые будут иметь весьма привлекательный 3D эффект. При этом мы будем использовать только приемы CSS. Эффект 3D ленты это модный и красивый прием оформления заголовков. Так же ее можно использовать в главном меню навигации, фона, заголовка стиля, или любой другой части веб-дизайна. В любом случае, этот маленький и простой способ станет отличным дополнением для вашего сайта. Вот так все выглядит в примерах..
В этом уроке мы покажем вам, как создавать ленту средствами CSS, без всяких изображений и прочих лишних вещей.
Преимущества создания ленты на CSS:
- Нет изображений – нет HTTP запросов
- Гибкость
- Простота обновления: цвет, размер…
Теперь давайте добавим элемент, который будет нашей лентой. Для этого нам понадобится только один элемент, такой как h1:
Помните, я говорил о значении внутреннего отступа в 20px? Для того чтобы создать ленту, нам необходимо, чтобы она выходила за рамки контейнера:
1 2 3 4 |
h1 { margin: 0 -30px; /* top:0, right:-30px, bottom:0, left:-30px */ } |
Для создания углов воспользуемся псевдо элементами.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
h1{ text-align: center; position: relative; color: #fff; margin: 0 -30px 30px -30px; padding: 10px 0; text-shadow: 0 1px rgba(0,0,0,.8); background: #5c5c5c; background-image: -moz-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0)); background-image: -webkit-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0)); background-image: -o-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0)); background-image: -ms-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0)); background-image: linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0)); -moz-box-shadow: 0 2px 0 rgba(0,0,0,.3); -webkit-box-shadow: 0 2px 0 rgba(0,0,0,.3); box-shadow: 0 2px 0 rgba(0,0,0,.3); } h1:before, h1:after { content: ''; position: absolute; border-style: solid; border-color: transparent; bottom: -10px; } h1:before { border-width: 0 10px 10px 0; border-right-color: #222; left: 0; } h1:after { border-width: 0 0 10px 10px; border-left-color: #222; right: 0; } |
В конечном результате используя приведенный CSS код, можно добиться следующего результата:
Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.
Читайте также:
Опубликовал Cooper 19.11.2011 в 07:34, в категории CSS. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены. |