Có rất nhiều định dạng đồ họa; nhưng sử dụng phổ biến nhất là JPEG (Join Photographic Experts Group), GIF (Graphics Interchange Format), PNG(Portable Network Graphics). Sự khác biệt giữa các định dạng đồ họa phụ thuộc vào các đặc điểm sau:
NexTGen Web Bài 07: Hiển thị đồ họa hoạt hình CSS3 Mục tiêu Định dạng hình ảnh trang web. Chèn ảnh, kích thước, padding cho ảnh. Hình ảnh động CSS3. Sử dung CSS3 thiết bị di động. © Aptech Ltd. HTML5/ Đồ họa hình ảnh động CSS3 Định dạng hình ảnh 1-4 Có nhiều định dạng đồ họa; sử dụng phổ biến JPEG (Join Photographic Experts Group), GIF (Graphics Interchange Format), PNG(Portable Network Graphics). Sự khác biệt định dạng đồ họa phụ thuộc vào đặc điểm sau: Color Depth (độ sâu màu) Nó xác định số lượng màu sắc riêng biệt tùy theo phần cứng phần mềm. Độ sâu màu xác định số bit cho pixel (bpp) gọi độ sâu bit. Độ sâu màu cao cho thấy phạm vi cao màu sắc sử dụng. Compression/file size (tỉ lệ nén file) Nén lưu trữ hình ảnh gốc số byte sử dụng thuật toán. Hình ảnh mở rộng trở lại kích thước ban đầu cách sử dụng thuật toán giải nén. © Aptech Ltd. HTML5/ Đồ họa hình ảnh động CSS3 Định dạng hình ảnh 2-4 Hai loại hình ảnh sử dụng thuật toán nén file sau: Lossless compression(nén liệu nhất) • • Kích thước tập tin giảm xuống, giữ hình ảnh không nén ban đầu. Tránh tích lũy giai đoạn nén lại chỉnh sửa hình ảnh. Lossy compression (nén nhiều liệu) • Hình ảnh dường hình ảnh gốc thực tế sao. • • Nén lossy đạt kích thước file nhỏ so sánh với nén lossless. Các thuật toán nén tổn hao cho phép biến đổi bao gồm chất lượng hình ảnh với kích thước tập tin. © Aptech Ltd. HTML5/ Đồ họa hình ảnh động CSS3 Định dạng hình ảnh 3-4 © Aptech Ltd. Animation (hoạt ảnh) Một số định dạng đồ họa bao gồm loạt ảnh chạy sau ảnh khác đưa tạo hình ảnh động. Hình cho thấy đồ họa hoạt hình. Transparency (trong suốt) Hiển thị hình ảnh trang web xuất trực tiếp với màu trang phổ biến trang web . Màu trang web hiển thị thông qua phần suốt hình ảnh. HTML5/ Đồ họa hình ảnh động CSS3 Định dạng hình ảnh 4-4 Trong hình ảnh suốt, màu sắc ẩn. Nếu màu sắc lựa chọn để làm suốt tảng hình ảnh đưa vào, sau hình ảnh hình dạng không xuất phảng phất trang. © Aptech Ltd. Hình cho thấy hình ảnh suốt. HTML5/ Đồ họa hình ảnh động CSS3 Định dạng hình ảnh cho web 1-2 Đối với trang web, sử dụng JPEG PNG đồ họa khuyến khích cung cấp khả tương thích tối đa với tất thiết bị truy cập vào trang web. Đối với hình ảnh, sử dụng định dạng đồ họa JPEG cho hình-ảnh vẽ sử dụng định dạng đồ họa PNG khuyến khích. JPEG © Aptech Ltd. Sử dụng nén có mát(lossy) có nghĩa chất lượng hình ảnh bị trình nén ảnh. Hầu hết biên tập viên JPEG cho phép người sử dụng để xác định số lượng chi tiết mà người dùng sẵn sàng để mất. Sự mát trông thấy, chất lượng giảm xuống; JPEG khoảng nửa kích thước PNG. PNG Sử dụng nén không mát (lossless), nghĩa chi tiết hình ảnh. Được thiết kế cho hình ảnh để truyền Internet, không dành cho in ảnh chất lượng chuyên nghiệp. Vì vậy, không hỗ trợ không gian màu RGB CMYK. Hỗ trợ màu sắc cao phần minh bạch sử dụng kênh alpha. HTML5/ Đồ họa hình ảnh động CSS3 Định dạng hình ảnh cho web 2-2 © Aptech Ltd. GIF Sử dụng nén lossless có nghĩa không giảm chất lượng hình ảnh nén. Hình ảnh không nén lưu trữ thông tin dạng tuyến tính. Mỗi dòng điểm ảnh đọc từ trái sang phải. Một tập tin GIF lưu trữ xen kẽ dòng hình ảnh theo thứ tự khác nhau. Đồ họa hoạt hình lưu trữ định dạng GIF. HTML5/ Đồ họa hình ảnh động CSS3 Chèn hình ảnh 1-6 © Aptech Ltd. HTML5/ Đồ họa hình ảnh động CSS3 Chèn hình ảnh 2-6 Bảng liệt kê thuộc tính thường sử dụng phần tử IMG. Thuộc tính Mô tả src Xác định đường dẫn hình ảnh height Chỉ chiều cao hình ảnh width Chỉ chiều rộng hình ảnh Ví dụ © Aptech Ltd. HTML5/ Đồ họa hình ảnh động CSS3 10 Làm việc với Transitions CSS3 3-5 Thiết lập hover cho phần tử . div:hover { width:200px; } Bảng sau liệt kê cac thuộc tính transition . Thuộc tính Mô tả transition Thuộc tính viết tắt thể cho thông số transition. transition-property Được sử dụng để tên thuộc tính CSS mà giá trị chuyển tiếp thiết lập cho nó. Ví dụ tên thuộc tính: background, color, height, width, outline, all transition-duration Được sử dụng để xác định thời gian trình chuyển đổi. Giá trị mặc định 0. transition-timing-function Được sử dụng để hướng bắt đầu trình biến đổi . Các giá trị cho thuộc tính ease. ease-out, ease-in, ease-in-out, linear. Mặc định ease transition-delay Được sử dụng để mô tả tốc độ trình chuyển đổi tính toán nào. Giá trị mặc định 0. © Aptech Ltd. HTML5/ Đồ họa hình ảnh động CSS3 26 Làm việc với Transitions CSS3 4-5 Ví dụ. /* Safari and Chrome */ -webkit-transition-property:width; -webkit-transition-duration:2s; -webkit-transition-timing-function:linear; -webkit-transition-delay:1s; div } { div:hover width:100px; { height:100px; width:500px; background:#000000; } transition-property:width; transition-duration:2s; © Aptech Ltd. HTML5/ Đồ họa hình ảnh động CSS3 transition-timing-function:linear; 27 Làm việc với Transitions CSS3 5-5 © Aptech Ltd. Kết HTML5/ Đồ họa hình ảnh động CSS3 28 CSS3 Animation (Hoạt ảnh) © Aptech Ltd. Animations CSS3 tạo chuyển đổi hoạt họa cấu hình style CSS cho style CSS khác. HTML5/ Đồ họa hình ảnh động CSS3 29 Cấu hình Animation 1-6 Một chuỗi hình ảnh động CSS tạo kiểu dáng phần tử với thuộc tính animation. Thuộc tính sử dụng để cấu hình thời gian, trình tự hình ảnh động. @keyframes nguyên tắc diện hoạt ảnh. Keyframe sử dụng để mô tả việc sinh phần tử dãy hoạt hình. Bảng sau liệt kê quy tắc @keyframes thuộc tính animation Thuộc tính . Mô tả @keyframes Được sử dụng để xác định hình ảnh động . animation Là thuộc tính ngắn gọn đại diện cho tất thuộc tính hình ảnh động, ngoại trừ thuộc tính animation-play-state . © Aptech Ltd. animation-name Được sử dụng để xác định tên @keyframes animation . animation-duration Được sử dụng để xác định thời gian chu kỳ hoạt hình vài giây mili giây. Giá trị mặc định 0. HTML5/ Đồ họa hình ảnh động CSS3 30 Cấu hình Animation 2-6 Thuộc tính Mô tả animation-delay Được sử dụng để xác định giá trị bắt đầu hình ảnh động. Giá trị mặc định 0. animation-iteration-count Được sử dụng để xác định số lần hình ảnh động phát. Giá trị mặc định 1. animation-direction animation-play-state Được sử dụng để xác định có hay không hình ảnh động nên phát ngược lại chu kỳ thay thế. Giá trị mặc định 'normal'. Được sử dụng để xác định tình trạng hình ảnh động, xem liệu có chạy hay dừng lại. Giá trị mặc định running'. Cú pháp: @keyframes myfirst { from {background: red;} to {background: yellow;} © Aptech Ltd. HTML5/ Đồ họa hình ảnh động CSS3 31 Cấu hình Animation 3-6 } @-moz-keyframes myfirst /* Firefox */ { from {background: red;} to {background: yellow;} } @-webkit-keyframes myfirst /* Safari and Chrome */ Mã HTML { from {background: red;} to {background: yellow;} } © Aptech Ltd. HTML5/ Đồ họa hình ảnh động CSS3 32 Cấu hình Animation 4-6 div /* Safari and Chrome: */ {-webkit-border-radius:100px; width:200px; -webkit-animation-name:myfirst; height:200px; -webkit-animation-duration:4s; background:red; -webkit-animation-timing-function:linear; position:relative; -webkit-animation-delay:1s; border-radius:100px; -webkit-animation-iteration-count:infinite; animation-name:myfirst; -webkit-animation-direction:alternate; animation-duration:4s; -webkit-animation-play-state:running; animation-timing-function:linear; } animation-delay:1s; @keyframes myfirst animation-iteration-count:infinite; { animation-direction:alternate; 0% {background:red; left:0px; top:0px;} © Aptech Ltd. HTML5/ Đồ họa hình ảnh động CSS3 33 Cấu hình Animation 5-6 50% {background:blue; left:300px; top:300px;} 75% {background:green; left:0px; top:300px;} 100% {background:red; left:0px; top:0px;} } @-webkit-keyframes myfirst /* Safari and Chrome */ { 0% {background:red; left:0px; top:0px;} 25% {background:yellow; left:200px; top:0px;} 50% {background:blue; left:200px; top:200px;} 75% {background:green; left:0px; top:200px;} 100% {background:red; left:0px; top:0px;} } Note: Animation © Aptech Ltd. HTML5/ Đồ họa hình ảnh động CSS3 34 Cấu hình Animation 6-6 © Aptech Ltd. Kết quả. HTML5/ Đồ họa hình ảnh động CSS3 35 Sử dụng CSS3 thiết bị Mobile 1-2 Đoạn code cho thấy việc sử dụng biểu thức điều kiện cho việc hiển thị phần tử link mà hình thiết bị mobile có độ rộng tối đa 480 pixels. © Aptech Ltd. Người dùng phần tử link khác cho phương tiện screen với độ rộng hình tối thiểu 481 pixels. Nói cách khác, style sheet cho phần tử sử dụng cho hình máy tính chuẩn. HTML5/ Đồ họa hình ảnh động CSS3 36 Sử dụng CSS3 thiết bị Mobile 2-2 Phần lớn website mobile tạo có thêm m trước tên miền của site, ví dụ m.aptech-education.com. (còn gọi subdomain) Để phát thiết bị di động, website sử dụng JavaScript máy client, ngôn ngữ kịch server, tập tin Wireless Universal Resource (WURFL) server. © Aptech Ltd. HTML5/ Đồ họa hình ảnh động CSS3 37 Tối ưu khả tương thích với Browser 1-3 © Aptech Ltd. HTML5/ Đồ họa hình ảnh động CSS3 38 Tối ưu khả tương thích với Browser 2-3 © Aptech Ltd. Một số trình rendering cung cấp trình duyệt khác sau: HTML5/ Đồ họa hình ảnh động CSS3 39 Tối ưu khả tương thích với Browser 3-3 © Aptech Ltd. Thực điều tốt cho tối ưu khả tương thích với Browser sau: HTML5/ Đồ họa hình ảnh động CSS3 40 Tổng kết Có nhiều định dạng đồ họa có sẵn; thường sử dụng chuyên (JPEG), (GIF), (PNG). Các phần tử IMG phần tử rỗng, cho phép người dùng để chèn hình ảnh. Thuộc tính Padding CSS sử dụng để xác định không gian viền phần tử nội dung nó. Một thumbnail hình ảnh nhỏ, phần hình ảnh lớn Trong năm 2007, Apple giới thiệu trình chuyển đổi CSS, mà sau trở thành tính độc quyền Safari gọi CSS Animation © Aptech Ltd. Một chuỗi hình ảnh động CSS tạo kiểu dáng phần tử với thuộc tính HTML5/ Đồ họa hình ảnh động CSS3 41 [...]... Aptech Ltd HTML5/ Đồ họa và hình ảnh động trong CSS3 transition-timing-function:linear; 27 Làm việc với Transitions CSS3 5-5 © Aptech Ltd Kết quả HTML5/ Đồ họa và hình ảnh động trong CSS3 28 CSS3 Animation (Hoạt ảnh) © Aptech Ltd Animations CSS3 có thể tạo chuyển đổi hoạt họa của cấu hình style CSS này cho style CSS khác HTML5/ Đồ họa và hình ảnh động trong CSS3 29 Cấu hình Animation 1-6... Thumbnail } /* // mouse over */ © Aptech Ltd HTML5/ Đồ họa và hình ảnh động trong CSS3 /* clearing floats */ 22 Hình ảnh thu nhỏ(Thumbnail) 4-4 © Aptech Ltd Kết quả khi hover HTML5/ Đồ họa và hình ảnh động trong CSS3 23 Làm việc với Transitions CSS3 1-5 Trong năm 2 007, Apple giới thiệu quá trình chuyển đổi CSS, mà sau này đã trở thành... Note: Animation © Aptech Ltd HTML5/ Đồ họa và hình ảnh động trong CSS3 34 Cấu hình Animation 6-6 © Aptech Ltd Kết quả HTML5/ Đồ họa và hình ảnh động trong CSS3 35 Sử dụng CSS3 trên thiết bị Mobile 1-2 Đoạn code dưới đây cho thấy việc sử dụng biểu thức điều kiện cho việc hiển thị một phần tử link mà ở đó màn hình thiết bị mobile có độ rộng tối đa 480 pixels . Bài 07: Hiển thị đồ họa và hoạt hình trong CSS3 NexTGen Web Aptech Ltd. Mục. t Chèn hình ảnh 1-6 Aptech Ltd. uv Chèn hình ảnh 2-6 m9,F&/(0(.(q)h 6- 7(W+Q - IMG# Thuộc tính Mô tả src Xác. ua Kích thước và Padding ảnh trong CSS 2-2 Thuộc tính Mô tả Giá trị max-height Thiết lập chiều cao tối đa • none • length • % • inherit max-width Thiết lập chiều cao tối đa •