SlideShare a Scribd company logo
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á
Zeldmanovo zatržítko
1
1. Zeldmanovo zatržítko cdpn.io/e/ozgPwm
Animujeme zatržítko ze stavu nahoře do stavu dole.
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.
1. Zeldmanovo zatržítko cdpn.io/e/ozgPwm
Takto vypadá průběh animace. Čtvereček morfuje do „fajfky“ [check mark].
Patička přilepená dole
2
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.
Galerie obrázků
3
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.
Chatovací rozhraní
4
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.
5Automatický layout
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.
Obrázkové výplně textu
6
6. Obrázkové výplně textu cdpn.io/e/wzampR
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é.
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.
Vlastní výřezy obrázků
7
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.
Hvězdičkové hodnocení
8
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.
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.
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ň.
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.
Ručné kreslené zatržítko
9
9. Ručně kreslené zatržítko cdpn.io/e/QKbALw
Ručně kreslené zatržítko s animací kresby.
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.
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.
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.
Elastická typografie
10
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á typografie
Ideální by bylo, když bychom velikost elementů vysázeli v procentech z výšky hlavičky.
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.
font-size: calc(
10 *

(
(100vw - 2em) / 

16 * 9 /
100 )
)
);
10%
cdpn.io/e/bZzmGg10. Elastická typografie
Díky!
vzhurudolu.cz

@machal

More Related Content

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

node.js: zápisky z fronty (Battle guide to node.js)
node.js: zápisky z fronty (Battle guide to node.js)node.js: zápisky z fronty (Battle guide to node.js)
node.js: zápisky z fronty (Battle guide to node.js)
almadcz
 
Optimalizace webových aplikací
Optimalizace webových aplikacíOptimalizace webových aplikací
Optimalizace webových aplikací
Vašek Purchart
 
XSS PHP CSP ETC OMG WTF BBQ
XSS PHP CSP ETC OMG WTF BBQXSS PHP CSP ETC OMG WTF BBQ
XSS PHP CSP ETC OMG WTF BBQ
Michal Špaček
 
React a omyly jazyka CSS
React a omyly jazyka CSSReact a omyly jazyka CSS
React a omyly jazyka CSS
Robin Pokorny
 
Prezentace Inkscape a jeho použití v mojí praxi
Prezentace Inkscape a jeho použití v mojí praxi Prezentace Inkscape a jeho použití v mojí praxi
Prezentace Inkscape a jeho použití v mojí praxi
Petr Šimčík
 
PoSobota 96 ČB 28.4.2018
PoSobota 96 ČB 28.4.2018PoSobota 96 ČB 28.4.2018
PoSobota 96 ČB 28.4.2018
Brilo Team
 
#golang @SkrzCzDev (Skrz DEV Cirkus 21.10.2015)
#golang @SkrzCzDev (Skrz DEV Cirkus 21.10.2015)#golang @SkrzCzDev (Skrz DEV Cirkus 21.10.2015)
#golang @SkrzCzDev (Skrz DEV Cirkus 21.10.2015)
Jakub Kulhan
 
CSS - vy&#353;&#353;í dív&#269;í
CSS - vy&#353;&#353;í dív&#269;íCSS - vy&#353;&#353;í dív&#269;í
CSS - vy&#353;&#353;í dív&#269;í
Martin Michálek
 
Je CSS vážně tak podivné?
Je CSS vážně  tak podivné?Je CSS vážně  tak podivné?
Je CSS vážně tak podivné?
Martin Michálek
 
Rychlejší web snadno a rychle: Nové technologie a nástroje pro vývojáře
Rychlejší web snadno a rychle: Nové technologie a nástroje pro vývojářeRychlejší web snadno a rychle: Nové technologie a nástroje pro vývojáře
Rychlejší web snadno a rychle: Nové technologie a nástroje pro vývojáře
Martin Michálek
 
PHP Vysočina - WordPress - 25.10.2018
PHP Vysočina - WordPress - 25.10.2018PHP Vysočina - WordPress - 25.10.2018
PHP Vysočina - WordPress - 25.10.2018
Brilo Team
 
Retina displeje pro webdesignéry
Retina displeje pro webdesignéryRetina displeje pro webdesignéry
Retina displeje pro webdesignéry
Martin Michálek
 
WebExpo 2017 - Přístupnost v kódu: ukázky a návrhové vzory
WebExpo 2017 - Přístupnost v kódu: ukázky a návrhové vzoryWebExpo 2017 - Přístupnost v kódu: ukázky a návrhové vzory
WebExpo 2017 - Přístupnost v kódu: ukázky a návrhové vzory
Martin Michálek
 
Webový front-end ve službách mobilního vývojáře
Webový front-end  ve službách mobilního  vývojáře Webový front-end  ve službách mobilního  vývojáře
Webový front-end ve službách mobilního vývojáře
Martin Michálek
 
Noční můry webového vývojáře
Noční můry webového vývojářeNoční můry webového vývojáře
Noční můry webového vývojáře
Michal Špaček
 

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

node.js: zápisky z fronty (Battle guide to node.js)
node.js: zápisky z fronty (Battle guide to node.js)node.js: zápisky z fronty (Battle guide to node.js)
node.js: zápisky z fronty (Battle guide to node.js)
 
Optimalizace webových aplikací
Optimalizace webových aplikacíOptimalizace webových aplikací
Optimalizace webových aplikací
 
XSS PHP CSP ETC OMG WTF BBQ
XSS PHP CSP ETC OMG WTF BBQXSS PHP CSP ETC OMG WTF BBQ
XSS PHP CSP ETC OMG WTF BBQ
 
React a omyly jazyka CSS
React a omyly jazyka CSSReact a omyly jazyka CSS
React a omyly jazyka CSS
 
Prezentace Inkscape a jeho použití v mojí praxi
Prezentace Inkscape a jeho použití v mojí praxi Prezentace Inkscape a jeho použití v mojí praxi
Prezentace Inkscape a jeho použití v mojí praxi
 
PoSobota 96 ČB 28.4.2018
PoSobota 96 ČB 28.4.2018PoSobota 96 ČB 28.4.2018
PoSobota 96 ČB 28.4.2018
 
#golang @SkrzCzDev (Skrz DEV Cirkus 21.10.2015)
#golang @SkrzCzDev (Skrz DEV Cirkus 21.10.2015)#golang @SkrzCzDev (Skrz DEV Cirkus 21.10.2015)
#golang @SkrzCzDev (Skrz DEV Cirkus 21.10.2015)
 
CSS - vy&#353;&#353;í dív&#269;í
CSS - vy&#353;&#353;í dív&#269;íCSS - vy&#353;&#353;í dív&#269;í
CSS - vy&#353;&#353;í dív&#269;í
 
Je CSS vážně tak podivné?
Je CSS vážně  tak podivné?Je CSS vážně  tak podivné?
Je CSS vážně tak podivné?
 
Rychlejší web snadno a rychle: Nové technologie a nástroje pro vývojáře
Rychlejší web snadno a rychle: Nové technologie a nástroje pro vývojářeRychlejší web snadno a rychle: Nové technologie a nástroje pro vývojáře
Rychlejší web snadno a rychle: Nové technologie a nástroje pro vývojáře
 
PHP Vysočina - WordPress - 25.10.2018
PHP Vysočina - WordPress - 25.10.2018PHP Vysočina - WordPress - 25.10.2018
PHP Vysočina - WordPress - 25.10.2018
 
Retina displeje pro webdesignéry
Retina displeje pro webdesignéryRetina displeje pro webdesignéry
Retina displeje pro webdesignéry
 
WebExpo 2017 - Přístupnost v kódu: ukázky a návrhové vzory
WebExpo 2017 - Přístupnost v kódu: ukázky a návrhové vzoryWebExpo 2017 - Přístupnost v kódu: ukázky a návrhové vzory
WebExpo 2017 - Přístupnost v kódu: ukázky a návrhové vzory
 
Webový front-end ve službách mobilního vývojáře
Webový front-end  ve službách mobilního  vývojáře Webový front-end  ve službách mobilního  vývojáře
Webový front-end ve službách mobilního vývojáře
 
Noční můry webového vývojáře
Noční můry webového vývojářeNoční můry webového vývojáře
Noční můry webového vývojáře
 
Bez HTML5/CSS3 to nejde
Bez HTML5/CSS3 to nejdeBez HTML5/CSS3 to nejde
Bez HTML5/CSS3 to nejde
 

More from Martin Michálek

CSS a sazba knih: jak jsme daleko?
CSS a sazba knih: jak jsme daleko?CSS a sazba knih: jak jsme daleko?
CSS a sazba knih: jak jsme daleko?
Martin Michálek
 
Browsers: from competition to collaboration
Browsers: from competition to collaborationBrowsers: from competition to collaboration
Browsers: from competition to collaboration
Martin Michálek
 
„To my ne, to oni!“ – komponenty třetích stran a rychlost webu
„To my ne, to oni!“ – komponenty třetích stran a rychlost webu„To my ne, to oni!“ – komponenty třetích stran a rychlost webu
„To my ne, to oni!“ – komponenty třetích stran a rychlost webu
Martin Michálek
 
17 technických tipů ke zrychlení webů
17 technických tipů ke zrychlení webů17 technických tipů ke zrychlení webů
17 technických tipů ke zrychlení webů
Martin Michálek
 
Rychlost webu: Co pro ni mohou udělat UXáci, marketéři a majitelé webů?
Rychlost webu: Co pro ni mohou udělat UXáci, marketéři a majitelé webů?Rychlost webu: Co pro ni mohou udělat UXáci, marketéři a majitelé webů?
Rychlost webu: Co pro ni mohou udělat UXáci, marketéři a majitelé webů?
Martin Michálek
 
Blbosti kolem webové rychlosti
Blbosti kolem webové rychlostiBlbosti kolem webové rychlosti
Blbosti kolem webové rychlosti
Martin Michálek
 
SEO jako Brno - workshop k rychlosti webu
SEO jako Brno - workshop k rychlosti webuSEO jako Brno - workshop k rychlosti webu
SEO jako Brno - workshop k rychlosti webu
Martin Michálek
 
Web rychlý jako blesk (s důrazem na AMP)
Web rychlý jako blesk (s důrazem na AMP)Web rychlý jako blesk (s důrazem na AMP)
Web rychlý jako blesk (s důrazem na AMP)
Martin Michálek
 
Devel.cz: Bootstrap 4
Devel.cz: Bootstrap 4Devel.cz: Bootstrap 4
Devel.cz: Bootstrap 4
Martin Michálek
 
AMP: Co řeší a co nového nabízí
AMP: Co řeší a co nového nabízíAMP: Co řeší a co nového nabízí
AMP: Co řeší a co nového nabízí
Martin Michálek
 
Metriky rychlosti načítání
Metriky rychlosti načítáníMetriky rychlosti načítání
Metriky rychlosti načítání
Martin Michálek
 
WordPress šablony a rychlost načítání (WordCamp Praha 2017)
WordPress šablony a  rychlost načítání (WordCamp Praha 2017)WordPress šablony a  rychlost načítání (WordCamp Praha 2017)
WordPress šablony a rychlost načítání (WordCamp Praha 2017)
Martin Michálek
 
Slasti a pasti prototypování v HTML
Slasti a pasti  prototypování v HTMLSlasti a pasti  prototypování v HTML
Slasti a pasti prototypování v HTML
Martin Michálek
 
Debugování responzivních webů
Debugování responzivních webůDebugování responzivních webů
Debugování responzivních webů
Martin Michálek
 
Mobile First v praxi
Mobile First v praxiMobile First v praxi
Mobile First v praxi
Martin Michálek
 
Vše co potřebuje markeťák vědět o rychlostní optimalizaci webů
Vše co potřebuje markeťák vědět o rychlostní optimalizaci webůVše co potřebuje markeťák vědět o rychlostní optimalizaci webů
Vše co potřebuje markeťák vědět o rychlostní optimalizaci webů
Martin Michálek
 
Design webů v prohlížeči
Design webů v prohlížečiDesign webů v prohlížeči
Design webů v prohlížeči
Martin Michálek
 
Responzivní obrázky v praxi
Responzivní obrázky v praxiResponzivní obrázky v praxi
Responzivní obrázky v praxi
Martin Michálek
 
Co by měl UXák vědět o responzivním webdesignu?
Co by měl UXák vědět o responzivním webdesignu?Co by měl UXák vědět o responzivním webdesignu?
Co by měl UXák vědět o responzivním webdesignu?
Martin Michálek
 
Ach, ty mobilní prohlížeče
Ach, ty mobilní prohlížečeAch, ty mobilní prohlížeče
Ach, ty mobilní prohlížeče
Martin Michálek
 

More from Martin Michálek (20)

CSS a sazba knih: jak jsme daleko?
CSS a sazba knih: jak jsme daleko?CSS a sazba knih: jak jsme daleko?
CSS a sazba knih: jak jsme daleko?
 
Browsers: from competition to collaboration
Browsers: from competition to collaborationBrowsers: from competition to collaboration
Browsers: from competition to collaboration
 
„To my ne, to oni!“ – komponenty třetích stran a rychlost webu
„To my ne, to oni!“ – komponenty třetích stran a rychlost webu„To my ne, to oni!“ – komponenty třetích stran a rychlost webu
„To my ne, to oni!“ – komponenty třetích stran a rychlost webu
 
17 technických tipů ke zrychlení webů
17 technických tipů ke zrychlení webů17 technických tipů ke zrychlení webů
17 technických tipů ke zrychlení webů
 
Rychlost webu: Co pro ni mohou udělat UXáci, marketéři a majitelé webů?
Rychlost webu: Co pro ni mohou udělat UXáci, marketéři a majitelé webů?Rychlost webu: Co pro ni mohou udělat UXáci, marketéři a majitelé webů?
Rychlost webu: Co pro ni mohou udělat UXáci, marketéři a majitelé webů?
 
Blbosti kolem webové rychlosti
Blbosti kolem webové rychlostiBlbosti kolem webové rychlosti
Blbosti kolem webové rychlosti
 
SEO jako Brno - workshop k rychlosti webu
SEO jako Brno - workshop k rychlosti webuSEO jako Brno - workshop k rychlosti webu
SEO jako Brno - workshop k rychlosti webu
 
Web rychlý jako blesk (s důrazem na AMP)
Web rychlý jako blesk (s důrazem na AMP)Web rychlý jako blesk (s důrazem na AMP)
Web rychlý jako blesk (s důrazem na AMP)
 
Devel.cz: Bootstrap 4
Devel.cz: Bootstrap 4Devel.cz: Bootstrap 4
Devel.cz: Bootstrap 4
 
AMP: Co řeší a co nového nabízí
AMP: Co řeší a co nového nabízíAMP: Co řeší a co nového nabízí
AMP: Co řeší a co nového nabízí
 
Metriky rychlosti načítání
Metriky rychlosti načítáníMetriky rychlosti načítání
Metriky rychlosti načítání
 
WordPress šablony a rychlost načítání (WordCamp Praha 2017)
WordPress šablony a  rychlost načítání (WordCamp Praha 2017)WordPress šablony a  rychlost načítání (WordCamp Praha 2017)
WordPress šablony a rychlost načítání (WordCamp Praha 2017)
 
Slasti a pasti prototypování v HTML
Slasti a pasti  prototypování v HTMLSlasti a pasti  prototypování v HTML
Slasti a pasti prototypování v HTML
 
Debugování responzivních webů
Debugování responzivních webůDebugování responzivních webů
Debugování responzivních webů
 
Mobile First v praxi
Mobile First v praxiMobile First v praxi
Mobile First v praxi
 
Vše co potřebuje markeťák vědět o rychlostní optimalizaci webů
Vše co potřebuje markeťák vědět o rychlostní optimalizaci webůVše co potřebuje markeťák vědět o rychlostní optimalizaci webů
Vše co potřebuje markeťák vědět o rychlostní optimalizaci webů
 
Design webů v prohlížeči
Design webů v prohlížečiDesign webů v prohlížeči
Design webů v prohlížeči
 
Responzivní obrázky v praxi
Responzivní obrázky v praxiResponzivní obrázky v praxi
Responzivní obrázky v praxi
 
Co by měl UXák vědět o responzivním webdesignu?
Co by měl UXák vědět o responzivním webdesignu?Co by měl UXák vědět o responzivním webdesignu?
Co by měl UXák vědět o responzivním webdesignu?
 
Ach, ty mobilní prohlížeče
Ach, ty mobilní prohlížečeAch, ty mobilní prohlížeče
Ach, ty mobilní prohlížeče
 

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

  • 1. 10 praktických CSS3 a SVG řešení WebExpo 23. června 2016 Martin Michálek
 @machal
  • 2. Jaká řešení jsem vybíral? ✔ funkční ve všech moderních prohlížečích ✔ přístupná ✔ jednoduchá
  • 4. 1. Zeldmanovo zatržítko cdpn.io/e/ozgPwm Animujeme zatržítko ze stavu nahoře do stavu dole.
  • 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. 1. Zeldmanovo zatržítko cdpn.io/e/ozgPwm Takto vypadá průběh animace. Čtvereček morfuje do „fajfky“ [check mark].
  • 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. 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.
  • 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. 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.
  • 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.
  • 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.
  • 18. 6. Obrázkové výplně textu cdpn.io/e/wzampR
  • 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. 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.
  • 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. 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.
  • 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. 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. 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. 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.
  • 30. 9. Ručně kreslené zatržítko cdpn.io/e/QKbALw Ručně kreslené zatržítko s animací kresby.
  • 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. 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. 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.
  • 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. 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. 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. font-size: calc( 10 *
 ( (100vw - 2em) / 
 16 * 9 / 100 ) ) ); 10% cdpn.io/e/bZzmGg10. Elastická typografie