Animowana data wpisu

7 kwietnia 2017


Dzisiaj mam dla Was kolejny wpis ze stylem dla dat. Animowana data - po najechaniu myszki może nam się zmienić kolor tła, kształt daty lub font. Taki efekt uzyskacie za pomocą kodu CSS.

1. Przechodzimy do motyw - dostosuj - zaawansowane - dodaj arkusz CSS
2. Wklejamy kod:

STYL 1

h2.date-header span {
background-image: url(LINK DO OBRAZKA)
width: 50px;
cursor:pointer;
padding: 20px 8px;
color: #fff;
font-family: Open Sans;
text-align:center;
letter-spacing:2px;
font-size:7.5px;
text-transform:uppercase;
z-index:5;
position: absolute;
top: -15px;
left: -75px;
box-shadow: #fff -3px -3px 0px inset ;
border-radius: 0px 90px 90px 90px ;
transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
}
h2.date-header span:hover {
font-family: Open Sans;
box-shadow: inset 0px 20px 0px #a64d79 , inset 0px -50px 0px #a64d79;
color: #fff ;
}


Zobacz efekt


STYL 2

h2.date-header span {
background: #a64d79;
width: 50px;
cursor:pointer;
padding: 20px 8px;
color: #fff;
font-family: Open Sans;
text-align:center;
letter-spacing:2px;
font-size:7.5px;
text-transform:uppercase;
z-index:5;
position: absolute;
top: -15px;
left: -75px;
border-radius: 90px 90px 90px 90px ;
transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
}
h2.date-header span:hover {
font-family: Open Sans;
box-shadow: inset 30px 0px 0px #d5a6bd , inset -40px 0px 0px #d5a6bd;
color: #fff ;
}

Zobacz efekt


Link do obrazka, który będzie pełnił rolę tła/Kolor tła
Szerokość
Marginesy wewnętrzne
Kolor fontu
Rodzaj fontu
Położenie tekstu
Odstęp między literami
Wielkość fontu
Transformacja tekstu
Położenie - góra
Położenie - lewa strona
Cienie
Zaokrąglone rogi
Font po najechaniu na niego myszką
Kolor tła po najechaniu myszką
Kolor fontu

4 komentarze:

  1. zajrzałam z ciekawości, co i jak :) ostatnio wprowadziłam trochę poprawek na blogu i jak na razie jestem zadowolona, nic nie zmieniam :)

    OdpowiedzUsuń
  2. Przydatna instrukcja, jednak wolimy wiedzieć kiedy był dodany wpis, nie tylko u siebie ale na innych blogach :)

    OdpowiedzUsuń
  3. Fajna sprawa; od razu ciekawiej się robi na blogu:)

    OdpowiedzUsuń
  4. Tutaj cały czas data jest - więc wszystko będzie widać :)

    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