Tin mới đăng:

Code tạo hiệu ứng độc đáo cho ảnh với CSS

Bài này giới thiệu cách tạo một hiệu ứng khá độc đáo cho ảnh bo tròn kèm với có gắn liên kết từ ảnh tới địa chỉ nào đó mà bạn muốn. Nhưng các bạn không cần có ảnh tròn ban đầu mà dùng ảnh tùy ý. Thủ thuật này cũng sử dụng hoàn toàn bằng CSS nên rất phù hợp với blog, không sợ nó làm chậm tốc độ load trang của bạn.
Để cài đặt thủ thuật này ta cần đặt đoạn CSS vào trong mẫu nhưng theo tôi là không cần thiết ta chỉ cần thêm 1 tiện ích hoặc post trong bài viết thì dán bên HTML là được.
Code như sau:
<style type="text/css">
.Btrix-item {
width: 150px;
height: 150px;
border-radius: 50%;
position: relative;
cursor: default;}
.Btrix-info-wrap,
.Btrix-info{
position: absolute;border: 1px solid #8D8D8D;margin-top: -1px;width: 150px;
height: 150px;
border-radius: 50%;}
.Btrix-info-wrap {
background: #07CFE0 url(../images/bg.jpg);
box-shadow:
0 0 0 20px rgba(255,255,255,0.2),
inset 0 0 3px rgba(115,114, 23, 0.8);
}
.Btrix-info > div {
display: block;position: absolute;width: 150px;height: 150px;
border-radius: 50%;
background-position: center center;
-webkit-backface-visibility: hidden; /*Just for webkit to have a smooth font*/
}
.Btrix-info .Btrix-info-front {
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
-ms-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
.Btrix-info .Btrix-info-back {
opacity: 0;background: #07CFE0;pointer-events: none;
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
-ms-transform: scale(1.5);
transform: scale(1.5);
-webkit-transition: all 0.4s ease-in-out 0.2s;
-moz-transition: all 0.4s ease-in-out 0.2s;
-o-transition: all 0.4s ease-in-out 0.2s;
-ms-transition: all 0.4s ease-in-out 0.2s;
transition: all 0.4s ease-in-out 0.2s;
}
.Btrix-img-1 {
background-image: url(http://buixuandoanh.com.vn/girlxinh/Mya.jpg);}
.Btrix-img-2 {
background-image: url(http://buixuandoanh.com.vn/girlxinh/Nu%20HQ.jpg);}
.Btrix-img-3 {
background-image: url(http://buixuandoanh.com.vn/girlxinh/Sen%20tim.jpg);}
.Btrix-info h3 {
color: #fff;
text-transform: uppercase;letter-spacing: 2px;font-size: 14px;margin: -20px 15px;
padding: 40px 0 0 0;
height: 80px;
font-family: 'Open Sans', Arial, sans-serif;
text-shadow:
0 0 1px #fff,
0 1px 2px rgba(0,0,0,0.3);
}
.Btrix-info p {
color: #fff;
padding: 10px 5px 0;
font-style: italic;
margin: -60px 30px;
font-size: 12px;
border-top: 1px solid rgba(255,255,255,0.5);
}
.Btrix-info p a {
display: block;color: #e7615e;font-style: normal;
font-weight: 700;
text-transform: uppercase;
font-size: 9px;
letter-spacing: 1px;
padding-top: 4px;
font-family: 'Open Sans', Arial, sans-serif;
}
.Btrix-info p a:hover {
color: #fff;
}
.Btrix-item:hover .Btrix-info-front {
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
opacity: 0;
}
.Btrix-item:hover .Btrix-info-back {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
pointer-events: auto;}
.Btrix-grid {
margin: 20px 0 0 0;
padding: 0;
list-style: none;
display: block;
text-align: center;
width: 100%;}
.Btrix-grid:after,
.Btrix-item:before {
content: '';
display: table;}
.Btrix-grid:after {
clear: both;}
.Btrix-grid li {
width: 150px;
height: 150px;
display: inline-block;
margin: 4px;
}
</style>
<br />
<section class="main">
<ul class="Btrix-grid">
<li>
<div class="Btrix-item Btrix-img-1">
<div class="Btrix-info-wrap">
<div class="Btrix-info">
<div class="Btrix-info-front Btrix-img-1">
</div>
<div class="Btrix-info-back">
<h3>
HotGirl Maya</h3>
By Bùi Xuân Doanh <a href="http://www.xuandoanh.com/"><br />Link to Blog</a></div>
</div>
</div>
</div>
</li>
<li>
<div class="Btrix-item Btrix-img-2">
<div class="Btrix-info-wrap">
<div class="Btrix-info">
<div class="Btrix-info-front Btrix-img-2">
</div>
<div class="Btrix-info-back">
<h3>
Chiến sỹ nữ Hải quân</h3>
By Bùi Xuân Doanh <a href="http://www.xuandoanh.com/"><br />Link to Blog</a></div>
</div>
</div>
</div>
</li>
<li>
<div class="Btrix-item Btrix-img-3">
<div class="Btrix-info-wrap">
<div class="Btrix-info">
<div class="Btrix-info-front Btrix-img-3">
</div>
<div class="Btrix-info-back">
<h3>
Người đẹp xứ Huế</h3>
By Bùi Xuân Doanh <a href="http://www.xuandoanh.com/"><br />Link to Blog</a></div>
</div>
</div>
</div>
</li>
</ul>
</section>
     - Bạn có thể điều chỉnh kích thước, màu sắc theo sở thích.
    - Thay link ảnh của bạn vào các vị trí tương ứng trong code, thay địa chỉ liên kết và chú thích theo ý bạn. Còn việc thêm ảnh hoặc bớt ảnh thì chắc bạn cũng biết rồi.
                                                Chúc bạn thành công.
Code tạo hiệu ứng độc đáo cho ảnh với CSS Code tạo hiệu ứng độc đáo cho ảnh với CSS
9/10 356 bình chọn

Chia sẻ:

Xin chào! Mình là Bùi Xuân Doanh. Mình muốn được chia sẻ cùng các bạn những gì mình biết.

Theo dõi tôi trên Facebook Or Youtube


Bạn nhập từ: cungly Bạn nhập từ: lleu Bạn nhập từ: kkrong Bạn nhập từ: cuoilon Bạn nhập từ: roile Bạn nhập từ: hehehe Bạn nhập từ: byebye Bạn nhập từ: idontknow Bạn nhập từ: votay more »

Quản trị

    Admin Bùi Xuân Doanh

    Click để Chat với Admin! Click để Chat với Admin!

    Email: buixuandoanh@gmail.com

    Hotline: 0983.379.818

Tư vấn Kỹ thuật