📖

Kompletní příručka emoji

CSS stylování, animace, škálování a pokročilé efekty s praktickými příklady kódu

📅 Aktualizováno: 13. 12. 2025 ⏱️ 15 min čtení 🏷️ CSS, Animace, Web Design

📝 Základy používání emoji

Emoji jsou Unicode znaky, které lze používat přímo v HTML bez jakéhokoli speciálního kódování. Moderní prohlížeče je zobrazují automaticky pomocí systémových fontů nebo vlastních emoji fontů.

Ukázka emoji

😀 🎉 💼 🚀 ⭐

Vložení emoji do HTML

Existuje několik způsobů, jak vložit emoji do webové stránky:

HTML

<!-- Přímo jako znak -->
<span>🎉</span>

<!-- Jako HTML entita (decimální) -->
<span>&#127881;</span>

<!-- Jako HTML entita (hexadecimální) -->
<span>&#x1F389;</span>

<!-- V CSS pomocí content -->
<span class="emoji-before"></span>

CSS

.emoji-before::before {
    content: "🎉";
}

💡

Tip

Pro nejlepší kompatibilitu vkládejte emoji přímo jako Unicode znaky. Moderní editory a prohlížeče je podporují bez problémů.

📏 Škálování velikosti emoji

Emoji lze škálovat stejně jako běžný text pomocí vlastnosti font-size. Díky vektorové povaze zůstávají ostré v jakékoli velikosti.

Různé velikosti

🎯 1rem (16px)

🎯 2rem (32px)

🎯 3rem (48px)

🎯 4rem (64px)

🎯 6rem (96px)

CSS

/* Základní škálování */
.emoji-small { font-size: 1rem; }    /* 16px */
.emoji-medium { font-size: 2rem; }   /* 32px */
.emoji-large { font-size: 3rem; }    /* 48px */
.emoji-xlarge { font-size: 4rem; }   /* 64px */
.emoji-huge { font-size: 6rem; }     /* 96px */

/* Responzivní škálování */
.emoji-responsive {
    font-size: clamp(2rem, 5vw, 4rem);
}

/* Relativní ke kontejneru */
.emoji-relative {
    font-size: 200%;
}

🎬 CSS animace pro emoji

Animace dodají emoji život a pomohou upoutat pozornost uživatele. Zde jsou nejpoužívanější animační efekty:

Animované emoji

⚽ Bounce

❤️ Pulse

⚙️ Spin

🔔 Shake

🎈 Float

💓 Heartbeat

👋 Wiggle

⭐ Glow

CSS

/* Bounce - skákání */
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}
.emoji-bounce {
    animation: bounce 1s ease infinite;
}

/* Pulse - pulzování */
@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}
.emoji-pulse {
    animation: pulse 1s ease infinite;
}

/* Spin - rotace */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.emoji-spin {
    animation: spin 2s linear infinite;
}

/* Shake - třesení */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px) rotate(-5deg); }
    75% { transform: translateX(5px) rotate(5deg); }
}
.emoji-shake {
    animation: shake 0.5s ease infinite;
}

/* Float - vznášení */
@keyframes float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-10px) rotate(5deg); }
    75% { transform: translateY(-5px) rotate(-5deg); }
}
.emoji-float {
    animation: float 3s ease-in-out infinite;
}

/* Heartbeat - tlukot srdce */
@keyframes heartbeat {
    0%, 100% { transform: scale(1); }
    14% { transform: scale(1.3); }
    28% { transform: scale(1); }
    42% { transform: scale(1.3); }
    70% { transform: scale(1); }
}
.emoji-heartbeat {
    animation: heartbeat 1.5s ease infinite;
}

/* Wiggle - vrtění */
@keyframes wiggle {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(10deg); }
    75% { transform: rotate(-10deg); }
}
.emoji-wiggle {
    animation: wiggle 0.5s ease infinite;
}

/* Glow - záření */
@keyframes glow {
    0%, 100% { 
        filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.5)); 
    }
    50% { 
        filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.8)); 
    }
}
.emoji-glow {
    animation: glow 2s ease infinite;
}

⚡

Výkon

Pro plynulé animace používejte transform a opacity. Tyto vlastnosti jsou GPU akcelerované a nezpůsobují layout thrashing.

🎨 Barevné filtry

CSS filtry umožňují měnit vzhled emoji bez nutnosti používat různé varianty. Můžete tak dosáhnout zajímavých vizuálních efektů.

CSS filtry

CSS

/* Černobílé emoji */
.emoji-grayscale {
    filter: grayscale(100%);
}

/* Sépiový efekt */
.emoji-sepia {
    filter: sepia(100%);
}

/* Zvýšená saturace */
.emoji-saturate {
    filter: saturate(200%);
}

/* Posun odstínu */
.emoji-hue-rotate {
    filter: hue-rotate(90deg);
}

/* Invertované barvy */
.emoji-invert {
    filter: invert(100%);
}

/* Zvýšený jas */
.emoji-brightness {
    filter: brightness(150%);
}

/* Zvýšený kontrast */
.emoji-contrast {
    filter: contrast(200%);
}

/* Kombinace filtrů */
.emoji-vintage {
    filter: sepia(50%) contrast(120%) brightness(90%);
}

/* Rozmazání */
.emoji-blur {
    filter: blur(2px);
}

/* Stín pomocí drop-shadow */
.emoji-shadow {
    filter: drop-shadow(3px 3px 5px rgba(0,0,0,0.3));
}

💫 Stíny a speciální efekty

Textové stíny a CSS efekty mohou emoji dodat hloubku a výraznost. Na rozdíl od běžného textu se u emoji hodí použít filter: drop-shadow() pro přesnější stín.

Stínové efekty

🌟 Základní stín

🌟 Záře

🌟 Neon

🌟 3D efekt

CSS

/* Základní stín */
.emoji-shadow-basic {
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

/* Záře (glow) */
.emoji-shadow-glow {
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.8);
}

/* Neonový efekt */
.emoji-shadow-neon {
    text-shadow: 
        0 0 5px #fff, 
        0 0 10px #fff, 
        0 0 20px #FF6B6B, 
        0 0 30px #FF6B6B;
}

/* 3D efekt */
.emoji-shadow-3d {
    text-shadow: 
        1px 1px 0 #ccc, 
        2px 2px 0 #bbb, 
        3px 3px 0 #aaa, 
        4px 4px 0 #999;
}

/* Drop shadow (lepší pro emoji) */
.emoji-drop-shadow {
    filter: drop-shadow(3px 3px 5px rgba(0,0,0,0.4));
}

/* Vícebarevná záře */
.emoji-rainbow-glow {
    text-shadow: 
        0 0 10px #FF6B6B,
        0 0 20px #FFD700,
        0 0 30px #10B981,
        0 0 40px #3B82F6;
}

👆 Hover efekty

Interaktivní hover efekty zvyšují zapojení uživatelů a poskytují vizuální zpětnou vazbu. Zde jsou nejefektivnější techniky:

Najeďte myší na emoji

🔍

🔄

🃏

🎁

CSS

/* Společný základ */
.emoji-interactive {
    display: inline-block;
    transition: all 0.3s ease;
    cursor: pointer;
}

/* Zvětšení */
.emoji-grow:hover {
    transform: scale(1.5);
}

/* Rotace 360° */
.emoji-rotate:hover {
    transform: rotate(360deg);
}

/* Překlopení */
.emoji-flip:hover {
    transform: rotateY(180deg);
}

/* Zdvih se stínem */
.emoji-lift:hover {
    transform: translateY(-5px);
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.3));
}

/* Kombinace efektů */
.emoji-combo:hover {
    transform: scale(1.2) rotate(10deg);
    filter: drop-shadow(0 5px 15px rgba(0,0,0,0.2));
}

/* Změna barvy při hoveru */
.emoji-color-change:hover {
    filter: hue-rotate(180deg);
}

/* Rozmazání okolí */
.emoji-focus:hover ~ .emoji-focus {
    filter: blur(2px);
    opacity: 0.5;
}

🔔 Notifikační odznaky

Emoji lze kombinovat s notifikačními odznaky pro zobrazení počtu nepřečtených zpráv, upozornění nebo stavů.

Emoji s odznaky

📧 5

🛒 12

🔔

💬 99+

HTML

<div class="emoji-badge">
    <span class="emoji">📧</span>
    <span class="badge">5</span>
</div>

<!-- Pulsující tečka -->
<div class="emoji-badge">
    <span class="emoji">🔔</span>
    <span class="badge badge-dot badge-pulse"></span>
</div>

CSS

.emoji-badge {
    position: relative;
    display: inline-block;
}

.emoji-badge .emoji {
    font-size: 2rem;
}

.badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #EF4444;
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
}

/* Pouze tečka */
.badge-dot {
    width: 12px;
    height: 12px;
    min-width: 12px;
    padding: 0;
}

/* Pulsující animace */
.badge-pulse {
    animation: pulse 1.5s ease infinite;
}

/* Zelený odznak (online status) */
.badge-success {
    background: #10B981;
}

/* Žlutý odznak (varování) */
.badge-warning {
    background: #F59E0B;
}

🎯 Kombinované efekty

Nejlepších výsledků dosáhnete kombinací různých technik. Zde je několik komplexních příkladů:

Tlačítko s emoji

CSS

.btn-emoji {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    background: linear-gradient(135deg, #FFD700, #FF9500);
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 700;
    color: #000;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
}

.btn-emoji:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(255, 215, 0, 0.4);
}

.btn-emoji .emoji {
    font-size: 1.25rem;
    transition: transform 0.3s ease;
}

.btn-emoji:hover .emoji {
    transform: rotate(15deg) scale(1.1);
}

Animovaný loader

⚡ ⚡ ⚡

Načítání...

HTML + CSS

<div class="emoji-loader">
    <span style="animation-delay: 0s">⚡</span>
    <span style="animation-delay: 0.1s">⚡</span>
    <span style="animation-delay: 0.2s">⚡</span>
</div>

<style>
.emoji-loader {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}

.emoji-loader span {
    font-size: 2rem;
    animation: bounce 0.6s ease infinite;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}
</style>

Rating hvězdičkami

⭐ ⭐ ⭐ ⭐ ⭐

3 z 5 hvězdiček

CSS

.star-rating {
    font-size: 2rem;
}

.star-rating .star {
    cursor: pointer;
    transition: all 0.2s ease;
}

.star-rating .star.inactive {
    filter: grayscale(100%);
    opacity: 0.3;
}

.star-rating .star:hover {
    transform: scale(1.2);
}

/* Hover efekt - rozsvítit všechny do aktuální pozice */
.star-rating:hover .star {
    filter: none;
    opacity: 1;
}

.star-rating .star:hover ~ .star {
    filter: grayscale(100%);
    opacity: 0.3;
}

🎓

Shrnutí

Emoji jsou mocný nástroj pro zlepšení UX. Použijte je s mírou, vždy s ohledem na přístupnost a konzistenci designu. Pro větší projekty zvažte vytvoření vlastní knihovny emoji komponent.

⚠️

Poznámka k přístupnosti

Pro screen readery přidejte k dekorativním emoji atribut aria-hidden="true" nebo je zabalte do <span role="img" aria-label="popis"> pro emoji s významem.

🎲 Pokračujte s 3D efekty

Naučte se vytvářet pokročilé 3D transformace - flip karty, rotující kostky, karusely a další.

Zobrazit 3D efekty →