Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

CSS3 Takes on the World

2,981 views

Published on

Taking a look at the evolution of CSS and how it has increasingly taken over the tasks that we relied on JavaScript for.

Published in: Technology, Education
  • Be the first to comment

CSS3 Takes on the World

  1. 1. CSS3 TAKESON THE WORLD 1
  2. 2. OLD SCHOOL: ROLLOVERS 2
  3. 3. 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
  4. 4. 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
  5. 5. CSSa
{

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

background‐image:
url("roll.png");} 5
  6. 6. CSS Spritesa
{

background‐image:
url("my‐sprite.png");

background‐position:
0
0;}a:hover
{

background‐position:0
‐30px;} 6
  7. 7. GETTING PAID:DROP DOWN MENUS 7
  8. 8. Ultimate Dropdown MenuAccessibleKeyboard NavigationJavaScript-poweredhttp://www.udm4.com/ 8
  9. 9. 9
  10. 10. 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
  11. 11. jQuery$(.menu
>
li).hover(

function(){
$(ul,
this).show();
},

function(){
$(ul,
this).hide();
}); 11
  12. 12. CSS.menu
>
li
>
ul
{

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

display:block;} 12
  13. 13. LIKE A ROCK:DEPENDENT CONTENT 13
  14. 14. 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
  15. 15. 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
  16. 16. CSS.faq
>
div
{


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


display:block;
} 16
  17. 17. http://bit.ly/dlGn24 17
  18. 18. http://leaverou.me/ft2010/ 18
  19. 19. THE WORKHORSE:FORM VALIDATION 19
  20. 20. 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
  21. 21. Validating$("#myform").validate(); 21
  22. 22. 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
  23. 23. CSS3 UI Module:valid:invalid:required:optional:in‐range:out‐of‐range:read‐only:read‐write 23
  24. 24. 24
  25. 25. 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
  26. 26. CSSinput:focus
+
.val
{
display:
block;
}#signup
input:focus:required:valid
+
.val
.invalid
 {
display:
none;
}#signup
input:focus:required:invalid
+
.val
.valid
{
display:
none;
} 26
  27. 27. BRINGING THE FLAIR: ANIMATION 27
  28. 28. jQuery$().show();$().hide();$().toggle();$().fadeIn();$().fadeOut();$().fadeToggle();$().slideUp();$().slideDown();$().slideToggle(); 28
  29. 29. jQuery Animate$(#my‐el).animate(

{top:"200px",
left:"100px"},


{duration:500,
complete:function(){




alert("I’m
done!");

}}); 29
  30. 30. 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
  31. 31. http://bit.ly/3lfjUA 31
  32. 32. 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
  33. 33. 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
  34. 34. Targetted Content.faq
>
div
{

position:absolute;
left:‐9999px;

opacity:0;

‐webkit‐transition:opacity
1s
ease;}.faq
>
div:target
{

position:static;

opacity:1;} 34
  35. 35. CSS Animated Backgroundsa
{

background:url("sprite.png");

background‐position:0
0;


‐webkit‐transition:background‐position
.5s;}a:hover
{

background‐position:0
‐100px;} 35
  36. 36. CSS Animations@‐webkit‐keyframes
throb
{

0%


{
opacity:
0.2;
left:0;
}

50%

{
opacity:
1.0;
left:10px;
}

100%
{
opacity:
0.2;
left:0;
}} 36
  37. 37. Targetted Content.faq
>
div
{

display:none}.faq
>
div:target
{

display:block;

position:relative;

‐webkit‐animation:
throb
1.5s
infinite;} 37
  38. 38. Slot Machine@‐webkit‐keyframes
spin
{

0%


{
background‐position:0
0;
}

100%
{
background‐position:0
‐200px;
}} 38
  39. 39. 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;} 39
  40. 40. TAG TEAM:jQUERY with CSS 40
  41. 41. 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
  42. 42. 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)opacitywidthheight
*/$(#my‐el).animate({left:
"+=200px",
width:320
},
1500); 42
  43. 43. GET IN THE RING: LAYOUT 43
  44. 44. Adaptive Interfacesif
(window.innerWidth
<
800)
{ 
var
el=document.getElementById(#sidebar);

el.style.display
=
none;} 44
  45. 45. Masonry$(function(){

$(#container).masonry({



itemSelector
:
.item,



columnWidth
:
240

});}); 45
  46. 46. Responsive Web Design<link


rel="stylesheet"



media="screen
and
(max‐device‐width:
480px)"

href="shetland.css"> 46
  47. 47. Tables for layout<table>


<tr>




<td
width="50">Sidebar
Content</td>




<td
width="*">Main
Content</td>


</tr></table> 47
  48. 48. display:table with CSS<div
id="content">


<div
class="sidebar">Sidebar
Content</div>


<div
class="main">Main
Content</div></div> 48
  49. 49. display:table with CSS#content
{
display:table;
}.sidebar
{
display:table‐cell;
width:50px;
}.main



{
display:table‐cell;
} 49
  50. 50. Flex box 50
  51. 51. Flex Boxhttp://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
  52. 52. Grid Layout 52
  53. 53. 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
  54. 54. THANK YOU!“Superfly” @snookca 54

×