CSS Tạo ảnh Aniamte nhấp nhái

**** HTML:

<p class="sale">30%</p>

**** CSS:

.sale{position: absolute;top: 50px;right: 10px;display: inline-block;background: #FF5722;color: white;height: 2.5rem;width: 2.5rem;text-align: center;vertical-align: middle;line-height: 2.5rem;-webkit-transform: rotate(-20deg);transform: rotate(-20deg);font-size: 13px;z-index: 9;-webkit-animation: beat 1s ease infinite alternate;animation: beat 1s ease infinite alternate;}

.sale:before, .sale:after {content: "";position: absolute;background: inherit;height: inherit;width: inherit;top: 0;left: 0;z-index: -1;-webkit-transform: rotate(30deg);transform: rotate(30deg);}

.sale:after {-webkit-transform: rotate(60deg);transform: rotate(60deg);}

@-webkit-keyframes beat {

from {

-webkit-transform: rotate(-20deg) scale(1);

transform: rotate(-20deg) scale(1); }

to {

-webkit-transform: rotate(-20deg) scale(1.1);

transform: rotate(-20deg) scale(1.1); } }

@keyframes beat {

from {

-webkit-transform: rotate(-20deg) scale(1);

transform: rotate(-20deg) scale(1); }

to {

-webkit-transform: rotate(-20deg) scale(1.1);

transform: rotate(-20deg) scale(1.1); } }

@media (min-width: 768px) and (max-width: 991px) {

.wrap-medium-header {

justify-content: space-between;

-webkit-justify-content: space-between; } }

@-moz-keyframes bounce {

0%, 20%, 50%, 80%, 100% {

-moz-transform: translateY(0);

transform: translateY(0);

}

40% {

-moz-transform: translateY(-10px);

transform: translateY(-10px);

}

60% {

-moz-transform: translateY(-3px);

transform: translateY(-3px);

}

}

@-webkit-keyframes bounce {

0%, 20%, 50%, 80%, 100% {

-webkit-transform: translateY(0);

transform: translateY(0);

}

40% {

-webkit-transform: translateY(-10px);

transform: translateY(-10px);

}

60% {

-webkit-transform: translateY(-3px);

transform: translateY(-3px);

}

}

@keyframes bounce {

0%, 20%, 50%, 80%, 100% {

-moz-transform: translateY(0);

-ms-transform: translateY(0);

-webkit-transform: translateY(0);

transform: translateY(0);

}

40% {

-moz-transform: translateY(-10px);

-ms-transform: translateY(-10px);

-webkit-transform: translateY(-10px);

transform: translateY(-10px);

}

60% {

-moz-transform: translateY(-3px);

-ms-transform: translateY(-3px);

-webkit-transform: translateY(-3px);

transform: translateY(-3px);

}

}

Backgound Size Css

**** HTML:

<div class="thumbnail product-item wow animated zoomIn animated" style="visibility: visible; animation-name: zoomIn;">

    <a href=''><img src="image.jpg"></a>

</div>

**** CSS:

.thumbnail{

    margin-bottom: 25px !important; 

    /*background: url(../images/TDSG.png);*/

    background-repeat: no-repeat;

    background-size: 267px 314px;

    border: none !important;

    border-radius: none;

    overflow: hidden;

}

bỏ dấu mũi tên xuống trong select

- Trước

- Sau:

CSS:
-webkit-appearance: none;

Button hover CSS

**** HTML
<button type="submit" name="add-to-cart" class="single_add_to_cart_button">Mua hàng</button>

**** CSS
.single_add_to_cart_button {
    background-color: #333;
    color: #fff;
    display: inline-block;
    letter-spacing: 0.08px;
    line-height: 1;
    padding: 10px 35px;
    position: relative;
    text-transform: uppercase;
    z-index: 5;
    border-radius: 0;
    height: inherit;
    border: 1px solid transparent;
    width: 100%;
    font-size: 20px;
    margin-top: 15px;
}
.single_add_to_cart_button:before {
    background: #a8741a none repeat scroll 0 0;
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transform: scaleX(0);
    transform-origin: 0 50% 0;
    transition-duration: 0.3s;
    transition-property: transform;
    transition-timing-function: ease-out;
    z-index: -1;
    border:1px solid #a8741a;
}
.single_add_to_cart_button:hover:before {
    transform: scaleX(1);
}
.single_add_to_cart_button:focus,
.single_add_to_cart_button:hover {
    outline: none;
    border:1px solid #a8741a;
}

Hình nền background phía dưới

**** CSS
worldwide-page{
    background: url(../images/Worldwide.jpg) no-repeat center center;
    text-align: center;
    /*padding: 80px 0 60px;*/
    background-position: top 10px center;
    background-attachment: fixed;
    background-size: cover;
    z-index: 10;
}

Loại bỏ border "màu xanh dương" ngoài khung search

CSS: Loại bỏ border "màu xanh dương" ngoài khung search

outline: 0;  
outline-style: none;  
outline-width: 0; 

hover ảnh css

**** HTML:
<div class="box-thumb">
<a href="#">
<img width="233" height="170" src="hinh-anh.jpg">
<div class="box-thumb-hover"></div>
</a>
</div>
**** CSS:
.box-thumb{
    position: relative;
    display: block;
}
.product_box img {
    width: 100%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
    -webkit-border-radius: 5px 0 5px 0;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px 5px 0 0;
}
.box-thumb-hover {
    width: 100%;
    height: 100%;
    /*background-image: url(../images/glass.png);*/
    background-position: -265px 0;
    background-repeat: no-repeat;
    position: absolute;
    left: 0;
    top: 0;
}
div.box-thumb-hover:hover {
    background: url(../images/glass.png) no-repeat scroll 265px 0 transparent;
    transition: all 1.2s ease-in-out 0s;
    -moz-transition: all 1.2s ease-in-out 0s;
    -webkit-transition: all 1.2s ease-in-out 0s;
    -webkit-font-smoothing: antialiased;
    cursor: pointer;

}

hover css + transition

#### CSS
<style type="text/css">       
    #hotro {
        position: fixed;
        top: 70px;
        right: -200px;
        z-index: 100;
        cursor: pointer;
        transition:0.5s;
    }
    #hotro img.online2{
    position: absolute;
    left: -75px;
    top: 0px;
    }
    #hotro .online{
    width:200px;
    background: #fff;
    }

    #hotro .online .title{
    background: rgba(0,0,0,0.8);
    height: 30px;
    margin-bottom: 10px;
    }

    #hotro .online .title h2{
    line-height: 30px;
    font-size: 12px;
    font-weight: bold;
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    }
    #hotro .online .tructuyen{

    }
    #hotro .online .tructuyen p{
      color:#333;
      text-align: center;
    }

    #hotro .online .tructuyen img{
    }

    #hotro:hover {
      right:0px;
      transition:0.5s;
    }
</style>
**** HTML
<div id="hotro">
<img src="hotline_vietsound_vn.png" alt="Hỡ trợ trực tuyến" width="73px" height="83" class="online2">
<div class="online">
<div class="title">
<h2>Hỗ trợ trực tuyến</h2>
</div>
<div class="tructuyen">
<p>Mr Long - 0999 8888 99</p>
// ho tro truc tuyen yahoo skype
<div align="center">

</div>
</div>
</div>

</div>

Hiển thị background full màn hình

Thuộc tính background-size

link-web: http://hocwebchuan.com/reference/cssSection/css3/example/ex_background_css3.php