16. Strony w kształcie kółek

Na prośbę Cαѕѕιє zamieszczam instrukcję na strony w kształcie kółek. Poniżej znajdą się przykładowe kody na ich wygląd zarówno przed i po najechaniu kursorem.


Aby stworzyć kółeczko musimy ustawić odpowiednią szerokość i wysokość naszej strony. Musi być ona kwadratem. Nie można jednak napisać np.
 #PageList1 a, #PageList1 a:visited {
     width: 100px ;
     height: 100px ;
}

gdyż tekst naszej strony znajdzie się w tym przypadku na samej górze. Nie wygląda to estetycznie. Ja radzę sobie marginesami zewnętrznymi, czyli padding. Np.
#PageList1 a, #PageList1 a:visited {
     width: 100px; 
     paddin-top: 48px ;
     padding-bottom: 48px ;
}

Oczywiście wartość 48px można zmieniać, jeśli będzie taka potrzeba. Wszystko zależy od rozmiaru czcionki - gdy będzie ona większa margines zewnętrzny będzie mniejszy, im mniejsza czcionka tym margines zewnętrzny się zwiększy.

Kiedy mamy już kwadraciki wystarczy posłużyć się kodem na zaokrąglenie rogów czyli border-radius: 50%; lub border-radius: 100%;. Obydwie wartości oznaczają to samo.

Poniżej macie kilka przykładowych kodów na wygląd stron.

Strona

#PageList1 a, #PageList1 a:visited { text-transform: uppercase ; font-size: 7px ; letter-spacing: 2px ; background: #f99db3 ; color: #fff ; text-align: center ; margin: -7px ; font-weight: normal !important ; width: 100px ; height: 5px ; padding-top: 46px ; padding-bottom: 46px ; border-radius: 50% ; transition:all 1s; -o-transition:all 1s; -moz-transition:all 1s; -webkit-transition:all 1s; display: inline-block ; box-shadow: 0px 0px 20px #963149 inset, 0px 0px 10px #963149 ; } #PageList1 a:hover { box-shadow: 0px 0px 150px #963149 inset, 0px 0px 0px #963149 ; }

Strona

#PageList1 a, #PageList1 a:visited { text-transform: uppercase ; font-size: 7px ; letter-spacing: 2px ; background: #23300e ; color: #fff ; text-align: center ; margin: -7px ; font-weight: normal !important ; width: 100px ; height: 5px ; padding-top: 48px ; padding-bottom: 47px ; border-radius: 50% ; transition:all 1s; -o-transition:all 1s; -moz-transition:all 1s; -webkit-transition:all 1s; display: inline-block ; border: solid 1px ; transform: rotateZ(0deg); -o-transform: rotateZ(0deg); -moz-transform: rotateZ(0deg); -webkit-transform: rotateZ(0deg); } #PageList1 a:hover { transform: rotateZ(360deg); -o-transform: rotateZ(360deg); -moz-transform: rotateZ(360deg); -webkit-transform: rotateZ(360deg); background: #678e22 ; }

Strona

#PageList1 a, #PageList1 a:visited { text-transform: uppercase ; font-size: 7px ; letter-spacing: 2px ; background: #4a9aef ; color: #fff ; text-align: center ; margin: -7px ; font-weight: normal !important ; width: 100px ; height: 5px ; padding-top: 47px ; padding-bottom: 47px ; border-radius: 50% ; transition:all 1s; -o-transition:all 1s; -moz-transition:all 1s; -webkit-transition:all 1s; display: inline-block ; transform: scale(1); -o-transform: scale(1); -moz-transform: scale(1); -webkit-transform: scale(1); } #PageList1 a:hover { transform: scale(1.1); -o-transform: scale(1.1); -moz-transform: scale(1.1); -webkit-transform: scale(1.1); background: #1968b7 ; }

Strona

#PageList1 a, #PageList1 a:visited { text-transform: uppercase ; font-size: 7px ; letter-spacing: 2px ; background: #ff0000 ; color: #fff ; text-align: center ; margin: -7px ; font-weight: normal !important ; width: 100px ; height: 5px ; padding-top: 47px ; padding-bottom: 47px ; border-radius: 50% ; transition:all 1s; -o-transition:all 1s; -moz-transition:all 1s; -webkit-transition:all 1s; display: inline-block ; transform: scale(1); -o-transform: scale(1); -moz-transform: scale(1); -webkit-transform: scale(1); box-shadow: 0px 0px 40px #c99595 inset ; } #PageList1 a:hover { transform: scale(0.7); -o-transform: scale(0.7); -moz-transform: scale(0.7); -webkit-transform: scale(0.7); box-shadow: 0px 0px 0px #c99595 inset ; }

Mam nadzieję, że instrukcja okazałą się pomocna.
Jeśli macie jakieś pytanie/propozycję piszcie śmiało w komentarzach!