Trong bài viết này, Ứng dụng free sẽ cùng các bạn tìm hiểu về Làm Việc Với CSS3

Khái Niệm:

CSS3 là gì?

• Là tiêu chuẩn mới nhất của css
• Hoàn toàn tương thích với các phiên bản trước
• 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

Một số Module quan trọng CSS3:

• Selectors
• Box Model
• Backgrounds and Border
• Text Effects
• 2D/3D Transformations
• Animations
• Multiple Column Layout
• User Interface

Làm việc với các thuộc tính mới trong CSS3

Border-radius:

• Border-radius: Tạo ra bốn góc bo tròn cho đường viền
• -webkit-border-radius: Giúp IE9+ hỗ trợ
• -moz-border-radius: Giúp Firefox hỗ trợ

Border-image:

• Cú pháp:

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
• Tạo Gradient với CSS3

• Thêm góc độ và nhiều điểm dừng: Nhằm tăng thêm sự đa dạng của gradient và kiểm soát tốt hơn

• Lặp lại gradient:

• Sử dụng hệ màu RGBA để định nghĩa gradient:

Làm việc với FontWeb

@font-face:

• Cho phép nhúng font chữ vào trang bằng cách khai báo font đó và đặt font chữ trên web sever
• Là giải pháp khắc phục việc phải cài đặt font chữ trên máy tính

• Kiểu định dạng font chữ:

• Sử dụng dịch vụ web để tạo nhiều font

Transform-Transition-Animation

Transform

• Cho phép xoay, kéo dãn, kéo nghiêng thành phần trên trang 

Transition

• Sử dụng link để thực hiện Transition
• Transition-duration: Quy định thời gian chuyển đổi

• Transition-timing-function:
  • Xác định tốc độ đường cong của hiệu ứng chuyển tiếp
  • Một số giá trị của Transition-timing-function:

CSS Animation

• Định nghĩa các thuộc tính của CSS animation

Hình nền với CSS3

• Thực hiện chèn 3 hình ảnh làm nên cho web

• Chèn nhiều hình nên với vị trí chính xác: 

KẾT LUẬN: Nếu như bạn chưa hiểu nội dung bài viết hoặc đang khúc mắc khi thao tác thì hãy bình luận phía dưới bài viết để Ứng dụng free   giải đáp thắc mắc nhé! Cảm ơn các bạn đã theo dõi bài viết.

30/09/2022 Blog Tin Học