Permalink
Browse files

added 3D textshadow effect support.

  • Loading branch information...
1 parent 734465d commit 5521eb6f94c70248b3b0c84902c0807bdfa38df5 @paulirish committed Jan 5, 2011
Showing with 34 additions and 1 deletion.
  1. +1 −0 css/style.css
  2. +1 −0 index.html
  3. +32 −1 js/script.js
View
@@ -263,6 +263,7 @@ html, body { height: 100%;}
label { position: absolute; right: 50px; top: 40%; color: #666; }
button { position: absolute; right: 50px; top: 60%; ; }
+ button + button { top: 75%;}
body .fd-slider-inner { background: none!important; border: 0!important;}
View
@@ -71,6 +71,7 @@
<input type=color>
<label><input type=checkbox> wtf</label>
<button>all the way</button>
+ <button>3D</button>
</fieldset>
<h1 contenteditable>MOTHER EFFING TEXT-SHADOW</h1>
View
@@ -74,12 +74,19 @@ document.querySelector('input[type="checkbox"]').addEventListener('change', func
wackyMode = e.target.checked;
}, false);
-$('button').click(function f(e){
+$('button:first').click(function f(e){
f.on = !f.on;
e.target.innerHTML = f.on ? 'what does it mean?' : 'all the way';
RAINBOWZ(f.on);
});
+$('button:last').click(function f(e){
+ f.on = !f.on;
+ e.target.innerHTML = f.on ? 'nvm.' : '3D';
+ threeD(f.on);
+});
+
+
function doIt(e){
h1.style.textShadow = '';
@@ -145,6 +152,30 @@ var RAINBOWZ = function(bool) {
};
+// thx http://markdotto.com/playground/3d-text/
+var threeD = function(bool){
+
+ if (!bool) {
+ doIt();
+ return;
+ }
+ var shadows = '0 1px 0 #ccc, \
+0 2px 0 #c9c9c9, \
+0 3px 0 #bbb, \
+0 4px 0 #b9b9b9, \
+0 5px 0 #aaa, \
+0 6px 1px rgba(0,0,0,.1), \
+0 0 5px rgba(0,0,0,.1), \
+0 1px 3px rgba(0,0,0,.3), \
+0 3px 5px rgba(0,0,0,.2), \
+0 5px 10px rgba(0,0,0,.25), \
+0 10px 10px rgba(0,0,0,.2), \
+0 20px 20px rgba(0,0,0,.15)';
+
+ setShadow(shadows);
+}
+
+
$('.presets a').click(function(){
var name = window.prompt('what you wanna call it, bro?');

0 comments on commit 5521eb6

Please sign in to comment.