Czy pamiętasz może czas, kiedy zaczynałeś swoją przygodę z Photoshopem? Może zaprojektowałeś wtedy tekst oparty na obrazie, a następnie umieściłeś go na swojej stronie?

Dzięki właściwościom maski CSS, możesz uzyskać podobny efekt.

Elementy, które będa potrzebne:

dowolne zdjęcie
tekstura (plik PNG)
czcionka Lato (Google Font)
czcionka Pacifico (Google Font)
czcionka Oswald (Google Font)

Będziemy tworzyć takie napisy:clip

Używanie Webkit Background-Clip

W tej części tutoriala użyjesz właściwości background-clip aby uzyskać ciekawy napis przy pomocy nagłówka h1.

Struktura HTML

Umieść w swoim kodzie dwa bloki i nadaj im kolejno ID:  napis-1, napis-2. W obu blokach umieścić dowolny tekst za pomocą nagłówków h1.

[html]
<div id="napis-1">

<h1>LEW</h1>

</div>

<div id="napis-2">

<h1>Jest królem dżungli!</h1>

</div>

[/html]

Style CSS

Teraz w CSS użyjemy właściwości background-clip aby przyciąć odpowiednio tło do tekstu. Tło domyślnie będzie rozciągać się do zewnętrznej krawędzi obramowania tekstu.

Użyjemy dwóch różnych obrazów tła. Pierwszy z nich to bedzie lew a drugi dżungla.

Właściwość Webkit-text-fill-color ustawiamy jako przezroczystą aby mieć pewność że kolor nie pojawi się nam w tekście.

[html]
#napis-1 {
background: url(images/lion.jpg) no-repeat center center;
background-size: cover;
color: #fff;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
}

#napis-2 {
background: url(images/jungle.jpg) no-repeat top center;
background-size: cover;
color: #fff;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
cursor: pointer;
}

#napis-1 h1 {
font-size: 200px;
font-family: Anton, sans-serif;
text-align: center;
-webkit-transition: text-shadow 1s ease;
text-shadow: 0 0 1px rgba(0,0,0,.1);
margin: 0;
padding: 0;
}

#napis-2 h1 {
font-size: 110px;
font-family: Pacifico, sans-serif;
text-align: center;
-webkit-transition: text-shadow 1s ease;
text-shadow: 0 0 1px rgba(0,0,0,.1);
margin-top: -75px;
padding: 0;
}
[/html]

Użycie Webkit Mask-Image

Korzystając z właściwoścy webkit-mask-image możesz umieścić obraz w tekście. Jest to prawie taka sama właściwość jak background-clip z tym, że obraz maski przycina widoczną część elementu zgodnie z przezroczystością maski obrazu.

Struktura HTML

Stwórz napis używając nagłówka h1 i całość umieść w bloku o ID maska.

[html]

<div id="maska">

<h1>BARDZO FAJNY NAPIS Z TŁEM</h1>

</div>

[/html]

Style CSS

W CSS określ kolor, typ, wielkość czcionki, itd. Ponadto użyj właściwości -webkit-mask-image do przycięcia tła wobec tekstu. Obróć tekst o -4 stopnie przy pomocy właściwości transform.

[html]
#maska{
font-family: Oswald, sans-serif;
font-size: 100px;
color: #fff;
text-transform: uppercase;
border: 14px solid #fff;
border-radius: .2em;
text-align: center;
margin: 0;
display: block;
-webkit-mask-image: url(images/rough-texture.png);
-webkit-transform: rotate(-4deg);
-moz-mask-image: url(images/rough-texture.png);
-moz-transform: rotate(-4deg);
-o-mask-image: url(images/rough-texture.png);
-o-transform: rotate(-4deg);
mask-image: url(images/rough-texture.png);
transform: rotate(-4deg);
}[/html]

Podsumowanie

W taki oto prosty sposób można łatwo przyciąć obraz do tekstu używając właściwości background-clip w CSS. Pamiętaj tylko, że przeglądarka Internet Explorer 8 nie ma wsparcia dla tej właściwości.

Demo oraz pliki do pobrania.

Comments are closed.