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);
}
|
A gdzie wkleja się kod? :\
OdpowiedzUsuńNa blogspocie można w wersji CSS szablonu :)
Usuń