Skip to content Skip to tags Skip to twitter news Skip to blog roll Skip to categories Skip to archives Skip to recent posts

November 24, 2008


Notices, what notices?

by in css,Tips on November 24, 2008 @ 2:00 pm

I’ve been using Blueprint css framework for a bit now mainly for the typography structure it provides.  But lately I’ve been investigating the rest of the framework.  Just a few weeks ago I noticed some of the default classes it has for forms error, notice and success.

Although they do and look like you would expect I decided to add a little flare to them.

The Look

The Code

  1. .error, .notice, .success {
  2.     padding:.8em;
  3.     margin-bottom:1em;
  4.     border:2px solid #ddd;
  5.     padding-left:5em;
  6.     -moz-border-radius: 0 10px 0 10px;
  7.     -webkit-border-radius: 0 10px 0 10px;
  8. }
  9. .error {
  10.     background:#FBE3E4 url(../img/cancel_48.png) no-repeat 15px center;
  11.     color:#8a1f11;
  12.     border-color:#FBC2C4;
  13. }
  14. .notice {
  15.     background:#FFF6BF url(../img/warning_48.png) no-repeat 15px center;
  16.     color:#514721;
  17.     border-color:#FFD324;
  18. }
  19. .success {
  20.     background:#E6EFC2 url(../img/accepted_48.png) no-repeat 15px center;
  21.     color:#264409;
  22.     border-color:#C6D880;
  23. }

The Closing

Someone once told me, when optimizing my images for the web from Photoshop or Fireworks, don’t use the default values.  I think the same should be said about using any of these css frameworks that are out there.  Get into the code and 1) learn what’s going on and 2) experiment with the default values.  You will be glad you did.


back to beginning of this post back to skip to links

If you liked this article why don't you share it:

Stumble it delicious Digg it Reddit it DZone it Bump it Mixx it! Buzz up! E-mail

Comments are closed.

Learn from my mistakes, I got burnt by the flame, you don't have to.

RSS Feed Link My Hosting of Choice

77 queries. 0.259 seconds. Powered by WordPress visitor stats