Filetype:png. Tshirts. Eat Green Design - Home. CSS Message Box collection. Message boxes are useful elements to display status messages after or during a specific user request. Some days ago I wrote this post about how to implement a nice Ajax chains of effects (fade in, delay, fade out) for a common message box using mootools. Today I want to share with you a collection of some simple CSS styles you can apply to your message boxes (clean, solid, iconized, alternated rounded borders, tooltip). I added also a link to download a beautiful icon pack to use in your projects to design custom message box or other graphic elements.
Download message box collection source code Clean message box I love clean and simple design and in general this is my preferred message box style: a border (1px) and a light background color: HTML code is very simple: <div class="clean-gray">Clean message box</div> ...a DIV layer with with some text within. .clean-gray{ border:solid 1px #DEDEDE; background:#EFEFEF;color:#222222;padding:4px;text-align:center; ...and the related CSS code is: Filament group inc. || Styling the Button Element with Sliding Doors. Posted by Maggie on 04/24/2009 Topics: css ui design visual design We dusted off our original sliding doors button to give it a much needed update. The button now works with image sprites thanks to the CSS contributions of Louis Walch, and also works with a single block of CSS (we’ve removed the now unnecessary conditional comments for IE) in all major browsers including IE versions 6 through 8.
For those not familiar, form buttons are notoriously difficult to customize because they render differently across browsers and platforms. Apply a single, unique background image with the text "baked in" for each type of button (i.e., "Submit", "Send message") and its rollover state. While these methods may work in particular situations, we needed a more flexible solution that accommodated a wider range of styles. Our solution The result is a cross-browser method for styling button elements with sliding door sprites.
Examples Demo Page Sprite image Markup Supported Browsers So far it works in: Caveats Credits.