BI 5

LM VI!C V"I CSS3

NH!C L"I BI TR#$C
Chn cc thnh ph$n video, audio vo trang
i%u khi&n video v'i Javascript
Lm quen v'i thnh ph$n canvas
S( d)ng thnh ph$n cavas *& th+c hi,n:
V- hnh v *./ng
p d)ng mu v c0 fradient
Th+c hi,n t1o hnh *2ng
Slide 5 - Lm vi!c v"i CSS3 2
M%C TIU BI H&C
T3ng quan v% CSS3
Lm vi,c v'i cc thu2c tnh m'i trong CSS3:
Border-radius
Border-image
Gradient
Transform, transition, animation
Lm vi,c v'i font web
Chn nhi%u hnh n%n v'i CSS3
Slide 5 - Lm vi!c v"i CSS3 3
T'NG QUAN V( CSS3
T'NG QUAN V( CSS3
L tiu chu4n m'i nh5t c6a CSS
Hon ton t.7ng thch v'i cc phin b8n tr.'c
CSS3 *.9c chia thnh cc module, cc thnh ph$n
c *.9c chia nh: v b3 sung cc thnh ph$n m'i
Slide 5 - Lm vi!c v"i CSS3 5
T'NG QUAN V( CSS3
M2t s; module quan tr0ng trong CSS3:
Selectors
Box Model
Backgrounds and Borders
Text Effects
2D/3D Transformations
Animations
Multiple Column Layout
User Interface
Slide 5 - Lm vi!c v"i CSS3 6
NH)NG THU*C TNH M$I TRONG CSS3
THU*C TNH M$I TRONG CSS3
Border-radius:
Border-radius: t1o ra b;n gc bo trn cho *./ng vi%n
-webkit-border-radius: gip IE9+ h< tr9
-moz-border-radius: gip Firefox h< tr9
Slide 5 - Lm 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 TNH M$I TRONG CSS3
Border-image:
C php:
Slice: ph$n b bn trong c6a
hnh border
Outset: s; l.9ng di,n tch m
hnh n%n border m= r2ng
Slide 5 - Lm 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 TNH M$I TRONG CSS3
CSS3 Gradient:
Gradient l thnh ph$n ph3 bi>n trn trang web
Gradient th./ng bao g?m:
2 i&m d@ng mu (color stop)
1 i&m chuy&n mu
Tr.'c khi c CSS3:


V'i CSS3: s( d)ng cc thu2c tnh *Anh ngha gradient:
Linear-gradient
Radial-gradient

Slide 5 - Lm vi!c v"i CSS3 10
v gradlenL Lrong cc
chuong Lrlnh d hoa
xuL Lhanh dang hlnh anh
s dung Lrn web
Background-image
THU*C TNH M$I TRONG CSS3
T1o gradient v'i CSS3
Slide 5 - Lm 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 TNH M$I TRONG CSS3
Thm gc *2 v nhi%u i&m d@ng:
M)c ch:
Tng thm s+ a d1ng c6a gradient
Ki&m sot t;t h7n
Slide 5 - Lm 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 TNH M$I TRONG CSS3
LBp l1i gradient:
S( d)ng h, mu RGBA *& *Anh ngha gradient:
Slide 5 - Lm 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 php xoay, ko dn, ko nghing thnh ph$n trn
trang
Slide 5 - Lm 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 *Anh th/i gian chuy&n *3i
transition-timing-function: xc *Anh t;c *2 *./ng
cong c6a hi,u Cng chuy&n ti>p.







Slide 5 - Lm 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
M2t s; gi trA c6a transition-timing-function
Slide 5 - Lm vi!c v"i CSS3 17
!"# %&' !"(" )*+,-
llnear
Ch! "#nh m$t hi%u &ng chuy'n ti(p v)i cng m$t t*c "$
t+ ",u "(n cu*i (t-.ng "-.ng v)i ki'u cubic-
bezier(0,0,1,1))
Lase
Ch! "#nh m$t hi%u &ng chuy'n ti(p v)i m$t s/ kh0i ",u
ch1m, sau " nhanh chng, sau " k(t thc ch1m
ease-ln
Ch! "#nh m$t hi%u &ng chuy'n ti(p v)i m$t kh0i ",u
ch1m
ease-ouL
Ch! "#nh m$t hi%u &ng chuy'n ti(p v)i m$t k(t thc ch1m
(t-.ng "-.ng v)i cubic-bezier (0,0,0.58,1))
ease-ln-ouL
Ch! "#nh m$t hi%u &ng chuy'n ti(p v)i m$t s/ kh0i ",u
ch1m v k(t thc
cublc-bezler(!,!,!,!)
Xc "#nh gi tr# c2a ring b3n trong cc ch&c n4ng kh*i
bezier. Cc gi tr# c th' l gi tr# s* 0-1
TRANSFORM TRANSITION - ANIMATION
CSS animation
Slide 5 - Lm 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
DAnh ngha cc thu2c tnh c6a CSS animation:
Slide 5 - Lm vi!c v"i CSS3 19
.+/01 2)+ 3')+ )*+,-
anlmauon-name xc dlnh Ln cho cc keyframe dng
anlmauon-durauon xc dlnh Lhl glan cn LhlL d hoan Lhanh
chu ky ca hlnh dng (gly/ mlll gly)
anlmauon-lLerauon-counL xc dlnh bao nhlu ln mL hlnh anh dng
nn duoc chol.
anlmauon-umlng-funcuon xc dlnh Lc d dung cong ca hoaL hlnh.
Cc dung cong Lc d xc dlnh 1hl glan
(1lML) hoaL hlnh s dung d Lhay dl Lu mL
Lp hop cc phong cch CSS khc.
FONT WEB
FONT WEB
@font-face:
Cho php nhng font chE vo trang bFng cch khai
bo font v *Bt font chE trn web server
L gi8i php khGc ph)c vi,c ph8i ci *Bt font chE trn
my tnh
Slide 5 - Lm 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 *Anh d1ng font chE:
Slide 5 - Lm vi!c v"i CSS3 22
4"5/ 6')+ 78)* !"(" %+91+ .&:)+ 7/;<%= >3> +? %&@
Cpen 1ype (C1l)
ulnh dang ph bln
P Lro glyph
lL9, ll3.3, Chrome4,
Safarl 3.1, Cpera 10,
Androld2.2 1rue1ype (11l)
n!n t"ng t#$ng thch
v cung c%p cc &i!u khi'n tinh
vi s(p ch),
SvC
&*nh d+ng vector d,a trn hi-n
nay ch. h/ tr0 iOS c1a Apple
iPod.
ll3.4, chrome0.3, safarl
3.1, opera9, lCS1
Web Cpen lonL lormaL
( WCll)
bao g2m nhlu kh" n3ng
nn cc t4p tin fonL ch) v t5i
#u ha
lL9, ll3.6, chrome 3
Lmbedded Cpen1ype
(LC1)
m6t bi7n th' trn
OpenType t+o ra b8i Microsoft
v ph9n l:n
&#0c h/ tr0 b8i Internet
Explorer.
lL3
FONT WEB
S( d)ng dAch v) web *& t1o nhi%u font
Slide 5 - Lm vi!c v"i CSS3 23
S dung slLe hup://www.fonLsqulrrel.com/ d
Lao le .css c chua fonL duoc nhung
@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;
}
HNH N(N V$I CSS3
HNH N(N V$I CSS3
Th+c hi,n chn 3 hnh 8nh lm n%n cho web
Slide 5 - Lm vi!c v"i CSS3 25
HNH N(N V$I CSS3
Th+c hi,n:
Slide 5 - Lm 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);
}
HNH N(N V$I CSS3
Chn nhi%u hnh n%n v'i vA tr chnh xc:
Slide 5 - Lm 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
Khng nn s( d)ng k>t h9p thu2c tnh border-
image v thu2c tnh border-radius
Gradient trong CSS gi;ng v'i gradient *.9c t1o ra
trong cc ch.7ng trnh *? h0a: c i&m d@ng mu
v i&m chuy&n mu
C th& t1o *.9c nhi%u i&m d@ng mu v i&m
chuy&n mu *& gradient phong ph h7n
S( d)ng gi trA vA tr: top, left, right, bottom *& i%u
chHnh chnh xc nhi%u hnh n%n trong CSS
Slide 5 - Lm vi!c v"i CSS3 28