CSS3 Takes on the World

CSS3 TAKES
ON THE WORLD
1

OLD SCHOOL:
ROLLOVERS
2

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

Messy
<body onload="MM_preloadImages('roll.png')">
<a href="/n/" 
   onmouseout="MM_swapImgRestore()"
   onmouseover="MM_swapImage('img1','','roll.png',1)">
   <img src="pre‐roll.png" name="img1" id="img1">
</a>

4

CSS
a {
  background‐image: url("my‐image.png");
}
a:hover {
  background‐image: url("roll.png");
}

5

CSS Sprites
a {
  background‐image: url("my‐sprite.png");
  background‐position: 0 0;
}
a:hover {
  background‐position:0 ‐30px;
}

6

GETTING PAID:
DROP DOWN MENUS
7

Ultimate Dropdown Menu
Accessible
Keyboard Navigation
JavaScript-powered
http://www.udm4.com/

8

Our HTML
<ul class="menu">
  <li><a href="/a/">Menu</a>
    <ul>
      <li><a href="/a/a">Sub‐menu A</a></li>
      <li><a href="/a/b">Sub‐menu A</a></li>
      <li><a href="/a/c">Sub‐menu A</a></li>
    </ul>
  </li>
</ul>

10

jQuery
$('.menu > li').hover(
  function(){ $('ul', this).show(); },
  function(){ $('ul', this).hide(); }
);

11

CSS
.menu > li > ul {
  display:none;
}
.menu > li:hover > ul {
  display:block;
}

12

LIKE A ROCK:
DEPENDENT CONTENT
13

Our HTML
<div class="faq">
 <a href="#a1">How much wood could...?</a>
 <a href="#a2">Who sells seashells...?</a>
 ...
 <div id="a1">
   The amount of wood that a woodchuck...
 </div>
</div>

14

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

CSS
.faq > div { 
  display:none; 
}
.faq > div:target { 
  display:block; 
}

16

http://bit.ly/dlGn24

17

http://leaverou.me/ft2010/

18

THE WORKHORSE:
FORM VALIDATION
19

jQuery Validation
/*
 http://docs.jquery.com/Plugins/validation 
*/
<input id="cemail" name="email" size="25"  
class="required email" />
<input id="curl" name="url" size="25"  
class="url" value="" />

20

Validating
$("#myform").validate();

21

Using HTML5 and CSS3
/* A List Apart: Forward Thinking Form 
Validation http://bit.ly/bHNs9T */

<input id="postcode" name="postcode" 
  type="number" min="1001" max="8000"
  maxlength="4" required>

22

CSS3 UI Module
:valid
:invalid
:required
:optional
:in‐range
:out‐of‐range
:read‐only
:read‐write

23

HTML
<label for="email">Email *</label> 
<input type="email" id="email" name="email" 
placeholder="e.g. ryan@example.net" title="Please 
enter a valid email" required />
<p class="val">
  <span class="invalid">Please enter a valid email 
address e.g. ryan@example.net</span>
  <span class="valid">Thank you for entering a 
valid email</span>
</p>

25

CSS
input:focus + .val { display: block; }
#signup input:focus:required:valid 
+ .val .invalid  { display: none; }
#signup input:focus:required:invalid 
+ .val .valid { display: none; }

26

BRINGING THE FLAIR:
ANIMATION
27

jQuery
$().show();
$().hide();
$().toggle();
$().fadeIn();
$().fadeOut();
$().fadeToggle();
$().slideUp();
$().slideDown();
$().slideToggle();

28

jQuery Animate
$('#my‐el').animate(
  {top:"200px", left:"100px"}, 
  {duration:500, complete:function(){
     alert("I’m done!");
  }}
);

29

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})
    })

30

http://bit.ly/3lfjUA

31

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

32

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;

33

Targetted Content
.faq > div {
  position:absolute; left:‐9999px;
  opacity:0;
  ‐webkit‐transition:opacity 1s ease;
}
.faq > div:target {
  position:static;
  opacity:1;
}

34

CSS Animated Backgrounds
a {
  background:url("sprite.png");
  background‐position:0 0; 
  ‐webkit‐transition:background‐position .5s;
}
a:hover {
}

35

CSS Animations
@‐webkit‐keyframes throb {
  0%   { opacity: 0.2; left:0; }
  50%  { opacity: 1.0; left:10px; }
  100% { opacity: 0.2; left:0; }
}

36

Targetted Content
.faq > div {
  display:none
}
.faq > div:target {
  display:block;
  position:relative;
  ‐webkit‐animation: throb 1.5s infinite;
}

37

Slot Machine
@‐webkit‐keyframes spin {
  0%   { background‐position:0 0; }
  100% { background‐position:0 ‐200px; }
}

38

Slot Machine
#slotmachine { 
  background:url("spinner.png");
  background‐position: 0 0; 
  padding‐left:20px; 
  ‐webkit‐animation: spin 2s infinite linear;
}
#slotmachine:target {
  ‐webkit‐animation: none;
  ‐webkit‐transition: background‐position 1s;
}

39

TAG TEAM:
jQUERY with CSS
40

jQuery Plugin for CSS Transitions
/* http://bit.ly/cX8Xqf */
// Makes all paragraph elements grow a border and then atrophy 
away.
$("p").animateWithCSS(
  {border: "5px solid #555"}, // CSS properties to animate
  1000,                       // Duration in ms
  "cubic‐bezier",             // The timing function
  function(){                 // Callback
    $("p").animateWithCSS({border: "0px"}, 350);
  }
);

41

Enhanced Animate Plugin
/* http://bit.ly/cnCYP2 
left : using translate(x, y) or translate3d(x, y, z)
top : using translate(x, y) or translate3d(x, y, z)
opacity
width
height */

$('#my‐el').animate({left: "+=200px", width:320 }, 
1500);

42

GET IN THE RING:
LAYOUT

43

Adaptive Interfaces
if (window.innerWidth < 800) {
 var el=document.getElementById('#sidebar');
  el.style.display = 'none';
}

44

Masonry
$(function(){
  $('#container').masonry({
    itemSelector : '.item',
    columnWidth : 240
  });
});

45

Responsive Web Design
<link 
  rel="stylesheet"  
  media="screen and (max‐device‐width: 480px)"
  href="shetland.css">

46

Tables for layout
<table>
   <tr>
     <td width="50">Sidebar Content</td>
     <td width="*">Main Content</td>
   </tr>
</table>

47

display:table with CSS
<div id="content">
   <div class="sidebar">Sidebar Content</div>
   <div class="main">Main Content</div>
</div>

48

display:table with CSS
#content { display:table; }
.sidebar { display:table‐cell; width:50px; }
.main    { display:table‐cell; }

49

Flex Box
http://www.html5rocks.com/tutorials/flexbox/quick/

#flexbox { 
  display: box;
  box‐orient: horizontal;
}
#flexbox > p:nth‐child(2),
#flexbox > p:nth‐child(3) {
  box‐flex: 1;
}

51

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;
}

53

THANK YOU!
“Superfly” @snookca
54

CSS3 Takes on the World

Related slideshows

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (18)

Similar to CSS3 Takes on the World

Similar to CSS3 Takes on the World (20)

More from Jonathan Snook

More from Jonathan Snook (7)

Recently uploaded

Recently uploaded (20)

CSS3 Takes on the World

Editor's Notes