Bày tỏ IT

Một tut nhanh chóng. Đây là một cái gì đó đơn giản và tốt đẹp bằng cách sử dụng POWER của CSS ... nhưng khó khăn concieve (và chắc chắn không phải là tôi) để bắt đầu với. Thêm DropShadow, có thể là một mảnh bánh cho nhiều người trong chúng ta, bằng cách sử dụng một số công cụ chỉnh sửa hình ảnh như Photoshop và Fireworks.
Lý do tại sao, tôi đã lựa chọn hiệu ứng bóng đổ bằng cách sử dụng CSS, thường là trong khi tạo ra một thiết kế trang / html của một ứng dụng, yêu cầu giữ iterating. Những gì tôi có nghĩa là, một trang web hiện có với nhiều hình ảnh, giống như những hiển thị freinds danh sách hoặc thư viện hình ảnh, nó sẽ rất khó để tái xử lý toàn bộ tải trọng của hình ảnh đã được đã được dỡ xuống để thêm hoặc loại bỏ các bóng tối, cho rằng vấn đề.
Vì vậy, Nếu bạn đã làm được một chút suy nghĩ về phía trước trong khi tạo ra các HTMLS thêm các bộ phận phòng, hay thường tình hình là bạn có một logic vòng tạo ra các biểu tượng / hình thu nhỏ trong XSL, PHP. JAVA hoặc bất kỳ ngôn ngữ lập trình / kịch bản khác, bạn có thể thêm nó vào bất cứ lúc nào, sau đó chỉ là vấn đề của các hiển thị và ẩn các bóng tối bằng cách sử dụng tài sản hiển thị CSS, theo các khách hàng bao giờ thay đổi yêu cầu ... Tôi havn't làm điều này loại suy nghĩ về phía trước trước khi điều này ... nhưng ahev bắt đầu ngay bây giờ!

Trong ví dụ dưới đây, hình ảnh ban đầu là bóng tối miễn phí và dropshadows được áp dụng theo yêu cầu! CŨNG, tôi đã đi thêm một chút, bằng cách sử dụng các thủ đoạn của Tut trước đây của tôi (Well! này có thể là ngắn nhất của Hướng dẫn khác nhau, do đó, nó chỉ hợp lý gọi họ là "Tut" 's) Sử dụng tài sản Clip CSS cho hiện chỉ

Hình ảnh Gốc

CSS DropShadow Kết quả

Demo | Tải về sourcefiles