Facebook Dialog HTML + CSS

HTML

<div class=”_1yu” id=”like_get_box”>
<div class=”_t”>
<div data-markup=”like_gate_title” class=”pvs phm _1yw” id=”u_ef_0″>
Title
</div>
<div class=”_13″>
<div class=”pam” id=”fb_desc_box” data-markup=”like_gate_heading”>
Description
</div>
</div>
<div class=”_14″>
<div class=”pam uiOverlayFooter uiBoxGray topborder” id=”footer_fb_box”>
Footer
</div>
</div>
</div>
</div>

CSS

._1yu{border: 10px solid rgba(82, 82, 82, .7);-webkit-border-radius: 8px;-moz-border-radius: 8px;border-radius: 8px;}
._t{background-color: #fff;position: relative;}
#u_ef_0{background-color: #6d84b4;border: 1px solid #3b5998;border-bottom: 0;color: #fff;font-size: 14px;font-weight: bold;padding-top: 5px;padding-bottom: 5px;padding-left: 10px;padding-right: 10px;}
._13{border-color: #555;border-style: solid;border-width: 0 1px;}
#fb_desc_box{padding: 10px;}
._14{border-bottom-width: 1px;border-color: #555;border-style: solid;border-width: 0 1px;}
#footer_fb_box{text-align: right;padding: 10px;border-bottom: none;border-left: none;border-right: none;background-color: #f2f2f2;border: 1px solid #ccc;}

DEMO: http://jsfiddle.net/75vqV/

Bootstrap CSS Framework อีกตัวที่น่าเล่น

ครบครันมาก ๆ ในเรื่องการออกแบบและเครื่องมือช่วยต่าง ๆ Support Mobile Device ด้วย

ดูรายละเอียดเพิ่มเติม : http://twitter.github.com/bootstrap/scaffolding.html