Dziś mała pożywka dla szukających proporcji w otaczającym świecie. Może aż tak daleko nie będziemy się rozglądać, ale na pewno obadamy dokładnie ekran komputera. Opowiem Ci o metodach na utrzymywanie proporcji elementów. Jeśli jeden wymiar ma wartość X, chcemy aby drugi był np.: 2 razy większy lub 3 razy mniejszy. Co więcej, chcemy aby element pozostawał w zadanej proporcji, jeśli jeden z wymiarów zmieni się.

Jak zmusić element aby zawsze miał rację?

Mamy do dyspozycji kilka metod. Omówię oparte tylko i wyłącznie o CSS i HTML. Metody w JavaScript pozostawimy dla.... dla innych.

Bawiłeś się kiedyś w chowanego? Może masz ochotę zrobić to dziś? Pokażę Ci jak coś ukryć. Tak porządnie i w określonym czasie. Na tym blogu było trochę magii, ale powtarzam: ukryjemy "coś", a nie Ciebie, więc bez obaw. Będziemy pokazywać i ukrywać element HTML. Właściwie takie cuda zdziałamy, że sam będzie się pokazywał i znikał w określonym momencie.

Cel i jego osiągnięcie brzmi banalnie, ale wyjawię Ci więcej szczegółów. Efekt ten został praktycznie wykorzystany, prawie przy takim założeniu, na stronie gier dla dzieci Buliba.pl. Ponieważ projekt strony jest niekomfortowy/niegrywalny/nieprzeznaczony do układu portrait, to wtedy pokazuje się plansza z odpowiednią informacją. Dodatkowo (co tam dzieje się po bardzo długim czasie) plansza ma zniknąć po kilku sekundach.

Zacznijmy od planszy.

Pewnie miałeś już w życiu styczność z dymkiem. Czy to podpalając dywan w pokoju rodziców w wieku pięciu lat, czy też paląc z kolegami swoją pierwszą fajkę (pokoju, oczywiście!). W HTML dymki są bardziej pozytywnymi wydarzeniami. Stosuje się je do przekazania dodatkowych informacji użytkownikowi, których przed daną akcją nie chcemy pokazywać. Możemy się spotkać z dymkami walidacji formularzy, gdzie informujemy o błędniem wypełnionym polu, czy też szczegółach jakiejś opcji po najechaniu myszą.

Dymek najczęściej ma kształt prostokąta z zaokrąglonymi narożnikami i mały trójkącik na dole pozycjonujący cały dymek. Czyli mamy tu dwa elementy. Pokażmy kod HTML i stylowanie CSS takiego dymka.

<div class="dymek">To jest informacja<span></span></div>

+

div.dymek{
  padding:20px;
  background:#f00;
  border-radius:10px;
  position:relative;
  display:inline-block;
}
div.dymek span{
  position:absolute;
  left:20px;
  bottom:-5px;
  width:10px;
  height:10px;
  display:block;
  transform:rotate(45deg);
  background:inherit;
}

Możemy nieco uprościć kod HTML i zamiast elementu SPAN, użyć pseudoelementu :after.

<div class="dymek">To jest informacja</div>

+

div.dymek{
  padding:20px;
  background:#f00;
  border-radius:10px;
  position:relative;
  display:inline-block;
}
div.dymek:after{
  content:'';
  position:absolute;
  left:20px;
  bottom:-5px;
  width:10px;
  height:10px;
  display:block;
  transform:rotate(45deg);
  background:inherit;
}

W obydwu przypadkach efekt będzie identyczny (poszczególne elementy możesz dostrzeć najeżdżając na dymek myszą):

Użyliśmy jednak dwóch elementów.

Czas zrobić prawdziwą rewolucję w produkcji dymków i wykonać go wykorzystując tylko jeden element HTML!

Na tym blogu spotkałeś się być może już z magią. Magią kreacji czegoś prawie z niczego. I dziś się nie zawiedziesz. Pokażę Ci jak zostało stworzone animowane logo w znanym serwisie dla dzieci - Buliba.pl. Wierna kopia logo tego portalu powstała dzięki kilku elementom HTML oraz możliwościom CSS3. Dodatkowo ten drugi nadał dynamikę i finalny efekt dostał do odegrania idealną rolę - ikony preloadera.

Jak wygląda oryginalne, statyczne logo w postaci obrazka?

Będziemy potrzebowali stworzyć literkę "b" (brzuszek i kreskę), oko z obwódką i refleksami oraz uśmiech. Kod HTML jest prosty i w zależności od etapu budowy będziemy potrzebowali wybrane tagi.

<div class="blogo"><b></b><i></i><u></u></div>

A docelowo będą to trzy tagi + kontener na nie. Fajnie by było użyć tagów B, UL, I, B, A, ale aż tylu nam nie potrzeba.

Zdarza się czasem potrzeba zablokowania pól w formularzu w zależności od wybranej przez użytkownika opcji. Oczywiście możemy posłużyć się tu JavaScript i w zależności od klikniętego radio czy checkbox, ustawiać atrybut disabled dla wybranego elementu lub grupy elementów.

A czy możliwe jest blokowanie pól tylko w CSS?

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.