Делаем индивидуальные стили для тега <hr> - Справочник CSS3 | Делай сайт
Приветствую Вас, Гость! Регистрация
Георгиевская ленточка
Четверг, 08.12.2016
Главная » Справочник CSS3 » Полезные статьи


2D & 3D ТрансформацияСвойства контента
Свойства импортаСвойства углов
Свойства границСвойства анимации
ПсевдоклассыПсевдоэлементы
Свойства размераСвойства контура
Свойства переходаСвойства печати
Свойства тениСвойства отступов
Свойства текстаСвойства колонок
Свойства полейПозиционирование
Свойства интерфейсаТипы значений
Полезные статьиСвойства списка
Свойства шрифтаСвойства таблицы
Свойства фонаВендорные префиксы



Адаптивный сайт - aTmpl


Делаем индивидуальные стили для тега <hr>

Применяем различные стили для тега <hr>




Можно преобразить применение тега <hr> придав ему вид с помощью свойств CSS3 и применением изображений.Для установки выбранного стиля вставьте код в таблицу стилей сайта,для применения в коде используйте вариант написания тега с идентификатором как указано в примерах.Вы можете изменить цвета по своему усмотрению,ниже находится редактор HTML в котором можно поэкспериментировать с изменениями.Для проверки кода в редакторе Вам потребуется установить код стилей внутри тега <style>Здесь код стиля</style>,а код тега устанавливаем ниже.Иначе проверку нельзя будет осуществить.Если Вам не понятна работа свойства или тега воспользуйтесь поиском сайта введя в него название интересующего элемента.




Варианты стилей и примеры к ним

Пример применения стиля №1

hr#a {
clear: both;
padding: 0;
margin: 0 0 1em;
height: 5px;
background:transparent url("http://delaisait.ucoz.ru/images/post_infobox_bg.gif") repeat-x 0 0;
}

Пример применения тега №1

<hr id="a">

Пример №1 в действии



Пример применения стиля №2

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

Пример применения тега №2

<hr id="b">

Пример №2 в действии



Пример применения стиля №3

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

Пример применения тега №3

<hr id="c">

Пример №3 в действии



Пример применения стиля №4

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

Пример применения тега №4

<hr id="d">

Пример №4 в действии



Пример применения стиля №5

hr#e {
border: 0;
border-bottom: 1px dotted #ccc;
background: #252525;
}

Пример применения тега №5

<hr id="e">

Пример №5 в действии



Пример применения стиля №6

hr#f {
height: 12px;
border: 0;
box-shadow: inset 0 12px 12px -12px rgba(0,0,0,0.5);
}

Пример применения тега №6

<hr id="f">

Пример №6 в действии



Пример применения стиля №7

hr#g {
border: 0;
height: 0;
box-shadow: 0 0 10px 1px black;
}

Пример применения тега №7

<hr id="g">

Пример №7 в действии



Пример применения стиля №8

hr#h {
border: 0;
height: 0;
border-top: 1px solid rgba(0, 0, 0, 0.1);
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

Пример применения тега №8

<hr id="h">

Пример №8 в действии



Пример применения стиля №9

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

Пример применения тега №9

<hr id="i">

Пример №9 в действии



Пример применения стиля №10

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

Пример применения тега №10

<hr id="k">

Пример №10 в действии




Пример применения стиля №11

hr#l {
background:url(http://delaisait.ucoz.ru/img/spiral-shape.png) no-repeat top center;
height:42px;
border:none !important;
}

Пример применения тега №11

<hr id="l">

Пример №11 в действии


Пример применения стиля №12

hr#m {
margin:0px;
padding:0px;
background:url('http://delaisait.ucoz.ru/images/hr12.gif') no-repeat center 50%;
background-color:none;
width:100%;
height:30px;
border:0pt none;
clear:both;
}

Пример применения тега №12

<hr id="m">

Пример №12 в действии



Проверьте работу стиля в HTML редакторе

Для проверки стиля в редакторе поместите стиль внутри тега <style>Здесь</style>,а код тега поместите ниже кода стиля.




Русские шрифты





Категория: Полезные статьи | Добавил: IZOTOP (21.08.2012) | Автор: Меренков Михаил W
Просмотров: 5680 | Теги: hr, стиль для hr, style for hr, стиль для полоски | Рейтинг: 5.0/1

Вопросов / Советов / Предложений - относящихся к материалу: 0

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]