CSS-shadow: làm thế nào để làm cho

Nếu không có bóng tối không có ánh sáng mà không bóng không hình thức. Ngay cả những cơ bản make-up công cụ dành cho phụ nữ được gọi là "cái bóng". Nếu bạn muốn mang lại vẻ đẹp cho trang web của bạn, bạn cần phải đặt trọng tâm đúng - Thêm CSS-shadow nơi nó là cần thiết.

Các tài liệu được trình bày dưới đây sẽ giúp bạn tìm hiểu làm thế nào để cài đặt các bóng râm hoặc để chặn hình ảnh sử dụng CSS-mã.

CSS-shadow. cú pháp

Trên thực tế hộp bóng, nơi hộp - một khối và bóng tối - đây chính là một cái bóng.

Mã được viết trong dấu ngoặc:

{Hộp-shadow: 11px 22px 33px 44px # 333333;}.

Dòng cho chúng ta biết rằng các đơn vị được thiết lập để chuẩn với bán kính bóng pixel. Các dữ liệu được giải mã như sau:

• 11px - bóng tương đối so với khối trên trục X (giá trị dương (20px bù đắp) sẽ chuyển sang cái bóng đúng, tiêu cực (-37px) - bên trái);
• 22px - chuyển vị bóng đối với trục Y của khối (giá trị dương (5px) dẫn đến một sự thay đổi của bóng râm xuống tiêu cực (-17px) - up) với;
• 33px - tham số mờ này, số càng cao, càng mạnh hiệu quả;
• 44px - bán kính của bóng tối, và là tỷ lệ thuận;
• # 333333 - màu, được vẽ trong bóng râm.

Ba thông số cuối cùng là tùy chọn và có thể dễ dàng được bỏ qua trong chuỗi, tức là {hộp-shadow: 10px 13px; } - .. một dòng như vậy là không đúng (bóng màu giống với màu sắc của văn bản trong khối).

Như vậy, việc tạo ra bóng trên các trang của trang web của bạn không phải là một khó khăn, nhưng nhiều tác dụng cái nhìn tốt đẹp bạn có thể tạo! Làm cho con bạn một độc đáo, không thể bắt chước, vì thiết kế là quan trọng, từng chi tiết, từng chi tiết. Ở đây, có vẻ như, không có gì đặc biệt, nhưng nó là nhiều hơn nữa thú vị và hấp dẫn.

Xem xét một số ví dụ minh họa, nó trông giống như một cái bóng CSS-block theo mã hóa:

1. {Box-shadow: 25px 25px;} - CSS-bóng bù đắp trục 25 pixel.
2. {Box-shadow: 25px 25px 10px;} - CSS-bóng bù đắp trục 25 pixel và làm mờ cạnh 10 pixel.
3. {Box-shadow: 25px 25px 10px 5px;} - CSS-bóng bù đắp trục 25 pixel, mờ cạnh 10 pixel và một bán kính xác định trước 5 pixel
4. {Box-shadow: 25px 25px 10px 5px # 9e9e9e;} - CSS-bóng bù đắp trục 25 pixel, mờ cạnh 10 pixel, xác định bán kính 5 pixel và màu sắc.

thả bóng

Để tạo một đẹp hơn, sang trọng và độc đáo màu có hiệu ứng khác nhau. Bạn có thể làm cho inner shadow. Nó đủ code để xác định các thông số của "hình chữ nhật", mô tả thêm về các thông số sẽ đi như bình thường:

{Box-shadow: inset 4px 2px 6px # 9e9e9e;}.

Có thể đặt dưới các khối một vài bóng với các thông số hoàn toàn khác nhau trong các mã, họ (bóng tối) đều được liệt kê cách nhau bởi dấu phẩy:

{Box-shadow: -20px -10px 11px 15px # 800080, -50px -40px 5px 10px # daa520, 20px 10px 11px 15px # 0700f9, 50px 40px 5px 10px # ffa500}.

hình ảnh bóng

Ngoài các đơn vị trên trang web chắc chắn sẽ tranh, ảnh, hình nền - tất cả những yếu tố này cũng xem xét nhiều hơn nữa thú vị với bóng tối. Bạn có thể vẽ hình ảnh trong các biên tập trước hình ảnh và dán chúng trên một trang đã có bóng tối. Nhưng, trước hết, nó không phải lúc nào cũng có thể vì nhiều lý do, trong đó có vì thiếu kỹ năng làm việc với đồ họa, thứ hai, bất kỳ thao tác của hình ảnh sẽ được thêm vào anh ta, "trọng lượng", và một bức tranh như vậy cũng có thể làm chậm tải trang. Trong trường hợp này, bạn có thể tạo ra một hình ảnh CSS-shadow.

Giải pháp đơn giản nhất và đúng cú pháp cho vấn đề này - sự sáng tạo của các đơn vị, các nền tảng về hình ảnh của bạn sẽ Kotormo. Tiếp theo, bạn thực hiện các bóng râm cần thiết cho các đơn vị và họ được hiển thị trên background-image:

• .block1 {hộp-shadow: inset 0 0 11px 9px # 9e9e9e; width: 480; height: 360px; background: url (images / charlize_theron_2.jpg) 0 0 no-repeat;}

Trong ví dụ này, chúng ta tạo ra một inner shadow không có bù đắp của các trục, với bán kính mờ, màu sắc được xác định, chiều cao và chiều rộng của khối, và nền (background) bổ nhiệm kuartinku. Kết quả là, chúng ta có được một bức tranh về inner shadow.

Đồng ý để tạo ra bóng tối sử dụng CSS-mã - nó khá đơn giản nhưng thú vị, và quan trọng nhất - tập thể dục hữu ích.