• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Learn to Love CSS3 [English]
 

Learn to Love CSS3 [English]

on

  • 1,115 views

Curious to know what this CSS3 hype is all about? Visit this presentation to learn that it isn't just a hype. CSS3 adds awesome new capabilities to a front-end developer's palette of tools to create a ...

Curious to know what this CSS3 hype is all about? Visit this presentation to learn that it isn't just a hype. CSS3 adds awesome new capabilities to a front-end developer's palette of tools to create a beautiful (and functional) website.

Learn more about several of the best new options that CSS3 is giving us, the current level of browser support for CSS3, and lots of useful resources to keep yourself up-to-date and learn more.

If you want to learn how to style your website using CSS3, then this is a presentation you don't want to miss!

Statistics

Views

Total Views
1,115
Views on SlideShare
1,061
Embed Views
54

Actions

Likes
2
Downloads
32
Comments
0

1 Embed 54

http://jandbeyond.org 54

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Use when and where? Some examples. History first
  • Looks hard. I'm happy that in 1994 Hakon and Bert went to work together
  • Very similar as you can see
  • Took a long time. Some browsers found it harder to support/implement CSS2.1 then others
  • No CSS3 logo. Do not use clumns with gaps etc or box-sizing w/o fallback. Not to make things clear on forms. No box-shadow as border on input elements.
  • Think of gradients and RGBA or HSLA for example
  • Things like box-shadow, text-shadow & border-radius on big elements or to much of it
  • I'll start with RGBA because I will use it in following examples. I won't get into depth because there's no time and the sheets will be online.
  • Mozilla 3.x, all Chrome, Safari 3.x, Opera 10.x, IE9, mobile safari Use it on: color; background & border
  • Mozilla 3.x, all Chrome, Safari 3.x, Opera 10.x, IE9, mobile safari Use it on: color; background & border
  • Mozilla 3.x, all Chrome, Safari 3.x, Opera 10.x, IE9, mobile safari Use it on: color; background & border
  • Text-shadow was introduced in CSS2.0 but was removed in CSS2.1 because of compatibility This doesn't work on IE9! Seperate with a comma!
  • Vendor prefixes!
  • Inset + Smaller shadow + with spread
  • shorthand is ...
  • Most readable or middel color as a background color Webkit has two. I only use the latest one
  • NO background image for transparancy
  • Do give it a background-color and make use of it
  • It doesn't recognize text yet. It breaks words on width and not on words. Could be improved
  • I always use all because when only some parts "animate" it looks weird DOESN'T work on IE(, sucks
  • 4 different transforms + vendor prefixes Doesnt work with commas
  • Use it only for "animations" with more then one frame
  • Nooit te veel zelf onthouden, check altijd je sites

Learn to Love CSS3 [English] Learn to Love CSS3 [English] Presentation Transcript