Lý thuyết lập trình ngôn ngữ html5 và css3 phần 5.

Lý thuyết lập trình ngôn ngữ html5 và css3 từ cơ bản đến nâng cao phần 5.

BËI 5 LËM VIỆC VỚI CSS3 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 Slide 5 - Lˆm việc với CSS3 2 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 Slide 5 - Lˆm việc với CSS3 3 TỔNG QUAN VỀ CSS3 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 Slide 5 - Lˆm việc với CSS3 5 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 Slide 5 - Lˆm việc với CSS3 6 NHỮNG THUỘC TêNH MỚI TRONG CSS3 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ợ 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; } THUỘC TêNH MỚI TRONG CSS3 !   Border-image: !  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 9 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: source slice width outset repeat; 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 Slide 5 - Lˆm việc với CSS3 10 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