Sensational css how to show off your super sweet

1,074 views
991 views

Published on

Published in: Education, Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,074
On SlideShare
0
From Embeds
0
Number of Embeds
213
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Sensational css how to show off your super sweet

  1. 1. Sensational CSS:How to Show Off Your Super Sweet CSS Skills Karen Arnold | @karenalma | karenalma.com karenalma@gmail.com
  2. 2. Find it here: http://wordpress.org/extend/plugins/safecss
  3. 3. CSS Editor
  4. 4. Add a body backgroundbody {background:#EFE9DB url(images/pattern.jpg) fixed repeat top center;}Background details: ● background-color: #EFE9DB ● background-image: url(images/pattern.jpg) ● background-repeat: repeat ● background-attachment: fixed ● background-position: top left
  5. 5. Add a page background#page {background:#EBE3D9 url(images/paper-beige.jpg) repeat;box-shadow:8px 8px 14px #000000;margin-top:4em;max-width:1050px;padding:0 2%;}Background details: ● background-color: #EBE3D9 ● background-image: url(images/paper-beige.jpg) ● background-repeat: repeat
  6. 6. Round the corners#branding img {border-radius:25px 25px 0 0;}Border Radius details: ● border-top-left-radius: 25px; ● border-top-right-radius: 25px; ● border-bottom-right-radius: 0; ● border-bottom-left-radius: 0;
  7. 7. Round the corners again#access {background:#420001;border-radius:0 0 25px 25px;}Border Radius details: ● border-top-left-radius: 0; ● border-top-right-radius: 0; ● border-bottom-right-radius: 25px; ● border-bottom-left-radius: 25px;
  8. 8. Change the color of the title#site-title {color:#783030;}#site-title a {color:#783030;}#site-title a:hover,#site-title a:focus,#site-title a:active {color:#81AB83;}
  9. 9. More roundinginput#s {border-radius:10px;}Border Radius details: ● border-top-left-radius: 10px; ● border-top-right-radius: 10px; ● border-bottom-right-radius: 10px; ● border-bottom-left-radius: 10px;
  10. 10. Remove background from footer area#site-generator {background:none;}
  11. 11. One last thinga{color:#81AB83;}
  12. 12. Resources:WordPress.org (self-hosted sites)http://codex.wordpress.org/WordPress_Quick_Start_Guidehttp://codex.wordpress.org/Know_Your_Sources#CSSWordPress.comhttp://en.support.wordpress.com/custom-design/css-basicsNice free stuff:http://pattern8.com/http://www.colorpicker.com/Google :)Custom CSS Plugin:http://wordpress.org/extend/plugins/safecss/
  13. 13. Spectacular Showcase http://wordpress.org/showcase/ http://theme.wordpress.com/customize/
  14. 14. Before
  15. 15. After
  16. 16. Before
  17. 17. After
  18. 18. Before
  19. 19. After
  20. 20. Before
  21. 21. After
  22. 22. Before
  23. 23. After
  24. 24. Before
  25. 25. After
  26. 26. Before
  27. 27. After
  28. 28. Before
  29. 29. After
  30. 30. Questions?
  31. 31. Additional ResourcesWordPress.comTheme directoryhttp://theme.wordpress.com/themes/Theme Showcasehttp://theme.wordpress.com/customize/WordPress.orgTheme Repositoryhttp://wordpress.org/extend/themes/Theme Showcasehttp://wordpress.org/showcase/
  32. 32. CSS Resourceshttp://www.w3schools.com/css/(Neat "try it yourself" button)http://www.css3.infohttp://css-tricks.comhttp://en.forums.wordpress.com/forum/css-customization/

×