SlideShare a Scribd company logo
1 of 249
Download to read offline
CSS3:
    Ripe & Ready to Respond




                                Denise Jacobs //
1           ConvergeSE Conference // June 24, 2011
Sweet Tweets
         Who I am:
        @denisejacobs

       This fine event:
         @convergese

    What I’m talkin’ ‘bout:
            #css3rr
2
A little about me




3   CSSDetectiveGuide.com & InterActWithWebStandards.com
Ripe?




4
Responsive?




5
The goal




6
How???




7
Start by…
    1. Becoming Responsive
      •   Shift your brain
          •   Mobile first
          •   Watch out
      •   3 components
          •   Flexible grid
          •   Flexible images
          •   Media queries
      •   Planning
          •   3 or 4-in-one
          •   Crunch the numbers

8
…And end with
    2. CSS3
      •   Getting started
          •   What’s new
          •   Rules of the road
          •   Helping tools and scripts
      •   Properties
          •   Standard effects
          •   Advanced effects
      •   Selectors


    3. Resources
9
Becoming
     Responsive

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




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




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




13
Mobile first




14
Not this

     Desktop stylesheet + media queries
     = mobile site




15
Instead this

     Mobile stylesheet + media queries
     = desktop site




16
Watch out
     • Switchy vs. responsive – keyhole effect
     • Be aware of context – you’ll probably want
       different content for different devices




17
3 components

18
Flexible grid




19
Flexible & Fluid
     • Size everything in ems or percentages
     • Flexible: Ems for everything
     • Fluid: Percentages for width, ems for
       height




20
Various grids
     • http://delicious.com/denisejacobs/grids




21
Flexible images




22
Flexible Images: Foreground
     Width: 100%;
     Max-width: 100%;




23
Flexible Images: Background
     Use background-position to selectively crop
       your backgrounds
     http://goo.gl/YLLC3




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




25
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).
26
Simple @media rule examples
     @media print {
        body { font-size: 10pt }
      }

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

      @media screen, print {
        body { line-height: 1.2 }
      }
27
Syntax: @media queries
     Syntax:
     @media [operand] <media type> [operand]
       <(media feature: value)>
     {
     properties
     }




28
@media queries
     Example:
     /* Smartphones (portrait and landscape) -
       ---------- */
     @media only screen
     and (min-device-width : 320px)
     and (max-device-width : 480px)
     {
     /* Styles */
     }




29
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 */
     }


30          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 */
     }

31           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 */
     }


32          http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries/
Plan the design(s)
     • Need to plan out 3-4 iterations of a page
       design for each resolution/device instead
       of just one




33
Calculate
     • Need to know dimensions of page
       elements to be able to calculate
       proportional relationship




34
The Golden Formula

     target ÷ context = result




35
@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




36
Css3-mediaqueries.js




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

     • Mediaqueri.es




38
Resources: @media queries
     • http://www.delicious.com/denisejacobs/
       media-queries




39
What’s New in
        CSS3

40
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.


41
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.




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




43
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
44
Resources: New in CSS3
     http://www.w3.org/TR/tr-groups-all#
       tr_Cascading_Style_Sheets__CSS__
       Working_Group




45
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)




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




47
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)

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




49
HSL Color Picker Tool




       http://www.workwithcolor.com/hsl-color-picker-01.htm
50
Getting Started with
            CSS3:
       The Rules of the
            Road
51               http://www.flickr.com/photos/ilike/3707503212/
CSS3 Browser
     Compatibility

52           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
53
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);
                                  }
54
Doesn’t Validate




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




            6            7                                  8



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




57
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/

58
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




59
CSS3 Property browser support charts


     http://www.findmebyip.com/
       litmus




60
CSS3 Selector browser support charts

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




61
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




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


     http://crossbrowsertesting.com/
     (paid)


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

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




65
How do we achieve this?




66                  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




67
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.



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




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




70
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 */




71
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
       */




72
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) */




73
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 */
74
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.
75
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




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




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




78
CSS3 Tools

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




80
CSS3 Generators

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




82
CSS3Generator.com




83
CSS3-Maker.com




84
CSS3 Tools at WestCiv




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

     http://www.css3maker.com

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

     http://csscorners.com


86
     http://border-image.com
Helper Scripts

87          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.




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




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




90
CSS Sandpaper




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

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




93
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!


94
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/

95
Templates

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


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




97
CSS3 Properties!

98
Webfonts

99
@font-face




100                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
101
@font-face
      @font-face {
      font-family: 'Graublau Web';
      src: local('Graublau'),
        url('GraublauWeb.woff')
        format('woff'),
        url('GraublauWeb.ttf')
        format('truetype');
        url('GraublauWeb.eot'),
        format('eot');
      }


102
@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?




103
@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.




104
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;
      }

105
FontSquirrel.com




106    http://www.fontsquirrel.com/fontface/generator
Webfont Services




107       http://www.typekit.com
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.




108
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



109
Resources: @font-face
      • http://www.delicious.com/denisejacobs/
        font-face




110
New Visual Effects
          in CSS3

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




112
border-radius




113                   http://oh-hai.biz
border-radius
      • Tips & issues
         – Different syntax for mozilla, webkit, and
           opera browsers

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




114
border-radius




      Syntax comparison breakdown:
      • -moz allows multiple values for each position
      • -webkit individual values
115
      • 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;
      }




116
Border-radius.com




117
Tools: border-radius
      http://border-radius.com

      http://css3please.com

      http://css3generator.com

      http://www.css3maker.com



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




119
opacity




120             http://rustinjessen.com/weblog/833
opacity
      • Tips & issues
         – Do not use on elements that would cover
           important content

      • Browser Support
         – IE lt 8 does not support
         – There is a filter: opacity



121
opacity
      #feature-meta {
      background:none repeat scroll 0 0
        #3C4C55;
      opacity:0.85;
      }

      Override for children elements
      div.opacity * {opacity: 1.0;}




122
Full solution: opacity
      .opacity {
      background-color: #3C4C55;
      color: #fff;
      opacity: 0.5;
      -ms-filter:
        "progid:DXImageTransform.Microsoft.Alpha
        (opacity=20)";
      /* IE8 only */
      filter:
        progid:DXImageTransform.Microsoft.Alpha
        (opacity=20);
      /* IE6, IE7, and IE8 */
      filter: alpha(opacity=20);
      }


123
Opacity Resources
      http://www.delicious.com/denisejacobs/
        opacity




124
rgba




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

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

126
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




127
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 */
      }
128
box-shadow




129                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)


130
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);
      }




131
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 */
      }
132
Tools: box-shadow
      http://css3please.com

      http://css3generator.com

      http://www.css3maker.com

      http://westciv.com/tools/
        box-properties/index.html


133
Resources: box-shadow
      http://www.delicious.com/denisejacobs/
        box-shadow




134
text-shadow




135                 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



136
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 */
      }

137
Tools: text-shadow
      http://css3please.com

      http://css3generator.com

      http://www.css3maker.com

      http://westciv.com/tools/text-properties/



138
Resources: text-shadow
      http://www.delicious.com/denisejacobs/
        text-shadow




139
gradient




140              http://raymondjay.com/
gradient
      • Tips & issues
         – Very different syntax for mozilla and
           webkit browsers

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




141
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));
      }




142
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- */
      }
143
Colorzilla gradient tool




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

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

      http://css3please.com

      http://css3generator.com




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




146
Advanced Visual
       Effects in CSS3

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




148
border-image




149                  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
150
        – 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;
      }




151
Border-image.com




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




153
Multiple backgrounds




154                    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
155
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));
      }

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




157
background-size




158       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



159
background-size: values
      contain
      Contain always fits the entire image within your
        viewport, leaving opaque borders on either the
        top-bottom or the left-right whenever the ratio of
        the background image and browser window are
        not the same.

      cover
      Cover always fills the browser window. You can
        control how your image is aligned within the
        viewport by using the background-position
        property.
160
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;
      }




161
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


162
Multiple text columns




163                           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.



164
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;
      }




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




166
2d
      Transformations
         with CSS3
167
transform (2d)




168            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




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




170
transform/rotate: Syntax
                    breakdown
      The generic syntax for transform is
      <-prefix->transform: type(<value>)
        type(<value>) type(<value>)
        type(<value>);

      For rotate specifically, here is the syntax:
      <-prefix->transform:
        rotate(<value>)

      Positive values will rotate the object clockwise to
        the right, and negative values will rotate the
171
        element counter-clockwise to the left.
transform: rotate
      #photos img {
      -webkit-transform: rotate(-2deg);
      -moz-transform: rotate(-2deg);
      -o-transform: rotate(-2deg);
      }




172
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;
      }


173
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);
        }




174
Tools: transform
      http://westciv.com/tools/transforms/

      http://css3generator.com

      http://css3please.com




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




176
Animation with
          CSS3

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

      A Tip:
      Be subtle – it’s more effective




178
transition




179                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




180
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;
      }




181
Animation




182               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




183
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; }
      }




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




185
CSS3 Selectors

186          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.




187
Let’s peek at
      1.       CSS2 Selectors
           •    browser support


      2.       CSS3 Selectors
           •    browser support




188
189
Advanced Selectors: Usage Tips
      • All of the CSS2 selectors are supported by the
        modern browsers, and almost all of the CSS3 ones
        are, so use them!

      • It’s easy to target styles away from the IEs, but
        target them to the IEs with simpler combinator
        selectors




190
CSS 2.1 Selectors
      • Universal *                   • Pseudo elements
                                          – :before
      • Child Combinator                  – :after
        E>F
                                      • State pseudo-classes
      • Adjacent/Sibling Combinator      – Dynamic
        E+F                                   • :hover
                                              • :active
      • Attribute E[~attribute]               • :focus

      • At Rules                          – Language
          –   @font-face                      • :lang
          –   @media
          –   @page                       – Structural
          –   @charset                        • :first-child




191
CSS2.1 Selectors & IE Support
      • Universal *                            (ie7/8 – yes)
      • Child: e > f                           (ie7/8 – yes)
      • Sibling/Adjacent: e + f      (ie7 no, ie8 – yes)
      • Attribute: e[attribute]      (ie7/8 – yes)
      • Pseudo elements                        (ie7/8 – no)
         – ::before
         – ::after
      • State pseudo-classes, v2.1
         – :first-child                       (ie7/8 – yes)
         – :hover                             (ie7/8 – yes)
         – :active                            (ie7/8 – yes)
         – :focus                             (ie7/8 – no)
         – :lang                              (ie7/8 – no)




192
CSS2 Selector Support




193                http://www.quirksmode.org/compatibility.html
CSS3 Selectors
      • General sibling            • Pseudo-elements*
        E~F
                                   *all pseudo-elements indicated
                                       with :: in CSS3
      • Attribute presence
         – a[attribute="value"]
         – a[attribute~="value"]
         – a[attribute|="value"]


      • Attribute substrings
         – a[attribute^="value"]
         – a[attribute$="value"]
         – a[attribute*="value"]



194
Combinator Selectors: Child
      • A child selector targets an element that is a child
        of another element.

      • A child is a direct descendant of an element in the
        document tree (as opposed to a more distant
        descendant).

      Syntax:
      parent selector > descendant
        selector
      E > F

      Example:
      p > strong {font-family: Tahoma,
195
Combinator Selectors:
                   Sibling/Adjacent
      A sibling selector (also known as adjacent) selects
        an element that is next to another element in the
        document tree.

      Syntax:
      sibling selector + sibling selector
        {property: value; }
      E + F

      Example:
      p + ol {font-family: Georgia,
196     serif;}
Combinator Selectors: Attribute
      An attribute selector targets a selector with a
       particular attribute.

      Syntax:
      selector[attribute]

      Example:
      • a[title] {font-variant:
        italic;}

197
Resources: CSS2 Selectors
      • http://www.bostonwebstudio.com/
        presentation/intro-css2.1-css3/demo/




198
CSS3 Selectors (cont’d)
      • Pseudo-classes          – Structural
        – Target                   •   :nth-child(n)
                                   •   :nth-last-child(n)
           • :target
                                   •   :nth-of-type(n)
                                   •   :nth-last-of-type(n)
        – Negation
                                   •   :last-child
           • :not(s)
                                   •   :first-of-type
                                   •   :last-of-type
        – State                    •   :only-child
           •   :enabled            •   :only-of-type
           •   :disabled           •   :empty
           •   :checked
           •   :indeterminate



199
CSS3 Selector Support




200                  http://www.findmebyip.com/litmus
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


201
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
202
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
203
Uses for advanced selectors
      • Great for progressive enhancement
      • Styling first, last or x-number of elements




204
Combinator Selectors: General Sibling
      A general sibling selector (also known as adjacent)
        selects an element that shares the same parent as
        another element in the document tree.

      Syntax:
      sibling selector ~ sibling selector
        {property: value; }
      E ~ F

      Example:
      p ~ dd {font-family: Georgia,
205     serif;}
Combinator Selectors: Attribute presence
      selector[attribute="value"] targets a selector with a
        particular attribute and specific value.
      Example:
      img[src=“catchathief.jpg”] {border:
        1px solid #999; }

      selector [attribute~="value"] targets a selector with
        a particular attribute and value where the value is
        one of multiple values separated by a space.
      Example
      img[alt~="CSI"] {border: 1px
        #ff8000 solid;}


206
Combinator Selectors: Attribute presence
      selector [attribute|="value"] targets an element with an
         attribute that contains values separated by a hypen in a
         list.
      Example:
      img[title|="large"] { border: 1px solid
         #000; }




207
Combinator Selectors: Attribute substrings
      selector [attribute^="value"] targets an element
        with an attribute that begins with a prefix of
        “value”.
      Example:
      img[title^=“th_"] { border: 1px
        solid #000; }

      selector [attribute$="value"] targets an element
        with an attribute which ends with a suffix of
        “value.”
      Example:
      img[title$=“png"] { border: 1px
208     solid #000; }
Combinator Selectors: Attribute substrings
      selector [attribute*="value"] targets an element
        with an attribute that contains “value” as any
        part of a value string.
      Example:
      img[title*="large"] { border: 1px
        solid #000; }




209
CSS3 Pseudo-
         classes

210
Pseudo-class: Target
      :target targets the target of a url on a page –
         most often used for fragment identifiers.

      Example:
      div.window:target {
      opacity: 1;
      z-index: 7;
      }


211
Pseudo-class: Negation
      :not targets all elements that are not
        indicated. A very useful pseudo-class.

      Example:
      *:not(img) {text-align: left;}
      (This would match all elements except
        images.)



212
Pseudo-classes: State
      •   :enabled
      •   :disabled
      •   :checked
      •   :indeterminate




213
Pseudo-elements: State
      The :enabled and :disabled pseudo-classes allow
          developers to specify the appearance of user
          interface elements (form controls) that are
          enabled or disabled, provided that the browser
          allows styling of form controls.

      Example:
      input[type="text"]:enabled {
         background:#ffc; }
      input[type="text"]:disabled {
         background:#ddd; }

214
The :checked pseudo-class
      The :checked pseudo-class allows developers
        to specify the appearance of checked radio
        and checkbox elements. Again, this is
        provided that the browser allows styling of
        form controls.

      Example:
      input:checked {border:1px solid
        #090;}

215
Pseudo-classes: Structural
      • Structural
        – :root
        – :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
216
The :root pseudo-class
      The :root pseudo-class targets the
        document’s root element. In HTML, the
        root element is always the HTML element.

      :root actually has a higher specificity than
        html.

      Example:
      :root { background:#ff0; }

217
The :nth-child() pseudo-class
      The :nth-child() pseudo-class targets an
        element that has a certain number of
        siblings before it in the document tree. This
        argument, which is placed within the
        parentheses, can be a number, a keyword,
        or a formula.

      A number x matches the x-th child.

      Example:
      • p:nth-child(3) { color:#f00;
218     }
The :nth-child() pseudo-class
      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.
      Example:
      p:nth-child(odd) { color:#f00; }

      The 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.
      Example:
      p:nth-child(3n+1) { color:#f00; }

219
The :nth-last-child() pseudo-class
      The :nth-last-child() pseudo-class works just like the
        :nth-child() pseudo-class, except that it targets an
        element that has a certain number of siblings
        after it in the document tree.

      In other words, it starts counting from the last child
         instead of the first, and counts backwards.

      Example:
      tr:nth-last-child(2) {
        background:#ff0; }


220
The :nth-of-type() pseudo-class
      The :nth-of-type() pseudo-class works exactly
        like the :nth-child() pseudo-class, but only
        counts those elements that are of the same
        type as the element the rule is applied to.

      Example:
      p:nth-of-type(3) {
        background:#ff0; }



221
The :nth-last-of-type() pseudo-
                      class
      The :nth-last-of-type() pseudo-class targets an
        element that has a certain number of siblings of
        the same element type after it in the document
        tree.

      Just like the :nth-last-child() pseudo-class, it starts
        counting from the last child instead of the first,
        and counts backwards.

      Example:
      p:nth-last-of-
        type(2){background:#ff0;}
222
The :last-child pseudo-class
      The :last-child pseudo-class targets an
        element that is the last child of its parent
        element.

      It is the same as :nth-last-child(1).

      Example:
      p:last-child {background:#ff0;}


223
The :first-of-type pseudo-class
      The :first-of-type pseudo-class targets an
        element that is the first sibling of its type.
        it is the same as :nth-of-type(1).

      Example:
      p:first-of-type {
        background:#ff0; }




224
The :last-of-type pseudo-class
      The :last-of-type pseudo-class targets an
        element that is the last sibling of its type. it
        is the same as :nth-last-of-type(1).

      Example
      p:last-of-
        type{background:#ff0;}




225
The :only-of-type pseudo-class
      The :only-of-type pseudo-class targets an
        element whose parent element has no
        other children of the same element type.

      It is the same (but with a lower specificity) as
         :first-of-type:last-of-type or :nth-of-
         type(1):nth-last-of-type(1).

      Example:
      p:only-of-
        type{background:#ff0;}
226
The :only-child pseudo-class
      The :only-child pseudo-class targets an
        element whose parent element has no
        other element children.

      It is the same (but with a lower specificity) as
         :first-child:last-child or :nth-child(1):nth-
         last-child(1).

      Example:
      p:only-child {background:#ff0;}
227
Tools: CSS3 Selectors
      • http://www.quirksmode.org/
        compatibility.html

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

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



228
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

229
CSS3 Selector Support




          http://www.findmebyip.com/litmus
230
Nth child selector tester




            http://leaverou.me/demos/nth.html
231
CSS3 Selector Helper Script




               http://www.selectivizr.com
232
Tools: CSS3 Selectors
      • http://www.quirksmode.org/
        compatibility.html

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




233
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

234
The End?

235        http://www.flickr.com/photos/ilike/3707503212/
Today




236
Tomorrow




237
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


238
Books are not for
      the old-fashioned…

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




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




            Stunning CSS3
241
        by Zoe Mikely Gillenwater
CSS3 Condensed and Explained




             CSS3 For Web Designers
242
                by Dan Cederholm
CSS3 and Media Queries




          Hardboiled Web Design
243           by Andy Clarke
Responsive Design and solid CSS




                  Handcrafted CSS
244
         by Dan Cederholm with Ethan Marcotte
Flexible Layouts




        Flexible Web Design
245
      by Zoe Mickley Gillenwater
Timeless CSS Solutions




              CSS Mastery
246
            by Andy Budd, et al
Proactive coding & graceful degradation




             CssDetectiveGuide.com
247
Hope you don’t need this:




248
Thank You!
      denisejacobs.com

 denise@denisejacobs.com

twitter.com/denisejacobs

 slideshare.net/denisejacobs



249

More Related Content

Viewers also liked

White Space Creativity
White Space CreativityWhite Space Creativity
White Space CreativityDenise Jacobs
 
University Slideshow
University SlideshowUniversity Slideshow
University Slideshowguestca3ad7
 
It's Business Time: The Graceful Degradation of CSS3
It's Business Time: The Graceful Degradation of CSS3It's Business Time: The Graceful Degradation of CSS3
It's Business Time: The Graceful Degradation of CSS3Denise Jacobs
 
CARLOS POLO
CARLOS POLOCARLOS POLO
CARLOS POLOlavelada
 
Staff Housing
Staff HousingStaff Housing
Staff Housingezran
 
The Calm Creativity (R)Evolution
The Calm Creativity (R)EvolutionThe Calm Creativity (R)Evolution
The Calm Creativity (R)EvolutionDenise Jacobs
 
Creativity revolution - SXSW Interactive 2014
Creativity revolution -  SXSW Interactive 2014Creativity revolution -  SXSW Interactive 2014
Creativity revolution - SXSW Interactive 2014Denise Jacobs
 
Let’s Rawk The Web - A Manifesto
Let’s Rawk The Web - A ManifestoLet’s Rawk The Web - A Manifesto
Let’s Rawk The Web - A ManifestoDenise Jacobs
 
Creativity (R)Evolution - FrontEnd Conference CH 2013
Creativity (R)Evolution -  FrontEnd Conference CH 2013Creativity (R)Evolution -  FrontEnd Conference CH 2013
Creativity (R)Evolution - FrontEnd Conference CH 2013Denise Jacobs
 
Bored But Never Boring - Media Evolution: The Conference 2013
Bored But Never Boring - Media Evolution: The Conference 2013Bored But Never Boring - Media Evolution: The Conference 2013
Bored But Never Boring - Media Evolution: The Conference 2013Denise Jacobs
 
IB Learner Profile
IB Learner ProfileIB Learner Profile
IB Learner Profileastello2015
 
Technology And Education
Technology And EducationTechnology And Education
Technology And Educationcoppusc
 
The Age of Emotional and Experience Design
The Age of Emotional and Experience DesignThe Age of Emotional and Experience Design
The Age of Emotional and Experience DesignDenise Jacobs
 
Access formal evaluation
Access   formal evaluationAccess   formal evaluation
Access formal evaluationGilmar Mattos
 
Top 10 Tips for using LinkedIn
Top 10 Tips for using LinkedInTop 10 Tips for using LinkedIn
Top 10 Tips for using LinkedInMichael Fisher
 
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
 

Viewers also liked (20)

White Space Creativity
White Space CreativityWhite Space Creativity
White Space Creativity
 
University Slideshow
University SlideshowUniversity Slideshow
University Slideshow
 
It's Business Time: The Graceful Degradation of CSS3
It's Business Time: The Graceful Degradation of CSS3It's Business Time: The Graceful Degradation of CSS3
It's Business Time: The Graceful Degradation of CSS3
 
CARLOS POLO
CARLOS POLOCARLOS POLO
CARLOS POLO
 
Staff Housing
Staff HousingStaff Housing
Staff Housing
 
The Calm Creativity (R)Evolution
The Calm Creativity (R)EvolutionThe Calm Creativity (R)Evolution
The Calm Creativity (R)Evolution
 
Creativity revolution - SXSW Interactive 2014
Creativity revolution -  SXSW Interactive 2014Creativity revolution -  SXSW Interactive 2014
Creativity revolution - SXSW Interactive 2014
 
Let’s Rawk The Web - A Manifesto
Let’s Rawk The Web - A ManifestoLet’s Rawk The Web - A Manifesto
Let’s Rawk The Web - A Manifesto
 
Creativity (R)Evolution - FrontEnd Conference CH 2013
Creativity (R)Evolution -  FrontEnd Conference CH 2013Creativity (R)Evolution -  FrontEnd Conference CH 2013
Creativity (R)Evolution - FrontEnd Conference CH 2013
 
Bored But Never Boring - Media Evolution: The Conference 2013
Bored But Never Boring - Media Evolution: The Conference 2013Bored But Never Boring - Media Evolution: The Conference 2013
Bored But Never Boring - Media Evolution: The Conference 2013
 
IB Learner Profile
IB Learner ProfileIB Learner Profile
IB Learner Profile
 
Milieu
MilieuMilieu
Milieu
 
Commercial Analysis
Commercial AnalysisCommercial Analysis
Commercial Analysis
 
1st Fam Gath
1st Fam Gath1st Fam Gath
1st Fam Gath
 
Technology And Education
Technology And EducationTechnology And Education
Technology And Education
 
The Age of Emotional and Experience Design
The Age of Emotional and Experience DesignThe Age of Emotional and Experience Design
The Age of Emotional and Experience Design
 
Access formal evaluation
Access   formal evaluationAccess   formal evaluation
Access formal evaluation
 
0702 Innovationclusters
0702 Innovationclusters0702 Innovationclusters
0702 Innovationclusters
 
Top 10 Tips for using LinkedIn
Top 10 Tips for using LinkedInTop 10 Tips for using LinkedIn
Top 10 Tips for using LinkedIn
 
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
 

Similar to CSS3: Ripe and Ready to Respond

Advanced CSS Troubleshooting
Advanced CSS TroubleshootingAdvanced CSS Troubleshooting
Advanced CSS TroubleshootingDenise Jacobs
 
Website trends 2012 presentation
Website trends 2012 presentationWebsite trends 2012 presentation
Website trends 2012 presentationFresh_Egg
 
Let's dig into the Omega Theme!
Let's dig into the Omega Theme!Let's dig into the Omega Theme!
Let's dig into the Omega Theme!Mediacurrent
 
Introduction to CSS3
Introduction to CSS3Introduction to CSS3
Introduction to CSS3Doris Chen
 
Great Responsive-ability Web Design
Great Responsive-ability Web DesignGreat Responsive-ability Web Design
Great Responsive-ability Web DesignMike Wilcox
 
Html5 Whats around the bend
Html5 Whats around the bendHtml5 Whats around the bend
Html5 Whats around the bendRaj Lal
 
Responsive Web Design - Web & PHP Conference - 2013-09-18
Responsive Web Design - Web & PHP Conference - 2013-09-18Responsive Web Design - Web & PHP Conference - 2013-09-18
Responsive Web Design - Web & PHP Conference - 2013-09-18Frédéric Harper
 
CSS3: Are you experienced?
CSS3: Are you experienced?CSS3: Are you experienced?
CSS3: Are you experienced?Denise Jacobs
 
Effective and Efficient Design with CSS3
Effective and Efficient Design with CSS3Effective and Efficient Design with CSS3
Effective and Efficient Design with CSS3Zoe Gillenwater
 
Trendsetting: Web Design and Beyond
Trendsetting: Web Design and BeyondTrendsetting: Web Design and Beyond
Trendsetting: Web Design and BeyondAndy Stratton
 
Responsive Web Design - Devoxx UK - 2014-06-13
Responsive Web Design - Devoxx UK - 2014-06-13Responsive Web Design - Devoxx UK - 2014-06-13
Responsive Web Design - Devoxx UK - 2014-06-13Frédéric Harper
 
Designing Your Next Generation Web Pages with CSS3
Designing Your Next Generation Web Pages with CSS3Designing Your Next Generation Web Pages with CSS3
Designing Your Next Generation Web Pages with CSS3Gil Fink
 
Web development basics (Part-2)
Web development basics (Part-2)Web development basics (Part-2)
Web development basics (Part-2)Rajat Pratap Singh
 
Responsive Design and Drupal Theming
Responsive Design and Drupal ThemingResponsive Design and Drupal Theming
Responsive Design and Drupal ThemingSuzanne Dergacheva
 
[SF HTML5] Responsive Cross-Device Development with Web Standards (2013)
[SF HTML5] Responsive Cross-Device Development with Web Standards (2013)[SF HTML5] Responsive Cross-Device Development with Web Standards (2013)
[SF HTML5] Responsive Cross-Device Development with Web Standards (2013)Tomomi Imura
 
Responsive Web Design & APEX Theme 25
Responsive Web Design & APEX Theme 25Responsive Web Design & APEX Theme 25
Responsive Web Design & APEX Theme 25Christian Rokitta
 

Similar to CSS3: Ripe and Ready to Respond (20)

Intro to CSS3
Intro to CSS3Intro to CSS3
Intro to CSS3
 
Advanced CSS Troubleshooting
Advanced CSS TroubleshootingAdvanced CSS Troubleshooting
Advanced CSS Troubleshooting
 
Website trends 2012 presentation
Website trends 2012 presentationWebsite trends 2012 presentation
Website trends 2012 presentation
 
Let's dig into the Omega Theme!
Let's dig into the Omega Theme!Let's dig into the Omega Theme!
Let's dig into the Omega Theme!
 
Introduction to CSS3
Introduction to CSS3Introduction to CSS3
Introduction to CSS3
 
Great Responsive-ability Web Design
Great Responsive-ability Web DesignGreat Responsive-ability Web Design
Great Responsive-ability Web Design
 
Html5 Whats around the bend
Html5 Whats around the bendHtml5 Whats around the bend
Html5 Whats around the bend
 
Psd 2 Drupal
Psd 2 DrupalPsd 2 Drupal
Psd 2 Drupal
 
Responsive Web Design - Web & PHP Conference - 2013-09-18
Responsive Web Design - Web & PHP Conference - 2013-09-18Responsive Web Design - Web & PHP Conference - 2013-09-18
Responsive Web Design - Web & PHP Conference - 2013-09-18
 
CSS3: Are you experienced?
CSS3: Are you experienced?CSS3: Are you experienced?
CSS3: Are you experienced?
 
Effective and Efficient Design with CSS3
Effective and Efficient Design with CSS3Effective and Efficient Design with CSS3
Effective and Efficient Design with CSS3
 
Trendsetting: Web Design and Beyond
Trendsetting: Web Design and BeyondTrendsetting: Web Design and Beyond
Trendsetting: Web Design and Beyond
 
Real-world CSS3
Real-world CSS3Real-world CSS3
Real-world CSS3
 
Responsive Web Design - Devoxx UK - 2014-06-13
Responsive Web Design - Devoxx UK - 2014-06-13Responsive Web Design - Devoxx UK - 2014-06-13
Responsive Web Design - Devoxx UK - 2014-06-13
 
Designing Your Next Generation Web Pages with CSS3
Designing Your Next Generation Web Pages with CSS3Designing Your Next Generation Web Pages with CSS3
Designing Your Next Generation Web Pages with CSS3
 
Web development basics (Part-2)
Web development basics (Part-2)Web development basics (Part-2)
Web development basics (Part-2)
 
Responsive Design and Drupal Theming
Responsive Design and Drupal ThemingResponsive Design and Drupal Theming
Responsive Design and Drupal Theming
 
[SF HTML5] Responsive Cross-Device Development with Web Standards (2013)
[SF HTML5] Responsive Cross-Device Development with Web Standards (2013)[SF HTML5] Responsive Cross-Device Development with Web Standards (2013)
[SF HTML5] Responsive Cross-Device Development with Web Standards (2013)
 
Responsive Web Design & APEX Theme 25
Responsive Web Design & APEX Theme 25Responsive Web Design & APEX Theme 25
Responsive Web Design & APEX Theme 25
 
Approaches to Responsive Wen Design & Development
Approaches to Responsive Wen Design & DevelopmentApproaches to Responsive Wen Design & Development
Approaches to Responsive Wen Design & Development
 

More from 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
 

More from 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
 

Recently uploaded

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
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
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
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
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
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
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
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
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
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 

Recently uploaded (20)

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.
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
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
 
201610817 - edge part1
201610817 - edge part1201610817 - edge part1
201610817 - edge part1
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
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
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
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
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
20230104 - machine vision
20230104 - machine vision20230104 - machine vision
20230104 - machine vision
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
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
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 

CSS3: Ripe and Ready to Respond

  • 1. CSS3: Ripe & Ready to Respond Denise Jacobs // 1 ConvergeSE Conference // June 24, 2011
  • 2. Sweet Tweets Who I am: @denisejacobs This fine event: @convergese What I’m talkin’ ‘bout: #css3rr 2
  • 3. A little about me 3 CSSDetectiveGuide.com & InterActWithWebStandards.com
  • 8. Start by… 1. Becoming Responsive • Shift your brain • Mobile first • Watch out • 3 components • Flexible grid • Flexible images • Media queries • Planning • 3 or 4-in-one • Crunch the numbers 8
  • 9. …And end with 2. CSS3 • Getting started • What’s new • Rules of the road • Helping tools and scripts • Properties • Standard effects • Advanced effects • Selectors 3. Resources 9
  • 10. Becoming Responsive 10 http://mediaqueri.es/
  • 11. Responsive Devices? 11 http://www.flickr.com/photos/ivyfield/4486938457/
  • 12. Responsive Devices! 12 http://www.flickr.com/photos/ivyfield/4486938457/
  • 15. Not this Desktop stylesheet + media queries = mobile site 15
  • 16. Instead this Mobile stylesheet + media queries = desktop site 16
  • 17. Watch out • Switchy vs. responsive – keyhole effect • Be aware of context – you’ll probably want different content for different devices 17
  • 20. Flexible & Fluid • Size everything in ems or percentages • Flexible: Ems for everything • Fluid: Percentages for width, ems for height 20
  • 21. Various grids • http://delicious.com/denisejacobs/grids 21
  • 23. Flexible Images: Foreground Width: 100%; Max-width: 100%; 23
  • 24. Flexible Images: Background Use background-position to selectively crop your backgrounds http://goo.gl/YLLC3 24
  • 25. @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. 25
  • 26. 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). 26
  • 27. Simple @media rule examples @media print { body { font-size: 10pt } } @media screen { body { font-size: 13px } } @media screen, print { body { line-height: 1.2 } } 27
  • 28. Syntax: @media queries Syntax: @media [operand] <media type> [operand] <(media feature: value)> { properties } 28
  • 29. @media queries Example: /* Smartphones (portrait and landscape) - ---------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */ } 29
  • 30. 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 */ } 30 http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries/
  • 31. 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 */ } 31 http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries/
  • 32. 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 */ } 32 http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries/
  • 33. Plan the design(s) • Need to plan out 3-4 iterations of a page design for each resolution/device instead of just one 33
  • 34. Calculate • Need to know dimensions of page elements to be able to calculate proportional relationship 34
  • 35. The Golden Formula target ÷ context = result 35
  • 36. @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 36
  • 37. Css3-mediaqueries.js http://code.google.com/p/css3-mediaqueries-js/ 37
  • 38. Responsive design inspiration • Mediaqueri.es 38
  • 39. Resources: @media queries • http://www.delicious.com/denisejacobs/ media-queries 39
  • 40. What’s New in CSS3 40
  • 41. 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. 41
  • 42. 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. 42
  • 43. CSS3 Modularity: Benefits • Browser producers can now implement CSS3 module by module • Speeds up the browser implementation process • Encourages innovation 43
  • 44. 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 44
  • 45. Resources: New in CSS3 http://www.w3.org/TR/tr-groups-all# tr_Cascading_Style_Sheets__CSS__ Working_Group 45
  • 46. 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) 46
  • 47. RGBA Color Alpha opacity: 0.0 = 0% = no opacity 1.0 = 100% = full opacity 47
  • 48. 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) 48
  • 49. HSL Color Wheel 0º – Red 60º – Yellow 120º – Green 180º – Cyan 240º – Blue 300º – Magenta 49
  • 50. HSL Color Picker Tool http://www.workwithcolor.com/hsl-color-picker-01.htm 50
  • 51. Getting Started with CSS3: The Rules of the Road 51 http://www.flickr.com/photos/ilike/3707503212/
  • 52. CSS3 Browser Compatibility 52 http://www.flickr.com/photos/sfllaw/222795669/
  • 53. 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 53
  • 54. 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); } 54
  • 56. None of the older IEs support CSS3 …as in “not any.” 6 7 8 56 http://www.flickr.com/photos/johnsnape/4258191545/
  • 57. IE9 now supports CSS3 …But still not as fully as the other browsers yet. 57
  • 58. 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/ 58
  • 59. 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 59
  • 60. CSS3 Property browser support charts http://www.findmebyip.com/ litmus 60
  • 61. CSS3 Selector browser support charts http://www.standardista.com/css3/ css3-selector-browser-support 61
  • 62. 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 62
  • 63. Cross-browser testers http://tredosoft.com/Multiple_IE http://crossbrowsertesting.com/ (paid) http://browsershots.org/ (free) 63
  • 64. CSS3 & Cross- browser Coding 64 http://www.flickr.com/photos/scfiasco/4490322916/
  • 65. The Goal: Code that works in all most browsers 65
  • 66. How do we achieve this? 66 http://www.flickr.com/photos/barretthall/205175534/
  • 67. Steps to get as close as possible 1. Leverage source order 2. Filter it 3. Let tools do all of the work 67
  • 68. 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. 68
  • 69. A Proper Stack .gradient { color: #fff; 69
  • 70. A Proper Stack .gradient { color: #fff; background: #aaaaaa url(gradient_slice.jpg) 0 0 x-repeat; /*fallback background color & image*/ 70
  • 71. 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 */ 71
  • 72. 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 */ 72
  • 73. 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) */ 73
  • 74. 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 */ 74
  • 75. 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. 75
  • 76. 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 76
  • 77. Resources: IE Filters Microsoft Visual Filters and Transitions Reference http://msdn.microsoft.com/en-us/library/ ms532853%28v=VS.85%29.aspx 77
  • 78. Let the tools do the work • We’ll talk about those next! 78
  • 79. CSS3 Tools 79 http://www.flickr.com/photos/johnsnape/4258191545/
  • 80. Useful CSS3 Tools 1. CSS3 Generators 2. Helper Scripts 3. Browser Feature Detection 4. Templates 80
  • 81. CSS3 Generators 81 http://www.flickr.com/photos/latca/841730130/
  • 85. CSS3 Tools at WestCiv 85 http://westciv.com/tools/
  • 86. More CSS3 Generators http://border-radius.com http://www.css3maker.com http://www.colorzilla.com/ gradient-editor/ http://csscorners.com 86 http://border-image.com
  • 87. Helper Scripts 87 http://www.flickr.com/photos/keystricken/386106987/
  • 88. Get a helping hand… These scripts help IE lt 8 behave like CSS3- compliant browsers. However, support of CSS3 properties varies between scripts. 88
  • 89. ie-7.js (includes IE8 and IE9) 89 http://code.google.com/p/ie7-js/
  • 91. CSS Sandpaper 91 http://www.useragentman.com/blog/csssandpaper-a-css3-javascript-library/
  • 92. Browser Feature Detection 92 http://www.flickr.com/photos/johnsnape/4258191545/
  • 94. 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! 94
  • 95. 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/ 95
  • 96. Templates 96 http://www.flickr.com/photos/jazzmasterson/275796175/
  • 97. HTML5Boilerplate.com Paul Irish’s HTML5 template file http://html5boilerplate.com/ 97
  • 100. @font-face 100 http://lostworldsfairs.com/moon/
  • 101. @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 101
  • 102. @font-face @font-face { font-family: 'Graublau Web'; src: local('Graublau'), url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype'); url('GraublauWeb.eot'), format('eot'); } 102
  • 103. @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? 103
  • 104. @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. 104
  • 105. 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; } 105
  • 106. FontSquirrel.com 106 http://www.fontsquirrel.com/fontface/generator
  • 107. Webfont Services 107 http://www.typekit.com
  • 108. 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. 108
  • 109. 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 109
  • 110. Resources: @font-face • http://www.delicious.com/denisejacobs/ font-face 110
  • 111. New Visual Effects in CSS3 111
  • 112. New Visual Effects in CSS3 • border-radius • opacity • rgba color • box-shadow • text-shadow • gradient 112
  • 113. border-radius 113 http://oh-hai.biz
  • 114. border-radius • Tips & issues – Different syntax for mozilla, webkit, and opera browsers • Browser Support – IE lt 8 does not support, IE9 does 114
  • 115. border-radius Syntax comparison breakdown: • -moz allows multiple values for each position • -webkit individual values 115 • Standard is like mozilla
  • 116. 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; } 116
  • 118. Tools: border-radius http://border-radius.com http://css3please.com http://css3generator.com http://www.css3maker.com 118
  • 119. border-radius Resources http://www.delicious.com/denisejacobs/ border-radius 119
  • 120. opacity 120 http://rustinjessen.com/weblog/833
  • 121. opacity • Tips & issues – Do not use on elements that would cover important content • Browser Support – IE lt 8 does not support – There is a filter: opacity 121
  • 122. opacity #feature-meta { background:none repeat scroll 0 0 #3C4C55; opacity:0.85; } Override for children elements div.opacity * {opacity: 1.0;} 122
  • 123. Full solution: opacity .opacity { background-color: #3C4C55; color: #fff; opacity: 0.5; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha (opacity=20)"; /* IE8 only */ filter: progid:DXImageTransform.Microsoft.Alpha (opacity=20); /* IE6, IE7, and IE8 */ filter: alpha(opacity=20); } 123
  • 124. Opacity Resources http://www.delicious.com/denisejacobs/ opacity 124
  • 125. rgba 125 http://aarronwalter.com/designer/
  • 126. rgba • Tips & issues – More granular control of the color opacity of a particular element than opacity • Browser Support – IE lt 8 does not support, IE9 does – There is an IE filter that will give transparency with a color. 126
  • 127. 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 127
  • 128. 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 */ } 128
  • 129. box-shadow 129 http://badassideas.com/work/
  • 130. 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) 130
  • 131. 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); } 131
  • 132. 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 */ } 132
  • 133. Tools: box-shadow http://css3please.com http://css3generator.com http://www.css3maker.com http://westciv.com/tools/ box-properties/index.html 133
  • 134. Resources: box-shadow http://www.delicious.com/denisejacobs/ box-shadow 134
  • 135. text-shadow 135 http://www.bountybev.com
  • 136. 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 136
  • 137. 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 */ } 137
  • 138. Tools: text-shadow http://css3please.com http://css3generator.com http://www.css3maker.com http://westciv.com/tools/text-properties/ 138
  • 139. Resources: text-shadow http://www.delicious.com/denisejacobs/ text-shadow 139
  • 140. gradient 140 http://raymondjay.com/
  • 141. gradient • Tips & issues – Very different syntax for mozilla and webkit browsers • Browser Support – IE does not support, so will still need a fallback image for those browsers 141
  • 142. 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)); } 142
  • 143. 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- */ } 143
  • 144. Colorzilla gradient tool 144 http://www.colorzilla.com/gradient-editor/
  • 145. Tools: gradient http://www.colorzilla.com/gradient-editor/ http://www.westciv.com/tools/gradients/ http://css3please.com http://css3generator.com 145
  • 146. Resources: gradient http://www.delicious.com/denisejacobs/ gradient 146
  • 147. Advanced Visual Effects in CSS3 147
  • 148. CSS3 for Advanced Visual Presentation 1. border-image 2. multiple background images 3. background-size 4. multiple text columns 148
  • 149. border-image 149 http://www.spoongraphics.com/blog/
  • 150. 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 150 – The IEs do not support
  • 151. 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; } 151
  • 153. Resources: border-image http://www.delicious.com/denisejacobs/ border-image 153
  • 154. Multiple backgrounds 154 http://www.lostworldsfairs.com
  • 155. 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 155
  • 156. 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)); } 156
  • 157. Resources: multiple backgrounds http://www.delicious.com/denisejacobs/ multiplebackgrounds 157
  • 158. background-size 158 http://www.alistapart.com/articles/supersize-that-background-please/
  • 159. 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 159
  • 160. background-size: values contain Contain always fits the entire image within your viewport, leaving opaque borders on either the top-bottom or the left-right whenever the ratio of the background image and browser window are not the same. cover Cover always fills the browser window. You can control how your image is aligned within the viewport by using the background-position property. 160
  • 161. 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; } 161
  • 162. 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 162
  • 163. Multiple text columns 163 http://www.yaili.com
  • 164. 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. 164
  • 165. 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; } 165
  • 166. Resources: multiple columns http://www.delicious.com/denisejacobs/ multiplecolumns 166
  • 167. 2d Transformations with CSS3 167
  • 168. transform (2d) 168 http://www.zurb.com/playground/css3-polaroids/
  • 169. transform • Tips & issues – Mozilla, Webkit, and Opera vendor prefixes; no standard yet. • Browser Support – IE lt 8 does not support, but IE9 does 169
  • 170. 2D Transformations Different kinds of transforms: • rotate • scale • skew • translate • matrix 170
  • 171. transform/rotate: Syntax breakdown The generic syntax for transform is <-prefix->transform: type(<value>) type(<value>) type(<value>) type(<value>); For rotate specifically, here is the syntax: <-prefix->transform: rotate(<value>) Positive values will rotate the object clockwise to the right, and negative values will rotate the 171 element counter-clockwise to the left.
  • 172. transform: rotate #photos img { -webkit-transform: rotate(-2deg); -moz-transform: rotate(-2deg); -o-transform: rotate(-2deg); } 172
  • 173. 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; } 173
  • 174. 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); } 174
  • 175. Tools: transform http://westciv.com/tools/transforms/ http://css3generator.com http://css3please.com 175
  • 176. Resources: 2D transforms http://www.delicious.com/denisejacobs/ transform 176
  • 177. Animation with CSS3 177
  • 178. Animation 1. transitions 2. animation (the webkits only) A Tip: Be subtle – it’s more effective 178
  • 179. transition 179 http://timvandamme.com/
  • 180. 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 180
  • 181. 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; } 181
  • 182. Animation 182 http://www.css3exp.com/moon/
  • 183. 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 183
  • 184. 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; } } 184
  • 185. Resources: Animation http://www.delicious.com/denisejacobs/ animation 185
  • 186. CSS3 Selectors 186 http://www.flickr.com/photos/jamiecampbell/446301597/
  • 187. 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. 187
  • 188. Let’s peek at 1. CSS2 Selectors • browser support 2. CSS3 Selectors • browser support 188
  • 189. 189
  • 190. Advanced Selectors: Usage Tips • All of the CSS2 selectors are supported by the modern browsers, and almost all of the CSS3 ones are, so use them! • It’s easy to target styles away from the IEs, but target them to the IEs with simpler combinator selectors 190
  • 191. CSS 2.1 Selectors • Universal * • Pseudo elements – :before • Child Combinator – :after E>F • State pseudo-classes • Adjacent/Sibling Combinator – Dynamic E+F • :hover • :active • Attribute E[~attribute] • :focus • At Rules – Language – @font-face • :lang – @media – @page – Structural – @charset • :first-child 191
  • 192. CSS2.1 Selectors & IE Support • Universal * (ie7/8 – yes) • Child: e > f (ie7/8 – yes) • Sibling/Adjacent: e + f (ie7 no, ie8 – yes) • Attribute: e[attribute] (ie7/8 – yes) • Pseudo elements (ie7/8 – no) – ::before – ::after • State pseudo-classes, v2.1 – :first-child (ie7/8 – yes) – :hover (ie7/8 – yes) – :active (ie7/8 – yes) – :focus (ie7/8 – no) – :lang (ie7/8 – no) 192
  • 193. CSS2 Selector Support 193 http://www.quirksmode.org/compatibility.html
  • 194. CSS3 Selectors • General sibling • Pseudo-elements* E~F *all pseudo-elements indicated with :: in CSS3 • Attribute presence – a[attribute="value"] – a[attribute~="value"] – a[attribute|="value"] • Attribute substrings – a[attribute^="value"] – a[attribute$="value"] – a[attribute*="value"] 194
  • 195. Combinator Selectors: Child • A child selector targets an element that is a child of another element. • A child is a direct descendant of an element in the document tree (as opposed to a more distant descendant). Syntax: parent selector > descendant selector E > F Example: p > strong {font-family: Tahoma, 195
  • 196. Combinator Selectors: Sibling/Adjacent A sibling selector (also known as adjacent) selects an element that is next to another element in the document tree. Syntax: sibling selector + sibling selector {property: value; } E + F Example: p + ol {font-family: Georgia, 196 serif;}
  • 197. Combinator Selectors: Attribute An attribute selector targets a selector with a particular attribute. Syntax: selector[attribute] Example: • a[title] {font-variant: italic;} 197
  • 198. Resources: CSS2 Selectors • http://www.bostonwebstudio.com/ presentation/intro-css2.1-css3/demo/ 198
  • 199. CSS3 Selectors (cont’d) • Pseudo-classes – Structural – Target • :nth-child(n) • :nth-last-child(n) • :target • :nth-of-type(n) • :nth-last-of-type(n) – Negation • :last-child • :not(s) • :first-of-type • :last-of-type – State • :only-child • :enabled • :only-of-type • :disabled • :empty • :checked • :indeterminate 199
  • 200. CSS3 Selector Support 200 http://www.findmebyip.com/litmus
  • 201. 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 201
  • 202. 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 202
  • 203. 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 203
  • 204. Uses for advanced selectors • Great for progressive enhancement • Styling first, last or x-number of elements 204
  • 205. Combinator Selectors: General Sibling A general sibling selector (also known as adjacent) selects an element that shares the same parent as another element in the document tree. Syntax: sibling selector ~ sibling selector {property: value; } E ~ F Example: p ~ dd {font-family: Georgia, 205 serif;}
  • 206. Combinator Selectors: Attribute presence selector[attribute="value"] targets a selector with a particular attribute and specific value. Example: img[src=“catchathief.jpg”] {border: 1px solid #999; } selector [attribute~="value"] targets a selector with a particular attribute and value where the value is one of multiple values separated by a space. Example img[alt~="CSI"] {border: 1px #ff8000 solid;} 206
  • 207. Combinator Selectors: Attribute presence selector [attribute|="value"] targets an element with an attribute that contains values separated by a hypen in a list. Example: img[title|="large"] { border: 1px solid #000; } 207
  • 208. Combinator Selectors: Attribute substrings selector [attribute^="value"] targets an element with an attribute that begins with a prefix of “value”. Example: img[title^=“th_"] { border: 1px solid #000; } selector [attribute$="value"] targets an element with an attribute which ends with a suffix of “value.” Example: img[title$=“png"] { border: 1px 208 solid #000; }
  • 209. Combinator Selectors: Attribute substrings selector [attribute*="value"] targets an element with an attribute that contains “value” as any part of a value string. Example: img[title*="large"] { border: 1px solid #000; } 209
  • 210. CSS3 Pseudo- classes 210
  • 211. Pseudo-class: Target :target targets the target of a url on a page – most often used for fragment identifiers. Example: div.window:target { opacity: 1; z-index: 7; } 211
  • 212. Pseudo-class: Negation :not targets all elements that are not indicated. A very useful pseudo-class. Example: *:not(img) {text-align: left;} (This would match all elements except images.) 212
  • 213. Pseudo-classes: State • :enabled • :disabled • :checked • :indeterminate 213
  • 214. Pseudo-elements: State The :enabled and :disabled pseudo-classes allow developers to specify the appearance of user interface elements (form controls) that are enabled or disabled, provided that the browser allows styling of form controls. Example: input[type="text"]:enabled { background:#ffc; } input[type="text"]:disabled { background:#ddd; } 214
  • 215. The :checked pseudo-class The :checked pseudo-class allows developers to specify the appearance of checked radio and checkbox elements. Again, this is provided that the browser allows styling of form controls. Example: input:checked {border:1px solid #090;} 215
  • 216. Pseudo-classes: Structural • Structural – :root – :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 216
  • 217. The :root pseudo-class The :root pseudo-class targets the document’s root element. In HTML, the root element is always the HTML element. :root actually has a higher specificity than html. Example: :root { background:#ff0; } 217
  • 218. The :nth-child() pseudo-class The :nth-child() pseudo-class targets an element that has a certain number of siblings before it in the document tree. This argument, which is placed within the parentheses, can be a number, a keyword, or a formula. A number x matches the x-th child. Example: • p:nth-child(3) { color:#f00; 218 }
  • 219. The :nth-child() pseudo-class 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. Example: p:nth-child(odd) { color:#f00; } The 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. Example: p:nth-child(3n+1) { color:#f00; } 219
  • 220. The :nth-last-child() pseudo-class The :nth-last-child() pseudo-class works just like the :nth-child() pseudo-class, except that it targets an element that has a certain number of siblings after it in the document tree. In other words, it starts counting from the last child instead of the first, and counts backwards. Example: tr:nth-last-child(2) { background:#ff0; } 220
  • 221. The :nth-of-type() pseudo-class The :nth-of-type() pseudo-class works exactly like the :nth-child() pseudo-class, but only counts those elements that are of the same type as the element the rule is applied to. Example: p:nth-of-type(3) { background:#ff0; } 221
  • 222. The :nth-last-of-type() pseudo- class The :nth-last-of-type() pseudo-class targets an element that has a certain number of siblings of the same element type after it in the document tree. Just like the :nth-last-child() pseudo-class, it starts counting from the last child instead of the first, and counts backwards. Example: p:nth-last-of- type(2){background:#ff0;} 222
  • 223. The :last-child pseudo-class The :last-child pseudo-class targets an element that is the last child of its parent element. It is the same as :nth-last-child(1). Example: p:last-child {background:#ff0;} 223
  • 224. The :first-of-type pseudo-class The :first-of-type pseudo-class targets an element that is the first sibling of its type. it is the same as :nth-of-type(1). Example: p:first-of-type { background:#ff0; } 224
  • 225. The :last-of-type pseudo-class The :last-of-type pseudo-class targets an element that is the last sibling of its type. it is the same as :nth-last-of-type(1). Example p:last-of- type{background:#ff0;} 225
  • 226. The :only-of-type pseudo-class The :only-of-type pseudo-class targets an element whose parent element has no other children of the same element type. It is the same (but with a lower specificity) as :first-of-type:last-of-type or :nth-of- type(1):nth-last-of-type(1). Example: p:only-of- type{background:#ff0;} 226
  • 227. The :only-child pseudo-class The :only-child pseudo-class targets an element whose parent element has no other element children. It is the same (but with a lower specificity) as :first-child:last-child or :nth-child(1):nth- last-child(1). Example: p:only-child {background:#ff0;} 227
  • 228. Tools: CSS3 Selectors • http://www.quirksmode.org/ compatibility.html • http://www.evotech.net/blog/2009/02/css -browser-support/ • http://www.findmebyip.com/litmus 228
  • 229. 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 229
  • 230. CSS3 Selector Support http://www.findmebyip.com/litmus 230
  • 231. Nth child selector tester http://leaverou.me/demos/nth.html 231
  • 232. CSS3 Selector Helper Script http://www.selectivizr.com 232
  • 233. Tools: CSS3 Selectors • http://www.quirksmode.org/ compatibility.html • http://www.findmebyip.com/litmus 233
  • 234. 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 234
  • 235. The End? 235 http://www.flickr.com/photos/ilike/3707503212/
  • 238. 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 238
  • 239. Books are not for the old-fashioned… 239 http://upload.wikimedia.org/wikipedia/commons/e/e2/New_York_State_Library_1900.jpg
  • 240. CSS3, hot off the presses! The Book of CSS3 240 by Peter Gasston
  • 241. Project-based CSS3 Stunning CSS3 241 by Zoe Mikely Gillenwater
  • 242. CSS3 Condensed and Explained CSS3 For Web Designers 242 by Dan Cederholm
  • 243. CSS3 and Media Queries Hardboiled Web Design 243 by Andy Clarke
  • 244. Responsive Design and solid CSS Handcrafted CSS 244 by Dan Cederholm with Ethan Marcotte
  • 245. Flexible Layouts Flexible Web Design 245 by Zoe Mickley Gillenwater
  • 246. Timeless CSS Solutions CSS Mastery 246 by Andy Budd, et al
  • 247. Proactive coding & graceful degradation CssDetectiveGuide.com 247
  • 248. Hope you don’t need this: 248
  • 249. Thank You! denisejacobs.com denise@denisejacobs.com twitter.com/denisejacobs slideshare.net/denisejacobs 249