niedziela, 2 marca 2014

[Karty] Czyli jak zrobić fajny efekt

Od razu mówię, że korzystałam z instrukcji Tyler. Postaram się wytłumaczyć jak zrobić takie fajne kółeczka, które się obracają i gdy się najedzie cień się odsuwa.
 


#PageList1 li a:link, #PageList1 li a:visited {
font-family: Lobster; /*czcionka*/
color: #fff;  /*kolor czcionki*/
width: 100px; /*szerokość kółka*/
height: 40px; /*wysokość kółka*/
display: block; /*żeby się wyrównały*/
background: #cac7d2; /*kolor tła*/
text-align: center; /*wyrównanie tekstu*/
font-size: 17px; /*rozmiar czcionki*/
text-decoration: none; /*bez żadnego podkreślania tekstu itp.*/
border-radius: 150px; /*zaokrąglone rogi*/
line-height: 16px; /*odstępy między linijkami*/
padding-top: 50px; /*margines od góry*/
padding-right: 10px; /*margines od prawej*/
padding-left: 10px;/*margines od lewej*/
padding-bottom: 30px; /*margines od dołu*/
transition:all 1s; /*szybkość przejścia*/
-moz-transition:all 1s; /*szybkość przejścia*/
-webkit-transition:all 1s; /*szybkość przejścia*/
-o-transition:all 1s; /*szybkość przejścia*/
box-shadow: -120px 0px 0px #5f5b70 inset,
0px -120px 0px #777388 inset, 120px 0px 0px #5f5b70 inset, 0px 120px 0px #918ba5 inset; /*czyli to tutaj są ukryte cienie*/}

#PageList1 li a:hover {
transform:rotate(720deg); /*ilość obrotów*/
-webkit-transform:rotate(720deg); /*ilość obrotów*/
-moz-transform:rotate(720deg); /*ilość obrotów*/
-o-transform:rotate(720deg); /*ilość obrotów*/
transition:all 2s; /*szybkość przejścia*/
-moz-transition:all 2s; /*szybkość przejścia*/
-webkit-transition:all 2s; /*szybkość przejścia*/
-o-transition:all 2s; /*szybkość przejścia*/
color: #5f5b70; /*kolor czcionki*/
box-shadow: -10px 0px 0px #5f5b70 inset,
0px -10px 0px #777388 inset, 10px 0px 0px #5f5b70 inset, 0px 10px 0px #918ba5 inset; /*cienie się odsłaniają*/}



Kolory, czcionki, wielkości itp. można zmieniać. Prosiłabym o dodanie linku do nas gdy skorzystacie z tego.
Mam nadzieję, że się przyda. W razie czego, pytajcie.

4 komentarze:

  1. Miki się starała a tutaj nikt nie komentuje xD Instrukcja przydatna, pewnie ją kiedyś wykorzystam ;*

    OdpowiedzUsuń
    Odpowiedzi
    1. Miki to mało interesuje xD A ty ją znasz, więc nie udawaj ;>

      Usuń
  2. I ja też kiedyś postaram się to wykorzystać! :)
    Dzięki sesji mam ochotę robić wszystko naraz, nawet chęć na ponowną próbę bawienia się z grafiką i kodami CSS :D

    OdpowiedzUsuń
  3. Świetne! Oby więcej takich instrukcji ;)
    Na pewno wykorzystam ;D

    OdpowiedzUsuń