#35. Galeria z flexboxa

Szkielet HTML

W tym materiale stworzymy własną galerię zdjęć opartą na flexboxie, który poznaliśmy wcześniej. Podstawową zaletą będzie dynamiczne dostosowywanie się do rozmiaru okna przeglądarki. Poniższe punkty dotyczą szkieletu strony www więc zaczynamy jak zwykle na spokojnie 😉

  1. Uruchom codesandbox i stwórz nowy projekt. 
  2. Dodaj następujący tytuł strony “Galeria Flexi”.
  3. W ciele dokumentu dodaj nagłówek h1. Umieść w nim następujący tytuł: “Galeria”.
  4. Pod nagłówkiem dodaj diva z klasą “flex-row“. W nim dodaj trzy div-y z identycznymi klasami: “element flex-1“.
  5. Pod zamknięciem diva “flex-row“, dodaj kolejnego diva z klasą: “inside-container“.  W nim dodaj diva z klasą “flex-row“.  W środku umieść dwa divy z identycznymi klasami: “element flex-1“.
ĆWICZENIE. KLIKNIJ, ABY PODEJRZEĆ…

dank-cloud-nfmdh

dank-cloud-nfmdh by danielminschinski

Kolejne klasy. Element “inside-container”

Kolejnym etapem będzie nadanie nowych klas dla obrazków i utworzenie kolejnych elementów zagnieżdżonych. Będą wykorzystywały metodę “flex-direction” umożliwiającą wyświetlanie elementów kolumnowo, dzięki czemu stworzymy środkową część galerii.

  1. W divie o klasie “inside-container” stwórz trzy divy o klasach “flex-column flex-1“.
  2. W pierwszym i trzecim divie z klasą “flex-column” zagnieźdź po dwa divy o klasach “element flex-1“.
  3. W drugim divie z klasą “flex-column” utwórz trzy divy z klasą “element” (bez klasy “flex-1“), drugiemu z nich dodatkowo dodaj klasę “element-big“.
  4. Każdemu elementowi z klasami “element” dodaj odpowiednią klasę “img-x“, gdzie “x” to numer elementu (wg kolejności).
ĆWICZENIE. KLIKNIJ, ABY PODEJRZEĆ…

competent-leaf-9rg2v

competent-leaf-9rg2v by danielminschinski

Stylowanie 

W tym kroku będziemy ustalać wygląd wcześniej utworzonych kontenerów. Użyjemy w tym celu właściwości, które zapanują nad kierunkiem wyświetlania i zawijania elementów.

  1. W pliku style.css na samej górze dodaj dwanaście obrazków z internetu. W tym celu utwórz dwanaście reguł “img-X” gdzie “X” to kolejny numer. W regule dodaj właściwość “background-image: url(“link zdjęcia”);”.
  2. W kolejnej regule “element” nadaj 90px wysokości, marginesy o wielkości 5px, border-radius: 5px, background-position: center; oraz background-size: cover;.
  3. Stwórz selektor grupowy dla klas inside-container, flex-column oraz flex-row i nadaj im właściwości: display: flex; oraz flex-wrap: wrap;.
  4. Dla flex-column utwórz regułę zawierającą właściwość flex-direction: column;
  5. Utwórz selektor dla flex-1 i nadaj mu właściwość flex: 1;
ĆWICZENIE. KLIKNIJ, ABY PODEJRZEĆ…

clever-yonath-r7b85

clever-yonath-r7b85 by danielminschinski

Stylowanie – ciąg dalszy

Ostatnim etapem będzie stylowanie pozostałych elementów takich jak body, nagłówka, oraz ustawienie wysokości środkowego obrazka.  Dodamy również efekt najechania kursorem na obrazek, tzn. stan hover.

  1. Dodaj regułę dla body. Ustaw właściwość z dowolnym kolorem tła.
  2. Utwórz regułę dla h1. Nadaj jej właściwość font-family: ‘Open Sans’, sans-serif; text-align: center, color: dowolny; oraz czcionkę na 40px.
  3. Stwórz regułę dla element-big i nadaj jej właściwość height: 180px;
  4. Utwórz regułę dla elementów o klasie element podczas najechania kursorem na element body i nadaj mu opacity: 0.3;
  5. Ostatnim krokiem będzie stworzenie selektora :hover dla elementów o klasie element będącymi potomkami elementu body i nadaj mi właściwość opacity: 1; i cursor: pointer;
ĆWICZENIE. KLIKNIJ, ABY PODEJRZEĆ…

jovial-lamport-dumui

jovial-lamport-dumui by danielminschinski

Takim o to ćwiczeniem chciałbym zakończyć ten rozdział😉 Mam nadzieję że spodobało Wam się powyższe zadanie podsumowujące flexa w praktyce.

W środę przed wigilią opublikuję kolejny zakres materiału z Planu nauki Frontend Developera. Pierwszy materiał z nowego rozdziału opublikuję 30 grudnia📅😉

Życzę Wszystkim Wesołych Świąt🎅🎄☃❄

Zapraszam do subskrypcji 🔽 i polubienia mojego blogowo/usługowego ▶  fb

Chcesz na bieżąco otrzymywać informację o nowych materiałach? Zapisz się do NEWSLETTERA!