Prawdopodobnie wiesz, jak używać tekstu do maskowania obrazu w Photoshopie; to najbardziej znany sposób dodawania tekstur, a nawet tła obrazu do tekstu. Możesz następnie użyć tego tekstu jako obrazu na swojej stronie internetowej; jednak czy nie byłoby wspaniale, gdyby można było zastosować ten sam efekt za pomocą samego HTML i CSS? Dobra wiadomość jest taka, że możesz!
CSS wprowadził właściwości, takie jak tło-klip i obraz maski, które można wykorzystać do tworzenia podobnych efektów do tych, które tworzysz w Photoshopie. Co więcej, możesz również użyć SVG do klipu obrazu z tekstem.
Dzisiaj przyjrzymy się opcjom, a nawet wrzucimy prostą animację. Jeśli chcesz podążać za kodem, możesz pobierz pliki tutaj.
Przewidywalnie niektóre z używanych przez nas właściwości nie są powszechnie obsługiwane, co oznacza, że nie będą działać w przeglądarkach takich jak IE i Firefox. Dobrą wiadomością jest to, że te właściwości nie będą działać w sposób cichy, co oznacza, że te techniki są progresywnym ulepszeniem i dobrze się je stosuje w witrynach.
Pierwsza opcja, którą przyjrzymy się, to właściwość klipu w tle . Właściwość ta określa, czy tło zostanie przedłużone do granicy, czy nie. Pozwala tekstowi zdefiniowanego elementu przyciąć obraz.
Nasz znacznik to po prostu h1 z klasą bgClip:
Clip Text
Teraz dodajmy magię za pomocą CSS ...
Dodamy teksturę do naszego tekstu z obrazem nocnego nieba. Upewnimy się również, że tekst jest renderowany płynnie za pomocą funkcji wygładzania czcionek. Zauważ, że aby to zadziałało, kolor tekstu musi być przezroczysty, więc użyjemy również text-fill-color: transparent.
.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;Teraz chcemy dodać trochę animacji, aby tło było bardziej atrakcyjne:
-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}}Oto wynik:
Ostatnią techniką, którą przyjrzymy się, jest teksturowanie tekstu z obrazem maski. Podstawową funkcjonalnością tej właściwości jest to, że przycina ona obszar tekstu, który jest widoczny na podstawie krycia.
Wszystko czego potrzebujemy to element h1 zawinięty w div:
Mask Text
Aby zamaskować obraz za pomocą tekstu, użyjemy obrazu -ebkit-mask-obraz, aby określić obraz, a także dodamy ładny cień do tekstu. Na koniec chcę przydać trochę gładkich efektów najechania, aby odsłonić cały tekst po najechaniu myszą (tylko dlatego, że możemy):
#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;}Oto wynik: