Pravděpodobně jste obeznámeni s použitím textu pro maskování obrazu ve Photoshopu; je to nejlépe známý způsob, jak přidat do textu texturu nebo dokonce pozadí pozadí. Tento text pak můžete použít jako obrázek na vašem webu; nicméně by nebylo skvělé, kdybyste použili stejný efekt pouze pomocí HTML a CSS? Dobrou zprávou je, že můžete!

CSS představil vlastnosti jako klip na pozadí a masku, které můžete použít k vytvoření podobných efektů jako ty, které vytváříte ve Photoshopu. Kromě toho můžete pomocí SVG klipovat obrázek s textem.

Dnes se podíváme na možnosti a dokonce hodíme nějakou jednoduchou animaci. Pokud byste chtěli dodržovat kód, můžete Zde si stáhněte soubory.

Podpora prohlížeče

Předvídatelně, některé vlastnosti, které používáme, nejsou univerzálně podporovány, což znamená, že selhávají v prohlížečích, jako je IE a Firefox. Dobrou zprávou je, že tyto vlastnosti se tiše nezdaří, což znamená, že tyto techniky jsou progresivní vylepšení a je vhodné používat v místech.

Ořezávání textu pomocí klipu na pozadí

První možností, na kterou se podíváme, je vlastnost klipu pozadí . Tato vlastnost definuje, zda bude pozadí rozšířeno na hranici nebo ne. Umožňuje text definovaného prvku klipu na obrázek.

HTML

Náš značkování je prostě h1 s třídou bgClip:

Clip Text

Nyní přidáme kouzlo s CSS ...

CSS

Textujeme do textu s obrazem noční oblohy. Také se ujistíme, že text je hladce vykreslen pomocí vyhlazování písma. Všimněte si, že pro to funguje barva textu musí být průhledná, takže budeme také používat text-fill-color: transparentní.

.bgClip {background:url('../images/clouds.jpg');background-repeat:repeat-x;background-position:0 0;font-size:200px;text-transform:uppercase;text-align:center;font-family:'Luckiest Guy';color:transparent;-webkit-font-smoothing:antialiased;-webkit-background-clip:text;-moz-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin:0;

Nyní chceme jen přidat trochu animace, aby pozadí bylo více lákavé:

    -webkit-animation:BackgroundAnimated 15s linear infinite;-moz-animation:BackgroundAnimated 15s linear infinite;-ms-animation:BackgroundAnimated 15s linear infinite;-o-animation:BackgroundAnimated 15s linear infinite;animation:BackgroundAnimated 15s linear infinite;}@keyframes BackgroundAnimated {from {background-position:0 0}to {background-position:100% 0}}@-webkit-keyframes BackgroundAnimated {from {background-position:0 0}to {background-position:100% 0}}@-ms-keyframes BackgroundAnimated {<     from {background-position:0 0}to {background-position:100% 0}}@-moz-keyframes BackgroundAnimated {from {background-position:0 0}to {background-position:100% 0}}

Zde je výsledek:

Maskování textu pomocí maskování

Poslední technikou, kterou se budeme věnovat, je texturající text s maskovým obrázkem. Základní funkčnost této vlastnosti spočívá v tom, že bude spárována oblast textu, která je viditelná na základě neprůhlednosti.

HTML

Vše, co potřebujeme, je prvek h1 zabalený v div:

Mask Text

CSS

Chcete-li maskovat obraz s textem, použijeme -webkit-mask-image k určení obrázku a my také přidáme pěkný textový stín pro správnou míru. Konečně bych chtěl zadat nějaké plynulé efekty vznášení, abych odhalil celý text na myší (jen proto, že to dokážeme):

#maskText h1 {font-size: 200px;font-family: 'Lilita One', sans-serif;color: #ffe400;text-shadow: 7px 7px 0px #34495e;text-transform: uppercase;text-align: center;margin: 0;display: block;-webkit-mask-image: url('../images/texture.png');-webkit-transition:all 2s ease;-moz-transition:all 2s ease;-o-transition:all 2s ease;transition:all 2s ease;}#maskText h1:hover{-webkit-mask-image: url('../images/texture-hover.png');cursor: pointer;color: #ffe400;}

Zde je výsledek: