công ty thiết kế website tốt nhất

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. Bài viết này hi vọng sẽ giúp các bạn hiểu rõ hơn về box-shadow trong thiết kế website.

1. Kỹ thuật đổ bóng đơn giản nhất.

Kỹ thuật này là cơ bản nhất, kết quả cho ra hiệu ứng tương tự như Drop shadow trong Photoshop vậy. Cùng xem code:

Lấy màu #101010 là được rùi, màu này gần màu đen, nhưng không phải là màu đen. Các tham số ở trên đã được giải thích luôn, x và y là vị trí của bóng so với vật chủ, và đây là demo:

Độ mờ (blur) càng cao, bóng sẽ phình to. Lưu ý thêm, độ mờ khác với kích thước của bóng mà chúng ta sẽ tìm hiểu ngay sau đây.

2. Kỹ thuật đổ bóng thay đổi kích thước.

Không thay đổi nhiều, ta chỉ cần thêm một tham số so với kỹ thuật số 1. Vậy là bây giờ ta sẽ có 5 tham số như code sau:

Tham số thứ 4 chính là kích thước bóng, kích thước này bạn có thể hiểu nôm na là kích thước ban đầu của bóng so với đối tượng chủ (chưa có làm mờ ở đây). Để bạn thấy rõ tham số này, mình cho các thuộc tính còn lại là 0px, xem kết quả:

Ở đây mình dùng thêm “background-color” để đặt màu nền cho đối tượng, vì sao thì tí nữa biết nhé. Ta thấy đối tượng chủ, tức element được gán cho thuộc tính box-shadow, lập tức có một đường viền bên ngoài. Không phải là dùng thuộc tính border đâu nhé. Để chứng minh chúng ta thây đổi các tham số một lần nữa.

Ta nâng X lên 100px – cái hộp đó kích thước là 100×100, vậy đồng nghĩa bóng sẽ nằm cạnh vật chủ. Xem kết quả:

Thấy cái ô vuông đen thui kế bên không, đó chính là do box-shadow của chúng ta tạo ra. Còn cái đối tượng chủ là cái hộp màu xám kia do đã được đặt “background-color”. Rõ ràng bóng lớn hơn đối tượng chủ 1px.

3. Kỹ thuật đổ bóng lòng bên trong

Nảy giờ đều là đổ bóng bên ngoài đối tượng, giờ ta sẽ đổ bóng bên trong đối tượng. Nếu là tín đồ Photoshop thì bạn có thể hiểu kỹ thuật này như là hiệu ứng inner shadow.

Tips
Đừng quên là tham số của chúng ta có thể âm nhé. -1px, -2px, … đều được chấp nhận.

Kết quả cuối cùng:

Thay vì bóng nằm bên ngoài, thì giờ bóng nằm lòng bên trong đối tượng.

4. Một số ứng dụng box-shadow tạo hiệu ứng đẹp

Hiệu ứng hộp nổi

Khá đơn giản:

.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 mảnh giấy

.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;
}

Để áp dụng cho một đối tượng, chỉ cần đặt class cho nó là “effect2″ để dùng hiệu ứng này nhé.

Hiệu ứng hộp chìm dành cho mấy hộp textbox được đấy

.effect3 {
   box-shadow: 0px 2px 5px #dfdfdf inset;
   padding:5px;
}

Chỉnh padding lại cho vừa ý nhé. Cái này nhìn hơi hơi giống Windows Classic nhỉ . 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.