Đang tải... (xem toàn văn)
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 ngha 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