It's free and you have access to premium codes!
Welcome back! Please login to your account.
Don't worry, we'll send you a message to help you to recover your acount.
Written by 28 March 2021
In the following code, we have a special and three-dimensional style for the text that can be used to display the heading of websites or their original names. In this code, in addition to the special 3D color of the text in blue and white, the written phrase constantly moves left and right, and up and down. This effect will attract the attention to your website much more.
<!-- this script is provided by http://www.htmlbestcodes.com coded by: Kerixa Inc. -->
<style>
@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Pacifico&text=HTML");
@import url("https://fonts.googleapis.com/css?family=Roboto:700&text=Best");
@import url("https://fonts.googleapis.com/css?family=Kaushan+Script&text=Codes");
body {
min-height: 450px;
height: 100vh;
margin: 0;
background: radial-gradient(circle, #0077ea, #1f4f96, #1b2949, #000);
}
.stage {
height: 300px;
width: 380px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
perspective: 9999px;
transform-style: preserve-3d;
}
.layer {
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d;
animation: ಠ_ಠ 5s infinite alternate ease-in-out -7.5s;
animation-fill-mode: forwards;
transform: rotateY(40deg) rotateX(33deg) translateZ(0);
}
.layer:after {
font: 150px/0.65 "Pacifico", "Kaushan Script", Futura, "Roboto", "Trebuchet MS", Helvetica, sans-serif;
content: "Pure\a css!";
white-space: pre;
text-align: center;
height: 100%;
width: 100%;
position: absolute;
top: 50px;
color: whitesmoke;
letter-spacing: -2px;
text-shadow: 4px 0 10px rgba(0, 0, 0, 0.13);
}
.layer:nth-child(1):after {
transform: translateZ(0px);
}
.layer:nth-child(2):after {
transform: translateZ(-1.5px);
}
.layer:nth-child(3):after {
transform: translateZ(-3px);
}
.layer:nth-child(4):after {
transform: translateZ(-4.5px);
}
.layer:nth-child(5):after {
transform: translateZ(-6px);
}
.layer:nth-child(6):after {
transform: translateZ(-7.5px);
}
.layer:nth-child(7):after {
transform: translateZ(-9px);
}
.layer:nth-child(8):after {
transform: translateZ(-10.5px);
}
.layer:nth-child(9):after {
transform: translateZ(-12px);
}
.layer:nth-child(10):after {
transform: translateZ(-13.5px);
}
.layer:nth-child(11):after {
transform: translateZ(-15px);
}
.layer:nth-child(12):after {
transform: translateZ(-16.5px);
}
.layer:nth-child(13):after {
transform: translateZ(-18px);
}
.layer:nth-child(14):after {
transform: translateZ(-19.5px);
}
.layer:nth-child(15):after {
transform: translateZ(-21px);
}
.layer:nth-child(16):after {
transform: translateZ(-22.5px);
}
.layer:nth-child(17):after {
transform: translateZ(-24px);
}
.layer:nth-child(18):after {
transform: translateZ(-25.5px);
}
.layer:nth-child(19):after {
transform: translateZ(-27px);
}
.layer:nth-child(20):after {
transform: translateZ(-28.5px);
}
.layer:nth-child(n+10):after {
-webkit-text-stroke: 3px rgba(0, 0, 0, 0.25);
}
.layer:nth-child(n+11):after {
-webkit-text-stroke: 15px dodgerblue;
text-shadow: 6px 0 6px #00366b, 5px 5px 5px #002951, 0 6px 6px #00366b;
}
.layer:nth-child(n+12):after {
-webkit-text-stroke: 15px #0077ea;
}
.layer:last-child:after {
-webkit-text-stroke: 17px rgba(0, 0, 0, 0.1);
}
.layer:first-child:after {
color: #fff;
text-shadow: none;
}
@keyframes ಠ_ಠ {
100% {
transform: rotateY(-40deg) rotateX(-43deg);
}
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="stage">
<div class="layer"></div>
<div class="layer"></div>
<div class="layer"></div>
<div class="layer"></div>
<div class="layer"></div>
<div class="layer"></div>
<div class="layer"></div>
<div class="layer"></div>
<div class="layer"></div>
<div class="layer"></div>
<div class="layer"></div>
<div class="layer"></div>
<div class="layer"></div>
<div class="layer"></div>
<div class="layer"></div>
<div class="layer"></div>
<div class="layer"></div>
<div class="layer"></div>
<div class="layer"></div>
<div class="layer"></div>
</div><a target='_blank' href='http://www.htmlbestcodes.com' style='font-size: 8pt; text-decoration: none'>Html Best Codes</a>
Comments
Here you can leave us commments. Let us know what you think about this code tutorial!