Курс 3D текст - урок от Wlad007

[Wlad007]

В данном примере, хочу продемонстрировать довольно интересный вариант оформления текста в стиле 3D


Основной код текста

<!-- Базовый container -->
    <div class="container">
        <span class="render">skripters.net</span><!-- текст -->
        <span class="render shadow">___________</span><!-- линия тени -->
        <span class="render reflect">skripters.net</span><!-- отражение -->
    </div>
<!-- /container -->

Добавим стили для данного кода

<style>
@charset "UTF-8";
* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
html,
body {
    height: 100%;
}
body {
    margin: 0;
    padding: 0;
    background-color: #454545;
    background-image: linear-gradient(45deg, transparent, transparent 48%, rgba(255, 255, 255, .3) 48%, rgba(255, 255, 255, .3) 52%, transparent 52%);
    background-size: 10px 10px;
    position: absolute;
    width: 100%;
    height: 100%;font-size: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
body:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    background-image: radial-gradient(circle, transparent 0%, rgba(7, 9, 11, 0.56) 100%);
}
/*
Базовый container
*/
.container {
    margin: 0 auto;
    align-self: center;
    width: 600px;
    -moz-perspective: 980px;
    -webkit-perspective: 980px;
    perspective: 980px;
    position: relative;
}
/*линия*/
.render {
    display: inline-block;
    z-index: 0;
    position: relative;
    line-height: 0.55em;
    height: 0.7em;
    -moz-transform: rotateY(45deg);
    -webkit-transform: rotateY(45deg);
    transform: rotateY(45deg);
    font-family: 'Bree Serif', serif;
    font-size: 10em;
    color: #f5f5f5;
    text-shadow: white 0.006em 0.006em 1px, rgba(0, 0, 0, 0.15) -3px 7px 10px, #d0d0d0 -1px 1px 1px, #d0d0d0 -2px 1px 1px, #d0d0d0 -3px 1px 1px, #d0d0d0 -4px 1px 1px, #d0d0d0 -5px 1px 1px, #d0d0d0 -6px 1px 1px, #d0d0d0 -7px 1px 1px, #d0d0d0 -8px 1px 1px, #d0d0d0 -9px 1px 1px, #d0d0d0 -10px 1px 1px, #d0d0d0 -11px 1px 1px, #d0d0d0 -12px 1px 1px, rgba(255, 255, 255, 0.6) -5px 2px 100px;
}
/*отражение*/
.render.reflect {
    z-index: 0;
    opacity: 0.2;
    -moz-transform: rotateX(180deg) rotateY(-45deg);
    -webkit-transform: rotateX(180deg) rotateY(-45deg);
    transform: rotateX(180deg) rotateY(-45deg);
}
.render.shadow {
    opacity: 0.6;
    z-index: 2;
    color: transparent;
    letter-spacing: -0.02em;
    position: absolute;
    width: 25%;
    top: 0.44em;
    left: 0.1em;
    -moz-transform: rotateX(-100deg) rotateY(-5deg) rotateZ(30deg);
    -webkit-transform: rotateX(-100deg) rotateY(-5deg) rotateZ(30deg);
    transform: rotateX(-100deg) rotateY(-5deg) rotateZ(25deg);
    text-shadow: rgba(0, 0, 0, 0.8) 0 0 30px, rgba(0, 0, 0, 0.8) 0 0 80px, black 0 0 150px, black 0 0 150px, black 0 0 250px, black 0 0 250px, white -0.15em 0.4em 250px;
}

</style>

И смотрим что получилось