Date post: | 01-Nov-2014 |
Category: |
Technology |
Upload: | mayflower-gmbh |
View: | 4,368 times |
Download: | 1 times |
© 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