Blog o budowie stron i marketingu - Aurelia Sypniewska
Blog o budowie stron i marketingu - Aurelia Sypniewska
Dziś pokażę wam jak zrobić bardzo prosty pasek ikon (Icon Bar) na stronę internetową używając do tego HTML i CSS. Pasek taki czasami wykorzystywany jest jako dodatkowe menu nawigacyjne. Jak w większości przypadków pracy z HTML i CSS, w HTML stworzona jest cała struktura paska a CSS decyduje o ich wyglądzie i położeniu.
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.
Tym razem pokaże wam jak zbudować bardzo prosty slideshow (pokazu slajdów), który później będziecie mogli rozbudować o dodatkowe efekty. Slideshow zbuduję z pomocą HTML, CSS i JavaScript.
Pseudo-element CSS ::backdrop stanowi pole o wielkości okna bezpośrednio za obiektem. Można więc uznać, że jest to pewna forma tła.
Pseudoklasa CSS :nth-child() to selektor oddziałujący na elementy, które spełniają określone warunki. Przykładowo są 3 / 2 elementem potomnym w jakiś kontenerze lub na jakieś liście.
Właściwość CSS backdrop-filter należy do grupy filtrów z ich pomocą możemy wpływać na rozmycie tła w elemencie blokowym np. <div>, <span>, <p>. Właściwość ta doskonale się sprawdzi w sytuacji kiedy chcemy umieścić tekst na grafice.
Dziś zajmiemy się tematyką rozmieszczania elementów na stronie internetowej. Do tego celu na stronach wykorzystuje się elementy takie jak <div>, <header> czy <footer>. Nas dziś będzie interesował <div>.
Aktualnie w budowie do budowy stron internetowych wykorzystywany jest głównie HTML 5 (choć nie wiadomo jak długo to jeszcze potrwa). Wciąż jednak spotkać można witryny internetowe, które napisano w HTML4. Dlatego też postanowiłam porównać ze sobą obie wersje.
Istnieje kilka metod z pomocą, których można dodać do strony internetowej opartej o HTML arkuszy CSS oraz plików JS (JavaScript). Dziś postaram się wam je przybliżyć.
Dziś pokażę wam jak w prosty sposób zbudować ciekawy slider – galerię (baner) zdjęć składającą się z 5 zdjęć. Zdjęcia będą zaś pokazywać się po kliknięciu w przycisk – czyli interakcji z użytkownikiem.
Dziś zajmę się efektami jakie można uzyskać z pomocą „Checkbox„.
Media query to bardzo użyteczna „zmienna”, „zapytanie” wprowadzone w CSS3. Prawidłowo użyta umożliwia dostosowanie wyglądu strony w zależności od np. szerokości ekranu, rodzaju urządzenia. Z tego powodu spotykana jest ona na każdej stronie typu RWD.
![Ciekawe efekty i użyteczne zastosowania Checkbox na stronie internetowej [CSS]](https://aurainweb.pl/wp-content/uploads/2019/09/office-2.jpg)
![Jak używać @media query? Kilka przydatnych przykładów. [CSS3]](https://aurainweb.pl/wp-content/uploads/2019/10/mobile.jpg)