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

Валидный XHTML 1.0 Transitional

Валидный RSS

Необычные горизонтальные линии Категория: CSS
Название: Необычные горизонтальные линии
Дата добавления: 31-05-2012
Раз просмотрено: 2069
Комментарии: 1
Рейтинг: * * * * * * * * * * (2 голоса)

Необычные горизонтальные линии

В веб-дизайне нередко применяются горизонтальные линии для разделения частей контента, увеличения читаемости текста или в каких-либо иных дизайнерских целях. Горизонтальные линии создаются при помощи тега <hr />. Однако, стандартные горизонтальные линии слишком примитивны и не очень привлекательны. В этом уроке вы найдете семь способов украсить горизонтальные линии исключительно при помощи CSS. Эти варианты будут представлены от самого простого к самому сложному и необычному.

Самое главное в этих способах создания необычных горизонтальных линий — это полное отсутствие изображений, а также лишней HTML разметки. Все эти примеры создаются путем добавления стилей к тегу <hr />. Ничего кроме этого вы применять не будете, и это позволит нам добиться максимальной семантичности вашего кода и разметки. Ниже будут приведены изображения наших необычных горизонтальных линий, а под ними соответствующий CSS код.



Горизонтальная линиия №1

hr {
	border: 0;
	height: 1px;
	background: #333;
	background-image: -webkit-linear-gradient(left, #ССС, #333, #ССС); 
	background-image: -moz-linear-gradient(left, #ССС, #333, #ССС); 
	background-image: -ms-linear-gradient(left, #ССС, #333, #ССС); 
	background-image: -o-linear-gradient(left, #ССС, #333, #ССС); 
}



Горизонтальная линиия №2

hr {
	border: 0;
	height: 1px;
	background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, .75), rgba(0, 0, 0, 0)); 
	background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, .75), rgba(0, 0, 0, 0)); 
	background-image: -ms-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, .75), rgba(0, 0, 0, 0)); 
	background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, .75), rgba(0, 0, 0, 0)); 
}



Горизонтальная линиия №3

hr {
	border: 0;
	border-bottom: 1px dashed #CCC;
	background: #999;
}



Горизонтальная линиия №4

hr {
	height: 12px;
	border: 0;
	box-shadow: inset 0 12px 12px -12px rgba(0, 0, 0, .5);
}



Горизонтальная линиия №5

hr {
	border: 0;
	height: 0;
	box-shadow: 0 0 10px 1px #000;
}
hr:after {
	content: '\00a0';
}



Горизонтальная линиия №6

hr {
	height: 30px;
	border-style: solid;
	border-color: #000;
	border-width: 1px 0 0 0;
	border-radius: 20px;
}
hr:before {
	display: block;
	content: '';
	height: 30px;
	margin-top: -31px;	
	border-style: solid;
	border-color: #000;
	border-width: 0 0 1px 0;
	border-radius: 20px;
}



Горизонтальная линиия №7

hr {
	padding: 0;
	border: none;
	border-top: medium double #333;
	color: #333;
	text-align: center;
}
hr:after {
	content: '§';
	display: inline-block;
	position: relative; 
	top: -0.7em;  
	font-size: 1.5em;
	padding: 0 0.25em;
	background: #FFF;
}

Это интересно: «CSS фильтры».

Понравился материал? Расскажи о нем всем:
Оцените эту статью:
Прокомментируйте:
Ваше имя:
Гость  •  2012-06-01 18:27:36
мне понравилась с параграфом - я не знал, что можно контент вставлять прямо в <hr />