Jednoduchá komponenta s obrázkem, textem a odkazovacím tlačítkem.

Prioritizing privacy and security

We’re building social experiences that keep your account secure and enable you to make choices around how your data is used.

Learn more →

Ještě než začneme...

V následujících momentech se naučíte vytvořit jednoduchou, moderní a minimalistickou komponentu s obrázkem, textem a odkazovacím tlačítkem.

V prvních krocích si komponentu postavíme z různých html elementů a s použitím jednoduchého css ji poskládáme tak, aby byl na levé polovině komponenty obrázek a na pravé polovině text s tlačítkem přesně tak, jak to vidíme na vzoru (později vám také ukážu jak rychle a jednoduše změnit rozpoložení tak, aby byl na levé straně text a obrázek se nacházel na pravé straně).

Ve druhé části si pohrajeme s css a naši komponentu zkrášlíme. Také si ukážeme, kde najít a vybrat vhodný font a jak jej vložit a použít v našem dokumentu.

Nakonec doladíme detaily.

Řádky kódu můžete vidět znázorněny tímto způsobem:

HTML
<h1 class="nadpis">
Ještě než začneme...
</h1>
CSS
.nadpis {
  • font-size: 3rem;
  • font-weight: 300;
  • margin-bottom: 1rem;
}
HEAD
<link rel="stylesheet" href="style.css">

Základní příprava

Než začneme psát kód komponenty, musíme si připravit náš pracovní prostor:

  1. Vytvoříme si soubory index.html, style.css a složku images.
  2. V souboru index.html v části head vložíme odkaz na náš css soubor:
    HEAD
    <link rel="stylesheet" href="style.css">
  3. Najdeme si nějaký pěkný obrázek, který budeme chtít v komponentě použít, stáhneme jej, vložíme do složky images a ideálně jej přejmenujeme na něco krátkého. Já v tomto případě použiji obrázek domečku u moře a pojmenoval jsem ho jako "sea.jpg"
  4. Než začneme psát jakýkoliv kód, napíšeme si do našeho style.css souboru tyto řádky:
    CSS
    * {
    • padding: 0;
    • margin: 0;
    • box-sizing: border-box;
    }
    • * označí všechny elementy na stránce a aplikuje se tak na všechny prvky.
    • padding: 0 odstraní vnitřní okrajový prostor prvku.
    • margin: 0 odstraní vnější okrajový prostor prvku.
    • box-sizing: border-box usnadní design a layout.
  5. Pro lepší vizualizaci nastavíme elementu body pár hodnot:
    CSS
    body {
    • min-height: 100vh;
    • background-color: #f8fafc;
    • padding: 0 1rem;
    • display: flex;
    • align-items: center;
    • justify-content: center;
    }
    • min-height: 100vh nastaví minimální výšku elementu body na celou obrazovku.
    • background-color: #f8fafc nastaví pozadí elementu body na #f8fafc.
    • padding: 0 1rem nastaví vnitřní okrajový prostor vertikálně na 0 a horizontálně na 1rem, což způsobí, že se všechno v body bude posunuto alespoň 1rem od levého i pravého kraje obrazovky
    • display: flex umožňuje aplikovat flexibilní layout jako je align-items: center nebo justify-content: center na jeho potomky.
    • align-items: center zarovnává prvky po vertikální ose doprostřed.
    • justify-content: center zarovnává prvky po horizontální ose doprostřed.

Vytvoření komponenty

Nyní si napíšeme všechny potřebné elementy a poskládáme je.

Naše komponenta bude obsahovat jeden obrázek, nadpis, text pod nadpisem a tlačítko.

  1. Vytvoříme <div> komponenty a v něm dvakrát <div> - jeden pro obrázek a druhý pro textovou oblast, díky čemuž tuto komponentu později rozdělíme na dvě poloviny:
    HTML
    <div class="komponenta">
    <div class="komponenta-obrazek">
    </div>
    <div class="komponenta-texty">
    </div>
    </div>
  2. Do <div class="komponenta-texty> dáme nadpis komponenty, popis a tlačítko se šipkou. Výsledný kód tedy bude vypadat takto:
    HTML
    <div class="komponenta">
    <div class="komponenta-obrazek">
    </div>
    <div class="komponenta-texty">
    <h2 class="komponenta-nadpis">
    Prioritizing privacy and security
    </h2>
    <p class="komponenta-popis">
    We’re building social experiences that keep your account secure and enable you to make choices around how your data is used.
    </p>
    <a href="#" class="komponenta-tlacitko">
    Learn more <span class="komponenta-tlacitko--sipka">&rarr;</span>
    </a>
    </div>
    </div>
    • <div></div> se použije pro seskupení několika elementů.
    • class="" nastaví prvku určitou třídu. Ty potom využijeme v css.
    • <h2></h2> značí nadpis druhé úrovně.
    • <p></p> značí odstavec textu.
    • <a></a> je odkaz.
    • href="#" nastavuje cestu odkazu, v tomto případě je cestou "#", což nás odkáže na začátek naší stránky.
    • <span></span> je podobný jako <div></div> a můžeme díky tomu nastavit třídu například části textu.
    • &rarr; napíše šipku vpravo.

Rozvržení komponenty

HTML část komponenty máme za sebou. Teď se pustíme do CSS.

  1. Nejdříve nastavíme náš obrázek (v mém případě sea.jpg), aby se zobrazoval jako pozadí našeho <div class="komponenta-obrazek"></div>:
    CSS
    .komponenta-obrazek {
    • background-image: url("images/sea.jpg");
    }
  2. Také můžeme rovnou nastavit další vlastnosti této třídy, a tím jsou background-size: cover a background-position: center, takže naše třída bude nyní vypadat takto:
    CSS
    .komponenta-obrazek {
    • background-image: url("images/sea.jpg");
    • background-size: cover;
    • background-position: center;
    }
    • background-size: cover určuje velikost pozadí prvku tak, že se obrázek pozadí natáhne, aby pokryl celý prvek a zároveň si ponechal svůj poměr stran.
    • background-position: center určuje pozici pozadí prvku tak, že obrázek pozadí v prvku bude uprostřed.
  3. V tuto chvíli obrázek ještě nevidíme, ale to se brzy změní. Nastavíme naší komponentě display: flex a jejím přímým 'potomkům' nastavíme, aby zabírali polovinu své 'rodičovské' komponenty, tedy flex-basis: 50%:
    CSS
    .komponenta {
    • display: flex;
    }
    .komponenta-obrazek {
    • flex-basis: 50%;
    }
    .komponenta-texty {
    • flex-basis: 50%;
    }
    • display: flex určuje velikost pozadí prvku tak, že se obrázek pozadí natáhne, aby pokryl celý prvek a zároveň si ponechal svůj poměr stran.
  4. Nakonec upravíme naši třídu .komponenta-texty tak, aby byly všechny její prvky vždy pod sebou, zarovnané vlevo a vertikálně uprostřed komponenty.
    CSS
    .komponenta-texty {
    • display: flex;
    • flex-direction: column;
    • align-items: left;
    • justify-content: center;
    }
    • flex-direction: column poskládá všechny prvky v této třídě pod sebe. Defaultní hodnota je flex-direction: row, která je skládá vedle sebe. flex-direction: column také obrací naopak osy, podle kterých se chová align-items a justify-content.
    • align-items: left v tomto případě zarovnává po horizontální ose (nikoli vertikální) jelikož jsme nastavili flex-direction: column.
    • justify-content: center v tomto případě zarovnává po vertikální ose (nikoli horizontální) jelikož jsme nastavili flex-direction: column.

Design komponenty

Nyní máme již komponentu nakódovanou i rozvrženou, ale pořád ještě nevypadá moc krásně. Pojďme to tedy změnit.

  1. Začněme tím, že komponentě dáme pozadí, v tomto případě bílé:
    CSS
    .komponenta {
    • background-color: #fff;
    }
  2. Přidáme mezeru mezi komponentou a ostatními prvky stránky:
    CSS
    .komponenta {
    • margin: 4rem 0;
    }
    • margin: 4rem 0 nastaví vnější okrajový prostor nad a pod prvkem na 4rem a prostor vlevo a vpravo od prvku na 0 - takže ten nemění.
  3. Teď přidáme mezeru mezi texty a okrajem:
    CSS
    .komponenta-texty {
    • padding: 5rem 4rem;
    }
  4. To vypadá mnohem lépe. Nyní přidáme mezery mezi texty:
    CSS
    .komponenta-nadpis {
    • margin-bottom: 1.15rem;
    }
    .komponenta-popis {
    • margin-bottom: 1.15rem;
    }
    • margin-bottom mění přímo a pouze vnější okrajový prostor pod prvkem.
  5. Upravme teď velikosti textů:
    CSS
    .komponenta-nadpis {
    • font-size: 2rem;
    }
    .komponenta-popis {
    • font-size: 1.1rem;
    }
    • font-size určuje velikost textu. Vhodné jednotky jsou rem, em nebo třeba px.
  6. V tuto chvíli by to už chtělo nějaký vhodnější font. Můžete si najít takový, jaký se vám líbí například na fonts.google.com. Já v tomto případě používám font Roboto s podporovanými tloušťkami 300, 400 a 500. Stačí vložit pár řádků do hlavičky vašeho html souboru:
    HEAD
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
  7. Nyní už můžeme používat tento font. Pojďme tedy změnit font na celé stránce na Roboto:
    CSS
    * {
    • font-family: 'Roboto', sans-serif;
    }
  8. Dáme naší komponentě nějakou hloubku pomocí box-shadow. Pokud si chcete udělat svůj box-shadow, na internetu je mnoho generátorů.
    CSS
    .komponenta {
    • box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.1);
    }
    • box-shadow přidává stín do pozadí prvku.
  9. Zaoblíme rohy komponenty pomocí border-radius:
    CSS
    .komponenta {
    • border-radius: 1rem;
    }
    • border-radius zaobluje rohy prvku. Vhodné jednotky jsou například rem nebo px.
  10. Pozorně si všimněme, že v komponentě na straně s obrázkem se rohy nezaoblili. Je to proto, že obrázek na pozadí v komponenta-obrazek takzvaně "přetéká" z komponenty ven. to vyřešíme tak, že komponentě nastavíme overflow: hidden:
    CSS
    .komponenta {
    • overflow: hidden;
    }
    • overflow: hidden dělá to, že všechny části obsahu, které přesahují hranice prvku, budou skryty.
  11. Můžeme trochu pozměnit řádkování:
    CSS
    .komponenta-nadpis {
    • line-height: 1.15;
    }
    .komponenta-popis {
    • line-height: 1.4;
    }
    • line-height: 1.4 nastavuje výšku řádku na 1,4 × výška písma prvku.

TIP! Pro prohození pozice obrázku s texty v komponentě, stačí v .komponenta nastavit flex-direction: row-reverse

Design tlačítka

V poslední řadě nás čeká design našeho tlačítka. chceme dosáhnout těchto vlastností:

Tlačítko má silný, černý text.

Při najetí myší se posune šipka o něco vpravo.

Při kliknutí na tlačítko se šipka posune ještě více vpravo.

  1. Tlačítku nastavíme základní design:
    CSS
    .komponenta-tlacitko {
    • color: #000;
    • text-decoration: none;
    • font-size: 1.15rem;
    • font-weight: 500;
    • max-width: max-content;
    }
    • color: #000 Mění barvu textu na #000 což je černá.
    • text-decoration: none vypne výchozí hodnoty text-decoration. V tomto případě - tedy odkazu, vypíná výchozí podtržení.
    • max-width: max-content; změní maximální šířku tlačítka na hodnotu, jaká odpovídá jeho obsahu. Neboli se šířka prvku přizpůsobí obsahu uvnitř a nemusíme tak nastavovat pevnou hodnotu.
  2. Trochu upravíme naši šipku:
    CSS
    .komponenta-tlacitko--sipka {
    • margin-left: .5em;
    }
    • em jednotku použijeme, jelikož em se mění podle aktuální velikosti písma v prvku. Takže když budeme mít stejné tlačítko akorát větší, bude i mezera mezi šipkou a textem tlačítka o něco větší a bude to tak vypadat o něco lépe. Kdybychom použili jednotku rem, ta se mění podle výchozí nastavené velikosti písma v celém dokumentu a mezera by tak byla vždy stejná.
  3. Změníme, co se stane se šipkou při najetí myší na tlačítko:
    CSS
    .komponenta-tlacitko:hover > .komponenta-tlacitko--sipka {
    • margin-left: .8em;
    }
    • :hover určuje, co se stane při najetí myší na tento prvek.
    • > vybírá přímé potomky prvku, v tomto případě komponenta-tlacitko--sipka.
  4. Teď změníme, co se stane se šipkou při kliknutí myší na tlačítko. Tedy chceme, aby při kliknutí šipka odjela ještě trošku více vpravo:
    CSS
    .komponenta-tlacitko:active > .komponenta-tlacitko--sipka {
    • margin-left: 1.25em;
    }
    • :active určuje, co se stane při kliknutí myší na tento prvek.
  5. Šipka se už chová správně, ale její pohyby nejsou plynulé, takže šipce nastavíme nějaký přechod:
    CSS
    .komponenta-tlacitko--sipka {
    • transition: 400ms;
    }
    • transition: 400ms nastaví všem typům přechodů v prvku hodnotu 400 milisekund. Místo 400ms můžeme použít i 0.4s.

Responzivní komponenta

Komponenta je už skoro hotová. Nyní jen upravíme pár věcí pro větší responzivitu:

Při zobrazení na menších zařízení se obrázek bude zobrazovat nad textem, nikoli vedle něj.

Při zobrazení na nejmenších zařízení se pro ušetření místa na displeji o něco sníží mezera mezi texty a okrajem komponenty.

  1. Nastavíme, že při zobrazení na zařízení, které má maximální šířku obrazovky 992px se změní pozice obrázku:
    CSS
    @media (max-width: 992px) {
    .komponenta {
    • flex-direction: column;
    }
    .komponenta-obrazek {
    • padding-top: 56.25%
    }
    }
    • @media (max-width: 992px) obsahuje css nastavení prvků, které se aplikuje pouze, když zobrazovaná šířka obrazovky je maximálně 992px což jsou mobilní telefony a tablety.
    • flex-direction: column mění uspořádání prvků v flex z výchozího uspořádání za sebou (flex-direction: row) na uspořádání pod sebou.
    • padding-top: 56.25% nastavuje horní vnitřní odsazení prvku na 56.25%. Tato hodnota byla vybrána, protože odpovídá poměru stran 16:9, takže obrázek bude zobrazen vždy v tomto poměru.
  2. Nyní jen zmenšíme mezeru mezi texty a okrajem komponenty na nejmenších zařízeních:
    CSS
    @media (max-width: 600px) {
    .komponenta-texty {
    • padding: 3rem
    }
    }
    • @media (max-width: 600px) obsahuje css nastavení prvků, které se aplikuje pouze, když zobrazovaná šířka obrazovky je maximálně 600px což jsou mobilní telefony.

Blahopřeji, komponentu máme hotovou!

Nyní ji můžete používat ve svých projektech.

Prioritizing privacy and security

We’re building social experiences that keep your account secure and enable you to make choices around how your data is used.

Learn more →