CSS3 Produktiv nutzenAlberto Assmann I 03.11.2011                               © 2011 Mayflower GmbH
It‘se me...I Jahrgang 1991I Auszubildender zum Fachinformatiker  für AnwendungsentwicklungI Seit 2010 bei der Mayflower Gm...
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...
Farbverläufe (Gradients):background-image: linear-gradient(   bottom,   rgb(71,117,252) 32%,   rgb(100,153,255) 66%,   rgb...
Hintergrundgröße (Background-size):background-size: 50% 25%;   Browser   Unterstützung    -webkit   -webkit   -moz        ...
Bilderrand (Border-image):border-image: url(pikachu.png) 49 41 repeat;    Browser    Unterstützung      -webkit   -webkit ...
Runde Ecken (Border-radius):border-radius: 5px 5px 5px 5px;         Browser         Unterstützung     -webkit   -webkit   ...
Schatten (Box-shadow):box-shadow: 5px 5px 5px #000000;BrowserUnterstützung   -webkit   -webkit   -moz   progid:DXImageTran...
Textspalten (Column-count):  column-count: 4;  Browser  Unterstützung      -webkit   -webkit   -moz                       ...
Farbigkeit (HSLa, RGBa):Color: hsla(0,100%,50%,0.4);Background-color:      Browser      Unterstützung                     ...
Worttrennung (Hyphen):                                    Ut enim ad minim veniam, quishyphens: auto;                     ...
Mehrere Hintergrundbilder (Multiple backgrounds):background-image:         url(sheep.png),         url(betweengrassandsky....
Deckkraft (Opacity): Opacity: 0.5;BrowserUnterstützung               filter: alpha(opacity=50)                            ...
Text überlauf (text-overflow):                                          Buffer Overflow because off...text-overflow: ellip...
Textschatten (text-shadow):Text-shadow: 10px 10px 3px #666;       Browser       Unterstützung                             ...
Umformungen (Transform):transform:   scale(0.6)   rotate(33deg)   translateX(136px)   translateY(-45px)   skewY(-16deg);tr...
Übergänge (Transitions):Div:hover {  transition:     rotate(360deg)     scale(2.0)     rotate(-90deg);}BrowserUnterstützun...
Verschiedene Druiden – verschiedene Tränke:                                      CSS3 Produktiv nutzen I   Mayflower GmbH ...
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               ...
$color: #3bbfce.content-navigation border-color: $color                        Titel der Präsentation I   Mayflower GmbH I...
/** CSS */table.hl { margin: 2em 0;}table.hl td.ln { text-align: right;}/** SASS */table.hl margin: 2em 0 td.ln  text-alig...
@mixin round-corners($radius) -moz-border-radius: $radius -webkit-border-radius: $radius -khtml-border-radius: $radius bor...
/** CSS */div.foo {  border: 3px;  div.foo:hover {    color: #FF0000;  }}/** SASS */div.foo  border: 3px  &:hover     colo...
Berechnungen:I   Größenberechnung (Bsp.: 2px + $width)I   FarbberechnungI   Stringkonkatenation                           ...
Kontrollstrukturen:I   @if/@elseI   @forI   @eachI   @while                      CSS3 Produktiv nutzen I   Mayflower GmbH ...
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   M...
Titel der Präsentation I   Mayflower GmbH I 30. November 2011 I 37
SASS Framework:I   Vordefinierte MixinsI   ResetI   TextoolsI   FarbtoolsI   Als gem verfügbar                           C...
Titel der Präsentation I   Mayflower GmbH I 30. November 2011 I 39
http://css2sass.heroku.com/http://blog.mayflower.de/archives/74      5-Agiles-CSS.html#extended                         Ti...
Unter dem Strich:                    CSS3 Produktiv nutzen I   Mayflower GmbH I 30. November 2011 I 41
Vielen Dank für Ihre Aufmerksamkeit!Referent   Alberto Assmann           Alberto.assmann@mayflower.de           +49 931 35...
QuellenI   http://www.karzauninkat.com/Goldhtml/I   http://schokoladen-kunst.deI   http://www.foxplex.com/components/uploa...
Upcoming SlideShare
Loading in …5
×

CSS3 produktiv

4,264 views

Published on

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.

Published in: Technology
1 Comment
0 Likes
Statistics
Notes
  • In den Folien wird aber nicht der Internet Explorer 9 oder neuer berücksichtigt. Wenn die Präsentation wirklich so am 17.11.2011 gehalten wurde, vermittelt sie einen völlig falschen Stand vom CSS3 Support.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

No Downloads
Views
Total views
4,264
On SlideShare
0
From Embeds
0
Number of Embeds
2,347
Actions
Shares
0
Downloads
11
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide

CSS3 produktiv

  1. 1. CSS3 Produktiv nutzenAlberto Assmann I 03.11.2011 © 2011 Mayflower GmbH
  2. 2. 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
  3. 3. Die Motivation CSS3 Produktiv nutzen I Mayflower GmbH I 30. November 2011 I 3
  4. 4. Die Motivation CSS3 Produktiv nutzen I Mayflower GmbH I 30. November 2011 I 4
  5. 5. Titel der Präsentation I Mayflower GmbH I 30. November 2011 I 5
  6. 6. CSS3 ist Neu... CSS3 Produktiv nutzen I Mayflower GmbH I 30. November 2011 I 6
  7. 7. Beispiel Titel der Präsentation I Mayflower GmbH I 30. November 2011 I 7
  8. 8. CSS3 ist wie ein Zaubertrank CSS3 Produktiv nutzen I Mayflower GmbH I 30. November 2011 I 8
  9. 9. Zutaten CSS3 Produktiv nutzen I Mayflower GmbH I 30. November 2011 I 9
  10. 10. 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
  11. 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 11
  12. 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 12
  13. 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 13
  14. 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 14
  15. 15. 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
  16. 16. Textspalten (Column-count): column-count: 4; Browser Unterstützung -webkit -webkit -moz CSS3 Produktiv nutzen I Mayflower GmbH I 30. November 2011 I 16
  17. 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 17
  18. 18. Worttrennung (Hyphen): Ut enim ad minim veniam, quishyphens: auto; nostrud exer­citation ullamco laboris nisi ut aliquip ex ea com­modo consequat Browser Unterstützung -moz CSS3 Produktiv nutzen I Mayflower GmbH I 30. November 2011 I 18
  19. 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 19
  20. 20. Deckkraft (Opacity): Opacity: 0.5;BrowserUnterstützung filter: alpha(opacity=50) CSS3 Produktiv nutzen I Mayflower GmbH I 30. November 2011 I 20
  21. 21. 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
  22. 22. Textschatten (text-shadow):Text-shadow: 10px 10px 3px #666; Browser Unterstützung CSS3 Produktiv nutzen I Mayflower GmbH I 30. November 2011 I 22
  23. 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 23
  24. 24. Ü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
  25. 25. Verschiedene Druiden – verschiedene Tränke: CSS3 Produktiv nutzen I Mayflower GmbH I 30. November 2011 I 25
  26. 26. Das richtige Tool: CSS3 Produktiv nutzen I Mayflower GmbH I 30. November 2011 I 26
  27. 27. SASS CSS3 Produktiv nutzen I Mayflower GmbH I 30. November 2011 I 27
  28. 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 28
  29. 29. $color: #3bbfce.content-navigation border-color: $color Titel der Präsentation I Mayflower GmbH I 30. November 2011 I 29
  30. 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 30
  31. 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 31
  32. 32. /** 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
  33. 33. Berechnungen:I Größenberechnung (Bsp.: 2px + $width)I FarbberechnungI Stringkonkatenation CSS3 Produktiv nutzen I Mayflower GmbH I 30. November 2011 I 33
  34. 34. Kontrollstrukturen:I @if/@elseI @forI @eachI @while CSS3 Produktiv nutzen I Mayflower GmbH I 30. November 2011 I 34
  35. 35. Compiliertes CSS? CSS3 Produktiv nutzen I Mayflower GmbH I 30. November 2011 I 35
  36. 36. 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
  37. 37. Titel der Präsentation I Mayflower GmbH I 30. November 2011 I 37
  38. 38. SASS Framework:I Vordefinierte MixinsI ResetI TextoolsI FarbtoolsI Als gem verfügbar CSS3 Produktiv nutzen I Mayflower GmbH I 30. November 2011 I 38
  39. 39. Titel der Präsentation I Mayflower GmbH I 30. November 2011 I 39
  40. 40. 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
  41. 41. Unter dem Strich: CSS3 Produktiv nutzen I Mayflower GmbH I 30. November 2011 I 41
  42. 42. Vielen Dank für Ihre Aufmerksamkeit!Referent Alberto Assmann Alberto.assmann@mayflower.de +49 931 35965 1 164 Mayflower GmbH Pleichertorstr. 2 97070 Würzburg © 2011 Mayflower GmbH
  43. 43. 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

×