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!
20. p.rgba1 {
color: #000000;
color: rgba(0,0,0,1);
}
p.rgba2 {
color: #FF0000;
color: rgba(255,0,0,.5);
}
p.rgba3 {
color: #1ebdbe;
color: rgba(30,189,190,.25);
}
Always put the non-rgba color for older browsers before the rgba color
32. <div class=”gradient1”></div>
div.gradient1 {
/* Basic color */
background-color: #183c7a;
/* Chrome, Safari4+ */
background-image: -webkit-gradient(linear, left top, left bottom,
color-stop(0%,#183c7a), color-stop(100%,#84b6f4));
/* Chrome10+, Safari5.1+ & The rest */
background-image: -webkit-linear-gradient(top, #183c7a 0%,#84b6f4 100%);
background-image: -moz-linear-gradient(top, #183c7a 0%, #84b6f4 100%);
background-image: -o-linear-gradient(top, #183c7a 0%,#84b6f4 100%);
background-image: -ms-linear-gradient(top, #183c7a 0%,#84b6f4 100%);
background-image: linear-gradient(top, #183c7a 0%,#84b6f4 100%);
}
Always start with a solid color for older browsers
33. <div class=”gradient2”></div>
div.gradient2 {
/* Basic color */
background-color: #183c7a;
/* Chrome, Safari4+ */
background: -webkit-gradient(radial, center center, 0px, center center,
100%, color-stop(0%,rgba(24,60,122,1)),
color-stop(100%,rgba(132,182,244,0.5)));
/* Chrome10+, Safari5.1+ & The rest */
background: -webkit-radial-gradient(center, ellipse cover,
rgba(24,60,122,1) 0%,rgba(132,182,244,0.5) 100%);
background: -moz-radial-gradient(Same as webkit)
background: o-radial-gradient(Same as webkit)
background: radial-gradient(center, ellipse cover,
rgba(24,60,122,1) 0%,rgba(132,182,244,0.5) 100%);
}
34. <div class=”gradient3”></div>
div.gradient3 {
/* Basic color */
background-color: red;
/* Chrome, Safari4+ */
background-image: -webkit-gradient(radial, center center, 0px, center
center, 100%, color-stop(0%,rgba(24,60,122,1)),
color-stop(100%,rgba(132,182,244,0.5)));
background-image: -webkit-radial-gradient(center, ellipse cover,
rgba(24,60,122,1) 0%,rgba(132,182,244,0.5) 100%);
background-image: -moz-radial-gradient(Same as webkit)
background-image: o-radial-gradient(Same as webkit)
background-image: radial-gradient(center, ellipse cover,
rgba(24,60,122,1) 0%,rgba(132,182,244,0.5) 100%);
}
35. body {
background: url(../images/pattern2.png) repeat-x top left,
url(../images/pattern.png),
linear-gradient(top, rgba(0,0,0,.5) 0%,rgba(0,0,0,0) 100%);
background-color: #1EBDBE;
}
By setting background-color last you can simply only change the color
36. div.wordwrap1 {
word-wrap: normal;
}
div.wordwrap2 {
word-wrap: break-word;
}
div.textoverflow1 {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
div.textoverflow2 {
white-space: nowrap;
overflow: hidden;
text-overflow: clip;
}
:hover {overflow:visible} makes the text visible again
50. Use it today, but be Progressively enhance!
careful where to use it
CSS3
Don't let it take
Put users first!
over
51. Time up
Robin Poort (@rhcpoort)
ThemePartner (@theme_partner)
Editor's Notes
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 &quot;animate&quot; it looks weird DOESN'T work on IE(, sucks
4 different transforms + vendor prefixes Doesnt work with commas
Use it only for &quot;animations&quot; with more then one frame
Nooit te veel zelf onthouden, check altijd je sites