Jeśli macie ochotę nieco urozmaicić menu na Waszym blogu to trick, który prezentuję jest właśnie dla Was. Delikatnie bujające się to w lewo to w prawo menu ożywi każdą stronkę, a odwiedzający z pewnością będą zadowoleni z interesującego efektu. Z pewnością zachęci Was również to, że przy tworzeniu menu nie zagłębiałam się w tajniki HTMLa, a wykonać taki design dla kart można w zwyczajnym arkuszu CSS. :)
EFEKT:
Zaczynamy od otworzenia profilu naszego bloga, następnie wybieramy kolejno szablon > dostosuj > zaawansowane > dodaj arkusz CSS i wklejamy poniższy kod:
Jak zwykle zachęcam do zostawiania komentarzy. Jeśli skorzystacie z moich instrukcji nie zapomnijcie zapoznać się z zasadami i zostawienia linka do swoich dzieł w pobieralni! ^^
/*kod poniżej usuwa styl list, przy szablonie rewelacja nie powinien być potrzebny*/
#PageList1 ul li {
list-style-type: none;
margin-left: -20px;
}
/*zaczynamy od zmienienia koloru i szerokości pudełka naszych stron*/
#PageList1 {
width: 200px; /*szerokość gadżetu*./
background: #2a2a2a; /*kolor tła gadżetu*/
}
/*dodajemy daszek!*/
#PageList1::before {
border-bottom: 40px solid #2a2a2a; /*gdzie 40px to wysokość daszka, a #2a2a2a to jego kolor*/
border-left: 100px solid transparent;
border-right: 100px solid transparent; /*gdzie border-left (100px) + border-right (100px) = szerokość tła*/
width: 0;
height: 0;
content: "";
display: block;
position: absolute;
bottom: 100%;
}
/*dodajemy wygląd stron przed najechaniem na nie kursorem*/
#PageList1 a:link, #PageList1 a:visited, #PageList1 a:active {
text-decoration: none; /*usuwamy podkreślenie spod linków*/
font-family: Arial; /*czcionka*/
font-weight: normal; /*waga czcionki*/
font-size: 11px; /*wielkość czcionki*/
display: block;
text-align: center; /*wyśrodkowanie tekstu w kartach*/
padding: 5px;
background: #78b32f; /*tło stron*/
margin-top: -10px;
margin-left: 8px;
margin-right: 8px;
margin-bottom: 5px;
color: white; /*kolor czcionki*/
text-transform: uppercase; /*wielkie literki w stronach */
transition: 0.5s; /*czas animacji*/
}
/*dodajemy efekty stron po najechaniu na nie kursory*/
#PageList1 a:hover {
box-shadow: inset 200px 0px 0px #135200; /*gdzie 200px to długość cienia, który przykrywa tło po najechaniu myszką, a #135200 to kolor tego cienia*/
transition: 0.5s; /*czas animacji*/
}
/*zmieniamy wygląd nagłówka gadżetu*/
#PageList1 h2 {
margin-bottom: 15px; /*odległość tytułu gadżetu od jego zawartości*/
color: silver; /*kolor nagłówka*/
font-family: Arial; /*czcionka w nagłówku*/
text-transform: uppercase; /*wielkie litery w nagłówku*/
text-align: center; /*wyśrodkowanie nagłówka*/
font-size: 25px; /*wielkość czcionki*/
}
/*rozbujajmy gadżet! nie zmieniajcie nic poniżej ;)*/
#PageList1 {
-moz-animation: 6s infinite hustu;
-moz-transform-origin: center top;
-webkit-animation:hustu 6s infinite;
-webkit-transform-origin: top;
}
@-moz-keyframes hustu {
0%{-moz-transform:rotate(-5deg)}
50%{-moz-transform:rotate(5deg)}
100%{-moz-transform:rotate(-5deg)}
}
@-webkit-keyframes hustu {
0%{-webkit-transform:rotate(-5deg)}
50%{-webkit-transform:rotate(5deg)}
100%{-webkit-transform:rotate(-5deg)}
}
