CSS3 Takes on the World

2,964 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
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,964
On SlideShare
0
From Embeds
0
Number of Embeds
32
Actions
Shares
0
Downloads
38
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Include link to script on my site?\n
  • \n
  • http://expansive-derivation.ossreleasefeed.com/2010/10/tabs-and-faqs-with-css3-target-pseudo-selector/\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • 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

    ×