How to Create Isometric 3D Text With CSS3
This neat CSS3 snippet I found makes your text appear in isometric projection. Since it’s in CSS, you can also apply other effects like shadows, 2D transforms, blur, etc.
Here’s the snippet of the CSS used to accomplish the sample image above. But if you want to get the full code, you can either click on the above image or the download link below.
| <style type=”text/css”>
.skew1, .skew3 { font: 60px/80px Candal; line-height: 100px; -webkit-transform: skewY(-26.6deg); -moz-transform: skewY(-26.6deg); -o-transform: skewY(-26.6deg); text-shadow: -1px -1px 0px #999, -2px -2px 0px #888, -3px -3px 0px #777, -4px -4px 0px #666, -5px -5px 0px #555, -5px -5px 0px #444, -5px -5px 0px #333, -5px -5px 5px #222; position: absolute; z-index: 100; }
.skew1 { top: 100px; left: 80px; }
.skew3 { top: 170px; left: 240px; }
.skew2, .skew4 { color: rgba(0,0,0,0); font: 60px/80px Candal; line-height: 100px; -webkit-transform: skew(63deg,-26.6deg); -moz-transform: skew(63deg,-26.6deg); -o-transform: skew(63deg,-26.6deg); text-shadow: 0 0 4px rgba(0,0,0,0.3); position: absolute; z-index: 50; }
.skew2 { top: 100px; left: 40px; }
.skew4 { top: 170px; left: 200px; }
.text-block { width: 360px; height: 200px; position: absolute; top: 270px; left: 490px; }
.skew5 { color: rgba(153,153,153,1); font: 14px/18px Candal; text-shadow: -2px 1px 2px #CCCCCC,-3px 1px 2px #DDDDDD; text-align: center; -webkit-transform: skew(63deg,-26.6deg); -moz-transform: skew(63deg,-26.6deg); -o-transform: skew(63deg,-26.6deg); position: absolute; z-index: 50; } </style> |
Check out the DEMO. What really impressed me is the part where you can type the text inside the box and you can see the effect as you type! Try it out yourself, or get the ZIP FILE now. Enjoy!
0
510
