HTML5 XP session 07 hiển thị đồ họa và hoạt hình trong CSS3 t4
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (741.32 KB, 41 trang )
Bài 07:
Hiển thị đồ họa và
hoạt hình trong CSS3
NexTGen Web
Aptech Ltd.
Mục tiêu
!"#
$%&'()*(%+,(#
#
-./(0(,1",#
Aptech Ltd.
Định dạng hình ảnh 1-4
23,4.5)6-7+8",139JPEG:;,<+,(=>+!6?.+@%GIF :?+,(6
A!(!BC@%PNG:<"9!D! &?+,(6@#
E&0(",F,G(0(+7.((0(H(,IC6.J
Color Depth (độ sâu của màu)
D2)K(>0("L,6M9)KC.6N(,/",FOP!+Q(RH(+QC4C#
6S.C.)K(>0("L,6M",(CT,+,>!9:"++@2(U)K(,96S.",#
6S.C.(V(3P+C,(V(WC.6N()K(6-7#
Compression/le size:X9FYZ9!@
DY9).GGM(C6M'(0("P!6-7C.[0#
P(2I)K(CLL9,&'()*("Q."\(0(6-7C.[0,,Y#
Aptech Ltd.
•
Kích thước tập tin được giảm xuống, nhưng giữ một bản sao của hình ảnh không nén ban đầu.
•
Tránh tích lũy giai đoạn nén lại khi chỉnh sửa hình ảnh.
Lossless compression(nén ít mất dữ liệu nhất)
•
Hình ảnh dường như là một bản sao của hình ảnh gốc nhưng trong thực tế nó không phải là
một bản sao.
•
Nén lossy đạt được kích thước file nhỏ hơn khi so sánh với nén lossless.
•
Các thuật toán nén tổn hao cho phép biến đổi bao gồm chất lượng hình ảnh với kích thước
tập tin.
Lossy compression (nén mất nhiều dữ liệu)
]
Định dạng hình ảnh 2-4
,9,6-7.[0YZ9!)6.J
Aptech Ltd.
Định dạng hình ảnh 3-4
Animaon (hoạt ảnh)
6M"CC9(0("R()K((P6.&,&0()#
)*,SP(3PC#
Transparency (trong suốt)
,IC/C !">.3,FE(^1+*,C.4(W93+8",1/ !"#
.4(W !",I_`.(0(+Q6.M(W#
Aptech Ltd.
a
Định dạng hình ảnh 4-4
C6.M%C(XCC.6N((2I)K(b#
D1.C.6N()K(9E(I9C6.M)94(W)%6.2C&_4.
>.3,F++3/#
)*,SP(3PC6.M#
Aptech Ltd.
c
Định dạng hình ảnh cho web 1-2
M,*,(0( !"%6-7;<=?<D?)K(&.P1&'(2(.(3+&d)V'(M,*,3((0(,1".P([+
!"#
M,*,%6-7(0(;<=?(Ce"f6-7(0(<D?)K(&.P1&'(#
JPEG
-7Y(2C3C0:966P@(2g9(39)K"C3`.0Y#
Q.1(0(",/[+,/;<=?(+Y+)h,6-7I>0(6M9)K(,^1C)h,O6i6IC3#
EC3C0(2I_3P%1.(39)K)K(,C>.M5;<=?"\&C-&'()*((W<D?#
PNG
-7Y&_C3C0:9669!66@%g9&_(2C3"3&j(,^1#
)K(,1&1((XI.P4/A!!%&_(,(39)K(.P/,F+#
k[P%2&_TK&_,C.l?m)no#
TKC.6N((C+QC,"(6-7(0(&/9+#
Aptech Ltd.
p
Định dạng hình ảnh cho web 2-2
GIF
-7Y9669!66(2g9&_,C(39)K&,)K(Y#
&_Y9).G_^(W2C.P1q#
T,r(W(0(,IC)K((s0,6+,#
[+^?AB9).G>!&f(0(r(W!CRE&0(.#
)K(9).GL?AB#
Aptech Ltd.
t
Chèn hình ảnh 1-6
Aptech Ltd.
uv
Chèn hình ảnh 2-6
m9,F&/(0(.(q)h6-7(W+Q-IMG#
Thuộc tính Mô tả
src
Xác định đường dẫn hình ảnh
height
Chỉ ra chiều cao hình ảnh
width
Chỉ ra chiều rộng hình ảnh
k'7
<body>
<img src=”UNO.jpg” width=”225” height=”151”/>
</body>
Aptech Ltd.
uu
Chèn hình ảnh 3-6
OI($(2I)K(9).G)C7(((W)C7((RZ9!#
)hK+PO)6.#
<body>
<img src=”image_folder/UNO.jpg” width=”225” height=”151”/>
</body>
d94
<body>
<img src=”image_folder/UNO.jpg” style=”float:left”/>
</body>
Aptech Ltd.
u
Chèn hình ảnh 4-6
6M,0(Wfloat#
Giá trị Mô tả
left
Phần tử trôi sang phía bên trái.
right
Phần tử trôi sang phía bên phải.
none
Là giá trị mặc định, phần tử không được trôi.
The element does not float and is the default value.
inherit
Giá trị thuộc tính float của của phần tử được thừa kế từ phần tử cha.
Aptech Ltd.
u
Chèn hình ảnh 5-6
k'74w<figure>#
<figure>
<img src=”logo.gif” style=”float: left” width=”304”
height=”228” />
</figure>
x.,IC('(W,F(6-7yZ.!zw92(+Y+)h,O6-7wyZ(+^z(O*,2#
wyZ(+^z(+Y+)h,6-7/CC({'((#
{'(9._9._>.3,F(O*,(0(P(&,8,(0("M' !"#
k'74,F(6-7yZ(+^z#
<figure>
<img src=”logo.gif”>
<figcaption>This diagram shows the logo of a product.</figcaption>
</figure>
Aptech Ltd.
u]
Chèn hình ảnh 6-6
w<figure> (U(2I(X6P9!(0(.(q&0(((0(+Q-yZ.!z#
^/.4.P3I2C(0("\(0(6-7wyZ.!z#
k'7#
<figure>
<img src=”flower1.jpg”>
<img src=”flower2.jpg”>
<img src=”flower3.jpg”>
<figcaption>The different types of flowers</figcaption>
</figure>
o1`.
Aptech Ltd.
u
Kích thước và Padding ảnh trong CSS 1-2
o'()*((WC)K(`.P,,IC#
.(q ,!,,19[+(,4.((,4.(W#
D)h,(2I>0((,4.(,4.(6f)K(P8,&'((|H()K(9,#
k'7
p.ex
{
height:100px;
width:100px;
}
m6.C_(0(.(q,0)VR
Thuộc tính Mô tả Các giá trị
height Thiết lập chiều cao
•
Auto
• Length
• %
•
Inherit
Aptech Ltd.
ua
Kích thước và Padding ảnh trong CSS 2-2
Thuộc tính Mô tả Giá trị
max-height
Thiết lập chiều cao tối đa
•
none
• length
•
%
• inherit
max-width
Thiết lập chiều cao tối đa
• none
• length
• %
• Inherit
min-height
Thiết lập chiều cao tối thiểu
• length
• %
• Inherit
min-width
Thiết lập chiều rông tối thiểu
• length
• %
• Inherit
width
Thiết lập chiều rộng
•
auto
• length
•
%
• inherit
Aptech Ltd.
uc
Padding 1-3
.(qPadding(W)K(6-7I>0(&_,M,G(0()h",/(W+Q-*,
,.(W2#
.4(W(0(+Q-)L1.(qpadding#
-7.(q,/",F)top%right%bottom%left%,0+,&0(.(2I)K(>0(
2(2I)K(P8,C(0(,/",F#
m6.9,F&/(0(,0&0(.)K(6-7.(qpadding
#
Giá trị Mô tả
length
Chỉ ra giá trị cố định cho padding ở dạng pixels, pt, em.
%
Chỉ ra giá trị tỉ lệ phần trăm so với đối tượng chứa nó.
Aptech Ltd.
up
Padding 2-3
padding:25px 50px 75px 100px;
2%++,925px%,+,950px%"}C+,975px%9!~
+,9100px#
k'7#
padding-top:10px;
padding-bottom:10px;
padding-right:15px;
padding-left:15px;
m(U(2I(X{)6.J
Aptech Ltd.
ut
Padding 3-3
m6.9,F&/3((0(.(q
#
Thuộc tính Mô tả
padding
Định nghĩa padding
padding-bottom
Định nghĩa padding dưới
padding-left
Định nghĩa padding trái
padding-right Định nghĩa padding phải
padding-top Định nghĩa padding trên
Aptech Ltd.
v
Hình ảnh thu nhỏ(Thumbnail) 1-4
.C",99C•%H(C+Q(WC9*V#
D3.•6f9,/&11"Q.9*V%(2I>!C,4#
DP(C,F.R,(.(2I)K()_`.;(,+#
k'7#
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8”>
<title>Thumbnail</title>
<style>
/* general */
body {
margin:0;
padding:40px 80px;
background:#fff;
font:70% Arial, Helvetica, sans-serif;
color:#555;
line-height:100%;
}
h1, h2{
font-size:180%;
font-weight:normal;
color:#555;
}
p{
margin:1em 0;
}
p.text{
width:500px;
}
a{
color:#f20;
text-decoration:none;
}
Aptech Ltd.
u
Hình ảnh thu nhỏ(Thumbnail) 2-4
a:hover{
color:#999;
}
img{
border:none;
}
/* // general */
/* thumbnail list */
ul#thumbs, ul#thumbs li{
margin:0;
padding:0;
list-style:none;
}
ul#thumbs li{
float:left;
margin-right:0px;
border:1px solid #999;
padding:2px;
}
ul#thumbs a{
display:block;
float:left;
width:125px;
height:135px;
line-height:50px;
overflow:hidden;
position:relative;
z-index:1;
}
ul#thumbs a img{
float:left;
position:absolute;
top:0px;
left:0px;
}
Aptech Ltd.
Hình ảnh thu nhỏ(Thumbnail) 3-4
/* mouse over */
ul#thumbs a:hover{
overflow:visible;
z-index:1000;
border:none;
}
ul#thumbs a:hover img{
border:1px solid #999;
background:#fff;
padding:2px;
}
/* // mouse over */
/* clearing floats */
ul#thumbs:after, li#thumbs:after{
content:”.”;
display:block;
height:0;
clear:both;
visibility:hidden;
}
ul#thumbs, li#thumbs{
display:block;
}
ul#thumbs, li#thumbs{
min-height:1%;
}
* html ul#thumbs, * html li#thumbs{
height:1%;
}
/* // clearing floats */
/* // thumbnail list */
</style>
</head>
<body>
<h2>Thumbnail</h2>
<ul id=”thumbs”>
<li><a href=”HTML5.png” target=”_blank”>
<img src=”HTML5_small.jpg”/></a></li>
</ul>
</body> </html>
Aptech Ltd.
Hình ảnh thu nhỏ(Thumbnail) 4-4
o1`.&,!
Aptech Ltd.
]
Làm việc với Transitions CSS3 1-5
dCvvc%€++9!,*,,F.`.0(.PI8,%C6.P•LCqd(`.P4(W‚,)K(,9
€,C^#
,,F(W€++9!ƒ,99•"NQ."86./C(0(C.9!(.PI8,(0(H(,IC&„.[%€++9!•/C
…!"o,Cƒ#
,F,%A!!=>+9!t&_TK6,^6#
Aptech Ltd.
Làm việc với Transitions CSS3 2-5
k'76.,F.RP8,,SP#
div
{
transition: width 3s;
-moz-transition: width 3s; /* Firefox 4 */
-webkit-transition: width 3s; /* Safari and Chrome */
-o-transition: width 3s; /* Opera */
}
