Text mit Kontur erstellen (Nur CSS und HTML) [Anleitung / Tutorial]

von | Jul 13, 2020 | Konzept, Mein Youtube Kanal, Youtube | 0 Kommentare

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

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht.