Informacyjne kwadraciki

Element: Gadżet ( HTML/JavaScript )
Stopień trudności: xxxx
Czas wykonywania: 25 minut

Moja nieco śmieszna obsesja związana z kwadracikami trwa dalej, dlatego postanowiłam ją wykorzystać i napisać kolejną instrukcję. Pamiętacie kwadratowe menu? Jeśli tak, to dobrze. Jeśli nie, to nic nie szkodzi - zawsze da się tam zajrzeć. Poza tym tutaj głównie skupimy się na powtórzonej koncepcji kwadratu. A samo wykonanie będzie troszkę się różnić od poprzedniego.

Uwaga! Zmieniając pozycję gadżetu warto uważnie umieścić go w sidebarze. Ja proponuję Wam umieszczać go zawsze na samej górze, jako pierwszy element sidebaru - wtedy niezależnie od tego ile gadżetów znajdzie się w kolumnie pozostanie on na tym samym miejscu. Tak samo umieszczajcie gadżet nad postem, a nie pod nim.

Krok 1

Tworzymy gadżet HTML/JavaScript i wpisujemy poniższy kod:

<div class='box1'>Vivamus accumsan, mi et rhoncus faucibus, massa ipsum condimentum lacus, non bibendum odio risus a tortor. Donec pharetra purus nisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus fringilla mauris eleifend ante ullamcorper laoreet. </div>

Kod ten możecie powielić tyle razy ile chcecie. Jednak za każdym razem zmieniajcie klasę. Skoro pierwszy selektor to box1, drugi nazwijcie np. box2.
Ja stworzyłam trzy boxy - box1, box2, box3.

Krok 2

Teraz czas na ustalenie pozycji naszego gadżetu. Ja wybrałam prawą część bloga, tuż za kolumną bloga.

#HTML4 {position:absolute;margin-left:740px;width:170px;text-align:right;}

Mój gadżet nie będzie przemieszczać się z blogiem, dlatego też wybrałam position:absolute, margin-left pozwolił mi przemieścić gadżet z lewej kolumny do wybranego miejsca. Również ustawiłam odpowiednią długość ( width ) gadżetu.

Mój gadżet znajdował się jako pierwszy w lewej kolumnie i co nieco zostawił tam pustego miejsca po sobie. Aby zakryć pustą przestrzeń wpisałam:

.sidebar {margin-top:-30px;}

Krok 3

Teraz popracujemy nad częścią wizualną gadżetu, ponieważ na tą chwilę nie wygląda on zachęcająco. Dla każdego boxu dodałam kolor tła, padding i kolor czcionki:

.box1 {background:#999;padding:7px;color:#eee;}
.box2 {background:#ddd;text-align:justify;padding:7px;color:#333;}
.box3 {background:#bfd8c7;text-align:justify;padding:7px;color:#666;}

Krok 4

Czas nieco zmniejszyć nasze boxy albo po prostu zrobić z nich już kwadraty.

.box1 {background:#999;padding:7px;color:#eee;height:0px;width:0px;overflow:hidden;color:transparent;transition: all 0.8s ease;-o-transition: all 0.8s ease;-webkit-transition: all 0.8s ease;-moz-transition: all 0.8s ease;}
.box2 {background:#ddd;text-align:justify;padding:7px;color:#333;height:0px;width:0px;overflow:hidden;color:transparent;transition: all 0.8s ease;-o-transition: all 0.8s ease;-webkit-transition: all 0.8s ease;-moz-transition: all 0.8s ease;}
.box3 {background:#bfd8c7;text-align:justify;padding:7px;color:#666;height:0px;width:0px;overflow:hidden;color:transparent;transition: all 0.8s ease;-o-transition: all 0.8s ease;-webkit-transition: all 0.8s ease;-moz-transition: all 0.8s ease;}

Do każdego boxu dodałam długość i wysokość, które ustawiłam na 0px. Dlaczego? Nasz kwadrat wtedy powstanie przez dodany wcześniej padding. Oprócz tego zakodowałam overflow:hidden, aby schować treść gadżetu, kolor zmieniłam na przezroczysty i dodałam przejście, aby hover nie wyglądał zbyt ciężko.

Krok 5

Teraz krok, który jak najbardziej zasługuje na osobny punkt.
Musimy do każdego z boxów dodać pozycję, która sprawi, że po najechaniu na kwadrat myszką, nie będę się one nakładać. Sprawimy, że nadal będą one blisko siebie, nawet podczas hoveru.
Aby to zrobić do każdego boxu dodajemy kod: position:relative:

.box1 {background:#999;padding:7px;color:#eee;height:0px;width:0px;overflow:hidden;color:transparent;transition: all 0.8s ease;-o-transition: all 0.8s ease;-webkit-transition: all 0.8s ease;-moz-transition: all 0.8s ease;position:relative;}
.box2 {background:#ddd;text-align:justify;padding:7px;color:#333;height:0px;width:0px;overflow:hidden;color:transparent;transition: all 0.8s ease;-o-transition: all 0.8s ease;-webkit-transition: all 0.8s ease;-moz-transition: all 0.8s ease;position:relative;top:3px;}
.box3 {background:#bfd8c7;text-align:justify;padding:7px;color:#666;height:0px;width:0px;overflow:hidden;color:transparent;transition: all 0.8s ease;-o-transition: all 0.8s ease;-webkit-transition: all 0.8s ease;-moz-transition: all 0.8s ease;position:relative;top:6px;}

Oprócz dodania pozycji dla wszystkich trzech boxów, dodała wartość top dla tych, które mają inny box nad sobą. Dzięki temu gadżety nie są do siebie przyczepione.

Krok 6

Jedyne co nam pozostaje to ustawić hover dla wszystkich trzech ramek.

.box1:hover {height:140px;width:145px;z-index:9999;color:#eee;}
.box2:hover {height:140px;width:145px;z-index:9999;color:#222;}
.box3:hover {height:140px;width:145px;z-index:9999;color:#444;}

Aby to wszystko elegancko wyszło powinniście dodać długość ( width ) i wysokość ( height ) - przy czym długość może być opcjonalna, natomiast wysokość musicie ustawić w zależności od width i od ilości tekstu, który znajduje się w polu. Oprócz tego oczywiście ustalamy kolor tekstu w ramce i - na wszelki wypadek - dodajemy z-index:9999, który pomoże nam  ustawić boxy "ponad" innymi elementami bloga.

Od autorki

Gratulacje dla wszystkich, którzy dotrwali. I właśnie tak, w śmiesznie prosty sposób, udało nam się stworzyć informacyjne kwadraciki, które możecie na masę różnych sposobów wykorzystywać na Waszych blogach.
Mam nadzieję, że pomysł się spodoba, przyjmie i przemycicie tajemnicze kwadraciki do siebie.
Taki trochę efekt "live" znajduje się na Okiem Tyler, gdzie niestety też odbywają się prace nad szablonem, więc mogą pojawić się pewne problemy. Niestety nie byłam w stanie stworzyć podglądu na żywo na GT, jednak w najbliższej przyszłości na pewno się taki pojawi.