Animowana data wpisu

piątek, 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

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