Pokročilé CSS a zajímavosti

Pseudo-elementy ::before a ::after

Pseudo-elementy ::before a ::after slouží k vložení obsahu před nebo za obsah HTML elementu bez toho, aniž bychom museli upravovat HTML kód. Používá se předeším pro drobné vizualizace, kterými mohou být různé dekorace, ikonky, štítky a jiné, které nemají žádný sémantický význam. Pozor, jdou vložit pouze k neprázdným elementům.

Na předchozím cvičení jsme si ukázali vložení ikonky. Přidejme příklad pro vložení štítku, který by mohl být zobrazen u nového produktu.

h2 {
    position: relative;
}

h2::before {
    position: absolute;
    content: "NEW";
    font-size: small;
    padding: 0.5em;
    border-radius: 0.5em;
    background-color: red;
    color: white;
    left: -4em;
}

Vložení mapy

V kontaktní části stránky se dnes velmi často vyskytují interaktivní mapy. Vložení mapy do stránky je dnes velmi jednoduché. Mapy se dnes nejčastěji vkládají pomocí elementu <iframe> do atributu src, který umožňuje zobrazit jinou webovou stránku přímo uvnitř té naší.

Pomocí tohoto prvku tak můžeme snadno vložit například mapu z Google Maps. Uživatel pak s mapou může přímo pracovat – přibližovat ji, posouvat nebo si zobrazit konkrétní místo – podobně jako kdyby ji otevřel přímo na stránkách Google Maps.

Získání odkazu pro vytvoření mapy je velmi jednoduché. Stačí si ve webovém prohlížeči otevřít Google Maps, najít místo, které chceme na mapě zobrazit a klinkout na tlačítko Sdílet. Následně vybereme možnost "vložení mapy" a zkopírujeme vygenerovaný iframe.

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d82750.85581876412!2d17.196729561805892!3d49.598423719481076!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47124e8311181853%3A0x400af0f66159470!2sOlomouc!5e0!3m2!1scs!2scz!4v1776253641931!5m2!1scs!2scz" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

Takto vloženou mapu si následně můžeme nastylovat podle našeho uvážení. Například ji změnit výšku nebo šířku.

CSS transitions (přechody)

CSS transitions umožňují plynulou změnu mezi dvěma stavy prvku. Místo okamžité změny se změna aplikuje animuje v čase, což výrazně zlepšuje uživatelský zážitek. Přechody se nejčastěji používají u tlačítek, odkazů nebo dalších interaktivních prvků, typicky jako reakce na najetí myší (hover).

Vlastnost transition se zapisuje přímo do CSS pravidla daného prvku a určuje, jakým způsobem bude změna probíhat. Nastavujeme především, která vlastnost se má animovat (např. background, color, transform), jak dlouho bude přechod trvat (např. 0.3s), jaké bude jeho časování (např. ease, linear, ease-in, ease-out) a případně i zpoždění (delay). Tyto hodnoty můžeme zapsat zkráceně do jedné vlastnosti, například transition: background 0.3s ease; nebo je definovat samostatně pomocí vlastností transition-property, transition-duration, transition-timing-function a transition-delay.

<button>Klikni na mě</a>

    /* CSS kód */
    button {
        background-color: lightblue;
        transition-property: background-color; 
        transition-duration: 0.5s; 
        transition-timing-function: ease-in; 
        transition-delay: 0.5s;
    }

    button:hover {
        background-color: red;
    }

CSS transformace

CSS transformace umožňují měnit vzhled prvku bez toho, aby ovlivnily ostatní prvky na stránce. Díky nim můžeme prvek posouvat, otáčet, zvětšovat nebo různě deformovat. Na rozdíl od změny layoutu (např. margin nebo position) transformace nezasahují do toku dokumentu, takže okolní prvky zůstávají na svém místě. Pokud jsou transformace součástí nějaké animace, tak se často používají s CSS transitions, aby působily přirozeněji.

Transformace se zapisují pomocí vlastnosti transform v CSS. Do této vlastnosti můžeme kombinovat více funkcí najednou, například zvětšení a otočení. Nejčastěji používané funkce jsou translate(), roatate(), scale() a skew().

<button class="transform">Klikni na mě</button>

    /* CSS kód */
    button {
        background-color: lightblue;
        transition: transform 0.5s ease-in;
    }

    transform {
        transform: rotate(15deg);
    }

CSS animace

CSS animace umožňují vytvářet složitější pohyby prvků na stránce, které mohou běžet automaticky. Na rozdíl od transition, která reaguje na změnu stavu (například hover), mohou animace běžet samy od sebe, opakovat se nebo se spouštět v nekonečné smyčce. Pro vytvoření animací v CSS musíme definovat průběh animace pomocí @keyframes a chování zapsat pomocí vlastnosti animation.

Animace se definují pomocí pravidla @keyframes, které popisuje průběh změn v čase. V tomto pravidle určujeme jednotlivé stavy animace buď pomocí procent (0 % až 100 %, vhodné pokud je více změn), nebo pomocí zjednodušeného zápisu from a to (vhodné, pokud máme pouze dva stavy). Každý stav pak definuje, jaké CSS vlastnosti se mají v daném okamžiku změnit, například pozice, velikost, barva nebo otočení prvku.

Vlastnost animation se v CSS skládá z několika dílčích vlastností, které určují chování animace. Mezi hlavní patří animation-name (název animace definované v @keyframes), animation-duration (doba trvání animace), animation-timing-function (průběh animace, např. ease, linear), animation-delay (zpoždění před spuštěním), animation-iteration-count (počet opakování nebo nekonečné opakování pomocí infinite), animation-direction (směr animace, např. normal, reverse, alternate) a animation-fill-mode (určuje, jaké styly platí před a po animaci). Tyto vlastnosti lze zapisovat samostatně nebo zkráceně pomocí jediné vlastnosti animation.

<div class="spinner"></div>

    /* CSS kód */
    .spinner {
        width: 40px;
        height: 40px;
        border: 4px solid #ddd;
        border-top: 4px solid #3498db;
        border-radius: 50%;

        animation-name: spin;
        animation-duration: 1s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
    }

    @keyframes spin {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(360deg);
        }
    }