CSS Takes Over the World

CSS TAKES OVER 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/ 19

THE WORKHORSE: FORM VALIDATION 21

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="" /> 22

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

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> 24

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

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

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

BRINGING THE FLAIR: ANIMATION 30

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

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

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

http://bit.ly/3lfjUA 34

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

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

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

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

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

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

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

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

46 CSS Panic @-‐webkit-‐keyframes progress{
0% {width:0px;} 100% {width:200px;} }

47 CSS Panic .enemys:checked{ overflow:hidden;
-‐webkit-‐animation-‐name:none; -‐webkit-‐pointer-‐events: none; pointer-‐events: none; opacity:0; }

Razzle Dazzle! 48

Filters filter:progid:DXImageTransform .Microsoft.Blur(pixelradius=2); filter:progid:DXImageTransform .Microsoft.BasicImage(grayscale=1); 49

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

CSS Shaders #shaded:hover { filter: custom(url('wobble.vs')
url('color-‐swipe.fs'), 40 40, amplitude 60, amount 1.0); } 51

CSS Shaders http://www.adobe.com/devnet/html5/articles/css- shaders.html 53

GET IN THE RING: LAYOUT 54

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

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

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

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

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

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

Two Modes by Class Name body.panescroll { /* position:fixed;
*/ } body.pagescroll { /* display:table; */ } 63

Grid Layout 64

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

WHAT IS THE POINT? 66

Declarative CSS is more eﬃcient than JavaScript It’s smaller It
requests fewer resources Browser can oﬄoad to GPU It’s easier to separate concerns We’re describing visual states 67

69 Describing State .panescroll #main { margin-‐top: 0px;
-‐webkit-‐transition: margin-‐top .5s; -‐moz-‐transition: margin-‐top .5s; }

70 Describing State .panescroll.l-‐headercollapsed #main { margin-‐top: -‐45px; }

THANK YOU! “Superfly” @snookca 71

CSS Takes Over the World

CSS Takes Over the World

More Decks by snookca

Other Decks in Design

Featured

Transcript