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

CSS 23-6-2015

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, CSS3 Box Shadows, kien thuc web, thu thuat css, tự học css

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 :

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

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:

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

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

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

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

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

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

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

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

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

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

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

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

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

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é.