sobota, 11 kwietnia 2015

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.

13 komentarzy:

  1. Pragnie mi się ten http://graphical-thoughts.blogspot.com/2014/02/alien-in-mir.html szablonik na moim blogu, pobieram / gumowy miś :D

    OdpowiedzUsuń
  2. Musisz mnie nauczyć robić takie fajne, minimalistyczne szablony. Nawiedzę Cię na gadu <3 Przydałoby się w końcu ogarnąć :P

    Pa, łobuzie <3

    OdpowiedzUsuń
    Odpowiedzi
    1. Nie znam żadnego łobuza :3
      Dla Ciebie z chęcią przygotuje pakiet indywidualny z efektami ekstra i paczką dodatkowych instrukcji :D

      Usuń
  3. Rewelacja *O* Świetny pomysł i instrukcja ! Ja bym na to nie wpadła. Gratki :3

    OdpowiedzUsuń
    Odpowiedzi
    1. W sumie całość wyszła zupełnie przypadkiem :>
      Dzięki za miłe słowo, chyba wyszło nawet zrozumiale i ciekawie. Już dawno instrukcji nie pisałam to bałam się co to wyjdzie :D

      Usuń
  4. Dziękuję za instrukcję, przyda się na pewno, i to w wielu przypadkach, bo ma dużo zastosowań <33
    Jeszcze raz dziękuję!

    OdpowiedzUsuń
    Odpowiedzi
    1. Cieszę się, że tak uważasz. :) Może się faktycznie do czegoś fajnego przyda :> Jak coś stworzysz/wymyślisz, daj znać. :D Ja ostatnio mam brak weny w tej kwestii :P

      Usuń
    2. Mnie były potrzebne do takiego czegoś, co informuje o szablonie :D
      Już zrobiłam, ale nie dopracowałam, więc nie ma czego oglądać, niestety za mało czasu. A jak jest czas, to mam lenia:(((

      Usuń
  5. Szukałam takiej instrukcji jakiś czas temu, chociaż przypuszczałam, że i tak nic mi z tego nie wyjdzie. A tutaj okazuje się, że diabeł wcale nie taki straszny (na oko) i jeszcze pod samym nosem.
    Może zajrzysz na maila w wolnej chwili, co? ;)

    OdpowiedzUsuń
    Odpowiedzi
    1. A widzisz :D Zazwyczaj te wszystkie literki dosyć nieprzyjaźnie wyglądają, ale takie złe nie są. Da się z nimi dogadać :P

      Usuń
  6. Pozwoliłam pobrać sobie szablon 3D EFFECT na http://ws-maximilienne.blogspot.com/.

    Pozdrawiam,
    maximilienne

    OdpowiedzUsuń
  7. Pięknie, cóż mogę więcej dodać. Instrukcja przejrzysta, wczytałam się, a jakże :D W zasadzie podobny efekt stosuje się przy menu, gdzie po najechaniu na kategorię wyświetlają się podkategorie. Raz wiem, że udało mi się coś takiego zmajstrować.

    OdpowiedzUsuń
    Odpowiedzi
    1. Ahhh, no miło mi, że tak się wczytałaś w te moje skromne wypociny :D W sumie to nie spotkałam się z czymś podobnym przy okazji menu. Sporo jeszcze trzeba zobaczyć i ogarnąć. Ostatnio testuje ambitnie jQuery i jakoś zapomina o całym świecie :>
      A to Twoje "zmajstrowanie" to bym z chęcią zobaczyła, podpatrzyła i wykorzystała :D

      Usuń

- +
Szablon wykonany przez Tyler