Create bubble effect quotation - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Quote

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Quote

Description

Create bubble effect quotation

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <style>
.bubble-panel {<!--from  w w w  .j a  v a  2s  . c o m-->
   display:inline-block;
   position:relative;
   margin:21px;
}

.bubble
 {
   position:relative;
   width:536px;
   padding:5px;
   background:Chartreuse;
   -webkit-border-radius:32px;
   -moz-border-radius:32px;
   border-radius:32px;
   border:10px solid yellow;
   display:inline-block;
   vertical-align:middle;
}

.bubble p
 {
   margin:11px;
}

.bubble:after
 {
   content:'';
   position:absolute;
   border-style:solid;
   border-width:32px 15px 0;
   border-color:blue;
   display:block;
   width:0;
   z-index:2;
   margin-left:-15px;
   bottom:-32px;
   left:21%;
}

.bubble:before
 {
   content:'';
   position:absolute;
   border-style:solid;
   border-width:40px 23px 0;
   border-color:pink;
   display:block;
   width:0;
   z-index:0;
   margin-left:-23px;
   bottom:-49px;
   left:21%;
}

.caption {
   font-size:15px;
   line-height:2.6;
   position:relative;
   left:351px;
}

.caption h1, .caption h2, .caption h3 {
   font-size:2.1em;
   text-align:left;
   margin:0;
}
</style> 
 </head> 
 <body> 
  <div class="bubble-panel"> 
   <div class="bubble"> 
    <p>this is a test test test test </p> 
   </div> 
   <div class="caption"> 
    <h1>By PEDE</h1> 
    <h2>From Belgrade,MT</h2> 
    <h3>September 25,2013</h3> 
   </div> 
  </div> 
  <div class="bubble-panel"> 
   <div class="bubble"> 
    <p>this is a test test test testthis is a test test test testthis is a test test test testthis is a test test test test</p> 
   </div> 
   <div class="caption"> 
    <h1>By PEDE</h1> 
    <h2>From Belgrade,MT</h2> 
    <h3>September 25,2013</h3> 
   </div> 
  </div> 
  <div class="bubble-panel"> 
   <div class="bubble"> 
    <p>this is a test test test testthis is a test test test testthis is a test test test testthis is a test test test testthis is a test test test test.</p> 
   </div> 
   <div class="caption"> 
    <h1>By TEST</h1> 
    <h2>From Main,MT</h2> 
    <h3>September 25,2019</h3> 
   </div> 
  </div> 
  <div class="bubble-panel"> 
   <div class="bubble"> 
    <p>this is a test test test testthis is a test test test testthis is a test test test testthis is a test test test testthis is a test test test testthis is a test test test test</p> 
   </div> 
   <div class="caption"> 
    <h1>By YYY</h1> 
    <h2>From Main,MT</h2> 
    <h3>September 25,2019</h3> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials