Dust in the Wind [46]

DUST IN THE WIND - KANSAS

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

pobierz

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ń!