• 1
  • 2
Home > Tips

CSS3 Texts Effect - Free Download CSS3 Texts Effect



 CSS3 Texts Effect - Free Download CSS3 Texts Effect

 

   


Recently, I have noticed through some forums that many people want to know how to create CSS3 texts effect. So, I think it is necessary for me to write this article to share some of my experiences of creating CSS3 texts effect.

The above demo is one kind of CSS3 texts effect created by myself. You can click the demo button to view it or click the download button to free download the CSS3 texts effect and then edit it for your own use.

The passage below will show you the HTML structure and the CSS codes for the above CSS3 texts effect, I hope it will give you some inspiration on creating such kind of CSS3 texts effect.



 HTML Structure of the above CSS3 Texts Effect 

 <div class='textWrap'>
  <h1>SliceMaker</h1>
  <h1>SliceMaker </h1>
  <h1>SliceMaker </h1>
  <h1>SliceMaker </h1>
  <h1>SliceMaker </h1>
  <h1>SliceMaker </h1>
  <h1>SliceMaker </h1>
  <h1>SliceMaker </h1>
  <h1>SliceMaker </h1>
  <h1>SliceMaker </h1>
</div>



 CSS Codes of the above CSS3 Texts Effect

 

body {
  background: #0a0a0a;
  text-align: center;
}
.demo {
  width: 960px;
  margin: 100px auto;
  position: relative;
}
.demo * {
  box-sizing: border-box;
}
.textWrap {
  animation:wobble 5s ease-in-out infinite;
  transform-origin:center center;
  transform-style:preserve-3d;
  width: 500px;
  margin: 0 auto;
}
 
@keyframes wobble {
  0%,100%{ transform:rotate3d(2,3,1,60deg); }
  25%{ transform:rotate3d(-2,3,1,60deg); }
  50%{ transform:rotate3d(-2,-3,1,60deg); }
  75%{ transform:rotate3d(2,-3,1,60deg); }
}

.textWrap h1 {
  display:block;
  width:100%;
  padding:40px;
  line-height:1.5;
  font:900 9em 'Concert One', sans-serif;
  text-transform:uppercase;
  position:absolute;
  color:#f6e6e6;
  animation:glow 10s ease-in-out infinite;
}

@keyframes glow {
  0%,100%{ text-shadow:0 0 35px #e22222; }
  25%{ text-shadow:0 0 35px #10145e; }
  50%{ text-shadow:0 0 35px #a9e56e; }
  75%{ text-shadow:0 0 35px #dd16da; }
}

.textWrap h1:nth-child(2){ transform:translateZ(5px); }
.textWrap h1:nth-child(3){ transform:translateZ(10px);}
.textWrap h1:nth-child(4){ transform:translateZ(15px); }
.textWrap h1:nth-child(5){ transform:translateZ(20px); }
.textWrap h1:nth-child(6){ transform:translateZ(25px); }
.textWrap h1:nth-child(7){ transform:translateZ(30px); }
.textWrap h1:nth-child(8){ transform:translateZ(35px); }
.textWrap h1:nth-child(9){ transform:translateZ(40px); }
.textWrap h1:nth-child(10){ transform:translateZ(45px); }



 Contact Me for Help

I am Daniel, one of the programmers of SliceMaker Soft. If you have problems understanding the above CSS3 texts effect or if you have some suggestions, please send me an email at: contact@slicemaker.com. I will try my best to serve you.



Choose a SliceMaker Product to Create a Website on Your Own-30 Day Freetrial
SliceMaker Standard V3.6 - Freeware
SliceMaker Standard V3.6 - Freeware
The anyone-can-master webpage making software. You can create exceptional webpage/website on your own even if you're unfamiliar with webpage making.
$0
$0
SliceMaker Platinum V3.6 - Freeware
SliceMaker Platinum V3.6 - Freeware
The bestselling webpage making software, helps you create exceptional webpage/website without writing complicated CSS and DIV codes.
$0
$0
SliceMaker Deluxe V3.6 - Freeware
SliceMaker Deluxe V3.6 - Freeware
The all-in-one webpage making software, helps you create webpage/website of any style. It's the idea tool to create webpage/website.
$0
$0