Strona portfolio. Jak się za to zabrać? – cz. 2 – HTML + CSS, part I – HERO.

Chcesz zbudować swoją stronę portfolio? Myślisz nad pomysłem i realizacją? W tym artykule opiszę na zasadzie Case Study jak wykonać poszczególne elementy w takim projekcie. Dzisiaj omawiam start, czyli HTML i CSS. Zaczynamy 🙂

Seria strona portfolio.

Ten wpis jest jednym z całego cyklu który opisuje jak wykonać taką stronę od początku do końca. W artykułach będę opisywał “logikę” stojącą za wybraniem takich a nie innych rozwiązań. Po globalny kod zapraszam do narzędzia “Zbadaj” w Twojej przeglądarce.

W skład serii wchodzą:

  1. Część 1 – Jak stworzyć projekt graficzny. TUTAJ opisywałem jak się zabrać do tworzenia layoutu.
  2. Część 2 – HTML + CSS, part I – czyli ten wpis 🙂 Opiszę jak wykonałem sekcji Hero.
  3. Część 3 – HTML + CSS, part II – sekcja Home.
  4. Część 4 – HTML + CSS, part III – sekcja What.
  5. Część 5 – HTML + CSS, part IV – sekcja About.
  6. Część 6 – HTML + CSS, part V – sekcja Contact.
  7. Część 7 – HTML + CSS, part VI – kwestie globalne strony np. head, linki, responsywność.
  8. Część 8 – JavaScript – definiowanie zachowania poszczególnych elementów na stronie.

Przedmowa.

Jako, że od jakiegoś czasu przeglądałem strony początkujących developerów i zauważałem podobieństwa wynikające m.in. z użycia Bootstrapa czy szablonów z internetu postanowiłem, że moja strona będzie 100% spersonalizowana tzn. bez Bootstrapa czy zewnętrznych pluginów. Cały kod (a raczej zdecydowaną większość) napiszę sam.

Huh po wielu godzinach pracy udało mi się w końcu zakończyć pracę nad moją stroną portfolio 🙂 Wrzuciłem ją na serwer bloga:

http://portfolio.full.bedekodzic.pl/

Teraz trzeba tylko zrobić sobie jakieś projekty do portfolio 😛

Mój kod jest zapewne daleki od najlepszych praktyk i można by wiele rzeczy zrobić lepiej. Jest to w zasadzie moja pierwsza poważna strona i wychodzę z założenia, że lepiej ją skończyć i oddać niż próbować zrobić z niej doskonałą kiedy nie ma się takich umiejętności. Wolę zabrać się do kolejnego projektu i zrobić go już lepiej niż siedzieć nad tym w nieskończoność.

Sekcja Hero.

To jest pierwsza sekcja strony która wyświetla się użytkownikowi na początku. Zbuduję ją krok po kroku. Wygląda tak:

http://portfolio.hero.bedekodzic.pl/

Krok 1 – Sekcja i główny kontener.

Sekcja hero czyli <section class=“hero”>,  tło dla wszystkiego co będzie w środku. Zajmuje 100% szerokości strony i w tym wypadku zakładamy, że wyświetlamy ją na desktopie więc ustawiłem stałą wysokość 1080px (to się będzie zmieniać kiedy będzie ustawiana responsywność). Do tego tło w gradiencie i pozycja relative tzn. ten selektor (<section class=“hero”>) będzie punktem odniesienia w ustalaniu pozycji dla wszystkich innych elementów na stronie. W podobny sposób ustawiam każdą inną sekcję na tej stronie.

Drugim selektorem jest <div class=“hero-content”> – główny kontener gdzie będę wrzucał mniejsze elementy, narazie nic w nim nie ma. Ma pozycję absolute czyli będzie elementem przemieszczanym względem elementu relative. Przesunąłem go o 40% wysokości sekcji głównej (hero) od góry. Wyśrodkowałem wszystkie elementy w środku (których jeszcze nie ma) i ustawiłem z-index na 10. Czym jest z-index? W praktyce im większy tym  element będzie zasłaniał elementy z mniejszą wartością jeśli się pokrywają na stronie. Domyślnie ma wartość 1 (albo 0, nie jestem pewny).

Krok 2 – Elementy kontenera.

Teraz dodaje 3 elementy do kontenera (zjedź na dół w oknie CodePen).

Pierwszy czyli animacja poklatkowa z logiem. Efekt jest fajny i prosty w kodzie. Problemem jest przygotowanie pliku graficznego png. Należy przygotować logo o konkretnych wymiarach co do pixela, w moim wypadku jest to 300x88px i potem dodać 1 px wolnego miejsca u dołu. Ostatecznie logo ma wymiary 300x89px. Następnie kopiujemy logo tyle razy, ile chcemy mieć klatek w swojej animacji za każdym razem zmieniając kolor/usuwając cześć loga, w moim wypadku 79 klatek. Precyzja jest kluczowa. Podgląd gotowego pliku jest dostępny TUTAJ

Jak plik jest gotowy <div class=”logo-animate “> należy go odpowiednio sformatować czyli wymiary,  tło, wyśrodkować (margin:auto) i zdefiniować animację czyli animation: logo 4s steps(79, end) tzn. nazwa-logo, trwanie-4s, ilość klatek-79. Animację należy potem wywołać za pomocą @keyframes. W praktyce plik png przesuwa się od góry do dołu tworząc fajny efekt.

Drugi element czyli przycisk resetu animacji <svg id=”reload”>. Jego zadaniem jest po kliknięciu rozpocząć animację na nowo. Do tej czynności potrzebny jest JS więc narazie skupię się na samym elemencie. Jest to element wektorowy który przygotowałem w jednym z TYCH programów. Wektory możesz też ściągnąć z neta. Po przygotowaniu i zapisaniu pliku .svg należy go przekonwertować w konwerterze np.online takim jak TEN. Konwertor wypluwa kod który wklejasz do html i stylujesz w CSS. Ta metoda daje sporo kontroli nad wektorem np.zmiana kolorów.

Przy stylowaniu przycisku czyli .hero #reload, normalnie- wymiary i kolor. Kolor wektorów ustawia się za pomocą fill.  Poza tym w kodzie CSS widzicie 5 różnych właściwości transition. Co to? Tutaj po prostu definiuje sposób transformacji która będzie się działa po najechaniu myszką tzn. na hoverze. Ta sekwencja będzie się powtarzała wielokrotnie kiedy będę stylował inne animowane elementy.  Po najechaniu myszką element obraca się o 270deg i zmienia kolor.

W kodzie HTML możecie zauważyć znaczniki <br> znaczą one po prostu nową linijkę w projekcie tak jak ENTER w pliku tekstowym. Pomogłem sobie w ten sposób ale to nie jest najlepsza praktyka stylowania położenia elementów na ekranie.

Trzeci element czyli przycisk przewijania do następnej sekcji o klasie .hero .scroll-home. Tutaj podobnie jak w przypadku resetu animacji mamy do czynienia z wektorem. Stworzyłem go analogicznie tym razem jednak po najechaniu ikona się powiększa. Po kliknięciu zabierze nas do kolejnej sekcji tzn. home. Jak to zdefiniować? Sekcji home definiuje id=“home”, następnie ikonę wrzucam w selektor a i ustawiam <a href=“#home”>. Można w ten sposób definiować dowolne linki do innych sekcji w obrębie naszego pliku index.html.

Krok 3 – Jeleń.

Ostatni krok w tej sekcji – dodanie grafiki jelenia wykonanej techniką poligonową (czyli trójkąty i inne figury tworzące w sumie jakiś konkretny kształt w tym wypadku głowa jelenia). Tutaj uwaga, ten CodePen nie pokazuje odpowiednio tej grafiki. Dlaczego? Bo jest za szeroka i w pierwotnym projekcie wyłączyłem jej wyświetlanie dla wąskich ekranów (czyt. urządzeń mobilnych lub małych okien w przeglądarce) Aby zobaczyć obraz wraz kodem najlepiej otwórz go na nowym oknie w pełnej szerokości.

Plik PNG przygotowałem ręcznie. Potem aby zmniejszyć jego rozmiar użyłem TEGO konwertera. Na plikach PNG można zaoszczędzić nawet 40% miejsca na dysku. Wiem, są do tego narzędzia automatyczne ale o tym w innym wpisie. Następnie utworzyłem selektor <div class=“deer”> i umieściłem go poza głównym kontenerem. Dlaczego? Bo chciałem manewrować obrazem względem całej sekcji HERO czyli ustawiłem mu position: absolute i przesunąłem na sam dół sekcji bottom: 0;. Następnie w CSS dodałem i wyśrodkowałem grafikę. W CodePenie więcej szczegółów. To by było w zasadzie wszystko 🙂

Podsumowanie.

Powyżej szczegółowo opisałem jak wykonałem sekcję HERO wraz z przykładami kodu i podglądem. Mam nadzieję, że ten przykład będzie dla kogoś przydatny 🙂 Do zobaczenia w następnym poście z serii Portfolio. Będę opisywał tworzenie sekcji HOME.