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;
 
 
    }

HTML

1
2
3
4
<div class="container">
        <div class="schatten">Der Chefblogger</div>
        <div class="text">Der Chefblogger</div>
</div>

Notice: Undefined index: HTTP_REFERER in /home/sterntal/public_html/chefblogger_v2/wp-content/plugins/wpstatistix/tracking.php on line 30