Wie man ein Bild aus Text erstellen kann, mit CSS und HTML

von | Aug 4, 2022 | Allgemein | 0 Kommentare

Schlagwörter: 03396a - CSS - CSS3

Inhaltsverzeichnis

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

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

WordPress

Allgemein

Technik

Design

Konzept

WordPress Plugins

Interessantes

Vermarktung