3D textový efekt s CSS

Podívejme se, jak se to děláBudeme potřebovat:

• Základní znalosti HTML a CSS
• Editor kódu
• Náš prohlížeč

Krok 1

Na našem lokálním webu vytvoříme složku pro uložení souborů, které budeme potřebovat, budu tomu říkat „text_3d“ v rámci něj další volání css
ZVĚTŠIT
ZVĚTŠIT

Krok 2

Přejdeme do editoru kódu a vytvoříme nový soubor index.html, který uložíme do kořenového adresáře složky „3d_text“, kterou jsme vytvořili v předchozím kroku, do které napíšeme naši základní html strukturu a přidáme odkaz na css soubor s názvem „style. ccs“, který vytvoříme později.
html kód

Krok 3

Do těla přidáme čáru, do které umístíme štítek

ke které přiřadíme třídu „3d-text“, kterou následně vytvoříme v souboru .css, umístím jakýkoli text do tohoto štítku k otestování.

3-D textový efekt

Pokud to právě teď vidíme v prohlížeči, neuvidíme zásadní změny, jen normální a aktuální text, abychom mohli mít 3D vzhled, je nutné definovat některé vlastnosti pomocí css. Jít na to.
ZVĚTŠIT

Krok 4

V našem editoru kódu vytvoříme nový soubor .css, kterému budu říkat style.css. Umístíme vlastnosti tak, aby náš text měl 3D efekt, kterého chceme dosáhnout.

Krok 5

Začneme upravovat náš css, nejprve definujeme velikost našeho těla, za tímto účelem mu dáme absolutní polohu se šířkou a výškou 100%.

 body {pozice: absolutní; šířka: 100%; výška: 100%} 

Krok 6

Do našeho .ccs napíšeme vlastnosti pro třídu „3d-text“, ke které jsme se vyjádřili v kroku 3. Začneme definováním písma, zvláště rád používám písmo „Helvetica Neue“, samozřejmě můžete použijte jej s požadovaným písmem. V tomto případě nastavím velikost písma na přibližně 80 pixelů; tučný nebo tučný typ … A tentokrát to nechám bíle. Pokud jej uvidíme v prohlížeči, všimneme si, že text zmizel, protože jsme jej umístili na bílo a pozadí prohlížečů je také bílé …

 body {pozice: absolutní; šířka: 100%; výška: 100%} .3d_text {font-family: "Helvetica Neue", Helvetica, Arial, bezpatkové; velikost písma: 80px; font-weight: bold; barva: #fff; } 

V prohlížeči uvidíme, že text zmizí
ZVĚTŠIT

Krok 7

Viděli jsme, že v předchozím kroku text zmizel, nyní ho potřebujeme, aby se objevil a s 3D efektem. K tomu stačí do našeho textu přidat stín pomocí vlastnosti text-shadow, a to následovně.

 body {pozice: absolutní; šířka: 100%; výška: 100%} .3d_text {font-family: "Helvetica Neue", Helvetica, Arial, bezpatkové; velikost písma: 80px; font-weight: bold; barva: #fff; text-stín: 0 1px 0 #ccc; } 

ZVĚTŠIT

Vidíme, že jsme dosáhli mírného efektu stínování, ale nestačí, aby to vypadalo 3D, naštěstí nám css umožňuje kombinovat několik stínů v rámci vlastnosti text-stín oddělené čárkou, toho využijeme k umístění více stíny v jiné vzdálenosti od našeho textu a s různými barevnými tóny od tmavšího po světlejší, abychom vytvořili efekt, ale musíme tyto stíny také kombinovat pomocí barev rgba a průhledných fólií, abychom na konci stínování.
Takto by náš css kód vypadal takto.

 body {pozice: absolutní; šířka: 100%; výška: 100%} .3d_text {font-family: "Helvetica Neue", Helvetica, Arial, bezpatkové; velikost písma: 80px; font-weight: bold; barva: #fff; textový stín: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba (0, 0, 0, .1), 0 0 5px rgba (0, 0, 0, .1), 0 1px 3px rgba (0, 0, 0, .3), 0 3px 5px rgba (0, 0, 0, .2), 0 5px 10px rgba (0 , 0, 0, 0,25), 0 10px 10px rgba (0, 0, 0,, ​​2), 0 20px 20px rgba (0, 0, 0,, ​​15); } 

A výsledkem efektu bude následující …
ZVĚTŠIT
To je prozatím vše, zde je .zip se soubory, jakékoli dotazy nebo návrhy lze posílat prostřednictvím komentářů, pozdravů …
text_3d20150917130359.zip 694 bytů 217 staženíLíbil se vám tento návod a pomohl mu?Autora můžete odměnit stisknutím tohoto tlačítka, čímž mu dáte kladný bod