Upload
mayflower-gmbh
View
4.378
Download
1
Embed Size (px)
DESCRIPTION
CSS3 als Untermenge von HTML5 bietet viele tolle Neuerungen. Aufgrund der fehlenden Spezifikationen braut hier jedoch jeder Browser sein eigenes Süppchen. Was für Vorteile CSS3 dennoch bietet und wie die Nachteile mit den richtigem Tool ausgeglichen werden können soll dieser Vortrag von Alberto Assmann exemplarisch zeigen.
Citation preview
© 2011 Mayflower GmbH
CSS3 Produktiv nutzen
Alberto Assmann I 03.11.2011
CSS3 Produktiv nutzen I Mayflower GmbH I 30. November 2011 I 2
I Jahrgang 1991
I Auszubildender zum Fachinformatiker für Anwendungsentwicklung I Seit 2010 bei der Mayflower GmbH
I PHP Erfahrung seit 2006
I OXID eShop Certified Engineer
It‘se me...
CSS3 Produktiv nutzen I Mayflower GmbH I 30. November 2011 I 3
Die Motivation
CSS3 Produktiv nutzen I Mayflower GmbH I 30. November 2011 I 4
Die Motivation
Titel der Präsentation I Mayflower GmbH I 30. November 2011 I 5
CSS3 Produktiv nutzen I Mayflower GmbH I 30. November 2011 I 6
CSS3 ist Neu...
Titel der Präsentation I Mayflower GmbH I 30. November 2011 I 7
Beispiel
CSS3 Produktiv nutzen I Mayflower GmbH I 30. November 2011 I 8
CSS3 ist wie ein Zaubertrank
CSS3 Produktiv nutzen I Mayflower GmbH I 30. November 2011 I 9
Zutaten
CSS3 Produktiv nutzen I Mayflower GmbH I 30. November 2011 I 10
Animationen (Animations):
animation-name: fall, fade; animation-iteration-count: infinite; animation-direction: normal; animation-timing-function: ease-out;
Browser
Unterstützung -webkit -webkit -moz progid:DXImageTransform
CSS3 Produktiv nutzen I Mayflower GmbH I 30. November 2011 I 11
Farbverläufe (Gradients):
background-image: linear-gradient( bottom, rgb(71,117,252) 32%, rgb(100,153,255) 66%, rgb(42,97,97) 83% );
Browser
Unterstützung -webkit -webkit -moz -ms -o
CSS3 Produktiv nutzen I Mayflower GmbH I 30. November 2011 I 12
Hintergrundgröße (Background-size):
background-size: 50% 25%;
Browser
Unterstützung -webkit -webkit -moz
CSS3 Produktiv nutzen I Mayflower GmbH I 30. November 2011 I 13
Bilderrand (Border-image):
border-image: url(pikachu.png) 49 41 repeat;
Browser
Unterstützung -webkit -webkit -moz -o
CSS3 Produktiv nutzen I Mayflower GmbH I 30. November 2011 I 14
Runde Ecken (Border-radius):
border-radius: 5px 5px 5px 5px;
Browser
Unterstützung -webkit -webkit -moz
CSS3 Produktiv nutzen I Mayflower GmbH I 30. November 2011 I 15
Schatten (Box-shadow):
box-shadow: 5px 5px 5px #000000;
Browser
Unterstützung -webkit -webkit -moz progid:DXImageTransform
CSS3 Produktiv nutzen I Mayflower GmbH I 30. November 2011 I 16
Textspalten (Column-count):
column-count: 4;
Browser
Unterstützung -webkit -webkit -moz
CSS3 Produktiv nutzen I Mayflower GmbH I 30. November 2011 I 17
Farbigkeit (HSLa, RGBa):
Color: hsla(0,100%,50%,0.4); Background-color:
Browser
Unterstützung
CSS3 Produktiv nutzen I Mayflower GmbH I 30. November 2011 I 18
Worttrennung (Hyphen):
hyphens: auto;
Browser
Unterstützung -moz
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
CSS3 Produktiv nutzen I Mayflower GmbH I 30. November 2011 I 19
Mehrere Hintergrundbilder (Multiple backgrounds):
background-image: url(sheep.png), url(betweengrassandsky.png);
Browser
Unterstützung
CSS3 Produktiv nutzen I Mayflower GmbH I 30. November 2011 I 20
Deckkraft (Opacity):
Opacity: 0.5;
Browser
Unterstützung filter: alpha(opacity=50)
CSS3 Produktiv nutzen I Mayflower GmbH I 30. November 2011 I 21
Text überlauf (text-overflow):
text-overflow: ellipsis-word;
Browser
Unterstützung -o
Buffer Overflow because off...
CSS3 Produktiv nutzen I Mayflower GmbH I 30. November 2011 I 22
Textschatten (text-shadow):
Text-shadow: 10px 10px 3px #666;
Browser
Unterstützung
CSS3 Produktiv nutzen I Mayflower GmbH I 30. November 2011 I 23
Umformungen (Transform):
transform: scale(0.6) rotate(33deg) translateX(136px) translateY(-45px) skewY(-16deg); transform-origin: 32% 0%;
Browser
Unterstützung -webkit -webkit -moz -ms -o
CSS3 Produktiv nutzen I Mayflower GmbH I 30. November 2011 I 24
Übergänge (Transitions):
Div:hover { transition: rotate(360deg) scale(2.0) rotate(-90deg); }
Browser
Unterstützung -webkit -webkit -moz progid:DXImageTransform -o
CSS3 Produktiv nutzen I Mayflower GmbH I 30. November 2011 I 25
Verschiedene Druiden – verschiedene Tränke:
CSS3 Produktiv nutzen I Mayflower GmbH I 30. November 2011 I 26
Das richtige Tool:
CSS3 Produktiv nutzen I Mayflower GmbH I 30. November 2011 I 27
SASS
Titel der Präsentation I Mayflower GmbH I 30. November 2011 I 28
/** CSS */ .content-navigation { border-color: #3bbfce; } /** SASS */ .content-navigation border-color: #3bbfce
Titel der Präsentation I Mayflower GmbH I 30. November 2011 I 29
$color: #3bbfce .content-navigation border-color: $color
Titel der Präsentation I Mayflower GmbH I 30. November 2011 I 30
/** CSS */ table.hl { margin: 2em 0; } table.hl td.ln { text-align: right; } /** SASS */ table.hl margin: 2em 0 td.ln text-align: right
Titel der Präsentation I Mayflower GmbH I 30. November 2011 I 31
@mixin round-corners($radius) -moz-border-radius: $radius -webkit-border-radius: $radius -khtml-border-radius: $radius border-radius: $radius @include round-corners(5px)
Titel der Präsentation I Mayflower GmbH I 30. November 2011 I 32
/** CSS */ div.foo { border: 3px; div.foo:hover { color: #FF0000; } } /** SASS */ div.foo border: 3px &:hover color: #FF0000
CSS3 Produktiv nutzen I Mayflower GmbH I 30. November 2011 I 33
I Größenberechnung (Bsp.: 2px + $width)
I Farbberechnung
I Stringkonkatenation
Berechnungen:
CSS3 Produktiv nutzen I Mayflower GmbH I 30. November 2011 I 34
I @if/@else
I @for
I @each
I @while
Kontrollstrukturen:
CSS3 Produktiv nutzen I Mayflower GmbH I 30. November 2011 I 35
Compiliertes CSS?
Titel der Präsentation I Mayflower GmbH I 30. November 2011 I 36
sass –watch foo.scss:foo.css sass –watch /var/www/app/public/css
Titel der Präsentation I Mayflower GmbH I 30. November 2011 I 37
CSS3 Produktiv nutzen I Mayflower GmbH I 30. November 2011 I 38
SASS Framework:
I Vordefinierte Mixins I Reset I Textools I Farbtools I Als gem verfügbar
Titel der Präsentation I Mayflower GmbH I 30. November 2011 I 39
Titel der Präsentation I Mayflower GmbH I 30. November 2011 I 40
http://css2sass.heroku.com/
http://blog.mayflower.de/archives/745-Agiles-CSS.html#extended
CSS3 Produktiv nutzen I Mayflower GmbH I 30. November 2011 I 41
Unter dem Strich:
© 2011 Mayflower GmbH
Alberto Assmann [email protected] +49 931 35965 1164 Mayflower GmbH Pleichertorstr. 2 97070 Würzburg
Referent
Vielen Dank für Ihre Aufmerksamkeit!
CSS3 Produktiv nutzen I Mayflower GmbH I 30. November 2011 I 43
I http://www.karzauninkat.com/Goldhtml/ I http://schokoladen-kunst.de I http://www.foxplex.com/components/uploads/qpcll5zh-CSS3_Logo.jpg I http://www.geo-reisecommunity.de/bild/405784/altes-Auto I http://www.normansblog.de/demos/browser-support-checklist-css3/ I http://www.asterix.com/news-de/unter-der-lupe/ I http://www.normansblog.de/css3-im-detail-background-size/ I http://www.normansblog.de/css3-im-detail-border-image/ I http://www.normansblog.de/css3-im-detail-columns/ I http://www.normansblog.de/css3-im-detail-multiple-backgrounds/ I http://www.spiegel.de/fotostrecke/fotostrecke-21123-3.html I http://www.ahnungslos.ch/wp-content/uploads/2009/12/schmuck.jpg I http://sass-lang.com http://xkcd.com/303/ I http://www.welt.de/politik/deutschland/article3660279/Erst-friedlich-dann-Krawall.html I http://portfo.li/umaar/841377-motivational-programming-posters-redux-the-code-strikes-back I http:// www.elbuhari.at/html1/images/stories/fragen.jpg
Quellen