CSS bóng đổ

Question

Các bạn đọc like ủng hộ MUO nhé. Khi bạn mua hàng bằng các liên kết trên trang web của chúng tôi, chúng tôi có thể kiếm được hoa hồng liên kết. Đọc thêm

Mặc dù xu hướng thiết kế thay đổi hàng năm, nhưng bạn có thể tin tưởng vào việc sử dụng các hiệu ứng đổ bóng chủ yếu như bóng hộp và bóng đổ để góp phần tích cực vào tính thẩm mỹ của trang web. Bạn có thể sử dụng đổ bóng để tạo các hiệu ứng đẹp mắt, dễ chịu mà không bị sến sẩm

Nội dung chính Show

CSS drop-shadow là gì?
Khi CSS thả bóng hữu ích?
Hình dạng không phải hình chữ nhật
Các yếu tố được nhóm
Các yếu tố được cắt bớt
Hạn chế và khác biệt
Hỗ trợ trình duyệt
Thử nghiệm với các hiệu ứng đổ bóng khác nhau
Bóng đổ trong CSS là gì?
Bạn có thể thêm bóng đổ trong CSS không?
Làm cách nào để đặt bóng trong CSS?

Hãy xem xét kỹ hơn thuộc tính đổ bóng CSS

CSS drop-shadow là gì?

bóng đổ ( ) là một hiệu ứng CSS hiển thị bóng xung quanh hình dạng của một đối tượng được chỉ định. Đây là cú pháp để áp dụng CSS drop-shadow

 <strong>Syntax:strong> 
filter: drop-shadow(offset-x offset-y blur-radius color);

Có một loạt các chức năng bộ lọc bao gồm độ mờ ( ), độ sáng ( ) và bóng đổ ( )

offset-x xác định khoảng cách theo chiều ngang và offset-y xác định khoảng cách theo chiều dọc. Lưu ý rằng các giá trị âm đặt bóng ở bên trái (offset-x) và bên trên (offset-y) đối tượng

Hai tham số cuối cùng là tùy chọn. Bạn có thể chỉ định bán kính mờ của bóng theo chiều dài. Theo mặc định, nó được đặt thành 0. Bạn không thể có bán kính mờ âm

The color of the shadow is specified as . If you haven’t specified a color, it follows the value of the color property.

Khi CSS thả bóng hữu ích?

Bạn có thể đã biết rằng box-shadow thực hiện công việc khá tốt. Vì vậy, bạn có thể nghĩ, tại sao chúng ta cần đổ bóng? . Chúng ta hãy xem một vài trong số họ

Hình dạng không phải hình chữ nhật

Không giống như bóng hộp, bạn có thể thêm bóng đổ vào các hình dạng không phải hình chữ nhật. Chẳng hạn, chúng ta có một SVG hoặc PNG trong suốt với hình dạng không phải hình chữ nhật—ví dụ như một ngôi sao. Ở đây, việc thêm bóng tương ứng với chính đối tượng có thể được hoàn thành bằng bóng hộp hoặc bóng đổ. Xem xét cả hai kịch bản

HTML

 html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>Drop-shadowtitle>
head>
<body>
  class="star-img">
    class="box-shadow" src="star.svg" alt="">
    class="drop-shadow" src="star.svg" alt="">
  div>
body>
html>

CSS

 .star-img img {

display: inline-block;

height: 15em;

width: 25em;

}

.box-shadow {

color: red;

box-shadow: 0.60em 0.60em 0.2em;

}

.drop-shadow {

filter: drop-shadow(0.60em 0.60em 0.2em);

}

đầu ra

Box-shadow versus drop-shadow on SVG

Khi so sánh cả hai hiệu ứng, rõ ràng là bóng hộp tạo ra bóng hình chữ nhật; . Mặt khác, drop-shadow cho phép bạn tạo bóng phù hợp với hình dạng của chính hình ảnh

The limiting factors are that the drop-shadow( ) function accepts all parameters of type except the inset keyword and spread parameter.

Các yếu tố được nhóm

Có một số trường hợp khi bạn có thể cần xây dựng các thành phần bằng cách chồng chéo các thành phần nhất định. Nếu bạn đang sử dụng box-shadow, bạn sẽ phải đối mặt với vấn đề cố gắng đổ bóng đúng cách. Đây là cách nó hoạt động khi nhóm một hình ảnh và một thành phần văn bản

HTML

 <body>

class="parent-container drop-shadow">

class="image-container box">

<img src="smiling-girl.jpg" alt="smiling girl" />

div>

class="text-container box">

<h2>Live in the momenth2>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas porro quo nam odit, non debitis, facilis eligendi ea labore obcaecati ut quia asperiores. Modi, corrupti commodi quisquam ex numquam incidunt.p>

div>

div>

body>

CSS cơ bản

 body {

padding: 5em 1em;

font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande',

'Lucida Sans Unicode', Geneva, Verdana, sans-serif;

}

h2 {

font-size: 2rem;

}

p {

font-size: 0.8rem;

}

.parent-container {

display: flex;

flex-direction: column;

height: 17rem;

width: 50em;

}

.image-container img {

width: 15em;

position: absolute;

z-index: 1;

top: 2em;

left: 1.5em;

}

.text-container {

color: rgb(255, 236, 236);

background-color: rgb(141 0 35);

width: 30rem;

padding: 3rem;

align-self: flex-end;

position: relative;

}

Bây giờ, áp dụng box-shadow và drop-shadow để thấy sự khác biệt

 .drop-shadow {

filter: drop-shadow(0.4rem 0.4rem 0.45rem rgba(0, 0, 30, 0.5));

}

.box,

.box img {

box-shadow: 0.4rem 0.4rem 0.45rem rgba(0, 0, 30, 0.3);

}

đầu ra

Drop-shadow and box-shadow on grouped elements

Như bạn có thể thấy, bóng hộp được áp dụng cho từng thành phần riêng lẻ trong khi bóng đổ nhóm cả hai thành phần và áp dụng bóng

Các yếu tố được cắt bớt

Bạn có thể sử dụng thuộc tính clip-path để cắt một vùng nhất định xác định phần nào của hình ảnh hoặc thành phần sẽ được hiển thị. Bộ lọc bóng đổ cho phép chúng ta tạo bóng đổ trên phần tử bị cắt bằng cách áp dụng nó cho phần tử gốc của phần tử đó

HTML

 <body>

class="parent-container">

class="clipped-element">

div>

div>

body>

CSS

 .parent-container {

filter: drop-shadow(0rem 0rem 1.5rem maroon);

}

.clipped-element {

width: 50em;

height: 50em;

margin: 0 auto;

background-image: url(smiling-girl.jpg);

clip-path: circle(50%);

background-size: cover;

background-repeat: no-repeat;

}

đầu ra

Applying drop-shadow on clipped elements

Chúng tôi đã cắt 50% hình ảnh bằng một đường tròn. Do đó, bộ lọc bóng đổ chỉ được áp dụng cho phần hiển thị của hình ảnh. Không phải là nó tuyệt vời?

Hạn chế và khác biệt

Như chúng ta đã thảo luận ở trên, bóng đổ không hỗ trợ tham số trải rộng. Điều này có nghĩa là việc tạo hiệu ứng đường viền sẽ không thể thực hiện được bằng hàm drop-shadow() vì nó bị tắt ở mọi nơi. Ngoài ra, nó hiển thị các hiệu ứng đổ bóng khác nhau từ box-shadow và text-shadow (với cùng tham số). Bạn có thể cảm thấy rằng sự khác biệt giữa box-shadow và drop-shadow là do CSS Box Model. Một người làm theo nó trong khi người kia thì không. Đây là một ví dụ

HTML

________số 8

CSS cơ bản

 body {

padding: 5em 1em;

font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande',

'Lucida Sans Unicode', Geneva, Verdana, sans-serif;

}

.parent-container {

width: 72rem;

}

p {

font-size: 3em;

font-style: bold;

}

Áp dụng hiệu ứng đổ bóng

 html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>Drop-shadowtitle>
head>
<body>
  class="star-img">
    class="box-shadow" src="star.svg" alt="">
    class="drop-shadow" src="star.svg" alt="">
  div>
body>
html>

0

đầu ra

Drop-shadow versus box-shadow versus text-shadow

Bạn có thể thấy rằng box-shadow cho bóng nặng hơn và đậm hơn so với text-shadow và drop-shadow. Ngoài ra, có một chút khác biệt về vị trí của bóng giữa text-shadow và drop-shadow. Tuy nhiên, bạn có thể thích các hiệu ứng đổ bóng khác nhau tùy theo yêu cầu của mình

Hỗ trợ trình duyệt

Chức năng đổ bóng ( ) được hỗ trợ trong tất cả các trình duyệt hiện đại ngoại trừ các trình duyệt cũ hơn như Internet Explorer. Mặc dù đó không phải là thứ có thể cản trở nghiêm trọng UX, nhưng bạn có thể thêm một truy vấn tính năng với dự phòng bóng hộp

Thử nghiệm với các hiệu ứng đổ bóng khác nhau

Sự phổ biến của box-shadow là khá rõ ràng vì có vô số trường hợp sử dụng. Tuy nhiên, hàm drop-shadow() ít được sử dụng. Chúng tôi hy vọng rằng bạn sẽ thử nghiệm với các hiệu ứng đổ bóng khác nhau và cố gắng triển khai bóng đổ trong các dự án tương lai của mình

Các lớp giả thêm một loạt chức năng hoàn toàn mới vào CSS và tiết mục phát triển web cá nhân của bạn. Tìm hiểu thêm về họ để trở thành một nhà phát triển web thành thạo và hiệu quả hơn

Bóng đổ trong CSS là gì?

bóng đổ () . Chấp nhận tối đa 3 phép đo khoảng cách, đại diện cho độ lệch x/y và bán kính mờ, cùng với giá trị màu

Bạn có thể thêm bóng đổ trong CSS không?

Chúng ta có thể thêm bóng đổ vào bất kỳ phần tử HTML nào bằng cách sử dụng thuộc tính CSS box-shadow .

Làm cách nào để đặt bóng trong CSS?

Bóng hộp CSS .

Chỉ định bóng ngang và bóng dọc. div { bóng hộp. 10px 10px;.

Chỉ định màu cho bóng. div {.

Thêm hiệu ứng mờ cho bóng đổ. div {.

Đặt bán kính trải rộng của bóng. div {.

Thêm tham số chèn. div {.

div { bóng hộp. 5px 5px xanh lam, 10px 10px đỏ, 15px 15px xanh lục;

programming css

CSS bóng đổ

CSS drop-shadow là gì?

Khi CSS thả bóng hữu ích?

Hình dạng không phải hình chữ nhật

Các yếu tố được nhóm

Các yếu tố được cắt bớt

Hạn chế và khác biệt

Hỗ trợ trình duyệt

Thử nghiệm với các hiệu ứng đổ bóng khác nhau

Bóng đổ trong CSS là gì?

Bạn có thể thêm bóng đổ trong CSS không?

Làm cách nào để đặt bóng trong CSS?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội