wtorek, 23 czerwca 2015

Tworzymy własny gadżet!

Element: HTML/JavaScript
Stopień trudności: xxxx
Czas wykonywania: ~20 minut

Dzień dobry! Więcej niż tydzień lekkiej przerwy za mną, ale ostatecznie Tyler zwlokła się z łóżka i stwierdziła, że trzeba w końcu zrobić.
Ostatnio na czaciku pojawiła się propozycja na instrukcję ( propozycja pojawiła się od Ivanov ), w której pokazałabym jak stworzyć gadżet podobny do tego użytego w szablonie Could it be my destiny? Jako, że ostatnio udało mi się stworzyć coś podobnego, postanowiłam instrukcję napisać i wierzyć, że się do czegoś przyda.

Na początek: Nasz gadżet będzie zawierać : obrazek/zdjęcie/mini nagłówek, tytuł bloga, opis/cytat i małe menu.
Bardzo podobną strukturę gadżetu wykorzystałam w szablonie, który ostatnio robiłam, jednak tam wszystko zostało ustawione automatycznie, bezpośrednio w kodzie HTML nagłówka. Dzisiaj jednak opcja prostsza, nad którą można swobodnie zapanować z "Układu".

Informacje
+ W tworzeniu gadżetu użyte zostały czcionki: Ubuntu & Oswald
+ Gadżet ma określoną szerokość ( width ), dlatego efekty mogą się różnić w zależności od tego jak jest ona ustawiona. Również, mogą być konieczne niewielkie zmiany dla własności padding, a także top & left w celu dostosowania gadżetu do miejsca, w którym się on znajduje.
+ Ustalona szerokość: 214px
+ Gadżet został stworzony i przetestowany na trzech, różnych szablonach próbnych ( o dziwo, wszędzie działał )
+ Instrukcja jest stworzona tylko dla gadżetu HTML/JavaScript. Kod nie zadziała w przypadku używania go w poście.




We’ll climb up higher
DIVIDED BY THE COLORS SPLIT BY OUR BELIEFS FORCED AGAINST EACHOTHER, NOTHING'S AS IT SEEMS BUT BETWEEN WHITE WALLS WE COULD FORGET IT ALL TO FEEL ONE FATE, WE CAN START TO CHANGE

Krok 1 - kod HTML gadżetu
Zaczynamy standardowo tworząc gadżet HTML/JavaScript. Tworząc go jednak pamiętamy, że nasz gadżet ma zawierać obrazek, tytuł, linki i opis. To jest bardzo ważne podczas tworzenia kodu. Dzięki temu uda nam się uniknąć komplikacji już w kodzie CSS.

Stworzymy trzy divy: pierwszy - dla części górnej ( obrazka, nazwy i menu ) i dla części dolnej ( opis ), drugi - tylko dla części górnej i trzeci - tylko dla części dolnej. Dodatkowo stworzymy osobne divy dla nazwy i menu ( w drugim divie ), żeby wszystko trzymało się kupy. Jak ktoś nadąża, to tylko pogratulować . Na szczęście zaraz zobaczycie pełny kod + dorzucam jeszcze graficzne wyjaśnienie tego bełkotu.



KOD HTML - część pierwsza
<div class='profil'>
<div class='profil1'>
XXX
</div>

<div class='profil2'>
XXX</div>

</div>
Mamy te obiecane trzy divy. Teraz czas je wypełnić. Pamiętacie co napisałam wyżej. Do pierwszego diva wrzucamy obrazek, tytuł i menu, a do drugiego sam opis. No to niech się tak stanie.

KOD HTML - część druga
<div class='profil'>
<div class='profil1'>
<div class='profiltytul'>Graphical Thoughts</div>
<div class='profillinki'>
<a href='#'>Link 1</a>
<a href='#'>Link 2</a>
<a href='#'>Link 3</a>
<a href='#'>Link 4</a>
</div> 

</div>
<div class='profil2'>
XXX</div>

</div>
Dobra, a gdzie ten obrazek? Tutaj troszkę oszukamy, bo obrazek wrzucimy bezpośrednio jako tło dla profil1. Wyżej na zielono mamy tytuł, a menu zaznaczone na fioletowo. TĘCZA po prostu! 
A no i te XXX możemy w końcu zamienić na opis. 

Cała struktura jest bardzo prosta ( i mam nadzieję - zrozumiała ). Różowy kolor to nasz cały gadżet. Między czerwonym tekstem mamy część górną ( czyli obrazek, tytuł i menu ), a kolor niebieski to opis ( najmniej skomplikowana część całości - po co w ogóle ten div, nie? ).
To by było w kwestii HTML tyle. Teraz trzeba to ładnie ogarnąć.

KOD CSS - część pierwsza
Nie ma wyjścia, zaczynamy od ustawienia długości, o której wspomniane było w informacjach.
.profil {width:214px;}
Równie łatwo będzie nam ogarnąć opis, więc od niego zaczniemy:
.profil2 {text-align:justify;padding:10px;text-transform: uppercase; color:black; font-family: ubuntu; font-size: 7px; letter-spacing: 1px;}

KOD CSS - część druga
Ustawienia dla profil1 będą zależeć od: szerokości ( udało nam się trochę to ogarnąć dzięki wykorzystaniu width ), długości tytułu ( ustawiam wszystko dla tytułu na 3 linijki ) i wielkości menu ( wykorzystam 4 linki ).
.profil1 {background-image:url(http://3.bp.blogspot.com/-qnCsgtcZ9jA/VX1NlHQTEpI/AAAAAAAAB1E/bvwQoWPIPT0/s1600/eokd.png);background-size:100%;border-radius:50%;transition: all 0.2s ease;-o-transition: all 0.2s ease;-webkit-transition: all 0.2s ease;-moz-transition: all 0.2s ease;overflow:hidden;}
Ustawiam tło jako zdjęcie. Dodałam background-size:100%, dzięki czemu za duże zdjęcie zmniejszyło się do wielkości naszego gadżetu i całość zaokrągliłam.

KOD CSS - część trzecia
Wykorzystamy padding, aby stworzyć eleganckie kółko.
.profil1 {background-image:url(http://3.bp.blogspot.com/-qnCsgtcZ9jA/VX1NlHQTEpI/AAAAAAAAB1E/bvwQoWPIPT0/s1600/eokd.png);background-size:100%;border-radius:50%;transition: all 0.2s ease;-o-transition: all 0.2s ease;-webkit-transition: all 0.2s ease;-moz-transition: all 0.2s ease;overflow:hidden;padding:70px 60px;}
Niestety tutaj najlepiej sprawdza się metoda prób i błędów. Powyższy zapis to padding: padding w pionie padding w poziomie ( bardzo wygodna postać dla tej własności przy tworzeniu okrągłych elementów ).

KOD CSS - część czwarta
Teraz uwaga, ustawiamy position:absolute dla linków ( .profillinki ) - sprawi to, że linki przestaną fizycznie zajmować miejsce ( i rozszerzać przestrzeń wewnątrz .profil1 - czyt. czyli kółko się musi popsuć ), ale nadal będą. Dodatkowo popracujemy nad tytułem. Tutaj początkowo może się nam piękne kółko popsuć, dlatego konieczna jest poprawka paddingu dla .profil1.
.profillinki {position:absolute;}
.profiltytul {font-family:oswald;font-style:italic;text-transform:uppercase;font-size:28px;font-weight:900;line-height:25px;color:#111;text-align:center;text-shadow:1px 1px 10px #eee;}
I co popsuło się? No popsuło.
Widzę, że padding w poziomie jest za duży i mój trzylinijkowy tytuł zajmuje cztery linijki, więc:
.profil1 {background-image:url(http://3.bp.blogspot.com/-qnCsgtcZ9jA/VX1NlHQTEpI/AAAAAAAAB1E/bvwQoWPIPT0/s1600/eokd.png);background-size:100%;border-radius:50%;transition: all 0.2s ease;-o-transition: all 0.2s ease;-webkit-transition: all 0.2s ease;-moz-transition: all 0.2s ease;overflow:hidden;padding:71px 50px;
Robię małą poprawkę paddingu, zmniejszam ten w poziomie o 10 i lekko koryguje całość w pionie.

KOD CSS - część piąta
Czas ustawić nasze menu. Na początek dodamy efekt dla linków ( .profillinki a ), aby wiedzieć ile mniej więcej miejsca one zajmą i jak będzie trzeba ustawić cały selektor ( .profillinki ).
.profillinki a { padding: 3px 6px; background-color: #aaa; font-family: calibri; font-size: 8px; text-transform:uppercase;text-align: center; color: #fff; display:block; cursor:pointer;margin-top: 3px; margin-right: 3px;font-weight:400;}

KOD CSS - część szósta
Czas ustawić już pełny selektor .profillinki. Wracamy do wpisanego wcześniej dla niego kodu .profillinki {position:absolute;}, dodajemy tło, aby dobrze było widać jaką przestrzeń zajmuje. Następnie pracujemy nad paddingiem, aby stworzył on takie same koło jak ustalany wcześniej profil1.
+ Ok, teoretycznie linki są elementem profil1, ale dzięki position:absolute zaczynają żyć one własnym życiem i możemy swobodnie tworzyć dla nich efekty.
.profillinki {position:absolute;background:#222;padding:69px 90px;border-radius:50%;top:0px;left:0px;opacity:0.8}
Ustawienie ciemnego tła i przezroczystości pomoże nam dobrze zobaczyć czy .profillinki pokrywa się dobrze z .profil1. Ustalenie pozycji top i left na 0px, ustali pozycje menu tak, że element przeniesie się na samą górę gadżetu, gdzie znajduje się .profil1 i naturalnie się z nim pokryje, o co nam chodziło.
Padding to już jednak kwestia prób i błędów. Najlepiej spróbować ustalić te same wartości co dla .profil1, jednak w 99% wartości te będą musiały być skorygowane.

KOD CSS - część siódma
Na zakończenie ukryjemy menu, dodamy przejście i nasze menu dopiero po najechaniu na obrazek pokaże się ciekawskim! Użyjemy do tego transform:scale - scale(0) sprawi, że cały element zniknie, a dodanie dla hover scale(1) sprawi, że nasze menu znowu się pojawi.
.profillinki {position:absolute;background:#222;padding:69px 90px;border-radius:50%;top:0px;left:0px;opacity:0.8;transform:scale(0);transition: all 0.2s ease;-o-transition: all 0.2s ease;-webkit-transition: all 0.2s ease;-moz-transition: all 0.2s ease;}
.profil1:hover .profillinki {transform:scale(1);transition: all 0.2s ease;-o-transition: all 0.2s ease;-webkit-transition: all 0.2s ease;-moz-transition: all 0.2s ease;}
Teraz uwaga. Hover jest ustawiony troszkę nie tak jak powinien, co nie? No bo my chcemy, aby profillinki sie pojawiały po najechaniu.
Prawda jest taka, że teoretycznie takie coś aktualnie nie istnieje. Nie można na ten element najechać ponieważ nie ma on nawet 1px. Ale wiemy, że jest on elementem większego diva profil1, dlatego możemy uzależnić pojawienie się profillinki od najchania na profil1 = .profil1:hover .profillinki.


Brawa dla każdego kto dotrwał do końca. Mam wrażenie, że trochę za dużo tego wyszło, biorąc pod uwagę, że wykonanie zajmuje naprawdę niewiele czasu. Coś tu się nie zgadza. ^o^
Mam nadzieję, że się przyda!

13 komentarzy:

  1. Kiedyś uda mi się zrobić szablon, z całą pewnością ;_;

    OdpowiedzUsuń
    Odpowiedzi
    1. Lubię to! xD Naprawdę, czuję to samo, co Ty!
      Pozdrawiam, Niah.

      Usuń
    2. Ale marudy z Was <3 Dacie radę! :3

      Usuń
  2. A jak zrobić podobny efekt, tylko zamiast linków pokazujących się po najechaniu kursorem był np. gadżet z obserwatorami?

    OdpowiedzUsuń
    Odpowiedzi
    1. Są dwa sposoby.
      W przypadku większej przestrzeni gadżetu ( jakiś obrazek 500x500, na których mieliby pojawiać się obserwatorzy ) można ustawić pozycje obserwatorów ( position:absolute raczej, ale potem radzić sobie za pomocą marginesów i przenosić gadżet. Zrezygnować z top/left, bo responsywność(?) może polecieć ). Po ustaleniu pozycji dodać opacity:0, a potem hover dla obserwatorów z opacity:1. Jednak tutaj będzie bez większych fajerwerków przy okazji najeżdżania myszką, bo obserwatorzy nie mają rodzica, który by pozwolił na wykorzystanie kodu podobnego do tego z ostatniego kroku w instrukcji powyżej.

      Druga opcja, taka jak wyżej ( ale znowu - trochę za mało miejsca jest w przykładzie, więc większy gadżet by był na miejscu i lepiej by się sprawdził ), ale zamiast "menu" z kodu wyżej umieścić kod dla obserwatorów ( tutaj krótko jak go w ogóle skołować ). I powinno działać.

      Ale, przyznaje się, żadnego sposobu nie testowałam i nie wiem jakie kody dodatkowe mogłyby być konieczne, żeby całość wyglądała schludnie i dobrze. Jednak jak znajdą się chętni, to mogę nad tym przysiąść i zrobić kontynuacje tej instrukcji. :)

      Usuń
  3. Heh, ja taki gadżet robię w 3-4 minuty. Po prostu obrazek przenoszę z hostingu do gadżetu HTML/JavaScript, obok wpisuję tekst i na koniec wpisuję w css'sie proste komendy związane z czcionką, wielkością, odległościami etc. c:
    Ale można i tak :D
    Tyler, do kiedy można wysyłać odpowiedzi do konkursu? :3

    OdpowiedzUsuń
    Odpowiedzi
    1. Oczywiście, że tak się da, ale jest większy problem ze stworzeniem schowanego/wyskakującego menu, bo brakuje nieszczęsnego rodzica. Opis tutaj trochę niepotrzebny, bo z nim, zakładam, że większość autorów faktycznie problemu nie ma. :P Ale w końcu jest wyskakujące menu/gadżet, o co było parę próśb, więc i tak jestem zadowolona.

      Do poniedziałku myślę. Później zmieniam chwilowo "miejsce" ( to jest wtorek 30 ), więc wolałabym mieć już wszystko gotowe w poniedziałek. :)

      Usuń
  4. Łał, jak głębiej się wczytam to na pewno skorzystam ;)

    OdpowiedzUsuń
    Odpowiedzi
    1. A jest mi bardzo miło. I polecam, polecam. :) Nie trzymaj się koniecznie efektu "pojawiania" tylko ze scalem, bo naprawdę tu dodać można masę rzeczy i super fajerwerkowe efekty wychodzą. :D Zostawić scala, dodać coś z Animatable i cuda na kiju się tworzy! :3

      Usuń
    2. Hej :) Zrobiłam wszystko według Twojej instrukcji, ale nie wiem dlaczego jak najeżdżam na dalszą nie drugą kartę to całość mi znika, http://for-the-world-you-are-nothing.blogspot.com/. Wiesz dlaczego tak się dzieje?

      Usuń
  5. Pobrałam szablon TAKE ME TO THE OCEAN na http://deer-sign.blogspot.com/.
    Dziękuję i pozdrawiam,
    maxie

    OdpowiedzUsuń
    Odpowiedzi
    1. Bardzo mi miło. :)
      Szablon nie był aktualizowany, więc w przypadku pojawienia się problemów, proszę pisać! :>

      Usuń
  6. Zajedwabisty ten gadżet. Muszę go gdzieś wykorzystać :)

    OdpowiedzUsuń

- +
Szablon wykonany przez Tyler