Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

10 praktických CSS3 a SVG řešení

SVG bude pro tvorbu uživatelských rozhraní hotová revoluce. To si pište. Flexbox spolu s novými CSS3 vlastnostmi zase zjednodušuje postupy, které dřív z kodérů lezly jako z chlupaté deky. Designéři, vezměte svého kodéra a přijďte se ruku v ruce inspirovat novými technologickými možnostmi frontendu.

  • Login to see the comments

10 praktických CSS3 a SVG řešení

  1. 1. 10 praktických CSS3 a SVG řešení WebExpo 23. června 2016 Martin Michálek
 @machal
  2. 2. Jaká řešení jsem vybíral? ✔ funkční ve všech moderních prohlížečích ✔ přístupná ✔ jednoduchá
  3. 3. Zeldmanovo zatržítko 1
  4. 4. 1. Zeldmanovo zatržítko cdpn.io/e/ozgPwm Animujeme zatržítko ze stavu nahoře do stavu dole.
  5. 5. 1. Zeldmanovo zatržítko cdpn.io/e/ozgPwm Abychom docílili plné přístupnosti, v HTML je dále klasický checkbox. Nad něj umístíme „překryvnou“ vrstvu a pak falešný checkbox, který se bude animovat.
  6. 6. 1. Zeldmanovo zatržítko cdpn.io/e/ozgPwm Takto vypadá průběh animace. Čtvereček morfuje do „fajfky“ [check mark].
  7. 7. Patička přilepená dole 2
  8. 8. 2. Patička přilepená dole cdpn.io/e/jrEGYZ I'm the footer. I'm the footer. Máme text s patičkou. Textu je ale na některých rozlišeních málo, proto je patička ošklivě hned pod textem. Lepší by byl ten druhý stav. Dosáhneme jej pomocí flexboxu. Na Flexbox si vzpomeňte, kdykoliv potřebujete udělat layout.
  9. 9. 2. Patička přilepená dole cdpn.io/e/jrEGYZ body { display: flex; flex-direction: column; height: 100vh; } .footer { flex: none; } I'm the footer. Tady je kód. V první části říkáme, že <body> bude rodič pro layout, že je layout na výšku a že výška <body> je přes celou výšku okna. .content se chová tak, že se roztahuje dokud to jde, ale nezmenšuje se pod velikost obsahu. .footer prostě "neflexí", tedy vždy zůstává vysoký přesně podle obsahu.
  10. 10. Galerie obrázků 3
  11. 11. 3. Galerie obrázků cdpn.io/e/RaXEgm .items { display: flex; flex-wrap: wrap; } Máme fotogalerii, kde jsou položky různé výšky a obrázky různých velikostí.
 Nejdří chceme, aby byly položky stejně vysoké. Flexbox tohle dělá automaticky. Pokud chceme víceřádkový seznam, použijeme flex-wrap: wrap.
  12. 12. 3. Galerie obrázků cdpn.io/e/RaXEgm .item__image { display: flex; justify-content: center; align-items: center; } Pak chceme obrázky centrovat v obou směrech. Opět použijeme flexbox. Ty je možné zanořovat. Vlastnosti justify-content a align-items centrují položky v obou směrech.
  13. 13. Chatovací rozhraní 4
  14. 14. 4. Chatovací rozhraní cdpn.io/e/amzjYw .comment--reversed { flex-direction: row-reverse; } Na flexboxu se mi také líbí vlastnosti pro změnu pořadí. Tady je způsob jak udělat položku s obráceným layoutem. Prostě vlastností flex-direction.
  15. 15. 5Automatický layout
  16. 16. 5. Automatický layout cdpn.io/e/rraAgj .items { column-width: 20em; column-gap: 1em; } Máme tento layout. Na různých zařízeních různý počet sloupečků. CSS3 Multiple Column jen řekneme optimální šířku položky (column-width) a šířku mezery (column-gap). Nemusíme psát žádné Media Query.
  17. 17. Obrázkové výplně textu 6
  18. 18. 6. Obrázkové výplně textu cdpn.io/e/wzampR
  19. 19. 6. Obrázkové výplně textu cdpn.io/e/wzampR Jak je zkombinovat dohromady, aby to fungovalo ve všech prohlížečích? Samozřejmě pomocí SVG, které je velmi mocné.
  20. 20. 6. Obrázkové výplně textu cdpn.io/e/wzampR <svg> <text … class="heading__text"> It's A Beautiful Day! </text> </svg> <defs> <pattern id="img-pattern"> <image xlink:href="image.jpg" /> </pattern> </defs> .heading__text { fill: url(#img-pattern); } Nejprve definujeme <text>. Je plně přístupný, takže jej indexuje Google a lze jej vybrat kurzorem. Pak <pattern>, obrázek pro výplně. Nakonec patternem v CSS vyplníme text.
  21. 21. Vlastní výřezy obrázků 7
  22. 22. 7. Vlastní výřezy obrázků cdpn.io/e/jrPpdO CSS: SVG: Prostě cokoliv. Máme fotku a chceme ji ořížnout v kódu. Pokud chceme plnou podporu prohlížečů, v CSS máme jen dvě možnosti: čtverec a kruh. V SVG uděláte cokoliv, prostě si tvar nakreslíte.
  23. 23. 7. Vlastní výřezy obrázků cdpn.io/e/jrPpdO <svg> <image xlink:href="image.jpg" clip-path="url(#clip-path)"> </svg> <clipPath id="clip-path"> <path d="…"> </clipPath> Základním prvkem v SVG bude <image>. Do <clipPath> si pak uložíme tvar výřezu. Nakonec jej aplikujeme na obrázek pomocí SVG parametru.
  24. 24. Hvězdičkové hodnocení 8
  25. 25. 8. Hvězdičkové hodnocení cdpn.io/e/yayxGv IMG#1 IMG#2 IMG#3 Hvězdičkové hodnocení umíme všichni. Obvykle jej ale děláme několika PNG nebo v lepším případě SVG obrázky. Ukážu, jak jej udělat jediným obrázkem.
  26. 26. 8. Hvězdičkové hodnocení cdpn.io/e/yayxGv <svg> <defs> <g id="icon-star"> <path d="…"> </g> </defs> </svg> <svg class="star"> <use xlink:href="#icon-star"> </svg> <svg class="star"> <use xlink:href="#icon-star"> </svg> <svg class="star"> <use xlink:href="#icon-star"> </svg> Vlevo je vidět definice hvězdy. Když ji chceme použít třikrát, prostě ji pomocí <use> použijeme.
  27. 27. 8. Hvězdičkové hodnocení cdpn.io/e/yayxGv <svg class="star star--empty"> <use xlink:href="#icon-star"> </svg> .star--empty { fill: none; } Prázdnou hvězdu vytvoříme tak, že té původní v CSS odebereme výplň.
  28. 28. 8. Hvězdičkové hodnocení cdpn.io/e/yayxGv <svg class="star star--half"> <use xlink:href="#icon-star"> </svg> <linearGradient id="halfGradient"> <stop stop-opacity="1" offset="50%" stop-color="#48440E"></stop> <stop stop-opacity="0" offset="50%"></stop> </linearGradient> .star--half { fill: url(#halfGradient); } Poloviční hvězda: stačí nadefinovat ostrý gradient na pozadí a pak jej v CSS použít. Celou dobu pracujeme jen s jedním obrázkem.
  29. 29. Ručné kreslené zatržítko 9
  30. 30. 9. Ručně kreslené zatržítko cdpn.io/e/QKbALw Ručně kreslené zatržítko s animací kresby.
  31. 31. 9. Ručně kreslené zatržítko cdpn.io/e/QKbALw <p class="radio"> <input type="checkbox" class="radio__input"> <label for="checkbox" class="radio__label"> Click me please </label> </p> HTML je opět plně přístupné, vzpomeňte na první ukázku.
  32. 32. 9. Ručně kreslené zatržítko cdpn.io/e/QKbALw <svg class="radio__svg"> <path class="radio__svg-path" stroke-dashoffset="1500"
 … > </path> </svg> Přidáme ruční kresbu pomocí SVG. Parametrem role="presentation" zajistíme, aby jej ignorovaly slepecké čtečky.
  33. 33. 9. Ručně kreslené zatržítko cdpn.io/e/QKbALw .radio__input:checked ~ .radio__svg .radio__svg-path { stroke-dashoffset: 0; } .radio__svg-path { transition: stroke-dashoffset 100ms; } Pak jen animujeme ten obrys.
  34. 34. Elastická typografie 10
  35. 35. 10. Elastická typografie cdpn.io/e/bZzmGg I Am A Very Long Heading 
 of The Masthead. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi viverra mauris metus, at aliquam enim scelerisque nec. Mauris ut mi vel metus euismod elementum. Quisque mattis arcu a semper mattis. Responzivní typografie I Am A Very Long Heading 
 of The Masthead. Lorem ipsum dolor sit amet, consectetur em/rem Téměř elastická typografie vw Elastická typografie calc() Máme hezkou typografickou hlavičku a nechceme na každém breakpointu nastavovat Media Queries, aby tam vypadala dobře. Chceme ji prostě zoomovat.
  36. 36. 10 % 8 % cdpn.io/e/bZzmGg10. Elastická typografie Ideální by bylo, když bychom velikost elementů vysázeli v procentech z výšky hlavičky.
  37. 37. 100 % calc( 
 (100vw - 2em) / 16 * 9 ) cdpn.io/e/bZzmGg10. Elastická typografie Šířka Poměr stran Jak je hlavičky vysoká?
 Zjistíme to snadno z její šířky, pokud známe poměr stran.
  38. 38. font-size: calc( 10 *
 ( (100vw - 2em) / 
 16 * 9 / 100 ) ) ); 10% cdpn.io/e/bZzmGg10. Elastická typografie
  39. 39. Díky! vzhurudolu.cz
 @machal

×