Tạo bài viết
Đăng ký
04/10/2018, 20:01

Tạo hiệu ứng bóng đổ khác nhau với CSS3 Box Shadows

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. Xem Demo | Download Trước hết chúng ta cùng tìm hiểu xem hiện ...

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.

CSS3 Box Shadows

Xem Demo | Download

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 :

Tạo hiệu ứng bóng đổ khác nhau với CSS3 Box Shadows

HTML

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

CSS

.box h3{
	text-align:center;
	position:relative;
	top:80px;
}
.box {
	awidth: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:

Tạo hiệu ứng bóng đổ khác nhau với CSS3 Box Shadows

HTML

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

CSS

.box h3{
	text-align:center;
	position:relative;
	top:80px;
}
.box {
	awidth: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;
  awidth: 50%;
  top: 80%;
  max-awidth: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

Tạo hiệu ứng bóng đổ khác nhau với CSS3 Box Shadows

HTML

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

CSS

.box h3{
	text-align:center;
	position:relative;
	top:80px;
}
.box {
	awidth: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;
  awidth: 50%;
  top: 80%;
  max-awidth: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

Tạo hiệu ứng bóng đổ khác nhau với CSS3 Box Shadows

HTML

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

CSS

.box h3{
	text-align:center;
	position:relative;
	top:80px;
}
.box {
	awidth: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;
  awidth: 50%;
  top: 80%;
  max-awidth: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

Tạo hiệu ứng bóng đổ khác nhau với CSS3 Box Shadows

HTML

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

CSS

.box h3{
	text-align:center;
	position:relative;
	top:80px;
}
.box {
	awidth: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;
  awidth: 50%;
  top: 80%;
  max-awidth: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

Tạo hiệu ứng bóng đổ khác nhau với CSS3 Box Shadows

HTML

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

CSS

.box h3{
	text-align:center;
	position:relative;
	top:80px;
}
.box {
	awidth: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

Tạo hiệu ứng bóng đổ khác nhau với CSS3 Box Shadows

HTML

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

CSS

.box h3{
	text-align:center;
	position:relative;
	top:80px;
}
.box {
	awidth: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

Tạo hiệu ứng bóng đổ khác nhau với CSS3 Box Shadows

HTML

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

CSS

.box h3{
	text-align:center;
	position:relative;
	top:80px;
}
.box {
	awidth: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 !

Tags: css3 CSS3 Box Shadows kien thuc web thu thuat css tự học css

Chuyên Mục: Css

Bài viết được đăng bởi webmaster

Tạ Quốc Bảo

23 chủ đề

7270 bài viết

Có thể bạn quan tâm
0
Các chủ đề đang được quan tâm
phần mềm lập trình php | lập trình web php + mysql | khóa học lập trình php | tự học lập trình php | học php cơ bản thachpham | Code24h | Cho thuê phòng trọ hà nội | Cho thuê phòng trọ bình thạnh | Cho thuê phòng trọ | Cho thuê nhà trọ
Đăng ký

Đăng ký nhận thông báo

Các bài học thú vị sẽ được gửi đến inbox của bạn

HỖ TRỢ HỌC VIÊN
VỀ CODE24H
HỢP TÁC VÀ LIÊN KẾT
KẾT NỐI VỚI CHÚNG TÔI
TẢI ỨNG DỤNG TRÊN ĐIỆN THOẠI

CCode 24h, code mọi lúc, mọi nơi

© Copy right 2018 - 2024