quang cao hosting

Hướng dẫn tạo hiệu ứng bóng đổ khác nhau với CSS3 Box Shadows

Xem: 1247    Tải: 0   Thảo luận: 0   Mục: HTML-CSS template   Lĩnh vực: Khác

0 điểm   ( 3 đánh giá ) File đã được kiểm thử

Hiệu ứng bóng đổ là một trong những tính năng hay mà CSS3 mang lại cho chúng ta, hôm nay mình sẽ chia sẻ cho các bạn nhiều cách tạo ra các hiệu ứng bóng đổ khác nhau, giúp các bạn có nhiều lựa chọn hơn cho website của mình.

Trước hết chúng ta cùng tìm hiểu xem hiện nay có những trình duyệt nào hỗ trợ :
- Internet Explorer 9.0 trở lên.
- Firefox 3.5 trở lên.
- Chrome 1 trở lên.
- Safari 3 trở lên.
- Opera 10.5 trở lên.

Đối với trình duyệt Firefox 3.5 các bạn cần phải chèn thêm tiền tố -moz-, còn Firefox 4.0 trở lên thì không cần thêm tiền tố, còn Chrome và Safari thì các bạn sử dụng -webkit. Riêng opera thì các bạn cứ giữ nguyên, không cần phải thêm bất kì tiền tố nào phía trước.

Bây giờ chúng ta sẽ tiến hành làm từng hiệu ứng một :

Hiệu ứng 1 :

HTML

<div class="box effect1">
    <h3>Effect 1</h3>
</div>

CSS

.box h3{
    text-align:center;
    position:relative;
    top:80px;
}
.box {
    width:70%;
    height:200px;
    background:#FFF;
    margin:40px auto;
}
 
/*==================================================
 * Effect 1
 * ===============================================*/
.effect1{
    -webkit-box-shadow: 0 10px 6px -6px #777;
    -moz-box-shadow: 0 10px 6px -6px #777;
     box-shadow: 0 10px 6px -6px #777;
}

Hiệu ứng 2:

HTML

<div class="box effect2">
    <h3>Effect 2</h3>
</div>

CSS

.box h3{
    text-align:center;
    position:relative;
    top:80px;
}
.box {
    width:70%;
    height:200px;
    background:#FFF;
    margin:40px auto;
}
 
/*==================================================
 * Effect 2
 * ===============================================*/
.effect2
{
  position: relative;
}
.effect2:before, .effect2:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}
.effect2:after
{
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}

Hiệu ứng 3

HTML

<div class="box effect3">
    <h3>Effect 3</h3>
</div>

CSS

.box h3{
    text-align:center;
    position:relative;
    top:80px;
}
.box {
    width:70%;
    height:200px;
    background:#FFF;
    margin:40px auto;
}
 
/*==================================================
 * Effect 3
 * ===============================================*/
.effect3
{
  position: relative;
}
.effect3:before
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}

Hiệu ứng 4

HTML

<div class="box effect4">
    <h3>Effect 4</h3>
</div>

CSS

.box h3{
    text-align:center;
    position:relative;
    top:80px;
}
.box {
    width:70%;
    height:200px;
    background:#FFF;
    margin:40px auto;
}
 
/*==================================================
 * Effect 4
 * ===============================================*/
.effect4
{
  position: relative;
}
.effect4:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  right: 10px;
  left: auto;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
}

Hiệu ứng 5

HTML

<div class="box effect5">
    <h3>Effect 5</h3>
</div>

CSS

.box h3{
    text-align:center;
    position:relative;
    top:80px;
}
.box {
    width:70%;
    height:200px;
    background:#FFF;
    margin:40px auto;
}
 
/*==================================================
 * Effect 5
 * ===============================================*/
.effect5
{
  position: relative;
}
.effect5:before, .effect5:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 25px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 35px 20px #777;
  -moz-box-shadow: 0 35px 20px #777;
  box-shadow: 0 35px 20px #777;
  -webkit-transform: rotate(-8deg);
  -moz-transform: rotate(-8deg);
  -o-transform: rotate(-8deg);
  -ms-transform: rotate(-8deg);
  transform: rotate(-8deg);
}
.effect5:after
{
  -webkit-transform: rotate(8deg);
  -moz-transform: rotate(8deg);
  -o-transform: rotate(8deg);
  -ms-transform: rotate(8deg);
  transform: rotate(8deg);
  right: 10px;
  left: auto;
}

Hiệu ứng 6

HTML

<div class="box effect6">
    <h3>Effect 6</h3>
</div>

CSS

.box h3{
    text-align:center;
    position:relative;
    top:80px;
}
.box {
    width:70%;
    height:200px;
    background:#FFF;
    margin:40px auto;
}
 
/*==================================================
 * Effect 6
 * ===============================================*/
.effect6
{
    position:relative;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.effect6:before, .effect6:after
{
    content:"";
    position:absolute;
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    top:50%;
    bottom:0;
    left:10px;
    right:10px;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
}

Hiệu ứng 7

HTML

<div class="box effect7">
    <h3>Effect 7</h3>
</div>

CSS

.box h3{
    text-align:center;
    position:relative;
    top:80px;
}
.box {
    width:70%;
    height:200px;
    background:#FFF;
    margin:40px auto;
}
 
/*==================================================
 * Effect 7
 * ===============================================*/
.effect7
{
     position:relative;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.effect7:before, .effect7:after
{
    content:"";
    position:absolute;
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    top:0;
    bottom:0;
    left:10px;
    right:10px;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
}
.effect7:after
{
    right:10px;
    left:auto;
    -webkit-transform:skew(8deg) rotate(3deg);
    -moz-transform:skew(8deg) rotate(3deg);
    -ms-transform:skew(8deg) rotate(3deg);
    -o-transform:skew(8deg) rotate(3deg);
     transform:skew(8deg) rotate(3deg);
}

Hiệu ứng 8

HTML

<div class="box effect8">
    <h3>Effect 8</h3>
</div>

CSS

.box h3{
    text-align:center;
    position:relative;
    top:80px;
}
.box {
    width:70%;
    height:200px;
    background:#FFF;
    margin:40px auto;
}
 
/*==================================================
 * Effect 8
 * ===============================================*/
.effect8
{
     position:relative;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
     box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.effect8:before, .effect8:after
{
    content:"";
    position:absolute;
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    top:10px;
    bottom:10px;
    left:0;
    right:0;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
}
.effect8:after
{
    right:10px;
    left:auto;
    -webkit-transform:skew(8deg) rotate(3deg);
    -moz-transform:skew(8deg) rotate(3deg);
    -ms-transform:skew(8deg) rotate(3deg);
    -o-transform:skew(8deg) rotate(3deg);
     transform:skew(8deg) rotate(3deg);
}

Các bạn hoàn toàn có thể sáng tạo thêm nhiều hiệu ứng khác, nếu có thể thì chia sẻ cho mình và mọi người nhé.

Chúc các bạn thành công !

Hướng dẫn tạo hiệu ứng bóng đổ khác nhau với CSS3 Box Shadows

Hướng dẫn tạo hiệu ứng bóng đổ khác nhau với CSS3 Box Shadows Đăng ngày 19-08-2014  Hiệu ứng bóng đổ là một trong những tính năng hay mà CSS3 mang lại cho chúng ta, hôm nay mình sẽ chia sẻ cho các bạn nhiều cách tạo ra các hiệu ứng bóng đổ khác nhau, giúp các bạn có nhiều lựa chọn hơn cho website của mình. 5/10 1247

Thảo luận:

Để bình luận bạn phải đăng nhập thành viên.

File tương tự

Files cùng mục

 
Hỗ trợ kỹ thuật cho thành viên:
Số di động (Hotline): 092.129.6329
Thời gian làm việc:
Sáng: 8h-12h; Chiều: 13h30-17h30
(Nghỉ chiều T7, CN và các ngày lễ, tết)
Chat với Megacode
https://www.facebook.com/megacodevn
File gợi ý cho bạn
File tải nhiều nhất
Megacode.vn - Thư viện mã nguồn chia sẻ, tải file cho cộng đồng
Copyright © 2013-2020. All rights reserved. Bản quyền thuộc VinaGon
Văn phòng giao dịch: 13 Nguyễn Khắc Cần, Phan Chu Trinh, Hoàn Kiếm, Hà Nội.
Điện thoại: 092.129.6329;
Công ty TNHH Công nghệ số Rồng Việt
Người đại diện: Vũ Thị Hoa.
Số chứng nhận đăng ký kinh doanh: 0105801198. Ngày đăng ký: 10/07/2012