HTML5 CSS3 ISOMETRIC - Add some pizzazz to your text using the isometric text effect. Example: View Code Demo |
<!DOCTYPE html>
<head>
<title>HTML5 CSS3 ISOMETRIC TEXT EFFECT</title>
<link href='http://fonts.googleapis.com/css?family=Candal&v1' rel='stylesheet' type='text/css'>
<style>
/* Begin HTML5 CSS3 ISOMETRIC TEXT EFFECT */
/* This Script Free To Use Providing This Notice Remains */
/* This Script Has Been Found In The https://snapbuilder.com Free Public Codes Library */
body {font-family:verdana,arial,ms sans serif; font-size:90%;color:#000000;background:#e6e6e6;text-shadow:0px 1px 0px rgba(0,0,0,0.4);}
.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>
</head>
<body>
<noscript>You're really missing out on some cool HTML5 CSS3 effects without Javascript activated!</noscript>
<section id="container">
<header>
<hgroup>
<h1 class="skew1">CSS3 ISOMETRIC</h1>
<script type="text/javascript">document.write('<h1 class="skew2">CSS3 ISOMETRIC<\/h1>');</script>
<h2 class="skew3">TEXT DEMO</h2>
<script type="text/javascript">document.write('<h2 class="skew4">TEXT DEMO<\/h2>');</script>
</hgroup>
</header>
<p class="text-block skew5">An example of 3D Isometric text created using CSS3 text-shadows, 2D transforms and @Font-face embedding. This demo has been tested in Safari 5, Firefox 3, Chrome 10 & Opera 11 on Mac.</p>
</section>
<br /><br />
<div id="snippet">
[ This code example from <a href="http://snapbuilder.com/code_snippets/copy_code_snippet_150.html"></a> page. ]
</div>
</body>
</html>
|
Scroll