Bóng bất thường với bóng hộp css3. Bóng bên trong trong CSS

Với sự ra đời của tiêu chuẩn CSS 3đã giới thiệu thuộc tính box-shadow, thuộc tính này đã được các nhà phát triển web sử dụng rộng rãi, vì nó giúp dễ dàng thêm một hoặc nhiều bóng vào hộp của một phần tử để mang lại hiệu ứng hình ảnh mong muốn.

Trong bài viết trước, chúng ta đã xem xét thuộc tính bán kính đường viền; sử dụng nó, bạn có thể có được bóng với các góc tròn. Bằng cách tương tự với bóng văn bản (text-shadow), bạn có thể tạo nhiều bóng, chúng được áp dụng theo trục Z từ trước ra sau (với bóng đầu tiên ở trên cùng).

Chúng ta hãy xem xét kỹ hơn cú pháp của thuộc tính hiện đại này:

Chúng ta hãy xem xét theo thứ tự các giá trị có thể có của thuộc tính này:

Nghĩa	Sự miêu tả
không có	Cái bóng không được hiển thị. Đây là giá trị mặc định.
chèn vào	Giá trị tùy chọn. Nếu giá trị này không được chỉ định (mặc định), bóng sẽ ở bên ngoài phần tử và sẽ tạo ra hiệu ứng phần tử bị phồng lên. Nếu có từ khóa (giá trị), bóng sẽ rơi vào bên trong phần tử và tạo hiệu ứng lõm. Nói cách khác, đó là sự thay đổi từ bóng bên ngoài sang bóng bên trong.
h-bóng	Giá trị bắt buộc.Đặt vị trí của bóng ngang. Giá trị âm được cho phép.
bóng chữ v	Giá trị bắt buộc.Đặt vị trí của bóng dọc. Giá trị âm được cho phép.
bán kính mờ	Giá trị tùy chọn.Đặt bán kính mờ. Giá trị càng cao thì độ mờ càng lớn, làm cho bóng lớn hơn và sáng hơn. Nếu giá trị không được chỉ định, giá trị sẽ là 0 (sắc nét - bóng rõ rệt). Giá trị âm không được phép.
bán kính trải rộng	Giá trị tùy chọn. Kích thước bóng (bán kính kéo dài bóng). Với các giá trị dương, bóng sẽ mở rộng và với các giá trị âm, nó sẽ co lại. Nếu không chỉ định giá trị thì giá trị sẽ là 0 (bóng tương ứng với kích thước của phần tử).
màu sắc	Giá trị tùy chọn. Xác định màu của bóng (HEX, RGB, RGBA, HSL, HSLA, "Các màu được xác định trước"). Giá trị mặc định là màu đen.

Những điểm chính bạn cần hiểu để tạo bóng cho các phần tử là:

Tôi muốn bạn chú ý đến thực tế là thuộc tính box-shadow hiện được hỗ trợ bởi tất cả các trình duyệt hiện đại:

Tài sản			Opera		iExplorer	Bờ rìa
bóng hộp	10.0 4.0 -webkit-	4.0 3.5 -moz-	10.5	5.1 3.1 -webkit-	9.0	12.0

Nếu bạn muốn mở rộng hỗ trợ cho một số trình duyệt, bao gồm cả thiết bị di động iOS 3.2 - 4.3 Và Android 2.1 - 3, thì nên sử dụng tiền tố của nhà sản xuất và sử dụng cú pháp sau (trong các ví dụ trong bài viết, cú pháp sẽ chỉ được sử dụng cho các trình duyệt hiện đại):

-webkit-box-shadow : giá trị ; /* Safari 3.1 - 4, iOS 3.2 - 4.3 và Android 2.1 - 3 */-moz-box-shadow : giá trị ; /* Firefox 3.5 - 3.6 */ box-shadow : value ; /* bảng trên */

Hãy chuyển sang thực hành và bắt đầu với một ví dụ đơn giản trong đó chúng ta thêm một bóng vào các phần tử:

Kết quả của ví dụ của chúng tôi:

Sử dụng nhiều bóng

Trong ví dụ sau, tôi đề xuất xem xét hiệu ứng trộn màu thú vị có thể đạt được khi sử dụng nhiều bóng:

• Hai các khối có chiều rộng và chiều cao cố định (15em và 10em), thêm phần đệm ở tất cả các cạnh (2em) và đặt các khối thành dòng khối để có thể xếp chúng thẳng hàng.
• Vì Đầu tiên chặn lớp .Bài kiểm tra chúng tôi đã chỉ ra bốn các bóng có giá trị bóng ngang và dọc khác nhau để phần tử có các bóng khác nhau ở tất cả các phía. Bán kính mờ cho tất cả các bóng được đặt giống nhau. Màu sắc của mỗi bóng là khác nhau và được chỉ định bằng các màu được xác định trước.
• Vì thứ hai chặn lớp .test2 chúng tôi đã chỉ ra bốn bóng với các giá trị bóng ngang và dọc khác nhau. Bán kính mờ cho tất cả các bóng được đặt thành như nhau, trong khi độ giãn của bóng được đặt thành âm, điều này dẫn đến việc giảm bóng. Màu sắc của mỗi bóng là khác nhau và được chỉ định bằng hệ thống RGBA.

Kết quả của ví dụ của chúng tôi:

Sử dụng bóng cho hình ảnh

Ví dụ cuối cùng của bài viết này sẽ tập trung vào việc sử dụng bóng cho hình ảnh. Tôi muốn bạn chú ý ngay đến thực tế là bạn có thể chỉ định trực tiếp bóng cho phần tử HTML Nó sẽ không hoạt động, nhưng chúng tôi có cơ hội chỉ định một hình ảnh làm nền cho phần tử mà chúng tôi quan tâm và sau đó gán bóng mà chúng tôi cần cho phần tử này.

Chúng ta sẽ xem xét chi tiết cách làm việc với hình nền trong bài viết trong sách giáo khoa "", và bây giờ, để kết thúc việc nghiên cứu sử dụng bóng, chúng ta sẽ chạm vào nó một cách sơ sài và sử dụng hình ảnh làm nền cho một phần tử sau đây ví dụ:

• Hai các khối có chiều rộng và chiều cao cố định (237px và 232px), thêm lề cho tất cả các cạnh (2em) và đặt các khối thành dòng khối để có thể xếp chúng thẳng hàng. Chúng tôi đặt kích thước khối 237px x 232px theo kích thước của hình ảnh để ở giai đoạn đào tạo này, chúng tôi không phải điều chỉnh tỷ lệ hình ảnh cho vừa với phần tử và ảnh hưởng đến các thuộc tính CSS được lên kế hoạch nghiên cứu ở giai đoạn sau (trong bài viết SGK “”).
• Vì Đầu tiên chặn lớp .Bài kiểm tra Chúng tôi đã chỉ định giá trị 0 cho bóng ngang và dọc, nhưng đồng thời chúng tôi đã chỉ định bán kính mờ là 50px và mở rộng nó bằng cách đặt bán kính kéo dài là 10px. Màu bóng được biểu thị bằng màu được xác định trước (tím). Ngoài ra, chúng tôi đã chỉ định từ khóa inset trong phần khai báo, khiến bóng đổ vào bên trong phần tử. Nói cách khác, chúng ta đã tạo ra bóng bên trong của phần tử.
• Vì thứ hai chặn lớp .test2 Chúng tôi đã chỉ định giá trị 0 cho bóng ngang và dọc, nhưng đồng thời chúng tôi đã chỉ định bán kính mờ là 50px và mở rộng nó bằng cách đặt bán kính kéo dài là 10px. Màu bóng được chỉ định trong chế độ RGBA.

Kết quả của ví dụ của chúng tôi:

Cơm. 98 Ví dụ về sử dụng bóng cho hình ảnh trong CSS (thuộc tính box-shadow)

Câu hỏi và nhiệm vụ về chủ đề

Trước khi chuyển sang chủ đề tiếp theo, hãy hoàn thành bài tập thực hành:

Nếu gặp khó khăn khi hoàn thành nhiệm vụ thực hành, bạn luôn có thể mở ví dụ trong một cửa sổ riêng và kiểm tra trang để hiểu mã CSS nào đã được sử dụng.

2016-2019 Denis Bolshakov, bạn có thể gửi nhận xét và đề xuất trên trang web tới [email protected]

Tương tự như bản cập nhật 3, nhưng với các quy tắc css hiện đại (= ít hơn) nên không cần phải định vị đặc biệt trên phần tử giả.

#box ( màu nền: #3D6AA2; chiều rộng: 160px; chiều cao: 90px; vị trí: tuyệt đối; trên cùng: calc(10% - 10px); trái: calc(50% - 80px); ) .box-shadow:after ( nội dung:""; vị trí:tuyệt đối; chiều rộng:100%; đáy:1px; z-index:-1; biến đổi:scale(.9); box-shadow: 0px 0px 8px 2px #000000; )

CẬP NHẬT 3

#box ( màu nền: #3D6AA2; chiều rộng: 160px; chiều cao: 90px; lề trên: -45px; lề trái: -80px; vị trí: tuyệt đối; trên cùng: 50%; trái: 50%; ) .box- bóng:sau ( nội dung: ""; chiều rộng: 150px; chiều cao: 1px; lề trên: 88px; lề trái: -75px; hiển thị: khối; vị trí: tuyệt đối; trái: 50%; chỉ mục z: -1; -webkit-box-shadow: 0px 0px 8px 2px #000000; -moz-box-shadow: 0px 0px 8px 2px #000000; box-shadow: 0px 0px 8px 2px #000000; )

CẬP NHẬT 2

Rõ ràng bạn chỉ có thể thực hiện việc này với tùy chọn thẻ hộp CSS tùy chọn, như những người khác vừa chỉ định. Đây là bản demo:

Webkit-box-shadow: 0 4px 4px -2px #000000; -moz-box-shadow: 0 4px 4px -2px #000000; bóng hộp: 0 4px 4px -2px #000000;

Đây sẽ là giải pháp tốt nhất. Tham số bổ sung được thêm vào được mô tả là:

Chiều dài thứ tư là khoảng cách trải rộng. Các giá trị dương làm cho hình dạng bóng mở rộng theo hướng dọc theo bán kính đã chỉ định. Các giá trị âm làm cho hình dạng bóng đồng ý.

CẬP NHẬT

Những gì tôi đã làm là tạo ra một "phần tử bóng" ẩn đằng sau phần tử thực tế mà bạn muốn có trong phần bóng tối. Tôi đã làm cho chiều rộng của "phần tử bóng" nhỏ hơn chính xác so với phần tử thực tế, gấp 2 lần bóng được chỉ định; sau đó tôi căn chỉnh nó một cách chính xác.

#wrapper ( chiều rộng: 84px; vị trí: tương đối; ) #element ( màu nền: #3D668F; chiều cao: 54px; chiều rộng: 100%; vị trí: tương đối; z-index: 10; ) #shadow ( màu nền: # 3D668F; chiều cao: 8px; chiều rộng: 80px; lề trái: -40px; vị trí: tuyệt đối; dưới cùng: 0px; trái: 50%; z-index: 5; -webkit-box-shadow: 0px 2px 4px #000000; - moz-box-shadow: 0px 2px 4px #000000; hộp-bóng: 0px 2px 4px #000000; )

Câu trả lời gốc

Có, bạn có thể thực hiện việc này với cú pháp tương tự như bạn đã cung cấp. Giá trị đầu tiên kiểm soát vị trí ngang và giá trị thứ hai kiểm soát vị trí dọc. Vì vậy, chỉ cần đặt giá trị đầu tiên thành 0px và giá trị thứ hai thành bất kỳ giá trị bù nào bạn muốn thực hiện như sau.

Bóng dưới phần tử khối trên trang thường được sử dụng để tạo hiệu ứng ba chiều, thu hút sự chú ý đến phần tử hoặc như một phần của thiết kế. Một bóng nhỏ bên dưới các phần tử cũng tạo nên độ sâu và độ dày của trang.

Để thêm bóng, hãy sử dụng thuộc tính box-shadow, có sáu giá trị, trong đó chỉ có hai giá trị là bắt buộc. Trong bộ lễ phục. Hình 1 hiển thị thuộc tính box-shadow với tất cả các giá trị có thể có, được đánh số để nhận dạng chúng.

Cơm. 1. Giá trị thuộc tính Box-shadow

1. từ khóa inset đặt bóng bên trong phần tử;
2. dịch chuyển bóng theo chiều ngang (5px - phải, -5px - trái);
3. dịch chuyển dọc (5px - xuống, -5px - lên);
4. bán kính mờ bóng (0 - bóng sắc nét);
5. kéo dài bóng (5px - kéo dài, -5px - thu nhỏ);
6. màu bóng.

Chỉ cần xác định độ dịch chuyển ngang và dọc, tất cả các tham số khác sẽ được lấy theo mặc định. Trong trường hợp này, bóng sẽ sắc nét mà không bị mờ hoặc đen.

Bằng cách kết hợp các tham số khác nhau và giá trị của chúng, bạn có thể có được nhiều loại bóng khác nhau. Trong bảng 1 hiển thị mã và kết quả mà nó dẫn đến.

Bàn 1. Kết hợp các tham số bóng

Mã số	Kết quả	Sự miêu tả
bóng hộp: 5px 5px;		Bóng sắc nét ở bên phải và bên dưới.
bóng hộp: -5px -5px;		Bóng sắc nét ở bên trái và phía trên.
bóng hộp: 0 0 5px;		Bóng mờ xung quanh một phần tử.
bóng hộp: 0 0 5px 2px;		Mở rộng bóng thêm 2 pixel.
bóng hộp: 0 0 5px 2px màu đỏ;		Ánh sáng đỏ xung quanh phần tử.
bóng hộp: 0,4em 0,4em 5px rgba(122,122,122,0,5);		Bóng mờ.
bóng hộp: chèn 0 0 6px;		Bóng tối bên trong.

Như có thể thấy từ bảng, sự dịch chuyển bóng không nhất thiết phải được chỉ định bằng pixel, mặc dù điều này rất thuận tiện. Màu sắc của bóng có thể được chỉ định ở bất kỳ định dạng có sẵn nào; ví dụ: để có được bóng mờ, định dạng RGBA là phù hợp; bóng như vậy sẽ trông đẹp trên mọi nền. Ví dụ 1 cho thấy cách thực hiện việc này.

Ví dụ 1: Bóng trên ảnh nền

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Kết quả của ví dụ này được hiển thị trong Hình. 2. Bóng theo đường bo tròn của các góc của khối.

Cơm. 2. Xuất hiện bóng trên ảnh nền

Khi thêm bóng "rộng", hãy lưu ý rằng nó có thể vượt ra ngoài đường viền hiển thị của cửa sổ trình duyệt và do đó dẫn đến xuất hiện thanh cuộn ngang.

Bóng cũng có thể được thêm vào các phần tử giả; điều này đôi khi được yêu cầu đối với các bố cục phức tạp. Trong bộ lễ phục. Hình 3 cho thấy một khối tiêu đề có thêm bóng vào nó. Để tránh bất kỳ đường nào ở điểm giao nhau, bạn phải sử dụng phần tử giả ::after và thêm bóng vào nó.

Cơm. 3. Chặn bằng bóng

Ví dụ 2 cho thấy việc tạo một khối như vậy.

Ví dụ 2. Khối bằng bóng

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Một phần tử có thể có nhiều hơn một bóng, nhưng có nhiều bóng cùng một lúc; các tham số của chúng được liệt kê cách nhau bằng dấu phẩy trong giá trị của thuộc tính box-shadow. Ví dụ 3 cho thấy cách thêm bóng kép vào tất cả hình ảnh.

Ví dụ 2. Khối bằng bóng

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Kết quả của ví dụ này được hiển thị trong Hình. 4.

Cơm. 4. Hình ảnh bóng đôi

Bóng đầu tiên được hiển thị ở bên trái của hình ảnh với bán kính mờ là 20px, kích thước của nó giảm theo tham số thứ tư (-20px). Các thông số của bóng thứ hai được biểu thị sau dấu thập phân, bóng được hiển thị ở bên phải của hình ảnh và cũng được giảm bớt để đối xứng.

Bóng thông thường rất dễ thực hiện bằng cách sử dụng bóng hộp hoặc bóng văn bản. Nhưng nếu bạn cần tạo bóng bên trong thì sao? Bài viết này mô tả cách tạo những bóng này chỉ bằng một vài dòng mã.

Cú pháp

Trước tiên, hãy xem hai cách chính để triển khai bóng trong CSS.

bóng hộp

Thiết kế bóng hộp chứa đựng nhiều ý nghĩa khác nhau:

Độ lệch ngang Và Bù đắp theo chiều dọc- chuyển vị ngang và dọc tương ứng. Các giá trị này cho biết đối tượng sẽ đổ bóng theo hướng nào:

Bán kính mờ Và bán kính trải rộng phức tạp hơn một chút. Có gì khác biệt? Hãy xem một ví dụ có hai phần tử, trong đó các giá trị bán kính lờ mờ khác nhau:

Các cạnh của bóng chỉ đơn giản là mờ. Với các giá trị khác nhau bán kính trải rộng chúng ta thấy như sau:

Trong trường hợp này, chúng ta thấy bóng nằm rải rác trên một khu vực rộng lớn. Nếu bạn không chỉ định một giá trị bán kính lờ mờ Và bán kính trải rộng, thì chúng sẽ bằng 0.

bóng văn bản

Cú pháp rất giống với bóng hộp:

Ý nghĩa thì giống nhau nhưng không bóng tối trải rộng. Ví dụ sử dụng:

Chèn vào bóng hộp

Để “lật” bóng bên trong đối tượng, bạn cần thêm chèn vào trong CSS:

Khi bạn hiểu cú pháp bóng hộp cơ bản, bạn sẽ rất dễ hiểu cách triển khai bóng bên trong. Các giá trị vẫn như cũ, bạn có thể thêm màu (RGB ở dạng hex):

Màu ở định dạng RGB, giá trị alpha chịu trách nhiệm về độ trong suốt của bóng:

Hình ảnh có bóng

Thêm bóng bên trong vào hình ảnh khó hơn một chút so với việc thêm bóng thông thường div. Để bắt đầu, đây là mã hình ảnh thông thường:

Thật hợp lý khi cho rằng bạn có thể thêm bóng như thế này:

Img ( box-shadow: inset 0px 0px 10px rgba(0,0,0,0.5); )

Nhưng cái bóng không nhìn thấy được:

Có một số cách để giải quyết vấn đề này, mỗi cách đều có ưu và nhược điểm. Chúng ta hãy nhìn vào hai trong số họ. Đầu tiên là bọc hình ảnh theo cách thông thường div:

Div ( chiều cao: 200px; chiều rộng: 400px; bóng hộp: chèn 0px 0px 10px rgba(0,0,0,0.9); ) img ( chiều cao: 200px; chiều rộng: 400px; vị trí: tương đối; chỉ mục z: -2 ; )

Mọi thứ đều hoạt động nhưng chúng tôi phải thêm một chút đánh dấu HTML và CSS. Cách thứ hai là đặt hình ảnh làm nền của khối mong muốn:

Div ( chiều cao: 200px; chiều rộng: 400px; nền: url(http://lorempixum.com/400/200/transport/2); box-shadow: inset 0px 0px 10px rgba(0,0,0,0.9); )

Đây là những gì có thể xảy ra khi sử dụng bóng bên trong:

Chèn vào bóng văn bản

Để triển khai bóng văn bản bên trong, chỉ cần thêm vào mã chèn vào không hoạt động:

Để giải quyết, trước tiên hãy áp dụng cho tiêu đề h1Đặt nền tối và bóng sáng:

H1 ( màu nền: #565656; màu: trong suốt; bóng văn bản: 0px 2px 3px rgba(255,255,255,0.5); )

Đây là những gì xảy ra:

Thêm một thành phần bí mật clip nền cắt bỏ bất cứ thứ gì vượt ra ngoài văn bản (đến nền tối):

H1 ( màu nền: #565656; màu: trong suốt; bóng văn bản: 0px 2px 3px rgba(255,255,255,0.5); -webkit-background-clip: văn bản; -moz-background-clip: văn bản; clip nền: văn bản ; )

Hóa ra gần như chính xác những gì chúng tôi cần. Bây giờ chúng ta chỉ làm tối văn bản một chút (alpha) và kết quả là:

Thuộc tính CSS box-shadow thêm một hoặc nhiều bóng vào một phần tử. Để chỉ định nhiều bóng, bạn phải thêm (các) giá trị bóng bổ sung, phân tách bằng dấu phẩy.

Hỗ trợ trình duyệt

Tài sản			Opera		iExplorer	Bờ rìa
bóng hộp	10.0 4.0 -webkit-	4.0 3.5 -moz-	10.5	5.1 3.1 -webkit-	9.0	12.0

Cú pháp CSS:

bóng hộp: "không có| chèn h-shadow v-shadow bán kính mờ bán kính trải rộng màu | ban đầu | kế thừa";

Cú pháp JavaScript:

Object.style.boxShadow = "10px 5px 5px đỏ"

Giá trị tài sản

Nghĩa	Sự miêu tả
không có	Cái bóng không được hiển thị. Đây là giá trị mặc định.
chèn vào	Giá trị tùy chọn. Nếu giá trị này không được chỉ định (mặc định), bóng sẽ ở bên ngoài phần tử và sẽ tạo ra hiệu ứng phần tử bị phồng lên. Nếu có từ khóa chèn (giá trị), bóng sẽ rơi vào bên trong phần tử và tạo hiệu ứng thụt lề. Nói cách khác, đó là sự thay đổi từ bóng bên ngoài sang bóng bên trong.
h-bóng	Giá trị bắt buộc.Đặt vị trí của bóng ngang. Giá trị âm được cho phép.
bóng chữ v	Giá trị bắt buộc.Đặt vị trí của bóng dọc. Giá trị âm được cho phép.
bán kính mờ	Giá trị tùy chọn.Đặt bán kính mờ. Giá trị càng cao thì độ mờ càng lớn, làm cho bóng lớn hơn và sáng hơn. Nếu giá trị không được chỉ định, giá trị sẽ là 0 (sắc nét - bóng rõ rệt). Giá trị âm không được phép.
bán kính trải rộng	Giá trị tùy chọn. Kích thước bóng (bán kính kéo dài bóng). Với các giá trị dương, bóng sẽ mở rộng và với các giá trị âm, nó sẽ co lại. Nếu không chỉ định giá trị thì giá trị sẽ là 0 (bóng tương ứng với kích thước của phần tử).
màu sắc	Giá trị tùy chọn. Xác định màu của bóng (HEX, RGB, RGBA, HSL, HSLA, "Các màu được xác định trước"). Giá trị mặc định là màu đen.
	Đặt thuộc tính về giá trị mặc định của nó.
	Chỉ ra rằng giá trị được kế thừa từ phần tử cha.

Phiên bản CSS

CSS3

Thừa hưởng

KHÔNG.

Hoạt hình

Đúng.

Ví dụ sử dụng