Embed Size (px)
DESCRIPTION
Short Version: - CSS3 - parallax scrolling - CSS Columns - Grids - Adaptive Layouts - Media Queries - Mega Menus
Citation preview
CSS TRICKS FOR WORDPRESS
by: sara cannon // sara-cannon.com // @saracannon
WORDCAMP PHOENIX
WORDCAMP PHOENIX
SARA CANNON
A B O U T M E
Birmingham, AL
@saracannon
slideshare.net/saracannon
sara-cannon.com
I love WordPress!
CASCADING STYLE SHEETS!
& more! (It’s all connected really)
WORDCAMP PHOENIX
WORDCAMP PHOENIX
C S S 3 | O H T H E W O N D E R
C S S 3 I S J U S T . . . . S O N E W
should I really use it?
Y E S .
WORDCAMP PHOENIX
W H E N T O U S E C S S 3
C S S 3 | O H T H E W O N D E R
• interaction
• enhancement
• subtle movement / animation
WORDCAMP PHOENIX
W H E N T O N O T U S E C S S 3
C S S 3 | O H T H E W O N D E R
• usability / accessibility
• layout dependency
• branding
U S E I T , B U T D O N ’ T B E C O M E D E P E N D E N T
WORDCAMP PHOENIX
C S S 3 | O H T H E W O N D E R
DoWebsitesNeedToBeExperiencedExactlyeSameInEveryBrowser.com
WORDCAMP PHOENIX
C S S 3 | O H T H E W O N D E R
ereIsNoPageFold.com
WORDCAMP PHOENIX
C S S 3 | O H T H E W O N D E R
lostworldsfairs.com/atlantis
WORDCAMP PHOENIX
C S S 3 | O H T H E W O N D E R
lostworldsfairs.com/atlantis
C S S 3 | O H T H E W O N D E R
box-shadowborder-radius
text-shadow opacity
1+ 3+ 3+ 10.5+ 9beta 3.5+ 3+ 3+ 10.5+ 9beta
3.1+ 2+ 1.1+ 9.5+
S O M E B A S I C C S S 3
3+ 3+ 3.2+ 10+ 9beta
WORDCAMP PHOENIX
C S S 3 | O H T H E W O N D E R
examples:http://wordpress.org/
http://weightshift.com/memo/http://simplebits.com/
WORDCAMP PHOENIX
P R E F I X E S
C S S 3 | O H T H E W O N D E R
-moz-
-crome-
-webkit-
-o-
-ms-
WORDCAMP PHOENIX
C S S 3 | O H T H E W O N D E R
Twenty Ten - menu drop-down shadow
WORDCAMP PHOENIX
C S S 3 | O H T H E W O N D E R
Twenty Ten - menu drop-down shadow
WORDCAMP PHOENIX
F A L L B A C K
C S S 3 | O H T H E W O N D E R
css3pie.com
WORDCAMP PHOENIX
F A L L B A C K
C S S 3 | O H T H E W O N D E R
modernizr.com
WORDCAMP PHOENIX
R E S O U R C E S
C S S 3 | O H T H E W O N D E R
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
PARALLAX SCROLLING
it’s even cooler than it sounds.
WORDCAMP PHOENIX
WORDCAMP PHOENIX
C S S 3 M U L T I P L E B A C K G R O U N D S
P A R A L L A X S C R O L L I N G
WORDCAMP PHOENIX
C S S 3 | O H T H E W O N D E R
http://silverbackapp.com/
WORDCAMP PHOENIX
P A R A L L A X S C R O L L I N G
image by think vitamin
WORDCAMP PHOENIX
P A R A L L A X S C R O L L I N G
books.alistapart.com/products/css3-for-web-designers
WORDCAMP PHOENIX
C S S 3 | O H T H E W O N D E R
http://www.rowtothepole.com/
WORDCAMP PHOENIX
C S S 3 | O H T H E W O N D E R
http://nikebetterworld.com/index
CSS3 COLUMNS
how sophisticated!
WORDCAMP PHOENIX
WORDCAMP PHOENIX
C S S 3 C O L U M N S
C S S 3 C O L U M N S | H O W S O P H I S T I C AT E D !
lovely text "ow in speci#ed columns.
IE javascript fall back.
C S S 3 C O L U M N S | H O W S O P H I S T I C AT E D !
C S S 3 C O L U M N S | H O W S O P H I S T I C AT E D !
C S S 3 C O L U M N S | H O W S O P H I S T I C AT E D !
csscripting.com/css-multi-column
F A L L B A C K
C S S 3 - M U L T I - C O L U M N . J S
WORDCAMP PHOENIX
A R T I C L E S / R E F E R E N C E
C S S 3 C O L U M N S | H O W S O P H I S T I C AT E D !
quirksmode.org/css/multicolumn.html
alistapart.com/articles/css3multicolumn
w3.org/TR/css3-multicol
csscripting.com/css-multi-column
CSS GRIDS!
responsive (responsible?) web design
WORDCAMP PHOENIX
WORDCAMP PHOENIX
C S S G R I D S | B E R E S P O N S I V E !
960.gs blueprintcss.org
C S S G R I D S | B E R E S P O N S I V E !
WORDCAMP PHOENIX
C S S G R I D S | B E R E S P O N S I V E !
WORDCAMP PHOENIX
C S S G R I D S | B E R E S P O N S I V E !
SEE FOR YOURSELFsites you must visit
C S S G R I D S | B E R E S P O N S I V E !
hicksdesign.co.uk
C S S G R I D S | B E R E S P O N S I V E !
8faces.com
C S S G R I D S | B E R E S P O N S I V E !
colly.com
WORDCAMP PHOENIX
C S S G R I D S | B E R E S P O N S I V E !
HOW DOES THIS HAPPEN?1. adaptive grid systems
2. media queries2. #nagling
C S S G R I D S | B E R E S P O N S I V E !
cssgrid.net
C S S G R I D S | B E R E S P O N S I V E !
C S S G R I D S | B E R E S P O N S I V E !
lessframework.com
WORDCAMP PHOENIX
C S S G R I D S | B E R E S P O N S I V E !
%
WORDCAMP PHOENIX
C S S G R I D S | B E R E S P O N S I V E !
responsivetwentyten.com
C S S G R I D S | B E R E S P O N S I V E !
WORDCAMP PHOENIX
C S S G R I D S | B E R E S P O N S I V E !
MEDIA QUERIES
whoa, this is css?
WORDCAMP PHOENIX
WORDCAMP PHOENIX
M E D I A Q U E R I E S
IT’S KIND OF LIKE CONDITIONAL COMMENTS...
...BUT WITHIN CSS!
WORDCAMP PHOENIX
M E D I A Q U E R I E S
@MEDIA
M E D I A Q U E R I E S
WORDCAMP PHOENIX
M E D I A Q U E R I E S
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
C S S G R I D S | B E R E S P O N S I V E !
#lamentgroup.com/lab/responsive_images_experimenting_with_context_aware_image_sizing
WORDCAMP PHOENIX
M E D I A Q U E R I E S
HTML5
Safari (desktop, iPhone, iPad), Chrome, Internet Explorer (8+), Opera
WORDCAMP PHOENIX
R E S O U R C E S O N M E D I A Q U E R I E S
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
C S S G R I D S | B E R E S P O N S I V E !
RESPONSIVE WEB DESIGNmust see articles/resources
C S S G R I D S | B E R E S P O N S I V E !
alistapart.com/articles/responsive-web-design
C S S G R I D S | B E R E S P O N S I V E !
books.alistapart.com/products/responsive-web-design
C S S G R I D S | B E R E S P O N S I V E !
smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design
C S S G R I D S | B E R E S P O N S I V E !
unstoppablerobotninja.com/entry/"uid-images/
C S S G R I D S | B E R E S P O N S I V E !
mediaqueri.es
MEGA MENUS
doesn’t have to be complicated!
WORDCAMP PHOENIX
M E G A M E N U S
S O Y O U W A N T T O M A K E T H AT M E N U . . . M E G A
Integrate with WordPress Menus by assigning css classes
M E G A M E N U S
S O Y O U W A N T T O M A K E T H AT M E N U . . . M E G A
Integrate with WordPress Menus by assigning css classes
WORDCAMP PHOENIX
S O Y O U W A N T T O M A K E T H AT M E N U . . . M E G A
USE A PLUG-IN.
WORDCAMP PHOENIX
S O Y O U W A N T T O M A K E T H AT M E N U . . . M E G A
wpmegamenu.com
THANK YOU@saracannon
slideshare.net/saracannon
sara-cannon.com
WORDCAMP PHOENIX
