Strony w inny sposób

Kolejnym popularnym elementem graficznym w tych czasach stało się menu, inaczej zwane kartami, stronami, zakładkami, bądź po prostu PageList. Dlaczego? Może dlatego, iż ich ustawienia są w zasadzie nieograniczone. Można zrobić menu w naprawdę wielu stylach. Dla każdego znajdzie się coś ciekawego. Od prostokątnych i zwykłych przejść, przez menu obrazkowe, aż po kwadratowe, okrągłe a nawet geometrycznie zróżnicowane, tj. składające się z wielu figur geometrycznych, zazwyczaj: koło + kwadrat, kwadrat + prostokąt lub kwadrat + kwadrat. Z trójkątami w CSS'ach niestety jeszcze się nie spotkałam i raczej wątpię, iż jest możliwość zrobienia trójkątnego wzoru przez same kody. Tutaj raczej pozostaje jedynie obrazek, jako odnośnik URL.
W tym poście pobawimy się nieco trudniejszym kodem, a mam na myśli własnie ostatni z przykładów. Hmmm... to może kwadrat + kwadrat - jest to dla mnie chyba najbardziej estetyczne połączenie, no i może jeszcze kwadrat + koło, ale to innym razem.


NAJEDŹ NA PONIŻSZE KARTY ABY ZOBACZYĆ ZMIANY PO NAJECHANIU MYSZKĄ





KOD


#PageList1 li:nth-child(1) li{
display: inline-block;
height: 55px;
width: 55px;
top: -30px;
left: 38px;
background: #d1d1d1;
border-radius: 0px;
animation: blob .7s infinite linear alternate;
transform: rotateZ(0deg);
position: relative;
z-index: 300!important;
font: 9px/50px oswald!important;
text-transform: uppercase;
letter-spacing: 1px;
text-align: center;
margin: 10px;
color: #fff!important;
}

#PageList1 li:nth-child(1) a:visited{
color: #fff!important;
}

#PageList1 li:nth-child(1) a:link{
color: #fff!important;
}

#PageList1 li:nth-child(1) a:hover
{
color: #fff!important;
}

#PageList1 li:nth-child(1):before{
content: '';
display: inline-block;
height: 55px;
width: 55px;
top: -10px;
right: 0;
left: -10px!important;
bottom: 0px!important;
background: #cb383d!important;
border-radius: 5px;
animation: blob .7s infinite linear alternate;
transform: rotateZ(45deg);
position: absolute;
z-index: -10!important;
font: 9px/10px oswald!important;
text-transform: uppercase;
letter-spacing: 1px;
text-align: center;
margin: 10px;
color: #fff!important;
}

#PageList1 li:nth-child(1):hover {
border-radius: 40px!important;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
transform:rotate(45deg);
}


#PageList1 li:nth-child(2){
display: inline-block;
height: 55px;
width: 55px;
top: -30px;
left: 148px;
background: #a63939;
border-radius: 0px;
animation: blob .7s infinite linear alternate;
transform: rotateZ(0deg);
position: relative;
z-index: 300!important;
font: 9px/50px oswald!important;
text-transform: uppercase;
letter-spacing: 1px;
text-align: center;
margin: 5px;
color: #fff!important;
}

#PageList1 li:nth-child(2) a:visited{
color: #fff!important;
}

#PageList1 li:nth-child(2) a:link{
color: #fff!important;
}

#PageList1 li:nth-child(2) a:hover {
color: #fff!important;
}

#PageList1 li:nth-child(2):before{
content: '';
display: inline-block;
height: 55px;
width: 55px;
top: -10px;
right: 0px;
left: -10px!important;
bottom: 0px!important;
background: #999;
border-radius: 5px;
animation: blob .7s infinite linear alternate;
transform: rotateZ(45deg);
position: absolute;
z-index: -10!important;
font: 9px/10px oswald!important;
text-transform: uppercase;
letter-spacing: 1px;
text-align: center;
margin: 10px;
color: #111!important;
}

#PageList1 li:nth-child(2) a:hover {
color: #111!important;
}

#PageList1 li:nth-child(2) li:hover {
border-radius: 40px!important;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
transform:rotate(-45deg);
}


#PageList1 li:nth-child(3){
display: inline-block;
height: 55px;
width: 55px;
left: 270px;
top: -171px;
background: #999;
border-radius: 0px;
animation: blob .7s infinite linear alternate;
transform: rotateZ(0deg);
position: relative;
z-index: 300!important;
font: 9px/50px oswald!important;
text-transform: uppercase;
letter-spacing: 1px;
text-align: center;
margin: 7px;
color: #fff!important;
}

#PageList1 li:nth-child(3) a:visited{
color:#fff!important;
}

#PageList1 li:nth-child(3) a:link{
color:#fff!important;
}

#PageList1 li:nth-child(3) a:hover {
color:#fff!important;
}

#PageList1 li:nth-child(3):before{
content: '';
display: inline-block;
height: 55px;
width: 55px;
top: -10px;
right: 0;
left: -10px!important;
bottom: 0px!important;
background: #a63939!important;
border-radius: 5px;
animation: blob .7s infinite linear alternate;
transform: rotateZ(45deg);
position: absolute;
z-index: -10!important;
font: 9px/10px oswald!important;
text-transform: uppercase;
letter-spacing: 1px;
text-align: center;
margin: 10px;
color: #000!important;
}

#PageList1 li:nth-child(3):hover {
border-radius: 40px!important;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s; transform:rotate(45deg);
}


#PageList1 li:nth-child(4){
display: inline-block;
height: 55px;
width: 55px;
left: 400px;
top: -195px;
background: #cb383d;
border-radius: 0px;
animation: blob .7s infinite linear alternate;
transform: rotateZ(0deg);
position: relative;
z-index:300!important;
font: 9px/50px oswald!important;
text-transform: uppercase;
letter-spacing: 1px;
text-align: center;
margin: 8px;
color: #111!important;
}

#PageList1 li:nth-child(4) a:visited{
color: #111!important;
}

#PageList1 li:nth-child(4) a:link{
color: #111!important;
}

#PageList1 li:nth-child(4) a:hover {
color: #111!important;
}

#PageList1 li:nth-child(4):before{
content: '';
display: inline-block;
height: 55px;
width: 55px;
top: -10px;
right: 0;
left: -10px!important;
bottom: 0px!important;
background: #d1d1d1!important;
border-radius: 5px;
animation: blob .7s infinite linear alternate;
transform: rotateZ(45deg);
position: absolute;
z-index: -10!important;
font: 9px/10px oswald!important;
text-transform: uppercase;
letter-spacing: 1px;
text-align: center;
margin: 10px;
color: #000!important;
}

#PageList1 li:nth-child(4):hover {
border-radius: 40px!important;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
transform:rotate(-45deg);
}
OBJAŚNIENIA


LICZBY W NAWIASACH - numer danej karty w menu..

FONT -rozmiar i nazwa czcionki, u mnie: 9px/50px oswald (+ !important)

TEXT-TRANSFORM: UPPERCASE - nazwa pisana dużymi literami

TOP - górny margines; wartość na plusie obniża element, na minusie element przesuwa się ku górze

LEFT - lewy margines; wartość na plusie przesuwa element w prawo, na minusie w lewo



#PageList1 li:nth-child(1) li - początkowy wygląd karty, czyli ten kwadracik od spodu

a:visited - link do strony odwiedzonej

a:link - link do strony odwiedzonej

a:hover - link po najechaniu kursorem

:before - dodatkowa część elementu znajdująca się z przodu, tutaj kwadracik na wierzchu

2 komentarze: