CSS Tricks for WordPress - WordCamp Phoenix
•
22 likes•15,408 views
Short Version: - CSS3 - parallax scrolling - CSS Columns - Grids - Adaptive Layouts - Media Queries - Mega Menus
Report
Share
CSS Tricks for WordPress - WordCamp Phoenix
- 1. CSS TRICKS FOR WORDPRESS WORDCAMP PHOENIX by: sara cannon // sara-cannon.com // @saracannon
- 2. ABOUT ME SARA CANNON Birmingham, AL @saracannon slideshare.net/saracannon sara-cannon.com I love WordPress! WORDCAMP PHOENIX
- 3. CASCADING STYLE SHEETS! & more! (It’s all connected really) WORDCAMP PHOENIX
- 4. CSS3 | OH THE WONDER C S S 3 IS J U S T . . . . SO NEW should I really use it? YES. WORDCAMP PHOENIX
- 5. CSS3 | OH THE WONDER WHE N TO U S E C S S 3 • interaction • enhancement • subtle movement / animation WORDCAMP PHOENIX
- 6. CSS3 | OH THE WONDER WHE N TO N OT U S E C S S 3 • usability / accessibility • layout dependency • branding US E I T, BU T D ON ’ T B E C OME DE P ENDE NT WORDCAMP PHOENIX
- 7. CSS3 | OH THE WONDER DoWebsitesNeedToBeExperiencedExactlyeSameInEveryBrowser.com WORDCAMP PHOENIX
- 8. CSS3 | OH THE WONDER ereIsNoPageFold.com WORDCAMP PHOENIX
- 9. CSS3 | OH THE WONDER lostworldsfairs.com/atlantis WORDCAMP PHOENIX
- 10. CSS3 | OH THE WONDER lostworldsfairs.com/atlantis WORDCAMP PHOENIX
- 11. CSS3 | OH THE WONDER S OME BAS I C C SS 3 border-radius box-shadow 1+ 3+ 3+ 10.5+ 9beta 3.5+ 3+ 3+ 10.5+ 9beta text-shadow opacity 3.1+ 2+ 1.1+ 9.5+ 3+ 3+ 3.2+ 10+ 9beta
- 12. CSS3 | OH THE WONDER examples: http://wordpress.org/ http://weightshift.com/memo/ http://simplebits.com/ WORDCAMP PHOENIX
- 13. CSS3 | OH THE WONDER PREFIXES -moz- -crome- -webkit- -o- -ms- WORDCAMP PHOENIX
- 14. CSS3 | OH THE WONDER Twenty Ten - menu drop-down shadow WORDCAMP PHOENIX
- 15. CSS3 | OH THE WONDER Twenty Ten - menu drop-down shadow WORDCAMP PHOENIX
- 16. CSS3 | OH THE WONDER FALLBACK css3pie.com WORDCAMP PHOENIX
- 17. CSS3 | OH THE WONDER FALLBACK modernizr.com WORDCAMP PHOENIX
- 18. CSS3 | OH THE WONDER RESOURCES CSS3 for Web Designer by Dan Cederholm css3.com alistapart.com/articles/taking-advantage-of-html5- and-css3-with-modernizr alistapart.com/articles/understanding-css3- transitions WORDCAMP PHOENIX
- 19. PARALLAX SCROLLING it’s even cooler than it sounds. WORDCAMP PHOENIX
- 20. PARALLAX SCROLLING CSS3 MULTIPLE BACKGROUNDS WORDCAMP PHOENIX
- 21. CSS3 | OH THE WONDER http://silverbackapp.com/ WORDCAMP PHOENIX
- 22. PARALLAX SCROLLING image by think vitamin WORDCAMP PHOENIX
- 23. PARALLAX SCROLLING books.alistapart.com/products/css3-for-web-designers WORDCAMP PHOENIX
- 24. CSS3 | OH THE WONDER http://www.rowtothepole.com/ WORDCAMP PHOENIX
- 25. CSS3 | OH THE WONDER http://nikebetterworld.com/index WORDCAMP PHOENIX
- 26. CSS3 COLUMNS how sophisticated! WORDCAMP PHOENIX
- 27. CSS3 COLUMNS | HOW SOPHISTICATED! CSS3 COLUMNS lovely text ow in speci ed columns. IE javascript fall back. WORDCAMP PHOENIX
- 28. CSS3 COLUMNS | HOW SOPHISTICATED!
- 29. CSS3 COLUMNS | HOW SOPHISTICATED!
- 30. CSS3 COLUMNS | HOW SOPHISTICATED! FALLBACK CSS3-MULTI-COLUMN.JS csscripting.com/css-multi-column
- 31. CSS3 COLUMNS | HOW SOPHISTICATED! ARTICLES / REFERENCE quirksmode.org/css/multicolumn.html alistapart.com/articles/css3multicolumn w3.org/TR/css3-multicol csscripting.com/css-multi-column WORDCAMP PHOENIX
- 32. CSS GRIDS! responsive (responsible?) web design WORDCAMP PHOENIX
- 33. CSS GRIDS | BE RESPONSIVE! 960.gs blueprintcss.org WORDCAMP PHOENIX
- 34. CSS GRIDS | BE RESPONSIVE!
- 35. CSS GRIDS | BE RESPONSIVE! WORDCAMP PHOENIX
- 36. CSS GRIDS | BE RESPONSIVE! SEE FOR YOURSELF sites you must visit WORDCAMP PHOENIX
- 37. CSS GRIDS | BE RESPONSIVE! hicksdesign.co.uk
- 38. CSS GRIDS | BE RESPONSIVE! 8faces.com
- 39. CSS GRIDS | BE RESPONSIVE! colly.com
- 40. CSS GRIDS | BE RESPONSIVE! HOW DOES THIS HAPPEN? 1. adaptive grid systems 2. media queries 2. nagling WORDCAMP PHOENIX
- 41. CSS GRIDS | BE RESPONSIVE! cssgrid.net
- 42. CSS GRIDS | BE RESPONSIVE!
- 43. CSS GRIDS | BE RESPONSIVE! lessframework.com
- 44. CSS GRIDS | BE RESPONSIVE! % WORDCAMP PHOENIX
- 45. CSS GRIDS | BE RESPONSIVE! responsivetwentyten.com WORDCAMP PHOENIX
- 46. CSS GRIDS | BE RESPONSIVE!
- 47. CSS GRIDS | BE RESPONSIVE! WORDCAMP PHOENIX
- 48. MEDIA QUERIES whoa, this is css? WORDCAMP PHOENIX
- 49. MEDIA QUERIES IT’S KIND OF LIKE CONDITIONAL COMMENTS... ...BUT WITHIN CSS! WORDCAMP PHOENIX
- 50. MEDIA QUERIES @MEDIA WORDCAMP PHOENIX
- 51. MEDIA QUERIES
- 52. MEDIA QUERIES CSS3-MEDIAQUERIES.JS code.google.com/p/css3-mediaqueries-js css3-mediaqueries.js is a JavaScript library to make IE 5+, Firefox 1+ and Safari 2 transparently parse, test and apply CSS3 Media Queries WORDCAMP PHOENIX
- 53. CSS GRIDS | BE RESPONSIVE! lamentgroup.com/lab/responsive_images_experimenting _with_context_aware_image_sizing
- 54. MEDIA QUERIES HTML5 Safari (desktop, iPhone, iPad), Chrome, Internet Explorer (8+), Opera WORDCAMP PHOENIX
- 55. RESOURCES ON MEDIA QUERIES github.com/ lamentgroup/Responsive-Images w3.org/TR/css3-mediaqueries smashingmagazine.com/2010/07/19/how-to-use-css3- media-queries-to-create-a-mobile-version-of-your- website css-tricks.com/css-media-queries alistapart.com/articles/ uidgrids/ WORDCAMP PHOENIX
- 56. CSS GRIDS | BE RESPONSIVE! RESPONSIVE WEB DESIGN must see articles/resources WORDCAMP PHOENIX
- 57. CSS GRIDS | BE RESPONSIVE! alistapart.com/articles/responsive-web-design
- 58. CSS GRIDS | BE RESPONSIVE! books.alistapart.com/products/responsive-web-design
- 59. CSS GRIDS | BE RESPONSIVE! smashingmagazine.com/2011/01/12/guidelines-for- responsive-web-design
- 60. CSS GRIDS | BE RESPONSIVE! unstoppablerobotninja.com/entry/ uid-images/
- 61. CSS GRIDS | BE RESPONSIVE! mediaqueri.es
- 62. MEGA MENUS doesn’t have to be complicated! WORDCAMP PHOENIX
- 63. SO YOU WANT TO MAKE THAT MENU... MEGA MEGA MENUS Integrate with WordPress Menus by assigning css classes
- 64. SO YOU WANT TO MAKE THAT MENU... MEGA MEGA MENUS Integrate with WordPress Menus by assigning css classes
- 65. SO YOU WANT TO MAKE THAT MENU... MEGA USE A PLUG-IN. WORDCAMP PHOENIX
- 66. SO YOU WANT TO MAKE THAT MENU... MEGA wpmegamenu.com WORDCAMP PHOENIX
- 67. WORDCAMP PHOENIX THANK YOU @saracannon slideshare.net/saracannon sara-cannon.com