/*
View Mode JS for tutorial: "Practical CSS3 for Web Designers"
Written by Ben Lister (darkcrimson.com) revised 24 Apr 2010
Tutorial: http://blog.darkcrimson.com/2010/04/practical-css3
Licensed under the MIT License:
http://www.opensource.org/licenses/mit-license.php
*/
$(function() {
var wrapper = $('#wrapper');
$('#view_mode').click(function(){
/* Dim */
$('#wrapper > *').css('opacity','.4'); // There is certainly a cleaner way than this but I didn't have time to find it
$('#header').css('opacity','.4');
/* Add fake wrapper to avoid opacity issues */
wrapper.wrap($('')); // Creates an additional wrapper to aid with positioning
/* Number buttons*/
wrapper.before($('1
').fadeIn('20'));
wrapper.before($('2
').fadeIn('40'));
wrapper.before($('3
').fadeIn('60'));
wrapper.before($('4
').fadeIn('80'));
wrapper.before($('5
').fadeIn('100'));
wrapper.before($('6
').fadeIn('120'));
wrapper.before($('7
').fadeIn('140'));
wrapper.before($('8
').fadeIn('160'));
wrapper.before($('9
').fadeIn('180'));
$('Turn this off
').appendTo('body');
/*Left side disable button*/
$('div#close_btn').click(function(){
if($('.overlay').length > 0){ $('.overlay').remove(); }
$('#wrapper > *').css('opacity','1');
$('#header').css('opacity','1');
$('.overlay_button').each(function(){
$(this).remove();
});
$('div#close_btn').fadeOut(300, function() { $(this).remove(); });
});
/* Overlay info boxes */
var overlayBtn = $('.overlay_button');
overlayBtn.click(function(){
overlayBtn.css('opacity','1.0');
var btnNumber = $(this).children().html(); //number in button
var attrNumber = $(this).attr('num');
var overlay = $('div.overlay');
if (overlay.hasClass('btn_'+attrNumber)) {
overlay.removeClass('btn_'+attrNumber);
overlay.fadeOut(200, function() { $(this).remove();});
$(this).html(''+ attrNumber +'').css('opacity','1.0');
} else {
overlayBtn.each(function(index){ $(this).html(''+ (index + 1)+'').css('opacity','.4'); });
$(this).attr('num',btnNumber); //assign html value of button to attribute 'num'
if(overlay.length > 0){ overlay.stop().fadeOut(200, function() { $(this).remove(); }); }
$(this).html('X').css('opacity','1.0');
/* Yeah, that's right, a giant switch with a lot of HTML and Text, enjoy! */
switch(parseInt(btnNumber)) {
case 1:
overlayBox('Radial Gradient with Stops
background-image: #848484 url(../images/bg.png) no-repeat;
background-image: -webkit-gradient(radial,center 400, 800, center 300, 50, from(#848484), to(#E6E6E6), color-stop(.6,#A4A6A5));
background-image: -moz-radial-gradient(center 50deg, circle farthest-side, #E6E6E6 9% , #A4A6A5 , #848484 100% );
- Compatibility:
- Firefox 3.6, Safari 4 , Chrome
- Use this now:
- Yes
- Comments:
- CSS Radial Gradients have been around for a while in Safari and were more recently introduced in FireFox 3.6. This technique is applied via the
background-image property. The syntax differs between browsers but both allow you to add stops which help create a smooth, image editor-quality gradient. This technique is safe to use in most cases as you can optionally add a background image as a fall back for older and non compliant browsers. See below for links to gradient auto-generation tools and documentation.
- Resources:
- CSS Gradient Generator,
- CSS Gradient Generator 2,
- FireFox Documentation,
- Safari Documentation
"Rounded" Image Borders / Box Shadow
-webkit-border-image: url(../images/border-img.png) 6 6 6 6 stretch;
-moz-border-image: url(../images/border-img.png) 6 6 6 6 stretch;
-moz-border-radius-topleft,
-moz-border-radius-topright,
-webkit-border-top-left-radius,
-webkit-border-top-right-radius: 18px;
-webkit-box-shadow: rgba(0, 0, 0, 0.6) 0 0 12px;
-moz-box-shadow: rgba(0, 0, 0, 0.6) 0 0 12px;
- Compatibility:
- Firefox 3.1, Safari 3, Chrome, iPhone OS 1.0
- Use this now:
- Sparingly, or with JS fallback
- Comments:
- Border images are a much needed property that gives designers even more creative freedom. While there is no standard way to add rounded image borders, the
stretch option along with a rounded source image for the border and the conventional border-radius help make this an easy task. Standard border images are even easier and work in the latest Firefox and Webkit browsers. The one major issue for projects with further compatibility requirements is lack of graceful degradation. Luckily this has been solved for older versions of Firefox, Safari / Chrome and even IE7+ through a jQuery plugin. Box Shadow is a convenient replacement to cumbersome image and JavaScript drop shadows. The syntax is very basic <y>, <x>, <blur> | color and can be applied to pretty much any block element
- Resources:
- jQuery plugin,
- Webkit IB Documentation,
- Firefox IB Documentation,
- Moz Box Shadow,
- Shadow Effect on elements in CSS3
Webkit Transform Animations
#photo_slider li.fallDown {
-webkit-transition: all 2s ease-in;
-webkit-transform: translate(0px, 2000px) rotate(170deg) scale(0.2) skew(-200deg);
}
#photo_slider li.twistOut {
-webkit-transform-style: preserve-3d;
-webkit-transition-property: -webkit-transform;
-webkit-transition-duration: 1s;
-webkit-transform: rotateY(720deg) scale(0.01);
}
- Compatibility:
- Safari 3, Chrome, iPhone OS 2
- Use this now:
- Use JS for standard web, OK for iPhone Development
- Comments:
- These animations will only work in Webkit browsers. Wekit-transition works well with most CSS selectors and can be used with multiple selectors. Very in-depth documentation can be found in the resource links below but the basic concept involves adding one or more CSS selectors / pseudo selectors (-webkit-transition: all; in this case) and then choosing one or more transitions such as -webkit-transform: rotate(360deg) scale(0.5);. This basic example will rotate the HTML element(s) 360 degrees and scale them to 50%.
- Resources:
- Safari CSS Visual Effects Guide: Transitions,
- Webkit CSS Animation,
- Image Hover Effects,
- CSS Animation Examples
RGBa,Webkit Transition, Text Shadow, Border Radius
ul#leftnav li a {
-webkit-transition-property: background-color, font-size;
-webkit-transition-duration: 800ms, 300ms;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
text-shadow: 2px 1px 2px rgba(0, 0, 0, 0.7);
}
ul#leftnav li a:hover {
background: rgba(70, 70, 70, 0.8);
font-size: 1.1em;
}
- Compatibility:
- Firefox 3 (no transitions), Safari 3 / Chrome, iPhone OS 2
- Use this now:
- Yes (IE is unaffected)
- Comments:
- RGBa (along with HSLa) colors give designers incredible flexibility in their designs with the ability to specify an Alpha value in addition to the standard color values. RGBa / HSLa can be used on any property that allows for color customization (borders, backgrounds, text, etc…) and work properly on FireFox and Webkit browsers without vendor prefixes. Text shadows are actually part of CSS2 and have been in Safari since V1.1 but were not added to FireFox until version 3.5. There have been revisions added since its original introduction such as the inclusion of multiple shadows which give designers the ability to create layered / 3D-like shadows. The basic syntax for a Text Shadow is: <y>, <x>, <blur> | color (RGBa / HSLa are valid for this property). Border radius was touched on in #2, but see resources below for further documentation.
- Resources:
- FireFox TS Documentation,
- CSS.Info: Border- Radius,
- Safari CSS Visual Effects Guide: Transitions
Image Mask / Click Animation
@-webkit-keyframes spin {
from { none;}
to { -webkit-transform: rotate(360deg);}
}
img {
-webkit-mask-box-image: url(../images/mask.png);
}
img:hover {
-webkit-animation-name: spin;
-webkit-animation-duration: 1.5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: ltr;
}
- Compatibility:
- Safari 3, Chrome 3, iPhone OS 2
- Use this now:
- Mobile only
- Comments:
- CSS Masks are a great way to apply image effects without altering the source image file. Currently only supported in Webkit, this technique works with not only PNG images but also SVGs and even CSS gradients. This example also demonstrates a _very_ rudimentary keyframe animation. The basic idea is to declare and name the animation then create keyframes with either from/to OR percentages (1%,10%,55% etc…) and add your animation. To activate, simply apply animation to a CSS selector and define the options such as duration, iteration count (1 - ∞) etc.. This technique has incredible possibilities, for advanced examples please see the resources below.
- Resources:
- CSS Masks,
- Safari Visual Effects: Masks,
- CSS Keyframe Animation,
- CSS Animation Test,
- Using Keyframes
CSS Columns
-moz-column-width: 288px;
-webkit-column-width: 288px;
-moz-column-gap: 19px;
-webkit-column-gap: 19px;
-moz-column-count: 3;
-webkit-column-count: 3;
- Compatibility:
- FireFox 1.5 and Safari 3.1, Chrome 2
- Use this now:
- With fall backs for IE
- Comments:
- Columns can be applied to a variety of CSS elements, both inline and block, and offer a number of options including column width, column count, gap width and column-rule, which allows you to style the gutter region between columns.
- Resources:
- CSS3.Info Documentation,
- CSS3 - Columns,
- CSS3 Columns FireFox Documentation
Bar Chart with "3D" Transform
-webkit-transform: skew(0deg, 30deg);
-moz-transform: skew(0deg, 30deg);
- Compatibility:
- Firefox 3.5, Safari 4, iPhone OS 3, Chrome 4(?), 5)
- Use this now:
- With caution, yes for mobile
- Comments:
- While the sample code listed above is incomplete (view complete markup), the basic technique [skew(x,y)] is illustrated. In this example, Skew is used to rotate three divs to form a 3D bar. The graph is set in front of a linear CSS gradient which follows a similar syntax to the radial gradient in #1, see linear gradient generator link in resources below.
- Resources:
- 3D Cube using CSS transformations ,
- Safari CSS Visual Effects Guide: Transforms ,
- Linear Gradient Generator
Multiple Background Images
background:
url(../images/bg_4.png) 110px 100px no-repeat,
url(../images/bg_3.png) 60px 50px no-repeat,
url(../images/bg_2.png) 30px 45px no-repeat,
url(../images/bg_1.png) top left no-repeat;
- Compatibility:
- Firefox 3.6, Safari 4, Chrome, iPhone OS 3
- Use this now:
- Yes for mobile, yes if purely aesthetic
- Comments:
- This simple technique is applied to HTML elements by adding a comma separated list of background images. The top most defined background will be in the back and the bottom most in front. From my testing CSS gradients DO work in conjunction with background images, however, since they are applied with vendor prefixes (which don\'t play nicely with commas), cross-browser support will be tricky. Solid background colors do not work with this property, even after adjusting the alpha value.
- Resources:
- Firefox Documentation,
- Multiple Background Images
Pure CSS Accordion w/ Animation
.accordion div {
-webkit-transition: height 500ms ease;
}
.accordion div:target {
height: 105px
}
- Compatibility:
- FireFox 2.1 (no animation), Safari 3, Chrome, iPhone 2
- Use this now:
- Yes, consider JS for animations
- Comments:
- This technique has technically been possible for quite a while (:target pseudo selector was introduced in FF 2.1) however supplementing the markup with a basic height transition adds a new, elegant,smooth, sophisticated dimension. For those who have never used :target before: it uses the fragment identifier in a URL to apply specific CSS styles to the matching element. In this example, the links are contained within div.accordian. The links\' fragment identifier corresponds to the ID of a nested div within accordion (a <UL> would probably be more appropriate though ). The animation is applied to .accordion div which means that when a link is clicked the :target triggers animation. Thanks to Marco Kuiper for the inspiration
- Resources:
- CSS3 Animations & their jQuery equivalents,
- Stay on :target
'+ content +'
').stop().fadeIn('fast'));
}