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

CSS3 Takes on the World

Recomendados

Más contenido relacionado

Was ist angesagt?

Was ist angesagt?(20)

Destacado

Destacado(19)

Similar a CSS3 Takes on the World

Similar a CSS3 Takes on the World(20)

Más de Jonathan Snook

Más de Jonathan Snook(7)

Último

Último(20)

CSS3 Takes on the World

Hinweis der Redaktion