Diesen kleinen Effekt habt ihr sicher schon öfters gesehen und zwar wird hier ein Bild simuliert und zwar aus reinem Text – so sieht es wenigstens aus. In Wahrheit ist da ein Text über einem Bild gelegt worden und dank einem kleinen CSS Trick wird dort wo die Schrift ist, das Bild durchscheinen und so sieht man am Schluss dann diesen Effekt.
Da ich diese Sache sehr spannend finde, habe ich heute beschlossen euch mal in dieses CSS Geheimnis einzuweihen. Wenn man nämlich das Prinzip verstanden hat, kann man ganz coole Dinge erstellen.
Video
HTML
1 2 3 | <section>
<p>Lorem ipsum dolor....aperiam.</p>
</section> |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | body {
margin: 0;
padding: 0;
box-sizing: border-box;
/*background: #03396a;*/
}
section {
height: 100vh;
overflow: hidden;
background: #000;
}
p {
position: relative;
font-size: 1.5em;
letter-spacing: -0.05em; /* buchstaben rücken zusammen*/
line-height: 0.7em; /*zeilenabstand rückt zusammen */
background: url(face.png) no-repeat, url(face.png) no-repeat; /*bild wird angezeigt*/
background-blend-mode: color-dodge;
/*background-position-x: center;*/ /* bild wird zentriert */
background-position: center;
background-attachment: fixed;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
} |
0 Kommentare