Box Shadow Demonstration

HTML
<h1>How Box-Shadow Works</h1> <h3 id="text">Here's our box (with no shadow):</h3> <div id="box"></div> <h2 id="shadow">box-shadow: <span id="inset" class="selected">inset</span> <span id="one">0px</span> <span id="two">0px</span> <span id="three">0px</span> <span id="four">0px</span> <span id="color">#333</span><span id="comma">,</span></h2> <h2 id="shadow2"><span class="hidden">box-shadow:</span> <span id="one">10px</span> <span id="two">10px</span> <span id="three">5px</span> <span id="four">0px</span> <span id="color">#33CCFF</span></h2>
SCSS
@import url(http://fonts.googleapis.com/css?family=Roboto:500,300); body { font-family: 'Roboto'; background: #aaa; text-align: center; width: 100%; } #box { height: 100px; width: 100px; background: #ddd; margin: 2em auto; box-shadow: 0 0 0 0 #333; font-weight: 300; } h1, h2, h3 { font-weight: 300; } .bold { font-weight: 400; } .hidden { margin: 0; padding: 0; visibility: hidden; } #shadow span, #shadow2 span { margin: 0 5px; padding: 5px 10px; transition: background 300ms ease; &.selected { background: #FF4D4D; transition: background 300ms ease; } } button { border: none; height: 30px; width: 100px; }
JAVASCRIPT
/** * Uses jquery.animate-shadow.js * http://www.bitstorm.org/jquery/shadow-animation/ **/ $(document).ready(function() { var $text = $('#text'); var $box = $('#box'); var $shadow = $('#shadow'); var $one = $('#one'); var $two = $('#two'); var $three = $('#three'); var $four = $('#four'); var $color = $('#color'); var $inset = $('#inset'); var $shadow2 = $('#shadow2'); var $comma = $('#comma'); var step; var handle = null; var colors = [ '#33CCFF', '#CC66FF', '#FF5050', '#FFFF00', '#66FF33', '#333' ] $text.hide(); $box.hide(); $shadow.hide(); $inset.hide(); $comma.hide(); $shadow2.hide(); setTimeout(function() { $text.fadeIn(200); }, 200); setTimeout(function() { $box.fadeIn(200); }, 400); setTimeout(function() { $shadow.fadeIn(200); }, 400); setTimeout(function() { $one.addClass('selected'); $text.fadeTo(200, '0'); setTimeout(function() { $text.html('The first value sets the <span class="bold">horizontal offset</span>.'); }, 200); $text.fadeTo(200, '1'); }, 3000); setTimeout(function() { var x = parseInt($one.text()); function callOnTimeOut(){ setTimeout(function() { if (x < 5) { x++; $one.html(x + 'px'); callOnTimeOut(); } }, 200); } callOnTimeOut(); $box.animate({ boxShadow: '5px 0 0 0 #333' }, 1000) }, 5000); setTimeout(function() { var x = parseInt($one.text()); function callOnTimeOut(){ setTimeout(function() { if (x > -5) { x--; $one.html(x + 'px'); callOnTimeOut(); } }, 200); } callOnTimeOut(); $box.animate({ boxShadow: '-5px 0 0 0 #333' }, 2000); }, 7000); setTimeout(function() { $one.removeClass('selected'); $two.addClass('selected'); $text.fadeTo(200, '0'); setTimeout(function() { $text.html('The second value sets the <span class="bold">vertical offset</span>.'); }, 200); $text.fadeTo(200, '1'); }, 11000); setTimeout(function() { var x = parseInt($two.text()); function callOnTimeOut(){ setTimeout(function() { if (x < 5) { x++; $two.html(x + 'px'); callOnTimeOut(); } }, 200); } callOnTimeOut(); $box.animate({ boxShadow: '-5px 5px 0 0 #333' }, 1000) }, 13000); setTimeout(function() { var x = parseInt($two.text()); function callOnTimeOut(){ setTimeout(function() { if (x > -5) { x--; $two.html(x + 'px'); callOnTimeOut(); } }, 200); } callOnTimeOut(); $box.animate({ boxShadow: '-5px -5px 0 0 #333' }, 2000); }, 15000); setTimeout(function() { $two.removeClass('selected'); $three.addClass('selected'); $text.fadeTo(200, '0'); setTimeout(function() { $text.html('The third value sets the <span class="bold">blur radius</span>. The higher the number, the <span class="bold">blurrier</span> it gets.'); }, 200); $text.fadeTo(200, '1'); }, 19000); setTimeout(function() { var x = parseInt($three.text()); function callOnTimeOut(){ setTimeout(function() { if (x < 10) { x++; $three.html(x + 'px'); callOnTimeOut(); } }, 200); } callOnTimeOut(); $box.animate({ boxShadow: '-5px -5px 10px 0 #333' }, 2000); }, 22000); setTimeout(function() { $three.removeClass('selected'); $four.addClass('selected'); $text.fadeTo(200, '0'); setTimeout(function() { $text.html('The fourth value sets the <span class="bold">spread radius</span>. The higher the number, the <span class="bold">larger</span> the shadow. Negative values are useful for 1-sided shadows.'); }, 200); $text.fadeTo(200, '1'); }, 27000); setTimeout(function() { var x = parseInt($four.text()); function callOnTimeOut(){ setTimeout(function() { if (x < 5) { x++; $four.html(x + 'px'); callOnTimeOut(); } }, 200); } callOnTimeOut(); $box.animate({ boxShadow: '-5px -5px 10px 5px #333' }, 1000) }, 31000); setTimeout(function() { var x = parseInt($four.text()); function callOnTimeOut(){ setTimeout(function() { if (x > -5) { x--; $four.html(x + 'px'); callOnTimeOut(); } }, 200); } callOnTimeOut(); $box.animate({ boxShadow: '-5px -5px 10px -5px #333' }, 2000) }, 33000); setTimeout(function() { var x = parseInt($four.text()); function callOnTimeOut(){ setTimeout(function() { if (x < 0) { x++; $four.html(x + 'px'); callOnTimeOut(); } }, 200); } callOnTimeOut(); $box.animate({ boxShadow: '-5px -5px 10px 0px #333' }, 1000) }, 36000); setTimeout(function() { $four.removeClass('selected'); $color.addClass('selected'); $text.fadeTo(200, '0'); setTimeout(function() { $text.html('The last value sets the <span class="bold">shadow color</span>.'); }, 200); $text.fadeTo(200, '1'); }, 39000); setTimeout(function() { var x = 0; handle = setInterval(function() { $color.html(colors[x]); $box.animate({ boxShadow: '-5px -5px 10px 0px ' + colors[x] }, 200); x++; if (x === colors.length) { clearInterval(handle); handle = null; } }, 1500); }, 41000); setTimeout(function() { $color.removeClass('selected'); $text.fadeTo(200, '0'); setTimeout(function() { $text.html('You can add multiple shadows at once (just add a comma).'); }, 200); $text.fadeTo(200, '1'); }, 52000); setTimeout(function() { $comma.fadeIn(200); $shadow2.fadeIn(200); $shadow2.find('span').addClass('selected'); $comma.addClass('selected'); $box.css({ boxShadow: '-5px -5px 10px 0px #333, 10px 10px 5px 0px #33CCFF' }) }, 56000); setTimeout(function() { $shadow2.find('span').removeClass('selected'); $comma.removeClass('selected'); $text.fadeTo(200, '0'); setTimeout(function() { $text.html('You can also make inner shadows using <span class="bold">inset</span>.'); }, 200); $text.fadeTo(200, '1'); }, 61000); setTimeout(function() { $inset.fadeIn(200); $box.css({ boxShadow: 'inset -5px -5px 10px 0px #333, 10px 10px 5px 0px #33CCFF' }) }, 65000); setTimeout(function() { $inset.removeClass('selected'); $text.fadeTo(200, '0'); setTimeout(function() { $text.html('Thanks for watching!'); }, 200); $text.fadeTo(200, '1'); }, 68000); })
Expand for more options Login