Wir alle kennen Font Awesome oder Google Font – für diejenigen die es nicht kennen habe ich die Namen verlinktn.
Man muss nicht unbedingt diese Schriften verwenden, sondern kann sie mit CSS nicht nur Farbig machen sondern auch andersweitig manipulieren. In diesem Video zeige ich euch wie man bei einer dicken Schrift die Konturen anzeigen kann. Keine Angst es ist in Photoshop genauso einfach wie in CSS – also das solltet ihr alle schaffen.
Video Anleitung
Quellcode HTML
1 2 | <div class="container"> Eric Mächler</div> |
Quellcode CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | body {
padding: 0;
margin: 0;
background: url("stgallen-big.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.container {
height: 100vh;
width: 100vw;
display: flex;
align-items: center;
justify-content: center;
font-size: 150px;
font-family: 'Montserrat', sans-serif;
-webkit-text-fill-color:transparent;
-webkit-text-stroke:8px white;
} |
0 Kommentare