SlideShare ist ein Scribd-Unternehmen logo
1 von 229
Downloaden Sie, um offline zu lesen
Simply Responsive CSS3




                        Denise R. Jacobs //
1             ParisWeb// le 15 October 2011 //
Simple & Responsive Tweets
             Who I am:
            @denisejacobs

          This fine event:
         @parisweb #parisweb

          I’m talking about:
                 #css3sr
2
A little about me
    Denise R. Jacobs is an author, speaker,
    design thinker, and educator. She is
    the author of The CSS Detective
    Guide, and is a co-author for InterAct
    with Web Standards: A Holistic
    Approach to Web Design. She is a
    Consultant Web Design Trainer and
    Creativity Evangelist based in Miami,
    Florida.




3           CSSDetectiveGuide.com & InterActWithWebStandards.com
Simple?




4
Responsive?




5
The goal




6
How???




7
Start here…
    1. Know Your CSS3
      •   Getting started
          •   What’s new
          •   Rules of the road
          •   Helping tools and scripts


      •   Properties
          •   Standard effects
          •   Advanced effects


      •   Selectors
8
…Continue here
    2. Get Responsive
      •   Shift your brain
          •   Mobile first
          •   Watch out


      •   3 components
          •   Flexible grid
          •   Flexible images
          •   Media queries




9
…And end here!
     2. Becoming Responsive (cont’d)
       •   4 Steps
           •   Plan your design
           •   Crunch the numbers
           •   Determine the breaking points
           •   Add media queries


     3. Resources




10
What’s New in
        CSS3

11
What’s New in CSS3?
     CSS3 is the third generation of the CSS
       specification recommendations from the
       W3C.

     In CSS3 there are new selectors, pseudo-
       elements and classes, properties, and
       values specifically created to answer the
       needs and solve the problems of modern
       web design and development.


12
CSS3 Modularity
     CSS3 has been broken up into different
       unique modules. This means is that, for
       example, the particular CSS properties and
       values for layout is grouped into one
       specific module.




13
CSS3 Modularity: Benefits
     • Browser producers can now implement
       CSS3 module by module
     • Speeds up the browser implementation
       process
     • Encourages innovation




14
The CSS3 Modules
     • Template Layout               •   Values and Units
     • Backgrounds and Borders       •   Web Fonts
     • Ruby                          •   Behavioral Extensions to CSS
     • Basic User Interface          •   Line Layout
     • Basic Box Model               •   Flexible Box Layout
     • Grid Positioning              •   Image Values
     • Speech                        •   2D Transformations
     • Marquee                       •   Multi-column Layout
     • Style Attribute Syntax        •   3D Transformations
     • Cascading and Inheritance     •   Namespaces
     • Color                         •   Transitions
     • Fonts                         •   Animations
     • Text                          •   View Module
     • Generated Content for Paged   •   Media Queries
       Media                         •   Paged Media
     • Generated and Replaced        •   Selectors
       Content
15
Resources: New in CSS3
     http://www.w3.org/TR/tr-groups-all#
       tr_Cascading_Style_Sheets__CSS__
       Working_Group




16
Colors in CSS3: RGB
     • Regular RGB
       rgb(x, x, x):
       ex. rgb(255, 0, 0)

     • RBG with alpha-opacity
       rgba(x, x, x, y):
       An RGB value
       ex. rgba(255, 0, 0, 0.2)




17
RGBA Color
     Alpha opacity:
     0.0 = 0% = no opacity
     1.0 = 100% = full opacity




18
Colors in CSS3: HSL
     HSL stands for hue, saturation, and
      luminosity (lightness)

     • Regular HSL
       hsl(x%, x%, x%):
       ex. hsl(0, 100%, 50%)

     • HSL with alpha-opacity
       hsla(x%, x%, x%, y):
       ex. hsla(0, 100%, 50%, 0.5)

19
HSL Color Wheel
     0º – Red
     60º – Yellow
     120º – Green
     180º – Cyan
     240º – Blue
     300º – Magenta




20
HSL Color Picker Tool




       http://www.workwithcolor.com/hsl-color-picker-01.htm
21
Getting Started with
             CSS3:
     The Rules of the Road

22               http://www.flickr.com/photos/ilike/3707503212/
CSS3 Browser
      Compatibility

23           http://www.flickr.com/photos/sfllaw/222795669/
The Scoop
     • Many properties are browser-specific,
       requiring vendor prefixes

     • Plus there is a standard property

     • There are syntax differences between
       browser-specific properties and the
       standard property

     • All of this causes an increase in the amount
       of CSS
24
Code bloat in action
     Ideally:                     Reality:

     a.polaroid:active {          a.polaroid:active {
     z-index: 999;                z-index: 999;
     border-color: #6A6A6A;       border-color: #6A6A6A;
     box-shadow: 15px 15px 20px   -webkit-box-shadow: 15px
        rgba(0,0, 0, 0.4);           15px 20px rgba(0,0, 0,
     transform: rotate(0deg)         0.4);
        scale(1.05);              -moz-box-shadow: 15px 15px
     }                               20px rgba(0,0, 0, 0.4);
                                  box-shadow: 15px 15px 20px
                                     rgba(0,0, 0, 0.4);
                                  -webkit-transform:
                                     rotate(0deg)
                                     scale(1.05);
                                  -moz-transform:
                                     rotate(0deg)
                                     scale(1.05);
                                  transform: rotate(0deg)
                                     scale(1.05);
                                  }
25
Doesn’t Validate




26
None of the older IEs support CSS3
     …as in “not any.”




            6            7                                  8



27                           http://www.flickr.com/photos/johnsnape/4258191545/
IE9 now supports CSS3
                …But still not as fully as
                  the other browsers
                  yet.




28
Resources: IE9 CSS3 support
     http://msdn.microsoft.com/en-
       us/ie/ff468705.aspx#_Web_standards_sup
       port

     http://msdn.microsoft.com/en-
       us/library/cc351024%28v=vs.85%29.aspx

     http://www.impressivewebs.com/css3-
       support-ie9/

29
Tools you’ll need:
     1.   CSS3 Property browser support charts
     2.   CSS3 Selector browser support charts
     3.   CSS3 Specifications
     4.   All browsers to test in and/or
          cross-browser testers




30
CSS3 Property browser support charts


     http://www.findmebyip.com/
       litmus




31
CSS3 Selector browser support charts

     http://www.standardista.com/css3/
       css3-selector-browser-support




32
The CSS3 Specifications
     The CSS3 Specifications are THE resource for
       finding out exactly is the intented behavior
       and use of any given property.

     http://www.w3.org/standards/techs/
       css#w3c_all




33
Cross-browser testers
     http://tredosoft.com/Multiple_IE


     http://crossbrowsertesting.com/
     (paid)


     http://browsershots.org/
     (free)
34
CSS3 & Cross-
     browser Coding

35           http://www.flickr.com/photos/scfiasco/4490322916/
The Goal: Code that works
       in all most browsers




36
Not all browsers are created equal




37
How can we achieve compatibility?




38                        http://www.flickr.com/photos/barretthall/205175534/
Steps to get as close as possible
     1. Leverage source order
     2. Filter it
     3. Let tools do all of the work




39
Leverage source order
     • Place default properties first

     • Place browser-specific properties ahead of
       standard properties

     • The standard properties will override the
       vendor’s when the standard is established.



40
A Proper Stack
     .gradient {
     color: #fff;




41
A Proper Stack
     .gradient {
     color: #fff;
     background: #aaaaaa url(gradient_slice.jpg) 0 0
       x-repeat; /*fallback background color & image*/




42
A Proper Stack
     .gradient {
     color: #fff;
     background: #aaaaaa url(gradient_slice.jpg) 0 0
       x-repeat; /*fallback background color & image*/
     background-image: -moz-linear-gradient(top,
       #07407c, #aaaaaa); /* gradient for Mozilla */




43
A Proper Stack
     .gradient {
     color: #fff;
     background: #aaaaaa url(gradient_slice.jpg) 0 0
       x-repeat; /*fallback background color & image*/
     background-image: -moz-linear-gradient(top,
       #07407c, #aaaaaa); /* gradient for Mozilla */
     background-image: -webkit-gradient(linear,left
       top,left bottom,color-stop(0, #07407c),color-
       stop(1, #aaaaaa)); /* gradient for the Webkits
       */




44
A Proper Stack
     .gradient {
     color: #fff;
     background: #aaaaaa url(gradient_slice.jpg) 0 0
       x-repeat; /*fallback background color & image*/
     background-image: -moz-linear-gradient(top,
       #07407c, #aaaaaa); /* gradient for Mozilla */
     background-image: -webkit-gradient(linear,left
       top,left bottom,color-stop(0, #07407c),color-
       stop(1, #aaaaaa)); /* gradient for the Webkits
       */
     -ms-filter:
       "progid:DXImageTransform.Microsoft.gradient(sta
       rtColorStr='#07407c', EndColorStr='#aaaaaa')";
       /* filter for IE8 (& IE9) */




45
A Proper Stack
     .gradient {
     color: #fff;
     background: #aaaaaa url(gradient_slice.jpg) 0 0
       x-repeat; /*fallback background color & image*/
     background-image: -moz-linear-gradient(top,
       #07407c, #aaaaaa); /* gradient for Mozilla */
     background-image: -webkit-gradient(linear,left
       top,left bottom,color-stop(0, #07407c),color-
       stop(1, #aaaaaa)); /* gradient for the Webkits
       */
     -ms-filter:
       "progid:DXImageTransform.Microsoft.gradient(sta
       rtColorStr='#07407c', EndColorStr='#aaaaaa')";
       /* filter for IE8 (& IE9) */
     filter:
       progid:DXImageTransform.Microsoft.gradient(star
       tColorStr='#07407c', EndColorStr='#aaaaaa');
     } /* filter for IE7 and lower */
46
Apply a Filter
     • If you must have the effect in IE lt 8, such as
       alpha opacity, gradient, shadow, transitions etc.
       you could use a proprietary IE filter.

     • The -ms-filter attribute is an extension to
       CSS. This syntax will allow other CSS parsers to
       skip the value of this unknown property
       completely and safely. It also avoids future name
       clashes with other CSS parsers.

     • In IE 8 mode, filters must be prefixed with "-ms-"
       and the PROGID must be in single or double
       quotes to make sure IE 8 renders the filters
       properly.
47
Filters: {Caveat Coder}
     • IE filters work, but are essentially hacks
       – IE filters are proprietary and thus not part of
         any standard specification, and never will be




48
Resources: IE Filters
     Microsoft Visual Filters and Transitions Reference
     http://msdn.microsoft.com/en-us/library/
       ms532853%28v=VS.85%29.aspx




49
Let the tools do the work
     • We’ll talk about those next!




50
CSS3 Tools

51        http://www.flickr.com/photos/johnsnape/4258191545/
Useful CSS3 Tools
     1.   CSS3 Generators
     2.   Helper Scripts
     3.   Browser Feature Detection
     4.   Templates




52
CSS3 Generators

53            http://www.flickr.com/photos/latca/841730130/
CSS3Please.com




54
CSS3Generator.com




55
CSS3Maker.com




56
CSS3 Tools at WestCiv




57         http://westciv.com/tools/
More CSS3 Generators
     http://border-radius.com

     http://www.colorzilla.com/
       gradient-editor/

     http://csscorners.com

     http://border-image.com


58
Helper Scripts

59          http://www.flickr.com/photos/keystricken/386106987/
Get a helping hand…
     These scripts help IE lt 8 behave like CSS3-
     compliant browsers. However, support of
     CSS3 properties varies between scripts.




60
ie-7.js (includes IE8 and IE9)




61            http://code.google.com/p/ie7-js/
CSS3Pie.com




62
CSS Sandpaper




63   http://www.useragentman.com/blog/csssandpaper-a-css3-javascript-library/
Browser Feature
        Detection

64          http://www.flickr.com/photos/johnsnape/4258191545/
Modernizr.com




65
What does Modernizr do?
     Modernizr detects which CSS3 (and HTML5)
     properties are supported by the browser,
     and appends classes to the <html> tag,
     which then allows you to create styles to
     target specific properties to individual
     browsers.

     It is a premier progressive enhancement
     tool!


66
How to use Modernizr
     http://www.alistapart.com/articles/taking-
       advantage-of-html5-and-css3-with-
       modernizr/

     http://webdesignernotebook.com/css/
       how-to-use-modernizr

     http://www.ericlightbody.com/2010/
       modernizr-your-tool-for-html5-and-css3-
       functionality/

67
Templates

68       http://www.flickr.com/photos/jazzmasterson/275796175/
HTML5Boilerplate.com


     Paul Irish’s HTML5 template file
     http://html5boilerplate.com/




69
CSS3 Properties!

70
Webfonts

71
@font-face




72                http://lostworldsfairs.com/moon/
@font-face
     • Note:
       – Actually part of the CSS2.1 specification.
       – Therefore, the IEs do support it!

     • Tips & issues
        – When you decide to use a font as a webfont,
          you have to be sure that the EULA supports it.
        – One way to avoid that is to use ONLY fonts
          that are listed as approved webfonts.

     • Browser Support
        – IE lt 8 require fonts to be in EOT format
        – IE9 now supports WOFF
73
@font-face bug: IE lt 8
     @font-face super bullet-proofing

     The problem:
     @font-face doesn’t work, even with the
     proper normal syntax. What gives?




74
@font-face bug: Webkit
     @font-face bold and italics “bug”

     The problem:
     Applying font-weight:bold or font-
     style: italic to @font-face'd text doesn’t
     work.




75
Solution: IE proof @font-face
                   + faux variations
     Example:
     @font-face {
     font-family: 'MyFontFamily';
     src: url('myfont-webfont.eot?#iefix‘)
       format('embedded-opentype'),
     url('myfont-webfont.woff')
       format('woff'),
     url('myfont-
       webfont.ttf')format('truetype'),
     url('myfont-webfont.svg#svgFontName')
       format('svg');
     font-weight:normal;
     font-style:normal;
     font-variant:normal;
     }

76
FontSquirrel.com




77   http://www.fontsquirrel.com/fontface/generator
Webfont Services
     Instead of generating the webfonts yourself,
       you can pay a service where the webfonts
       are hosted elsewhere, and you link to them
       and use the fonts on their server.




78
Webfont Services




79       http://www.typekit.com
Webfont Services
     http://www.typotheque      http://www.webtype.com
        .com/webfonts
                                http://www.fontslive.com
     http://typekit.com
                                http://www.extensis.com/en
     http://fontdeck.com           /WebINK/

     http://kernest.com         http://webfonts.fonts.com

     http://www.ascenderfonts   http://webfonts.info/wiki/in
        .com/webfonts/             dex.php?title=Category:W
                                   ebfont_Services



80
Google Font Directory




           http://code.google.com/webfonts
81
Resources: @font-face
     • http://www.delicious.com/denisejacobs/
       font-face




82
New Visual Effects
         in CSS3

83
New Visual Effects in CSS3
     •   border-radius
     •   rgba color
     •   box-shadow
     •   text-shadow
     •   gradient




84
border-radius




85                   http://oh-hai.biz
Old-skool: code contortions




86
border-radius
     • Tips & issues
        – Different syntax for mozilla, webkit, and
          opera browsers

     • Browser Support
        – IE lt 8 does not support, IE9 does




87
border-radius




     Syntax comparison breakdown:
     • -moz allows multiple values for each position
     • -webkit individual values
88
     • Standard is like mozilla
border-radius
     #contentcolumn {
     -moz-border-radius: 20px 20px 0 0;
     -webkit-border-top-left-radius: 20px;
     -webkit-border-top-right-radius: 20px;
     border-radius: 20px 20px 0 0;
     }




89
Border-radius.com




90
border-radius Resources
     http://www.delicious.com/denisejacobs/
       border-radius




91
rgba




92          http://aarronwalter.com/designer/
rgba
     • Tips & issues
        – More granular control of the color
          opacity of a particular element

     • Browser Support
        – IE lt 8 does not support, IE9 does
        – There is an IE filter that will give
          transparency with a color.


93
Cross-browser: rgba
     • Place after regular rgb color property to
       override in modern browsers; older
       browsers will ignore it

     • IE lt 8 bug: use the property background
       instead of background-color for the
       regular color




94
Full solution: rgba
     .rgba {
     background-color: #ff0000;
       /* fallback color in hexidecimal. */
     background-color: transparent; /* transparent
       is key for the filter to work in IE8. best
       done through conditional comments */
     background-color: rgba(255, 0, 0, 0.3);
     -ms-filter:
       "progid:DXImageTransform.Microsoft.gradient
       (startColorstr=#4CFF0000,
       endColorstr=#4CFF0000)";
     /* filter for IE8 */
     filter:
       progid:DXImageTransform.Microsoft.gradient(
       startColorstr=#4CFF0000,
       endColorstr=#4CFF0000);
     /* filter for older IEs */
     }
95
box-shadow




96                http://badassideas.com/work/
box-shadow
     • Tips & issues
        – Different syntax for mozilla, webkit, and
          opera browsers

     • Browser Support
        – IE lt 8 does not support, IE9 does
        – There is a filter for IE: shadow (actually
          there are 2: shadow and dropshadow,
          but shadow is said to be better)


97
box-shadow
     .portfolio {
     -moz-box-shadow: 0 5px 20px
       rgba(0,0,0,0.6);
     -webkit-box-shadow: 0 5px 20px
       rgba(0,0,0,0.6);
     box-shadow: 0 5px 20px rgba(0,0,0,0.6);
     }




98
Full solution: box-shadow
     .boxshadow {
     -moz-box-shadow: 3px 3px 10px #333;
     -webkit-box-shadow: 3px 3px 10px #333;
     box-shadow: 3px 3px 10px #333;
       /*standard*/
     -ms-filter:
       "progid:DXImageTransform.Microsoft.Shad
       ow(Strength=4, Direction=135,
       Color='#333333')";
     /* For IE 8 */
     filter:
       progid:DXImageTransform.Microsoft.Shado
       w(Strength=4, Direction=135,
       Color='#333333');
       /* For IE 5.5 - 7 */
     }
99
Inspiration: box-shadow




100   http://nicolasgallagher.com/css-drop-shadows-without-images/demo/
Resources: box-shadow
      http://www.delicious.com/denisejacobs/
        box-shadow




101
text-shadow




102                 http://www.bountybev.com
text-shadow
      • Tips & issues
         – Can help accentuate text and improve
           readability and visual importance

      • Browser Support
         – IE lt 8 does not support, nor does IE9 :/
         – could use the IE filter: shadow



103
Full solution: text-shadow
      .textshadow h2 {
      text-shadow:1px 1px 2px
        rgba(48,80,82,0.8);
      -ms-filter:
        "progid:DXImageTransform.Microsoft.Shad
        ow(Strength=2, Direction=135,
        Color='#305052')";
      /* For IE 8+ */
      filter:
        progid:DXImageTransform.Microsoft.Shado
        w(Strength=2, Direction=135,
        Color='#305052');
      /* For IE 5.5 - 7 */
      }

104
Inspiration: text shadow




105   http://www.midwinter-dg.com/blog_demos/css-text-shadows/
Inspiration: text shadow




106   http://desandro.com/articles/the-new-lens-flare/
Resources: text-shadow
      http://www.delicious.com/denisejacobs/
        text-shadow




107
gradient




108              http://raymondjay.com/
Old skool: Gradient background




109
gradient
      • Tips & issues
         – Very different syntax for mozilla and
           webkit browsers previously
         – Newer syntax for current and future
           browsers

      • Browser Support
         – IE does not support, so will still need a
           fallback image for those browsers


110
gradient
      #mainnav li a {
      background-color: #f7f6f4;
      background-image: url(bg_navitems.gif);
      background-image:
        -moz-linear-gradient(100% 100% 90deg,
        #ccc9ba, #ffffff);
      background-image:
        -webkit-gradient(linear, 0% 0%, 0%
        100%, from(#ffffff), to(#ccc9ba));
      }




111
gradient: Full solution
      .gradient {
      color: #fff;
      background: #aaaaaa url(gradient_slice.jpg) 0 0
        x-repeat; /*background color matches one of the
        stop colors. The gradient_slice.jpg is 1px wide
        */
      background-image: -moz-linear-gradient(top,
        #07407c, #aaaaaa);
      background-image: -webkit-gradient(linear,left
        top,left bottom,color-stop(0, #07407c),color-
        stop(1, #aaaaaa));
      -ms-filter:
        "progid:DXImageTransform.Microsoft.gradient(sta
        rtColorStr='#07407c', EndColorStr='#aaaaaa')";
        /* IE8+ */
      filter:
        progid:DXImageTransform.Microsoft.gradient(star
        tColorStr='#07407c', EndColorStr='#aaaaaa');
        /* IE7- */
      }
112
Colorzilla gradient tool




113       http://www.colorzilla.com/gradient-editor/
Inspiration: gradients




114      http://leaverou.me/css3patterns/
Inspiration: gradients




      http://leaverou.me/2011/03/beveled-corners-negative-border-radius-with-css3-gradients/
115
Tools: gradient
      http://www.colorzilla.com/gradient-editor/

      http://www.westciv.com/tools/gradients/

      http://css3please.com

      http://css3generator.com




116
Resources: gradient
      http://www.delicious.com/denisejacobs/
        gradient




117
Advanced Visual
       Effects in CSS3

118
CSS3 for Advanced Visual Presentation
       1.   border-image
       2.   multiple background images
       3.   background-size
       4.   multiple text columns




119
border-image




120                  http://www.spoongraphics.com/blog/
border-image
      Borders can now be created using images
        and sections thereof for enhanced visual
        design.

      • Tips & issues
        – Documentation on best use is sparse
        – No adequate fall-back techniques for graceful
          degradation
        – Vendor prefixes for Mozilla and webkit

      • Browser support
121
        – The IEs do not support
border-image
      div.note div.border {
      -moz-border-image:
      url(/playground/awesome-overlays/border-
      image.png) 5 5 5 5 stretch;
      -webkit-border-image:
      url(/playground/awesome-overlays/border-
      image.png) 5 5 5 5 stretch;
      border-image: url(/playground/awesome-
      overlays/border-image.png) 5 5 5 5
      stretch;
      }




122
Border-image.com




123
Resources: border-image
      http://www.delicious.com/denisejacobs/
        border-image




124
Multiple backgrounds




125                     http://www.lostworldsfairs.com
Multiple backgrounds
      • Tips & issues:
         – The backgrounds are shown according to the
           order listed, with the first background image
           listed is the one “on top” and the rest stack
           underneath it.
         – Can use CSS3 gradients (which are like
           background images) in conjunction with
           multiple background images.

      • Browser support:
         – IE lt 8 does not support, but IE9 does
126
Multiple backgrounds
      body {
      background-color: #5ABBCF;
      background: #5ABBCF url(../images/bokeh1.png) no-
        repeat; /* fallback image */
      background: url(../images/bokeh4.png) no-repeat,
        url(../images/bokeh3.png) no-repeat 10% 0,
        url(../images/bokeh2.png) no-repeat 20% 0,
        url(../images/bokeh1.png) no-repeat,
        url(../images/glow.png) no-repeat 90% 0,
        -moz-linear-gradient(0% 90% 90deg,#5ABBCF,
        #95E0EF);
      background:
        url(../images/bokeh4.png) no-repeat,
        url(../images/bokeh3.png) no-repeat 10% 0,
        url(../images/bokeh2.png) no-repeat 20% 0,
        url(../images/bokeh1.png) no-repeat,
        url(../images/glow.png) no-repeat 90% 0,
        -webkit-gradient(linear, 0% 0%, 0% 90%,
        from(#95E0EF), to(#5ABBCF));
      }

127
Resources: multiple backgrounds
      http://www.delicious.com/denisejacobs/
        multiplebackgrounds




128
background-size




129       http://www.alistapart.com/articles/supersize-that-background-please/
background-size
      You can set the size of a background image and
        make sure it covers the entire background of a
        page, no matter what the size.

      • Tips & Issues:
         – Vendor prefixes for mozilla, webkit, and opera

      • Browser support:
         – IE lt 8 does not support, but IE9 does



130
background-size
      Example:
      body { background: #000
        url(myBackground_1280x960.jpg) center
        center fixed no-repeat;
        -moz-background-size: cover;
        -webkit-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
      }




131
Inspiration: background-size




132             Launchrock.com
Resources: background-size
      • http://www.delicious.com/denisejacobs/
        backgroundsize

      • http://www.alistapart.com/articles/
        supersize-that-background-please/

      • http://www.w3.org/TR/css3-
        background/#the-background-size


133
Multiple text columns




134                           http://www.yaili.com
Multiple text columns
      You can have one div containing a number of
        paragraphs which can be displayed in columns,
        with no float or height manipulations.

      • Tips & Issues:
         – Some of the properties are not widely
           supported, and many of the related (like
           dividers, breakers, etc.) haven’t been
           implemented or aren’t supported yet either.



135
Multiple text columns
      Example:
      div.three-col {
      -webkit-column-count: 3;
      -webkit-column-gap: 15px;
      -moz-column-count: 3;
      -moz-column-gap: 15px;
      column-count: 3;
      column-gap: 15px;
      }




136
Resources: multiple columns
      http://www.delicious.com/denisejacobs/
        multiplecolumns




137
2d Transformations
          with CSS3

138
transform (2d)




139             http://www.zurb.com/playground/css3-polaroids/
transform
      • Tips & issues
         – Mozilla, Webkit, and Opera vendor
           prefixes; no standard yet.

      • Browser Support
         – IE lt 8 does not support, but IE9 does




140
2D Transformations
      Different kinds of transforms:
         • rotate
         • scale
         • skew
         • translate
         • matrix




141
transform/rotate: full solution
      .rotate {
      -moz-transform: rotate(-5deg);
      -webkit-transform: rotate(-5deg);
      -o-transform: rotate(-5deg);
      transform: rotate(-5deg);
      filter:
        progid:DXImageTransform.Microsoft.Matrix(sizing
        Method='auto expand', M11=0.9961946980917455,
        M12=0.08715574274765817, M21=-
        0.08715574274765817, M22=0.9961946980917455);
      -ms-filter:
        "progid:DXImageTransform.Microsoft.Matrix(M11=0
        .9961946980917455, M12=0.08715574274765817,
        M21=-0.08715574274765817,
        M22=0.9961946980917455, sizingMethod='auto
        expand')";
      zoom: 1;
      }


142
transform: multiple
      You can apply multiple transform properties to one element.

      Example:
      .enlargen:hover {
      -webkit-transform: translate(-50%, -50%) scale(2)
        rotate(0);
      -moz-transform: translate(-50%, -50%) scale(2)
        rotate(0);
      -o-transform: translate(-50%, -50%) scale(2)
        rotate(0);
      transform: translate(-50%, -50%) scale(2)
        rotate(0);
        }




143
Resources: 2D transforms
      http://www.delicious.com/denisejacobs/
        transform




144
Animation with
          CSS3

145
Animation
      1. transitions
      2. animation (the webkits only)

      A Tip:
      Be subtle – it’s more effective




146
Old skoool: Flash




147
transition




148                http://timvandamme.com/
transition
      You can create subtle transitions between
        hover states on elements. The transitions
        smooth out visual jumps.

      • Tips & issues
        – Be sure to put the transition effect on the
          correct element




149
transition
      Example:
      #id_of_element {
      -webkit-transition: all 1s ease-in-out;
      -moz-transition: all 1s ease-in-out;
      -o-transition: all 1s ease-in-out;
      transition: all 1s ease-in-out;
      }




150
Animation




151               http://www.css3exp.com/moon/
Animation
      You can create subtle animations in the
        browser!

      • Tips & issues:
        – Plan out the animation sequence ahead of
          time
        – Be aware of style order in the CSS




152
Animation
      div {
      animation-name: diagonal-slide;
      animation-duration: 5s;
      animation-iteration-count: 10;
      }

      @keyframes diagonal-slide {
      from { left: 0; top: 0; }
      to { left: 100px; top: 100px; }
      }




153
Resources: Animation
      http://www.delicious.com/denisejacobs/
        animation




154
CSS3 Selectors

155          http://www.flickr.com/photos/jamiecampbell/446301597/
Getting Advanced
      Advanced selectors are a good way to
      specifically target styles for modern
      browsers.

      The right selector will help you achieve
      targeting nirvana, so it’s important to know
      which selectors you can use now.




156
CSS3 Selectors
      Advanced selectors give us the power to
       target elements that are not part of the
       document tree and/or those that are
       generated dynamically.

      • Tips & issues
        – There are a lot of options to choose from!
        – Great to use for progressive enhancement
        – Need to be aware of changes to specificity


157
CSS3 Selector Specification
      • General sibling            • Pseudo-classes
        E~F                           – Target
                                        • :target
      • Attribute substrings
         – a[attribute^="value"]     – Negation
         – a[attribute$="value"]        • :not(s)
         – a[attribute*="value"]
                                     – State
      • Pseudo-elements                 •   :enabled
        no new ones, all pseudo-
                                        •   :disabled
        elements in CSS3
        indicated with ::               •   :checked
                                        •   :indeterminate
158
CSS3 Selectors
      – Structural
        • :nth-child(n)
        • :nth-last-child(n)
        • :nth-of-type(n)
        • :nth-last-of-type(n)
        • :last-child
        • :first-of-type
        • :last-of-type
        • :only-child
        • :only-of-type
        • :empty
        • :root
159
Uses for advanced selectors
      • Great for progressive enhancement

      • Styling first, last or x-number of elements




160
Old skool: zebra striping




161
With structural pseudo-elements
      The keywords odd and even can be used to match
        child elements whose index is odd or even. The
        index of an element’s first child is 1, so this rule
        will match any p element that is the first, third,
        fifth, and so on, child of its parent element.

      An argument, can is placed within the parentheses,
        as a number, a keyword, or a formula.

      A formula an + b can be used to create more
        complex repeating patterns. In the formula, a
        represents a cycle size, n is a counter starting at
        0, and b represents an offset value. All values are
        integers.
162
Nth child selector tester




            http://leaverou.me/demos/nth.html
163
CSS3 Selector Support




          http://www.findmebyip.com/litmus
164
Tools: CSS3 Selectors
      • http://www.quirksmode.org/
        compatibility.html

      • http://www.evotech.net/blog/2009/02/css
        -browser-support/

      • http://www.findmebyip.com/litmus



165
CSS3 Selector Helper Script




               http://www.selectivizr.com
166
Resources: CSS3 Selectors
      • http://www.delicious.com/denisejacobs/se
        lectors+css3

      • http://inspectelement.com/tutorials/a-
        look-at-some-of-the-new-selectors-
        introduced-in-css3/

      • http://24ways.org/2009/cleaner-code-
        with-css3-selectors

167
Tools: CSS3 Selectors
      • http://www.quirksmode.org/
        compatibility.html

      • http://www.findmebyip.com/litmus




168
Resources: CSS3 Selectors
      • http://www.delicious.com/denisejacobs/
        selectors+css3

      • http://inspectelement.com/tutorials/a-
        look-at-some-of-the-new-selectors-
        introduced-in-css3/

      • http://24ways.org/2009/
        cleaner-code-with-css3-selectors

169
Becoming
      Responsive

170                http://mediaqueri.es/
Responsive Devices?




171                 http://www.flickr.com/photos/ivyfield/4486938457/
Responsive Devices!




172                 http://www.flickr.com/photos/ivyfield/4486938457/
Brain shift




173
Mobile first




174
Avoid this

      desktop stylesheet +
         media queries
         = mobile site




175
=“Switchy” layout




176   http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu
Instead this

      mobile stylesheet +
         media queries
        = desktop site




177
= Truly responsive




178                        http://ri.gov
What’s the difference?




179
3 components

180
1) Flexible grid




181
Flexible & Fluid
      • Size everything in ems or percentages

      • Flexible: Ems for everything

      • Fluid: Percentages for width, ems for
        height




182
Various grids
      • http://delicious.com/denisejacobs/grid




183
2) Flexible images




184
Flexible Images: Foreground
      img {width: 100%;
          max-width: 100%;}




185
Responsive foreground images




186                     https://github.com/filamentgroup/Responsive-Images
Flexible Images: Background
      Use background-position to selectively crop
        your backgrounds




187
3) @media queries




188
@media queries
      @media queries are now being used as a
       basis for responsive web design: web
       interfaces that change with the size (and
       orientation) of the device.




189
How do they work?
      Through media queries, the browser is served
        different styles or stylesheets based on the
        dimensions and the device.

      The @media construct allows style sheet
        rules for various media in the same style
        sheet.

      An @media rule specifies the target media
       types (separated by commas) of a set of
       statements (delimited by curly braces).
190
Simple @media rule examples
      @media print {
         body { font-size: 10pt }
       }

       @media screen {
         body { font-size: 13px }
       }

       @media screen, print {
         body { line-height: 1.2 }
       }
191
@media queries
      Example:
      /* Smartphones (portrait and landscape) -
        ---------- */
      @media only screen
      and (min-device-width : 320px)
      and (max-device-width : 480px)
      {
      /* Styles */
      }




192
@media queries: Browser compatibility
      Yep                      Nope

      •   IE 9                 • IE 8, 7, 6
      •   Opera 9.5+           • Safari 2
      •   Opera Mobile         • Firefox 1, 2
      •   Safari 3+
      •   Firefox 3.5+
      •   Chrome




193
Css3-mediaqueries.js




        http://code.google.com/p/css3-mediaqueries-js/
194
Responsive design inspiration




195                            Mediaqueri.es
Resources: @media queries
      • http://www.delicious.com/denisejacobs/
        media-queries




196
5 Steps

197
1) Plan the design(s)




198            http://jeremypalford.com/arch-journal/responsive-web-design-sketch-sheets
Plan the design(s)
      • Need to plan out 3-4 iterations of a page
        design for each resolution/device instead
        of just one




199
Calculate




200
Calculate
      • You need to know dimensions of page
        elements to be able to calculate
        proportional relationship of size and
        margins

      • The Golden Formula:

               target ÷ context
                    = result
201
Target, context, and results




202
3) Determine the breaking points




203                 http://www.slideshare.net/yiibu/pragmatic-responsive-design
Some standard sizes to shoot for
      • 320 px: smart phones in portrait mode
      • 480 px: smart phones in landscape mode
      • 600 px: smaller tablets like the Kindle (600
        x 800) or Nook (600 x 1024)
      • 768 px: tablet in portrait
      • 1024 px: tablet in landscape and netbooks
      • 1200 px: low end for widescreen displays
      • 1600 px: widescreen displays


204
4) Add media queries




205
Hardboiled’s @media queries: Smartphone
      /* Smartphones (portrait and landscape) ----------- */
      @media only screen
      and (min-device-width : 320px)
      and (max-device-width : 480px) {
      /* Styles */
      }

      /* Smartphones (landscape) ----------- */
      @media only screen
      and (min-width : 321px) {
      /* Styles */
      }

      /* Smartphones (portrait) ----------- */
      @media only screen
      and (max-width : 320px) {
      /* Styles */
      }


206          http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries/
Hardboiled’s @media queries: iPad
      /* iPads (portrait and landscape) ----------- */
      @media only screen
      and (min-device-width : 768px)
      and (max-device-width : 1024px) {
      /* Styles */
      }

      /* iPads (landscape) ----------- */
      @media only screen
      and (min-device-width : 768px)
      and (max-device-width : 1024px)
      and (orientation : landscape) {
      /* Styles */
      }

      /* iPads (portrait) ----------- */
      @media only screen
      and (min-device-width : 768px)
      and (max-device-width : 1024px)
      and (orientation : portrait) {
      /* Styles */
      }

207           http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries/
Hardboiled’s @media queries: Other
      /* Desktops and laptops ----------- */
      @media only screen
      and (min-width : 1224px) {
      /* Styles */
      }

      /* Large screens ----------- */
      @media only screen
      and (min-width : 1824px) {
      /* Styles */
      }

      /* iPhone 4 ----------- */
      @media
      only screen and (-webkit-min-device-pixel-ratio : 1.5),
      only screen and (min-device-pixel-ratio : 1.5) {
      /* Styles */
      }


208          http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries/
5) Test & Tweak




209
Testing, testing, 1-2-3
      • Get the design to code and prototype as
        soon as possible

      • Test breaking points

      • Make adjustments




210
Voilà!




211
The End?

212
Today




213
Put yourself into




214
Tomorrow




215
This is just the beginning!
      My Delicious links are HUGE compendia of all
       things related to CSS3, updated as I find
       new articles, resources and tools!

      http://delicious.com/denisejacobs/css3

      http://delicious.com/denisejacobs/
      css3training


216
Article-lations

217
On Netmagzine.com




http://www.netmagazine.com/features/   http://www.netmagazine.com/features/
    top-10-css3-techniques                21-top-tools-responsive-web-design
218
A library of
       resources

219   http://upload.wikimedia.org/wikipedia/commons/e/e2/New_York_State_Library_1900.jpg
CSS3, hot off the presses!




             The Book of CSS3
220          by Peter Gasston
Project-based CSS3




            Stunning CSS3
221
        by Zoe Mikely Gillenwater
CSS3 Condensed and Explained




             CSS3 For Web Designers
222
                by Dan Cederholm
The book on Responsive Web Design




              Responsive Web Design
                 by Ethan Marcotte
223
CSS3 and Media Queries




          Hardboiled Web Design
224           by Andy Clarke
Flexible Layouts




        Flexible Web Design
225
      by Zoe Mickley Gillenwater
Proactive coding & graceful degradation




             CssDetectiveGuide.com
226
Holistic Web Design




      Interact with Web Standards: A Holistic Approach to
                           Web Design
227
Where to find me:
       DeniseJacobs.com

      denise@denisejacobs.com

      twitter.com/denisejacobs

      slideshare.net/denisejacobs

              Text 50500
             denisejacobs
228
Thank you!




229      http://www.flickr.com/photos/27620885@N02/2609974180/

Weitere ähnliche Inhalte

Was ist angesagt?

New Elements & Features in CSS3
New Elements & Features in CSS3New Elements & Features in CSS3
New Elements & Features in CSS3Jamshid Hashimi
 
Rockstar Graphics with HTML5
Rockstar Graphics with HTML5Rockstar Graphics with HTML5
Rockstar Graphics with HTML5Dave Balmer
 
From Shabby to Chic
From Shabby to ChicFrom Shabby to Chic
From Shabby to ChicRichard Bair
 
10 Advanced CSS Techniques (You Wish You Knew More About)
10 Advanced CSS Techniques (You Wish You Knew More About)10 Advanced CSS Techniques (You Wish You Knew More About)
10 Advanced CSS Techniques (You Wish You Knew More About)Emily Lewis
 
[Worskhop Summits] CSS3 Workshop
[Worskhop Summits] CSS3 Workshop[Worskhop Summits] CSS3 Workshop
[Worskhop Summits] CSS3 WorkshopChristopher Schmitt
 
CSS3 for web designer - How to design a visually appealing website
CSS3 for web designer - How to design a visually appealing websiteCSS3 for web designer - How to design a visually appealing website
CSS3 for web designer - How to design a visually appealing websiteMario Hernandez
 
Css for Development
Css for DevelopmentCss for Development
Css for Developmenttsengsite
 
Vector Graphics on the Web: SVG, Canvas, CSS3
Vector Graphics on the Web: SVG, Canvas, CSS3Vector Graphics on the Web: SVG, Canvas, CSS3
Vector Graphics on the Web: SVG, Canvas, CSS3Pascal Rettig
 
SVG For Web Designers (and Developers)
SVG For Web Designers (and Developers) SVG For Web Designers (and Developers)
SVG For Web Designers (and Developers) Sara Soueidan
 
Sara Soueidan: Styling and Animating Scalable Vector Graphics with CSS [CSSCo...
Sara Soueidan: Styling and Animating Scalable Vector Graphics with CSS [CSSCo...Sara Soueidan: Styling and Animating Scalable Vector Graphics with CSS [CSSCo...
Sara Soueidan: Styling and Animating Scalable Vector Graphics with CSS [CSSCo...Guillaume Kossi
 
Dive Into HTML5
Dive Into HTML5Dive Into HTML5
Dive Into HTML5Doris Chen
 
CSS - OOCSS, SMACSS and more
CSS - OOCSS, SMACSS and moreCSS - OOCSS, SMACSS and more
CSS - OOCSS, SMACSS and moreRuss Weakley
 
DojoX GFX Keynote Eugene Lazutkin SVG Open 2007
DojoX GFX Keynote Eugene Lazutkin SVG Open 2007DojoX GFX Keynote Eugene Lazutkin SVG Open 2007
DojoX GFX Keynote Eugene Lazutkin SVG Open 2007Eugene Lazutkin
 

Was ist angesagt? (20)

Css 3
Css 3Css 3
Css 3
 
Css 3
Css 3Css 3
Css 3
 
Css3
Css3Css3
Css3
 
New Elements & Features in CSS3
New Elements & Features in CSS3New Elements & Features in CSS3
New Elements & Features in CSS3
 
Html5 more than just html5 v final
Html5  more than just html5 v finalHtml5  more than just html5 v final
Html5 more than just html5 v final
 
Rockstar Graphics with HTML5
Rockstar Graphics with HTML5Rockstar Graphics with HTML5
Rockstar Graphics with HTML5
 
CSS and CSS3
CSS and CSS3CSS and CSS3
CSS and CSS3
 
From Shabby to Chic
From Shabby to ChicFrom Shabby to Chic
From Shabby to Chic
 
10 Advanced CSS Techniques (You Wish You Knew More About)
10 Advanced CSS Techniques (You Wish You Knew More About)10 Advanced CSS Techniques (You Wish You Knew More About)
10 Advanced CSS Techniques (You Wish You Knew More About)
 
Next generation Graphics: SVG
Next generation Graphics: SVGNext generation Graphics: SVG
Next generation Graphics: SVG
 
[Worskhop Summits] CSS3 Workshop
[Worskhop Summits] CSS3 Workshop[Worskhop Summits] CSS3 Workshop
[Worskhop Summits] CSS3 Workshop
 
CSS3 for web designer - How to design a visually appealing website
CSS3 for web designer - How to design a visually appealing websiteCSS3 for web designer - How to design a visually appealing website
CSS3 for web designer - How to design a visually appealing website
 
Think Vitamin CSS
Think Vitamin CSSThink Vitamin CSS
Think Vitamin CSS
 
Css for Development
Css for DevelopmentCss for Development
Css for Development
 
Vector Graphics on the Web: SVG, Canvas, CSS3
Vector Graphics on the Web: SVG, Canvas, CSS3Vector Graphics on the Web: SVG, Canvas, CSS3
Vector Graphics on the Web: SVG, Canvas, CSS3
 
SVG For Web Designers (and Developers)
SVG For Web Designers (and Developers) SVG For Web Designers (and Developers)
SVG For Web Designers (and Developers)
 
Sara Soueidan: Styling and Animating Scalable Vector Graphics with CSS [CSSCo...
Sara Soueidan: Styling and Animating Scalable Vector Graphics with CSS [CSSCo...Sara Soueidan: Styling and Animating Scalable Vector Graphics with CSS [CSSCo...
Sara Soueidan: Styling and Animating Scalable Vector Graphics with CSS [CSSCo...
 
Dive Into HTML5
Dive Into HTML5Dive Into HTML5
Dive Into HTML5
 
CSS - OOCSS, SMACSS and more
CSS - OOCSS, SMACSS and moreCSS - OOCSS, SMACSS and more
CSS - OOCSS, SMACSS and more
 
DojoX GFX Keynote Eugene Lazutkin SVG Open 2007
DojoX GFX Keynote Eugene Lazutkin SVG Open 2007DojoX GFX Keynote Eugene Lazutkin SVG Open 2007
DojoX GFX Keynote Eugene Lazutkin SVG Open 2007
 

Andere mochten auch

Manuel Martinez
Manuel MartinezManuel Martinez
Manuel Martinezlavelada
 
I Giovani Di Federmanager 2008
I Giovani Di Federmanager 2008I Giovani Di Federmanager 2008
I Giovani Di Federmanager 2008guest1c2ad5
 
Banish Your Inner Critic - Cascade SF
Banish Your Inner Critic - Cascade SFBanish Your Inner Critic - Cascade SF
Banish Your Inner Critic - Cascade SFDenise Jacobs
 
Creativity revolution - SXSW Interactive 2014
Creativity revolution -  SXSW Interactive 2014Creativity revolution -  SXSW Interactive 2014
Creativity revolution - SXSW Interactive 2014Denise Jacobs
 
Natural River Bed - Dry
Natural River Bed - DryNatural River Bed - Dry
Natural River Bed - DryDaniel Peabody
 
Poesiamodernainglesa 090516190151 Phpapp02
Poesiamodernainglesa 090516190151 Phpapp02Poesiamodernainglesa 090516190151 Phpapp02
Poesiamodernainglesa 090516190151 Phpapp02Ana Cristina sousa
 
Advanced 02 review m t test
Advanced 02  review m t testAdvanced 02  review m t test
Advanced 02 review m t testGilmar Mattos
 
IÑAKI VAZQUEZ
IÑAKI VAZQUEZIÑAKI VAZQUEZ
IÑAKI VAZQUEZlavelada
 
IB Learner Profile
IB Learner ProfileIB Learner Profile
IB Learner Profileastello2015
 
The Creativity (R)Evolution - UX Week 2014
The Creativity (R)Evolution -  UX Week 2014The Creativity (R)Evolution -  UX Week 2014
The Creativity (R)Evolution - UX Week 2014Denise Jacobs
 
Hop on for a quick tour of the streets of Australia
Hop on for a quick tour of the streets of AustraliaHop on for a quick tour of the streets of Australia
Hop on for a quick tour of the streets of AustraliaAdam Coutts
 
Ecce R Unit 1 Past Tenes
Ecce R Unit 1 Past TenesEcce R Unit 1 Past Tenes
Ecce R Unit 1 Past TenesGilmar Mattos
 
10 doe-het-zelf tips om aan e-commerce te doen
10 doe-het-zelf tips om aan e-commerce te doen10 doe-het-zelf tips om aan e-commerce te doen
10 doe-het-zelf tips om aan e-commerce te doenCombell NV
 
Commercial Investments
Commercial InvestmentsCommercial Investments
Commercial InvestmentsMichael Fisher
 
The Graceful Degradation of CSS3
The Graceful Degradation of CSS3The Graceful Degradation of CSS3
The Graceful Degradation of CSS3Denise Jacobs
 
Summarizing & Notetaking
Summarizing & NotetakingSummarizing & Notetaking
Summarizing & Notetakingguesta0a9e13
 
AMA Using Blogging As A Weapon
AMA  Using Blogging As A WeaponAMA  Using Blogging As A Weapon
AMA Using Blogging As A WeaponTom Williams
 
InnoGage EduWeb Conference UGC - Tapping The Power
InnoGage   EduWeb Conference UGC - Tapping The PowerInnoGage   EduWeb Conference UGC - Tapping The Power
InnoGage EduWeb Conference UGC - Tapping The PowerTom Williams
 

Andere mochten auch (20)

Manuel Martinez
Manuel MartinezManuel Martinez
Manuel Martinez
 
I Giovani Di Federmanager 2008
I Giovani Di Federmanager 2008I Giovani Di Federmanager 2008
I Giovani Di Federmanager 2008
 
Banish Your Inner Critic - Cascade SF
Banish Your Inner Critic - Cascade SFBanish Your Inner Critic - Cascade SF
Banish Your Inner Critic - Cascade SF
 
Creativity revolution - SXSW Interactive 2014
Creativity revolution -  SXSW Interactive 2014Creativity revolution -  SXSW Interactive 2014
Creativity revolution - SXSW Interactive 2014
 
Natural River Bed - Dry
Natural River Bed - DryNatural River Bed - Dry
Natural River Bed - Dry
 
Poesiamodernainglesa 090516190151 Phpapp02
Poesiamodernainglesa 090516190151 Phpapp02Poesiamodernainglesa 090516190151 Phpapp02
Poesiamodernainglesa 090516190151 Phpapp02
 
Advanced 02 review m t test
Advanced 02  review m t testAdvanced 02  review m t test
Advanced 02 review m t test
 
IÑAKI VAZQUEZ
IÑAKI VAZQUEZIÑAKI VAZQUEZ
IÑAKI VAZQUEZ
 
Milieu
MilieuMilieu
Milieu
 
IB Learner Profile
IB Learner ProfileIB Learner Profile
IB Learner Profile
 
The Creativity (R)Evolution - UX Week 2014
The Creativity (R)Evolution -  UX Week 2014The Creativity (R)Evolution -  UX Week 2014
The Creativity (R)Evolution - UX Week 2014
 
Hop on for a quick tour of the streets of Australia
Hop on for a quick tour of the streets of AustraliaHop on for a quick tour of the streets of Australia
Hop on for a quick tour of the streets of Australia
 
Ecce R Unit 1 Past Tenes
Ecce R Unit 1 Past TenesEcce R Unit 1 Past Tenes
Ecce R Unit 1 Past Tenes
 
10 doe-het-zelf tips om aan e-commerce te doen
10 doe-het-zelf tips om aan e-commerce te doen10 doe-het-zelf tips om aan e-commerce te doen
10 doe-het-zelf tips om aan e-commerce te doen
 
Commercial Investments
Commercial InvestmentsCommercial Investments
Commercial Investments
 
The Graceful Degradation of CSS3
The Graceful Degradation of CSS3The Graceful Degradation of CSS3
The Graceful Degradation of CSS3
 
Summarizing & Notetaking
Summarizing & NotetakingSummarizing & Notetaking
Summarizing & Notetaking
 
AMA Using Blogging As A Weapon
AMA  Using Blogging As A WeaponAMA  Using Blogging As A Weapon
AMA Using Blogging As A Weapon
 
A Piece Of Sky
A Piece Of SkyA Piece Of Sky
A Piece Of Sky
 
InnoGage EduWeb Conference UGC - Tapping The Power
InnoGage   EduWeb Conference UGC - Tapping The PowerInnoGage   EduWeb Conference UGC - Tapping The Power
InnoGage EduWeb Conference UGC - Tapping The Power
 

Ähnlich wie Simply Responsive CSS3

CSS3: Are you experienced?
CSS3: Are you experienced?CSS3: Are you experienced?
CSS3: Are you experienced?Denise Jacobs
 
Html5 Whats around the bend
Html5 Whats around the bendHtml5 Whats around the bend
Html5 Whats around the bendRaj Lal
 
Advanced CSS Troubleshooting
Advanced CSS TroubleshootingAdvanced CSS Troubleshooting
Advanced CSS TroubleshootingDenise Jacobs
 
A brief look at CSS3 techniques by Aaron Rodgers, Web Designer @ vzaar.com
A brief look at CSS3 techniques by Aaron Rodgers, Web Designer @ vzaar.comA brief look at CSS3 techniques by Aaron Rodgers, Web Designer @ vzaar.com
A brief look at CSS3 techniques by Aaron Rodgers, Web Designer @ vzaar.comapplicake
 
Web Design Trends 2010 - What Is CSS3 All About?
Web Design Trends 2010 - What Is CSS3 All About?Web Design Trends 2010 - What Is CSS3 All About?
Web Design Trends 2010 - What Is CSS3 All About?Alexandra Lo Cascio
 
Trendsetting: Web Design and Beyond
Trendsetting: Web Design and BeyondTrendsetting: Web Design and Beyond
Trendsetting: Web Design and BeyondAndy Stratton
 
CSS Framework + Progressive Enhacements
CSS Framework + Progressive EnhacementsCSS Framework + Progressive Enhacements
CSS Framework + Progressive EnhacementsMario Hernandez
 
Website trends 2012 presentation
Website trends 2012 presentationWebsite trends 2012 presentation
Website trends 2012 presentationFresh_Egg
 
Advanced sass/compass
Advanced sass/compassAdvanced sass/compass
Advanced sass/compassNick Cooley
 
Ease into HTML5 and CSS3
Ease into HTML5 and CSS3Ease into HTML5 and CSS3
Ease into HTML5 and CSS3Brian Moon
 
Adobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + FireworksAdobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + FireworksNathan Smith
 
A Responsive Design Case Study - What We Did Wrong Building ResponsiveDesign....
A Responsive Design Case Study - What We Did Wrong Building ResponsiveDesign....A Responsive Design Case Study - What We Did Wrong Building ResponsiveDesign....
A Responsive Design Case Study - What We Did Wrong Building ResponsiveDesign....Aidan Foster
 
Web design-workflow
Web design-workflowWeb design-workflow
Web design-workflowPeter Kaizer
 
[WebVisions 2010] CSS3 Workshop (Afternoon)
[WebVisions 2010] CSS3 Workshop (Afternoon)[WebVisions 2010] CSS3 Workshop (Afternoon)
[WebVisions 2010] CSS3 Workshop (Afternoon)Christopher Schmitt
 

Ähnlich wie Simply Responsive CSS3 (20)

Intro to CSS3
Intro to CSS3Intro to CSS3
Intro to CSS3
 
CSS3: Are you experienced?
CSS3: Are you experienced?CSS3: Are you experienced?
CSS3: Are you experienced?
 
Html5 Whats around the bend
Html5 Whats around the bendHtml5 Whats around the bend
Html5 Whats around the bend
 
Advanced CSS Troubleshooting
Advanced CSS TroubleshootingAdvanced CSS Troubleshooting
Advanced CSS Troubleshooting
 
Sass compass
Sass compassSass compass
Sass compass
 
A brief look at CSS3 techniques by Aaron Rodgers, Web Designer @ vzaar.com
A brief look at CSS3 techniques by Aaron Rodgers, Web Designer @ vzaar.comA brief look at CSS3 techniques by Aaron Rodgers, Web Designer @ vzaar.com
A brief look at CSS3 techniques by Aaron Rodgers, Web Designer @ vzaar.com
 
Web Design Trends 2010 - What Is CSS3 All About?
Web Design Trends 2010 - What Is CSS3 All About?Web Design Trends 2010 - What Is CSS3 All About?
Web Design Trends 2010 - What Is CSS3 All About?
 
Trendsetting: Web Design and Beyond
Trendsetting: Web Design and BeyondTrendsetting: Web Design and Beyond
Trendsetting: Web Design and Beyond
 
CSS Framework + Progressive Enhacements
CSS Framework + Progressive EnhacementsCSS Framework + Progressive Enhacements
CSS Framework + Progressive Enhacements
 
Website trends 2012 presentation
Website trends 2012 presentationWebsite trends 2012 presentation
Website trends 2012 presentation
 
CSS3 3D Workshop
CSS3 3D WorkshopCSS3 3D Workshop
CSS3 3D Workshop
 
Advanced sass/compass
Advanced sass/compassAdvanced sass/compass
Advanced sass/compass
 
Ease into HTML5 and CSS3
Ease into HTML5 and CSS3Ease into HTML5 and CSS3
Ease into HTML5 and CSS3
 
Adobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + FireworksAdobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + Fireworks
 
The Future of CSS
The Future of CSSThe Future of CSS
The Future of CSS
 
A Responsive Design Case Study - What We Did Wrong Building ResponsiveDesign....
A Responsive Design Case Study - What We Did Wrong Building ResponsiveDesign....A Responsive Design Case Study - What We Did Wrong Building ResponsiveDesign....
A Responsive Design Case Study - What We Did Wrong Building ResponsiveDesign....
 
Web design-workflow
Web design-workflowWeb design-workflow
Web design-workflow
 
[WebVisions 2010] CSS3 Workshop (Afternoon)
[WebVisions 2010] CSS3 Workshop (Afternoon)[WebVisions 2010] CSS3 Workshop (Afternoon)
[WebVisions 2010] CSS3 Workshop (Afternoon)
 
CSS Frameworks
CSS FrameworksCSS Frameworks
CSS Frameworks
 
Http _css-tricks
Http  _css-tricksHttp  _css-tricks
Http _css-tricks
 

Mehr von Denise Jacobs

Amplify-U: Cultivating Career Confidence Through Banishing Your Inner Critic ...
Amplify-U: Cultivating Career Confidence Through Banishing Your Inner Critic ...Amplify-U: Cultivating Career Confidence Through Banishing Your Inner Critic ...
Amplify-U: Cultivating Career Confidence Through Banishing Your Inner Critic ...Denise Jacobs
 
Banish Your Inner Critic: Transform Self-Talk - IABC Southern Region Conferen...
Banish Your Inner Critic: Transform Self-Talk - IABC Southern Region Conferen...Banish Your Inner Critic: Transform Self-Talk - IABC Southern Region Conferen...
Banish Your Inner Critic: Transform Self-Talk - IABC Southern Region Conferen...Denise Jacobs
 
Banish Your Inner Critic: Transform Self-Talk and Own Your Expertise - UX Hus...
Banish Your Inner Critic: Transform Self-Talk and Own Your Expertise - UX Hus...Banish Your Inner Critic: Transform Self-Talk and Own Your Expertise - UX Hus...
Banish Your Inner Critic: Transform Self-Talk and Own Your Expertise - UX Hus...Denise Jacobs
 
How to Have Difficult Conversations With Confidence - MTP Digital 2020
How to Have Difficult Conversations With Confidence -  MTP Digital 2020How to Have Difficult Conversations With Confidence -  MTP Digital 2020
How to Have Difficult Conversations With Confidence - MTP Digital 2020Denise Jacobs
 
Overcome Self-Doubt to Amplify Your Impact and Create a Better World - GSLA 202
Overcome Self-Doubt to Amplify Your Impact and Create a Better World  - GSLA 202Overcome Self-Doubt to Amplify Your Impact and Create a Better World  - GSLA 202
Overcome Self-Doubt to Amplify Your Impact and Create a Better World - GSLA 202Denise Jacobs
 
Banish Your Inner Critic: Reduce Anxiety - Nonprofit Storytelling Conference ...
Banish Your Inner Critic: Reduce Anxiety - Nonprofit Storytelling Conference ...Banish Your Inner Critic: Reduce Anxiety - Nonprofit Storytelling Conference ...
Banish Your Inner Critic: Reduce Anxiety - Nonprofit Storytelling Conference ...Denise Jacobs
 
Banish Your Inner Critic: Unblock Creativity and Amplify Your Impact - Produc...
Banish Your Inner Critic: Unblock Creativity and Amplify Your Impact - Produc...Banish Your Inner Critic: Unblock Creativity and Amplify Your Impact - Produc...
Banish Your Inner Critic: Unblock Creativity and Amplify Your Impact - Produc...Denise Jacobs
 
Banish Your Inner Critic: Transform Self-Talk and Own Your Expertise - Speake...
Banish Your Inner Critic: Transform Self-Talk and Own Your Expertise - Speake...Banish Your Inner Critic: Transform Self-Talk and Own Your Expertise - Speake...
Banish Your Inner Critic: Transform Self-Talk and Own Your Expertise - Speake...Denise Jacobs
 
Banish Your Inner Critic – Stanford HCI Group 2020
Banish Your Inner Critic – Stanford HCI Group 2020Banish Your Inner Critic – Stanford HCI Group 2020
Banish Your Inner Critic – Stanford HCI Group 2020Denise Jacobs
 
Banish Your Inner Critic: Reduce Anxiety and Unblock Creativity - Emergent Le...
Banish Your Inner Critic: Reduce Anxiety and Unblock Creativity - Emergent Le...Banish Your Inner Critic: Reduce Anxiety and Unblock Creativity - Emergent Le...
Banish Your Inner Critic: Reduce Anxiety and Unblock Creativity - Emergent Le...Denise Jacobs
 
Banish Your Inner Critic: Reduce anxiety and Unblock Creativity - SpeakAid 2020
Banish Your Inner Critic: Reduce anxiety and Unblock Creativity - SpeakAid 2020Banish Your Inner Critic: Reduce anxiety and Unblock Creativity - SpeakAid 2020
Banish Your Inner Critic: Reduce anxiety and Unblock Creativity - SpeakAid 2020Denise Jacobs
 
Banish Your Inner Critic: Elevate Performance - Nonprofit Storytelling Confer...
Banish Your Inner Critic: Elevate Performance - Nonprofit Storytelling Confer...Banish Your Inner Critic: Elevate Performance - Nonprofit Storytelling Confer...
Banish Your Inner Critic: Elevate Performance - Nonprofit Storytelling Confer...Denise Jacobs
 
Co-Create: Creating Better Together - Clarity Conference 2019
Co-Create: Creating Better Together - Clarity Conference 2019Co-Create: Creating Better Together - Clarity Conference 2019
Co-Create: Creating Better Together - Clarity Conference 2019Denise Jacobs
 
Banish Your Inner Critic: Amplify Your Impact - Mind The Product SF 2019
Banish Your Inner Critic: Amplify Your Impact - Mind The Product SF 2019Banish Your Inner Critic: Amplify Your Impact - Mind The Product SF 2019
Banish Your Inner Critic: Amplify Your Impact - Mind The Product SF 2019Denise Jacobs
 
Step-up: Unleash Your Creative (Super) Power - D3 Expo 2019
Step-up: Unleash Your Creative (Super) Power - D3 Expo 2019Step-up: Unleash Your Creative (Super) Power - D3 Expo 2019
Step-up: Unleash Your Creative (Super) Power - D3 Expo 2019Denise Jacobs
 
Banish Your Inner Critic: Hack Your Productivity and Elevate Performance
Banish Your Inner Critic: Hack Your Productivity and Elevate PerformanceBanish Your Inner Critic: Hack Your Productivity and Elevate Performance
Banish Your Inner Critic: Hack Your Productivity and Elevate PerformanceDenise Jacobs
 
Banish Your Inner Critic v2.0: Swipe Left! - Adobe Max 2018
Banish Your Inner Critic v2.0: Swipe Left!  - Adobe Max 2018Banish Your Inner Critic v2.0: Swipe Left!  - Adobe Max 2018
Banish Your Inner Critic v2.0: Swipe Left! - Adobe Max 2018Denise Jacobs
 
The Creativity (R)Evolution – CMX Summit 2018
The Creativity (R)Evolution – CMX Summit 2018The Creativity (R)Evolution – CMX Summit 2018
The Creativity (R)Evolution – CMX Summit 2018Denise Jacobs
 
Banish Your Inner Critic v2.0: Swipe Left! – IIBA Columbus 2018
Banish Your Inner Critic v2.0: Swipe Left! – IIBA Columbus 2018Banish Your Inner Critic v2.0: Swipe Left! – IIBA Columbus 2018
Banish Your Inner Critic v2.0: Swipe Left! – IIBA Columbus 2018Denise Jacobs
 
Co-Create: Creating Better Together - DevCamp Brazil 2018
Co-Create: Creating Better Together - DevCamp Brazil 2018Co-Create: Creating Better Together - DevCamp Brazil 2018
Co-Create: Creating Better Together - DevCamp Brazil 2018Denise Jacobs
 

Mehr von Denise Jacobs (20)

Amplify-U: Cultivating Career Confidence Through Banishing Your Inner Critic ...
Amplify-U: Cultivating Career Confidence Through Banishing Your Inner Critic ...Amplify-U: Cultivating Career Confidence Through Banishing Your Inner Critic ...
Amplify-U: Cultivating Career Confidence Through Banishing Your Inner Critic ...
 
Banish Your Inner Critic: Transform Self-Talk - IABC Southern Region Conferen...
Banish Your Inner Critic: Transform Self-Talk - IABC Southern Region Conferen...Banish Your Inner Critic: Transform Self-Talk - IABC Southern Region Conferen...
Banish Your Inner Critic: Transform Self-Talk - IABC Southern Region Conferen...
 
Banish Your Inner Critic: Transform Self-Talk and Own Your Expertise - UX Hus...
Banish Your Inner Critic: Transform Self-Talk and Own Your Expertise - UX Hus...Banish Your Inner Critic: Transform Self-Talk and Own Your Expertise - UX Hus...
Banish Your Inner Critic: Transform Self-Talk and Own Your Expertise - UX Hus...
 
How to Have Difficult Conversations With Confidence - MTP Digital 2020
How to Have Difficult Conversations With Confidence -  MTP Digital 2020How to Have Difficult Conversations With Confidence -  MTP Digital 2020
How to Have Difficult Conversations With Confidence - MTP Digital 2020
 
Overcome Self-Doubt to Amplify Your Impact and Create a Better World - GSLA 202
Overcome Self-Doubt to Amplify Your Impact and Create a Better World  - GSLA 202Overcome Self-Doubt to Amplify Your Impact and Create a Better World  - GSLA 202
Overcome Self-Doubt to Amplify Your Impact and Create a Better World - GSLA 202
 
Banish Your Inner Critic: Reduce Anxiety - Nonprofit Storytelling Conference ...
Banish Your Inner Critic: Reduce Anxiety - Nonprofit Storytelling Conference ...Banish Your Inner Critic: Reduce Anxiety - Nonprofit Storytelling Conference ...
Banish Your Inner Critic: Reduce Anxiety - Nonprofit Storytelling Conference ...
 
Banish Your Inner Critic: Unblock Creativity and Amplify Your Impact - Produc...
Banish Your Inner Critic: Unblock Creativity and Amplify Your Impact - Produc...Banish Your Inner Critic: Unblock Creativity and Amplify Your Impact - Produc...
Banish Your Inner Critic: Unblock Creativity and Amplify Your Impact - Produc...
 
Banish Your Inner Critic: Transform Self-Talk and Own Your Expertise - Speake...
Banish Your Inner Critic: Transform Self-Talk and Own Your Expertise - Speake...Banish Your Inner Critic: Transform Self-Talk and Own Your Expertise - Speake...
Banish Your Inner Critic: Transform Self-Talk and Own Your Expertise - Speake...
 
Banish Your Inner Critic – Stanford HCI Group 2020
Banish Your Inner Critic – Stanford HCI Group 2020Banish Your Inner Critic – Stanford HCI Group 2020
Banish Your Inner Critic – Stanford HCI Group 2020
 
Banish Your Inner Critic: Reduce Anxiety and Unblock Creativity - Emergent Le...
Banish Your Inner Critic: Reduce Anxiety and Unblock Creativity - Emergent Le...Banish Your Inner Critic: Reduce Anxiety and Unblock Creativity - Emergent Le...
Banish Your Inner Critic: Reduce Anxiety and Unblock Creativity - Emergent Le...
 
Banish Your Inner Critic: Reduce anxiety and Unblock Creativity - SpeakAid 2020
Banish Your Inner Critic: Reduce anxiety and Unblock Creativity - SpeakAid 2020Banish Your Inner Critic: Reduce anxiety and Unblock Creativity - SpeakAid 2020
Banish Your Inner Critic: Reduce anxiety and Unblock Creativity - SpeakAid 2020
 
Banish Your Inner Critic: Elevate Performance - Nonprofit Storytelling Confer...
Banish Your Inner Critic: Elevate Performance - Nonprofit Storytelling Confer...Banish Your Inner Critic: Elevate Performance - Nonprofit Storytelling Confer...
Banish Your Inner Critic: Elevate Performance - Nonprofit Storytelling Confer...
 
Co-Create: Creating Better Together - Clarity Conference 2019
Co-Create: Creating Better Together - Clarity Conference 2019Co-Create: Creating Better Together - Clarity Conference 2019
Co-Create: Creating Better Together - Clarity Conference 2019
 
Banish Your Inner Critic: Amplify Your Impact - Mind The Product SF 2019
Banish Your Inner Critic: Amplify Your Impact - Mind The Product SF 2019Banish Your Inner Critic: Amplify Your Impact - Mind The Product SF 2019
Banish Your Inner Critic: Amplify Your Impact - Mind The Product SF 2019
 
Step-up: Unleash Your Creative (Super) Power - D3 Expo 2019
Step-up: Unleash Your Creative (Super) Power - D3 Expo 2019Step-up: Unleash Your Creative (Super) Power - D3 Expo 2019
Step-up: Unleash Your Creative (Super) Power - D3 Expo 2019
 
Banish Your Inner Critic: Hack Your Productivity and Elevate Performance
Banish Your Inner Critic: Hack Your Productivity and Elevate PerformanceBanish Your Inner Critic: Hack Your Productivity and Elevate Performance
Banish Your Inner Critic: Hack Your Productivity and Elevate Performance
 
Banish Your Inner Critic v2.0: Swipe Left! - Adobe Max 2018
Banish Your Inner Critic v2.0: Swipe Left!  - Adobe Max 2018Banish Your Inner Critic v2.0: Swipe Left!  - Adobe Max 2018
Banish Your Inner Critic v2.0: Swipe Left! - Adobe Max 2018
 
The Creativity (R)Evolution – CMX Summit 2018
The Creativity (R)Evolution – CMX Summit 2018The Creativity (R)Evolution – CMX Summit 2018
The Creativity (R)Evolution – CMX Summit 2018
 
Banish Your Inner Critic v2.0: Swipe Left! – IIBA Columbus 2018
Banish Your Inner Critic v2.0: Swipe Left! – IIBA Columbus 2018Banish Your Inner Critic v2.0: Swipe Left! – IIBA Columbus 2018
Banish Your Inner Critic v2.0: Swipe Left! – IIBA Columbus 2018
 
Co-Create: Creating Better Together - DevCamp Brazil 2018
Co-Create: Creating Better Together - DevCamp Brazil 2018Co-Create: Creating Better Together - DevCamp Brazil 2018
Co-Create: Creating Better Together - DevCamp Brazil 2018
 

Kürzlich hochgeladen

Cloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial DataCloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial DataSafe Software
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
Babel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptxBabel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptxYounusS2
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
Things you didn't know you can use in your Salesforce
Things you didn't know you can use in your SalesforceThings you didn't know you can use in your Salesforce
Things you didn't know you can use in your SalesforceMartin Humpolec
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.francesco barbera
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfDaniel Santiago Silva Capera
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
Spring24-Release Overview - Wellingtion User Group-1.pdf
Spring24-Release Overview - Wellingtion User Group-1.pdfSpring24-Release Overview - Wellingtion User Group-1.pdf
Spring24-Release Overview - Wellingtion User Group-1.pdfAnna Loughnan Colquhoun
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 

Kürzlich hochgeladen (20)

Cloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial DataCloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial Data
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
Babel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptxBabel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptx
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
Things you didn't know you can use in your Salesforce
Things you didn't know you can use in your SalesforceThings you didn't know you can use in your Salesforce
Things you didn't know you can use in your Salesforce
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
Spring24-Release Overview - Wellingtion User Group-1.pdf
Spring24-Release Overview - Wellingtion User Group-1.pdfSpring24-Release Overview - Wellingtion User Group-1.pdf
Spring24-Release Overview - Wellingtion User Group-1.pdf
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 

Simply Responsive CSS3

  • 1. Simply Responsive CSS3 Denise R. Jacobs // 1 ParisWeb// le 15 October 2011 //
  • 2. Simple & Responsive Tweets Who I am: @denisejacobs This fine event: @parisweb #parisweb I’m talking about: #css3sr 2
  • 3. A little about me Denise R. Jacobs is an author, speaker, design thinker, and educator. She is the author of The CSS Detective Guide, and is a co-author for InterAct with Web Standards: A Holistic Approach to Web Design. She is a Consultant Web Design Trainer and Creativity Evangelist based in Miami, Florida. 3 CSSDetectiveGuide.com & InterActWithWebStandards.com
  • 8. Start here… 1. Know Your CSS3 • Getting started • What’s new • Rules of the road • Helping tools and scripts • Properties • Standard effects • Advanced effects • Selectors 8
  • 9. …Continue here 2. Get Responsive • Shift your brain • Mobile first • Watch out • 3 components • Flexible grid • Flexible images • Media queries 9
  • 10. …And end here! 2. Becoming Responsive (cont’d) • 4 Steps • Plan your design • Crunch the numbers • Determine the breaking points • Add media queries 3. Resources 10
  • 11. What’s New in CSS3 11
  • 12. What’s New in CSS3? CSS3 is the third generation of the CSS specification recommendations from the W3C. In CSS3 there are new selectors, pseudo- elements and classes, properties, and values specifically created to answer the needs and solve the problems of modern web design and development. 12
  • 13. CSS3 Modularity CSS3 has been broken up into different unique modules. This means is that, for example, the particular CSS properties and values for layout is grouped into one specific module. 13
  • 14. CSS3 Modularity: Benefits • Browser producers can now implement CSS3 module by module • Speeds up the browser implementation process • Encourages innovation 14
  • 15. The CSS3 Modules • Template Layout • Values and Units • Backgrounds and Borders • Web Fonts • Ruby • Behavioral Extensions to CSS • Basic User Interface • Line Layout • Basic Box Model • Flexible Box Layout • Grid Positioning • Image Values • Speech • 2D Transformations • Marquee • Multi-column Layout • Style Attribute Syntax • 3D Transformations • Cascading and Inheritance • Namespaces • Color • Transitions • Fonts • Animations • Text • View Module • Generated Content for Paged • Media Queries Media • Paged Media • Generated and Replaced • Selectors Content 15
  • 16. Resources: New in CSS3 http://www.w3.org/TR/tr-groups-all# tr_Cascading_Style_Sheets__CSS__ Working_Group 16
  • 17. Colors in CSS3: RGB • Regular RGB rgb(x, x, x): ex. rgb(255, 0, 0) • RBG with alpha-opacity rgba(x, x, x, y): An RGB value ex. rgba(255, 0, 0, 0.2) 17
  • 18. RGBA Color Alpha opacity: 0.0 = 0% = no opacity 1.0 = 100% = full opacity 18
  • 19. Colors in CSS3: HSL HSL stands for hue, saturation, and luminosity (lightness) • Regular HSL hsl(x%, x%, x%): ex. hsl(0, 100%, 50%) • HSL with alpha-opacity hsla(x%, x%, x%, y): ex. hsla(0, 100%, 50%, 0.5) 19
  • 20. HSL Color Wheel 0º – Red 60º – Yellow 120º – Green 180º – Cyan 240º – Blue 300º – Magenta 20
  • 21. HSL Color Picker Tool http://www.workwithcolor.com/hsl-color-picker-01.htm 21
  • 22. Getting Started with CSS3: The Rules of the Road 22 http://www.flickr.com/photos/ilike/3707503212/
  • 23. CSS3 Browser Compatibility 23 http://www.flickr.com/photos/sfllaw/222795669/
  • 24. The Scoop • Many properties are browser-specific, requiring vendor prefixes • Plus there is a standard property • There are syntax differences between browser-specific properties and the standard property • All of this causes an increase in the amount of CSS 24
  • 25. Code bloat in action Ideally: Reality: a.polaroid:active { a.polaroid:active { z-index: 999; z-index: 999; border-color: #6A6A6A; border-color: #6A6A6A; box-shadow: 15px 15px 20px -webkit-box-shadow: 15px rgba(0,0, 0, 0.4); 15px 20px rgba(0,0, 0, transform: rotate(0deg) 0.4); scale(1.05); -moz-box-shadow: 15px 15px } 20px rgba(0,0, 0, 0.4); box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4); -webkit-transform: rotate(0deg) scale(1.05); -moz-transform: rotate(0deg) scale(1.05); transform: rotate(0deg) scale(1.05); } 25
  • 27. None of the older IEs support CSS3 …as in “not any.” 6 7 8 27 http://www.flickr.com/photos/johnsnape/4258191545/
  • 28. IE9 now supports CSS3 …But still not as fully as the other browsers yet. 28
  • 29. Resources: IE9 CSS3 support http://msdn.microsoft.com/en- us/ie/ff468705.aspx#_Web_standards_sup port http://msdn.microsoft.com/en- us/library/cc351024%28v=vs.85%29.aspx http://www.impressivewebs.com/css3- support-ie9/ 29
  • 30. Tools you’ll need: 1. CSS3 Property browser support charts 2. CSS3 Selector browser support charts 3. CSS3 Specifications 4. All browsers to test in and/or cross-browser testers 30
  • 31. CSS3 Property browser support charts http://www.findmebyip.com/ litmus 31
  • 32. CSS3 Selector browser support charts http://www.standardista.com/css3/ css3-selector-browser-support 32
  • 33. The CSS3 Specifications The CSS3 Specifications are THE resource for finding out exactly is the intented behavior and use of any given property. http://www.w3.org/standards/techs/ css#w3c_all 33
  • 34. Cross-browser testers http://tredosoft.com/Multiple_IE http://crossbrowsertesting.com/ (paid) http://browsershots.org/ (free) 34
  • 35. CSS3 & Cross- browser Coding 35 http://www.flickr.com/photos/scfiasco/4490322916/
  • 36. The Goal: Code that works in all most browsers 36
  • 37. Not all browsers are created equal 37
  • 38. How can we achieve compatibility? 38 http://www.flickr.com/photos/barretthall/205175534/
  • 39. Steps to get as close as possible 1. Leverage source order 2. Filter it 3. Let tools do all of the work 39
  • 40. Leverage source order • Place default properties first • Place browser-specific properties ahead of standard properties • The standard properties will override the vendor’s when the standard is established. 40
  • 41. A Proper Stack .gradient { color: #fff; 41
  • 42. A Proper Stack .gradient { color: #fff; background: #aaaaaa url(gradient_slice.jpg) 0 0 x-repeat; /*fallback background color & image*/ 42
  • 43. A Proper Stack .gradient { color: #fff; background: #aaaaaa url(gradient_slice.jpg) 0 0 x-repeat; /*fallback background color & image*/ background-image: -moz-linear-gradient(top, #07407c, #aaaaaa); /* gradient for Mozilla */ 43
  • 44. A Proper Stack .gradient { color: #fff; background: #aaaaaa url(gradient_slice.jpg) 0 0 x-repeat; /*fallback background color & image*/ background-image: -moz-linear-gradient(top, #07407c, #aaaaaa); /* gradient for Mozilla */ background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #07407c),color- stop(1, #aaaaaa)); /* gradient for the Webkits */ 44
  • 45. A Proper Stack .gradient { color: #fff; background: #aaaaaa url(gradient_slice.jpg) 0 0 x-repeat; /*fallback background color & image*/ background-image: -moz-linear-gradient(top, #07407c, #aaaaaa); /* gradient for Mozilla */ background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #07407c),color- stop(1, #aaaaaa)); /* gradient for the Webkits */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(sta rtColorStr='#07407c', EndColorStr='#aaaaaa')"; /* filter for IE8 (& IE9) */ 45
  • 46. A Proper Stack .gradient { color: #fff; background: #aaaaaa url(gradient_slice.jpg) 0 0 x-repeat; /*fallback background color & image*/ background-image: -moz-linear-gradient(top, #07407c, #aaaaaa); /* gradient for Mozilla */ background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #07407c),color- stop(1, #aaaaaa)); /* gradient for the Webkits */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(sta rtColorStr='#07407c', EndColorStr='#aaaaaa')"; /* filter for IE8 (& IE9) */ filter: progid:DXImageTransform.Microsoft.gradient(star tColorStr='#07407c', EndColorStr='#aaaaaa'); } /* filter for IE7 and lower */ 46
  • 47. Apply a Filter • If you must have the effect in IE lt 8, such as alpha opacity, gradient, shadow, transitions etc. you could use a proprietary IE filter. • The -ms-filter attribute is an extension to CSS. This syntax will allow other CSS parsers to skip the value of this unknown property completely and safely. It also avoids future name clashes with other CSS parsers. • In IE 8 mode, filters must be prefixed with "-ms-" and the PROGID must be in single or double quotes to make sure IE 8 renders the filters properly. 47
  • 48. Filters: {Caveat Coder} • IE filters work, but are essentially hacks – IE filters are proprietary and thus not part of any standard specification, and never will be 48
  • 49. Resources: IE Filters Microsoft Visual Filters and Transitions Reference http://msdn.microsoft.com/en-us/library/ ms532853%28v=VS.85%29.aspx 49
  • 50. Let the tools do the work • We’ll talk about those next! 50
  • 51. CSS3 Tools 51 http://www.flickr.com/photos/johnsnape/4258191545/
  • 52. Useful CSS3 Tools 1. CSS3 Generators 2. Helper Scripts 3. Browser Feature Detection 4. Templates 52
  • 53. CSS3 Generators 53 http://www.flickr.com/photos/latca/841730130/
  • 57. CSS3 Tools at WestCiv 57 http://westciv.com/tools/
  • 58. More CSS3 Generators http://border-radius.com http://www.colorzilla.com/ gradient-editor/ http://csscorners.com http://border-image.com 58
  • 59. Helper Scripts 59 http://www.flickr.com/photos/keystricken/386106987/
  • 60. Get a helping hand… These scripts help IE lt 8 behave like CSS3- compliant browsers. However, support of CSS3 properties varies between scripts. 60
  • 61. ie-7.js (includes IE8 and IE9) 61 http://code.google.com/p/ie7-js/
  • 63. CSS Sandpaper 63 http://www.useragentman.com/blog/csssandpaper-a-css3-javascript-library/
  • 64. Browser Feature Detection 64 http://www.flickr.com/photos/johnsnape/4258191545/
  • 66. What does Modernizr do? Modernizr detects which CSS3 (and HTML5) properties are supported by the browser, and appends classes to the <html> tag, which then allows you to create styles to target specific properties to individual browsers. It is a premier progressive enhancement tool! 66
  • 67. How to use Modernizr http://www.alistapart.com/articles/taking- advantage-of-html5-and-css3-with- modernizr/ http://webdesignernotebook.com/css/ how-to-use-modernizr http://www.ericlightbody.com/2010/ modernizr-your-tool-for-html5-and-css3- functionality/ 67
  • 68. Templates 68 http://www.flickr.com/photos/jazzmasterson/275796175/
  • 69. HTML5Boilerplate.com Paul Irish’s HTML5 template file http://html5boilerplate.com/ 69
  • 72. @font-face 72 http://lostworldsfairs.com/moon/
  • 73. @font-face • Note: – Actually part of the CSS2.1 specification. – Therefore, the IEs do support it! • Tips & issues – When you decide to use a font as a webfont, you have to be sure that the EULA supports it. – One way to avoid that is to use ONLY fonts that are listed as approved webfonts. • Browser Support – IE lt 8 require fonts to be in EOT format – IE9 now supports WOFF 73
  • 74. @font-face bug: IE lt 8 @font-face super bullet-proofing The problem: @font-face doesn’t work, even with the proper normal syntax. What gives? 74
  • 75. @font-face bug: Webkit @font-face bold and italics “bug” The problem: Applying font-weight:bold or font- style: italic to @font-face'd text doesn’t work. 75
  • 76. Solution: IE proof @font-face + faux variations Example: @font-face { font-family: 'MyFontFamily'; src: url('myfont-webfont.eot?#iefix‘) format('embedded-opentype'), url('myfont-webfont.woff') format('woff'), url('myfont- webfont.ttf')format('truetype'), url('myfont-webfont.svg#svgFontName') format('svg'); font-weight:normal; font-style:normal; font-variant:normal; } 76
  • 77. FontSquirrel.com 77 http://www.fontsquirrel.com/fontface/generator
  • 78. Webfont Services Instead of generating the webfonts yourself, you can pay a service where the webfonts are hosted elsewhere, and you link to them and use the fonts on their server. 78
  • 79. Webfont Services 79 http://www.typekit.com
  • 80. Webfont Services http://www.typotheque http://www.webtype.com .com/webfonts http://www.fontslive.com http://typekit.com http://www.extensis.com/en http://fontdeck.com /WebINK/ http://kernest.com http://webfonts.fonts.com http://www.ascenderfonts http://webfonts.info/wiki/in .com/webfonts/ dex.php?title=Category:W ebfont_Services 80
  • 81. Google Font Directory http://code.google.com/webfonts 81
  • 82. Resources: @font-face • http://www.delicious.com/denisejacobs/ font-face 82
  • 83. New Visual Effects in CSS3 83
  • 84. New Visual Effects in CSS3 • border-radius • rgba color • box-shadow • text-shadow • gradient 84
  • 85. border-radius 85 http://oh-hai.biz
  • 87. border-radius • Tips & issues – Different syntax for mozilla, webkit, and opera browsers • Browser Support – IE lt 8 does not support, IE9 does 87
  • 88. border-radius Syntax comparison breakdown: • -moz allows multiple values for each position • -webkit individual values 88 • Standard is like mozilla
  • 89. border-radius #contentcolumn { -moz-border-radius: 20px 20px 0 0; -webkit-border-top-left-radius: 20px; -webkit-border-top-right-radius: 20px; border-radius: 20px 20px 0 0; } 89
  • 91. border-radius Resources http://www.delicious.com/denisejacobs/ border-radius 91
  • 92. rgba 92 http://aarronwalter.com/designer/
  • 93. rgba • Tips & issues – More granular control of the color opacity of a particular element • Browser Support – IE lt 8 does not support, IE9 does – There is an IE filter that will give transparency with a color. 93
  • 94. Cross-browser: rgba • Place after regular rgb color property to override in modern browsers; older browsers will ignore it • IE lt 8 bug: use the property background instead of background-color for the regular color 94
  • 95. Full solution: rgba .rgba { background-color: #ff0000; /* fallback color in hexidecimal. */ background-color: transparent; /* transparent is key for the filter to work in IE8. best done through conditional comments */ background-color: rgba(255, 0, 0, 0.3); -ms-filter: "progid:DXImageTransform.Microsoft.gradient (startColorstr=#4CFF0000, endColorstr=#4CFF0000)"; /* filter for IE8 */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=#4CFF0000, endColorstr=#4CFF0000); /* filter for older IEs */ } 95
  • 96. box-shadow 96 http://badassideas.com/work/
  • 97. box-shadow • Tips & issues – Different syntax for mozilla, webkit, and opera browsers • Browser Support – IE lt 8 does not support, IE9 does – There is a filter for IE: shadow (actually there are 2: shadow and dropshadow, but shadow is said to be better) 97
  • 98. box-shadow .portfolio { -moz-box-shadow: 0 5px 20px rgba(0,0,0,0.6); -webkit-box-shadow: 0 5px 20px rgba(0,0,0,0.6); box-shadow: 0 5px 20px rgba(0,0,0,0.6); } 98
  • 99. Full solution: box-shadow .boxshadow { -moz-box-shadow: 3px 3px 10px #333; -webkit-box-shadow: 3px 3px 10px #333; box-shadow: 3px 3px 10px #333; /*standard*/ -ms-filter: "progid:DXImageTransform.Microsoft.Shad ow(Strength=4, Direction=135, Color='#333333')"; /* For IE 8 */ filter: progid:DXImageTransform.Microsoft.Shado w(Strength=4, Direction=135, Color='#333333'); /* For IE 5.5 - 7 */ } 99
  • 100. Inspiration: box-shadow 100 http://nicolasgallagher.com/css-drop-shadows-without-images/demo/
  • 101. Resources: box-shadow http://www.delicious.com/denisejacobs/ box-shadow 101
  • 102. text-shadow 102 http://www.bountybev.com
  • 103. text-shadow • Tips & issues – Can help accentuate text and improve readability and visual importance • Browser Support – IE lt 8 does not support, nor does IE9 :/ – could use the IE filter: shadow 103
  • 104. Full solution: text-shadow .textshadow h2 { text-shadow:1px 1px 2px rgba(48,80,82,0.8); -ms-filter: "progid:DXImageTransform.Microsoft.Shad ow(Strength=2, Direction=135, Color='#305052')"; /* For IE 8+ */ filter: progid:DXImageTransform.Microsoft.Shado w(Strength=2, Direction=135, Color='#305052'); /* For IE 5.5 - 7 */ } 104
  • 105. Inspiration: text shadow 105 http://www.midwinter-dg.com/blog_demos/css-text-shadows/
  • 106. Inspiration: text shadow 106 http://desandro.com/articles/the-new-lens-flare/
  • 107. Resources: text-shadow http://www.delicious.com/denisejacobs/ text-shadow 107
  • 108. gradient 108 http://raymondjay.com/
  • 109. Old skool: Gradient background 109
  • 110. gradient • Tips & issues – Very different syntax for mozilla and webkit browsers previously – Newer syntax for current and future browsers • Browser Support – IE does not support, so will still need a fallback image for those browsers 110
  • 111. gradient #mainnav li a { background-color: #f7f6f4; background-image: url(bg_navitems.gif); background-image: -moz-linear-gradient(100% 100% 90deg, #ccc9ba, #ffffff); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffffff), to(#ccc9ba)); } 111
  • 112. gradient: Full solution .gradient { color: #fff; background: #aaaaaa url(gradient_slice.jpg) 0 0 x-repeat; /*background color matches one of the stop colors. The gradient_slice.jpg is 1px wide */ background-image: -moz-linear-gradient(top, #07407c, #aaaaaa); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #07407c),color- stop(1, #aaaaaa)); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(sta rtColorStr='#07407c', EndColorStr='#aaaaaa')"; /* IE8+ */ filter: progid:DXImageTransform.Microsoft.gradient(star tColorStr='#07407c', EndColorStr='#aaaaaa'); /* IE7- */ } 112
  • 113. Colorzilla gradient tool 113 http://www.colorzilla.com/gradient-editor/
  • 114. Inspiration: gradients 114 http://leaverou.me/css3patterns/
  • 115. Inspiration: gradients http://leaverou.me/2011/03/beveled-corners-negative-border-radius-with-css3-gradients/ 115
  • 116. Tools: gradient http://www.colorzilla.com/gradient-editor/ http://www.westciv.com/tools/gradients/ http://css3please.com http://css3generator.com 116
  • 117. Resources: gradient http://www.delicious.com/denisejacobs/ gradient 117
  • 118. Advanced Visual Effects in CSS3 118
  • 119. CSS3 for Advanced Visual Presentation 1. border-image 2. multiple background images 3. background-size 4. multiple text columns 119
  • 120. border-image 120 http://www.spoongraphics.com/blog/
  • 121. border-image Borders can now be created using images and sections thereof for enhanced visual design. • Tips & issues – Documentation on best use is sparse – No adequate fall-back techniques for graceful degradation – Vendor prefixes for Mozilla and webkit • Browser support 121 – The IEs do not support
  • 122. border-image div.note div.border { -moz-border-image: url(/playground/awesome-overlays/border- image.png) 5 5 5 5 stretch; -webkit-border-image: url(/playground/awesome-overlays/border- image.png) 5 5 5 5 stretch; border-image: url(/playground/awesome- overlays/border-image.png) 5 5 5 5 stretch; } 122
  • 124. Resources: border-image http://www.delicious.com/denisejacobs/ border-image 124
  • 125. Multiple backgrounds 125 http://www.lostworldsfairs.com
  • 126. Multiple backgrounds • Tips & issues: – The backgrounds are shown according to the order listed, with the first background image listed is the one “on top” and the rest stack underneath it. – Can use CSS3 gradients (which are like background images) in conjunction with multiple background images. • Browser support: – IE lt 8 does not support, but IE9 does 126
  • 127. Multiple backgrounds body { background-color: #5ABBCF; background: #5ABBCF url(../images/bokeh1.png) no- repeat; /* fallback image */ background: url(../images/bokeh4.png) no-repeat, url(../images/bokeh3.png) no-repeat 10% 0, url(../images/bokeh2.png) no-repeat 20% 0, url(../images/bokeh1.png) no-repeat, url(../images/glow.png) no-repeat 90% 0, -moz-linear-gradient(0% 90% 90deg,#5ABBCF, #95E0EF); background: url(../images/bokeh4.png) no-repeat, url(../images/bokeh3.png) no-repeat 10% 0, url(../images/bokeh2.png) no-repeat 20% 0, url(../images/bokeh1.png) no-repeat, url(../images/glow.png) no-repeat 90% 0, -webkit-gradient(linear, 0% 0%, 0% 90%, from(#95E0EF), to(#5ABBCF)); } 127
  • 128. Resources: multiple backgrounds http://www.delicious.com/denisejacobs/ multiplebackgrounds 128
  • 129. background-size 129 http://www.alistapart.com/articles/supersize-that-background-please/
  • 130. background-size You can set the size of a background image and make sure it covers the entire background of a page, no matter what the size. • Tips & Issues: – Vendor prefixes for mozilla, webkit, and opera • Browser support: – IE lt 8 does not support, but IE9 does 130
  • 131. background-size Example: body { background: #000 url(myBackground_1280x960.jpg) center center fixed no-repeat; -moz-background-size: cover; -webkit-background-size: cover; -o-background-size: cover; background-size: cover; } 131
  • 133. Resources: background-size • http://www.delicious.com/denisejacobs/ backgroundsize • http://www.alistapart.com/articles/ supersize-that-background-please/ • http://www.w3.org/TR/css3- background/#the-background-size 133
  • 134. Multiple text columns 134 http://www.yaili.com
  • 135. Multiple text columns You can have one div containing a number of paragraphs which can be displayed in columns, with no float or height manipulations. • Tips & Issues: – Some of the properties are not widely supported, and many of the related (like dividers, breakers, etc.) haven’t been implemented or aren’t supported yet either. 135
  • 136. Multiple text columns Example: div.three-col { -webkit-column-count: 3; -webkit-column-gap: 15px; -moz-column-count: 3; -moz-column-gap: 15px; column-count: 3; column-gap: 15px; } 136
  • 137. Resources: multiple columns http://www.delicious.com/denisejacobs/ multiplecolumns 137
  • 138. 2d Transformations with CSS3 138
  • 139. transform (2d) 139 http://www.zurb.com/playground/css3-polaroids/
  • 140. transform • Tips & issues – Mozilla, Webkit, and Opera vendor prefixes; no standard yet. • Browser Support – IE lt 8 does not support, but IE9 does 140
  • 141. 2D Transformations Different kinds of transforms: • rotate • scale • skew • translate • matrix 141
  • 142. transform/rotate: full solution .rotate { -moz-transform: rotate(-5deg); -webkit-transform: rotate(-5deg); -o-transform: rotate(-5deg); transform: rotate(-5deg); filter: progid:DXImageTransform.Microsoft.Matrix(sizing Method='auto expand', M11=0.9961946980917455, M12=0.08715574274765817, M21=- 0.08715574274765817, M22=0.9961946980917455); -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0 .9961946980917455, M12=0.08715574274765817, M21=-0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand')"; zoom: 1; } 142
  • 143. transform: multiple You can apply multiple transform properties to one element. Example: .enlargen:hover { -webkit-transform: translate(-50%, -50%) scale(2) rotate(0); -moz-transform: translate(-50%, -50%) scale(2) rotate(0); -o-transform: translate(-50%, -50%) scale(2) rotate(0); transform: translate(-50%, -50%) scale(2) rotate(0); } 143
  • 144. Resources: 2D transforms http://www.delicious.com/denisejacobs/ transform 144
  • 145. Animation with CSS3 145
  • 146. Animation 1. transitions 2. animation (the webkits only) A Tip: Be subtle – it’s more effective 146
  • 148. transition 148 http://timvandamme.com/
  • 149. transition You can create subtle transitions between hover states on elements. The transitions smooth out visual jumps. • Tips & issues – Be sure to put the transition effect on the correct element 149
  • 150. transition Example: #id_of_element { -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } 150
  • 151. Animation 151 http://www.css3exp.com/moon/
  • 152. Animation You can create subtle animations in the browser! • Tips & issues: – Plan out the animation sequence ahead of time – Be aware of style order in the CSS 152
  • 153. Animation div { animation-name: diagonal-slide; animation-duration: 5s; animation-iteration-count: 10; } @keyframes diagonal-slide { from { left: 0; top: 0; } to { left: 100px; top: 100px; } } 153
  • 154. Resources: Animation http://www.delicious.com/denisejacobs/ animation 154
  • 155. CSS3 Selectors 155 http://www.flickr.com/photos/jamiecampbell/446301597/
  • 156. Getting Advanced Advanced selectors are a good way to specifically target styles for modern browsers. The right selector will help you achieve targeting nirvana, so it’s important to know which selectors you can use now. 156
  • 157. CSS3 Selectors Advanced selectors give us the power to target elements that are not part of the document tree and/or those that are generated dynamically. • Tips & issues – There are a lot of options to choose from! – Great to use for progressive enhancement – Need to be aware of changes to specificity 157
  • 158. CSS3 Selector Specification • General sibling • Pseudo-classes E~F – Target • :target • Attribute substrings – a[attribute^="value"] – Negation – a[attribute$="value"] • :not(s) – a[attribute*="value"] – State • Pseudo-elements • :enabled no new ones, all pseudo- • :disabled elements in CSS3 indicated with :: • :checked • :indeterminate 158
  • 159. CSS3 Selectors – Structural • :nth-child(n) • :nth-last-child(n) • :nth-of-type(n) • :nth-last-of-type(n) • :last-child • :first-of-type • :last-of-type • :only-child • :only-of-type • :empty • :root 159
  • 160. Uses for advanced selectors • Great for progressive enhancement • Styling first, last or x-number of elements 160
  • 161. Old skool: zebra striping 161
  • 162. With structural pseudo-elements The keywords odd and even can be used to match child elements whose index is odd or even. The index of an element’s first child is 1, so this rule will match any p element that is the first, third, fifth, and so on, child of its parent element. An argument, can is placed within the parentheses, as a number, a keyword, or a formula. A formula an + b can be used to create more complex repeating patterns. In the formula, a represents a cycle size, n is a counter starting at 0, and b represents an offset value. All values are integers. 162
  • 163. Nth child selector tester http://leaverou.me/demos/nth.html 163
  • 164. CSS3 Selector Support http://www.findmebyip.com/litmus 164
  • 165. Tools: CSS3 Selectors • http://www.quirksmode.org/ compatibility.html • http://www.evotech.net/blog/2009/02/css -browser-support/ • http://www.findmebyip.com/litmus 165
  • 166. CSS3 Selector Helper Script http://www.selectivizr.com 166
  • 167. Resources: CSS3 Selectors • http://www.delicious.com/denisejacobs/se lectors+css3 • http://inspectelement.com/tutorials/a- look-at-some-of-the-new-selectors- introduced-in-css3/ • http://24ways.org/2009/cleaner-code- with-css3-selectors 167
  • 168. Tools: CSS3 Selectors • http://www.quirksmode.org/ compatibility.html • http://www.findmebyip.com/litmus 168
  • 169. Resources: CSS3 Selectors • http://www.delicious.com/denisejacobs/ selectors+css3 • http://inspectelement.com/tutorials/a- look-at-some-of-the-new-selectors- introduced-in-css3/ • http://24ways.org/2009/ cleaner-code-with-css3-selectors 169
  • 170. Becoming Responsive 170 http://mediaqueri.es/
  • 171. Responsive Devices? 171 http://www.flickr.com/photos/ivyfield/4486938457/
  • 172. Responsive Devices! 172 http://www.flickr.com/photos/ivyfield/4486938457/
  • 175. Avoid this desktop stylesheet + media queries = mobile site 175
  • 176. =“Switchy” layout 176 http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu
  • 177. Instead this mobile stylesheet + media queries = desktop site 177
  • 178. = Truly responsive 178 http://ri.gov
  • 182. Flexible & Fluid • Size everything in ems or percentages • Flexible: Ems for everything • Fluid: Percentages for width, ems for height 182
  • 183. Various grids • http://delicious.com/denisejacobs/grid 183
  • 185. Flexible Images: Foreground img {width: 100%; max-width: 100%;} 185
  • 186. Responsive foreground images 186 https://github.com/filamentgroup/Responsive-Images
  • 187. Flexible Images: Background Use background-position to selectively crop your backgrounds 187
  • 189. @media queries @media queries are now being used as a basis for responsive web design: web interfaces that change with the size (and orientation) of the device. 189
  • 190. How do they work? Through media queries, the browser is served different styles or stylesheets based on the dimensions and the device. The @media construct allows style sheet rules for various media in the same style sheet. An @media rule specifies the target media types (separated by commas) of a set of statements (delimited by curly braces). 190
  • 191. Simple @media rule examples @media print { body { font-size: 10pt } } @media screen { body { font-size: 13px } } @media screen, print { body { line-height: 1.2 } } 191
  • 192. @media queries Example: /* Smartphones (portrait and landscape) - ---------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */ } 192
  • 193. @media queries: Browser compatibility Yep Nope • IE 9 • IE 8, 7, 6 • Opera 9.5+ • Safari 2 • Opera Mobile • Firefox 1, 2 • Safari 3+ • Firefox 3.5+ • Chrome 193
  • 194. Css3-mediaqueries.js http://code.google.com/p/css3-mediaqueries-js/ 194
  • 196. Resources: @media queries • http://www.delicious.com/denisejacobs/ media-queries 196
  • 198. 1) Plan the design(s) 198 http://jeremypalford.com/arch-journal/responsive-web-design-sketch-sheets
  • 199. Plan the design(s) • Need to plan out 3-4 iterations of a page design for each resolution/device instead of just one 199
  • 201. Calculate • You need to know dimensions of page elements to be able to calculate proportional relationship of size and margins • The Golden Formula: target ÷ context = result 201
  • 202. Target, context, and results 202
  • 203. 3) Determine the breaking points 203 http://www.slideshare.net/yiibu/pragmatic-responsive-design
  • 204. Some standard sizes to shoot for • 320 px: smart phones in portrait mode • 480 px: smart phones in landscape mode • 600 px: smaller tablets like the Kindle (600 x 800) or Nook (600 x 1024) • 768 px: tablet in portrait • 1024 px: tablet in landscape and netbooks • 1200 px: low end for widescreen displays • 1600 px: widescreen displays 204
  • 205. 4) Add media queries 205
  • 206. Hardboiled’s @media queries: Smartphone /* Smartphones (portrait and landscape) ----------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */ } /* Smartphones (landscape) ----------- */ @media only screen and (min-width : 321px) { /* Styles */ } /* Smartphones (portrait) ----------- */ @media only screen and (max-width : 320px) { /* Styles */ } 206 http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries/
  • 207. Hardboiled’s @media queries: iPad /* iPads (portrait and landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* Styles */ } /* iPads (landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* Styles */ } /* iPads (portrait) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* Styles */ } 207 http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries/
  • 208. Hardboiled’s @media queries: Other /* Desktops and laptops ----------- */ @media only screen and (min-width : 1224px) { /* Styles */ } /* Large screens ----------- */ @media only screen and (min-width : 1824px) { /* Styles */ } /* iPhone 4 ----------- */ @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) { /* Styles */ } 208 http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries/
  • 209. 5) Test & Tweak 209
  • 210. Testing, testing, 1-2-3 • Get the design to code and prototype as soon as possible • Test breaking points • Make adjustments 210
  • 216. This is just the beginning! My Delicious links are HUGE compendia of all things related to CSS3, updated as I find new articles, resources and tools! http://delicious.com/denisejacobs/css3 http://delicious.com/denisejacobs/ css3training 216
  • 218. On Netmagzine.com http://www.netmagazine.com/features/ http://www.netmagazine.com/features/ top-10-css3-techniques 21-top-tools-responsive-web-design 218
  • 219. A library of resources 219 http://upload.wikimedia.org/wikipedia/commons/e/e2/New_York_State_Library_1900.jpg
  • 220. CSS3, hot off the presses! The Book of CSS3 220 by Peter Gasston
  • 221. Project-based CSS3 Stunning CSS3 221 by Zoe Mikely Gillenwater
  • 222. CSS3 Condensed and Explained CSS3 For Web Designers 222 by Dan Cederholm
  • 223. The book on Responsive Web Design Responsive Web Design by Ethan Marcotte 223
  • 224. CSS3 and Media Queries Hardboiled Web Design 224 by Andy Clarke
  • 225. Flexible Layouts Flexible Web Design 225 by Zoe Mickley Gillenwater
  • 226. Proactive coding & graceful degradation CssDetectiveGuide.com 226
  • 227. Holistic Web Design Interact with Web Standards: A Holistic Approach to Web Design 227
  • 228. Where to find me: DeniseJacobs.com denise@denisejacobs.com twitter.com/denisejacobs slideshare.net/denisejacobs Text 50500 denisejacobs 228
  • 229. Thank you! 229 http://www.flickr.com/photos/27620885@N02/2609974180/