Created
July 3, 2012 14:30
-
-
Save ian-pvd/3040086 to your computer and use it in GitHub Desktop.
A web page created at CodePen.io
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // == CodePen Gist == | |
| // @name: LESS Mixin For 3D Text | |
| // @author: ian.pvd - http://ian.pvdindustrial.com/ | |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>LESS Mixin For 3D Text · CodePen</title> | |
| <link rel="stylesheet" href="http://codepen.io/stylesheets/css/reset.css"> | |
| <style> | |
| @import url('http://fonts.googleapis.com/css?family=Arvo:700,700italic'); | |
| /* Some Fonts */ | |
| /* Base Styles */ | |
| html, | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| min-height: 100%; | |
| } | |
| body { | |
| padding: 1em; | |
| background: url('http://subtlepatterns.com/patterns/darkdenim3.png'); | |
| } | |
| h1 { | |
| /* These are the base styles for the 3D text tag. These values are | |
| completely up to you and will likely be determined by your site's layout. */ | |
| letter-spacing: 0.07em; | |
| line-height: 1.1em; | |
| margin: 0 auto 0.5em; | |
| display: block; | |
| padding: 0.2em; | |
| text-align: center; | |
| min-width: 8em; | |
| width: 75%; | |
| max-width: 16em; | |
| /* Ideally, your font will use a large display size and a fat-faced font. | |
| Also, it tends to look way better in italic for some reason. */ | |
| font: italic 700 96px 'Arvo', 'Helvetica Neue'; | |
| } | |
| h1:hover { | |
| background: rgba(255, 255, 255, 0.05); | |
| } | |
| /* The LESS 3D-Text Mixin */ | |
| /* Now, declare your 3D-Text Class... */ | |
| h1.ThreeDee { | |
| /* | |
| @color - | |
| The base color for the text. (Ideal range: 15% - 95% Brightness) | |
| @depth - | |
| Height of the letters, (Ideal Range: 0.4x - 2.5x) */ | |
| font-weight: bold; | |
| /* 3D Effect works best on fat text. Take this out and make it lean if you want. */ | |
| color: #b82e39; | |
| /* Sets the font color to the base value. */ | |
| text-shadow: /* This is where the vertical stack and shadows get built, in a process described by top scientists as "magic" */ | |
| /* Hightlight 100% */ | |
| 0 0.015em 0 #c5313e, /* Vertical Stack: 40% Shadow */ | |
| 0 0.03em 0.015em #8f242d, /* Vertical Stack: 36% Shadow */ | |
| 0 0.045em 0.03em #8b232b, /* 36% */ | |
| /* Vertical Stack: 34% Shadow */ | |
| 0 0.06em 0.03em #832129, /* Vertical Stack: 31% Shadow */ | |
| 0 0.09em 0.015em #761e25, /* Immediate Sharp Shadow */ | |
| 0 0.09em 0.045em rgba(0, 0, 0, 0.5), /* Sharp Top Shadow */ | |
| 0 0 0.07500000000000001em rgba(0, 0, 0, 0.2), /* Small Side Shadows */ | |
| 0 0.03em 0.12em rgba(0, 0, 0, 0.3), /* Main Bottom Shadow, Blurred */ | |
| 0 0.15000000000000002em 0.18em rgba(0, 0, 0, 0.25), /* Large Diffused Bottom Shadow */ | |
| 0 0.30000000000000004em 0.30000000000000004em rgba(0, 0, 0, 0.15); | |
| } | |
| </style> | |
| <style> | |
| #codepen-footer, #codepen-footer * { | |
| -webkit-box-sizing: border-box !important; | |
| -moz-box-sizing: border-box !important; | |
| box-sizing: border-box !important; | |
| } | |
| #codepen-footer { | |
| display: block !important; | |
| position: fixed !important; | |
| bottom: 0 !important; | |
| left: 0 !important; | |
| width: 100% !important; | |
| padding: 0 10px !important; | |
| margin: 0 !important; | |
| height: 30px !important; | |
| line-height: 30px !important; | |
| font-size: 12px !important; | |
| color: #eeeeee !important; | |
| background-color: #505050 !important; | |
| text-align: left !important; | |
| background: -webkit-linear-gradient(top, #505050, #383838) !important; | |
| background: -moz-linear-gradient(top, #505050, #383838) !important; | |
| background: -ms-linear-gradient(top, #505050, #383838) !important; | |
| background: -o-linear-gradient(top, #505050, #383838) !important; | |
| border-top: 1px solid black !important; | |
| border-bottom: 1px solid black !important; | |
| border-radius: 0 !important; | |
| border-image: none !important; | |
| box-shadow: inset 0 1px 0 #6e6e6e, 0 2px 2px rgba(0, 0, 0, 0.4) !important; | |
| z-index: 300 !important; | |
| font-family: "Lucida Grande", "Lucida Sans Unicode", Tahoma, sans-serif !important; | |
| letter-spacing: 0 !important; | |
| word-spacing: 0 !important; | |
| } | |
| #codepen-footer a { | |
| color: #a7a7a7 !important; | |
| text-decoration: none !important; | |
| } | |
| #codepen-footer a:hover { | |
| color: white !important; | |
| } | |
| </style> | |
| <script> | |
| // Kill alerts, confirmations and prompts | |
| window.alert = function(){}; | |
| window.confirm = function(){}; | |
| window.prompt = function(){}; | |
| window.open = function(){}; | |
| window.print = function(){}; | |
| </script> | |
| <script src="http://codepen.io/javascripts/libs/prefixfree.min.js"></script> | |
| </head> | |
| <body> | |
| <h1 contenteditable="true" class="ThreeDee">LESS Mixin For 3D Text</h1> | |
| <script src="http://code.jquery.com/jquery-latest.js"></script> | |
| <script src="http://codepen.io/javascripts/libs/modernizr.js"></script> | |
| <div id="codepen-footer"> | |
| <a style="color: #f73535 !important;" href="https://codepen.wufoo.com/forms/m7x3r3/def/field14=" onclick="window.open(this.href, null, 'height=517, width=680, toolbar=0, location=0, status=1, scrollbars=1, resizable=1'); return false">Report Abuse</a> | |
| | |
| <a href="/ian-pvd/pen/less-mixin-for-3d-text/4">Edit this Pen</a> | |
| </div> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <h1 contenteditable="true" class="ThreeDee">LESS Mixin For 3D Text</h1> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Some Fonts */ | |
| @import url('http://fonts.googleapis.com/css?family=Arvo:700,700italic'); | |
| /* Base Styles */ | |
| html,body { | |
| margin:0; | |
| padding:0; | |
| min-height:100%; } | |
| body { | |
| padding:1em; | |
| background:url('http://subtlepatterns.com/patterns/darkdenim3.png'); | |
| } | |
| h1 { | |
| /* These are the base styles for the 3D text tag. These values are | |
| completely up to you and will likely be determined by your site's layout. */ | |
| letter-spacing:0.07em; | |
| line-height:1.1em; | |
| margin:0 auto 0.5em; | |
| display:block; | |
| padding:0.2em; | |
| text-align:center; | |
| min-width:8em; | |
| width:75%; | |
| max-width:16em; | |
| /* Ideally, your font will use a large display size and a fat-faced font. | |
| Also, it tends to look way better in italic for some reason. */ | |
| font:italic 700 96px 'Arvo', 'Helvetica Neue'; | |
| &:hover { | |
| background:fade(#FFF,5); } | |
| } | |
| /* The LESS 3D-Text Mixin */ | |
| .3D-Text(@color,@depth) { /* | |
| @color - | |
| The base color for the text. (Ideal range: 15% - 95% Brightness) | |
| @depth - | |
| Height of the letters, (Ideal Range: 0.4x - 2.5x) */ | |
| font-weight:bold; | |
| /* 3D Effect works best on fat text. Take this out and make it lean if you want. */ | |
| color:@color; | |
| /* Sets the font color to the base value. */ | |
| text-shadow: | |
| /* This is where the vertical stack and shadows get built, in a process described by top scientists as "magic" */ | |
| /* Hightlight 100% */ | |
| 0 (@depth*0.01em) 0 lighten(@color,3.3%), | |
| /* Vertical Stack: 40% Shadow */ | |
| 0 (@depth*0.02em) (@depth*0.01em) darken(@color,10%), | |
| /* Vertical Stack: 36% Shadow */ | |
| 0 (@depth*0.03em) (@depth*0.02em) darken(@color,11%), /* 36% */ | |
| /* Vertical Stack: 34% Shadow */ | |
| 0 (@depth*0.04em) (@depth*0.02em) darken(@color,13%), | |
| /* Vertical Stack: 31% Shadow */ | |
| 0 (@depth*0.06em) (@depth*0.01em) darken(@color,16%), | |
| /* Immediate Sharp Shadow */ | |
| 0 (@depth*0.06em) (@depth*0.03em) rgba(0,0,0,.5), | |
| /* Sharp Top Shadow */ | |
| 0 0 (@depth*0.05em) rgba(0,0,0,.2), | |
| /* Small Side Shadows */ | |
| 0 (@depth*0.02em) (@depth*0.08em) rgba(0,0,0,.3), | |
| /* Main Bottom Shadow, Blurred */ | |
| 0 (@depth*0.1em) (@depth*0.12em) rgba(0,0,0,.25), | |
| /* Large Diffused Bottom Shadow */ | |
| 0 (@depth*0.2em) (@depth*0.20em) rgba(0,0,0,.15); } | |
| /* Now, declare your 3D-Text Class... */ | |
| h1.ThreeDee { | |
| .3D-Text(hsl(355,60%,45%),1.5); } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment