Đăng nhập

Những kỹ thuật box-shadow (CSS3) trong thiết kế web

  • 19/01/2015 - 8:30 PM
  • 1537 Views

Box-shadow là một thuộc tính khá hay trong CSS3. Nó giúp ta làm hiệu ứng đổ bóng cho một đối tượng bất kỳ mà không cần phải dùng tới một hình ảnh phụ trợ như hồi các chuẩn CSS trước vẫn dùng. Mặc dù trên W3C có tài liệu chính thức về box-shadow, nhưng tương đối sơ sài. Nếu bạn còn mập mờ về thuộc tính hấp dẫn này thì hãy xem bài viết này nhé.

css-box-shadow

Những kỹ thuật box-shadow (CSS3) trong thiết kế web

DemoDownload

1. Phần HTML

Đây là phần HTML, mình viết giống như trong phần demo luôn đấy.

<div class="container">
   <h2>Những kỹ thuật box-shadow (CSS3) trong thiết kế web</h2>
   <div class="box-collection">
       <ul class="column">
            <li class="box1"><span>Shadow 1</span></li>
            <li class="box2">Shadow 2</li>
            <li class="box3">Shadow 3</li>
            <li class="box4">Shadow 4</li>
            <li class="box5">Shadow 5</li>
            <li class="box6">Shadow 6</li>
            <li class="box7">Shadow 7</li>
            <li class="box8">Shadow 8</li>
            <li class="box9">Shadow 9</li>
            <li class="box10">Shadow 10</li>
            <li class="box11">Shadow 11</li>
            <li class="box12">Shadow 12</li>
            <li class="box13">Shadow 13</li>
            <li class="box14">Shadow 14</li>
            <li class="box15">Shadow 15</li>
            <li class="box16">Shadow 16</li>
      </ul>
   </div>
</div>

2. Phần CSS

Và đây là css cho 16 kiểu shadows, mình có đánh số cho các div shadow, bạn thích cái nào thì lấy dùng nhé.

body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 1rem;text-align:center;
    background: url(background_2cwebvn.png);
}
div.container {
    margin: 20px auto; border:1px solid #ccc;
    width: 700px;
}
a{text-decoration:none;}
a:hover{color:#999;}
ul.column {
    float: left;
    padding: 0;
    list-style: none;
    width: 675px;
}
ul.column li {
    background: #fff;
    float: left;
    margin: 25px 0 0 25px;
    display: block;
    text-align: center;
    width: 100px;
    padding:20px;
    border-radius: 2px 2px 2px 2px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
ul.column li.box1 {
    -webkit-box-shadow: 0 10px 6px -6px #777;
    -moz-box-shadow: 0 10px 6px -6px #777;
    box-shadow: 0 10px 6px -6px #777;
}
ul.column li.box2 {
    -webkit-box-shadow: 0 1px 2px #777;
    -moz-box-shadow: 0 2px 1px #777;
    box-shadow: 0 2px 1px #777;
}
ul.column li.box3 {
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
}
ul.column li.box4 {
    box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.3);
}
ul.column li.box5 {
    box-shadow: 0 0 1px rgba(34, 25, 25, 0.4);
}
ul.column li.box6 {
    box-shadow: 0 1px #FFFFFF inset, 0 1px 3px rgba(34, 25, 25, 0.4);
}
ul.column li.box7 {
    box-shadow: 0 4px 2px -3px;
}
ul.column li.box8 {
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
}
ul.column li.box9 {
    border-bottom: 0 none;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.46);
}
ul.column li.box10 {
    -webkit-box-shadow: 0 7px 4px #777;
    -moz-box-shadow: 0 7px 4px #777;
    box-shadow: 0 7px 4px #777;
}
ul.column li.box11 {
    -webkit-box-shadow: 0 3px 2px #777;
    -moz-box-shadow: 0 3px 2px #777;
    box-shadow: 0 3px 2px #777;
}
ul.column li.box12 {
    box-shadow: 0 0.5px 0 0 #ffffff inset, 0 1px 2px 0 #B3B3B3;
}
ul.column li.box13 {
    -webkit-box-shadow:0 0 10px rgba(0, 0, 0, 0.5);
    -moz-box-shadow:0 0 10px rgba(0, 0, 0, 0.5);
    box-shadow:0 0 10px rgba(0, 0, 0, 0.5);
}
ul.column li.box14 {
    -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;
}
ul.column li.box15 {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12) inset;
    border-color: -moz-use-text-color #FFFFFF #FFFFFF -moz-use-text-color;
    border-style: none solid solid none;
    border-width: medium 1px 1px medium;
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.07);
    -moz-border-bottom-colors: none;
    -moz-border-image: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
}
ul.column li.box16 {
    box-shadow: 0 1px 1px 0 #C7C7C7 inset;
    background: none repeat scroll 0 0 #E9E9E9;
}
/* Clear Float */
.column:after, .box-collection:after, .clearfix:after, div.project-info:after {
    clear: both;
    content: ' ';
    display: block;
    font-size: 0;
    line-height: 0;
    visibility: hidden;
    width: 0;
    height: 0;
}

Trên đây là những kiểu box-shadow cơ bản. Còn vô vàng ứng dụng của box-shadow nữa mà chúng ta có thể tự sáng tạo ra.