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).
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.
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.
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.
Tym razem zajmiemy się tematyką blokowania nagłówków tabeli na stronie internetowej. Umożliwi to nam budowanie bardziej zaawansowanych tabel na stronach takich nieco przypominających te z Excela lub innego arkusza kalkulacyjnego. Przynajmniej a wyglądu.
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.
Tematem jakim dziś się zajmiemy będą responsywne tabele na stronie internetowej lub jak kto woli RWD Tables. Jak zapewne wiecie responsywność jest obecnie jednym z podstawowych wymogów jakie musi spełnić witryna internetowa a tabelki same z siebie zbytnio takie nie są.
Pseudoklasa CSS :nth-last-child() to selektor dopasowujący elementy HTML będące kolejnym dzieckiem swojego rodzica, innymi słowy należące do pewnej grupy (typu) posiadających ten sam element nadrzędny. Jak sama nazwa mówi będziemy w tym przypadku zaczynać od dołu grupy czyli ostatniego dziecka.
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.
