Background Origin in CSS

The default for background-origin is  padding-box. This means the background applies to the area containing the padding but not to the area containing the border:

section {
    margin: 1em;
    padding: 1em;
    border: 1em dashed black;
    background-origin: padding-box;
}

This sample image is scaled to fill its container and set not to repeat.

Setting the origin to border-box means that the background will now extend out under the border:

section {
    margin: 1em;
    padding: 1em;
    border: 1em dashed black;
    background-origin: border-box;
}

Multiple Background in CSS3

Hi 

Adding multiple background images is simply a matter of listing them, along with any relevant attributes, separated by commas in the background property:

background: top right
  url('pitr-head.png') no-repeat,
 bottom right
  url('aj-head.png') no-repeat,
 top left
  url('mike-head.png') no-repeat,
 bottom left
  url('sid-head.png') no-repeat;

Browser Support

    

Internet Explorer 9+, Firefox 3.6+, Opera 10.5+, Chrome 7+, and Safari 3+ support the <canvas> element.

CSS3 :nth-child() Selector

Hi this si css selector for li

li:nth-child(2n)
{
background:#ff0000;
}

Selector Exp 
li:nth-child(odd)
li:nth-child(even)
li:nth-child(3n+0)
li:first-child

after and before

li:after
li:before

CSS3 Transitions, Animation

Hi !

There is some css code for reference of Css3 transitions, animations

div
{
width:100px;
height:100px;
background:red;
transition:width 2s; /* use transition artibute name and animation time  */
-webkit-transition:width 2s; /* Safari */
}
div:hover
{
width:300px;
}

Thanks :)

Remove drop-down arrow from select element for all Browser

Hi friends ,
Here is code in css3 for Remove drop-down arrow from select element for all Browser

.left-new li select
{
background-color: Transparent;
border: 0px;
 -webkit-appearance: none;
-moz-appearance: none;
text-indent: 0.01px;
text-overflow: '';
appearance: none;
}

/*for ie */

.left-new li select::-ms-expand
{
    display: none;
} 

Removing the IE10 Select Element Arrow

Hi Friends,
appearance: none for ie 10
Here is custom drop down control for ie Or remove drop-down arrow in ie

Css3 :

.left-new li select::-ms-expand
{
    display: none;

}


Thanks :)

Opencart Description on Home Featured Products

Hey Friends

There are Some Steps for Display Description On home Page in Featured product section.

Step 1. Open catalog/controler/module/featured.php

And find in code :

'name'     => $product_info['name'],

 And add after Code:

'DESCRIPTION'    => $PRODUCT_INFO['DESCRIPTION'],

Step 2. now open catalog/view/theme/your-theme/template/module/featured.tpl
looking your location like :

<span class="price-old"><?php echo $product['price']; ?></span> <span class="price-new"><?php echo $product['special']; ?></span>
          <?php } ?>
        </div>

Add after this code :

<div style="min-height:140px;"><?php echo "<p>".mb_substr(strip_tags(html_entity_decode($product['description'])), 0, 150)."...</p>"; ?></div>

Thanks
Comments are most welcome :)