Heute zeige ich euch wie man einen Text so verdreht, dass er 1. aussieht als ob er ein Schatten ist und 2. wie eine Schrift verzerrt werden kann, so dass sie wie 3D aussieht.
Video / Anleitung
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
30
31
32
33
34
| .container {
height: 500px;
width: 500px;
background-color: brown;
position: absolute;
margin: auto;
top:0;
bottom:0;
left:0;
right:0;
}
.schatten, .text {
font-size: 40px;
position: relative;
}
.schatten {
color:rgba(5,5,5,0.3);
transform-origin: 0 0;
transform: rotate(-30deg) skew(30deg) scaleY(1.6);
top: 255px;
left:85px;
}
.text {
color: white;
transform-origin: 0 0;
transform: rotate(-30deg) skew(-30deg);
top: 200px;
left: 150px;
} |
.container {
height: 500px;
width: 500px;
background-color: brown;
position: absolute;
margin: auto;
top:0;
bottom:0;
left:0;
right:0;
}
.schatten, .text {
font-size: 40px;
position: relative;
}
.schatten {
color:rgba(5,5,5,0.3);
transform-origin: 0 0;
transform: rotate(-30deg) skew(30deg) scaleY(1.6);
top: 255px;
left:85px;
}
.text {
color: white;
transform-origin: 0 0;
transform: rotate(-30deg) skew(-30deg);
top: 200px;
left: 150px;
}
HTML
1
2
3
4
| <div class="container">
<div class="schatten">Der Chefblogger</div>
<div class="text">Der Chefblogger</div>
</div> |
<div class="container">
<div class="schatten">Der Chefblogger</div>
<div class="text">Der Chefblogger</div>
</div>
0 Kommentare