CSS3 in practice

maddesigns | Sven Wolfermann
WebDevCon Hamburg, 17.10.2011

use arrow keys to navigate

border-radius

rounded corners! YEAH!!!!111eleven

border-radius

border-radius: 20px;
border-radius: 10px 40px;
border-radius: 10px 40px 40px 10px;
border-radius: 10px / 40px;

border-radius » enlarge box

border-radius: 50px;
border-radius: 50%;

border-radius » browser-specific prefixes

-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-o-border-radius: 4px;
-khtml-border-radius: 4px;
border-radius: 4px;

all modern browsers and IE9 understand border-radius: 4px;

border-radius » browser support

Chrome

for sure
Firefox

from version 4, a bit buggy in 3.6
Opera

from version 11.5
Safari

a bit buggy with border and percentage values
Internet Explorer

from version 9

border-radius » browser support

”But my IE7 does not show rounded corners!“

It doesn't have to!

There is no good (simple) way to show rounded corners in IE6-8. The better approach is to omit rounded corners.

The content will not get better with rounded corners.

rounded corners

box-shadow » browser specific prefixes?

-webkit-box-shadow: 2px 2px 5px black;
-moz-box-shadow: 2px 2px 5px black;  /* FF 3.6 */
box-shadow: 2px 2px 5px black;

-webkit-box-shadow necessary for iPhone & Android
-webkit-box-shadow: 2px 2px 5px black; box-shadow: 2px 2px 5px black;
-webkit-box-shadow: inset 2px 2px… box-shadow: inset 2px 2px 5px black;

box-shadow » different offset / spread values

box-shadow: 0px 0px 10px black;
box-shadow: 0px 0px 10px 10px black;
box-shadow: 0px 15px 10px -10px black;
box-shadow: inset 0px 15px 10px -10px…

multiple box-shadows

box-shadow: 0px 10px 5px red, 10px 0px 5px blue, 0px -10px 5px green, -10px 0px 5px purple;
split multiple shadows with comma
multiple borders with box-shadow
box-shadow: 0 0 0 5px red, 0 0 0 10px blue, 0 0 0 15px green, 0 0 0 20px purple;

box-shadow » cross browser rendering

box-shadow has not been distributed equaly to the different browsers, the manufacturers adopted box-shadow to their rendering engines separately

Overview of different implementations

http://thany.nl/apps/boxshadows/

box-shadow » browser support

Chrome

anyway
Firefox

from version 4, since 3.5 with -moz-prefix
Opera

from version 10.5
Safari

from version 5.1, since 3.1 with -webkit-prefix
Internet Explorer

from version 9

What the heck am I goin to do with IE6-IE8?

well...

There are ways, Dude. You don't wanna know about it, believe me.

filter:progid:DXImageTransform.Microsoft.Shadow⏎
(color=#e2e2e2, Direction=135, Strength=5); /* IE6-7 */
-ms-filter:"progid:DXImageTransform.Microsoft.Shadow⏎
(color=#e2e2e2, Direction=135, Strength=5)"; /* IE8 */
zoom: 1; /* trigger hasLayout */

rounded corners

drop shadow

We can drop vendor prefixes for box-shadow, background-clip, border-radius in CSS now.

Divya Manian (Opera)

text-shadow

by the way: shadow – what about text-shadow?

text-shadow » value set like box-shadow

inset is not supported

This text has shadow
text-shadow: 2px 2px 5px red;
I need glasses!
text-shadow: 2px 2px 8px gray; color: transparent;

Meet the Letter-Heads – Mozilla text-shadow demo

https://mozillademos.org/demos/shadows/demo.html

text-shadow » browser support

Chrome

no question
Firefox

from version 3.5
Opera

from version 9.5
Safari

from version 3.1
Internet Explorer

comes in version 10

ok... but for current Internet Explorer versions?

if text-shadow is assigned, the text will be displayed without shadow in IE.

you can try a filter but that interferes with the font rendering of IE - it looks ugly and is therefore not recommended!

/* IE6-7 */
filter:progid:DXImageTransform.Microsoft.DropShadow⏎
(color:#333333, offx=3, offy=3);
zoom: 1; /* trigger hasLayout */
 /* IE8 */
-ms-filter:"progid:DXImageTransform.Microsoft.DropShadow⏎
(color:#333333, offx=3, offy=3);

generating content

with :before und :after

A use case for :before und :after

How does that work?

http://l.maddesigns.de/h47b5z (german tutorial)

A use case for :before und :after

the headline

h3 {
  background-color: #68af21;
  color: white;
  font-size: 36px;
  padding: 20px;
  position: relative;
  border-radius: 12px;
}
/* step 1 */
h3:before { 
  content: "\0020"; 
  display: block;
  position: absolute;
  width: 0; 
  height: 0;
  z-index: 2;
/* step 2 */
  bottom: -40px; 
  left: 50px;
/* step 3 */
  border-top-color: #68af21; 
  border-style: solid;
  border-width: 20px;
}

generating content with :before
positioning
add border

The Shapes of CSS — http://l.maddesigns.de/p5Q08r

:before & :after » browser support

Chrome

that
Firefox

is supported
Opera

in all
Safari

browsers
Internet Explorer

even in IE8!

rounded corners

drop shadow

generating content

background gradients

background: linear-gradient();

linear-gradient

current overhead for all browsers

.gradient { 
	
  background-color: yellow; /* Fallback Color */
  background: -webkit-gradient(linear,left top,left bottom,from(yellow),to(blue));
  background: -webkit-linear-gradient(top, yellow 0%, blue 100%); 
  background:    -moz-linear-gradient(top, yellow 0%, blue 100%); 
  background:     -ms-linear-gradient(top, yellow 0%, blue 100%); 
  background:      -o-linear-gradient(top, yellow 0%, blue 100%); 
  
  /* current W3C standard, not implemented yet */
  background:         linear-gradient(to bottom, yellow 0%, blue 100%);
  
}

linear-gradient

-webkit-linear-gradient(top, #c9de96 0%,#398235 100%);
-webkit-linear-gradient(left, #a6c742 0%,#68af21 100%);
-webkit-linear-gradient(bottom, #a6c742 0%,#68af21 100%);
-webkit-linear-gradient(right, #a6c742 0%,#68af21 100%);

linear-gradient — multistage (stop colors)

to 33% light green » from 66% » green

-webkit-linear-gradient(top, #a6c742 0%,
                             #a6c742 33%,
                             #68af21 66%,
                             #68af21 100%);

sharp edge at 50%

-webkit-linear-gradient(top, #a6c742 0%,
                             #a6c742 50%,
                             #68af21 50%,
                             #68af21 100%);

linear-gradient — multistage (stop colors)

from 0 to 50% to 100%

-webkit-linear-gradient(top, #a6c742 0%,
                             #68af21 50%,
                             #a6c742 100%
                             );

light green » green » cyan

-webkit-linear-gradient(top, #a6c742 0%,
                             #68af21 50%,
                             #00aaaa 100%
                             );

linear-gradient — sharp edges

use linear-gradient for faux columns

-webkit-linear-gradient(left, #68af21 0%,
                              #68af21 20%,
                              #a6c742 20%,
                              #a6c742 80%,
                              #68af21 80%,
                              #68af21 100%);

Linear Gradient - Detaillierter Farbverlauf (german blog post)

linear-gradient — sharp edges

-webkit-linear-gradient(left, #a6c742 0%,
                              #a6c742 50%,
                              #68af21 50%,
                              #68af21 100%);

```
background-size: 100px 100px;
```

CSS3 Secrets: 10 things you might not know about CSS3

linear-gradient — sharp edges

-webkit-linear-gradient(-45deg, #a6c742 25%, 
                              #68af21 25%, 
                              #68af21 50%, 
                              #a6c742 50%, 
                              #a6c742 75%, 
                              #68af21 75%, 
                              #68af21 100%);
background-size: 100px 100px;

CSS3 Secrets: 10 things you might not know about CSS3

CSS3 Patterns Gallery by Lea Verou

http://leaverou.me/css3patterns/

Gradients in CSS3

other gradient functions

linear-gradient()
radial-gradient()
repeating-linear-gradient()
repeating-radial-gradient()

repeating-linear-gradient(red, blue 20px, red 40px);
repeating-radial-gradient(red, blue 20px, red 40px);

gradients » browser support

Chrome

with -webkit-prefix
Firefox

with -moz-prefix
Opera

with -o-prefix
Safari

with -webkit-prefix
Internet Explorer

comes in IE10 with -ms-prefix

Hm, so can I really use it with real world projects?

Sure!

To be honest, it's a prefix hell but works pretty good. And for IE, a PNG background fallback is the best solution.

And here is a nice online helper for gradient CSS:

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

rounded corners

drop shadow

generate content

background gradient

Web-Fonts

In Your @font-face Presentation

Web-Fonts are supported in every browser even in IE6

That's perfect!
too good to be true...

@font-face {
 font-family: 'DINBold';
 src: url("din-bold-webfont.eot");
 src: url("din-bold-webfont.eot?#iefix") format("embedded-opentype"),
      url("din-bold-webfont.woff") format("woff"), 
      url("din-bold-webfont.ttf") format("truetype"), 
      url("din-bold-webfont.svg#DINBold") format("svg");
}

what the hell...

Font-Face assignment

font: 48px/1.4 'Gloria Hallelujah', cursive;

normal font

font with webfonts

http://www.google.com/webfonts

http://www.fontsquirrel.com/ @font-face generator

rounded corners

drop shadow

generate content

linear gradients

webfonts

web DevCon

The conference for web developer

Thank you for your attention!

Who was that dude?

Sven Wolfermann - Certified TYPO3 Integrator

Sven Wolfermann, 34 - Freelancer from Berlin
TYPO3camp Berlin organization team
writes for the Webstandards-Mag
Twitter: @maddesigns
Web: http://maddesigns.de

HTML5 slideshow by Google

CSS3 in practice

border-radius

border-radius

border-radius » enlarge box

border-radius » browser-specific prefixes

border-radius » browser support

Chrome

Firefox

Opera

Safari

Internet Explorer

border-radius » browser support

Browser market in Europe

rounded corners

web DevCon

box-shadow

box-shadow » browser specific prefixes?

box-shadow » different offset / spread values

multiple box-shadows

multiple borders with box-shadow

box-shadow » cross browser rendering

Overview of different implementations

box-shadow » browser support

Chrome

Firefox

Opera

Safari

Internet Explorer

What the heck am I goin to do with IE6-IE8?

rounded corners

drop shadow

web DevCon

text-shadow

text-shadow » value set like box-shadow

Meet the Letter-Heads – Mozilla text-shadow demo

text-shadow » browser support

Chrome

Firefox

Opera

Safari

Internet Explorer

ok... but for current Internet Explorer versions?

generating content

A use case for :before und :after

A use case for :before und :after

the headline

The Shapes of CSS — http://l.maddesigns.de/p5Q08r

:before & :after » browser support

Chrome

Firefox

Opera

Safari

Internet Explorer

rounded corners

drop shadow

generating content

web DevCon

background gradients

linear-gradient

linear-gradient

linear-gradient — multistage (stop colors)

linear-gradient — multistage (stop colors)

linear-gradient — sharp edges

linear-gradient — sharp edges

linear-gradient — sharp edges

CSS3 Patterns Gallery by Lea Verou

Gradients in CSS3

gradients » browser support

Chrome

Firefox

Opera

Safari

Internet Explorer

Hm, so can I really use it with real world projects?

rounded corners

drop shadow

generate content

background gradient

web DevCon

Web-Fonts