Если Вы пользуетесь горизонтальными линиями (т.е. тегами <hr />), при верстке сайта, то эта статья для Вас! Конечно при желании можно придумать и реализовать, достаточно интересные линии, которые будут подходить именно Вашему проекту и вписываться в общий дизайн! Вот несколько простых css правил для горизонтальных линий.
1 Вариант:
hr.style-one {
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.style-two { 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.style-three { border : 0 ; border-bottom : 1px dashed #ccc ; background : #999 ; } |
4 Вариант:
hr.style-four { height : 12px ; border : 0 ; box-shadow: inset 0 12px 12px -12px rgba( 0 , 0 , 0 , 0.5 ); } |
5 Вариант:
hr.style-five { border : 0 ; height : 0 ; /* Firefox... */ box-shadow: 0 0 10px 1px black ; } hr.style-five:after { content : "\00a0" ; } |
6 Вариант:
hr.style-six { border : 0 ; height : 0 ; border-top : 1px solid rgba( 0 , 0 , 0 , 0.1 ); border-bottom : 1px solid rgba( 255 , 255 , 255 , 0.3 ); } |
7 Вариант:
hr.style-seven { height : 30px ; border-style : solid ; border-color : black ; border-width : 1px 0 0 0 ; border-radius: 20px ; } hr.style-seven:before { display : block ; content : "" ; height : 30px ; margin-top : -31px ; border-style : solid ; border-color : black ; border-width : 0 0 1px 0 ; border-radius: 20px ; } |
8 Вариант:
hr.style-eight { padding : 0 ; border : none ; border-top : medium double #333 ; color : #333 ; text-align : center ; } hr.style-eight:after { content : "§" ; display : inline- block ; position : relative ; top : -0.7em ; font-size : 1.5em ; padding : 0 0.25em ; background : white ; } |