Video: Tạo hiệu ứng đổ bóng cho chữ, logo hoặc shape theo style flat design (long shadow) | HPphotoshop.com 2025
Bạn có thể nâng cao các thiết kế của bạn trong Dreamweaver và cung cấp cho trang của bạn chiều sâu lớn hơn bằng cách thêm bóng đổ vào hình ảnh, thẻ, và các yếu tố khác. Thêm bóng văn bản làm cho từ của bạn dễ đọc hơn, đặc biệt là nếu thiết kế của bạn có nền phức tạp hoặc nền trước và màu nền không có độ tương phản.
Tín dụng: Ảnh của iStockphoto. comDreamweaver CC cung cấp hỗ trợ tốt hơn và tích hợp bóng đổ và bóng đổ CSS3 từ bảng điều khiển CSS mới.
Bạn có thể tạo các kiểu lớp hoặc ID với bóng chữ, và bạn có thể thêm các vùng văn bản vào các phần tử HTML hiện có bằng cách xác định kiểu thẻ, chẳng hạn như tiêu đề 1 được thấy ở đây. Đoạn mã CSS3 tạo vùng bóng văn bản đó là
h1 {text-shadow: 2px 2px 2px # 000;}
Các con số trong đoạn mã xác định rằng bóng văn bản nên mở rộng 2 pixel ở bên phải và 2 pixel bên dưới văn bản với độ mờ 2-pixel. Ngoài ra, bóng được tạo ra với màu đen, được chỉ định bởi mã màu hexa thập lục phân số # 000.
ngang-
và chiều dọc : Hai giá trị số đầu tiên là bắt buộc và chỉ định chiều ngang và độ lệch dọc - khoảng cách bóng đổ kéo dài dưới văn bản ( dọc ) và bên phải của văn bản (ngang). bán kính mờ
-
: Giá trị thứ ba xác định số lượng mờ trong bóng tối. Nếu bạn không bao gồm bán kính mờ, mặc định là 0, làm cho bóng xuất hiện như một màu rắn.
-
: Giá trị thứ tư xác định màu sắc của bóng tối và có thể được xác định bằng mã màu thập lục phân hoặc mã màu RGBa. Việc chọn màu RGBa cho tùy chọn Màu cho phép bạn kiểm soát tốt hơn hình dạng của bóng vì bạn có thể thêm độ trong suốt.
Bạn có thể thêm một bóng văn bản bằng cách sử dụng bảng thuộc tính ở cuối bảng điều khiển CSS Designer. Để làm như vậy, hãy làm theo các bước sau:
Cuộn xuống phần Văn bản-Bóng của bảng thuộc tính thiết kế CSS.
-
Nhập kích thước của bóng tối mà bạn muốn hiển thị bằng các trường H-shadow (ngang) và V-shadow (vertical).
-
Thêm số lượng mờ mà bạn muốn cho bóng văn bản của mình bằng cách nhập một kích thước vào trường Blur.
-
Nhấp vào màu tốt và chọn màu bạn muốn sử dụng trong bóng văn bản.