Cách thêm bóng đổ vào hình ảnh hoặc hộp văn bản bằng CSS sử dụng thuộc tính bóng hộp

Bạn đang xem: đổ bóng hình ảnh css

Bạn có thể thêm một bóng đổ đổ bóng cho hình ảnh bằng cách sử dụng thuộc tính CSS box-shadow tạo hiệu ứng 3-D đẹp mắt cho hình ảnh hoặc các đối tượng khác trên trang web.

Thuộc tính bóng đổ được thiết kế để hoạt động trên các phần tử cấp khối (div hoặc đoạn). Tuy nhiên, nó cũng sẽ hoạt động trên hình ảnh (là phần tử nội tuyến) nếu bạn chỉnh sửa HTML và CSS như hình dưới đây.

Box-shadow hoạt động trên bất kỳ trình duyệt nào hỗ trợ CSS3. Bất kỳ ai xem nó trên trình duyệt cũ hơn sẽ không thấy bóng đổ.

Giải thích mã bóng đổ:

box-shadow: 5px 5px 5px # 999;

  • Giá trị đầu tiên (5px) kiểm soát độ lệch x (chiều ngang của bóng ở phía bên phải)
  • Giá trị thứ hai (5px) kiểm soát độ lệch y (chiều rộng dọc của bóng ở phía dưới)
  • Giá trị thứ ba (5px) kiểm soát khoảng cách mờ (chiều rộng của bóng)
  • Giá trị thứ tư (# 999) kiểm soát màu sắc của bóng đổ.

Bạn cũng có thể thêm giá trị âm vào giá trị thứ nhất và thứ hai nếu bạn thích bóng hộp ở trên cùng hoặc bên trái. Một giá trị khác có tên là “inset” có thể được sử dụng nếu bạn muốn tạo bóng bên trong, tức là để tạo hiệu ứng cho nút.

Cách thêm bóng đổ vào hình ảnh:

Tôi đang gọi lớp này là “dropshadowimg” nhưng bạn có thể đặt tên cho lớp này bất cứ thứ gì bạn muốn. Đối với bóng đổ màu xám nhạt bên dưới hình ảnh, hãy thêm phần sau vào tệp CSS của bạn (bạn có thể muốn điều chỉnh chiều rộng của hình ảnh, màu sắc và độ sâu của bóng đổ):

Xem Thêm  Cách sử dụng Node.js - làm cách nào để sử dụng node.js

.dropshadowimg
{chiều rộng: 200px;
hộp-bóng: 5px 5px 5px # 999; }

Thêm lớp này (dropshadowimg) vào một div chứa hình ảnh trong tệp HTML như sau:

& lt; div class = “ dropshadowimg ” & gt;
& lt; img src = “images / TÊN HÌNH ẢNH ĐẾN ĐÂY.jpg” width = “400” height = “304” alt = “MÔ TẢ HÌNH ẢNH Ở ĐÂY” & gt;
& lt; / div & gt;

Nếu bạn muốn hình ảnh được căn giữa trên trang, hãy thêm phần này vào div xung quanh hình ảnh:

margin: 0 auto;

Hình ảnh thu được phải có bóng đổ rất nhẹ như hình ảnh ở đầu trang.

Nếu bạn muốn đặt nhiều kiểu đổ bóng thì chỉ cần thêm một lớp khác, tức là dropshadowimg2, v.v.

Cách xóa khoảng trắng dưới ảnh

Nếu hình ảnh của bạn có khoảng trắng giữa hình ảnh và bóng đổ thì đó là do hình ảnh là phần tử nội dòng và cần được coi là phần tử khối để điều này được sửa chữa. Trong trường hợp đó, hãy thiết lập lớp này trong tệp CSS của bạn (tách biệt với lớp dropshadowimg):

.block {display: block;}

Sau đó, thêm lớp này vào thẻ hình ảnh (không phải div):

& lt; img src = “images / blue-bird.jpg” alt = “blue bird” class = “block” & gt;

Cách thêm bóng đổ vào hộp văn bản:

Đôi khi nó giúp chia nhỏ các trang có nhiều văn bản nếu bạn thêm một hộp xung quanh một phần nhỏ văn bản với nền, đường viền và bóng đổ. Bạn có thể muốn điều chỉnh chiều rộng, khoảng đệm xung quanh văn bản, nền và đường viền của hộp cùng với việc điều chỉnh màu sắc và độ sâu của bóng đổ như được chỉ định bên dưới.

Để thiết lập văn bản với bóng đổ, hãy thêm phần này vào tệp CSS của bạn (điều chỉnh cài đặt chiều rộng và phần đệm theo sở thích của riêng bạn). Sau đó, thêm lớp này vào thẻ div hoặc đoạn văn xung quanh văn bản của bạn:

Xem Thêm  Cách xác định một hàm trong Python - python xác định một hàm trong một hàm

.dropshadowtext
{chiều rộng: 400px;
đệm: 10px;
nền: #ccc;
viền: 2px solid # 666;
hộp-bóng: 5px 5px 5px # 999; }

Để thiết lập văn bản với bóng đổ, hãy thêm phần này vào tệp CSS của bạn (điều chỉnh cài đặt chiều rộng và phần đệm theo sở thích của riêng bạn). Sau đó, thêm lớp này vào thẻ div hoặc đoạn văn xung quanh văn bản của bạn:

Nếu bạn muốn hộp văn bản được căn giữa trên trang, hãy thêm lớp này vào div chứa văn bản:

margin: 0 auto;

Bạn cũng có thể tạo các góc tròn trên hộp văn bản với bóng đổ tròn bằng cách thêm “bán kính đường viền” vào hộp văn bản:

.dropshadowtext
{chiều rộng: 400px;
đệm: 10px;
nền: #ccc;
viền: 2px solid # 666;
bán kính đường viền: 20px;
hộp-bóng: 5px 5px 5px # 999; }

Đây là một hộp văn bản có đường viền, bóng đổ và các góc được làm tròn.

Để biết thêm thông tin về chủ đề này (bao gồm nội dung, bóng văn bản, v.v.), hãy xem hướng dẫn của w3schools về thuộc tính Box-shadow .

Lori Eldridge
Bản quyền © ngày 15 tháng 4 năm 2012 – cập nhật 12-18-20
Đã đăng ký Bản quyền


Xem thêm những thông tin liên quan đến chủ đề bóng đổ hình ảnh css

Scroll Animation CSS Cho Hình Ảnh

  • Tác giả: Lap Trinh Niem Vui
  • Ngày đăng: 2021-09-11
  • Đánh giá: 4 ⭐ ( 6150 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

CSS Filter – Blend màu bằng css

  • Tác giả: viblo.asia
  • Đánh giá: 5 ⭐ ( 9743 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thuộc tính Filter được hỗ trợ từ CSS3, được sử dụng để tạo một số visual effects (ví dụ: blur, saturation) lên một thành phần html (thường là ảnh). Bạn có thể thấy một số thuộc tính quen thuộc này tro…
Xem Thêm  Hướng dẫn SQL: Học SQL với Cơ sở dữ liệu MySQL (Người mới bắt đầu đến Chuyên gia) - học sql và mysql

Hiệu ứng bóng đổ với thuộc tính box-shadow của CSS3

  • Tác giả: freetuts.net
  • Đánh giá: 5 ⭐ ( 3930 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thuộc tính box-shadow của CSS3 là thuộc tính khá hữu dụng và được sử dụng nhiều trong quá trình viết CSS. Với thuộc tính này bạn có thể tạo cho các thành phần.

Sử dụng CSS để tạo hiệu ứng Drop Shadows

  • Tác giả: www.tranlegroup.com
  • Đánh giá: 4 ⭐ ( 7353 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bằng cách sử dụng có hiệu quả CSS, bạn có thể tạo ra những hiệu ứng đổ bóng – drop shadows rất đẹp, bạn có thể áp dụng lại CSS – Drop Shadows này nhiêu lần.

Làm bóng đổ với thuộc tính box-shadow của CSS3

  • Tác giả: www.thuthuatweb.net
  • Đánh giá: 5 ⭐ ( 2784 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thiết kế web,Hướng dẫn làm Blog, Web

Tạo hiệu ứng bóng đổ, button box-shadow trong CSS

  • Tác giả: code24h.com
  • Đánh giá: 4 ⭐ ( 4894 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Chào các bạn, thông thường để làm bóng đổ trên WEB người ta thường sử dụng hình ảnh, tuy nhiên với cách này thì làm cho trang web load chậm hơn, phải bỏ công thiết kế. Các bạn có thể sử dụng CSS để tạo bóng đổ cho khung, button một cách đơn giản hơn với box-shadow trong CSS .
    Thuộc tính …

Bóng đổ cho hình ảnh PNG trong CSS

  • Tác giả: qastack.vn
  • Đánh giá: 4 ⭐ ( 4541 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Đến bữa tiệc muộn một chút, nhưng đúng vậy, hoàn toàn có thể tạo bóng đổ…

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

By ads_php