Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

327 lines (274 sloc) 12.211 kb
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>PIE CSS3 Quick Demo</title>
<style type="text/css">
#demo {
width: 600px;
border: 1px solid #CCC;
padding: 20px 20px 0;
position: relative;
font-size: 11px;
font-family: sans-serif;
}
#target {
position: absolute;
left: 20px;
top: 20px;
width: 200px;
text-align: center;
padding: 60px 0;
background: #EEE;
border: 1px solid #999;
font-size: 18px;
/* default CSS3 values: */
/*-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: #666 0 2px 3px;
-moz-box-shadow: #666 0 2px 3px;
box-shadow: #666 0 2px 3px;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#9F9), to(#393));
background: -webkit-linear-gradient(#9F9, #393);
background: -moz-linear-gradient(#9F9, #393);
background: -ms-linear-gradient(#9F9, #393);
background: -o-linear-gradient(#9F9, #393);
-pie-background: linear-gradient(#9F9, #393);*/
}
#controls {
margin: 0 0 20px 220px;
}
#controls input {
font-family: monospace;
font-size: 1em;
}
#controls fieldset {
border: 1px solid #CCC;
padding: 3px 10px 5px;
margin: 0 0 10px;
}
#controls fieldset legend {
line-height: normal;
color: #000;
}
#controls fieldset fieldset {
margin: 0 0 5px;
padding-left: 5px;
line-height: 25px;
}
#controls ul, #controls li {
display: block;
list-style: none;
margin: 0;
padding: 0;
}
#controls .toggle {
float: left;
}
#controls .details {
float: right;
}
#controls .details label {
margin-left: 2px;
}
.colorPicker {
position: absolute;
margin-top: 20px;
border: 1px solid #CCC;
background: #FFF;
}
#output {
display: block;
border: 1px solid #CCC;
background: #EEE;
margin: 0 0 20px;
padding: 20px;
white-space: pre;
}
</style>
<link href="farbtastic/farbtastic.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="farbtastic/farbtastic.min.js"></script>
<script type="text/javascript">
$( function() {
var loaded = false,
behaviorId,
behaviorUrl = '../build/PIE.htc';
function getBorderRadiusCss() {
var on = $( '#borderRadiusToggle' ).is(':checked'),
size = $( '#borderRadiusSize' ).val();
return on ? [ '-webkit-border-radius: ' + size + 'px;', '-moz-border-radius: ' + size + 'px;', 'border-radius: ' + size + 'px;' ] : []
}
function getBoxShadowCss() {
var on = $( '#boxShadowToggle' ).is(':checked'),
x = $( '#boxShadowX' ).val(),
y = $( '#boxShadowY' ).val(),
blur = $( '#boxShadowBlur' ).val(),
cssVal = on ? '#666 ' + x + 'px ' + y + 'px ' + blur + 'px;' : '';
return cssVal ? [ '-webkit-box-shadow: ' + cssVal, '-moz-box-shadow: ' + cssVal, 'box-shadow: ' + cssVal ] : [];
}
function getGradientCss() {
var on = $( '#gradientToggle' ).is(':checked'),
color1 = $( '#gradientColor1' ).val(),
color2 = $( '#gradientColor2' ).val(),
css = [ 'background: ' + color1 + ';' ];
if( on ) {
css.push( 'background: -webkit-gradient(linear, 0 0, 0 bottom, from(' + color1 + '), to(' + color2 + '));' );
css.push( 'background: -webkit-linear-gradient(' + color1 + ', ' + color2 + ');' );
css.push( 'background: -moz-linear-gradient(' + color1 + ', ' + color2 + ');' );
css.push( 'background: -ms-linear-gradient(' + color1 + ', ' + color2 + ');' );
css.push( 'background: -o-linear-gradient(' + color1 + ', ' + color2 + ');' );
css.push( 'background: linear-gradient(' + color1 + ', ' + color2 + ');' );
if( $( '#pieToggle' ).is(':checked') ) {
css.push( '-pie-background: linear-gradient(' + color1 + ', ' + color2 + ');' );
}
}
return css;
}
function updateCss() {
var tgtEl = $( '#target' )[0],
css = [ 'border: 1px solid #696;', 'padding: 60px 0;', 'text-align: center; width: 200px;' ].concat( getBorderRadiusCss() ).concat( getBoxShadowCss() ).concat( getGradientCss() );
if( $( '#pieToggle' ).is(':checked') ) {
css.push( 'behavior: url(' + behaviorUrl + ');' );
}
$( '#output' ).html( css.join( '<br>' ) );
tgtEl.style.cssText = css.join( '' );
if( tgtEl.addBehavior ) {
if( $( '#pieToggle' ).is(':checked') ) {
if( !behaviorId ) {
behaviorId = tgtEl.addBehavior( behaviorUrl );
}
}
else if( behaviorId ) {
tgtEl.removeBehavior( behaviorId );
behaviorId = null;
}
}
}
function updateDetailsVis() {
$( '#controls .toggle > input' ).each( function() {
var checked = this.checked,
deets = $( this ).closest( 'fieldset' ).find( '.details' );
if( loaded ) {
deets[ checked ? 'fadeIn' : 'fadeOut' ]( 'fast' );
} else {
deets[ checked ? 'show' : 'hide' ]();
}
} );
}
function updateCodeVis() {
var checked = $( '#codeToggle' ).is( ':checked' ),
code = $( '#output' );
if( loaded ) {
code[ checked ? 'slideDown' : 'slideUp' ]( 'fast' );
} else {
code[ checked ? 'show' : 'hide' ]();
}
}
$( '#controls input' ).change( updateCss );
$( '#controls .toggle > input' ).change( updateDetailsVis );
$( '#codeToggle' ).change( updateCodeVis );
$( '#controls input.color' ).each( function() {
var inp = $( this ),
picker = $( '<div class="colorPicker"/>' ),
farb = $.farbtastic( picker, function( c ) {
if( c ) {
inp[0].value = c.toUpperCase();
inp.change();
}
} );
inp.focus( function() {
farb.setColor( this.value );
picker.css( inp.position() ).fadeIn();
$( document ).bind( 'mousedown', function handler() {
picker.fadeOut();
$( this ).unbind( 'mousedown', handler )
} );
} );
picker.insertAfter( inp ).hide().mousedown( function( e ) {
e.stopPropagation();
} );
} );
updateCss();
updateDetailsVis();
updateCodeVis();
loaded = true;
} );
</script>
</head>
<body>
<h1>PIE CSS3 Quick Demo</h1>
<p>Adjust the controls on the right and see the CSS3 in action. Remember, there are no images used at all!</p>
<div id="demo">
<div id="target">
Mmmmm, pie.
</div>
<div id="controls">
<fieldset id="featureControls">
<legend>CSS3 features</legend>
<fieldset>
<legend>border-radius</legend>
<div class="toggle">
<input type="checkbox" id="borderRadiusToggle" class="featureToggle" checked="checked" />
<label for="borderRadiusToggle">Enable</label>
</div>
<div class="details">
<label for="borderRadiusSize">Radius size:</label>
<!--<input type="number" id="borderRadiusSize" min="0" max="20" value="8" size="2" />-->
<input type="text" id="borderRadiusSize" value="8" size="3" />
</div>
</fieldset>
<fieldset>
<legend>box-shadow</legend>
<div class="toggle">
<input type="checkbox" id="boxShadowToggle" class="featureToggle" checked="checked" />
<label for="boxShadowToggle">Enable</label>
</div>
<div class="details">
<label for="boxShadowBlur">Blur size:</label>
<!--<input type="number" id="boxShadowBlur" min="0" max="10" value="3" size="2" />-->
<input type="text" id="boxShadowBlur" value="3" size="3" />
<label for="boxShadowX">X offset:</label>
<!--<input type="number" id="boxShadowX" min="-10" max="10" value="0" size="3" />-->
<input type="text" id="boxShadowX" value="0" size="3" />
<label for="boxShadowY">Y offset:</label>
<!--<input type="number" id="boxShadowY" min="-10" max="10" value="2" size="3" />-->
<input type="text" id="boxShadowY" value="2" size="3" />
</div>
</fieldset>
<fieldset>
<legend>linear-gradient</legend>
<div class="toggle">
<input type="checkbox" id="gradientToggle" class="featureToggle" checked="checked" />
<label for="gradientToggle">Enable</label>
</div>
<div class="details">
<label for="gradientColor1">Top color:</label>
<!--<input type="color" id="gradientColor1" value="#99FF99" size="7" />-->
<input type="text" class="color" id="gradientColor1" value="#99FF99" size="7" />
<label for="gradientColor2">Bottom color:</label>
<!--<input type="color" id="gradientColor2" value="#339933" size="7" />-->
<input type="text" class="color" id="gradientColor2" value="#339933" size="7" />
</div>
</fieldset>
</fieldset>
<fieldset id="pieControls">
<legend>Options</legend>
<ul>
<li>
<input type="checkbox" id="pieToggle" checked="checked" />
<label for="pieToggle">Enable PIE (only affects IE)</label>
</li>
<li>
<input type="checkbox" id="codeToggle" />
<label for="codeToggle">Show CSS</label>
</li>
</ul>
</fieldset>
</div>
<code id="output">
</code>
</div>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.