Strona portfolio. Jak się za to zabrać? – cz. 3 – HTML + CSS, part II – HOME.

Kolejny artykuł z serii portfolio. Dzisiaj skupimy się na HTML i CSS sekcji Home.

Seria strona portfolio.

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 – Hero.
  3. Część 3 – HTML + CSS, part II – czyli ten wpis 🙂 Opiszę jak wykonałem sekcji 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.

Pełny projekt dostępny do podglądu tutaj:

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

Sekcja Home.

To jest druga sekcja strony która wstępnie informuje użytkownika co to za strona i kogo. Zbuduję ją krok po kroku. Wygląda ona tak:

http://portfolio.home.bedekodzic.pl/

Pracę podzieliłem na 3 etapy.

Etap 1 – Sekcja, główny kontener i napisy.

Rozpoczynamy od budowy całej sekcji <section class=”home” id=“home”> czyli definiujemy wysokość i szerokość (100%), potem wypełnienie, w tym wypadku żółty gradient. Prościzna.

Potem tworzymy kontener <div class=“home-cont”> w którym będziemy umieszczać elementy sekcji. W tym wypadku będzie to tekst i przycisk skrolowania w dół. Teraz ustawimy szerokość kontenera na 80% width: 80%; aby zostawić marginesy. Będziemy robić to samo ze wszystkimi pozostałymi głównymi kontenerami w kolejnych sekcjach. Następnie środkujemy kontener względem sekcji margin: auto; i środkujemy tekst wewnątrz text-align: center;. Na koniec odsuwam go trochę od góry padding-top: 7%; żeby zostawić miejsce na MENU. Dobra teraz czas na zawartość.

W środku widać tekst wprowadzony za pomocą headerów h1 i h2. Należy je sformatować w CSS tzn. rodzaj, wielkość, kolor czcionek. Skąd wziąć fajne czcionki? Są conajmniej 2 sposoby. Pierwszy, ściągamy czcionkę w formacie .otf lub .ttf np. z Font Squirela  i umieszczamy gdzieś w katalogu projektu. Druga to Google Fonts. Tam wybieramy interesującą czcionkę i po wybraniu jej wyskakuje nam okienko z kodem który należy wklecić do CSS i link w HTML. Link umieszczamy w sekcji head index.html. Proste jak to! Uwaga, jak tworzycie strony miejcie na uwadze prawa autorskie bo nie wszystkie czcionki są darmowe.

Kolejny element to przycisk skrola <svg class=“scroll-what”> z linkiem do następnej sekcji <a href=“#next-section-id”>. Tutaj użyłem wektora. Jak go sformatować opisałem w POPRZEDNIM artykule tej serii.

Zauważyliście pewnie też w pliku HTML dziwne selektory typu <div class=“slide-in-top”>,<div class=“slide-in-left”>,<div class=“slide-in-right”>,<div class=“button-1”>. Po co one? Otóż każdy element wrzuciłem do innego selektora i w ostatecznym projekcie ustawie na nich display:none czyli sprawię, że będą niewidoczne. Po co? Aby potem JSem załadować je podczas przewijania strony. Tą samą technikę użyję we wszystkich kolejnych sekcjach.

Etap 2 – Pasek Menu.

Całe menu jest w oddzielnej sekcji <nav class=“nav”> gdyż będzie to niezależny element przesuwający się po całej stronie czyli position: fixed;. Logika jest analogiczna najpierw sekcja o wysokości 70px i szerokości 100%, a potem wyśrodkowany kontener <section class=“nav-items”> o szerokości 80% gdzie będę wrzucał elementy, a będzie ich 3.

Pierwszy element to logo. Najpierw robię oddzielny kontener z linkiem <a href=”#home” title=”Home” class=“logo-div”> gdzie wrzucę plik SVG (czyli wektor). Na kontenerze wrzucam float: left; czyli będzie przesunięty maksymalnie na lewo w obrębie nadrzędnej sekcji. Potem ustawiam wymiary, właściwości wektora i gotowe 🙂

Drugi element to lista MENU <div class=“menu”>. Ustawiłem jej wysokość, szerokość, położenie i kolor tła (przeźroczysty biały). Potem dodałem linki do poszczególnych sekcji przy pomocy <a> i wystylowałem na header h3. Po najechaniu subtelny efekt powiększenia na hoverze. Domyślnie lista menu będzie miała też ustawioną display:none gdyż będzie się ona pojawiała dopiero po kliknięciu w hamburgera.

Ostatnim elementem jest hamburger <div id=“nav-icon2″> 🙂 Tak na deser 🙂 Ten kod wziąłem z internetu i dopasowałem do własnych potrzeb. Jest długawy więc po prostu wytłumaczę o co w nim chodzi.

Składa się z 6 elementów <span>. Hamburger ma 3 “linie”. Każda z tych linii to 2 <span>y obok siebie, tak jakbyś podzielił/a linię na pół. Stylujemy w CSS wszystkie spany aby wyglądały jak hamburger. Następnie tworzymy pseudo-klasę open w której określamy nową pozycję spanów. W tym wypadku rotujemy 4 z nich o 45deg, przesuwany w pionie i poziomie aby stworzyć przycisk X następnie usuwany 2 zbędne spany.

Nowa pozycja spanów jest osiągana poprzez transformację która uruchamia się po kliknięciu na hamburgera. To się dzieję poprzez JSa więc narazie nie widać żadnych efektów tego bajeru.

Etap 3 – Selektor zmiany języka.

Tutaj sprawa jest narazie jasna. Po prostu tworzymy selektor <section class=“language”> i przypisujemy mu 2 wartości tzn. <option value=“en”>EN</option> i <option value=“pl”>PL</option>. Następnie dowolnie stylujemy w CSS. O dziwo stylowanie domyślnych elementów HTML jak np. <select> nie jest takie proste i często osiągnięcie pożądanych efektów wymaga poważniejszej ingerencji w kod lub instalowanie odpowiednich wtyczek np. custom scroll. Ważne natomiast jest nadanie mu wysokiego z-index aby był zawsze widoczny i position:fixed aby nam się przewijał wraz ze stroną.

Resztę sprawy zmiany języka przy technice którą ja zastosowałem załatwia się w JSie więc narazie to by było wszystko.

Komentarz.

Ktoś patrząc na wyniki pokazane w CodePenie może zadać pytanie: Dlaczego niektóre elementy wyglądają inaczej? Otóż tworząc moją stronę miałem załadowanego Bootstrapa czyli zbiór gotowych formatów elementów HTML. Co prawda nie użyłem żadnego natywnego elementu Bootstrapa jednak mimo wszystko aplikuje on pewne podstawowe formatowanie np. nie widzimy marginu w konkretnej sekcji lub selektor wygląda inaczej.

CodePen takiego domyślnego formatowania nie ma lub ma nieco inne. Stąd widać różnie między tym co jest w CodePen a tym co widać np. na serwerze.

Podsumowanie.

Dzisiaj opisałem kilka nowych i ciekawych elementów jak np. menu czy selektor zmiany języka. Kolejna część przyniesie kolejne fajne rzeczy więc zapraszam do lektury!