 |
Категория: CSS |
| Название: CSS ленты | |
| Дата добавления: 27-04-2012 | |
| Раз просмотрено: 735 | |
| Комментарии: 0 | |
Рейтинг:   (1 голос) |
CSS ленты
Наверное, вы уже знаете что такое CSS лента и как она выглядит. В наше время, CSS ленты — это модный тренд в веб-дизайне. В этой статье вы научитесь создавать CSS ленты без изображений, и минимальной HTML разметкой.
Зачем нужны CSS ленты?
C одной стороны, вы можете просто использовать изображения для лент, но использование CSS для их создания несет следующие преимущества:
- Отсутствие изображений — отсутствие дополнительных HTTP-запросов.
- Гибкость.
- Легко изменить цвет, размер и т.д..
Структура CSS ленты
Для создания CSS ленты, мы будем использовать минимальную HTML разметку — например, единственный тек заголовка. Возьмем для этих целей тег <h1>. Теперь добавим к нему необходимые CSS свойства — отступы, градиент и т.д. Треугольники на ленте создаются с помощью псевдо-элементов.
CSS лента
CSS
Для создания таких CSS лент, как на изображении, используйте следующий код:
h1 {
font-family: Tahoma, Geneva, sans-serif;
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;
}
Поддержка браузерами
Internet Explorer 6 и 7 не поддерживают псевдо-элементы. Но если вы хотите добиться кроссбраузерности и для них, просто замените :before и :after HTML элементами <span>. Internet Explorer старше 7 версии, Firefox, Opera, Google Chrome и Safari отлично отобразят такую CSS ленту. Но будут некоторые различия из-за отсутствия или неполной поддержки CSS3.
Это интересно: «Добавление Favicon к ссылкам».
Ваш комментарий будет первым.