CSS3

T ng quan v CSS3ổ ề

M t s thu c tính m i trong CSS3:ộ ố ộ ớ
•
Border-radius
•
Border-image
•
Gradient
TỔNG QUAN VỀ CSS3
•
Là tiêu chu n m i nh t c a CSSẩ ớ ấ ủ
•
CSS3 đ c chia thành các module, các thành ượ
ph nầ
cũ đ c chia nh và b sung các thành ph n m iượ ỏ ổ ầ ớ
TỔNG QUAN VỀ CSS3

Một số module quan trọng trong CSS3:
•
Selectors
•
Box Model
•
Backgrounds and Borders
•
Text Effects
•
2D/3D Transformations

Chèn nhiều hình nền với vị trí chính xác:
THUỘC TÍNH MỚI TRONG CSS3

CSS3 Gradient:
•
Gradient là thành phần phổ biến trên trang web
•
Gradient thường bao gồm:
-2 điểm dừng màu (color stop)
-1 điểm chuyển màu
•
Trước khi có CSS3:
•
Với CSS3: sử dụng các thuộc tính định nghĩa gradient:
- Linear-gradient
- Radial-gradient
THUỘC TÍNH MỚI TRONG CSS3
•
Tạo gradient với CSS3
THUỘC TÍNH MỚI TRONG CSS3
•
Thêm góc độ và nhiều điểm dừng
•
Mục đích:
–Tăng thêm sự đa dạng của gradient
–Kiểm soát tốt hơn
THUỘC TÍNH MỚI TRONG CSS3
•
Lặp lại gradient:
•

•
Sử dụng link để thực hiện transition
•
transition-duration:quy định thời gian chuyển đổi
•
transition-timing-function:xác địnhtốc độ đường
cong của hiệu ứng chuyển tiếp.

Transition:
•
Một số giá trị củatransition-timing-function

CSS animation

Định nghĩa các thuộc tính của CSS animation:

CSS animation
•
Hỗ trợ tạo hình ảnh dạng động/ hoạt hình
•
Với cách này, hình ảnh động được tạo ra bằng cách: thay đổi
thuộc tính từ tập hợp style này sang thuộc tính của tập hợp
style khác
•
Các trình duyệt hỗ trợ:
•
Cú pháp:

CSS animation
•