Schrift mit Schatten Effekt (Nur CSS und HTML) [Anleitung / Tutorial]

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

.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

<div class="container">
        <div class="schatten">Der Chefblogger</div>
        <div class="text">Der Chefblogger</div>
</div>