Giáo trình HTML5 - Bài 5: Làm việc với CSS3

 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: 
 .specialsale { 
 width: 400px; 
 background-color:#D67E5C; 
 border: 2px #773636 solid; 
 -webkit-border-radius: 24px; 
 -moz-border-radius: 24px; 
 border-radius: 24px; 
 } 
   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 
 THUỘC TÍNH MỚI TRONG CSS3 
   Border-image: 
 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; 
   Cú pháp: 
 border-image: source slice width outset 
 repeat; 
 •  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 
 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ẽ	gradient	trong	các	 Background-image Xuất	thành	dạng	hình	ảnh	
 chương	trình	đồ	họa	 sử	dụng	trên	web	
   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 
 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 11 
 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); 
 background-image: -moz-radial-
 gradient(60% 60%, circle closest-
 corner, white, black); 
Slide 5 - Làm việc với CSS3 12 
 THUỘC TÍNH MỚI TRONG CSS3 
   Lặp lại gradient: 
 background-image: -moz-repeating-linear-gradient(left, white 80%, black, 
 white); 
   Sử dụng hệ màu RGBA để định nghĩa gradient: 
 .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));} 
Slide 5 - Làm việc với CSS3 13 
TRANSFORM – TRANSITION - ANIMATION 
 TRANSFORM – TRANSITION - ANIMATION 
   Transform: 
   Cho phép xoay, kéo dãn, kéo nghiêng thành phần trên 
 trang 
 .transform { margin-top:2em; -webkit-transform: rotate (45deg); -moz-transform: 
 rotate(-45deg); transform: rotate(-45deg)} 
Slide 5 - Làm việc với CSS3 15 
 TRANSFORM – TRANSITION - ANIMATION 
   Transition: 
   Sử dụng link để thực hiện 
 Transition 
a.transition { 
padding: 5px 0px; 
background: #C9C; 
-webkit-transition-property: background; 
-webkit-transition-duration: 1s; 
-webkit-transition-timing-function: ease-out; 
} 
   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 16 
 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	
 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	
Slide 5 - Làm việc với CSS3 17 
 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 18 
 TRANSFORM – TRANSITION - ANIMATION 
   Định nghĩa các thuộc tính của CSS animation: 
 Thuộc	nh	 Định	nghĩa	
 animaon-name	 Xác	định	tên	cho	các	keyframe	động	
 animaon-duraon	 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)	
 animaon-iteraon-count	 xác	định	bao	nhiêu	lần	một	hình	ảnh	động	
 nên	được	chơi.	
 animaon-ming-funcon	 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.	
Slide 5 - Làm việc với CSS3 19 
FONT WEB 
 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; 
} 
Slide 5 - Làm việc với CSS3 21 
 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	 IE9,	FF3.5,	Chrome4,	
 Hỗ	trợ	glyph	 Safari	3.1,	Opera	10,	
 TrueType	(TTF)	 nền tảng tương thích Android2.2	
 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 FF3.4,	chrome0.3,	safari	
 nay	chỉ hỗ trợ iOS của Apple 3.1,	opera9,	iOS1	
 iPod. 	
 Web	Open	Font	Format	 bao gồm nhiều	khả năng IE9,	FF3.6,	chrome	5	
 (	WOFF)	 nén các tập tin font chữ và tối 
 ưu hóa	
 Embedded	OpenType	 một biến thể trên IE5	
 (EOT)	 OpenType tạo ra bởi Microsoft 
 và phần lớn 
 được hỗ trợ bởi Internet 
 Explorer.	
Slide 5 - Làm việc với CSS3 22 
 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; 
 Sử	dụng	site	hp://www.fontsquirrel.com/	để	
 } 
 tạo	file	.css	có	chứa	font	được	nhúng	
Slide 5 - Làm việc với CSS3 23 
HÌNH NỀN VỚI CSS3 
 HÌNH NỀN VỚI CSS3 
   Thực hiện chèn 3 hình ảnh làm nền cho web 
Slide 5 - Làm việc với CSS3 25 
 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 26 
 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 27 
 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 
Slide 5 - Làm việc với CSS3 28