BÀI 5 Làm việc với CSS3 - Giáo trình FPT
4 likes3,314 views
Tài liệu hướng dẫn làm việc với CSS3, bao gồm các thuộc tính mới như border-radius, border-image, gradient, transform, transition và animation. Nó cung cấp thông tin về cách chèn các thành phần video, audio, sử dụng canvas, và cách áp dụng kiểu dáng cho văn bản, hình nền trong CSS3. Ngoài ra, tài liệu cũng đề cập đến việc sử dụng @font-face để nhúng font chữ vào trang web.
BÀI 5 Làm việc với CSS3 - Giáo trình FPT
- 1. BÀI 5 LÀM VIỆC VỚI CSS3
- 2. NHẮC LẠI BÀI TRƯỚC Chèn các thành phần video, audio vào trang Điều khiển video với Javascript Làm quen với thành phần canvas Sử dụng thành phần cavas để thực hiện: Vẽ hình và đường Áp dụng màu và cọ fradient Thực hiện tạo hình động Chèn các thành phần video, audio vào trang Điều khiển video với Javascript Làm quen với thành phần canvas Sử dụng thành phần cavas để thực hiện: Vẽ hình và đường Áp dụng màu và cọ fradient Thực hiện tạo hình động Slide 5 - Làm việc với CSS3 2
- 3. MỤC TIÊU BÀI HỌC Tổng quan về CSS3 Làm việc với các thuộc tính mới trong CSS3: Border-radius Border-image Gradient Transform, transition, animation Làm việc với font web Chèn nhiều hình nền với CSS3 Tổng quan về CSS3 Làm việc với các thuộc tính mới trong CSS3: Border-radius Border-image Gradient Transform, transition, animation Làm việc với font web Chèn nhiều hình nền với CSS3 Slide 5 - Làm việc với CSS3 3
- 4. TỔNG QUAN VỀ CSS3
- 5. TỔNG QUAN VỀ CSS3 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 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 Slide 5 - Làm việc với CSS3 5
- 6. 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 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 Slide 5 - Làm việc với CSS3 6
- 7. NHỮNG THUỘC TÍNH MỚI TRONG CSS3
- 8. BORDER-RADIUS Border-radius: Border-radius: tạo ra 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ợ .specialsale { width: 400px; background-color:#D67E5C; border: 2px #773636 solid; -webkit-border-radius: 24px; -moz-border-radius: 24px; border-radius: 24px; } Border-radius: Border-radius: tạo ra 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ợ Slide 5 - Làm việc với CSS3 8 .specialsale { width: 400px; background-color:#D67E5C; border: 2px #773636 solid; -webkit-border-radius: 24px; -moz-border-radius: 24px; border-radius: 24px; }
- 9. BORDER-RADIUS Cách viết đầy đủ của thuộc tính Border- radius: border-radius: 2em 1em 4em / 0.5em 3em; Cách viết đầy đủ của thuộc tính Border- radius: Slide 5 - Làm việc với CSS3 9 border-top-left-radius: 2em 0.5em; border-top-right-radius: 1em 3em; border-bottom-right-radius: 4em 0.5em; border-bottom-left-radius: 1em 3em;
- 10. BORDER-IMAGE Border-image: đặt border dạng hình ảnh Cú pháp: • Slice: 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 border: 20px #773636 solid; -webkit-border-image: url("images/border-bg.png") 33% repeat; -moz-border-image: url("images/border-bg.png") 33% repeat; border-image: url("images/border-bg.png“) 33% repeat; Border-image: đặt border dạng hình ảnh Cú pháp: • Slice: 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 Slide 5 - Làm việc với CSS3 10 border-image: source slice width outset repeat;
- 11. HÌNH NỀN VỚI CSS3 Thực hiện chèn nhiều hình ảnh làm nền cho web Slide 5 - Làm việc với CSS3 11
- 12. HÌNH NỀN VỚI CSS3 Thực hiện: body { font-family: "Trebuchet MS", Tahoma, Arial,sans-serif; font-size:100%; background-color: #B3BBCA; background-image: url(images/bg1.png),url(images/bg2.png), url(images/bg3.png); } Slide 5 - Làm việc với CSS3 12 body { font-family: "Trebuchet MS", Tahoma, Arial,sans-serif; font-size:100%; background-color: #B3BBCA; background-image: url(images/bg1.png),url(images/bg2.png), url(images/bg3.png); }
- 13. HÌNH NỀN VỚI CSS3 Chèn nhiều hình nền với vị trí chính xác: .specialsale { width: 550px; border: 2px #773636 solid; background-image: url(images/blueberry.jpg),url(images/orange.png);background-repeat: no-repeat; background-position: top right, 0 -45px; } Slide 5 - Làm việc với CSS3 13 .specialsale { width: 550px; border: 2px #773636 solid; background-image: url(images/blueberry.jpg),url(images/orange.png);background-repeat: no-repeat; background-position: top right, 0 -45px; }
- 14. 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 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 Slide 5 - Làm việc với CSS3 14 Vẽ gradient trong các chương trình đồ họa Xuất thành dạng hình ảnh sử dụng trên web Background-image
- 15. THUỘC TÍNH MỚI TRONG CSS3 Tạo gradient với CSS3 .gradient { width: 450px; border: #000 4px solid; background-color:#fff; background-image: -moz-linear-gradient(white, black); background-image: -webkit-gradient (linear, 0 0, 0 100%, from (white), to (black)); } Slide 5 - Làm việc với CSS3 15 .gradient { width: 450px; border: #000 4px solid; background-color:#fff; background-image: -moz-linear-gradient(white, black); background-image: -webkit-gradient (linear, 0 0, 0 100%, from (white), to (black)); }
- 16. 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 background-image: -moz-linear-gradient(45deg, white, green, black); Slide 5 - Làm việc với CSS3 16 background-image: -moz-radial- gradient(60% 60%, circle closest- corner, white, black);
- 17. THUỘC TÍNH MỚI TRONG CSS3 Lặp lại gradient: Sử dụng hệ màu RGBA để định nghĩa gradient: background-image: -moz-repeating-linear-gradient(left, white 80%, black, white); Lặp lại gradient: Sử dụng hệ màu RGBA để định nghĩa gradient: Slide 5 - Làm việc với CSS3 17 .gradient h1 { margin:0; font-weight:bold; font-size:48px; color:#C33; text-align:center; background-image: -moz-linear-gradient(rgba(174, 185, 196, 0.9), rgba(110,124, 140, 0.9));}
- 18. TRANSFORM – TRANSITION - ANIMATION
- 19. TRANSFORM – TRANSITION - ANIMATION Transform: Cho phép xoay, kéo dãn, kéo nghiêng thành phần trên trang Slide 5 - Làm việc với CSS3 19 .transform { margin-top:2em; -webkit-transform: rotate (45deg); -moz-transform: rotate(-45deg); transform: rotate(-45deg)}
- 20. TRANSFORM – TRANSITION - ANIMATION 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. a.transition { padding: 5px 0px; background: #C9C; -webkit-transition-property: background; -webkit-transition-duration: 1s; -webkit-transition-timing-function: ease-out; } 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. Slide 5 - Làm việc với CSS3 20 a.transition { padding: 5px 0px; background: #C9C; -webkit-transition-property: background; -webkit-transition-duration: 1s; -webkit-transition-timing-function: ease-out; }
- 21. TRANSFORM – TRANSITION - ANIMATION Một số giá trị của transition-timing-function Giá trị Giải nghĩa linear Chỉ định một hiệu ứng chuyển tiếp với cùng một tốc độ từ đầu đến cuối (tương đương với kiểu cubic- bezier(0,0,1,1)) Ease Chỉ định một hiệu ứng chuyển tiếp với một sự khởi đầu chậm, sau đó nhanh chóng, sau đó kết thúc chậm Slide 5 - Làm việc với CSS3 21 Chỉ định một hiệu ứng chuyển tiếp với một sự khởi đầu chậm, sau đó nhanh chóng, sau đó kết thúc chậm ease-in Chỉ định một hiệu ứng chuyển tiếp với một khởi đầu chậm ease-out Chỉ định một hiệu ứng chuyển tiếp với một kết thúc chậm (tương đương với cubic-bezier (0,0,0.58,1)) ease-in-out Chỉ định một hiệu ứng chuyển tiếp với một sự khởi đầu chậm và kết thúc cubic-bezier(n,n,n,n) Xác định giá trị của riêng bạn trong các chức năng khối bezier. Các giá trị có thể là giá trị số 0-1
- 22. TRANSFORM – TRANSITION - ANIMATION CSS animation #spin { margin-top:2em; -webkit-animation-name: imageRotate; -webkit-animation-duration: .5s; -webkit-animation-iteration-count: 2; -webkit-animation-timing-function: ease-in-out; } @-webkit-keyframes imageRotate { from { -webkit-transform:rotate(0deg); } to { -webkit-transform:rotate(360deg); } } Slide 5 - Làm việc với CSS3 22 #spin { margin-top:2em; -webkit-animation-name: imageRotate; -webkit-animation-duration: .5s; -webkit-animation-iteration-count: 2; -webkit-animation-timing-function: ease-in-out; } @-webkit-keyframes imageRotate { from { -webkit-transform:rotate(0deg); } to { -webkit-transform:rotate(360deg); } }
- 23. TRANSFORM – TRANSITION - ANIMATION Định nghĩa các thuộc tính của CSS animation: Thuộc tính Định nghĩa animation-name Xác định tên cho các keyframe động animation-duration Xác định thời gian cần thiết để hoàn thành chu kỳ của hình động (giây/ mili giây) animation-iteration-count xác định bao nhiêu lần một hình ảnh động nên được chơi. Slide 5 - Làm việc với CSS3 23 animation-iteration-count xác định bao nhiêu lần một hình ảnh động nên được chơi. animation-timing-function xác định tốc độ đường cong của hoạt hình. Các đường cong tốc độ xác định Thời gian (TIME) hoạt hình sử dụng để thay đổi từ một tập hợp các phong cách CSS khác.
- 24. @keyframe 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: 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: Slide 5 - Làm việc với CSS3 24 @keyframes animationname {keyframes-selector {css-styles;}} Giá trị Mô tả Animationname Tên của hình động keyframes-selector Tỷ lệ phần trăm thời gian chuyển động css-styles Một hoặc nhiều thuộc tính CSS quy định
- 25. @keyframe Ví dụ: @keyframes mymove { 0% {top:0px;} 25% {top:200px;} 50% {top:100px;} 75% {top:200px;} 100% {top:0px;} } @-moz-keyframes mymove /* Firefox */ {0% {top:0px;} 25% {top:200px;} 50% {top:100px;} 75% {top:200px;} 100% {top:0px;} } Slide 5 - Làm việc với CSS3 25 @-webkit-keyframes mymove /* Safari and Chrome */ {0% {top:0px;} 25% {top:200px;} 50% {top:100px;} 75% {top:200px;} 100% {top:0px;} } @-o-keyframes mymove /* Opera */ {0% {top:0px;} 25% {top:200px;} 50% {top:100px;} 75% {top:200px;} 100% {top:0px;} } Sử dụng file exam_keyframe.html để kiểm tra trên trình duyệtSử dụng file exam_keyframe.html để kiểm tra trên trình duyệt
- 26. @keyframe Mở rộng: Thay đổi nhiều style trong một hình động Thay đổi nhiều keyframe selectors với nhiều thuộc tính CSS Sử dụng file exam_morestyle.html để kiểm tra trên trình duyệt Mở rộng: Thay đổi nhiều style trong một hình động Thay đổi nhiều keyframe selectors với nhiều thuộc tính CSS Slide 5 - Làm việc với CSS3 26 Sử dụng file exam_morekeyframe.html để kiểm tra trên trình duyệt
- 27. FONT WEB
- 28. FONT WEB @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-face { font-family: Sigmar; src: url('SigmarOne.otf'); } h2 { font-size:1.125em; letter-spacing:0.2em; font-weight:lighter; text-transform:uppercase; font-family: Sigmar, Georgia, Palatino, Times New Roman, serif; } @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 Slide 5 - Làm việc với CSS3 28 @font-face { font-family: Sigmar; src: url('SigmarOne.otf'); } h2 { font-size:1.125em; letter-spacing:0.2em; font-weight:lighter; text-transform:uppercase; font-family: Sigmar, Georgia, Palatino, Times New Roman, serif; }
- 29. FONT WEB Kiểu định dạng font chữ: Kiểu định dạng Giải thích Trình duyệt, HĐH hỗ trợ Open Type (OTF) Định dạng phổ biến Hỗ trợ glyph IE9, FF3.5, Chrome4, Safari 3.1, Opera 10, Android2.2TrueType (TTF) nền tảng tương thích và cung cấp các điều khiển tinh vi sắp chữ, Slide 5 - Làm việc với CSS3 29 nền tảng tương thích và cung cấp các điều khiển tinh vi sắp chữ, SVG định dạng vector dựa trên hiện nay chỉ hỗ trợ iOS của Apple iPod. FF3.4, chrome0.3, safari 3.1, opera9, iOS1 Web Open Font Format ( WOFF) bao gồm nhiều khả năng nén các tập tin font chữ và tối ưu hóa IE9, FF3.6, chrome 5 Embedded OpenType (EOT) một biến thể trên OpenType tạo ra bởi Microsoft và phần lớn được hỗ trợ bởi Internet Explorer. IE5
- 30. FONT WEB Sử dụng dịch vụ web để tạo nhiều font @font-face { font-family: 'SigmarRegular'; src: url('fonts/sigmarone- webfont.eot'); src: url('fonts/sigmarone- webfont.eot? #iefix') format('embedded- opentype'), url('fonts/sigmarone-webfont.woff') format('woff'), url('fonts/sigmarone-webfont.ttf') format('truetype'), url('fonts/sigmarone- webfont.svg#SigmarRegular') format('svg'); font-weight: normal; font-style: normal; } Slide 5 - Làm việc với CSS3 30 Sử dụng site http://www.fontsquirrel.com/ để tạo file .css có chứa font được nhúng @font-face { font-family: 'SigmarRegular'; src: url('fonts/sigmarone- webfont.eot'); src: url('fonts/sigmarone- webfont.eot? #iefix') format('embedded- opentype'), url('fonts/sigmarone-webfont.woff') format('woff'), url('fonts/sigmarone-webfont.ttf') format('truetype'), url('fonts/sigmarone- webfont.svg#SigmarRegular') format('svg'); font-weight: normal; font-style: normal; }
- 31. TỔNG KẾT Không nên sử dụng kết hợp thuộc tính border-image và thuộc tính border-radius Gradient trong CSS giống với gradient được tạo ra trong các chương trình đồ họa: có điểm dừng màu và đ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 Sử dụng giá trị vị trí: top, left, right, bottom để điều chỉnh chính xác nhiều hình nền trong CSS Không nên sử dụng kết hợp thuộc tính border-image và thuộc tính border-radius Gradient trong CSS giống với gradient được tạo ra trong các chương trình đồ họa: có điểm dừng màu và đ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 Sử dụng giá trị vị trí: top, left, right, bottom để điều chỉnh chính xác nhiều hình nền trong CSS Slide 5 - Làm việc với CSS3 31