Sven Wolfermann
CSS3 & Responsive Web
Twittern: @maddesigns #mmt28 #css3
Multimediatreff 28 - Köln, 03.12.2011
Sven Wolfermann
Twittern: @maddesigns #mmt28 #css3
Multimediatreff 28 - Köln, 03.12.2011
CSS3 Logo
runde Ecken! YEAH!!!!111elf
border-radius: 20px;
border-radius: 10px 40px;
border-radius: 10px 40px 40px 10px;
border-radius: 10px / 40px;
border-radius: 50px;
border-radius: 50%;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-o-border-radius: 4px;
-khtml-border-radius: 4px;
border-radius: 4px;
border-radius: 4px;
na klar
ab Version 4, etwas buggy in 3.6
ab Version 11.5
mit border etwas buggy bei Prozentwerten
ab Version 9
”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.
Schatten - Whoohoo!
-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: 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: 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…
box-shadow: 0px 10px 5px red,
10px 0px 5px blue,
0px -10px 5px green,
-10px 0px 5px purple;
box-shadow: 0 0 0 5px red,
0 0 0 10px blue,
0 0 0 15px green,
0 0 0 20px purple;
box-shadow ist nicht ”gleichmäßig“ implementiert, die Browserhersteller haben das Rendering für Ihre Engine angepasst
sowieso
ab Version 4, seit 3.5 mit -moz-Präfix
ab Version 10.5
ab Version 5.1, seit 3.1 mit -webkit-Präfix
ab Version 9
We can drop vendor prefixes for box-shadow, background-clip, border-radius in CSS now.
mit :before
und :after
Pseudo-Elementen
h3 { background-color: #68af21; color: white; font-size: 36px; padding: 20px; position: relative; border-radius: 12px; } h3:before { content: "\0020"; 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
Hinweis: zur Visualisierung wird der Inhalt der Demo rot eingefärbt
Positionierung
Zuweisung von border
das
können
alle
Browser
sogar ab Version 8!
in your @font-face (© Jake Archibald)
Das klingt doch gut!
@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"); }
font: 48px/1.4 'Gloria Hallelujah', cursive;
http://www.google.com/webfonts
@font-face Generator
background: 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%); }
-webkit-linear-gradient(top, #184070 0%,#819fd6 100%);
-webkit-linear-gradient(left, #184070 0%,#819fd6 100%);
-webkit-linear-gradient(bottom, #184070 0%,#819fd6 100%);
-webkit-linear-gradient(right, #184070 0%,#819fd6 100%);
von 0 zu 50% zu 100%
-webkit-linear-gradient(top, orange 0%, red 50%, orange 100% );
von orange » red » blue
-webkit-linear-gradient(top, orange 0%, red 50%, blue 100% );
Verlaufshintergrund als Faux-Column nutzen
-webkit-linear-gradient(left, #184070 0%, #184070 20%, #819fd6 20%, #819fd6 80%, #184070 80%, #184070 100%);
-webkit-linear-gradient(left, #184070 0%, #184070 50%, #819fd6 50%, #819fd6 100%);
background-size: 100px 100px;
-webkit-linear-gradient(-45deg, #184070 25%, #819fd6 25%, #819fd6 50%, #184070 50%, #184070 75%, #819fd6 75%, #819fd6 100%); background-size: 100px 100px;
weitere Verlaufsfunktinen
repeating-linear-gradient(red, blue 20px, red 40px); repeating-radial-gradient(red, blue 20px, red 40px);
mit -webkit-Präfix
mit -moz-Präfix
mit -o-Präfix
mit -webkit-Präfix
erst ab Version 10 mit -ms-Präfix
Verwenden!
Zugegeben ist es die Präfix-Hölle!
Für den Internet Explorer auf PNG-Bilder zurückgreifen
Online-Tools verwenden:
Übergänge zwischen dynamischen Pseudoklassen steuern
transition-property
welche Eigenschaft wird verändert, z.B. background-color, opacity, … oder all – also alle Eigenschaften gleichzeitig
transition-duration
Die Dauer der Veränderung – Angabe einer Zeit für alle oder kommagetrennt je “transition-property” Eigenschaft
transition-timing-function
Bézierkurve á la jQuery Animation, also ob die Animation gleichmäßig abläuft linear oder ease-Kurven.
transition-delay
Eine Verzögerung der Veränderung, sozusagen bis die Animation beginnt
dynamische Pseudoklassen
:hover, :active, :focus, :target, :link, :visited, :disabled, ...
aber auch zwischen @media-Queries
mit Kurzschreibweise und allen Browser-Präfixen
.box { -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } .box:hover { background-color: #184070 }
ohne CSS3 mit CSS3 transition
a.transition1 { -webkit-transition: color 1s ease-out; /* weitere Browser Varianten */ } a.transition2 { -webkit-transition: background-color 1s ease-out; /* weitere Browser Varianten */ } a:hover { background-color: red; color: white; }
Ceaser - CSS Easing Animation Tool (matthewlein.com/ceaser/)
cubic-bezier.com (cubic-bezier.com)
CSS Transitions 101 (www.webdesignerdepot.com/2010/01/css-transitions-101/)
Let the Web move you — CSS3 Animations and Transitions (www.webdirections.org/blog/let-the-web-move-you-css3-animations-and-transitions/)
mit -webkit-Präfix
mit -moz-Präfix
mit -o-Präfix
mit -webkit-Präfix
erst ab Version 10 mit -ms-Präfix
jetzt kommt Bewegung ins Spiel!
@-webkit-keyframes pulse { from { -webkit-transform: scale(1); } to { -webkit-transform: scale(2); } } .animation { -webkit-animation: pulse 1s ease 0s alternate none infinite; -moz-animation: pulse 1s ease 0s alternate none infinite; animation: pulse 1s ease 0s alternate none infinite; } .animation:hover { -webkit-animation-play-state:paused; -moz-animation-play-state:paused; animation-play-state:paused; }
Shorthand:
/* plus prefix */ animation: pulse 1s ease 0s alternate none infinite;
Einzeleigenschaften
animation-name: pulse animation-duration: 1s animation-timing-function: ease animation-delay: 0s animation-direction: alternate animation-fill-mode: none animation-iteration-count: infinite
Animate.css (daneden.me/animate/)
Animatable (leaverou.github.com/animatable/)
mit -webkit-Präfix
mit -moz-Präfix
???
mit -webkit-Präfix
erst ab Version 10 mit -ms-Präfix
Auf Umgebung und Engeräte reagieren
unzähle Geräte mit unterschiedlichsten Bildschirmgrößen
/* Smartphones (portrait and landscape) */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */ } /* iPads (portrait and landscape) */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* Styles */ } /* Desktops and laptops */ @media only screen and (min-width : 1024px) { /* Styles */ }
get auch bei extern eingebundenen Files
<link rel="stylesheet" href="smartphone.css" media="only screen and (min-device-width : 320px) and (max-device-width : 480px)">
für höhere Auflösung optimiertes CSS - iPhone4
<link rel="stylesheet" href="iphone4.css" media="only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5)">
@media screen and (max-width: 600px) { header, footer, .main { float: none; width: auto; } }
keine statische Bildgrößen
img { max-width: 100%; }
http://nicolasgallagher.com/responsive-images-using-css3/
<img src="image.jpg" alt="" data-src-600px="image-600px.jpg">
https://github.com/filamentgroup/Responsive-Images
<img src="small.jpg?full=large.jpg">
japp
jo
ja
na klar
ab Version 9
respond.js - https://github.com/scottjehl/Respond
ist mittlerweile auch in modernizr integriert
Coding mit SASS & Compass
SASS (Syntactically Awesome Stylesheets) bietet neue Möglichkeiten für CSS, z.B. Variablen, Verschachtelung oder Code-Snippets
Compass ist ein Framework, dass SASS erweitert und z.B. eigene Code-Snippets mitbringt
zudem bietet Compass ein umfangreiche Funktionen, die das Schreiben von CSS erleichtern
SASS kompiliert zu sauber strukturiertem CSS
/* style.scss */ $navbar-width: 800px; $items: 5; $navbar-color: #ce4dd6; nav { width: $navbar-width; border-bottom: 2px solid $navbar-color; li { float: left; width: $navbar-width/$items - 10px; } a { background-color: lighten($navbar-color, 20%); &:hover { background-color: lighten($navbar-color, 10%); } } }
nav { width: 800px; border-bottom: 2px solid #ce4dd6; } nav li { float: left; width: 150px; } nav a { background-color: #e5a0e9; } nav a:hover { background-color: #d976e0; }
.box { @include border-radius(4px); }
automatische Spriting
public/images/icon/new.png public/images/icon/edit.png public/images/icon/save.png public/images/icon/delete.png
@import "icon/*.png"; @include all-icon-sprites;
.icon-sprite, .icon-delete, .icon-edit, .icon-new, .icon-save { background: url('/images/icon-s34fe0604ab.png') no-repeat; } .icon-delete { background-position: 0 0; } .icon-edit { background-position: 0 -32px; } .icon-new { background-position: 0 -64px; } .icon-save { background-position: 0 -96px; }