3# rozhuśtane menu [instrukcja]

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:

/*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)}
}
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! ^^

10 komentarzy:

  1. Skąd wytrzasnęłaś efekt kołysania? :o

    OdpowiedzUsuń
  2. WOW *.* Wielkie wielkie WOW. Bardzo fajne menu.. ale jak to możliwe ?? xDD

    OdpowiedzUsuń
    Odpowiedzi
    1. wszystko jest możliwe jeśli uwierzysz w magię! xD

      Usuń
  3. Zielony Kociaku! Lojalnie informuję, że użyłam owej instrukcji na swoim blogu, tak samo jak jednej, należącej do serii dyskretnych!
    O tu, tu, tu: http://glebokioff.blogspot.com/

    OdpowiedzUsuń
  4. Po prostu magia; faktycznie potrafisz czarować! :)
    Kiedy po raz pierwszy ujrzałam takie menu (bodajże na blogu wspomnianym w komentarzu Mayako) oniemiałam z zachwytu. Wspaniała robota, Zielony Kociaku!
    Zaiste, jesteś jedną z najwybitniejszych graficzek w naszej polskiej blogosferze i za każdym razem jedynie coraz bardziej utwierdzasz mnie w tym przekonaniu. :D
    Ty mnie chyba nigdy nie przestaniesz zaskakiwać.

    Pozdrawiam Cię serdecznie!

    OdpowiedzUsuń
  5. Ten komentarz został usunięty przez autora.

    OdpowiedzUsuń
  6. U mnie nie da się zmienić koloru tła :( ?

    OdpowiedzUsuń
    Odpowiedzi
    1. Nie tła tylko tła na kartach menu. zielony mi nie pasuje :p

      Usuń
  7. Zielony Kociaku ! Informuje, ze uzylam tej instrukcji, a takze rozwijane informacje o tu http://mimidesignn.blogspot.ie/ i creditu nie daje (dam na podstronie swojej, bo to nie ostatni raz to uzlam!) poniewaz jest to mockup strona na potrzeby szkoly! Mam nadzieje, ze nie bd z tym problemu.

    Ps; Jestes genialna!

    OdpowiedzUsuń

statystyka

Archiwum bloga

Obserwatorzy