CSS3 produktiv

It‘se me...I Jahrgang 1991I Auszubildender zum Fachinformatiker für AnwendungsentwicklungI Seit 2010 bei der Mayflower GmbHI PHP Erfahrung seit 2006I OXID eShop Certified Engineer CSS3 Produktiv nutzen I Mayflower GmbH I 30. November 2011 I 2

Die Motivation 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

Titel der Präsentation I Mayflower GmbH I 30. November 2011 I 5

CSS3 ist Neu... CSS3 Produktiv nutzen I Mayflower GmbH I 30. November 2011 I 6

Beispiel Titel der Präsentation I Mayflower GmbH I 30. November 2011 I 7

CSS3 ist wie ein Zaubertrank CSS3 Produktiv nutzen I Mayflower GmbH I 30. November 2011 I 8

Zutaten CSS3 Produktiv nutzen I Mayflower GmbH I 30. November 2011 I 9

Animationen (Animations): animation-name: fall, fade; animation-iteration-count: infinite; animation-direction: normal; animation-timing-function: ease-out;BrowserUnterstützung -webkit -webkit -moz progid:DXImageTransform CSS3 Produktiv nutzen I Mayflower GmbH I 30. November 2011 I 10

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 11

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 12

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 13

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 14

Schatten (Box-shadow):box-shadow: 5px 5px 5px #000000;BrowserUnterstützung -webkit -webkit -moz progid:DXImageTransform CSS3 Produktiv nutzen I Mayflower GmbH I 30. November 2011 I 15

Textspalten (Column-count): column-count: 4; Browser Unterstützung -webkit -webkit -moz CSS3 Produktiv nutzen I Mayflower GmbH I 30. November 2011 I 16

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 17

Worttrennung (Hyphen): Ut enim ad minim veniam, quishyphens: auto; nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat Browser Unterstützung -moz CSS3 Produktiv nutzen I Mayflower GmbH I 30. November 2011 I 18

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 19

Deckkraft (Opacity): Opacity: 0.5;BrowserUnterstützung filter: alpha(opacity=50) CSS3 Produktiv nutzen I Mayflower GmbH I 30. November 2011 I 20

Text überlauf (text-overflow): Buffer Overflow because off...text-overflow: ellipsis-word; Browser Unterstützung -o CSS3 Produktiv nutzen I Mayflower GmbH I 30. November 2011 I 21

Textschatten (text-shadow):Text-shadow: 10px 10px 3px #666; Browser Unterstützung CSS3 Produktiv nutzen I Mayflower GmbH I 30. November 2011 I 22

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 23

Übergänge (Transitions):Div:hover { transition: rotate(360deg) scale(2.0) rotate(-90deg);}BrowserUnterstützung -webkit -webkit -moz progid:DXImageTransform -o CSS3 Produktiv nutzen I Mayflower GmbH I 30. November 2011 I 24

Verschiedene Druiden – verschiedene Tränke: CSS3 Produktiv nutzen I Mayflower GmbH I 30. November 2011 I 25

Das richtige Tool: CSS3 Produktiv nutzen I Mayflower GmbH I 30. November 2011 I 26

SASS CSS3 Produktiv nutzen I Mayflower GmbH I 30. November 2011 I 27

/** CSS */.content-navigation { border-color: #3bbfce;}/** SASS */.content-navigation border-color: #3bbfce Titel der Präsentation I Mayflower GmbH I 30. November 2011 I 28

$color: #3bbfce.content-navigation border-color: $color Titel der Präsentation I Mayflower GmbH I 30. November 2011 I 29

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

@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 31

/** CSS */div.foo { border: 3px; div.foo:hover { color: #FF0000; }}/** SASS */div.foo border: 3px &:hover color: #FF0000 Titel der Präsentation I Mayflower GmbH I 30. November 2011 I 32

Berechnungen:I Größenberechnung (Bsp.: 2px + $width)I FarbberechnungI Stringkonkatenation CSS3 Produktiv nutzen I Mayflower GmbH I 30. November 2011 I 33

Kontrollstrukturen:I @if/@elseI @forI @eachI @while CSS3 Produktiv nutzen I Mayflower GmbH I 30. November 2011 I 34

Compiliertes CSS? CSS3 Produktiv nutzen I Mayflower GmbH I 30. November 2011 I 35

sass –watch foo.scss:foo.csssass –watch /var/www/app/public/css Titel der Präsentation I Mayflower GmbH I 30. November 2011 I 36

SASS Framework:I Vordefinierte MixinsI ResetI TextoolsI FarbtoolsI Als gem verfügbar CSS3 Produktiv nutzen I Mayflower GmbH I 30. November 2011 I 38

http://css2sass.heroku.com/http://blog.mayflower.de/archives/74 5-Agiles-CSS.html#extended Titel der Präsentation I Mayflower GmbH I 30. November 2011 I 40

Unter dem Strich: CSS3 Produktiv nutzen I Mayflower GmbH I 30. November 2011 I 41

QuellenI http://www.karzauninkat.com/Goldhtml/I http://schokoladen-kunst.deI http://www.foxplex.com/components/uploads/qpcll5zh-CSS3_Logo.jpgI http://www.geo-reisecommunity.de/bild/405784/altes-AutoI 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.htmlI http://www.ahnungslos.ch/wp-content/uploads/2009/12/schmuck.jpgI http://sass-lang.com http://xkcd.com/303/I http://www.welt.de/politik/deutschland/article3660279/Erst-friedlich-dann-Krawall.htmlI http://portfo.li/umaar/841377-motivational-programming-posters-redux-the-code-strikes-backI http:// www.elbuhari.at/html1/images/stories/fragen.jpg CSS3 Produktiv nutzen I Mayflower GmbH I 30. November 2011 I 43

http://blog.mayflower.de	2125
http://feeds.feedburner.com	81
http://news.php-homepage.de	10
http://cache.baidu.com	1
http://www.phphatesme.com	1
http://www.google.com&_=1323085531747 HTTP	1

CSS3 produktiv

by Mayflower GmbH on Dec 02, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

6 Embeds 2,219

Statistics

CSS3 produktiv — Presentation Transcript