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:
Będziemy tworzyć takie napisy:
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.
