+ All Categories
Home > Technology > 10 praktických CSS3 a SVG řešení

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

Date post: 16-Apr-2017
Category:
Upload: martin-michalek
View: 2,323 times
Download: 2 times
Share this document with a friend
39
10 praktick ý ch CSS3 a SVG ř ešení WebExpo 23. června 2016 Martin Michálek @machal
Transcript
Page 1: 10 praktických  CSS3 a SVG řešení

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

WebExpo 23. června 2016 Martin Michálek@machal

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

Jaká řešení jsem vybíral?

✔ funkční ve všech moderních prohlížečích ✔ přístupná ✔ jednoduchá

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

Zeldmanovo zatržítko1

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

1. Zeldmanovo zatržítko cdpn.io/e/ozgPwm

Animujeme zatržítko ze stavu nahoře do stavu dole.

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

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.

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

1. Zeldmanovo zatržítko cdpn.io/e/ozgPwm

Takto vypadá průběh animace. Čtvereček morfuje do „fajfky“ [check mark].

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

Patička přilepená dole2

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

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.

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

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.

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

Galerie obrázků 3

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

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.

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

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.

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

Chatovací rozhraní 4

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

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.

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

5 Automatický layout

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

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.

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

Obrázkové výplně textu6

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

6. Obrázkové výplně textu cdpn.io/e/wzampR

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

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é.

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

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.

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

Vlastní výřezy obrázků7

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

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.

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

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.

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

Hvězdičkové hodnocení8

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

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.

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

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.

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

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ň.

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

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.

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

Ručné kreslené zatržítko9

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

9. Ručně kreslené zatržítko cdpn.io/e/QKbALw

Ručně kreslené zatržítko s animací kresby.

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

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.

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

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.

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

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.

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

Elastická typografie10

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

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.

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

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.

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

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.

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

font-size: calc( 10 * ( (100vw - 2em) / 16 * 9 / 100 ) ) );

10%

cdpn.io/e/bZzmGg10. Elastická typografie

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

Díky!

vzhurudolu.cz@machal


Recommended