BI 5

LM VIC VI CSS3
 NHC LI BI TRC
Chn cc thnh phn video, audio vo trang
iu khin video vi Javascript
Lm quen vi thnh phn canvas
S dng thnh phn cavas thc hin:
V hnh v ng
p dng mu v c fradient
Thc hin to hnh ng

Slide 5 - Lm vic vi CSS3 2

 MC TIU BI HC
Tng quan v CSS3
Lm vic vi cc thuc tnh mi trong CSS3:
Border-radius
Border-image
Gradient
Transform, transition, animation
Lm vic vi font web
Chn nhiu hnh nn vi CSS3

Slide 5 - Lm vic vi CSS3 3

TNG QUAN V CSS3
 TNG QUAN V CSS3
L tiu chun mi nht ca CSS
Hon ton tng thch vi cc phin bn trc
CSS3 c chia thnh cc module, cc thnh phn
c c chia nh v b sung cc thnh phn mi

Slide 5 - Lm vic vi CSS3 5

 TNG QUAN V CSS3
Mt s module quan trng trong CSS3:
Selectors
Box Model
Backgrounds and Borders
Text Effects
2D/3D Transformations
Animations
Multiple Column Layout
User Interface

Slide 5 - Lm vic vi CSS3 6

NHNG THUC TNH MI TRONG CSS3
 THUC TNH MI 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: to ra bn gc bo trn cho ng vin

-webkit-border-radius: gip IE9+ h tr
-moz-border-radius: gip Firefox h tr

Slide 5 - Lm vic vi CSS3 8

 THUC TNH MI 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 php:
border-image: source slice width outset
repeat;

Slice: phn b bn trong ca

hnh border
Outset: s lng din tch m
hnh nn border m rng

Slide 5 - Lm vic vi CSS3 9

 THUC TNH MI TRONG CSS3
CSS3 Gradient:
Gradient l thnh phn ph bin trn trang web
Gradient thng bao gm:
2 im dng mu (color stop)
1 im chuyn mu

Trc khi c CSS3:

V gradient trong cc Background-image Xut thnh dng hnh nh
chng trnh ha s dng trn web

Vi CSS3: s dng cc thuc tnh nh ngha gradient:

Linear-gradient
Radial-gradient

Slide 5 - Lm vic vi CSS3 10

 THUC TNH MI TRONG CSS3
To gradient vi 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 - Lm vic vi CSS3 11

 THUC TNH MI TRONG CSS3
Thm gc v nhiu im dng:
Mc ch:
Tng thm s a dng ca gradient
Kim sot tt hn

background-image: -moz-linear-gradient(45deg, white, green, black);

background-image: -moz-radial-
gradient(60% 60%, circle closest-
corner, white, black);

Slide 5 - Lm vic vi CSS3 12

 THUC TNH MI TRONG CSS3
Lp li gradient:
background-image: -moz-repeating-linear-gradient(left, white 80%, black,
white);

S dng h mu RGBA nh ngha 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 - Lm vic vi CSS3 13

TRANSFORM TRANSITION - ANIMATION
 TRANSFORM TRANSITION - ANIMATION

Transform:
Cho php xoay, ko dn, ko nghing thnh phn trn
trang

.transform { margin-top:2em; -webkit-transform: rotate (45deg); -moz-transform:

rotate(-45deg); transform: rotate(-45deg)}

Slide 5 - Lm vic vi CSS3 15

 TRANSFORM TRANSITION - ANIMATION

Transition:
S dng link thc hin
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 thi gian chuyn i

transition-timing-function: xc nh tc ng
cong ca hiu ng chuyn tip.

Slide 5 - Lm vic vi CSS3 16

 TRANSFORM TRANSITION - ANIMATION

Mt s gi tr ca transition-timing-function
Gi tr Gii ngha
linear Ch nh mt hiu ng chuyn tip vi cng mt tc
t u n cui (tng ng vi kiu cubic-
bezier(0,0,1,1))
Ease Ch nh mt hiu ng chuyn tip vi mt s khi u
chm, sau nhanh chng, sau kt thc chm
ease-in Ch nh mt hiu ng chuyn tip vi mt khi u
chm
ease-out Ch nh mt hiu ng chuyn tip vi mt kt thc chm
(tng ng vi cubic-bezier (0,0,0.58,1))
ease-in-out Ch nh mt hiu ng chuyn tip vi mt s khi u
chm v kt thc
cubic-bezier(n,n,n,n) Xc nh gi tr ca ring bn trong cc chc nng khi
bezier. Cc gi tr c th l gi tr s 0-1

Slide 5 - Lm vic vi 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 - Lm vic vi CSS3 18

 TRANSFORM TRANSITION - ANIMATION

nh ngha cc thuc tnh ca CSS animation:

Thuc 2nh nh ngha
animaJon-name Xc nh tn cho cc keyframe ng
animaJon-duraJon Xc nh thi gian cn thit hon thnh
chu k ca hnh ng (giy/ mili giy)
animaJon-iteraJon-count xc nh bao nhiu ln mt hnh nh ng
nn c chi.
animaJon-Jming-funcJon xc nh tc ng cong ca hot hnh.
Cc ng cong tc xc nh Thi gian
(TIME) hot hnh s dng thay i t mt
tp hp cc phong cch CSS khc.

Slide 5 - Lm vic vi CSS3 19

FONT WEB
 FONT WEB
@font-face:
Cho php nhng font ch vo trang bng cch khai
bo font v t font ch trn web server
L gii php khc phc vic phi ci t font ch trn
my tnh
@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 - Lm vic vi CSS3 21

 FONT WEB
Kiu nh dng font ch:
Kiu nh dng Gii thch Trnh duyt, HH h tr
Open Type (OTF) nh dng ph bin IE9, FF3.5, Chrome4,
H tr glyph Safari 3.1, Opera 10,
TrueType (TTF) nn tng tng thch Android2.2
v cung cp cc iu khin tinh
vi sp ch,
SVG nh dng vector da trn hin FF3.4, chrome0.3, safari
nay ch h tr iOS ca Apple 3.1, opera9, iOS1
iPod.
Web Open Font Format bao gm nhiu kh nng IE9, FF3.6, chrome 5
( WOFF) nn cc tp tin font ch v ti
u ha
Embedded OpenType mt bin th trn IE5
(EOT) OpenType to ra bi Microsoft
v phn ln
c h tr bi Internet
Explorer.
Slide 5 - Lm vic vi CSS3 22
 FONT WEB
S dng dch v web to nhiu 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 dng site hvp://www.fontsquirrel.com/
}
to le .css c cha font c nhng
Slide 5 - Lm vic vi CSS3 23
HNH NN VI CSS3
 HNH NN VI CSS3
Thc hin chn 3 hnh nh lm nn cho web

Slide 5 - Lm vic vi CSS3 25

 HNH NN VI CSS3
Thc hin:
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 - Lm vic vi CSS3 26

 HNH NN VI CSS3
Chn nhiu hnh nn vi v tr chnh xc:
.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 - Lm vic vi CSS3 27

 TNG KT
Khng nn s dng kt hp thuc tnh border-
image v thuc tnh border-radius
Gradient trong CSS ging vi gradient c to ra
trong cc chng trnh ha: c im dng mu
v im chuyn mu
C th to c nhiu im dng mu v im
chuyn mu gradient phong ph hn
S dng gi tr v tr: top, left, right, bottom iu
chnh chnh xc nhiu hnh nn trong CSS

Slide 5 - Lm vic vi CSS3 28