#33. Dwukolumnowy szkielet

Szkielet to podstawa❗ Model flexboxa został stworzony, aby wykorzystywać go do budowy szkieletów (układów) stron www. Poniżej zobaczysz, jak to robić od podstaw. Aby zbudować elastyczny szkielet, musimy mieć najpierw podstawę w postaci elementów HTML. Spójrz na poniższy przykład. Przeanalizuj go. epic-breeze-e6ubq epic-breeze-e6ubq by danielminschinski Właściwości kontenera Czas na właściwości kontenera. Chcemy żeby wyświetlał się

Czytaj więcej

#32. Pozycjonowanie elementów

Właściwość justify-content Jeśli elementy, tzn.boxy nie wykorzystują całego dostępnego miejsca kontenera, to możemy zarządzać nimi jak mają być rozmieszczone. Właściwość justify-content jest złotym środkiem na rozwiązanie problemu. Przyjmuję ona następujące wartości: flex-start – wartość domyślna, elementy są wyświetlane od początku kontenera, flex-end – elementy są wyświetlane od końca kontenera, center – elementy są wyświetlane pośrodku

Czytaj więcej

#31. Wybieramy kierunek wyświetlania

Właściwość flex-direction Idąc dalej z modelem flexbox, poznajmy właściwość flex-direction. Odpowiada on za ustawienie kolejności wyświetlania wszystkich elementów w kontenerze. Niezależnie od tego w jaki sposób są one ułożone w kodzie HTML, zawsze możemy zmienić kierunek wyświetlania. Poznajmy wartości które przyjmuje właściwość flex-direction: row (wartość domyslna) – elementy wyświetlają się horyzontalnie w wierszu – od

Czytaj więcej

#30. Elastyczne boksy

Wprowadzenie Flexbox to metoda dzięki której zbudujemy layout. Został wprowadzony wraz z CSS3. Powstał w odpowiedzi na potrzebę pozyskania “narzędzia” do tworzenia układów stron.  Do tej pory, również na moim blogu, używaliśmy np. właściwość float. Dzięki poznawanej metodzie nie będzie konieczności już z niej korzystania. Podstawą dla podejścia flexbox jest kontener, wewnątrz którego zarządzamy elementami i sposobem

Czytaj więcej

#29. Wizytówka www📇

HTML-owy szkielet😉 Zaczynamy pracę nad stroną wizytówką. Naszym pierwszym krokiem w budowie strony będzie stworzenie struktury dokumentu HTML. Stworzymy dwa główne kontenery oraz wypełnimy je potrzebnymi tagami. Pierwszy będzie służył jako miejsce na tekst, nagłówek i przycisk, a drugi będzie zawierał treść strony. Dodamy do zawartości strony treść składającą się z nagłówków, ikon i tekstu

Czytaj więcej

#28. Formatowanie deklaracji CSS

Wartość deklaracji – cztery części Przykłady które prezentowałem na moim blogu, oparte były już na takich deklaracjach czterowartościowych. Np. właściwość: border: solid 1px grey; Powyższa deklaracja to przykład tzw. skróconej deklaracji CSS. Nazwa dla niektórych właściwości odnosi się też do innej kwestii: kierunku podawania wartości. Zdarza się nieraz tak, że potrzebujemy zadeklarować różne wartości dla

Czytaj więcej

#27. Jednostki miar

Rodzaje jednostek Większość właściwości w stylach przyjmuje wartości liczbowe. Biorąc pod uwagę wysokość elementu, rozmiar czcionki bądź parametry pozycji, zawsze określamy wartości liczbowe oraz jednostkę miary. Poniżej dodaję najczęstsze jednostki miar: px – najważniejsza jednostka, określająca wielkość w pikselach, np. dla monitora komputera, % – procentowa wartość jest zależna od kontekstu, np. szerokości nadrzędnego kontenera,

Czytaj więcej

#26. Właściwość overflow

Overflow – właściwość porządkująca Podczas tworzenia strony, zawierającą sporą ilość treści lub elementów, możemy trafić na wystającą zawartość przeznaczoną dla nich przestrzeń. Zazwyczaj tak się dzieję gdy mamy ustawiony kontener o określonych wymiarach i umieścimy w niego więcej tekstu niż jest w stanie pomieścić.Właściwość overflow decyduję o tym, co ma zrobić z tym nadmiarem zawartości.Poniżej po

Czytaj więcej

#25. Stany elementów

Pseudoklasy – o co chodzi❓ W HTML-u elementy, w zależności od działań użytkownika, z pomocą CSS, mogą zmienić swój wygląd. Służą do tego tzw. pseudoklasy CSS Pseudoklasa pozwala ustawić wygląd elementu, zależnie od tego w jakim stanie się znajduję lub jaką akcję na nim wykonano. Poniżej przedstawiam konstrukcję reguły z pseudoklasą: .klasa-lub-tag:stanpseudoklasy {<br /><br />

Czytaj więcej