Snap Builder Public Codes Library
Snap | Generators | Login | Browse | Search | Enter Code | Export Snap Builder Public Codes Library

 

Category: Cascading Style Sheets (HTML5 - SCSS - CSS3 & CSS) >> Miscellaneous >> HTML5 CSS3 ISOMETRIC


Code Snippet </> Info


Snippet Name: HTML5 CSS3 ISOMETRIC

Description: Add some pizzazz to your text using the isometric text effect.

Example: View Code Demo

Note:

Author:

Last Modified: 2015-08-26 22:45:55

Language: css

Highlight Mode: css

Copy Codes: Use Free Notepad ++
Bookmark and Share

Snap HTML Code Editor:
Paste the source code, make changes and instantly see it in live preview.
Snap HTML Code Editor


  About Copying

<!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 http://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>


[ Snippet Options ]

 

© 2002 -  Snap Builder Public Codes Library