Úvod do vizuálního designu tooltipů
Šipky a stíny nejsou jen dekorativní prvky — jsou klíčem k tomu, aby se tooltip zdál autentický a integrovaný do vašeho rozhraní. Když je uděláte správně, uživatelé ani nebudou vědět, že tam jsou. Když to pokazíte, všichni se na ně budou koukat.
V tomto průvodci se podíváme na techniky pro vytvoření profesionálních šipek pomocí čistého CSS, různé přístupy k stínům a jak to všechno dát dohromady, aby to vypadalo, že to prostě patří do vašeho designu.
CSS šipky: Tři hlavní přístupy
Existují základně tři způsoby, jak vytvořit šipku na tooltipu bez obrázků. Každý má své výhody a úskalí.
Border Trick (nejjednodušší)
Když nastavíte velké bordery na prázdný element a zrušíte tři z nich, zbyde vám perfektní trojúhelník. Funguje rychle, ale barva je vždy opravdu ostrá a hranaté. Dobré pro minimalistické designy.
Clip-path (nejflexibilnější)
Máte úplnou kontrolu nad tvarem. Můžete si vytvořit šipku, která není přesně trojúhelník — třeba zaoblená nebo asymetrická. Zajímavá na internetu, ale trochu složitější na kód.
SVG (nejprofesionálnější)
Když opravdu potřebujete kontrolu, SVG je cesta. Můžete tam dát gradientem, zakulacení, nějaké zajímavé efekty. Má to smysl pro komplexnější designy, kde vám základní CSS nepostačuje.
Pro jednoduchý tooltip, který se vejde do 90% případů? Border trick. Zvládnete ho za minutu a bude to fungovat všude.
Stíny, které fungují
Stín je to, co dává tooltipu hloubku. Bez něj se to může zdát ploché. Ale když dáte stín moc silný, vypadá to levně.
Klíč je používat více vrstev stínů. Malý ostrý stín blízko u elementu vytváří linii. Větší měkký stín dál vytváří atmosféru. Spolu to vypadá profesionálně.
box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 24px rgba(0,0,0,0.15);
Vidíte ten vzor? První část je malá, ostrá. Druhá je větší, měkčí. Třetí by mohla být ještě větší pro opravdu hlubší efekt. Experimentujte — není tu jediná správná odpověď. Záleží na vašem designu.
Kombinování všeho dohromady
Takže máte šipku. Máte stín. Teď je potřeba, aby to spolu vypadalo jako jeden celek, ne jako dva samostatné prvky.
Barva šipky musí být stejná jako pozadí
Pokud má tooltip tmavé pozadí, měla by mít tmavou šipku. Pokud máte gradient, šipka by měla být nějaká průměr toho gradientu. Když je to různé, vypadá to jako design chyba.
Stín by měl následovat směr světla
Pokud máte v celém rozhraní světlo zleva, stín by měl být vpravo a dole. Pokud svítí z horního levého rohu, stín tam patří. Konzistentní směr světla udělá design koherentnějším.
Vzdálenost od elementu má smysl
Menší stín blízko šipky, větší stín dál — to vytváří pocit hloubky. Pokud je všechen stín stejný, to vypadá levně. Vrstvení je důležité.
Čistota hranic
Pokud používáte border trick pro šipku, hrany budou ostrá. Pokud to nevypadá dobře vedle vašeho obsahu, přidejte malý border-radius nebo zkuste clip-path.
Poznámka k kompatibilitě
Techniky popsané v tomto článku fungují ve všech moderních prohlížečích. Border trick pro šipky funguje i v Internet Exploreru 9+. Clip-path má lepší podporu od IE 11 výš. SVG je standardem všude. Pokud podporujete starší prohlížeče, testujte své řešení pečlivě.
Závěr: Detaily dělají rozdíl
Profesionální tooltip není jen o tom, aby se text zobrazil. Je to o tom, aby se tooltip cítil jako součást vašeho rozhraní. Šipka, která je správně vytvořená. Stín, který má správný tvar. Barvy, které se shodují.
Když to uděláte dobře, uživatelé si to nebudou všímat. Přesně tak, jak by to mělo být. Ale když si všimnou, že to vypadá podivně, to je problém. Tak si vezměte čas na tyto malé detaily.
A pamatujte — ne každý tooltip potřebuje superzdobenou šipku a složitý stín. Někdy jednoduché funguje nejlépe. Pokud se váš tooltip zdá správný bez všech těch věcí, dejte tomu šanci. Design je o tom, co funguje pro váš konkrétní projekt.
