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>

Comments

Post a Comment

Popular posts from this blog

PHP: Date Difference for PHP 5.2

function days_diff($d1, $d2) {     $x1 = days($d1);     $x2 = days($d2);      if ($x1 && $x2) {         return abs($x1 - $x2);     } } function days($x) {     if (get_class($x) != 'DateTime') {         return false;     }      $y = $x->format('Y') - 1;     $days = $y * 365;     $z = (int)($y / 4);     $days += $z;     $z = (int)($y / 100);     $days -= $z;     $z = (int)($y / 400);     $days += $z;     $days += $x->format('z');     return $days; } // Call function $start_date = '2015-08-19 15:18:19'; $end_date = '2015-08-22 15:18:19'; $date1=date_create(date('Y-m-j',strtotime($start_date))); $date2=date_create(date('Y-m-j',strtotime($end_date))); $diff=date_diff($date1,$date2); echo $diff;
Read more

HTML5 video loop src change on end play function

1. HTML <video id="homevideo" width="100%" autoplay onended="run()">     <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" /> </video> <ul>     <li>http://www.w3schools.com/html/mov_bbb.mp4</li>     <li>http://www.w3schools.com/html/movie.mp4</li> </ul> 2. CSS <style type='text/css'>     ul {         display:none;     }   </style> 3. jQuery <script type="text/javascript"> video_count = 0; videoPlayer = document.getElementById("homevideo"); function run(){    video_count++;     var countVideo = $('li').length;         if (video_count == countVideo) video_count = 0;        var nextVideo = $('li').eq(video_count).text();         videoPlayer.src = nextVideo;     videoPlayer.play();         }; </script> Working Demo
Read more

Custom OpenCart 2.3.0.2 theme

Image
I was looking to customize the default theme in OpenCart 2.3.0.2 and realized that I will probably need to do quite a bit of work given there was no immediate “help” related on the subject. In essence it turned out to be a lot less painful than I thought. Here is what I did. Assuming new theme name “mytheme” and title “My Theme”. Make copies… To start with copy the  default  folder found in upload/catalog/view/theme/default to a new folder in the same directory. Name it “ mytheme “. Then copy the  theme_default.php  file in upload/admin/controller/extension/theme and place it in same directory. Name it “ mytheme.php “. + Rename the class to (line 2): ControllerExtensionThemeMyTheme + Replace all “ theme_default ” text to “ mytheme “. Yes there are a lot (197). Copy the  theme_default.tpl  in upload/admin/view/template/extension/theme and place it in the same directory. Name it “ mytheme.tpl “. + Replace all “ theme_default ” text to “ mytheme “. (48) Cop
Read more