Last Updated on 14 stycznia 2024 by Mariusz Tomczak
Zlecenie polega na przygotowaniu CSS, pozwalającego na uzyskanie efektu Inverted Border Radius. CSS musi działać na blokach Kadence. Kluczowa jest efekt dostosowywał się do różnych rozdzielczości i rodzajów ekranu (był responsywny)
Powinien działać:
- w sekcjach
- w bloku “image”
- w bloku “adv text”
- w bloku “info box”
Efekt nr 1 do osiągnięcia
CSS powinien wykonywać zaokrąglenia zaznaczone na obrazku. Długość tła powinna dostosowywać się do długości tekstu. Wydaje się, że CSS powinien działać dla tła dodanego dla bloku adv tekst. Bloki adv tekst oddzielne dla każdego wiersza. Alternatywnie CSS dla sekcji, w której osadzone są bloki adv tekst.
Efekt nr 2 do osiągnięcia
Zaokrąglenie sekcji, w której osadzone są dowolne bloki, np. image, tekst. CSS powinien zaokrąglać dowolnie wybrany róg sekcji (lub kilka rogów). Zaokrąglenie o kształcie pozwalającym osadzić okrągłą ikonę lub kształt klawisza (poziomy lub pionowy)
Efekt nr 3 do osiągnięcia
Zaokrąglenie sekcji lub bloku tekst z białym tłem. Sekcja osadzona w row (z obrazkiem lub tłem)
Efekt nr 4 do osiągnięcia
CSS, który powoli na ułożenie bloku “section” o dwóch kolumnach tak, jak na obrazku. W sekcjach osadzane będą bloki text, image lub inne.
Efekt nr 5 do osiągnięcia
CSS, który powoli na zmianę kształtu sekcji lub osadzonego w sekcji bloku “info box” Tak aby osiągnąć wizualizację przypominającą teczkę akt.
Zasoby
Na youtube jest mnóstwo poradników. Przykładowo: