Kilko kolorowe linki (Viper)

Takie menu składa się z dwóch część: css i linków w widgecie HTML/Java Script. Na początku stwórz widget HTML/Java Script i wklej do niego:

<a href="LINK" class="navi">NAZWA</a>

gdzie LINK - to link danej strony, a NAZWA to nazwa, jaką chcemy nadać konkretnej stronie. Taki schemat powielamy tyle razy, ile stron chcemy uzyskać.

Następnym krokiem jest css:

a.navi:link {
display: inline-block;
width: 130px;
height: 16px;
margin: 2px;
padding-top: 5px;
font-weight: 380;
text-align: center;
text-decoration: none;
letter-spacing: 1px;}

a.navi:link:nth-of-type(4n+1) {background: #75682B;
color: #D5D4D1;
text-transform: uppercase;
font-size: 10px;
border-radius: 0px;}
a.navi:link:nth-of-type(4n+2) {background: #2C251D;
color: #D5D4D1;
text-transform: uppercase;
font-size: 10px;
border-radius: 0px;}
a.navi:link:nth-of-type(4n+3) {background: #2C251D;
color: #D5D4D1;
text-transform: uppercase;
font-size: 10px;
border-radius: 0px;}
a.navi:link:nth-of-type(4n+4) {background: #75682B;
color: #D5D4D1;
text-transform: uppercase;
font-size: 10px;
border-radius: 0px;}

a.navi:link:hover:nth-of-type(4n+1) {background: #302A22;
color: #DFDDD6;
webkit-transition: all 350ms;-moz-transition: all 350ms;-o-transition: all 350ms;transition: all 350ms;}

a.navi:link:hover:nth-of-type(4n+2) {background: #6A5E3B;
color: #DFDDD6;
webkit-transition: all 350ms;-moz-transition: all 350ms;-o-transition: all 350ms;transition: all 350ms;}

a.navi:link:hover:nth-of-type(4n+3) {background: #6A5E3B;
color: #DFDDD6;
webkit-transition: all 350ms;-moz-transition: all 350ms;-o-transition: all 350ms;transition: all 350ms;}

a.navi:link:hover:nth-of-type(4n+4) {background: #302A22;
color: #DFDDD6;
webkit-transition: all 350ms;-moz-transition: all 350ms;-o-transition: all 350ms;transition: all 350ms;} 

Gdzie:

Różowy - selektor określający link nawigacyjny

Jasny Fiolet - link nawigacyjny po wskazaniu na niego kursorem

Błękitny -  w tym wypadku stosowany jest wzór an+b, gdzie a to ilość "cykli" (tj. jeśli chcemy mieć np. 4 kolorowe karty wzór wygląda nth-of-type(4n+b)), n to licznik (rozpoczyna się od 0), a b to wartość przesunięcia (w tym wypadku ostateczny wzór prezentuje się następująco nth-of-type(4n+1){...} nth-of-type(4n+2){...} nth-of-type(4n+3){...} nth-of-type(4n+4){...} i na tym koniec; każde kolejne wielokrotności czwórki zostaną powtórzone w tej samej kolejności czyli karta nr 5 będzie miała te same parametry co 1, dalej 6 te co 2, następnie 7 odpowiednio te co 3 i wreszcie 8 takie same jak 4)

Pomarańczowy - odpowiednio kolory tła i czcionki

Czerwony - zaokrąglenia boków

Zielony - transformacje, w zależności od uznania można zmieniać na różne wartości (osobiście posługuję się ms, jednak można je zmienić na zwykłe s, wtedy najlepsze parametry to 1 lub 2)

Pobrubione wartości możesz dostosować do swojego bloga.