Thứ Năm, 1 tháng 12, 2016

Css3: tạo hiệu ứng shadow

Then use the post body as the schema.org description, for good G+/FB snippeting. -->
CSS3 có thể thêm shadow vào một đoạn text, border của thẻ HTML
- text-shadow dành cho đoạn text
- box-shadow dành cho thẻ HTML
: #màu        Y      X      bóng-nhòe      khoảng cách(bóng nhòe với đối tượng)          |none|initial|inherit;
Cú pháp tạo hiệu ững cho text:
text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit;
Trong đó:
h-shadow : vị trí bóng ngang so với chữ, số âm sẽ đẩy lên trên và số dương sẽ đẩy xuống dưới
v-shadow : vị trí bóng dọc so với chứ, số âm sẽ đẩy lui phía sausố dương sẽ đẩy tới phía trước blur-radius : độ nhòe của chữ bóng, tính bằng pixel
color : màu sắc của bóng, chấp nhận các định dạng màu sắc trong CSS3.
box-shadow: tác dụng đối với đường viền (lề)
Cú pháp tạo hiệu ứng cho đường viền:
box-shadow: h-shadow v-shadow blur spread color |inset|initial|inherit;
Trong đó:
h-shadow : vị trí bóng ngang so với chữ, số âm sẽ đẩy lên trên và số dương sẽ đẩy xuống dưới
v-shadow : vị trí bóng dọc so với chứ, số âm sẽ đẩy lui phía sau và số dương sẽ đẩy tới phía trước blur-radius : độ nhòe của chữ bóng, tính bằng pixel spread: kích thước của bóng tối.
color : màu sắc của bóng, chấp nhận các định dạng màu sắc trong CSS3.
inset: thay đổi bóng từ bên ngoài vào trong thay vì từ trong ra ngoài
initial: thiết lập giá trị mặc định
inherit: kế thừa giá trị từ thẻ HTML cha
Nguồn: freetuts.net

Không có nhận xét nào:

Đăng nhận xét