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

10 praktických
CSS3 a SVG řešení
WebExpo 23. června 2016
Martin Michálek 
@machal

Jaká řešení jsem vybíral?
✔ funkční ve všech moderních prohlížečích
✔ přístupná
✔ jednoduchá

1. Zeldmanovo zatržítko cdpn.io/e/ozgPwm
Animujeme zatržítko ze stavu nahoře do stavu dole.

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.

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

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.

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.

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.

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.

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.

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.

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

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.

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.

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.

Ručné kreslené zatržítko
9

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

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

.radio__input:checked ~ .radio__svg .radio__svg-path {
stroke-dashoffset: 0;
}
.radio__svg-path {
transition: stroke-dashoffset 100ms;
}
Pak jen animujeme ten obrys.

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.

10 %
8 %
cdpn.io/e/bZzmGg10. Elastická typograﬁe
Ideální by bylo, když bychom velikost elementů vysázeli v procentech z výšky hlavičky.

100 %
calc(
 
(100vw - 2em)
/ 16 * 9
)
Šířka
Poměr stran
Jak je hlavičky vysoká? 
Zjistíme to snadno z její šířky, pokud známe poměr stran.

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

Díky!
vzhurudolu.cz 
@machal

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

More Related Content

Similar to 10 praktických CSS3 a SVG řešení (20)

More from Martin Michálek (20)

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