Vytvoření efektu bílých písmen s černým obrysem weboví designéři široce používají k tomu, aby text získal větší čitelnost a přitažlivost. Tento efekt je oblíbený zejména v titulcích, logech, bannerech a dalších designových prvcích. Chcete vědět, jak dosáhnout takového výsledku? Tento článek vám podrobně řekne několik způsobů, jak vytvořit bílá písmena s černým obrysem.
Prvním způsobem je použití vlastností text-shadow a color CSS. Chcete-li vytvořit obrys kolem bílého textu, musíte zadat dvě hodnoty pro vlastnost text-shadow: nejprve nastavte posun stínu vodorovně a svisle na 0 a poté nastavte poloměr rozostření na hodnoty šířky a výšky obrysu. Poté zadejte barvu zadního pozadí prostřednictvím vlastnosti color. Tímto způsobem získáte efekt bílých písmen s černým obrysem na vašem webu.
Druhým způsobem je použití Photoshopu. Nahrajte textovou vrstvu s bílými písmeny na rozvržení. Poté vyberte nástroj "Layer Style" z panelu vrstev a přidejte vnější obrys. Nastavte požadovanou barvu obrysu - černou-a vyberte požadovanou šířku obrysu. Tento způsob zajistí rychlé a efektivní vytváření bílých písmen s černým obrysem ve Photoshopu.
Jak změním barvu písmen na bílou s černým obrysem?
Pokud potřebujete změnit barvu písmen na bílou s černým obrysem na vašem webu, můžete využít speciální vlastnosti CSS.
Zde je několik způsobů, jak to udělat:
| Vlastnost CSS | Popis |
| color: white; text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black; | Nastaví barvu písmene na bílou a přidá černý obrys kolem písmene. |
| color: white; -webkit-text-stroke: 1px black; | Nastaví barvu písmene na bílou a přidá černý obrys kolem písmene. |
Tyto vlastnosti CSS můžete použít pro konkrétní položku na stránce zadáním jejího voliče v pravidlech stylů.
h1 color: white;
text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black;
>
Tímto způsobem budete moci změnit barvu písmen na bílou s černým obrysem na vašem webu.
Metoda 1: Použití vlastnosti text-stroke
Vlastnost text-stroke umožňuje nastavit šířku a barvu tahu textu. Aby byla písmena bílá, je třeba nastavit hodnotu white nebo transparent pro barvu textu. Chcete-li vytvořit černý obrys, musíte nastavit hodnotu 1px pro šířku tahu a black pro barvu tahu.
.text-with-outline color: white; -webkit-text-stroke: 1px black; text-stroke: 1px black;>Aplikujte třídu .text-with-outline k prvku s textem, který chcete udělat bílý s černým obrysem.
Metoda 2: Použití vlastnosti text-shadow
Pro vytvoření efektu bílých písmen s černým obrysem lze nastavit dvě hodnoty vlastnosti text-shadow: jednu pro bílý stín a druhou pro černý obrys.
Текст с белыми буквами и чёрным контуромV tomto příkladu zadáme písmům bílou barvu a přidáme čtyři stíny: jeden nahoře a vlevo, jeden nahoře a vpravo, jeden dole a vlevo a jeden dole a vpravo. Tímto způsobem vytváříme efekt černého obrysu kolem bílého textu.
Hodnoty-1px a 1px nastavují posun pro každý stín tak, aby byly umístěny vedle textu. Hodnota 0 určuje nepřítomnost rozostření stínu. Barva stínu je nastavena ve formátu RGB (#000 – Černá).
Pomocí vlastnosti text-shadow je možné vytvořit různé efekty pro text, včetně různých barev obrysu a stínu a nastavit různé vzdálenosti a rozostření.
Metoda 3: použití CSS filtrů
Pro začátek nastavíme barvu textu bílou pomocí vlastnosti color:
| Vlastnost | Hodnota |
|---|---|
| color | white |
Poté přidáme obrys k textu pomocí vlastnosti text-stroke:
| Vlastnost | Hodnota |
|---|---|
| text-stroke | 2px black |
Nyní je nutné použít CSS filtr, který změní barvu textu zpět na černou. K tomu lze použít vlastnost filter a hodnotu invert:
| Vlastnost | Hodnota |
|---|---|
| filter | invert(1) |
Nakonec bude text vypadat jako bílá písmena s černým obrysem. Můžete upravit tloušťku obrysu a barvu textu a další možnosti, abyste dosáhli požadovaného efektu.