Cascading Style Speelgoed

987 views

Published on

The presentation on new CSS tricks I gave at Barcamp Ghent 3, on December 19th 2009. Transloading it from Google Docs messed up the layout a little. Oh well.

Published in: Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
987
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
9
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Cascading Style Speelgoed

  1. 1. Cascading Style Speelgoed Barcamp Ghent 3 19 december 2009
  2. 2. Disclaimer <ul><li>I am not a designer! </li></ul><ul><li>Does it show? </li></ul>
  3. 3. Contents <ul><li>1. max-width </li></ul><ul><li>2. border-radius </li></ul><ul><li>3. font-face </li></ul><ul><li>4. transform & transition </li></ul><ul><li>5. text-shadow </li></ul><ul><li>6. box-shadow </li></ul><ul><li>7. gradient </li></ul><ul><li>8. a[href] </li></ul><ul><li>9. !important </li></ul><ul><li>10. column-count </li></ul>
  4. 4. 1. max-width <ul><li>img { max-width: 100% } </li></ul>
  5. 5. 2. border-radius <ul><ul><li>http://www.css3.info/preview/rounded-border/ </li></ul></ul><ul><ul><li>http://www.the-art-of-web.com/css/border-radius/ </li></ul></ul>
  6. 6. 3. font-face <ul><li>@font-face { font-family: &quot;Old London&quot;; src: url(&quot;Olondon.otf&quot;) format(&quot;opentype&quot;) } </li></ul><ul><li>@font-face { font-family: &quot;Cloister Black&quot;; src: url(&quot;CloisterBlack.ttf&quot;) format(&quot;truetype&quot;) } </li></ul><ul><li>Helvetica? Costs? </li></ul><ul><ul><li>http://ejohn.org/apps/fontface/blok.html </li></ul></ul><ul><ul><li>http://www.alistapart.com/articles/cssatten </li></ul></ul><ul><ul><li>http://www.taptaptap.com/ </li></ul></ul>
  7. 7. 4. transform & transition <ul><li>-moz-transform / -webkit-transform </li></ul><ul><li>-moz-transition / -webkit-transition </li></ul><ul><li>rotate / scale / translate  </li></ul><ul><li>but also: color of links / background color / etc... </li></ul><ul><ul><li>http://www.the-art-of-web.com/css/css-animation/ </li></ul></ul><ul><ul><li>http://webkit.org/blog/138/css-animation/ </li></ul></ul><ul><ul><li>http://www.zurb.com/article/305/easily-turn-your-images-into-polaroids-wi </li></ul></ul><ul><ul><li>http://mir.aculo.us/2008/11/21/weekend-bookmarklet-diversion/ </li></ul></ul><ul><ul><li>http://girliemac.com/iphone/anim.html </li></ul></ul>
  8. 8. 5. text-shadow <ul><li>text-shadow: 2px 2px 5px #CCC; </li></ul><ul><ul><li>http://www.css3.info/preview/text-shadow/ </li></ul></ul><ul><ul><li>http://maettig.com/code/css/text-shadow.html </li></ul></ul>
  9. 9. 6. box-shadow <ul><li>Works even better when combined with RGB-colours. </li></ul><ul><ul><li>http://webkit.org/blog/86/box-shadow/ </li></ul></ul><ul><ul><li>http://24ways.org/ </li></ul></ul>
  10. 10. 7. gradient <ul><li>background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(255, 255, 255)), to(rgb(98,202,227))); </li></ul><ul><ul><li>http://webkit.org/blog/175/introducing-css-gradients/ </li></ul></ul><ul><ul><li>http://www.zurb.com/playground/google-buttons </li></ul></ul>
  11. 11. 8. a[href] <ul><li>a[href*=&quot;imdb.com&quot;] </li></ul><ul><li>a[href*=&quot;youtube.com&quot;] </li></ul><ul><li>a[href*=&quot;wikipedia.org&quot;] </li></ul><ul><li>a[href*=&quot;.gif&quot;],a[href*=&quot;.jpg&quot;],a[href*=&quot;.jpeg&quot;],a[href*=&quot;.png&quot;] </li></ul><ul><ul><li>http://wordpress.designpraxis.at/plugins/file-icons/ </li></ul></ul>
  12. 12. 9. !important <ul><ul><li>http://userstyles.org/ </li></ul></ul>
  13. 13. 10. column-count <ul><li>column-count </li></ul><ul><li>column-gap </li></ul><ul><li>column-rule </li></ul><ul><li>column-width </li></ul><ul><ul><li>http://www.css3.info/preview/multi-column-layout/ </li></ul></ul>
  14. 14. Bonus 11. &shy; <ul><li>Soft hyphen </li></ul><ul><ul><li>http://en.wikipedia.org/wiki/Hyphen#Hyphens_in_computing </li></ul></ul><ul><ul><li>http://www.cs.tut.fi/~jkorpela/shytest.html  (resize window) </li></ul></ul>
  15. 15. Thanks! <ul><li>Stijn Vogels </li></ul><ul><ul><li>http://lmgtfy.com/?q=stijn+vogels </li></ul></ul>

×