SlideShare a Scribd company logo

CSS Tricks for WordPress - WordCamp Phoenix

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

1 of 67
Download to read offline
CSS TRICKS FOR WORDPRESS
      WORDCAMP PHOENIX

by: sara cannon // sara-cannon.com // @saracannon
ABOUT ME



                     SARA CANNON
                     Birmingham, AL

                     @saracannon

                     slideshare.net/saracannon

                     sara-cannon.com


I love WordPress!
                                        WORDCAMP PHOENIX
CASCADING STYLE SHEETS!
  & more! (It’s all connected really)




                                        WORDCAMP PHOENIX
CSS3 | OH THE WONDER




C S S 3 IS J U S T . . . . SO NEW
   should I really use it?


           YES.

                                    WORDCAMP PHOENIX
CSS3 | OH THE WONDER


WHE N TO U S E C S S 3
• interaction
• enhancement
• subtle movement / animation




                                       WORDCAMP PHOENIX
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

Recommended

Beyond Responsive Web Design
Beyond Responsive Web DesignBeyond Responsive Web Design
Beyond Responsive Web Designarborwebsolutions
 
RESS: An Evolution of Responsive Web Design
RESS: An Evolution of Responsive Web DesignRESS: An Evolution of Responsive Web Design
RESS: An Evolution of Responsive Web DesignDave Olsen
 
Responsive Web Design - more than just a buzzword
Responsive Web Design - more than just a buzzwordResponsive Web Design - more than just a buzzword
Responsive Web Design - more than just a buzzwordRuss Weakley
 
Responsive Design in the Real World
Responsive Design in the Real WorldResponsive Design in the Real World
Responsive Design in the Real WorldClarissa Peterson
 
Southwest Conference on Disability 2011
Southwest Conference on Disability 2011Southwest Conference on Disability 2011
Southwest Conference on Disability 2011Virginia DeBolt
 
HighEdWeb 2017 - Unbundle Your Institution: Building a Web Ecosystem
HighEdWeb 2017 - Unbundle Your Institution: Building a Web EcosystemHighEdWeb 2017 - Unbundle Your Institution: Building a Web Ecosystem
HighEdWeb 2017 - Unbundle Your Institution: Building a Web EcosystemEric Sembrat
 
Users First: UX Basics for Websites that Serve People (staff presentation at ...
Users First: UX Basics for Websites that Serve People (staff presentation at ...Users First: UX Basics for Websites that Serve People (staff presentation at ...
Users First: UX Basics for Websites that Serve People (staff presentation at ...Melissa Van De Werfhorst
 

More Related Content

What's hot

Web Accessibility Gone Wild (Now Even MORE Wilder!)
Web Accessibility Gone Wild (Now Even MORE Wilder!)Web Accessibility Gone Wild (Now Even MORE Wilder!)
Web Accessibility Gone Wild (Now Even MORE Wilder!)Jared Smith
 
Responsive Design Tools & Resources
Responsive Design Tools & ResourcesResponsive Design Tools & Resources
Responsive Design Tools & ResourcesClarissa Peterson
 
10 Simple Rules for Making My Site Accessible
10 Simple Rules for Making My Site Accessible10 Simple Rules for Making My Site Accessible
10 Simple Rules for Making My Site AccessibleHelena Zubkow
 
Responsive web design
Responsive web designResponsive web design
Responsive web designRuss Weakley
 
Responsive Websites
Responsive WebsitesResponsive Websites
Responsive WebsitesJoe Seifi
 
Hold Up - WordPress can do that? GTFO!
Hold Up - WordPress can do that? GTFO!Hold Up - WordPress can do that? GTFO!
Hold Up - WordPress can do that? GTFO!Mike Richwalsky
 
Responsive Design Essentials
Responsive Design EssentialsResponsive Design Essentials
Responsive Design EssentialsClarissa Peterson
 
Accumanno ams bts_web_design_09212011
Accumanno ams bts_web_design_09212011Accumanno ams bts_web_design_09212011
Accumanno ams bts_web_design_09212011Ursula Accumanno
 
Functional Animation with SVG - OpenWest 2018
Functional Animation with SVG - OpenWest 2018Functional Animation with SVG - OpenWest 2018
Functional Animation with SVG - OpenWest 2018Duke Speer
 
Module 08: Responsive Web Design
Module 08: Responsive Web DesignModule 08: Responsive Web Design
Module 08: Responsive Web DesignDaniel Drew Turner
 
Web Standards And Protocols
Web Standards And ProtocolsWeb Standards And Protocols
Web Standards And ProtocolsSteven Cahill
 
Responsive Design
Responsive DesignResponsive Design
Responsive DesignSara Cannon
 
Keyboard and Interaction Accessibility Techniques
Keyboard and Interaction Accessibility TechniquesKeyboard and Interaction Accessibility Techniques
Keyboard and Interaction Accessibility TechniquesJared Smith
 
mLearnCon 2014 - A responsive web solution for a complex online educational p...
mLearnCon 2014 - A responsive web solution for a complex online educational p...mLearnCon 2014 - A responsive web solution for a complex online educational p...
mLearnCon 2014 - A responsive web solution for a complex online educational p...Amy Som
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web DesignRZasadzinski
 
Specialise or cross-skill
Specialise or cross-skillSpecialise or cross-skill
Specialise or cross-skillRuss Weakley
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web DesignTung Dang
 

What's hot (20)

Web Accessibility Gone Wild (Now Even MORE Wilder!)
Web Accessibility Gone Wild (Now Even MORE Wilder!)Web Accessibility Gone Wild (Now Even MORE Wilder!)
Web Accessibility Gone Wild (Now Even MORE Wilder!)
 
Responsive Design Tools & Resources
Responsive Design Tools & ResourcesResponsive Design Tools & Resources
Responsive Design Tools & Resources
 
10 Simple Rules for Making My Site Accessible
10 Simple Rules for Making My Site Accessible10 Simple Rules for Making My Site Accessible
10 Simple Rules for Making My Site Accessible
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
 
Responsive Websites
Responsive WebsitesResponsive Websites
Responsive Websites
 
Hold Up - WordPress can do that? GTFO!
Hold Up - WordPress can do that? GTFO!Hold Up - WordPress can do that? GTFO!
Hold Up - WordPress can do that? GTFO!
 
Responsive Design
Responsive Design Responsive Design
Responsive Design
 
Responsive Design Essentials
Responsive Design EssentialsResponsive Design Essentials
Responsive Design Essentials
 
P.S. I love you
P.S. I love youP.S. I love you
P.S. I love you
 
Accumanno ams bts_web_design_09212011
Accumanno ams bts_web_design_09212011Accumanno ams bts_web_design_09212011
Accumanno ams bts_web_design_09212011
 
Functional Animation with SVG - OpenWest 2018
Functional Animation with SVG - OpenWest 2018Functional Animation with SVG - OpenWest 2018
Functional Animation with SVG - OpenWest 2018
 
Module 08: Responsive Web Design
Module 08: Responsive Web DesignModule 08: Responsive Web Design
Module 08: Responsive Web Design
 
Web Standards And Protocols
Web Standards And ProtocolsWeb Standards And Protocols
Web Standards And Protocols
 
Web Design Patterns
Web Design PatternsWeb Design Patterns
Web Design Patterns
 
Responsive Design
Responsive DesignResponsive Design
Responsive Design
 
Keyboard and Interaction Accessibility Techniques
Keyboard and Interaction Accessibility TechniquesKeyboard and Interaction Accessibility Techniques
Keyboard and Interaction Accessibility Techniques
 
mLearnCon 2014 - A responsive web solution for a complex online educational p...
mLearnCon 2014 - A responsive web solution for a complex online educational p...mLearnCon 2014 - A responsive web solution for a complex online educational p...
mLearnCon 2014 - A responsive web solution for a complex online educational p...
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Specialise or cross-skill
Specialise or cross-skillSpecialise or cross-skill
Specialise or cross-skill
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 

Viewers also liked

Opening Remarks - WordCamp Kathmandu, 2016
Opening Remarks - WordCamp Kathmandu, 2016 Opening Remarks - WordCamp Kathmandu, 2016
Opening Remarks - WordCamp Kathmandu, 2016 Catch Themes
 
SEO copywriting for WordPress - WordCamp Kathmandu 2016
SEO copywriting for WordPress - WordCamp Kathmandu 2016SEO copywriting for WordPress - WordCamp Kathmandu 2016
SEO copywriting for WordPress - WordCamp Kathmandu 2016Sunita Rai
 
WordPress.com vs. Self-Hosting
WordPress.com vs. Self-HostingWordPress.com vs. Self-Hosting
WordPress.com vs. Self-Hostingryanmarkel
 
527 易视科技bp houde
527 易视科技bp houde527 易视科技bp houde
527 易视科技bp houdeRui (Nash) Yang
 
"Ensuring chances of theme acceptance in wordpress.org directory" on WordCamp...
"Ensuring chances of theme acceptance in wordpress.org directory" on WordCamp..."Ensuring chances of theme acceptance in wordpress.org directory" on WordCamp...
"Ensuring chances of theme acceptance in wordpress.org directory" on WordCamp...Sudeep Balchhaudi
 
Multisite core concepts final
Multisite core concepts finalMultisite core concepts final
Multisite core concepts finalUmesh Chaudhary
 
Stop Coding; Start Assembling Your Websites
Stop Coding; Start Assembling Your WebsitesStop Coding; Start Assembling Your Websites
Stop Coding; Start Assembling Your WebsitesAmit Kumar Singh
 
11 Crazy Marketing Statistics
11 Crazy Marketing Statistics11 Crazy Marketing Statistics
11 Crazy Marketing StatisticsHubSpot
 

Viewers also liked (8)

Opening Remarks - WordCamp Kathmandu, 2016
Opening Remarks - WordCamp Kathmandu, 2016 Opening Remarks - WordCamp Kathmandu, 2016
Opening Remarks - WordCamp Kathmandu, 2016
 
SEO copywriting for WordPress - WordCamp Kathmandu 2016
SEO copywriting for WordPress - WordCamp Kathmandu 2016SEO copywriting for WordPress - WordCamp Kathmandu 2016
SEO copywriting for WordPress - WordCamp Kathmandu 2016
 
WordPress.com vs. Self-Hosting
WordPress.com vs. Self-HostingWordPress.com vs. Self-Hosting
WordPress.com vs. Self-Hosting
 
527 易视科技bp houde
527 易视科技bp houde527 易视科技bp houde
527 易视科技bp houde
 
"Ensuring chances of theme acceptance in wordpress.org directory" on WordCamp...
"Ensuring chances of theme acceptance in wordpress.org directory" on WordCamp..."Ensuring chances of theme acceptance in wordpress.org directory" on WordCamp...
"Ensuring chances of theme acceptance in wordpress.org directory" on WordCamp...
 
Multisite core concepts final
Multisite core concepts finalMultisite core concepts final
Multisite core concepts final
 
Stop Coding; Start Assembling Your Websites
Stop Coding; Start Assembling Your WebsitesStop Coding; Start Assembling Your Websites
Stop Coding; Start Assembling Your Websites
 
11 Crazy Marketing Statistics
11 Crazy Marketing Statistics11 Crazy Marketing Statistics
11 Crazy Marketing Statistics
 

Similar to CSS Tricks for WordPress - WordCamp Phoenix

WDS UXP Mobile Web May 2008
WDS UXP Mobile Web May 2008WDS UXP Mobile Web May 2008
WDS UXP Mobile Web May 2008Oliver Weidlich
 
ADUG - May 2014 - Theming in Drupal using Sass
ADUG - May 2014 - Theming in Drupal using SassADUG - May 2014 - Theming in Drupal using Sass
ADUG - May 2014 - Theming in Drupal using SassEric Sembrat
 
CSS vs. JavaScript - Trust vs. Control
CSS vs. JavaScript - Trust vs. ControlCSS vs. JavaScript - Trust vs. Control
CSS vs. JavaScript - Trust vs. ControlChristian Heilmann
 
Introduction to CSS3
Introduction to CSS3Introduction to CSS3
Introduction to CSS3hstryk
 
Authoring Stylesheets with Compass & Sass
Authoring Stylesheets with Compass & SassAuthoring Stylesheets with Compass & Sass
Authoring Stylesheets with Compass & Sasschriseppstein
 
Developing for Responsive Design - Frederic Welterlin
Developing for Responsive Design - Frederic WelterlinDeveloping for Responsive Design - Frederic Welterlin
Developing for Responsive Design - Frederic WelterlinRazorfish
 
Introduction to Responsive Web Design
Introduction to Responsive Web DesignIntroduction to Responsive Web Design
Introduction to Responsive Web DesignClarissa Peterson
 
Autoscaling Best Practices
Autoscaling Best PracticesAutoscaling Best Practices
Autoscaling Best PracticesMarc Cluet
 
Why the heck isnt word press a cms
Why the heck isnt word press a cmsWhy the heck isnt word press a cms
Why the heck isnt word press a cmsJohn Eckman
 
Mobile and Responsive Design with Sass
Mobile and Responsive Design with SassMobile and Responsive Design with Sass
Mobile and Responsive Design with Sassnyccamp
 
2- Learn Flexbox & CSS Grid / Context
2- Learn Flexbox & CSS Grid / Context2- Learn Flexbox & CSS Grid / Context
2- Learn Flexbox & CSS Grid / ContextIn a Rocket
 
Mobile First Responsive Design
Mobile First Responsive DesignMobile First Responsive Design
Mobile First Responsive DesignJason Grigsby
 
IV - CSS architecture
IV - CSS architectureIV - CSS architecture
IV - CSS architectureWebF
 
20111129 modernizr
20111129 modernizr20111129 modernizr
20111129 modernizrbrooky-yen
 
The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}
The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}
The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}Eric Carlisle
 
CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017
CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017
CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017Morten Rand-Hendriksen
 
The Modern Web, Part 2: HTML5
The Modern Web, Part 2: HTML5The Modern Web, Part 2: HTML5
The Modern Web, Part 2: HTML5David Pallmann
 
Creating Responsive Drupal Sites with Zen Grids and the Zen 5 Theme
Creating Responsive Drupal Sites with Zen Grids and the Zen 5 ThemeCreating Responsive Drupal Sites with Zen Grids and the Zen 5 Theme
Creating Responsive Drupal Sites with Zen Grids and the Zen 5 ThemeAcquia
 
Client responsive design
Client   responsive designClient   responsive design
Client responsive designshmulik-tal
 

Similar to CSS Tricks for WordPress - WordCamp Phoenix (20)

WDS UXP Mobile Web May 2008
WDS UXP Mobile Web May 2008WDS UXP Mobile Web May 2008
WDS UXP Mobile Web May 2008
 
ADUG - May 2014 - Theming in Drupal using Sass
ADUG - May 2014 - Theming in Drupal using SassADUG - May 2014 - Theming in Drupal using Sass
ADUG - May 2014 - Theming in Drupal using Sass
 
CSS vs. JavaScript - Trust vs. Control
CSS vs. JavaScript - Trust vs. ControlCSS vs. JavaScript - Trust vs. Control
CSS vs. JavaScript - Trust vs. Control
 
Introduction to CSS3
Introduction to CSS3Introduction to CSS3
Introduction to CSS3
 
WordPress for mobile
WordPress for mobileWordPress for mobile
WordPress for mobile
 
Authoring Stylesheets with Compass & Sass
Authoring Stylesheets with Compass & SassAuthoring Stylesheets with Compass & Sass
Authoring Stylesheets with Compass & Sass
 
Developing for Responsive Design - Frederic Welterlin
Developing for Responsive Design - Frederic WelterlinDeveloping for Responsive Design - Frederic Welterlin
Developing for Responsive Design - Frederic Welterlin
 
Introduction to Responsive Web Design
Introduction to Responsive Web DesignIntroduction to Responsive Web Design
Introduction to Responsive Web Design
 
Autoscaling Best Practices
Autoscaling Best PracticesAutoscaling Best Practices
Autoscaling Best Practices
 
Why the heck isnt word press a cms
Why the heck isnt word press a cmsWhy the heck isnt word press a cms
Why the heck isnt word press a cms
 
Mobile and Responsive Design with Sass
Mobile and Responsive Design with SassMobile and Responsive Design with Sass
Mobile and Responsive Design with Sass
 
2- Learn Flexbox & CSS Grid / Context
2- Learn Flexbox & CSS Grid / Context2- Learn Flexbox & CSS Grid / Context
2- Learn Flexbox & CSS Grid / Context
 
Mobile First Responsive Design
Mobile First Responsive DesignMobile First Responsive Design
Mobile First Responsive Design
 
IV - CSS architecture
IV - CSS architectureIV - CSS architecture
IV - CSS architecture
 
20111129 modernizr
20111129 modernizr20111129 modernizr
20111129 modernizr
 
The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}
The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}
The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}
 
CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017
CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017
CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017
 
The Modern Web, Part 2: HTML5
The Modern Web, Part 2: HTML5The Modern Web, Part 2: HTML5
The Modern Web, Part 2: HTML5
 
Creating Responsive Drupal Sites with Zen Grids and the Zen 5 Theme
Creating Responsive Drupal Sites with Zen Grids and the Zen 5 ThemeCreating Responsive Drupal Sites with Zen Grids and the Zen 5 Theme
Creating Responsive Drupal Sites with Zen Grids and the Zen 5 Theme
 
Client responsive design
Client   responsive designClient   responsive design
Client responsive design
 

More from Sara Cannon

Open Source Creativity
Open Source CreativityOpen Source Creativity
Open Source CreativitySara Cannon
 
Design Strategy: How information Can Drive Your Designs Decisions To Success
Design Strategy: How information Can Drive Your Designs Decisions To SuccessDesign Strategy: How information Can Drive Your Designs Decisions To Success
Design Strategy: How information Can Drive Your Designs Decisions To SuccessSara Cannon
 
Sara cannon pushing the creative limit
Sara cannon   pushing the creative limitSara cannon   pushing the creative limit
Sara cannon pushing the creative limitSara Cannon
 
Learning Through Stealing - How to Become Better At Your Craft
Learning Through Stealing - How to Become Better At Your CraftLearning Through Stealing - How to Become Better At Your Craft
Learning Through Stealing - How to Become Better At Your CraftSara Cannon
 
WordPress & User Experience - WordCamp London
WordPress & User Experience - WordCamp LondonWordPress & User Experience - WordCamp London
WordPress & User Experience - WordCamp LondonSara Cannon
 
WordPress & User Experience - WordCamp St. Louis
WordPress & User Experience - WordCamp St. LouisWordPress & User Experience - WordCamp St. Louis
WordPress & User Experience - WordCamp St. LouisSara Cannon
 
Typography and User Experience - WCSF
Typography and User Experience -  WCSFTypography and User Experience -  WCSF
Typography and User Experience - WCSFSara Cannon
 
Typography and User Experience in Web Design
Typography and User Experience in Web DesignTypography and User Experience in Web Design
Typography and User Experience in Web DesignSara Cannon
 
Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014
Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014
Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014Sara Cannon
 
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influenceSMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influenceSara Cannon
 
The Future of UI - How Mobile Design is Shaping The Web 2
The Future of UI - How Mobile Design is Shaping The Web 2The Future of UI - How Mobile Design is Shaping The Web 2
The Future of UI - How Mobile Design is Shaping The Web 2Sara Cannon
 
Designer vs Developer: BE THE UNICORN
Designer vs Developer: BE THE UNICORNDesigner vs Developer: BE THE UNICORN
Designer vs Developer: BE THE UNICORNSara Cannon
 
Designer vs Developer: Creators in WordPress
Designer vs Developer: Creators in WordPressDesigner vs Developer: Creators in WordPress
Designer vs Developer: Creators in WordPressSara Cannon
 
Designing for The Modern Web
Designing for The Modern WebDesigning for The Modern Web
Designing for The Modern WebSara Cannon
 
Font Swoon - Advanced Web Typography
Font Swoon - Advanced Web TypographyFont Swoon - Advanced Web Typography
Font Swoon - Advanced Web TypographySara Cannon
 
Design Swoon - Visual Trends & WordPress
Design Swoon - Visual Trends  & WordPressDesign Swoon - Visual Trends  & WordPress
Design Swoon - Visual Trends & WordPressSara Cannon
 
UI Design for Themes and Plugins by Chelsea Otakan & Sara Cannon
UI Design for Themes and Plugins by Chelsea Otakan & Sara CannonUI Design for Themes and Plugins by Chelsea Otakan & Sara Cannon
UI Design for Themes and Plugins by Chelsea Otakan & Sara CannonSara Cannon
 
Typography on the Web
Typography on the WebTypography on the Web
Typography on the WebSara Cannon
 

More from Sara Cannon (20)

Open Source Creativity
Open Source CreativityOpen Source Creativity
Open Source Creativity
 
Design Strategy: How information Can Drive Your Designs Decisions To Success
Design Strategy: How information Can Drive Your Designs Decisions To SuccessDesign Strategy: How information Can Drive Your Designs Decisions To Success
Design Strategy: How information Can Drive Your Designs Decisions To Success
 
Sara cannon pushing the creative limit
Sara cannon   pushing the creative limitSara cannon   pushing the creative limit
Sara cannon pushing the creative limit
 
Learning Through Stealing - How to Become Better At Your Craft
Learning Through Stealing - How to Become Better At Your CraftLearning Through Stealing - How to Become Better At Your Craft
Learning Through Stealing - How to Become Better At Your Craft
 
WordPress & User Experience - WordCamp London
WordPress & User Experience - WordCamp LondonWordPress & User Experience - WordCamp London
WordPress & User Experience - WordCamp London
 
WordPress & User Experience - WordCamp St. Louis
WordPress & User Experience - WordCamp St. LouisWordPress & User Experience - WordCamp St. Louis
WordPress & User Experience - WordCamp St. Louis
 
Typography and User Experience - WCSF
Typography and User Experience -  WCSFTypography and User Experience -  WCSF
Typography and User Experience - WCSF
 
Typography and User Experience in Web Design
Typography and User Experience in Web DesignTypography and User Experience in Web Design
Typography and User Experience in Web Design
 
Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014
Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014
Smart Design - Content-first, Fast, Informed, Refined. WordCamp NYC 2014
 
Smart Design
Smart Design Smart Design
Smart Design
 
SMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influenceSMART DESIGN - icon fonts, svg, and the mobile influence
SMART DESIGN - icon fonts, svg, and the mobile influence
 
IconFonts
IconFontsIconFonts
IconFonts
 
The Future of UI - How Mobile Design is Shaping The Web 2
The Future of UI - How Mobile Design is Shaping The Web 2The Future of UI - How Mobile Design is Shaping The Web 2
The Future of UI - How Mobile Design is Shaping The Web 2
 
Designer vs Developer: BE THE UNICORN
Designer vs Developer: BE THE UNICORNDesigner vs Developer: BE THE UNICORN
Designer vs Developer: BE THE UNICORN
 
Designer vs Developer: Creators in WordPress
Designer vs Developer: Creators in WordPressDesigner vs Developer: Creators in WordPress
Designer vs Developer: Creators in WordPress
 
Designing for The Modern Web
Designing for The Modern WebDesigning for The Modern Web
Designing for The Modern Web
 
Font Swoon - Advanced Web Typography
Font Swoon - Advanced Web TypographyFont Swoon - Advanced Web Typography
Font Swoon - Advanced Web Typography
 
Design Swoon - Visual Trends & WordPress
Design Swoon - Visual Trends  & WordPressDesign Swoon - Visual Trends  & WordPress
Design Swoon - Visual Trends & WordPress
 
UI Design for Themes and Plugins by Chelsea Otakan & Sara Cannon
UI Design for Themes and Plugins by Chelsea Otakan & Sara CannonUI Design for Themes and Plugins by Chelsea Otakan & Sara Cannon
UI Design for Themes and Plugins by Chelsea Otakan & Sara Cannon
 
Typography on the Web
Typography on the WebTypography on the Web
Typography on the Web
 

Recently uploaded

VM Migration from VMware to CloudStack and KVM – Suresh Anaparti, ShapeBlue
VM Migration from VMware to CloudStack and KVM – Suresh Anaparti, ShapeBlueVM Migration from VMware to CloudStack and KVM – Suresh Anaparti, ShapeBlue
VM Migration from VMware to CloudStack and KVM – Suresh Anaparti, ShapeBlueShapeBlue
 
Q4 2023 Quarterly Investor Presentation - FINAL.pdf
Q4 2023 Quarterly Investor Presentation - FINAL.pdfQ4 2023 Quarterly Investor Presentation - FINAL.pdf
Q4 2023 Quarterly Investor Presentation - FINAL.pdfTejal81
 
Pragmatic UI testing with Compose Semantics.pdf
Pragmatic UI testing with Compose Semantics.pdfPragmatic UI testing with Compose Semantics.pdf
Pragmatic UI testing with Compose Semantics.pdfinfogdgmi
 
Enterprise Architecture As Strategy - Book Review
Enterprise Architecture As Strategy - Book ReviewEnterprise Architecture As Strategy - Book Review
Enterprise Architecture As Strategy - Book ReviewAshraf Fouad
 
Microsoft x 2toLead Webinar Session 1 - How Employee Communication and Connec...
Microsoft x 2toLead Webinar Session 1 - How Employee Communication and Connec...Microsoft x 2toLead Webinar Session 1 - How Employee Communication and Connec...
Microsoft x 2toLead Webinar Session 1 - How Employee Communication and Connec...2toLead Limited
 
ASTRAZENECA. Knowledge Graphs Powering a Fast-moving Global Life Sciences Org...
ASTRAZENECA. Knowledge Graphs Powering a Fast-moving Global Life Sciences Org...ASTRAZENECA. Knowledge Graphs Powering a Fast-moving Global Life Sciences Org...
ASTRAZENECA. Knowledge Graphs Powering a Fast-moving Global Life Sciences Org...Neo4j
 
iOncologi_Pitch Deck_2024 slide show for hostinger
iOncologi_Pitch Deck_2024 slide show for hostingeriOncologi_Pitch Deck_2024 slide show for hostinger
iOncologi_Pitch Deck_2024 slide show for hostingerssuser9354ce
 
Improving IT Investment Decisions and Business Outcomes with Integrated Enter...
Improving IT Investment Decisions and Business Outcomes with Integrated Enter...Improving IT Investment Decisions and Business Outcomes with Integrated Enter...
Improving IT Investment Decisions and Business Outcomes with Integrated Enter...Cprime
 
New ThousandEyes Product Features and Release Highlights: February 2024
New ThousandEyes Product Features and Release Highlights: February 2024New ThousandEyes Product Features and Release Highlights: February 2024
New ThousandEyes Product Features and Release Highlights: February 2024ThousandEyes
 
AI improves software testing to be more fault tolerant, focused and efficient
AI improves software testing to be more fault tolerant, focused and efficientAI improves software testing to be more fault tolerant, focused and efficient
AI improves software testing to be more fault tolerant, focused and efficientKari Kakkonen
 
Building Bridges: Merging RPA Processes, UiPath Apps, and Data Service to bu...
Building Bridges:  Merging RPA Processes, UiPath Apps, and Data Service to bu...Building Bridges:  Merging RPA Processes, UiPath Apps, and Data Service to bu...
Building Bridges: Merging RPA Processes, UiPath Apps, and Data Service to bu...DianaGray10
 
Large Language Models and Applications in Healthcare
Large Language Models and Applications in HealthcareLarge Language Models and Applications in Healthcare
Large Language Models and Applications in HealthcareAsma Ben Abacha
 
CloudStack Tooling Ecosystem – Kiran Chavala, ShapeBlue
CloudStack Tooling Ecosystem – Kiran Chavala, ShapeBlueCloudStack Tooling Ecosystem – Kiran Chavala, ShapeBlue
CloudStack Tooling Ecosystem – Kiran Chavala, ShapeBlueShapeBlue
 
Mind your App Footprint 🐾⚡️🌱 (@FlutterHeroes 2024)
Mind your App Footprint 🐾⚡️🌱 (@FlutterHeroes 2024)Mind your App Footprint 🐾⚡️🌱 (@FlutterHeroes 2024)
Mind your App Footprint 🐾⚡️🌱 (@FlutterHeroes 2024)François
 
Learning About GenAI Engineering with AWS PartyRock [AWS User Group Basel - F...
Learning About GenAI Engineering with AWS PartyRock [AWS User Group Basel - F...Learning About GenAI Engineering with AWS PartyRock [AWS User Group Basel - F...
Learning About GenAI Engineering with AWS PartyRock [AWS User Group Basel - F...Chris Bingham
 
The Art of the Possible with Graph by Dr Jim Webber Neo4j.pptx
The Art of the Possible with Graph by Dr Jim Webber Neo4j.pptxThe Art of the Possible with Graph by Dr Jim Webber Neo4j.pptx
The Art of the Possible with Graph by Dr Jim Webber Neo4j.pptxNeo4j
 
National Institute of Standards and Technology (NIST) Cybersecurity Framework...
National Institute of Standards and Technology (NIST) Cybersecurity Framework...National Institute of Standards and Technology (NIST) Cybersecurity Framework...
National Institute of Standards and Technology (NIST) Cybersecurity Framework...MichaelBenis1
 
TrustArc Webinar - TrustArc's Latest AI Innovations
TrustArc Webinar - TrustArc's Latest AI InnovationsTrustArc Webinar - TrustArc's Latest AI Innovations
TrustArc Webinar - TrustArc's Latest AI InnovationsTrustArc
 
GDG Cloud Southlake 30 Brian Demers Breeding 10x Developers with Developer Pr...
GDG Cloud Southlake 30 Brian Demers Breeding 10x Developers with Developer Pr...GDG Cloud Southlake 30 Brian Demers Breeding 10x Developers with Developer Pr...
GDG Cloud Southlake 30 Brian Demers Breeding 10x Developers with Developer Pr...James Anderson
 
Artificial Intelligence, Design, and More-than-Human Justice
Artificial Intelligence, Design, and More-than-Human JusticeArtificial Intelligence, Design, and More-than-Human Justice
Artificial Intelligence, Design, and More-than-Human JusticeJosh Gellers
 

Recently uploaded (20)

VM Migration from VMware to CloudStack and KVM – Suresh Anaparti, ShapeBlue
VM Migration from VMware to CloudStack and KVM – Suresh Anaparti, ShapeBlueVM Migration from VMware to CloudStack and KVM – Suresh Anaparti, ShapeBlue
VM Migration from VMware to CloudStack and KVM – Suresh Anaparti, ShapeBlue
 
Q4 2023 Quarterly Investor Presentation - FINAL.pdf
Q4 2023 Quarterly Investor Presentation - FINAL.pdfQ4 2023 Quarterly Investor Presentation - FINAL.pdf
Q4 2023 Quarterly Investor Presentation - FINAL.pdf
 
Pragmatic UI testing with Compose Semantics.pdf
Pragmatic UI testing with Compose Semantics.pdfPragmatic UI testing with Compose Semantics.pdf
Pragmatic UI testing with Compose Semantics.pdf
 
Enterprise Architecture As Strategy - Book Review
Enterprise Architecture As Strategy - Book ReviewEnterprise Architecture As Strategy - Book Review
Enterprise Architecture As Strategy - Book Review
 
Microsoft x 2toLead Webinar Session 1 - How Employee Communication and Connec...
Microsoft x 2toLead Webinar Session 1 - How Employee Communication and Connec...Microsoft x 2toLead Webinar Session 1 - How Employee Communication and Connec...
Microsoft x 2toLead Webinar Session 1 - How Employee Communication and Connec...
 
ASTRAZENECA. Knowledge Graphs Powering a Fast-moving Global Life Sciences Org...
ASTRAZENECA. Knowledge Graphs Powering a Fast-moving Global Life Sciences Org...ASTRAZENECA. Knowledge Graphs Powering a Fast-moving Global Life Sciences Org...
ASTRAZENECA. Knowledge Graphs Powering a Fast-moving Global Life Sciences Org...
 
iOncologi_Pitch Deck_2024 slide show for hostinger
iOncologi_Pitch Deck_2024 slide show for hostingeriOncologi_Pitch Deck_2024 slide show for hostinger
iOncologi_Pitch Deck_2024 slide show for hostinger
 
Improving IT Investment Decisions and Business Outcomes with Integrated Enter...
Improving IT Investment Decisions and Business Outcomes with Integrated Enter...Improving IT Investment Decisions and Business Outcomes with Integrated Enter...
Improving IT Investment Decisions and Business Outcomes with Integrated Enter...
 
New ThousandEyes Product Features and Release Highlights: February 2024
New ThousandEyes Product Features and Release Highlights: February 2024New ThousandEyes Product Features and Release Highlights: February 2024
New ThousandEyes Product Features and Release Highlights: February 2024
 
AI improves software testing to be more fault tolerant, focused and efficient
AI improves software testing to be more fault tolerant, focused and efficientAI improves software testing to be more fault tolerant, focused and efficient
AI improves software testing to be more fault tolerant, focused and efficient
 
Building Bridges: Merging RPA Processes, UiPath Apps, and Data Service to bu...
Building Bridges:  Merging RPA Processes, UiPath Apps, and Data Service to bu...Building Bridges:  Merging RPA Processes, UiPath Apps, and Data Service to bu...
Building Bridges: Merging RPA Processes, UiPath Apps, and Data Service to bu...
 
Large Language Models and Applications in Healthcare
Large Language Models and Applications in HealthcareLarge Language Models and Applications in Healthcare
Large Language Models and Applications in Healthcare
 
CloudStack Tooling Ecosystem – Kiran Chavala, ShapeBlue
CloudStack Tooling Ecosystem – Kiran Chavala, ShapeBlueCloudStack Tooling Ecosystem – Kiran Chavala, ShapeBlue
CloudStack Tooling Ecosystem – Kiran Chavala, ShapeBlue
 
Mind your App Footprint 🐾⚡️🌱 (@FlutterHeroes 2024)
Mind your App Footprint 🐾⚡️🌱 (@FlutterHeroes 2024)Mind your App Footprint 🐾⚡️🌱 (@FlutterHeroes 2024)
Mind your App Footprint 🐾⚡️🌱 (@FlutterHeroes 2024)
 
Learning About GenAI Engineering with AWS PartyRock [AWS User Group Basel - F...
Learning About GenAI Engineering with AWS PartyRock [AWS User Group Basel - F...Learning About GenAI Engineering with AWS PartyRock [AWS User Group Basel - F...
Learning About GenAI Engineering with AWS PartyRock [AWS User Group Basel - F...
 
The Art of the Possible with Graph by Dr Jim Webber Neo4j.pptx
The Art of the Possible with Graph by Dr Jim Webber Neo4j.pptxThe Art of the Possible with Graph by Dr Jim Webber Neo4j.pptx
The Art of the Possible with Graph by Dr Jim Webber Neo4j.pptx
 
National Institute of Standards and Technology (NIST) Cybersecurity Framework...
National Institute of Standards and Technology (NIST) Cybersecurity Framework...National Institute of Standards and Technology (NIST) Cybersecurity Framework...
National Institute of Standards and Technology (NIST) Cybersecurity Framework...
 
TrustArc Webinar - TrustArc's Latest AI Innovations
TrustArc Webinar - TrustArc's Latest AI InnovationsTrustArc Webinar - TrustArc's Latest AI Innovations
TrustArc Webinar - TrustArc's Latest AI Innovations
 
GDG Cloud Southlake 30 Brian Demers Breeding 10x Developers with Developer Pr...
GDG Cloud Southlake 30 Brian Demers Breeding 10x Developers with Developer Pr...GDG Cloud Southlake 30 Brian Demers Breeding 10x Developers with Developer Pr...
GDG Cloud Southlake 30 Brian Demers Breeding 10x Developers with Developer Pr...
 
Artificial Intelligence, Design, and More-than-Human Justice
Artificial Intelligence, Design, and More-than-Human JusticeArtificial Intelligence, Design, and More-than-Human Justice
Artificial Intelligence, Design, and More-than-Human Justice
 

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 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
  • 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
  • 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