For this presentation you should be familiar with the basics of CSS.

The following code shouldn't be too intimidating:

<style>
.css1box {
	font-family:Verdana, Geneva, sans-serif;
	font-weight:bold;
	color:#93C;
	padding:20px;
	border:4px solid #303;
}
</style>

<div class="css1box">I'm a fancy box!</div>
I'm a fancy box!

What will be covered?


What won't be?

Unless otherwise noted, for simplicity the examples in this presentation are coded for WebKit. 
<style>
.gradient-background {
/* Chrome 10+, Safari 5.1+, iOS 5+ */
	background-image: -webkit-linear-gradient(top, #444444, #999999);   	

/* Firefox 3.6 */
  	background-image:    -moz-linear-gradient(top, #444444, #999999); 

/* Internet Explorer 10 */
  	background-image:     -ms-linear-gradient(top, #444444, #999999); 

/* Opera 11+ */
  	background-image:      -o-linear-gradient(top, #444444, #999999);

/* Standard */
  	background-image:         linear-gradient(top, #444444, #999999);
}
</style>

Vendor Prefixes

"But that looks ugly! Why?!"

border-radius: 10px;

caniuse.com

instacss.com

Photoshop Layer Styles with CSS3

The Basics

<style>
	/* Let's use the appropriate HTML5 tag */
	header {

	}    
</style>

<header>Photoshop Styles to CSS3</header>

Gives us:

Photoshop Styles to CSS3

The @font-face Rule


With CSS3 we now have almost limitless choice of fonts* in our web designs. No longer must we live under the tyranny of "web safe" Times and Arial.

*Provided we have the proper license agreement to do so.

@font-face

<style>
    /* Import our font file */
    @font-face {
        font-family: 'HelveticaNeueLTStd97BlkCnOb'; 
        src: url('helveticaneueltstd-blkcno-webfont.ttf') format('truetype'); 
        font-weight: normal; 
        font-style: normal; 
    }
    
    header {
    	font-family: 'HelveticaNeueLTStd97BlkCnOb';
	font-size:38px;
    }
</style>

<header>Photoshop Styles to CSS3</header>
Photoshop Styles to CSS3

text-shadow


Lift and separation without the need for additional images.

text-shadow

<style>
    header {
    	font-family: 'HelveticaNeueLTStd97BlkCnOb';
    	font-size:38px;
    	color:#fff;
    	/* values: X distance, Y distance, Blur, Color */
    	text-shadow:0px 0px 6px rgba(0, 0, 0, 0.6);
    }
</style>
Photoshop Styles to CSS3

Ooh, but what if the browser doesn't support text-shadow?


Photoshop Styles to CSS3
« As viewed in IE<10

Gracefully Degrade / Progressively Enhance

<style>
    header {
    	font-family: 'HelveticaNeueLTStd97BlkCnOb';
    	font-size:38px;
    	color:#fff;
    	/* values: X distance, Y distance, Blur, Color */
    	text-shadow:0px 0px 6px rgba(0, 0, 0, 0.6);
        
    	/* Ensure contrast if browser doesn't support text-shadow */
        background-color:#2bc4b6;
	border-radius:10px;
	padding:30px;
    }
</style>
Photoshop Styles to CSS3

Multiple Backgrounds

Multiple Backgrounds

Multiple Backgrounds

<style>
    .container-top { background:url(example3a.png) left top no-repeat;
    	padding-top:20px; }
    
    .container-middle { background:url(example3b.png) left top repeat-y; }
    
    .container-bottom {	background:url(example3c.png) left bottom no-repeat;
    	padding-bottom:20px; }
</style>

<div class="container-top">
    <div class="container-middle">
    	<div class="container-bottom">
        	<h1>Look familiar?</h1>
        </div>
    </div>
</div>

Multiple Backgrounds + Gradients

<style>
header {
background-image:
/* bg #1: X/Y Position, Type & Size, from Color, to Color */
radial-gradient(50% 50%, circle cover, rgba(0,0,0,0.0), rgba(0,0,0,0.5)),

/* bg #2 appears on bottom */
url(g-texture.png);

background-repeat:
        no-repeat, /* Don't repeat gradient */
        repeat; /* Repeat texture */
}
</style>

Separate values with a comma. First value displays as the top layer.

Gradients are treated as an image and can be controlled with the same background css properties, including position, repeat and size.

Photoshop Styles to CSS3

box-shadow

box-shadow

<style>
    header {
    	box-shadow:
            /* shadow #1: X, Y, Blur, Size, white @ 50% opacity */
            0px 0px 6px 0px rgba(255,255,255,0.5), 
            
            /* shadow #2: inner shadow, X, Y, Blur, Size, black @ 60% opacity */
            inset 0px 0px 24px 4px rgba(0,0,0,0.6);
    }
</style>

inset value for inner shadows. Can be combined like multiple backgrounds, separated with a comma.

Photoshop Styles to CSS3
header {
font:38px 'HelveticaNeueLTStd97BlkCnOb';
border-radius:10px;
text-shadow:0px 0px 6px rgba(0, 0, 0, 0.5);
background:
    #2bc4b6,
    radial-gradient(50% 50%, circle cover, rgba(0,0,0,0.0), rgba(0,0,0,0.5)), 
    url(g-texture.png);
background-repeat:no-repeat, repeat;

box-shadow:
    0px 0px 6px 0px rgba(255,255,255,0.5), 
    inset 0px 0px 24px 4px rgba(0,0,0,0.6);
}
Photoshop Styles to CSS3

Image:

css3please.com

Another Word on CSS3 Gradients

No image files were used for this background.

background:
  linear-gradient(63deg, #151515 5px, transparent 5px) 0 5px,
  linear-gradient(243deg, #151515 5px, transparent 5px) 10px 0px,
  linear-gradient(63deg, #222 5px, transparent 5px) 0px 10px,
  linear-gradient(243deg, #222 5px, transparent 5px) 10px 5px,
  linear-gradient(0deg, #1b1b1b 10px, transparent 10px),
  linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, 
  	transparent 75%, #242424 75%, #242424);
background-color: #131313;
background-size: 20px 20px;

Practical? Not always. Cool? Yes.

CSS3 Patterns

Transitions

Source: http://www.webdesignerdepot.com/2010/01/css-transitions-101/

Transitions: A Basic Example

<style>
    .ourtransition { 
	width:100px;
	height:100px;
	background:#0F0;
	transition-property: all;
transition-duration: 1s;
transition-timing-function: ease-out;
transition-delay: 1s;
    }

    .ourtransition:hover {
        background:#900;
        left:500px;
    }
</style>

Transitions are added to an element's base style, not to :hover or other pseudo-classes. Hover over the box below:

Animatable

Cubic Bézier curves

Animations

The @keyframes Rule

<style>
    @keyframes rotate360 {
	from { transform:rotate(0deg); }
	to { transform:rotate(360deg); }
    }
    
    /* added to element like this: */
    .animation {
	animation-name: rotate360;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;	
    }
</style>

Note: Vendor prefixes are still needed for these properties. Don't forget
-moz (Firefox) and -ms (Internet Explorer 10+), when appropriate.

The @keyframes Rule

Unlike transitions which only allows for us to set the starting and ending states, CSS3 animations allow us to set individual keyframes to achieve more effects, such as a bounce.

<style>
@keyframes bounce {
0% { transform: matrix(-0, 1, -1, -0, 598, 0); }
1% { transform: matrix(0.00119, 1, -1, 0.00119, 597.54773, 0); }
2% { transform: matrix(0.00476, 0.99999, -0.99999, 0.00476, 596.19104, 0); }
3% { transform: matrix(0.01069, 0.99994, -0.99994, 0.01069, 593.92987, 0); }
4% { transform: matrix(0.01901, 0.99982, -0.99982, 0.01901, 590.76422, 0); }

/* and it goes on like this... */

98% { transform: matrix(0.99986, 0.01685, -0.01685, 0.99986, 6.41355, 0); }
99% { transform: matrix(0.99995, 0.00961, -0.00961, 0.99995, 3.65901, 0); }
100% { transform: matrix(1, 0, 0, 1, 0, 0); }
}
</style>
More info on the CSS3 matrix().

Other Animation Properties

<style>
.animation {
    animation-play-state: paused;
    /* values: running|paused */
    
    animation-direction: normal;
    /* values: normal|alternate */
    
    animation-iteration-count: infinite;
}
</style>

Running | Paused

Original photo credit

Where to Next?

Thanks!

This presentation wouldn't be possible without the great web community at large, but in particular the writings and talks of Andy Clarke and Dan Cederholm. Buy their books.
@damofknowledge