Slide 1
Slide 1 text
CSS TAKES
OVER THE WORLD
1
Slide 2
Slide 2 text
OLD SCHOOL:
ROLLOVERS
2
Slide 3
Slide 3 text
Remember This?
function
MM_swapImage(){
var
i,j=0,x,a=MM_swapImage.arguments;
document.MM_sr=new
Array;
for(i=0;i<(a.length-‐2);i+=3)
if
((x=MM_findObj(a[i]))!=null)
{document.MM_sr[j++]=x;
if(!x.oSrc)
x.oSrc=x.src;
x.src=a[i+2];}
}
3
Slide 4
Slide 4 text
Messy
![]()
4
Slide 5
Slide 5 text
CSS
a
{
background-‐image:
url("my-‐image.png");
}
a:hover
{
background-‐image:
url("roll.png");
}
5
Slide 6
Slide 6 text
CSS Sprites
a
{
background-‐image:
url("my-‐sprite.png");
background-‐position:
0
0;
}
a:hover
{
background-‐position:0
-‐30px;
}
6
Slide 7
Slide 7 text
GETTING PAID:
DROP DOWN MENUS
7
Slide 8
Slide 8 text
Ultimate Dropdown Menu
Accessible
Keyboard Navigation
JavaScript-powered
http://www.udm4.com/
8
Slide 9
Slide 9 text
9
Slide 11
Slide 11 text
jQuery
$('.menu
>
li').hover(
function(){
$('ul',
this).show();
},
function(){
$('ul',
this).hide();
}
);
11
Slide 12
Slide 12 text
CSS
.menu
>
li
>
ul
{
display:none;
}
.menu
>
li:hover
>
ul
{
display:block;
}
12
Slide 13
Slide 13 text
LIKE A ROCK:
DEPENDENT CONTENT
13
Slide 14
Slide 14 text
Our HTML
14
Slide 15
Slide 15 text
jQuery
$('.faq
a').click(function(){
$(this).parent().find('.active')
.removeClass('active');
$(this.href).addClass('active');
});
/*
css
*/
.faq
>
div
{
display:none;
}
.faq
>
.active
{
display:block;
}
15
Slide 16
Slide 16 text
CSS
.faq
>
div
{
display:none;
}
.faq
>
div:target
{
display:block;
}
16
Slide 17
Slide 17 text
http://bit.ly/dlGn24
17
Slide 18
Slide 18 text
18
Slide 19
Slide 19 text
http://leaverou.me/ft2010/
19
Slide 20
Slide 20 text
20
Slide 21
Slide 21 text
THE WORKHORSE:
FORM VALIDATION
21
Slide 22
Slide 22 text
jQuery Validation
/*
http://docs.jquery.com/Plugins/validation
*/
22
Slide 23
Slide 23 text
Validating
$("#myform").validate();
23
Slide 24
Slide 24 text
Using HTML5 and CSS3
/*
A
List
Apart:
Forward
Thinking
Form
Validation
http://bit.ly/bHNs9T
*/
24
Slide 25
Slide 25 text
CSS3 UI Module
:valid
:invalid
:required
:optional
:in-‐range
:out-‐of-‐range
:read-‐only
:read-‐write
25
Slide 26
Slide 26 text
26
Slide 27
Slide 27 text
27
Slide 28
Slide 28 text
HTML
Email
*
Please enter a valid email address e.g. ryan@example.net Thank you for entering a valid email
28Slide 29
Slide 29 text
CSS
input:focus
+
.val
{
display:
block;
}
#signup
input:focus:required:valid
+
.val
.invalid
{
display:
none;
}
#signup
input:focus:required:invalid
+
.val
.valid
{
display:
none;
}
29
Slide 30
Slide 30 text
BRINGING THE FLAIR:
ANIMATION
30
Slide 31
Slide 31 text
jQuery
$().show();
$().hide();
$().toggle();
$().fadeIn();
$().fadeOut();
$().fadeToggle();
$().slideUp();
$().slideDown();
$().slideToggle();
31
Slide 32
Slide 32 text
jQuery Animate
$('#my-‐el').animate(
{top:"200px",
left:"100px"},
{duration:500,
complete:function(){
alert("I’m
done!");
}}
);
32
Slide 33
Slide 33 text
jQuery Animated Backgrounds
$('#nav
a')
.css(
{backgroundPosition:
"0
0"}
)
.mouseover(function(){
$(this).stop().animate(
{backgroundPosition:"(0
-‐250px)"},
{duration:500})
})
.mouseout(function(){
$(this).stop().animate(
{backgroundPosition:"(0
0)"},
{duration:500})
})
33
Slide 34
Slide 34 text
http://bit.ly/3lfjUA
34
Slide 35
Slide 35 text
CSS Transitions
-‐webkit-‐transition-‐property:
opacity;
-‐webkit-‐transition-‐duration:
0.3s;
-‐webkit-‐transition-‐timing-‐function:
ease;
/*
Don’t
forget
other
browsers!
*/
-‐moz-‐transition
-‐o-‐transition
-‐ms-‐transition
35
Slide 36
Slide 36 text
CSS Transitions
/*
Shortcut
*/
-‐webkit-‐transition:
opacity
0.3s
ease;
/*
Multiple
properties
*/
-‐webkit-‐transition:
opacity
0.3s
ease,
width
0.3s
linear;
/*
All
properties
*/
-‐webkit-‐transition:
all
0.3s
ease;
36
Slide 37
Slide 37 text
37
Slide 38
Slide 38 text
Targetted Content
.faq
>
div
{
position:absolute;
left:-‐9999px;
opacity:0;
-‐webkit-‐transition:opacity
1s
ease;
}
.faq
>
div:target
{
position:static;
opacity:1;
}
38
Slide 39
Slide 39 text
CSS Animated Backgrounds
a
{
background:url("sprite.png");
background-‐position:0
0;
-‐webkit-‐transition:background-‐position
.5s;
}
a:hover
{
background-‐position:0
-‐100px;
}
39
Slide 40
Slide 40 text
CSS Animations
@-‐webkit-‐keyframes
throb
{
0%
{
opacity:
0.2;
left:0;
}
50%
{
opacity:
1.0;
left:10px;
}
100%
{
opacity:
0.2;
left:0;
}
}
40
Slide 41
Slide 41 text
Targetted Content
.faq
>
div
{
display:none
}
.faq
>
div:target
{
display:block;
position:relative;
-‐webkit-‐animation:
throb
1.5s
infinite;
}
41
Slide 42
Slide 42 text
42
Slide 43
Slide 43 text
Slot Machine
@-‐webkit-‐keyframes
spin
{
0%
{
background-‐position:0
0;
}
100%
{
background-‐position:0
-‐200px;
}
}
43
Slide 44
Slide 44 text
Slot Machine
#slotmachine
{
background:url("spinner.png");
background-‐position:
0
0;
padding-‐left:20px;
-‐webkit-‐animation:
spin
2s
infinite
linear;
}
#slotmachine:target
{
background-‐position:0
-‐60px;
-‐webkit-‐animation:
none;
-‐webkit-‐transition:
background-‐position
1s;
}
44
Slide 45
Slide 45 text
45
Slide 46
Slide 46 text
46
CSS Panic
@-‐webkit-‐keyframes
progress{
0%
{width:0px;}
100%
{width:200px;}
}
Slide 47
Slide 47 text
47
CSS Panic
.enemys:checked{
overflow:hidden;
-‐webkit-‐animation-‐name:none;
-‐webkit-‐pointer-‐events:
none;
pointer-‐events:
none;
opacity:0;
}
Slide 48
Slide 48 text
Razzle Dazzle!
48
Slide 49
Slide 49 text
Filters
filter:progid:DXImageTransform
.Microsoft.Blur(pixelradius=2);
filter:progid:DXImageTransform
.Microsoft.BasicImage(grayscale=1);
49
Slide 50
Slide 50 text
CSS Filters (like, the W3C, man)
blur(5,
5)
drop-‐shadow(10,
5,
5)
hue-‐rotate(328deg)
saturate(5)
invert(1)
grayscale(1)
opacity(0.5)
gamma(1.1,
3.6,
0)
sepia(0.5)
50
Slide 51
Slide 51 text
CSS Shaders
#shaded:hover
{
filter:
custom(url('wobble.vs')
url('color-‐swipe.fs'),
40
40,
amplitude
60,
amount
1.0);
}
51
Slide 52
Slide 52 text
52
Slide 53
Slide 53 text
CSS Shaders
http://www.adobe.com/devnet/html5/articles/css-
shaders.html
53
Slide 54
Slide 54 text
GET IN THE RING:
LAYOUT
54
Slide 55
Slide 55 text
Adaptive Interfaces
if
(window.innerWidth
<
800)
{
var
el=document.getElementById('#sidebar');
el.style.display
=
'none';
}
55
Slide 56
Slide 56 text
Masonry
$(function(){
$('#container').masonry({
itemSelector
:
'.item',
columnWidth
:
240
});
});
56
Slide 57
Slide 57 text
57
Slide 58
Slide 58 text
58
Responsive Web Design
Slide 59
Slide 59 text
59
Slide 60
Slide 60 text
Tables for layout
Sidebar
Content
Main
Content
60
Slide 61
Slide 61 text
display:table with CSS
61
Sidebar
Content
Main
Content
Slide 62
Slide 62 text
display:table with CSS
#content
{
display:table;
}
.sidebar
{
display:table-‐cell;
width:50px;
}
.main
{
display:table-‐cell;
}
62
Slide 63
Slide 63 text
Two Modes by Class Name
body.panescroll
{
/*
position:fixed;
*/
}
body.pagescroll
{
/*
display:table;
*/
}
63
Slide 64
Slide 64 text
Grid Layout
64
Slide 65
Slide 65 text
Grid Layout
#content
{
display:
-‐ms-‐grid;
-‐ms-‐grid-‐columns:
150px
200px;
}
.column
{
-‐ms-‐grid-‐row:
1;
-‐ms-‐grid-‐column:
1;
-‐ms-‐grid-‐column-‐span:
11;
}
65
Slide 66
Slide 66 text
WHAT IS THE POINT?
66
Slide 67
Slide 67 text
Declarative CSS is more efficient than JavaScript
It’s smaller
It requests fewer resources
Browser can offload to GPU
It’s easier to separate concerns
We’re describing visual states
67
Slide 68
Slide 68 text
68
Slide 69
Slide 69 text
69
Describing State
.panescroll
#main
{
margin-‐top:
0px;
-‐webkit-‐transition:
margin-‐top
.5s;
-‐moz-‐transition:
margin-‐top
.5s;
}
Slide 70
Slide 70 text
70
Describing State
.panescroll.l-‐headercollapsed
#main
{
margin-‐top:
-‐45px;
}
Slide 71
Slide 71 text
THANK YOU!
“Superfly” @snookca
71