CSS3

im praktischen Einsatz

maddesigns | Sven Wolfermann
WebDevCon Hamburg, 17.10.2011

Pfeiltasten zur Navigation nutzen

border-radius

runde Ecken! YEAH!!!!111elf

border-radius

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

border-radius » Box vergrößern

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

border-radius » browserspezifische Präfixe

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

border-radius: 4px;
verstehen alle modernen Browser und der IE9

border-radius » Browser-Support

Chrome

na klar
Firefox

ab Version 4, etwas buggy in 3.6
Opera

ab Version 11.5
Safari

mit border etwas buggy bei Prozentwerten
Internet Explorer

ab Version 9

border-radius » Browser-Support

”Aber mein IE7 zeigt keine runden Ecken!“

muss er auch nicht!

Es gibt keinen guten (einfachen) Weg dem IE6-8 runde Ecken beizubringen. Die bessere Alternative ist runde Ecken weg zu lassen!

Der Informationsgehalt eines Textes wird durch die runden Ecken nicht besser.

runde Ecken

box-shadow » browserspezifische Präfixe?

-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 ist für iPhone & Android noch nötig
-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 » anderer Offset / Spread-Wert

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 Schatten

box-shadow: 0px 10px 5px red, 10px 0px 5px blue, 0px -10px 5px green, -10px 0px 5px purple;
mehrere Schatten mit Komma trennen
multiple border mit 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 ist nicht ”gleichmäßig“ implementiert, die Browserhersteller haben das Rendering für Ihre Engine angepasst

Übersicht der verschiedenen Implementationen

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

box-shadow » Browser-Support

Chrome

sowieso
Firefox

ab Version 4, seit 3.5 mit -moz-Präfix
Opera

ab Version 10.5
Safari

ab Version 5.1, seit 3.1 mit -webkit-Präfix
Internet Explorer

ab Version 9

Was mache ich denn mit dem IE6-8?

naja...

geht auch irgendwie

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

runde Ecken

Schatten

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

Divya Manian (Opera)

text-shadow

apropos Schatten – Was ist mit Text-Schatten?

text-shadow » Werte-Set wie box-shadow

inset wird nicht unterstützt

Das ist der Text
text-shadow: 2px 2px 5px red;
Ich brauch 'ne Brille
text-shadow: 2px 2px 8px gray; color: transparent;

text-shadow » Browser-Support

Chrome

keine Frage
Firefox

ab Version 3.5
Opera

ab Version 9.5
Safari

ab Version 3.1
Internet Explorer

erst ab Version 10

Hm... und für aktuelle Internet Explorer?

wenn text-shadow zugewiesen ist, wird der Text ganz normal (ohne Schatten) dargestellt.

man kann auf filter zurückgreifen, das beeinflusst allerdings das Font-Rendering – es wird unschön und ist nicht zu empfehlen!

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

Content-Generierung

mit :before und :after

Ein praktischen Beispiel für :before und :after

Wie funktioniert das?

http://l.maddesigns.de/h47b5z

Ein praktischen Beispiel für :before und :after

Die Überschrift

h3 {
  background-color: #68af21;
  color: white;
  font-size: 36px;
  padding: 20px;
  position: relative;
  border-radius: 12px;
}

h3:before {
  content: "\0020"; 
  display: block;
  position: absolute;
  width: 0; 
  height: 0;
  z-index: 2;

  bottom: -40px;
  left: 50px;

  border-top-color: #68af21;
  border-style: solid;
  border-width: 20px;
}

Content-Generierung mit :before
Positionierung
Zuweisung von border

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

:before & :after » Browser-Support

Chrome

das
Firefox

können
Opera

alle
Safari

Browser
Internet Explorer

sogar ab Version 8!

runde Ecken

Schatten

Content generieren

Hintergrundverlauf

background: linear-gradient();

linear-gradient

aktueller Overhead für alle Browser

.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%); 
  
  /* aktueller W3C Standard, bisher nicht implementiert */
  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 — mehrstufig (stop-color)

bis 33% hellgrün » ab 66% » grün

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

harte Kante bei 50%

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

linear-gradient — mehrstufig (stop-color)

von 0 zu 50% zu 100%

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

von hellgrün » grün » türkis

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

linear-gradient — harte Kanten

Verlaufshintergrund als Faux-Column nutzen

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

Linear Gradient - Detaillierter Farbverlauf - CSS3 Adventskalender Tag 4

linear-gradient — harte Kanten

-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 — harte Kanten

-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

Gradienten in CSS3

weitere Verlaufsfunktinen

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

mit -webkit-Präfix
Firefox

mit -moz-Präfix
Opera

mit -o-Präfix
Safari

mit -webkit-Präfix
Internet Explorer

erst ab Version 10 mit -ms-Präfix

Wie soll man damit umgehen?

Verwenden!

Zugegeben ist es die Präfix-Hölle!

Für den Internet Explorer auf PNG-Bilder zurückgreifen

Online-Tools verwenden:

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

runde Ecken

Schatten

Content generieren

Verlauf

Web-Fonts

In Your @font-face Presentation

Web-Fonts werden in allen Browsern bis zurück zum IE6 unterstützt

Das klingt doch gut!
zu schön um wahr zu sein...

@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");
}

um Gottes Willen...

Font-Face Zuweisung

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

normale Schrift

Schrift mit Webfont

http://www.google.com/webfonts

http://www.fontsquirrel.com/

@font-face Generator

runde Ecken

Schatten

Content generieren

Verlauf

Webfont

web DevCon

Die Konferenz für Web-Entwickler

Danke für die Aufmerksamkeit!

Wer war die Flitzpiepe da überhaupt?

Sven Wolfermann - Certified TYPO3 Integrator

Sven Wolfermann, 34 - Freelancer aus Berlin
TYPO3camp Berlin Orga
schreibt für das Webstandards-Magazin
Twitter: @maddesigns
Web: http://maddesigns.de

HTML5 slideshow by Google

CSS3

border-radius

border-radius

border-radius » Box vergrößern

border-radius » browserspezifische Präfixe

border-radius » Browser-Support

Chrome

Firefox

Opera

Safari

Internet Explorer

border-radius » Browser-Support

Browsermarkt in Europa

runde Ecken

web DevCon

box-shadow

box-shadow » browserspezifische Präfixe?

box-shadow » anderer Offset / Spread-Wert

multiple Schatten

multiple border mit box-shadow

box-shadow » Cross-Browser Rendering

Übersicht der verschiedenen Implementationen

box-shadow » Browser-Support

Chrome

Firefox

Opera

Safari

Internet Explorer

Was mache ich denn mit dem IE6-8?

runde Ecken

Schatten

web DevCon

text-shadow

text-shadow » Werte-Set wie box-shadow

text-shadow » Browser-Support

Chrome

Firefox

Opera

Safari

Internet Explorer

Hm... und für aktuelle Internet Explorer?

Content-Generierung

Ein praktischen Beispiel für :before und :after

Ein praktischen Beispiel für :before und :after

Die Überschrift

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

:before & :after » Browser-Support

Chrome

Firefox

Opera

Safari

Internet Explorer

runde Ecken

Schatten

Content generieren

web DevCon

Hintergrundverlauf

linear-gradient

linear-gradient

linear-gradient — mehrstufig (stop-color)

linear-gradient — mehrstufig (stop-color)

linear-gradient — harte Kanten

linear-gradient — harte Kanten

linear-gradient — harte Kanten

Gradienten in CSS3

Gradients » Browser-Support

Chrome

Firefox

Opera

Safari

Internet Explorer

Wie soll man damit umgehen?

runde Ecken

Schatten

Content generieren

Verlauf

web DevCon

Web-Fonts

Web-Fonts werden in allen Browsern bis zurück zum IE6 unterstützt

Font-Face Zuweisung