Witaj!

Jesteś zainteresowany tworzeniem szablonów, a nie wiesz jak się do tego zabrać? Template School to idealne miejsce, w którym nauczysz się kodowania i wykonywania prac.
Kto wie, może dzięki szkoleniu niedługo dołączysz do szabloniarni lub założysz własny blog graficzny?

Obserwatorzy

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.










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

5 komentarzy:

  1. bardzo przydatny post ❤
    proponuję coś o wycinaniu postaci, mile widziane!!

    buziak, leah

    OdpowiedzUsuń
  2. Super, szukałam tego bardzo długo. Dziękuję za waszą pracę ^^

    OdpowiedzUsuń
    Odpowiedzi
    1. I jeszcze raz stokrotne dzięki, właśnie wykorzystałam kody do szablonu, który tworzę. Jak dobrze, ze istnieje takie miejsce ❤

      Usuń
  3. Mam wrażenie, że skończyły Ci się pomysły na posty. Może podsunę jeden... Wszystko po kolei. Wyczekuję takiego posta, bo nie wiem czy najpierw zabrać się za nagłówek czy kod CCS.
    Pozdrawiam Cieplutko <3

    OdpowiedzUsuń
  4. Najlepszy blog o css! Szukałam tego kodu kilka dni a on był tutaj!!!

    OdpowiedzUsuń