Prosty CSS - dwa style dla dat

poniedziałek, 12 grudnia 2016

W dzisiejszym wpisie pokażę Wam, jak w prosty sposób za pomocą CSS zmienić wygląd daty wpisu. Pokażę Wam dwa style, które są proste i idealnie wpasują się w każdy szablon.

Styl pierwszy

.date-header span {
background-color: #fff;
letter-spacing: 2px;
padding: 0 20px;
position: relative;
text-transform: uppercase;
top: -8px;
}
h2.date-header {
border-top: 1px solid #999;
font: 10px Open Sans;
letter-spacing: 2px;
text-align: center;
}

Analiza kodu 

Tło daty
Odstępy między literami 
Marginesy wewnętrzne 
Styl tekstu (ustawiony na drukowane litery, wpisując none, pozbywamy się tego efektu)
Położenie daty (góra, dół) 
Grubość, rodzaj i kolor podkreślenia 
Rodzaj i wielkość fontu 
Odstęp między literami
Położenie daty

Styl drugi 

.date-header span {
background-color: #fff;
border: 1px solid #999;
letter-spacing: 2px;
padding: 10px 10px;
position: relative;
text-transform: uppercase;
top: -7px;
}
h2.date-header {
background: none repeat scroll 0 0 #999;
height: 1px;
font: 10px Open Sans;
text-align: center;
}

Analiza kodu 

Kolor tła
Grubość, rodzaj, kolor obramowania daty
Odstęp pomiędzy literami
Marginesy wewnętrzne 
Styl tekstu 
Położenie daty (góra, dół)
Kolor linii 
Grubość linii
Wielkość i rodzaj fontu 
Położenie daty

Wszystkie pogrubione i kolorowe wartości są zmienne.

Jeśli spodobał Ci się wpis, przekaż go dalej :)