Sie sind wahrscheinlich mit der Verwendung von Text vertraut, um ein Bild in Photoshop zu maskieren. Es ist die beste Methode, um Ihrem Text eine Textur oder sogar einen Bildhintergrund hinzuzufügen. Sie können diesen Text dann als Bild auf Ihrer Website verwenden. Aber wäre es nicht großartig, wenn Sie den gleichen Effekt nur mit HTML und CSS anwenden könnten? Die gute Nachricht ist, du kannst!
CSS hat Eigenschaften wie background-clip und mask-image eingeführt, mit denen Sie ähnliche Effekte wie in Photoshop erstellen können. Darüber hinaus können Sie mit SVG auch ein Bild mit Text beschneiden.
Heute schauen wir uns die Optionen an und werfen sogar eine einfache Animation ein. Wenn Sie dem Code folgen möchten, können Sie das tun Laden Sie die Dateien hier herunter.
Wie zu erwarten ist, werden einige der von uns verwendeten Eigenschaften nicht universell unterstützt, was bedeutet, dass sie in Browsern wie IE und Firefox nicht funktionieren. Die gute Nachricht ist, dass diese Eigenschaften stillschweigend versagen, was bedeutet, dass diese Techniken eine progressive Verbesserung darstellen und in Websites sinnvoll sind.
Die erste Option, die wir uns ansehen, ist die Eigenschaft background-clip . Diese Eigenschaft legt fest, ob der Hintergrund in den Rahmen erweitert wird oder nicht. Es ermöglicht dem Text eines definierten Elements, ein Bild zu schneiden.
Unser Markup ist einfach ein h1 mit der Klasse bgClip:
Clip Text
Jetzt fügen wir die Magie mit CSS hinzu ...
Wir fügen Textur unserem Text mit einem Bild des nächtlichen Himmels hinzu. Wir werden auch sicherstellen, dass der Text mit Font-Glättung reibungslos gerendert wird . Beachten Sie, dass die Textfarbe transparent sein muss, damit die Textfarbe verwendet wird. Daher verwenden wir auch 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;Jetzt möchten wir nur eine kleine Animation hinzufügen, um den Hintergrund verlockender zu machen:
-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}}Hier ist das Ergebnis:
Die letzte Technik, die wir betrachten werden, ist die Texturierung von Text mit Maskenbild. Die Grundfunktionalität dieser Eigenschaft besteht darin, dass der Textbereich, der aufgrund der Deckkraft sichtbar ist, abgeschnitten wird.
Alles, was wir brauchen, ist ein h1-Element, das in ein Div eingepackt ist:
Mask Text
Um das Bild mit dem Text zu maskieren, verwenden wir das -webkit-Maskenbild, um das Bild zu spezifizieren, und wir fügen auch einen schönen Text-Schatten hinzu. Schließlich möchte ich einige glatte Hover-Effekte assistieren, um den gesamten Text bei Mouse-Over zu enthüllen (nur weil wir es können):
#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;}Hier ist das Ergebnis: