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

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
DoWebsitesNeedToBeExperiencedExactlyeSameInEveryBrowser.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