Monday, August 8, 2011

blockqoute with before in css3

Create a simple CSS3 folded-corner effect without images. It works well in all modern browsers and is best suited to designs with simple color backgrounds.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit eleifend ligula ultrices vestibulum. Nunc posuere dolor eu mauris feugiat dignissim.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit eleifend ligula ultrices vestibulum. Nunc posuere dolor eu mauris feugiat dignissim.

<style type="text/css">
blockquote.qoute {
 font: 14px/28px arial;
 background: #97C02F;
    color: #FFFFFF;
    margin: 2em auto;
    overflow: hidden;
    padding: 1em 1.5em;
    position: relative;
    width: 480px;
    box-shadow: 0 0 0 rgba(0, 0, 0, 0.2), 
                0 20px 80px -20px rgba(0, 0, 200, 0.3) inset;

}
blockquote.qoute:before {
    content: " ";
     position:absolute;
    top:0;
    right:0;
    border-width:0 26px 26px 0;
    border-style:solid;
    border-color:#fff #fff #658E15 #658E15; 
    background:#658E15; 
    display:block;
 width:0;    
    -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
    -moz-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
    box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
}
</style>
<blockquote class="qoute">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet.
 Duis vel sem magna. Proin pulvinar velit eleifend ligula ultrices 
vestibulum. Nunc posuere dolor eu mauris feugiat dignissim.

   Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet.
 Duis vel sem magna. Proin pulvinar velit eleifend ligula ultrices 
vestibulum. Nunc posuere dolor eu mauris feugiat dignissim.
</blockquote>

No comments:

Post a Comment