CSS3 Gear Effect

Mô tả: Gear là hình bánh răng, gear effect : bánh răng chuyển động.Ở đây sử dụng CSS 3.
Kết quả:
CSS3 Gear Effect

HTML & CSS example:
<div class="GearContainer" style="height: 250px; position: relative;">
<div class="counterContainer">
<div class="gear" id="gear1">
</div>
<div class="gear" id="gear2">
</div>
<div class="gear" id="gear3">
</div>
</div>
</div>
<style type="text/css">

/*CounterPageGEAR*/
/* CSS3 keyframes */
@-webkit-keyframes ckw {
    0% {
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }
    100% {
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
    }
}
@-moz-keyframes ckw {
    0% {
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }
    100% {
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
    }
}
@-webkit-keyframes cckw {
    0% {
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
    }
    100% {
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }
}
@-moz-keyframes cckw {
    0% {
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
    }
    100% {
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }
}

/* gears */
.gear {
    float: none;
    position: absolute;
    text-align: center;

    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;

    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;
}
#gear1 {
    background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQj-G_4sRwPWy9telLRspn4pv8JoemNUpemLaYH7BvPlw300OWfcxArkAr4HeKSxKTH3jqPFkfGqU_MQoIJOYy-VPhwGN_TqHPupsVved-cpdCXtGg5t5-Qdk1YUlhR1etusC6LNmdDxT_/s1600/g1.png') no-repeat 0 0;
    height: 85px;
 left: 170px;
    top: 110px;
    width: 85px;
   
    -moz-animation-name: ckw;
    -moz-animation-duration: 10s;

    -webkit-animation-name: ckw;
    -webkit-animation-duration: 10s;
}
#gear2 {
    background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCLZjKT6BlyUHIHeR1q9SZcpAXbceKsKpg8gF2pbY3ZqOQCHMp-r7rsYjStmXaPicXwc1Sg_G04uQ8Pf4pCW0oWTdWqOFHT8ZZc4e6Kk16Gj4TPDdkuBeiPZNwV_RD0C-1E5oSgbq345kn/s1600/g2.png') no-repeat 0 0;
    height: 125px;
    left: 90px;
    top: 20px;
    width: 125px;
   
    -moz-animation-name: cckw;
    -moz-animation-duration: 16.84s;

    -webkit-animation-name: cckw;
    -webkit-animation-duration: 16.84s;
}
#gear3 {
    background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyF6RpM_fEG2sIKt2Pzs0cPT9u6F00pVTnLyIjSOPFp8h76OeGTwKkf14UclmEfar90ojyM0HYFb1RRvHml8svH-OcDgNXh2AbWUerHySSdxn4BPxLBck6Pgi9ay84fdeWtjD5Du66iPYU/s1600/g3.png') no-repeat 0 0;
    height: 103px;
    left: 201px;
    top: 12px;
    width: 103px;
   
    -moz-animation-name: ckw;
    -moz-animation-duration: 13.5s;

    -webkit-animation-name: ckw;
    -webkit-animation-duration: 13.5s;
}</style> 

Tham khảo từ: http://www.script-tutorials.com/demos/247/index.html

IE place holder issue fixed by script

Mô tả:  placeholder dùng tốt trong firefox, chrome, safary. Đối với <IE8 ko hỗ trợ.
Cách xử lý:  Đối với IE7,IE8 cần dùng thư viện hỗ trợ.
Download file script:
https://drive.google.com/file/d/0B785Epf6q5XlV2FFdUdzbGRqaEk/edit?usp=sharing
Load thư viện script vào template ->index.php: trong tag HEAD
<!--[if IE]>
        <script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/placeholders.jquery.min.js"></script>   
<![endif]-->

Iframe YOUTUBE over menu - add param transparent

Mô tả: add iframe từ src youtube, flash youtube hiển thị phía trên menu.
Cách thực hiện: Youtube hỗ trợ thêm param thêm vào url ?wmode=transparent.

Example:
<iframe width="640" height="360" src="//www.youtube.com/embed/BdT_QY3o7fw?feature=player_detailpage&amp;wmode=transparent" frameborder="0" allowfullscreen="true"></iframe>

JShop image SEO name

Mô tả:
Tên MD5 ko tốt cho SEO site
/components/com_jshopping/files/img_products/e04a01a4138a5b598b0ea0583266ddf7.jpg
/components/com_jshopping/files/img_products/thumb_e04a01a4138a5b598b0ea0583266ddf7.jpg
Cách xử lý:
change name file:
components\com_jshopping\lib\uploadfile.class.php

row
var $file_name_md5 = 1;

change to

var $file_name_md5 = 0;
var $file_name_filter = 1;

Tham khảo tại link  http://www.webdesigner-profi.de/joomla-webdesign/joomla-shop/forum/posts/2/2868.html?lang=de

HTML Select Style CSS

Compatible: all browser
Example

HTML:
<div class="select_container">
    <select class="rsform-select-box">
        <option value="SELECT ONE...">SELECT ONE...</option>
        <option value="TYPE1">TYPE1</option>
        <option value="TYPE2">TYPE2</option>
        <option value="TYPE3">TYPE3</option>
    </select>
</div>

CSS:
.select_container{
    overflow:hidden;
}
.select_container{
    width:100%;
    background:url("../images/select_icon.png") no-repeat right center #d3d4d5;
}
.select_container select{
    width:120%;
    background: transparent;
    border: 0 solid;
}

HTML Radio Style CSS

Compatible: Firefox, chrome, safari, IE9++
Example

CSS:
input[type="radio"]{
    display:none;
}
input[type="radio"] + label{
    padding-left:25px;
    background:url("../images/option.png") no-repeat left top;
}
input[type="radio"]:checked + label{
    background-position: left bottom;
}

Hide text CSS

Mô tả: nhiều trường hợp cần ẩn text bên trong. Vì chỉ muốn can thiệp bằng css.

Lý do: hiệu chỉnh ở source tìm ra khó khăn, cách xử lý này phù hợp với vấn đề nhỏ. 

Khuyến cáo: xử lý vấn đề nhỏ để css vẫn mang tính chất rõ ràng.

ví dụ: 

a.button{
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;

}