notatnik.net.pl

CSS: style dla elementu <hr>

Czwartek, 18.07.2013

Przykłady stylów CSS dla elementu <hr> w HTML

Linia hr z gradientem:
hr {
border: 0;
height: 1px;
background: #00c;
background-image: -webkit-linear-gradient(left, #f03, #00c, #f03);
background-image: -moz-linear-gradient(left, #f03, #00c, #f03);
background-image: -ms-linear-gradient(left, #f03, #00c, #f03);
background-image: -o-linear-gradient(left, #f03, #00c, #f03);
}
Linia hr z przezroczystością:
hr {
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));
}
Linia hr z cieniem:
hr {
height: 17px;
border: 0;
box-shadow: inset 0 12px 12px -12px rgba(0,0,0,0.5);
}

Zobacz też:

Osadzanie CSS w dokumencie HTML5CSS: Wycentrowanie zdjęcia w pionieCSS: Jak zrobić wcięcie pierwszego wiersza w akapicie?CSS: zaokrąglona ramka