CSS3: the new style council

1,657 views

Published on

In this talk, Chris Mills from Opera takes you through all the main features of CSS3 that have good support across modern browsers, and some that are a little more experimental.

Published in: Technology, Art & Photos
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,657
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
34
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • \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
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • CSS3: the new style council

    1. 1. CSS3: the new style council Chris Mills, Opera Software Slides available on http://slideshare.net/chrisdavidmills
    2. 2. http://www.flickr.com/photos/attackcat/5172855379/
    3. 3. Who the hell am I?‣ Opera open standards evangelist and tech writer‣ Telling the world about open standards & Opera‣ Improving web education‣ Moaning‣ Drinking beer & saving the world before morning‣ Drumming in a heavy metal band
    4. 4. CSS3! http://www.flickr.com/photos/burningmax/4956554644/
    5. 5. What is CSS3?‣ A series of new modules‣ Add extra functionality on top of CSS2.1‣ Lets us do things more quickly and easily
    6. 6. Sounds good!‣ Less time spent in Photoshop‣ Less time spent with JavaScript‣ Less time spent maintaining sites‣ More time spent in the pub
    7. 7. Modular = good‣ Browser vendors can work on one module at a time‣ Less worry and pressure about supporting the entire spec
    8. 8. When should I use it?I’d argue “now”‣ Most browsers support most of this stuff now‣ Most of it degrades gracefully‣ And you can work around problems‣ Depends on what your client needs‣ By “identical”, how similar do you mean??
    9. 9. Try to argue the case......”identical in every browser” is outdated‣ Especially with mobile phones, iPad, tablets...‣ And IE6 is a decade old now‣ Surely providing an acceptable experience in each browser is, well, acceptable?‣ Then you can spend more less time on hacking
    10. 10. Modernizr
    11. 11. Using modernizr<html
class="no‐js">









+<script
src="modernizr‐1.6.min.js"></script>
















=<html
class="js
no‐flexbox
canvas
canvastext
no‐webgl
no‐touch
geolocation
postmessage
websqldatabase
no‐indexeddb
hashchange
no‐history
no‐draganddrop
no‐websockets
rgba
hsla
multiplebgs
backgroundsize
borderimage
borderradius
boxshadow
textshadow
opacity
no‐cssanimations
...
>
    12. 12. Using modernizr.no‐cssanimations
#animated‐menu
{

...}
    13. 13. Drop shadowstext‐shadow:
black
3px
3px
5px;text‐shadow:
0
0
4px
white,












0
‐5px
4px
#ffff33,












2px
‐10px
6px
#ffdd33,












‐2px
‐15px
11px
#ff8800,












2px
‐25px
18px
#ff2200,
    14. 14. Drop shadowsbox‐shadow:
4px
4px
5px
black;‐webkit‐box‐shadow:
4px
4px
5px
black;
    15. 15. Drop shadowsInset:box‐shadow:
inset
‐4px
‐4px
10px
black;Spread:box‐shadow:
4px
4px
5px
6px
black;
    16. 16. Opacitybackground‐color:
rgb(204,204,204);border:
1px
solid
black;opacity:
0.6;
    17. 17. RGB(a)background‐color:
rgba(204,204,204,0.6);
    18. 18. HSL(a)#p1
{
background‐color:
hsla(0,100%,50%,1);
}#p2
{
background‐color:
hsla(0,100%,60%,1);
}#p3
{
background‐color:
hsla(0,100%,70%,1);
}#p4
{
background‐color:
hsla(0,100%,80%,1);
}
    19. 19. border-radiusFinally — web 2.0 is easy!border‐radius:
10px;border‐radius:
0px
0px
10px
0px;
    20. 20. TransitionsOffer animation-like abilities‣ Set a default state for the element‣ Choose property to transition, and duration‣ Then set state to transition to
    21. 21. Transition default state#links
a,
#links
a:link
{

color:
black;

font‐size:
1.2em;

padding:
0.5em;

display:
block;

text‐decoration:
none;

background‐color:
rgb(255,255,255);

transition‐property:
background‐color;

transition‐duration:
1s;
    22. 22. Transitioned state#links
a:hover,
#links
a:active

{

background‐color:
rgb(150,150,150);}
    23. 23. Transitions: easingControlling the pattern of acceleration/deceleration, for a more natural feeltransition‐timing‐function:
ease‐in;transition‐timing‐function:
ease‐out;transition‐timing‐function:
ease‐in‐out;transition‐timing‐function:
ease‐out‐in;transition‐timing‐function:
linear;
    24. 24. Transitions: delayAdd a delay before the transition startstransition‐delay:
2s;
    25. 25. Multiple transitionsEach with their own start time
transition‐property:
background‐color,
width;
transition‐duration:
1s,
3s;
    26. 26. Transition shorthandOrder of properties: property, duration, timing-function, delay.transition:
all
1s
ease‐in
2s;
    27. 27. 2D TransformsTransform element size, position, rotation, skew,etc.
    28. 28. Transform originWhat point does the transform occur around?transform‐origin:
3em
bottom;transform‐origin:
center;transform‐origin:
20%
50%;
    29. 29. Moving elementsAlong X and Y elementstransform:
translateX(50px);transform:
translateY(100px);transform:
translate(50px,
100px);
    30. 30. Resizing elementsBy a set scale factortransform:
scale(1.1);
    31. 31. Skewing elementsSquishy distortion!transform:
skew(7deg,
3deg);
    32. 32. Rotating elementsAround the origin pointtransform:
rotate(3deg);
    33. 33. Combining transformsDoing multiple things in one declarationtransform:
scale(2)
rotate(10deg)
translateX(30px);
    34. 34. Combining transitions withtransformsThis is where it starts to get really fun!li
a
.menubutton
{

transition:
0.5s
all;

transform‐origin:
center;

transform:
scale(1);

opacity:
0.5;}
    35. 35. Combining transitions withtransformsli
a
.menubutton:hover
{

opacity:
1;

transform:
scale(1.1);}
    36. 36. Web fonts‣ Download custom fonts along with your web pages‣ Solve our typography nightmares
    37. 37. Include the font@font‐face
{

font‐family:
“My
font”;

src:
url(http://www.myweb.com/fonts/myfont.ttf);

format(“truetype”);}
    38. 38. Then use it in your page asnormalp
{

font‐family:
“My
font”;}
    39. 39. Web fonts issues‣ Licensing‣ Large downloads‣ Cross browser troubles: multiple formats needed
    40. 40. Browser format support‣ Opera 10.6+: OpenType, TrueType, SVG‣ IE9 + : EOT, OpenType, WOFF‣ Firefox 3.6+ : OpenType, TrueType, WOFF‣ Chrome 6+ : OpenType, TrueType, SVG‣ Safari 5+ : OpenType, TrueType
    41. 41. Font squirrel rocks
    42. 42. This is what you need!@font‐face
{

font‐family:
ActionIsRegular;

src:
url(actionis‐webfont.eot?)
format(eot),






url(actionis‐webfont.woff)
format(woff),






url(actionis‐webfont.ttf)
format(truetype),






url(actionis‐webfont.svg#webfontg3JxrxOm)
format(svg);

font‐weight:
normal;

font‐style:
normal;}
    43. 43. Media queriesMedia types on steroids‣ Apply CSS depending on device/browser attributes‣ Very useful for optimizing layouts for different devices‣ (http://people.opera.com/danield/css3/vangogh/ index.php)‣ http://mediaqueri.es
    44. 44. Device attributes‣ Browser width/height‣ Device width/height‣ Resolution‣ Aspect ratio‣ Monochromacity‣ etc.
    45. 45. A sample media query@media
all
and
(max‐width:
480px),
all
and
(max‐device‐width:
480px)
{

...}
    46. 46. CSS3 Selectors[attr*str] :nth‐last‐of‐type(n)[attr^str] :nth‐last‐child(n)[attr~str] :only‐child:first‐child :only‐of‐type:last‐child :checked:first‐of‐type :valid:last‐of‐type :invalid:nth‐child(n) :enabled :target:nth‐of‐type(n) :disabled And
more!
    47. 47. CSS3 Selector examplesarticle>p:nth‐of‐type(1)article>p:first‐of‐typediv[id*=page]:targetp:first‐childinput[type=text]:validtr:nth‐child(2n+1)tr:nth‐child(odd)
    48. 48. :target is cool!<li><a
href="#page1"><p
class="menubutton">Page
1</p></a></li><li><a
href="#page2"><p
class="menubutton">Page
2</p></a></li><div
id="page1"></div><div
id="page2"></div>
    49. 49. :target is cool!div[id*=page]
{

position:
absolute;

width:
440px;
height:
480px;

padding:
20px
30px
20px
30px;

opacity:
0;

transition:
1s
all;}
    50. 50. :target is cool!div[id*=page]:target
{

opacity:
1;

z‐index:
5;}
    51. 51. object-fit, object-positionimg
{

object‐fit:
none;

//
also
takes
contain,
cover
and
fill
values

object‐position:
25%
50%;

//
just
like
background‐position}
    52. 52. Multiple backgroundsheader
{

background:
url(icon.gif)
top
left
no‐repeat,













url(pattern.jpg)
repeat,













url(center‐spine.png)
top
center













repeat‐y;

}
    53. 53. CSS keyframe animation@‐webkit‐keyframes
heartmove
{

0%
{



padding‐left:
0px;
padding‐top:
0px;

}


50%
{



padding‐left:
4px;
padding‐top:
4px;

}

100%
{



padding‐left:
0px;
padding‐top:
0px;

}}
    54. 54. CSS keyframe animation.heartmove
{

‐webkit‐animation‐name:
heartmove;

‐webkit‐animation‐duration:
0.5s;

‐webkit‐animation‐iteration‐count:
infinite;}
    55. 55. And there’s more!‣ 3D transforms‣ multi-col‣ Flex box‣ Animation‣ Gradients‣ Reflections...‣ ..and it goes on...
    56. 56. Thanks for listening!‣ cmills@opera.com‣ @chrisdavidmills‣ http://dev.opera.com‣ http://www.opera.com/wsc‣ http://interactwithwebstandards.com

    ×