Data jest częścią posta, na którą większość osób zwraca uwagę podczas czytania notki. Wchodząc na ciekawie zbudowanego bloga, który zachowuje pełną estetykę widzisz, iż wszystko jest dopracowane. Jednak najczęściej pozostawionym w samowystarczalnym wizerunku jest selektor daty. Autor nie powinien przegapić tak małego, ale jakże istotnego elementu bloga. Dlatego postanowiłam pokazać kilka prostych sposobów na design powyżej wymienionego elementu.
Zacznijmy od najprostszej części kodu jaką jest selektor
h2.date-header span {
1
}
Skopiuj kod z okienka nr 1 i wklej w miejsce jedynki.
Mam nadzieję, że sprawnie Ci poszło, jeżeli nie - napisz w komentarzu w czym tkwi problem - pomogę :)
A jeżeli masz chwilę wolnego czasu to zapoznaj się z regulaminem, który znajduje się w zakładce ,,grafika''.
|
W Y G L Ą D |
||
|---|---|---|
| K O D | 1
display:block;
width:60px;
font-family: oswald;
font-size:8px;
letter-spacing:1px;
text-transform:uppercase;
color:#eee;
background-color:#444444;
padding: 5px 5px;
text-align:center;
transition:0.5s;
border-top: 20px solid #ff91bd;
| |
|
W Y G L Ą D |
||
|---|---|---|
| K O D | 1
background: #d4e398;
display: block;
font-size: 12px;
text-transform: uppercase;
color: #fff;
text-align: center;
border-radius: 0px 20px 20px 0px;
| |
|
W Y G L Ą D |
||
|---|---|---|
| K O D | 1
padding: 5px;
display: block;
text-align: center;
text-transform: uppercase;
background: #444;
color: #eee;
border-bottom: 1px dashed #eee;
| |
Te zielone najlepsze! :D
OdpowiedzUsuńDziękuję! Ostatnie użyłam na moim blogu tylko, że zmieniłam kolor. ;)
OdpowiedzUsuńProszę bardzo! Cieszę się, że kody się przydają :)
OdpowiedzUsuńMam pytanie. :) Kiedy będziesz przyjmowała zamówienia na szablon? :)
OdpowiedzUsuńMyślę, że od czerwca, kiedy w szkole będą luzy. Na pewno poinformuję o tym w poście :)
OdpowiedzUsuńDzięki wielkie! Skorzystałam z kodu, ale go trochę zmodyfikowałam (kolor, wielkość). Mam nadzieję, że pozwalasz na modyfikację kodów :P Jeżeli nie oczywiście usunę to co sama zmieniłam, w końcu to Twój kod. :)
OdpowiedzUsuńOczywiście kody można modyfikować, ja dodaję jedynie przykłady - każdy może bawić się kodami według własnego uznania ;)
UsuńTo super ;)
OdpowiedzUsuńTen komentarz został usunięty przez autora.
OdpowiedzUsuńA jak zrobić datę w kółku?
OdpowiedzUsuń