15 kwietnia 2016

Dust in the Wind [46]



Cześć! Tak jak obiecałam, przychodzę do Was dziś z kodem na menu, które ostatnio użyłam w jednym szablonie. Mam nadzieję, że niczego nie pomyliłam i wytłumaczyłam w miarę jasno ☺ Notka miała się pojawić dużo wcześniej, ale nie miałam weny do tworzenia szablonów, dlatego dziś oddaję tylko zamówienie :<
Może macie jakieś pomysły, bo już nie wiem co robić... 






szablon
dla Takeru Dylan



nagłówki
 
^ zrobione wspólnie z siostrą ^

 
^ obydwa robione wspólnie z Shandie ♥ ^



Koloryzacje
użyta w czwartym nagłówku


^ użyta w pierwszym nagłówku <: ^




tutorial na menu
Pokażę Wam dziś kilka(naście) kodów, które użyłam by uzyskać taki efekt stron jak w szablonie 43

Najpierw trzeba ustalić wygląd samego napisu (strona główna itp.)

#PageList1 a, #PageList1 a:link {
text-align: center ;
font-size: 10px ;
text-transform: uppercase ;
font-weight: normal ;
display: block ;
color: #3b1e2f !important;
}

Naszym kolejnym celem jest  ustawienie tła napisu. W tym przypadku jest to te czerwone tło, które ma się znaleźć na samym dole. 

#PageList1 li:nth-child(1) {
background: #cd191c ;
width: 48px ;
height: 25px ;
padding-top: 25px ;
padding-bottom: 25px ;
position: absolute ;
z-index: 10 !important;
border-radius: 5px ;
transition:all 2s;
-webkit-transition:all 2s;
-o-transition:all 2s;
-moz-transition:all 2s;
}

Następnie dodajemy tło, które będzie obrócone o 45 stopni

#PageList1 li:nth-child(1):before {
content: '' ;
padding: 35px ;
display: inline-block ;
position: absolute ;
background: #d8c9ec ;
z-index: 1 !important;
transform: rotateZ(45deg) ;
-o-transform: rotateZ(45deg) ;
-moz-transform: rotateZ(45deg) ;
-webkit-transform: rotateZ(45deg) ;
left: 4px ;
top: 3px;
border-radius: 5px ;
transition:all 2s;
-webkit-transition:all 2s;
-o-transition:all 2s;
-moz-transition:all 2s;
}

Żeby napis nie zniknął pod tłami trzeba mu zwiększyć z-index. 

#PageList1 li:nth-child(1) a {
position: relative ;
z-index: 100 ;
color: #191b5f!important;
}

W zasadzie menu już wygląda dobrze. Doprowadzę to jednak do końca. Jak widać, strona ma jeszcze jedno tło (to niebieskie). Dodaję je podobnie jak to pierwsze i drugie. 

#PageList1 li:nth-child(1):after {
content: '' ;
padding: 35px ;
display: inline-block ;
position: absolute ;
background: #191b5f;
z-index: 0 !important;
transform: rotateZ(0deg) ;
-o-transform: rotateZ(0deg) ;
-moz-transform: rotateZ(0deg) ;
-webkit-transform: rotateZ(0deg) ;
left: 4px ;
top: 3px;
border-radius: 5px ;
transition:all 2s;
-webkit-transition:all 2s;
-o-transition:all 2s;
-moz-transition:all 2s;
}

Teraz ustalamy efekt po najechaniu myszką, w którym nasze ostatnie tło przekręci się o 45 stopni.


#PageList1 li:nth-child(1):hover:after {
transform: rotateZ(45deg) ;
-o-transform: rotateZ(45deg) ;
-moz-transform: rotateZ(45deg) ;
-webkit-transform: rotateZ(45deg) ;
}

pozostałe tła tylko muszą zaokrąglić rogi:

#PageList1 li:nth-child(1):hover:before, #PageList1 li:nth-child(1):hover  {
border-radius: 50px ;
}

To jest kod na tylko jedną stronę. Aby było ich więcej należy skopiować kody i dodać kolejne cyfry w nawiasach: #PageList1 li:nth-child(1), #PageList1 li:nth-child(2), #PageList1 li:nth-child(3) itp.



Nie przyjmuję zamówień!


9 komentarzy:

  1. Uwielbiam dwa ostatnie nagłówki! ♥ Mają tak świetne kolorki, że nie mogę się na nie napatrzeć :D Szablon również bardzo mi się podoba :) Jest taki prosty i to mi się podoba :D
    No i bardzo fajnie, że dodałaś tę instrukcję. Na pewno z niej skorzystam :D
    Fajnie byłoby więcej szablonów zobaczyć w następnym poście :D
    Pozdrawiam!
    Scar.

    OdpowiedzUsuń
    Odpowiedzi
    1. Dziękuję bardzo <33 Postaram się coś pokombinować z Cssem, ale niczego nie obiecuję ☺
      również pozdrawiam ^^

      Usuń
  2. Nie potrafię wybrać faworytów, jeśli chodzi o nagłówki. Wszystkie prace w tej notce są niesamowite! &-&
    Jeśli chodzi o propozycje, to tak jak Scar napisała wyżej, chętnie zobaczyłabym więcej szablonów z jakimiś aktorami czy gwizdami pop'u ;33
    Na pewno kiedyś wykorzystam kod na menu ;*

    Pozdrawiam cieplutko,
    D. xx

    OdpowiedzUsuń
  3. Śliczne prace, wszystkie nagłówki są mega ♥
    Moja propozycja : Chętnie zobaczyłabym więcej prac z jakimiś amerykańskimi aktorami, czy piosenkarzami :)
    Co do kodu na menu : Na pewno kiedyś wykorzystam ♥

    Pozdrawiam xx
    Lailaa ;3
    occulta-sonomia-graphics.blogspot.com

    OdpowiedzUsuń
  4. Wszystkie prace wspaniałe *-*
    Szkoda, że nie przyjmujesz zamówień ://

    OdpowiedzUsuń
  5. Hej kochana ^^
    Ah, jak zawsze nie mogę się napatrzeć na twoje prace, a szablon naprawdę jest super ^^
    Masz chęć może na współprace? Jeśli tak, pisz ^^
    Co do kodu, może kiedyś go ukradnę od ciebie, jest.. zajebiaszczy xD

    Pozdrawiam,
    Hanchesteria xx

    OdpowiedzUsuń
  6. moonlight
    Pobrałam szablon z Sehun'em z notki [29-31] na bloga http://24-hours-stories.blogspot.com

    OdpowiedzUsuń
  7. Strasznie długo mnie nie było... Wybacz za ten zastój :D
    Sygnatura jest ładna, jednak osobiście dałabym inną teksturę :)
    Szablon cuudowny!
    Nagłówki są ładne, ale do drugiego dałabym jaśniejsze tło i stocki, aby praca była bardziej dopasowana do postaci.
    Czwarta koloryzacja wymiata!
    Menu jest cuuuuuuuuudne! Na pewno kiedyś wykorzystam kod! Jest przecudowny!
    Pozdrawiam,
    Calliste

    OdpowiedzUsuń