Bài viết hôm nay mình chia sẻ cho các bạn một đoạn code để các bạn có thể tạo hiệu ứng khá đẹp mắt cho hình ảnh trên Blogspot của bạn. Ưu điểm của đoạn code này là chúng ta chỉ sử dụng CSS3 và HTML nên sẽ không làm ảnh hưởng đến tốc độ blog của bạn nhiều. Tác dụng của code này là khi bạn thiết lập 2 ảnh và rê chuột vào ảnh thì 1 ảnh sẽ được cuộn đi tạo một hiệu ứng rất đẹp chi hình ảnh.
» Bắt đầu thủ thuật
1. Đăng nhập vào tài khoản Blogger
2. Vào phần Mẫu (Template)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chèn tiếp code CSS bên dưới vào trước thẻ ]]></b:skin>
6. Thêm 1 HTML/Javascript và thêm vào code bên dưới
Chúc bạn thành công!
Địa chỉ bài viết: http://www.traidatmui.com/2013/06/code-tao-hieu-ung-peel-cho-hinh-anh-tren-blogspot.html#ixzz2VcNPKXMh
Nguồn: TRAIDATMUI.com
Nguồn : chúng tôi sưu tầm từ nhiều nguồn
1. Đăng nhập vào tài khoản Blogger
2. Vào phần Mẫu (Template)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chèn tiếp code CSS bên dưới vào trước thẻ ]]></b:skin>
a.nowandthen{
position:relative;
display: block;
overflow:hidden;
cursor: pointer;
width: 650px;
height: 434px;
}
a.nowandthen img{
position:absolute;
left:0;
top:0;
width: 100%;
height: 100%;
-moz-transition: all 0.4s ease;
-webkit-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
transition: all 0.4s ease;
z-index: 2;
clip: rect(0,650px,434px,0);
}
a.nowandthen img:nth-of-type(2){
z-index: 1;
}
a.nowandthen:hover img:nth-of-type(1){
clip: rect(0,0,434px,0);
opacity: 0;
}
5. Save template lại và trở về phần bố cục (Layout)position:relative;
display: block;
overflow:hidden;
cursor: pointer;
width: 650px;
height: 434px;
}
a.nowandthen img{
position:absolute;
left:0;
top:0;
width: 100%;
height: 100%;
-moz-transition: all 0.4s ease;
-webkit-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
transition: all 0.4s ease;
z-index: 2;
clip: rect(0,650px,434px,0);
}
a.nowandthen img:nth-of-type(2){
z-index: 1;
}
a.nowandthen:hover img:nth-of-type(1){
clip: rect(0,0,434px,0);
opacity: 0;
}
6. Thêm 1 HTML/Javascript và thêm vào code bên dưới
<a class="nowandthen" href="http://www.traidatmui.com/">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbFSWkFoIw9Z-BvS9ejQ8ULsBYTaDzAiqbqpTfZV6IBedbHFvIr3H3u8Owq9iYhfZmMnphM1k11LB7KhB3zg2dbqlwnj-Z_H9M7qyTeXGG6pfIJMrZQVijdT-vifeswNUrV6NUb2IqbTs/s1600/sunset-sunrise-btrix+(1).jpg" />
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj97XHLGANLKAMm975IKhY6uin9aWXUV4wycHrun10Qm8GEsIPqTYSqs4F46umQrRBqfhX57TpWHFFxxYWw7v8aESLs4uLZUPDn_YQZWJIEO33G79G3gTaIfvVmJ9S12RN_9lJhxKFMBi0/s1600/sunset-sunrise-btrix+(2).jpg" />
</a>
7. Cuối cùng save tiện ích lại<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbFSWkFoIw9Z-BvS9ejQ8ULsBYTaDzAiqbqpTfZV6IBedbHFvIr3H3u8Owq9iYhfZmMnphM1k11LB7KhB3zg2dbqlwnj-Z_H9M7qyTeXGG6pfIJMrZQVijdT-vifeswNUrV6NUb2IqbTs/s1600/sunset-sunrise-btrix+(1).jpg" />
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj97XHLGANLKAMm975IKhY6uin9aWXUV4wycHrun10Qm8GEsIPqTYSqs4F46umQrRBqfhX57TpWHFFxxYWw7v8aESLs4uLZUPDn_YQZWJIEO33G79G3gTaIfvVmJ9S12RN_9lJhxKFMBi0/s1600/sunset-sunrise-btrix+(2).jpg" />
</a>
Chúc bạn thành công!
Địa chỉ bài viết: http://www.traidatmui.com/2013/06/code-tao-hieu-ung-peel-cho-hinh-anh-tren-blogspot.html#ixzz2VcNPKXMh
Nguồn: TRAIDATMUI.com
Nguồn : chúng tôi sưu tầm từ nhiều nguồn
Chúng tôi tuyên thiết kế web chuyên nghiệp đẳng cấp giá rẻ với 5 năm kinh nghiệm trong lĩnh vực thiết kế website nếu các bạn có nhu cầu có thể liên hệ Hotline: 0962 66 57 57 || Email: cmay.tt@gmail.com || website: cmay.vn
0 nhận xét:
Đăng nhận xét