Blog o budowie stron i marketingu - Aurelia Sypniewska
Blog o budowie stron i marketingu - Aurelia Sypniewska
Zmniejszający się na stronie pasek nawigacyjny (nav, header) to dość często spotykany efekt. Utworzenie go wcale nie wymaga dużego nakładu czasu a jedynie znajomości odpowiednich właściwości. Zazwyczaj uzyskuje się go dzięki CSS i JavaScript (lub innej bibliotece JS często jest to jQuery).
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.
W tym artykule pokażę wam jak w bardzo prosty sposób zastąpić grafikę, obrazek kodem CSS. Większość efektów jakie poniżej zobaczycie stała się możliwa wraz z rozwojem CSS. A tym samym ułatwiło życie wielu osobą budującym strony internetowe.
Tematem jaki tym razem chce poruszyć jest tło poruszające się za kursorem myszy. W praktyce końcowym efektem będzie tło będzie podrożało podążające za ruchem myszki odsłaniając lub chowając fragmenty obrazu, zdjęcia lub grafiki umieszczonej w tle. Efekt ten można użyć jako np. tło elementu lub całej sekcji strony.
Dzisiaj pokażę wam jak w bardzo prosty sposób stworzyć przezroczysty napis z obramowaniem na stronę internetową korzystając jedynie z HTML i CSS. Do wykonania tego efektu będzie nam też potrzebna podstawowa wiedza z obu tych języków + kilka mniej znanych właściwości CSS.
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ś pokażę wam jak zbudować prosty dynamicznie ładujący się pasek postępu czyli z angielskiego dynamic progress bar.
Dziś z pomocą jQuery zbuduję bardzo prosty wysuwany panel na stronę. Mój Panel będzie działać na zasadzie podobnej jak w przypadku menu na stronie typu RWD. Czyli klikamy w obiekt i z boku wysunie nam się do tej pory schowany obiekt. Po kolejnym kliknięciu zostanie on ponownie schowany.
Dziś pokażę jak zbudować prosty slider w formie akordeonu. Od razu uprzedzam, że przyspieszyłam sobie trochę pracę korzystając z Grida wbudowanego w Bootstrap 4. Dlatego części elementów nie będę omawiać. Z pewnością jednak znajomość tej biblioteki może okazać się pomocna.
Dzisiaj zbudujemy bardzo prostą galerię obrazów w stylu masonry (pionowe) z pomocą CSS. No dobrze, ale z pewnością część z was zastanawia się co to jest te masonry. W języku angielskim słowo to oznacza kamieniarstwo, murarstwo.
![Dynamicznie ładujący się progress bar [Bootstrap]](https://aurainweb.pl/wp-content/uploads/2020/02/bootstrap.jpg)
![Budujemy prostą galerię obrazów masonry na stronę internetową [CSS]](https://aurainweb.pl/wp-content/uploads/2019/12/masonery-t1.jpg)