Niedawno trafiłem na artykuł dotyczący dynamicznego wydłużania podkreślenia wpisywanego tekstu. Rozwiązanie opisywane w artykule jest zastosowane w wyszukiwarce serwisu TripAdvisor. Opiera się o bibliotekę React, a elementem podkreślenia "śledzącym" długość tekstu jest element SPAN.

My dziś podejmiemy wyzwanie i zrobimy to inaczej. Bez użycia JavaScript.

Wydusiłeś kiedyś wszystkie informacje z CSS, na tyle, że zabrakło kolejnej ramki do elementu na stronie? Chciałoby się rzec: The border is not enough. Jeśli tak się stało, to dziś mam dla Ciebie tajną misję polegającą na znalezieniu dwóch nowych agentów udających border. Border już poznałeś. Współpracuje blisko z naszym elementem.

A jacy są pozostali dwaj?

Od zarania dziejów programiści mierzyli się z problemem wyrównywania wysokości kolumn. Jedni stosowali prastare metody związane ze znacznikiem TABLE, inni po wynalezieniu koła zaczęli stosować JavaScript.

My jednak dziś przyspieszymy ewolucję i poznamy: Pseudotabelusa, Flexiteka oraz Homo-Gridiensa.

Kiedy poznawałeś wciągający świat transformacji 3D w CSS pewnie trafiłeś na efekt obracającego się sześcianu. Dziś możliwości CSS trochę spowszedniały, a my aby nie stać w miejscu zrobimy skok jednocześnie w przyszłość i przeszłość. Pokażę Ci odzworowanie retroefektu zwanego rubber vectors, korzystając z aktualnych możliwości transformacji 3D. Przy zderzeniu przeszłości i przyszłości zobaczysz coś niedzisiejszego. Właściwie to już widziałeś na powyższym wideo, ale za chwilę będziesz mógł cieszyć się tym oglądając na żywo.

Jak skręcić kostkę (nie swoją)?

Idea efektu jest dosyć prosta. Polega na rysowaniu kostki w standardowy sposób, natomiast co linię pokazujemy klatkę animacji o jeden (lub więcej) późniejszą. Musimy w tym celu mieć X buforów na poszczególne klatki animacji. Pierwszą klatkę rysujemy na pierwszym buforze, podczas kolejnej kopiujemy go (i wszystkie za nim) o jeden niżej, a klatkę rysujemy znów na pierwszym. Pobierając kolejne linie z coraz to "późniejszych" buforów sprawiają one wrażenie "ciągnięcia się" za tymi powyżej.

Zdarza się, że stworzyliśmy ekstra formularz ankiety i chcemy poinformować użytkownika korzystającego z niego o ilości zaznaczonych odpowiedzi czy też o ilości prawidłowych odpowiedzi. A to wszystko na bieżąco. Możemy to zrobić bez użycia JavaScript. Nie będzie trzeba dodawać obsługi zdarzeń, liczyć zaznaczonych, ustawiać w jakimś elemencie obliczonej wartości.

Wykorzystamy do tego CSS-owy licznik, a dokładnie zmienną, której wartością możemy sterować przy pomocy kombinacji HTML+CSS.

Zacznijmy od przykładu wykorzystania licznika do numerowania elementów listy. Co prawda można wykorzystać natywną numerację, ale ma on jednak mniejsze możliwości stylowania. Czyli na razie checkbox'y odkładamy na bok.

Stworzyłeś wspaniałą stronę typu one-page. Nagłówek jest przyklejony do górnej krawędzi, a nawigacja oparta o hashe bez użycia JavaScript. Wygląda fajnie i nowocześnie, ale kliknięcie w link nawigacji powoduje przesunięcie na samą górę, a więc header skutecznie przykrywa fragment tej sekcji strony.

Jak zmusić stronę, aby ustawiała się pod nagłówkiem, czyli z przesunięciem o zadaną ilość pikseli?

Jest kilka rozwiązań tego problemu. Tu przedstawię jedną, nie wiem czy najprostszą, ale prostą.