Jak stworzyć napis wypełniony grafiką przy pomocy CSS3 i HTML5?

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.

<div id="napis-1">

<h1>LEW</h1>

</div>


<div id="napis-2">

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

</div>

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.

#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;
}

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.

<div id="maska">

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

</div>

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.

#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);
}

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.