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