Thiet Ke Web » Thiet Ke Web bằng CSS » Sử dụng CSS để tạo ra Drop Shadows - Đổ bóng

SỬ DỤNG CSS ĐỂ TẠO Drop Shadows

Trong thiet ke web Drop Shadows (đỗ bóng) làm 1 kiểu thiết kế phổ biến và hấp dẫn. Hầu hết mọi người sử dụng các phần mềm thiết kế như Photoshop để tạo thêm Drop Shadows cho hình ảnh, làm cho hình ảnh đẹp và hấp dẫn hành những hình không có drop shadows. Tuy nhiên, bằng cách sử dụng CSS, bạn có thể sử dụng những hiệu ứng drop shadows, đổ bóng, đơn giản mà không ảnh hưởng đến hình gốc của nó, tạo nên 1 bản thiết kế website chuyên nghiệp

Có nhiều lý do khác nhau mà bạn muốn làm điều này. Ví dụ, bạn có thể cho phép người sử dụng không biết gì về kỹ thuật nhưng vẫn làm được hình ảnh có drop shadows để quản lý website, những người quản lý website này có thể không biết photoshop. Bằng cách định nghĩa trước những CSS, style có sẵn Drop Shadow, bạn có thể upload những hình ảnh thông thường và những hình ảnh thông thường này sẽ được hiển thị dưới dạng hình ảnh có drop shadows.

Một trong những lợi ít tốt nhất của việc sử dụng CSS là nó không phá hủy đi cấu trúc website của bạn khi thiet ke web. Nếu bạn sau này quyết định bỏ đi phần hiệu ứng drop shadows, thì bạn có thể đơn giản là thay đổi 1 số dòng lệnh trong CSS thay vì là xử lý lại hình ảnh đó.

Dunstan Orchard đã sáng tạo ra 1 phương pháp drop shadows rất đơn giản. Đầu tiên bạn sẽ sử dụng 1 hình lớn có drop shadows để làm background của thẻ div wrapper ngoài cùng. Sau đó Drop Shadows sẽ được hiện ra bằng cách sử dụng margin âm.

Việc đầu tiên bạn cần phải làm là tạo ra 1 hình có drop shadows bằng bất kỳ phần mềm đồ họa như Photoshop. Ví dụ, trong phần này chúng ta sẽ tạo ra 1 hình có drop shadows 800x800 pixel. Để tạo ra hiệu ứng drop shadows, đầu tiên bạn cần phải sử dụng hình có drop shadows của bạn cho thẻ div wrapper ngoài cùng. Bời vì DIV có thể giản theo chiều ngang, DIV có thể lấy tất cả các khoảng trống theo chiều ngang. Trong trường hợp này, chúngta cần thẻ DIV bao vòng hình ảnh. Bạn có thể làm điều này bằng cách thiết lập chiều rộng của thẻ DIV, nhưng làm như thế sẽ giảm đi sự hữu dụng của kỹ thuật này. Thay vào đó, bạn sử dụng thuộc tính Fload cho thẻ DIV.

Code CSS:

.img-wrapper {

    background: url(../images/shadow.gif) no-repeat bottom right;

    clear: right;

    float: left;

}

.img-wrapper img {

    margin: -5px 5px 5px -5px;

}

 Code HTML:

<div class="img-wrapper">

        <img src="assets/images/iphone.jpg" />

</div>

Kết quả:

Drop shadows - đổ bóng

Bằng phương pháp này, bạn có thể áp dụng drop shadows cho bất kỳ hình nào có kích thước nhỏ hơn 800x800 pixel. Ví dụ, bạn có thể thay thế hình iphone trên thành 1 hình khác có kích thước lơn hơn, thì hiệu ứng drop shadows vẫn còn đó. Bằng cách sử dụng CSS, thì việc tạo ra hiệu ứng drop shadows thì rất dễ dàng.

Được viết bởi: Thiet Ke Web Trần Lê: Thiết Kế Website Chuyên Nghiệp

  1. Phần 1: Format các thể chuẩn của HTML: p, h1, h2, h3, ...
  2. Phần 2: Float hình trong paragraph
  3. Phần 3: Tạo background cho website
  4. Phần 4: Tạo Icon, Bullet cho Heading, h1, h2
  5. Phần 5: Rounded-Corner với chiều rộng cố định
  6. Phần 6: Tạo Drop Shadows - Đổ bóng