Gadżety #2 - Strony w kółkach vol.1

(c)scar / scargraf

Witajcie moi drodzy ponownie! Tym razem przybywam z dwoma instrukcjami na ten sam temat, jednak w dwóch osobnych notkach. Efekt, który będę omawiała w tych notkach jest ten sam, jednak wykonany dwoma sposobami, na innych podstawach - jeśli można tak powiedzieć. Mianowicie instrukcja z tej notki opiera się tylko i wyłącznie na kodzie CSS, gdzie w drugiej trochę pokombinujemy. Druga notka może pojawić się kiedy indziej, ale na pewno będzie - o to się martwić nie musicie. Nie przedłużając, zapraszam was więc do zapoznania się z notką.

Pierwszy przykład, poniżej, pokazuje czym się dziś zajmiemy:

Jak widzicie strony są w kółeczkach, a po najechaniu na rozwijają się na całą długość gadżetu. Ja rzadko używam tego efekty,  bo po prostu za nim nie przepadam, ale czasami ładnie wygląda na szablonach. Przejdźmy więc do konkretnej instrukcji i analizy kodu.

0. Pierwszy punkt jest króciutki, ale proponuję to zrobić.

#PageList1 {
  list-style-type: none !important;
}

I. Teraz, kiedy usunęliśmy wyliczanie, możemy przejść do napisania wyglądu stron przed najechanie na nie kursorem. Pamiętajcie, że zamiast kółek możecie zrobić też kwadraty. Wracając, tak wygląda nasz kod:

#PageList1 a:link, #PageList1 a:visited {
  display: block;
  background: #ddd; *tło linków*
  color: transparent; *kolor linków*
  margin: 2px; *odstęp między linkami*
  padding: 10px 0 0 0; *padding od góry*
  width: 30px; *szerokość*
  height: 20px; *wysokość*
  border-radius: 100%;
  font-family: arial;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: center;
  transition: all .80s;
-o-transition: all .80s;
-webkit-transition: all .80s;
-moz-transition: all .80s;
}

A więc spójrzmy na kod i go sobie wytłumaczmy:
> display - oznacza zablokowanie linków
> border-radius - oznacza zaokrąglenie rogów, w naszym wypadku do 100%
> color: transparent - ustawiamy po to, aby tekst linku nie wyświetlał się, bo chcemy, aby widoczne były same kółka

II. Kiedy nasze strony wyglądają jak kółka, w końcu możemy napisać kod na ich efekt po najechaniu na nie kursorem. A nasz kod będzie wyglądał tak:

#PageList1 a:hover {
  background: #26A69A;
  color: #fff !important;
  width: 100%;
  border-radius: 12px;
  transition: all .90s;
-o-transition: all .90s;
-webkit-transition: all .90s;
-moz-transition: all .90s;
}

> width: 100% - oznacza, że kółko rozwija się na całą szerokość gadżetu stron

Drugi przykład, w którym omówimy tylko drugą cześć kodu(#PageList1 a:hover)

Drugi przykład jest nieco inny, ponieważ nie rozwijamy kółka na szerokość gadżetu, a po prostu "powiększamy" to kółko.

I. Pierwsze co to dodajemy do naszego kodu z wyglądem linków przed najechaniem na nie kursorem taki oto kodzik: overflow-wrap: break-word; ten kod da sprawia, że słowa łamią się tak, żeby dostosować się do szerokości linka.

II. Drugi krok to napisanie kodu na wygląd linku po najechaniu na niego kursorem. Tutaj bawimy się trzema rzeczami, mianowicie: width, height oraz padding. Nie mogę wam niestety powiedzieć konkretnych danych, gdzie kółko zawsze będzie wyglądało tak samo, bo wszsytko zależy od tego jak małe lub duże będzie kółko w pierwszym kodzie, potem to też zależy od tego jaką chcecie, żeby wasze kółko, przyjęło wielkości. Nie przedłużając, spójrzmy na ten kod:

#PageList1 a:hover {
  overflow-wrap: break-word;
  background: #26A69A; *kolor tła linka*
  color: #fff !important; *kolor tekstu linka*
  padding: 30px 10px;
  width: 50px;
  height: 10px;
  border-radius: 100%;
  transition: all .90s;
-o-transition: all .90s;
-webkit-transition: all .90s;
-moz-transition: all .90s;
}

Jak widziecie tu też dopisałam overflow-wrap: break-wrod; jest to bardzo pomocny kod, przy takich efektach.
Tak jak wspomniałam wcześniej tu toczymy bój z width, height i padding. Jest to bardzo ciężkie do ustalenia, więc niestety nie musicie sami ustawiać wartości, aby dopasować je do treści linków jaką macie i do wielkości jaką chcecie uzyskać.

To by było wszystko w tej notce, jeśli macie jakieś pytania, piszcie w komentarzach lub w zakładce "Pytania"