Notices, what notices?
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
CSS:
-
.error, .notice, .success {
-
padding:.8em;
-
margin-bottom:1em;
-
border:2px solid #ddd;
-
padding-left:5em;
-
-moz-border-radius: 0 10px 0 10px;
-
-webkit-border-radius: 0 10px 0 10px;
-
}
-
.error {
-
background:#FBE3E4 url(../img/cancel_48.png) no-repeat 15px center;
-
color:#8a1f11;
-
border-color:#FBC2C4;
-
}
-
.notice {
-
background:#FFF6BF url(../img/warning_48.png) no-repeat 15px center;
-
color:#514721;
-
border-color:#FFD324;
-
}
-
.success {
-
background:#E6EFC2 url(../img/accepted_48.png) no-repeat 15px center;
-
color:#264409;
-
border-color:#C6D880;
-
}
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.
Credits
- Icons from WeFunction
