el / Simple Callout Box Flat / CSS

/*/////// Simple Callout Box Style - Flat design modified by Kent/////////*/ .simplecalloutbox_preheader { margin-left:auto; margin-right:auto; background-color:#51acb3; color:#FFF; width:450px; -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 10px; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px; padding:15px 30px 10px 30px; /*box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 60px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;*/ } .simplecalloutbox { margin-left:auto; margin-right:auto; margin-top:25px; margin-bottom:30px; position:relative; background-color: #e3e7ea; border-top: 5px solid #76a499; width:450px; padding:25px 30px 20px 30px; font-size: 1.1em; color: #4a4a4a; /*box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 60px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;*/ } .simplecalloutbox_preheader+.simplecalloutbox { -webkit-border-bottom-right-radius: 10px; -webkit-border-bottom-left-radius: 10px; -moz-border-radius-bottomright: 10px; -moz-border-radius-bottomleft: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; -webkit-border-top-right-radius: 0px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topright: 0px; -moz-border-radius-topleft: 0px; border-top-right-radius: 0px; border-top-left-radius: 0px; margin-top:0px; } .simplecalloutbox p, .simplecalloutbox_preheader p { padding:0em; } .simplecalloutbox_header { font-weight:bold; font-size:1.5em; border-bottom:1px solid #000; margin-top:0em; margin-bottom:.5em; } .simplecalloutbox_subheader { font-weight:bold; font-size:1.5em; margin-top:0em; margin-bottom:.5em; }

3 Responses

looks interesting... do you have the markup for this?
@Brian Roy <div class="simplecalloutbox">

</div>

basically all the div with the class name inside as you want. :)
@Kent got it, thanks!

here's some screenshots of it for you: http://imgur.com/wL1u3NO&dG2lfNY

As for markup, this is what worked for me:

Write a comment

You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.