CSS3 Các nội dung trình bày I. Tổng quan về CSS3 II. Làm việc với các thuộc tính mới trong CSS3 1.Border-radius 2. Border-image 3. Gradient III. Transform, transition, animation IV. Làm việc với font web IV.Chèn nhiều hình nền với CSS3 I.Tổng quan về CSS3 • CSS3 là tiêu chuẩn mới nhất của CSS • Nó có tính kế thừa và 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 trong CSS3 - Selectors - Box model - Backgrounds and Border - Text Effects - 2D/3D Transformations - Animations - Multiple Column Layout - User Interface Một số thành phần CSS3 mới - CSS animation (CSS hoạt hình) - CSS transition (CSS chuyển đổi) - CSS 2D/3D trnsformation: transform - CSS3 background, border, RGAa color, gradient, drop shadows, góc bo tròn, …: border-radius,background- image, border-image - Web font: @font-face II. NHỮNG THUỘC TÍNH MỚI TRONG CSS3 - Một số thuộc tính mới của CSS3 như là: border- radius, border-image, Gradient, box-shadow, text- shadow, column, media-query, transition, - Nhưng ta chỉ làm việc với 3 thuộc tính mới trong CSS3 + Border-radius + Border-image + Gradient II. NHỮNG THUỘC TÍNH MỚI TRONG CSS3 1.Border-radius - Dùng để định dạng các dạng bo góc của border. - VD: div { border: 2px solid #a1a1a1; padding: 10px 40px; width: 100px; border-radius: 20px; } Kết quả: II. NHỮNG THUỘC TÍNH MỚI TRONG CSS3 2.Border-image. -Tạo viền bằng cách lặp hoặc kéo dãn hình ảnh chọn làm đường viền -VD: div { border: 15px solid transparent; width: 150px; padding: 10px 20px; border-image: url(image01.png) 30 30 round; } Kết quả: • Cú pháp: -border-image: source slice width outset repeat; -slide: phần bù bên trong của hình border -outset: số lượng diện tích mà hình nền border mở rộng • Không nên sử dụng kết hợp thuộc tính border- image và thuộc tính border-radius II. NHỮNG THUỘC TÍNH MỚI TRONG CSS3 3.Gradients -Gradient là thành phần phổ biến trên trang web -Gradient trong CSS giống với gradient được tạo ra trong các chương trình đồ họa -Gradient thường bao gồm: +2 điểm dừng màu (color stop) + 1 điểm chuyển màu -Có thể tạo được nhiều điểm dừng màu và điểm chuyển màu để gradient phong phú hơn [...]... Font Web • Kiểu định dạng font chữ: Chèn nhiều 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 CSS3 body{ font-family: "Trebuchet MS", Tahoma, Arial, sans-serif; font-size:100%; background-color:#B3BBCA; backgroundimage:url(images/bg1.png),url(images/bg2.png),url(images/bg3.png); } Chèn nhiều hình nền với CSS3 • Chèn nhiều hình nền với vị trí chính xác: • Sử dụng...Với CSS3: sử dụng các thuộc tính định nghĩa gradient: - Linear-gradient: dạng đường thẳng VD: div{ height: 150px; width:300px; background: linear-gradient(black, yellow); } Kết quả: -Ridial-gradient: . web IV.Chèn nhiều hình nền với CSS3 I.Tổng quan về CSS3 • CSS3 là tiêu chuẩn mới nhất của CSS • Nó có tính kế thừa và 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. CSS3 Các nội dung trình bày I. Tổng quan về CSS3 II. Làm việc với các thuộc tính mới trong CSS3 1.Border-radius 2. Border-image 3. Gradient III trọng trong CSS3 - Selectors - Box model - Backgrounds and Border - Text Effects - 2D/3D Transformations - Animations - Multiple Column Layout - User Interface Một số thành phần CSS3 mới - CSS