Prosty CSS - dwa style dla dat

12.12.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.

6 komentarzy:

  1. Super! Wykorzystałam kod nr.2 Uwielbiam Twoje porady dotyczące designu bloga ♥

    OdpowiedzUsuń
  2. Super! Cieszę się, że komuś się przydają moje instrukcje :)

    OdpowiedzUsuń
  3. Z całą pewnością wielu osobom!

    OdpowiedzUsuń
  4. Oba bardzo mi się podobają :)
    Pozdrawiam serdecznie!

    OdpowiedzUsuń

- Komentarze takie jak: spam, obserwacja za obserwacje, prośby o klikanie w banery etc. zostają usuwane - ZAPAMIĘTAJ! MÓJ BLOG TO NIE TABLICA OGŁOSZEŃ
- Uznaje tylko konstruktywną krytykę
- Każdy komentarz to motywacja dla mnie.
- Weryfikacja obrazkowa wyłączona