Přejít k navigační liště

Zdroják » Webdesign » Zeldmanovo zatržítko

Zeldmanovo zatržítko

Články Webdesign

Zeldmanovo zatržítko je jednoduchá, ale efektní věc postavená na animovaných přechodech a transformacích. Zaujalo mě právě svou jednoduchostí.

Článek původně vyšel na autorově webu Vzhůru dolů.

Zeldmanovo zatržítko jsem ukazoval v přednášce na WebExpo 2016. Je to jednoduchá, ale efektní věc postavená na animovaných přechodech a transformacích. Zatržítko mě zaujalo právě svou jednoduchostí.

Proč Zeldmanovo? Řešení jsem poprvé viděl na studio.zeldman.com.

Podívejte se: cdpn.io/e/ozgPwm.

Jak na to?

1. Na HTML nic není…

…a to je dobře, protože řešení je díky tomu plně přístupné a funkční i ve starých prohlížečích.

<label class="checkbox">
  <input type="checkbox" class="checkbox__input" />  
  <span class="checkbox__label">Touch me!</span>
</label>

Jak na vlastní vzhled zatržítka? Stylování samotného checkboxu funguje jen v prohlížečích postavených na jádrech Webkit a Blink. Pomocí appearance: none bychom zrušili jeho výchozí styl a pak z něj prostě udělali běžný čtverec s rámečkem.

My ale chceme univerzální řešení. Jedno z nich spočívá v překrytí nativního zatržítka vrstvou a přidání falešného zatržítka do druhé.

2. Překryjte nativní zatržítko

Z rodiče uděláme kontejner pro absolutní pozicování:

.checkbox {
  position: relative;  
  …
}

Z nového pseudoelementu pak vytvoříme překryvnou vrstvu:

.checkbox__label:before {
  content: ' ';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: 2.5rem;
  width: 2.5rem;
  background: #EDE29F;  
}

3. Vytvoříme falešné zatržítko

Pomůžeme si dalším pseudoelementem:

.checkbox__label:after {
  content: ' ';
  display: block;
  position: absolute;
  top: 0;
  left: 0;  
  height: 2.5rem;
  width: 2.5rem;
  border: .35rem solid #48440E;
  background: #EDE29F;  
  transition: 200ms;  
}

4. Nastylujeme cílový vzhled zatržítka

.checkbox__input:checked ~ .checkbox__label:after {
  border-top-style: none; 
  border-right-style: none;
  transform: rotate(-45deg);
  height: 1.25rem;
  border-color: green;
}

Jakmile na něj někdo klikne:

  • zmizí horní a pravý rámeček (border-* pravidla)
  • otočí se o 45 stupňů doleva (transform: rotate(-45deg))
  • zmenší se výška na polovic (height: 1.25rem)
  • zmení se barva rámečku (border-color: green)

Všimněte si, že využíváme vlnovkový selektor pro elementy se stejným rodičem. Podívejte se i na další CSS3 selektory.

5. Animujeme!

Tohle je ta jednodušší část. Pomohou nám animace přechodů. Však se podívejte na kód:

.checkbox__input {
  transition: 100ms;
}

Náhradní řešení pro staré Explorery

Řešení bude fungovat v Internet Exploreru od verze 10 a všech dnešních prohlížečích.

V IE 8 a 9 by se ale zobrazovalo špatně. Důvody jsou v nepodpoře CSS transformací konkrétního typu nebo pokročilejších selektorů. Nemůžeme proto použít detekci vlastností. Pomohou nám podmíněné body třídy. Problematické části prostě odstraníme:

.old-ie .checkbox__label:before,
.old-ie .checkbox__label:after {
  display: none;
}

Staré Explorery pak zobrazí klasický systémový checkbox.

A je to. Tady je živé demo: cdpn.io/e/ozgPwm.

ebook-vdcss3-prebal-final

Vzhůru do CSS3

Vylepšete své znalosti webového frontendu aktuálním přehledem nástrojů moderního kodéra a nových CSS3 vlastností v jednom ebooku.

Komentáře

Subscribe
Upozornit na
guest
19 Komentářů
Nejstarší
Nejnovější Most Voted
Inline Feedbacks
View all comments
caracho

Ze specifikace HTML:

The label element’s exact default presentation and behavior, in particular what its activation behavior might be, if anything, should match the platform’s label behavior. The activation behavior of a label element for events targeted at interactive content descendants of a label element, and any descendants of those interactive content descendants, must be to do nothing.

For example, on platforms where clicking a checkbox label checks the checkbox, clicking the label in the following snippet could trigger the user agent to run synthetic click activation steps on the input element, as if the element itself had been triggered by the user:

Lost

On other platforms, the __behavior might be just to focus the control, or do nothing__.

caracho

Ano, toto řešení spoléhá na nedokumentované chovaní prohližečů, při aktivaci label. Takže ten původní nemusí fungovat, když ho schovávate pod .checkbox__label:before.

Martin Hassman

Přijde mi to jako klasická neshoda mezi vývojářem a designerem. Posunuto více abstraktně mezi racionalistou a empirikem. A myslím, že nemá řešení 8-)

caracho

A opravdu jste zkoušel úplně všechny prohlížeče? I na různých OS? A můžete zaručit, že to tak bude i do budoucna?
Jen pro představu: comment image

Moje zkušenost je taková, že pokud není něco dáno specifikací (a ani to není záruka – viz např. starší MSIE), tak s pravděpodobností téměř hraničící s jistotou se najde někdo, kdo danou věc implementuje jinak. Ostatně z takovýchto důvodů ty specifikace máme.
Každopádně jen kvůli eye candy si zadělávat na takto závažný UI fail mi přijde poněkud neštastné.
(Ale vaše priority mohou být samozřejmě jiné.)

Martin Hassman

To je přesně ono. Tenhle racionalistický argument (správný!) nemůže empirickým (nebo možná dokonce pragmatickým?) přístupem Martina (také správným!) pohnout. Jsou to různé přístupy, jejich střetnutí je nekonečné a všechny možné tahy obou stran nejspíš již někde jinde mnohokrát zopakované.

caracho

Pragmatické je programovat tak, aby se aplikace pokaždé chovala konzistentně a předvídatelně.

Martin Hassman

Ne, to je právě racionalismus 8-)

makovec

Toto není spor mezi „technickou správností“ a „uživatelskou přívětivostí“, protože vaše řešení žádnou zvýšenou uživatelskou přívětivost nepřináší (spíš naopak, jak již popsali jiní v diskusi).

Navíc, mezi „technickou správností“ a „uživatelskou přívětivostí“ žádný spor není. Uživatelsky přívětivé řešení má být i „technicky správné“, protože je pak robustnější, a robustnost je jedním z faktorů UX.

Neboli jde zde o zbytečnou technologickou exhibici a omalovánku (a UX nejsou omalovánky).

S tím že se tu „výsledku nedobereme“ ovšem souhlasím, i když z jiného důvodu než vy.

iiic

Dal by se jistě udělat javascriptový polyfill, který by zajistil ‚probublání‘ kliku z překryvného vrstvy i do pod ní umístěného selectu, ale nevím jestli je něco takového vůbec potřeba.

To, že klik na label aktivuje příslušný input je už mezi uživateli velmi zažité chování, pokud by se v budoucnu nějaký prohlížeč z nějakého důvodu rozhodl tohle chování změnit nebylo by to pro něj nic dobrého. Uživatelé by to vnímali jako chybu toho, kterého prohlížeče.

caracho

Formular sezral kus s kodem, ma tam byt:
[label][input type=checkbox name=lost] Lost[/label]

Kamil

Mě na tom spíš vadí fakt, že kvůli takové kravině, která navíc nemá žádný rozumný praktický dopad a účel, zaneřádím a znepřehledním zdroják desítkami zbytečných řádků kódu.

Vizor

Kdyz vypnes styly a obrazky, te Zeldmanove mobilni rollovaci nudli to jen pomuze. Kdyby vykopl sekci s chvastanim, co vse zalozil, bylo by to uplne idealni. Takze je to oukej.

dimov-cz

Je to hezké, ale zdráhal bych se to použít tam, kde je už zatrhnuto předem, protože to vůbec neevokuje interaktivitu.

xxx

To je dobrá připomínka. Zatržené to vypadá opravdu jenom jako seznam položek. Chtělo by to rámeček i pro zaškrtnutý stav. Akorát už to nebude tak kůl, protože tím odpadne přechod a může se tak maximálně animovat fajfka.

Mimo téma: ta transformace(rotace) použitá na text na http://studio.zeldman.com/ je tak otřesná, že to prostě nemůže myslet vážně.

MC

Tohle tlacitko je bezesporu kodersky mastercode, ale opravdu si promyslete, jestli to chcete podstoupit misto input type checkbox 😉 ..prilis kodu umorilo osla.

Enum a statická analýza kódu

Mám jednu univerzální radu pro začínající programátorty. V učení sice neexistují rychlé zkratky, ovšem tuhle radu můžete snadno začít používat a zrychlit tak tempo učení. Tou tajemnou ingrediencí je statická analýza kódu. Ukážeme si to na příkladu enum.

Pocta C64

Za prvopočátek své programátorské kariéry vděčím počítači Commodore 64. Tehdy jsem genialitu návrhu nemohl docenit. Dnes dokážu lehce nahlédnout pod pokličku. Chtěl bych se o to s vámi podělit a vzdát mu hold.