Your SlideShare is downloading. ×
0
CSS Tricks for WordPress - WordCamp Phoenix
CSS Tricks for WordPress - WordCamp Phoenix
CSS Tricks for WordPress - WordCamp Phoenix
CSS Tricks for WordPress - WordCamp Phoenix
CSS Tricks for WordPress - WordCamp Phoenix
CSS Tricks for WordPress - WordCamp Phoenix
CSS Tricks for WordPress - WordCamp Phoenix
CSS Tricks for WordPress - WordCamp Phoenix
CSS Tricks for WordPress - WordCamp Phoenix
CSS Tricks for WordPress - WordCamp Phoenix
CSS Tricks for WordPress - WordCamp Phoenix
CSS Tricks for WordPress - WordCamp Phoenix
CSS Tricks for WordPress - WordCamp Phoenix
CSS Tricks for WordPress - WordCamp Phoenix
CSS Tricks for WordPress - WordCamp Phoenix
CSS Tricks for WordPress - WordCamp Phoenix
CSS Tricks for WordPress - WordCamp Phoenix
CSS Tricks for WordPress - WordCamp Phoenix
CSS Tricks for WordPress - WordCamp Phoenix
CSS Tricks for WordPress - WordCamp Phoenix
CSS Tricks for WordPress - WordCamp Phoenix
CSS Tricks for WordPress - WordCamp Phoenix
CSS Tricks for WordPress - WordCamp Phoenix
CSS Tricks for WordPress - WordCamp Phoenix
CSS Tricks for WordPress - WordCamp Phoenix
CSS Tricks for WordPress - WordCamp Phoenix
CSS Tricks for WordPress - WordCamp Phoenix
CSS Tricks for WordPress - WordCamp Phoenix
CSS Tricks for WordPress - WordCamp Phoenix
CSS Tricks for WordPress - WordCamp Phoenix
CSS Tricks for WordPress - WordCamp Phoenix
CSS Tricks for WordPress - WordCamp Phoenix
CSS Tricks for WordPress - WordCamp Phoenix
CSS Tricks for WordPress - WordCamp Phoenix
CSS Tricks for WordPress - WordCamp Phoenix
CSS Tricks for WordPress - WordCamp Phoenix
CSS Tricks for WordPress - WordCamp Phoenix
CSS Tricks for WordPress - WordCamp Phoenix
CSS Tricks for WordPress - WordCamp Phoenix
CSS Tricks for WordPress - WordCamp Phoenix
CSS Tricks for WordPress - WordCamp Phoenix
CSS Tricks for WordPress - WordCamp Phoenix
CSS Tricks for WordPress - WordCamp Phoenix
CSS Tricks for WordPress - WordCamp Phoenix
CSS Tricks for WordPress - WordCamp Phoenix
CSS Tricks for WordPress - WordCamp Phoenix
CSS Tricks for WordPress - WordCamp Phoenix
CSS Tricks for WordPress - WordCamp Phoenix
CSS Tricks for WordPress - WordCamp Phoenix
CSS Tricks for WordPress - WordCamp Phoenix
CSS Tricks for WordPress - WordCamp Phoenix
CSS Tricks for WordPress - WordCamp Phoenix
CSS Tricks for WordPress - WordCamp Phoenix
CSS Tricks for WordPress - WordCamp Phoenix
CSS Tricks for WordPress - WordCamp Phoenix
CSS Tricks for WordPress - WordCamp Phoenix
CSS Tricks for WordPress - WordCamp Phoenix
CSS Tricks for WordPress - WordCamp Phoenix
CSS Tricks for WordPress - WordCamp Phoenix
CSS Tricks for WordPress - WordCamp Phoenix
CSS Tricks for WordPress - WordCamp Phoenix
CSS Tricks for WordPress - WordCamp Phoenix
CSS Tricks for WordPress - WordCamp Phoenix
CSS Tricks for WordPress - WordCamp Phoenix
CSS Tricks for WordPress - WordCamp Phoenix
CSS Tricks for WordPress - WordCamp Phoenix
CSS Tricks for WordPress - WordCamp Phoenix
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

CSS Tricks for WordPress - WordCamp Phoenix

10,727

Published on

Short Version: …

Short Version:
- CSS3
- parallax scrolling
- CSS Columns
- Grids
- Adaptive Layouts
- Media Queries
- Mega Menus


Published in: Technology
0 Comments
20 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
10,727
On Slideshare
0
From Embeds
0
Number of Embeds
15
Actions
Shares
0
Downloads
148
Comments
0
Likes
20
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. CSS TRICKS FOR WORDPRESS WORDCAMP PHOENIXby: sara cannon // sara-cannon.com // @saracannon
  • 2. ABOUT ME SARA CANNON Birmingham, AL @saracannon slideshare.net/saracannon sara-cannon.comI love WordPress! WORDCAMP PHOENIX
  • 3. CASCADING STYLE SHEETS! & more! (It’s all connected really) WORDCAMP PHOENIX
  • 4. CSS3 | OH THE WONDERC S S 3 IS J U S T . . . . SO NEW should I really use it? YES. WORDCAMP PHOENIX
  • 5. CSS3 | OH THE WONDERWHE N TO U S E C S S 3• interaction• enhancement• subtle movement / animation WORDCAMP PHOENIX
  • 6. CSS3 | OH THE WONDERWHE N TO N OT U S E C S S 3• usability / accessibility• layout dependency• brandingUS E I T, BU T D ON ’ T B E C OME DE P ENDE NT WORDCAMP PHOENIX
  • 7. CSS3 | OH THE WONDERDoWebsitesNeedToBeExperiencedExactlyeSameInEveryBrowser.com WORDCAMP PHOENIX
  • 8. CSS3 | OH THE WONDERereIsNoPageFold.com WORDCAMP PHOENIX
  • 9. CSS3 | OH THE WONDERlostworldsfairs.com/atlantis WORDCAMP PHOENIX
  • 10. CSS3 | OH THE WONDERlostworldsfairs.com/atlantis WORDCAMP PHOENIX
  • 11. CSS3 | OH THE WONDER S OME BAS I C C SS 3border-radius box-shadow1+ 3+ 3+ 10.5+ 9beta 3.5+ 3+ 3+ 10.5+ 9betatext-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 WONDERPREFIXES -moz- -crome- -webkit- -o- -ms- WORDCAMP PHOENIX
  • 14. CSS3 | OH THE WONDERTwenty Ten - menu drop-down shadow WORDCAMP PHOENIX
  • 15. CSS3 | OH THE WONDERTwenty Ten - menu drop-down shadow WORDCAMP PHOENIX
  • 16. CSS3 | OH THE WONDERFALLBACKcss3pie.com WORDCAMP PHOENIX
  • 17. CSS3 | OH THE WONDERFALLBACKmodernizr.com WORDCAMP PHOENIX
  • 18. CSS3 | OH THE WONDERRESOURCESCSS3 for Web Designer by Dan Cederholmcss3.comalistapart.com/articles/taking-advantage-of-html5-and-css3-with-modernizralistapart.com/articles/understanding-css3-transitions WORDCAMP PHOENIX
  • 19. PARALLAX SCROLLING it’s even cooler than it sounds. WORDCAMP PHOENIX
  • 20. PARALLAX SCROLLINGCSS3 MULTIPLE BACKGROUNDS WORDCAMP PHOENIX
  • 21. CSS3 | OH THE WONDERhttp://silverbackapp.com/ WORDCAMP PHOENIX
  • 22. PARALLAX SCROLLING image by think vitamin WORDCAMP PHOENIX
  • 23. PARALLAX SCROLLINGbooks.alistapart.com/products/css3-for-web-designers WORDCAMP PHOENIX
  • 24. CSS3 | OH THE WONDERhttp://www.rowtothepole.com/ WORDCAMP PHOENIX
  • 25. CSS3 | OH THE WONDERhttp://nikebetterworld.com/index WORDCAMP PHOENIX
  • 26. CSS3 COLUMNS how sophisticated! WORDCAMP PHOENIX
  • 27. CSS3 COLUMNS | HOW SOPHISTICATED!CSS3 COLUMNSlovely 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 / REFERENCEquirksmode.org/css/multicolumn.htmlalistapart.com/articles/css3multicolumnw3.org/TR/css3-multicolcsscripting.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 QUERIESIT’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.JScode.google.com/p/css3-mediaqueries-jscss3-mediaqueries.js is a JavaScript library to make IE 5+, Firefox 1+ andSafari 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 HTML5Safari (desktop, iPhone, iPad), Chrome, Internet Explorer (8+), Opera WORDCAMP PHOENIX
  • 55. RESOURCES ON MEDIA QUERIESgithub.com/ lamentgroup/Responsive-Imagesw3.org/TR/css3-mediaqueriessmashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-websitecss-tricks.com/css-media-queriesalistapart.com/articles/ uidgrids/ WORDCAMP PHOENIX
  • 56. CSS GRIDS | BE RESPONSIVE! RESPONSIVE WEB DESIGNmust 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 MENUSdoesn’t have to be complicated! WORDCAMP PHOENIX
  • 63. SO YOU WANT TO MAKE THAT MENU... MEGAMEGA MENUSIntegrate with WordPress Menus by assigning css classes
  • 64. SO YOU WANT TO MAKE THAT MENU... MEGAMEGA MENUSIntegrate 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 @saracannonslideshare.net/saracannon sara-cannon.com

×