Blog o budowie stron i marketingu - Aurelia Sypniewska
Blog o budowie stron i marketingu - Aurelia Sypniewska
Tym razem pokażę wam jak zbudować prostą oś czasu (timeline, linia czasu) na stronie internetowej z pomocą HTML i CSS. By ją zbudować i zrozumieć jak ją rozbudować lub przebudować przyda się przynajmniej podstawową wiedzę z obu języków.
Właściwość aspect-ratio umożliwia zdefiniowanie pożądanej szerokości do wysokości elementu znajdującego się w kontenerze, polu. W praktyce umożliwia nam to dostosowywanie się zawartości w obszarze do wymiarów przeglądarki. Być może wydaje się to na początku mało użyteczne jednak trzeba pamiętać, że w dzisiejszych czasach strony wyświetlamy na różnej wielkości urządzeniach.
Id (identyfikatory) i Class (klasy) to dwa rodzaje elementów (selektor) umożliwiające „połączenie” / „przypisanie” ze sobą / do siebie HTML i CSS (ang. Cascading Style Sheets). Dzięki nim nie musimy wprowadzać kodu CSS bezpośrednio na dany element.
W tym wpisie pokażę wam jak w prosty sposób ustawić wysokość elementu blokowego takiego jak <div> czy <section> na wysokość okna przeglądarki. Czyli na całą widoczną część strony – 100% wysokości.
Dzisiaj pokażę wam jak w bardzo prosty sposób możemy powiązać ze sobą elementy, elementy siostrzane. Czyli takie, które znajdują się obok siebie (mają wspólnego rodzica) i nie są w żaden inny sposób ze sobą powiazane. W większości przypadków kiedy oddziałujemy na dane obiekt są one ze sobą fizycznie powiązane.
Dzisiaj zajmiemy się tematyką numerowania (liczenia, punktowania) elementów HTML takich jak tabela lub <div>.
Właściwość CSS mix-blend-mode określa sposób łączenia się ze sobą elementu nadrzędnego np. obrazka z tłem umieszczonym pod nim.
Właściwość CSS object-position służy do określania pozycji początkowej (położenia początkowego) wybranego elementu HTML w kontenerze.
Z pomocą właściwości object-fit określamy w jaki sposób interesujący nas element HTML (np. obrazek) będzie wypełnić dany obszar na stronie internetowej.
Zanim przejdę do zaprezentowania właściwości oraz możliwości pracy na selektorach, chciałam przybliżyć tematykę rodzeństwa.
Usuwanie obramowania klikniętych linków jest dosyć proste i nie wymaga jakieś dużej wiedzy z CSS lub HTML.
Z pomocą własność CSS clip możemy określić, który fragment danego obiektu (np. grafiki) ma być widoczny lub też nie.
![Wysokość elementu, sekcji na wysokość okna przeglądarki [CSS]](https://aurainweb.pl/wp-content/uploads/2019/07/comp5.jpg)
![Wpływanie na elementy znajdujące się obok siebie (siostrzane) [CSS]](https://aurainweb.pl/wp-content/uploads/2019/08/com.jpg)
![Mieszanie kolorów z selektorem mix-blend-mode [CSS]](https://aurainweb.pl/wp-content/uploads/2017/11/mieszanie-kolorow.jpg)
