Góc Tròn Và Shadows Cho Hình Ảnh Sử Dụng CSS

Góc Tròn Và Shadows Cho Hình Ảnh Sử Dụng CSS
Dưới đây là một số phong cách thay đổi biên giới mà bạn có thể áp dụng đối với hình ảnh trên blogger bằng cách sử dụng CSS.
Một trong những lợi thế của CSS3 là chúng ta có thể áp dụng làm tròn biên giới mà không có quá nhiều phức tạp,chúng ta cũng có thể thêm một số hiệu ứng chuyển động như bóng đổ và đường viền tròn đi kèm với quá trình chuyển đổi.
Làm thế nào để áp dụng thủ thuật vào Blogger
Tại phần đăng bài mới bên HTML hoặc khi thêm một tiện ích,tùy theo yêu cầu ta sử dụng các code dưới đây.
Ứng với mỗi demo là code của hiệu ứng(Di chuột vào hình ảnh để xem hiệu ứng)
DEMO 1:

DEMO

Code:
<style>
.post-body img {
border:0;
padding:0;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.post-body img:hover {
box-shadow: 0px 0px 15px #000; /* Shadow */
border-radius: 50%; /* Rounded border */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}</style>
<div style="text-align: center;">
<img class="rounded" src="Link hình ảnh" /></div>

DEMO 2:

DEMO

Code:
<style>
.post-body img {
background:#FFF; /* background color around the image */
padding:15px; /* space between border and image */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.post-body img:hover {
box-shadow: 0px 0px 15px #000; /* Shadow */
border-radius: 0% 50%; /* Rounded border */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}</style>
<div style="text-align: center;">
<img class="rounded" src="Link hình ảnh" /></div>

DEMO 3:

DEMO

Code:
<style>
.post-body img {
background:#FFF; /* the background color around the image */
padding:15px; /* The Space Between Border and Image */
border-radius: 50% 0; /* Rounded border */
box-shadow: 0px 0px 15px #000; /* Shadow */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.post-body img:hover {
border-radius:0; /* This removes the border roundness (value 0) */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}</style>
<div style="text-align: center;">
<img class="rounded" src="Link hình ảnh" /></div>

DEMO 4:

DEMO

Code:
<style>
.post-body img {
box-shadow: 0px 0px 15px #000; /* Shadow */
border-radius: 50%; /* Rounded border */
border:0;
padding:0;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.post-body img:hover {
box-shadow: 0; /* With this we remove the shadow (value 0) */
border-radius: 0; /* This removes the border roundness (value 0) */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}</style>
<div style="text-align: center;">
<img class="rounded" src="Link hình ảnh" /></div>

DEMO 5:

DEMO

Code:
<style>
.post-body img {
border-radius: 45% / 20%; /* Rounded border */
box-shadow: 0px 0px 15px #000; /* Shadow */
padding:0;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.post-body img:hover {
border-radius: 0; /* This removes the roundness of border (value 0) */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}</style>
<div style="text-align: center;">
<img class="rounded" src="Link hình ảnh" /></div>

Chúc thành công!
Nhận xét

Không có nhận xét nào :