Bài giảng HTML5 - Bài 5: Làm việc với CSS3 (Mới)

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 
THUỘC TÍNH MỚI TRONG CSS3 
  Tạo gradient với CSS3 
Slide 5 - Làm việc với CSS3 11 
.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)); 
} 
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 
Slide 5 - Làm việc với CSS3 12 
background-image: -moz-linear-gradient(45deg, white, green, black); 
background-image: -moz-radial-
gradient(60% 60%, circle closest-
corner, white, black); 
THUỘC TÍNH MỚI TRONG CSS3 
  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 13 
background-image: -moz-repeating-linear-gradient(left, white 80%, black, 
white); 
.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));} 
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 
Slide 5 - Làm việc với CSS3 15 
.transform { margin-top:2em; -webkit-transform: rotate (45deg); -moz-transform: 
rotate(-45deg); transform: rotate(-45deg)} 
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. 
Slide 5 - Làm việc với CSS3 16 
a.transition { 
padding: 5px 0px; 
background: #C9C; 
-webkit-transition-property: background; 
-webkit-transition-duration: 1s; 
-webkit-transition-timing-function: ease-out; 
} 
TRANSFORM – TRANSITION - ANIMATION 
  Một số giá trị của transition-timing-function 
Slide 5 - Làm việc với CSS3 17 
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	
  
TRANSFORM – TRANSITION - ANIMATION 
   CSS animation 
Slide 5 - Làm việc với CSS3 18 
#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); 
} 
} 
TRANSFORM – TRANSITION - ANIMATION 
   Định nghĩa các thuộc tính của CSS animation: 
Slide 5 - Làm việc với CSS3 19 
Thuộc	
  2nh	
   Định	
  nghĩa	
  
animaJon-­‐name	
   Xác	
  định	
  tên	
  cho	
  các	
  keyframe	
  động	
  
animaJon-­‐duraJon	
   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)	
  
animaJon-­‐iteraJon-­‐count	
   xác	
  định	
  bao	
  nhiêu	
  lần	
  một	
  hình	
  ảnh	
  động	
  
nên	
  được	
  chơi.	
  
animaJon-­‐Jming-­‐funcJon	
   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.	
  
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 
Slide 5 - Làm việc với CSS3 21 
@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 WEB 
   Kiểu định dạng font chữ: 
Slide 5 - Làm việc với CSS3 22 
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.2	
  TrueType	
  (TTF)	
   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	
  
FONT WEB 
   Sử dụng dịch vụ web để tạo nhiều font 
Slide 5 - Làm việc với CSS3 23 
Sử	
  dụng	
  site	
  hvp://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; 
} 
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: 
Slide 5 - Làm việc với CSS3 26 
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); 
} 
HÌNH NỀN VỚI CSS3 
   Chèn nhiều hình nền với vị trí chính xác: 
Slide 5 - Làm việc với CSS3 27 
.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; 
} 
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