Blog o budowie stron i marketingu - Aurelia Sypniewska
Blog o budowie stron i marketingu - Aurelia Sypniewska
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.
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ś zajmiemy się właściwością CSS position z pomocą, której możemy modyfikować pozycję różnych elementów na stronie. Chodzi np. o zatrzymanie w pewnym miejscu <div>, <header> czy wysunięcie elementu HTML z okalającego go kontenera (rodzica).
Znacznik <span> dość często jest nie doceniany przez osoby, które dopiero zaczynają naukę HTML i CSS. Jest tak dlatego, że nie zdają sobie one sprawy z jego potencjału.
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.
Od razu przyznam się, że kiedy pierwszy raz zobaczyłam skośne tło na stronie internetowej to myślałam, że ktoś obrócił tło strony. To była moja pierwsza myśl i jak się kazało błędna.
Dzisiaj wracam do tematyki animacji jakich można użyć na stronie internetowej. Do tej pory pokazałam takie dość klasyczne animacje głównie na obrazkach i grafikach. Tym razem na swój warsztat wezmę więc tekst.
Tym razem pokażę wam jak w bardzo prosty sposób uzyskać na stronie internetowej efekt obrazka pojawiającego się po najechaniu kursorem myszy na link. Inne podobne efekty aktywowane położeniem kursora myszy znajdziecie w serii :hover.
Temat plików SVG nie jest nowy na moim blogu – poruszyłam jego tematykę w sumie już kilkakrotnie. Tym razem postaram się wam pokazać jak można umieścić taki plik na stronie internetowej.
Dzisiaj coś trochę z innej bajki ponieważ zajmę się tworzeniem zakładek, tabów z pomocą jquery. Będzie to coś co w dużym stopniu przypomina menu na stronie (w zachowaniu i wyglądzie), choć działa nieco inaczej.
Zapewne każdy z was spotkał się na stronie internetowej z efektem rozwijającego /chowającego się (toggle) po kliknięciu np. fragment tekstu lub obrazka.
W tym tutorialu pokażę jak zrobić bardzo proste Sticky Note (karteczek z notatkami) na stronę internetową, używając do tego jedynie HTML i CSS.
![Budujemy prostą galerię obrazów masonry na stronę internetową [CSS]](https://aurainweb.pl/wp-content/uploads/2019/12/masonery-t1.jpg)
![Jak osiągnąć efekt skośnego tła na stronie? [CSS]](https://aurainweb.pl/wp-content/uploads/2019/10/office-16.jpg)
![Pojawiający się obrazek po najechaniu kursorem myszy [CSS]](https://aurainweb.pl/wp-content/uploads/2019/07/pokarz.jpg)
