Поиск
Подписаться
Разное

Валидный XHTML 1.0 Transitional

Валидный RSS

CSS ленты Категория: CSS
Название: CSS ленты
Дата добавления: 27-04-2012
Раз просмотрено: 735
Комментарии: 0
Рейтинг: * * · · · · · · · · (1 голос)

CSS ленты

Наверное, вы уже знаете что такое CSS лента и как она выглядит. В наше время, CSS ленты — это модный тренд в веб-дизайне. В этой статье вы научитесь создавать CSS ленты без изображений, и минимальной HTML разметкой.

Зачем нужны CSS ленты?

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

Структура CSS ленты

Для создания CSS ленты, мы будем использовать минимальную HTML разметку — например, единственный тек заголовка. Возьмем для этих целей тег <h1>. Теперь добавим к нему необходимые CSS свойства — отступы, градиент и т.д. Треугольники на ленте создаются с помощью псевдо-элементов.

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 к ссылкам».

Понравился материал? Расскажи о нем всем:
Оцените эту статью:
Прокомментируйте:
Ваше имя:

Ваш комментарий будет первым.