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 • Animations • Multiple Column Layout • User Interface THUỘC TÍNH MỚI TRONG CSS3  Border-radius: • Border-radius: tạo ra góc bo tròn cho đường viền • -webkit-border-radius: giúp hỗ trợ IE9 • -moz-border-radius: giúp hỗ trợ Firefox Cách viết đầy đủ của thuộc tính Border- radius: THUỘC TÍNH MỚI TRONG CSS3  Border-image:đặt border dạng hình ảnh • Cú pháp: THUỘC TÍNH MỚI TRONG CSS3 • Thực hiện chèn nhiều hình ảnh làm nền cho web THUỘC TÍNH MỚI TRONG CSS3 • 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 [...]... chữ FONT WEB o Sử dụng dịch vụ web để tạo nhiều font CSS3 MEDIA QUERIES • Đối với tất cả trình duyệt/thiết bị giao tiếp với máy chủ lưu trữ website và tự được định dạng với user agent String • CSS3 media queries    Hình thức nhận biết thiết bị Kiểm tra khả năng của người dùng truy cập trang web Nhận biết được: chiều cao, chiều rộng của trình duyệt, thiết bị, thiết bị định hướng, độ phân giải CSS3 MEDIA... các cột • Column-rule: là thuộc tính viết tắt, cho phép thiết lập tất cả thuộc tính: chiều rộng, style, màu sắc giữa các cột CSS3 LAYOUT • Cách thiết lập: CSS3 LAYOUT •   Thiết lập layout dạng hộp Flexible: Là dạng bố cục mới trong CSS3 Đại diện cho 4 dạng layout được hỗ trợ trong CSS2.1 CSS3 USER INTERFACE • Cung cấp một số tính năng về phía người dùng:    Thay đổi kích thước thành phần trên... thuộc tính Thay đổi kích thước hộp Phác thảo quy định    Resize Box-sizing Outline-offset CSS3 USER INTERFACE • CSS3 resize:  Quy định một thành phần có thể hay không thể thay đổi kích thước bởi người dùng CSS3 USER INTERFACE • CSS3 box-sizing:  Cho xác định yếu tố phù hợp với một khu vực CSS3 USER INTERFACE • CSS3 outline-offset:   Quy định một đường biên bao phía bên ngoài đường biên mặc định Hai... cao, chiều rộng của trình duyệt, thiết bị, thiết bị định hướng, độ phân giải CSS3 MEDIA QUERIES • Sử dụng CSS3 MEDIA QUERIES để cung cấp layout phù hợp với layout mobile CSS3 MEDIA QUERIES • Quy định chiều rộng của trang được hiển thị trên thiết bị CSS3 LAYOUT • Layout nhiều cột sử dụng CSS3 • CSS3 cung cấp các thuộc tính để thuận tiện cho việc thiết kế layout dạng nhiều cột: • Column-count: quy định... style khác Các trình duyệt hỗ trợ: • Cú pháp:  CSS animation • Ví dụ:  CSS animation Mở rộng: • Thay đổinhiều styletrong một hình động • Thay đổi nhiềukeyframe selectorsvới nhiều thuộc tính CSS FONT WEB o @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 server • Là giải pháp khắc phục việc phải cài đặt font chữ trên máy tính FONT WEB o Kiểu định...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 hệ màu RGBA để định nghĩa gradient:  Transform: • Cho phép xoay, kéo dãn, kéo nghiêng thành phần trên trang THUỘC TÍNH MỚI TRONG CSS3 Transition: • Sử dụng link để thực hiện Transition... 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 địnhtốc độđường • cong của hiệu ứng chuyển tiếp THUỘC TÍNH MỚI TRONG CSS3 • Lặp lại gradient: • Sử dụng hệ màu RGBA để định nghĩa gradient: 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 . 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. 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ử. Border- radius: THUỘC TÍNH MỚI TRONG CSS3  Border-image:đặt border dạng hình ảnh • Cú pháp: THUỘC TÍNH MỚI TRONG CSS3 • Thực hiện chèn nhiều hình ảnh làm nền cho web THUỘC TÍNH MỚI TRONG CSS3 • Chèn nhiều hình