Những hiệu ứng ảnh sống động luôn tạo tạo ra những điểm nhấn, thích thú cho trang Web, blog của bạn. Tuy nhiên sử dụng quá nhiều thì sẽ khiến web blog trở nên rối.
Với hiệu ứng sử dụng Javascript thì hạn chế sử dụng vì nó làm giảm tốc độ load của site, ...
Ở thủ thuật này mình chia sẻ với các bạn cách thêm những điểm nhấn cho blog với CSS3 hiệu ứng ảnh động cực đẹp.
- Hướng dẫn cách làm thủ thuật:
1. đăng nhập vào bảng điều khiển blogger -> Mẫu (Template) -> Chỉnh sửa HTML (Edit HTML)
2. Ctrl + F tìm tới ]]></b:skin> và dán code dưới đây trên nó
.a-btn{
background:#a9db80;
background:-webkit-gradient(linear,left top,left bottom,color-stop(#a9db80,0),color-stop(#96c56f,1));
background:-webkit-linear-gradient(top, #a9db80 0%, #96c56f 100%);
background:-moz-linear-gradient(top, #a9db80 0%, #96c56f 100%);
background:-o-linear-gradient(top, #a9db80 0%, #96c56f 100%);
background:linear-gradient(top, #a9db80 0%, #96c56f 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9db80', endColorstr='#96c56f',GradientType=0 );
padding-left:90px;
padding-right:105px;
height:65px;
display:inline-block;
position:relative;
border:1px solid #80ab5d;
-webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);
-moz-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);
box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
float:left;
clear:both;
margin:10px 0px;
overflow:hidden;
-webkit-transition:box-shadow 0.3s ease-in-out;
-moz-transition:box-shadow 0.3s ease-in-out;
-o-transition:box-shadow 0.3s ease-in-out;
transition:box-shadow 0.3s ease-in-out;
}
.a-btn img{
position:absolute;
left:15px;
top:13px;
border:none;
-webkit-transition:all 0.3s ease-in-out;
-moz-transition:all 0.3s ease-in-out;
-o-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;
}
.a-btn .a-btn-slide-text{
position:absolute;
font-size:36px;
top:18px;
left:18px;
color:#6d954e;
opacity:0;
text-shadow:0px 1px 1px rgba(255,255,255,0.4);
-webkit-transition:opacity 0.2s ease-in-out;
-moz-transition:opacity 0.2s ease-in-out;
-o-transition:opacity 0.2s ease-in-out;
transition:opacity 0.2s ease-in-out;
}
.a-btn-text{
padding-top:5px;
display:block;
font-size:30px;
text-shadow:0px -1px 1px #80ab5d;
}
.a-btn-text small{
display:block;
font-size:11px;
letter-spacing:1px;
}
.a-btn-icon-right{
position:absolute;
right:0px;
top:0px;
height:100%;
width:80px;
border-left:1px solid #80ab5d;
-webkit-box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;
-moz-box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;
box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;
}
.a-btn-icon-right span{
width:38px;
height:38px;
opacity:0.7;
-webkit-border-radius:20px;
-moz-border-radius:20px;
border-radius:20px;
position:absolute;
left:50%;
top:50%;
margin:-20px 0px 0px -20px;
border:1px solid rgba(0,0,0,0.5);
background:#4e5c50 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvsdeRKO__LUQfLN-CQWEBhD3aSrXdgg9ch6NnrfACWprQyfT1dgDPv47jaf_LLHAjh6DUgXEgTKhj8qQx8iicnER_HWfTZU8b2wISIJ6BvP6crTbvP4f8saOQO1qXmt0RWmFi4rlu6tF1/s1600/arrow_down_black.png) no-repeat center center;
-webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.3) inset, 0px 1px 2px rgba(255,255,255,0.5);
-moz-box-shadow:0px 1px 1px rgba(255,255,255,0.3) inset, 0px 1px 2px rgba(255,255,255,0.5);
box-shadow:0px 1px 1px rgba(255,255,255,0.3) inset, 0px 1px 2px rgba(255,255,255,0.5);
-webkit-transition:all 0.3s ease-in-out;
-moz-transition:all 0.3s ease-in-out;
-o-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;
}
.a-btn:hover{
-webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4);
box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4);
}
.a-btn img{ margin-top:-15px;}
.a-btn:hover img{
-webkit-transform:scale(10);
-moz-transform:scale(10);
-ms-transform:scale(10);
-o-transform:scale(10);
transform:scale(10);
opacity:0;
}
.a-btn:hover .a-btn-slide-text,
.a-btn:hover .a-btn-icon-right span{
opacity:1;
}
.a-btn:active{
position:relative;
top:1px;
background:#80ab5d;
-webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;
-moz-box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;
box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;
border-color:#a9db80;
}
.a-btn:active .a-btn-icon-right span{
-webkit-transform:scale(1.4);
-moz-transform:scale(1.4);
-ms-transform:scale(1.4);
-o-transform:scale(1.4);
transform:scale(1.4);
}
3. Lưu mẫu lại
4. Lựa chọn bố cục (Layout) -> Thêm tiện ích (Add a widget) -> HTML/Javascript
5. Dán code dưới đây vào tiện ích vừa thêm
<div class="content">
<div class="button-wrapper">
<a href="http://itviet360.com" class="a-btn">
<span class="a-btn-slide-text">$9</span>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpDswi1o_soH4_FgETxkdpZXYLQvec74JARr3wR-NekyAxLBFW3cWrUzboor_fEtblPURNGuri_xiopDkhMG_kfzN-0MPRVnUAwhyMHlEr5KCiFPp2T6Ntqpn7Mg-Oa3E3pgc6G9P3dIXZ/s1600/1.png" alt="Photos" />
<span class="a-btn-text"><small>Available on the Apple</small> App Store</span>
<span class="a-btn-icon-right"><span></span></span>
</a>
<a href="http://itviet360.com" class="a-btn">
<span class="a-btn-slide-text">$75</span>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-04f5KoFoQyz3786Jw9_iXwroJ07nUtMf5Nei1iEQneopF78Dn-UZxryw95V0Jvi-VDfv_1eWkk1LCiiSsIxQgCRD2-4Yyo5681Ova7IiiTH6IWrkM87neZM2LdQfAmTiXslPU1sa_QEO/s1600/2.png" alt="Maps" />
<span class="a-btn-text"><small>Available on the Apple</small> App Store</span>
<span class="a-btn-icon-right"><span></span></span>
</a>
<a href="http://itviet360.com" class="a-btn">
<span class="a-btn-slide-text">$25</span>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgloDuba9k7QStBqwoNeUloycju8GyOP85IXCK9iKcrtZetynH0QFF4_VpBJjTgfcF6irf_m-Uc9y_EBhvUjJ1llqXRiE7GqttPBxm8eoDYNu8zx31W_zjTDGjTjiUnZ6VClfhxIloCZ1AS/s1600/3.png" alt="Settings" />
<span class="a-btn-text"><small>Available on the Apple</small> App Store</span>
<span class="a-btn-icon-right"><span></span></span>
</a>
<a href="http://itviet360.com" class="a-btn">
<span class="a-btn-slide-text">$100</span>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguX-6fo6mNYIF4IZcwqc3HSjDZjR2bkta7XxcHKW9qdWvqB0vDOezOQraHhdi5bKSP57l5tJnX5UoGCsk5CZQYMNriWyahSG-8B5u5c4Y5yfaX5BBahT4SqZS0BaNVsT7Z0sQ9pN_Z2SrC/s1600/4.png" alt="Wireless" />
<span class="a-btn-text"><small>Available on the Apple</small> Download</span>
<span class="a-btn-icon-right"><span></span></span>
</a>
</div>
</div>
Lưu lại và xem kết quả nhé :)