Zobacz poniższy nagłówek.
Aby uzyskać tekst z tłem obrazka, wystarczy zastosować tylko kilka właściwości CSS. Tymi właściwościami są background, -webkit-text-fill-color oraz background-fill. Pierwszą właściwość na pewno znasz, za jej pomocą możesz ustawić zdjęcie w tle. Druga z wymienionych właściwość wypełnia tekst określonym kolorem, możemy podać konkretną wartość albo tak jak w naszym przypadku ustawić ją na całkowicie przeźroczystą. Ustawiamy ją na przeźroczystą po to, aby background-clip: text; wypełnił napis naszym tłem.
W poniższym kodzie HTML wprowadziłem tylko dwa nagłówki: h1 i h2, ostylowałem je za pomocą powyższych właściwości.
See the Pen text-fill-color and background-clip by Tomasz Wikło (@studioleopard) on CodePen.19725
Gdy będziesz stosować powyższy efekt w swoich projektach, to proponuję wykadrować kawałek obrazka i dodać do niego warstwę z tłem, jednego koloru. W GIMPie możesz to zrobić, dodając warstwę i ustawiając tryb na mnożenie z kryciem na np. 75%.
W tym miejscu, chcę Ciebie uczulić, aby koniecznie ustawić właściwość color. Jeżeli właściwość webkit-text-fill-color przez daną przeglądarkę nie będzie obsługiwana, to pod uwagę będzie brana właściwość color. I warto się upewnić, że nagłówek będzie odpowiednio widoczny, gdy nasze tło nie będzie wspierane.
Jak zwrócisz uwagę na właściwość background, to dzięki zastosowaniu linear-gradient z prefiksami -webkit oraz -o efekt tła wewnątrz tekstu zadziała jedynie na przeglądarkach, które go wspierają, czyli na Chrome, Firefoksie, Operze a w przeglądarkach, które powyższych właściwości CSS nie wspierają (np. IE) zostanie zastosowany zwykły kolor tekstu (w naszym przykładzie color: #000).
Mam nadzieję, że efekt się podoba i będziesz go używać w swoich projektach.
Opublikowano 21 listopada 2017 w kategorii css, html.
