LESS Mixin For 3D Text

index.html

<h1 contenteditable="true" class="ThreeDee">LESS Mixin For 3D Text</h1>

LESS-Mixin-For-3D-Text.markdown

LESS Mixin For 3D Text

Multi-Level text-shadow mixin for making your big, fat headline text look 3D.

Even more info here: http://forrst.com/posts/Another_LESS_Mixin_For_3D_Text-xoP

A Pen by Ian Edward on CodePen.

License.

style.less

/* 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: #333 url(/images/classy_fabric.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); }