2
ﻋﻨﻮان
آﻣﻮزش HTML5و CSS3 در ﻗﺎﻟﺐ ﭘﺮوژه
ﻣﺆﻟﻔﺎن :اﻟﻜﺴﻴﺲ ﮔﻠﺪﺳﺘﻴﻦ ،ﻟﻮﻳﻴﺲ ﻻزارﻳﺲ ،اﺳﺘﻼ وﻳﻞ
ﻣﺘﺮﺟﻢ :اﻣﻴﺮﻋﺒﺎس ﻋﺒﺪاﻟﻌﻠﻲ ﭘﻴﺶﻧﻴﺎز HTML4 :و CSS2.1
ﻣﻰ ﺧﻮﺍﻫﻢ ﻛﺘﺎﺏ ﻛﺎﻣﻞ ﻭ 360ﺻﻔﺤﻪ ﺍﻯ ﺭﺍ ﺧﺮﻳﺪﺍﺭﻯ ﻛﻨﻢ
اﻳﻨﺒﺎر ﺑﺮاي ﻣﻌﺮﻓﻲ ﻛﺘﺎب ﺳﻌﻲ ﻛﺮدﻳﻢ از دوﺳﺘﺎن ﻃﺮاح ،ﺑﺮﻧﺎﻣﻪ ﻧﻮﻳﺲ ،وﺑﻼگ ﻧﻮﻳﺲ و وب ﻣﺴﺘﺮ ﺑﺮاي ﻧﺸﺮ و ﻣﻌﺮﻓﻲ اﻳﻦ ﻛﺘﺎب ﻛﻤﻚ ﺑﺨﻮاﻫﻴﻢ .ﺑﺪون ﻛﻤﻚ اﻳﻦ دوﺳﺘﺎن ﺷﺎﻧﺲ زﻳﺎدي ﺑﺮاي ﻣﻌﺮﻓﻲ اﺛﺮﻣﺎن وﺟﻮد ﻧﺪاﺷﺖ .در اداﻣﻪ ﻟﻮﮔﻮي و آدرس ﺳﺎﻳﺖﻫﺎﻳﻲ ﺑﻪ ﻣﺎ ﻟﻄﻒ داﺷﺘﻨﺪ و در ﻣﻌﺮﻓﻲ اﻳﻦ اﺛﺮ ﺑﻪ ﻣﺎ ﻛﻤﻚ ﻛﺮدهاﻧﺪ، آورده ﺷﺪه اﺳﺖ .از ﺗﻤﺎﻣﻲ دوﺳﺘﺎﻧﻲ ﻛﻪ ﻣﺎ را در ﻣﻌﺮﻓﻲ و ﻧﺸﺮ اﻳﻦ ﻓﺎﻳﻞ ﻛﻤﻚ ﻛﺮدﻧﺪ ﻗﺪرداﻧﻲ ﻣﻲﻛﻨﻴﻢ.
ﺟﺎﻣﻌﻪ ﻣﺠﺎزي ﻳﺎ ﻓﺎﺟﻌﻪ ﻣﺠﺎزي
-
ﺟﻮاداﺣﻤﺪزاده
4
ﻋﻨﻮان
ﻫﺮ ﮔﻮﻧﻪ ﺧﺒﺮ ﺟﺪﻳﺪ درﺑﺎره ي اﻳﻦ ﻛﺘﺎب )اراﺋﻪ ﻣﺤﺘﻮاي ﺗﻜﻤﻴﻠﻲ ،ﻓﻴﻠﻢ و ﻳﺎ دوره آﻣﻮزﺷﻲ ﻣﺮﺗﺒﻂ ﺑﺎ ﻣﻮﺿﻮع( در ﺻﻔﺤﻪ ﻣﺮﺑﻮط ﺑﻪ ﻛﺘﺎب ﻣﻨﺘﺸﺮ ﻣﻲ ﺷﻮد .ﺑﺮاي ﻛﺴﺐ اﻃﻼﻋﺎت ﺑﻴﺸﺘﺮ درﺑﺎرهي اﻳﻦ ﻛﺘﺎب ﻣﻲ ﺗﻮاﻧﻴﺪ ﺑﻪ ﺻﻔﺤﻪ اﺻﻠﻲ آن در ﺳﺎﻳﺖ WeDesignﻣﺮاﺟﻌﻪ ﻛﻨﻴﺪ
http://books.wedesign.ir/html5-css3.html
ﺷﺒﻜﻪ ﻫﺎي اﺟﺘﻤﺎﻋﻲ ﺑﺎ دﻧﺒﺎل ﻛﺮدن ﻣﺘﺮﺟﻢ در ﺷﺒﻜﻪ ﻫﺎي اﺟﺘﻤﺎﻋﻲ ،ﻣﻲﺗﻮاﻧﻴﺪ ﻣﻄﺎﻟﺐ ﺑﻴﺸﺘﺮي درﺑﺎرهي ﻃﺮاﺣﻲ وب ﺳﺎﻳﺖ و ﺗﻜﻨﻮﻟﻮژي ﻫﺎي ﻣﺮﺗﺒﻂ ﺑﺎ آن ﺑﻪ دﺳﺖ ﺑﻴﺎورﻳﺪ.
ﺧﺒﺮﻧﺎﻣﻪي WeDesign ﻋﻼوه ﺑﺮ آن ﻣﻲﺗﻮاﻧﻴﺪ ﺑﺎ ﻋﻀﻮﻳﺖ در ﺧﺒﺮﻧﺎﻣﻪي ﺳﺎﻳﺖ ﻣﺎ ﻛﻪ در ﺻﻔﺤﻪ اول ﺳﺎﻳﺘﻤﺎن در آدرس www.wedesign.irﻗﺮار دارد ،ﺟﺪﻳﺪﺗﺮﻳﻦ ﺧﺒﺮﻫﺎ درﺑﺎرهي ﻛﺘﺎبﻫﺎي در دﺳﺖ ﺗﺎﻟﻴﻒ و ﺗﺮﺟﻤﻪ ،دورهﻫﺎي آﻣﻮزﺷﻲ و ﻳﺎ ﻛﺎرﮔﺎهﻫﺎﻳﻲ ﻛﻪ ﻗﺮار اﺳﺖ ﺑﺮﮔﺰار ﻛﻨﻴﻢ را درﻳﺎﻓﺖ ﻛﻨﻴﺪ .اﻳﻤﻴﻞ ﺷﻤﺎ ﻧﺰد ﻣﺎ ﻣﺤﻔﻮظ اﺳﺖ و ﺑﻪ ﻫﻴﭻ ﻋﻨﻮان ﺑﺮاي ﺷﻤﺎ spamارﺳﺎل ﻧﻤﻲﻛﻨﻴﻢ.
ﻣﻰ ﺧﻮﺍﻫﻢ ﻛﺘﺎﺏ ﻛﺎﻣﻞ ﻭ 360ﺻﻔﺤﻪ ﺍﻯ ﺭﺍ ﺧﺮﻳﺪﺍﺭﻯ ﻛﻨﻢ
45 A #
35 HTML5
201
/
(
. :-
>
11
*+
13
37 37
HTML5 herald
38
HTML5
B
' 4 +
5C
"
39 40
HTML
41
head
1
42
. 8
17
+G
17
HI
18
.
21
% "5
22
.
.% . N
23
" $#
25
J
F . L% 3 . ++K( . "
46 ".
HTML5
.
M+ .
48 $.#
XHTML
$"
+ $5 O
P@Q E
R
; 4(
51
header
S
51
section
S
53
article
S
54
nav
S
56
aside
S
57
footer
S
58 61
HTML5 herald
&'(%$
R
" #
!"# " "* CSS3
$%
"' ()
:) *+ + HTML5
- "+
27 1 0..
2 "..
,
. ".+ /0..*
$ $..# .
45 HTML5 3 "
27 29
&
HTML5
25
48 50
" # DVD !
14
$%
+ 1 EF !
HTML5
WeDesign
15
45 45
D$
14
"# -6 -
"
HTML5
+ CSS3
30 30 32 ++4(
" =%T
32 34 ! %
"# -6 + !9 :
5
+8
;< 0 @<( ? > 1
" 1
8 8
CSS3
=
$7 1 "#
5 $
6
HTML5 3.
CSS3
4
98
readonly
S+SR
98
multiple
S+SR
99
form
S+SR
99
autocomplete
100
autofocus
. 2 .'
S+SR
65
"
S+SR
68
hgroup
70
O " "T Q
!
102
D$
105
URL
105
@<( ! %# F%
e
' 4 HTML5
O
" !"#
112 112
output
S
113
keygen
S
. b$. ." .#
E . .S+SR
Q
$.T HTML < 5
1
2 '
113 113
-+0\
Z ] , F %* +
84
+8 ,+
85
script
88
HTML5
116
\ !" +8
117
E $V"
'
-<+'
*8M
/
h8M
!$+#
117 3$Q
*8M
/
h8M
!$+#
117
);...< 0 117
...
... ' 1
"
... + ( ...
$T$
119
$" $
H
F
C
async
S+SR E
2-
4T
! @
H 4'
"+ `(
2 '
88 2 'E
\
92 -!"# ,
b$
T
M
required
S+SR
"<+'
C
MO . ...T
c &
: *+ S+SR
placeholder
. ...S+SR
:-
Z 5
S+SR
. ... Polyfill placeholder
"
93
8
118
M %
HTML5
e
91
+
QaR
115
+4\
Q S
! %# B
HTML5 B
M
H
+< 5
!"# # @ E
86
"
+
details
+= ! 9 :;< $ *+ g&
) @+Q$(
O B" "T
82
S
M cite
80
textarea
(
$'
#
80
114
%<
[$< Q
79
S
HTML5
3 ++K( »
ZR
79 ( @ 4(
optgroup
115
8W
O «
" $+:
78
114 114
$T$ "
78
81
S
form
S
time
79
3 ++K( 0
S S
77
"<+'
Q
figure
progress
76 (
!
meter
75 $# ! @ 76
S
mark
75
d
109
figcaption
73
! "P
108
70 72
"
106
U$V $' R
71
U N
" "T "
68
search
ranges
*+
$ P D$
101
107
8 9 7 :-
63
" "T
103
'
63
S+SR datalist
list
101 HTML5
6
96
pattern
S+SR
97
disabled
S+SR
ﺻﻔﺤﻪ ﺍﻯ ﺭﺍ ﺧﺮﻳﺪﺍﺭﻯ ﻛﻨﻢ360 ﻣﻰ ﺧﻮﺍﻫﻢ ﻛﺘﺎﺏ ﻛﺎﻣﻞ ﻭ
7 !"# "+ $(
158
$P
Q
120
autoplay
S+SR
$P
121
loop
S+SR
121
preload
S+SR
122
poster
S+SR
l
!"#"+ $(
158 159
::selection
160
CSS3
160
d
HSLA
( Z%
163
3 $
165
border-radius
169
Q #
1 ! @ 8
F M%
173
text-shadow
#$8
"4 ZS'
R Bd "
W3C
.. 8
$(
$
<+' 1 ! @ .
% F
192
W3C
C
$
194 WebKit E % "5 $ -+.
M
$G< d
191
.5 -
g O g O
-
$( $O
!$+#
202 204
+ 1k:
$S(
&( d "
. b$
' 4
API
-<+' ;5$( j0: -<+'
"Q = 5 j0:
F :
1 k: <% 2 ,
-<+.' F . 1 E
API
.. b$..
1
..O
..
..+< 5 "
141
"
142
S+SR + 3$Q ;+<&(
143 144
U
E
$S(
$(
1 ! @
+ 1k: $S( M : 0
151
% "5
8
1
CSS3
"
* $R
R
+ *: 8j M8
8j M8
S+SR
152 155
:;(> *+
CSS3
148 149
($Q E $ P
j % EF 1 F$
147
' 8
!" $#
.Q
133
147
197
"
144
196 199
.
141
$..(
"+@
190
"G
131
..Q
$<c
190
".
138
$( R
. R d..
HTML
R
129
FN j.0: F . 1
5-
. R Bd .
-<+' Z " (
!" H
. CSS
138 -<+' F"+
WebKit
188 .
;+<&(
QSR
136
% "..5 $ ..
184 .
$<c
MIME type
. D .#
??= :; ??&2 *??+
178
1 ! @.
8 (6
128
% .A$
"
$.# 126
177
185
+( (
128
??+= CSS3 ?? @??
.. :
+ *:
. j.0: Z. 5 . ' .
-+ $R
180
1
125
*+
175
"
source
$>
174
SVG
124
%< 1 ! @
172
$.S( . '
122
,
"+<
inset
S+SR
audio
;.< 0 E
HSL
162
"
122
RGBA
161
8j M8 l
Ua
l
Ua
5 $
6
HTML5 3.
CSS3
230
$' Z '
233
$' +Q$SR
+8
234
5F&
!"#
$+:
235 ?. > 1 ;.< 0
.
++4(
? 205
CSS3
! "P
205
Z&# ++K(
$' 1 ! @
206
$ 537 a
208
. '
237
$' R
$ "
CSS3
2 *C> %%B= :; (2 *+
translation scaling F
F%
%
M
++K( jR 1 m$4
211
O 37 a
242
?2 # D
210
Font Squirrel
240
8
8;+Q$(
Unicode
235 P@Q
4
++K( M
212
F "+
0
F
$<c
8
T T
1
+ *:
243
column-count
+Q$SR
212
243
column-gap
+Q$SR
213
244
column-width
+Q$SR
215
.. columns +..Q$SR
216
transition-duration
217
transition-timing-function
218
transition-delay
.. $ ..QaR 246
F$
b$
247
height
+Q$SR
F$
248
b$
248
3 +Q$SR O 3 +Q$SR +Q$SR
column-rule
F$
248
F$
O 37 a
251
, "( $ 6
h:
4
256 8" 259
? =
?2
E
"
= .
*+%+ "+<
... C...+ &( ... b$...
g O !$+#
224
animation-duration
Media query
224
animation-timing-function
+ *:
224
animation-iteration-count
4
224
animation-direction animation-delay
8" 1
>
225
C
% 6
:;2 *+
225
animation-fill-mode
225
animation-play-state
%FG
C1> . H F +45$ O
3 +.Q$SR
.
+45$ k
6T Modernizr
262
&
263
0
+45$ \
H
" 1 ! @
+< 5 1 +45$
. $ QaR $ *+%+
225 R$ N -+ $R
226
261 H .
P
"+
. b$
&
3 +...Q$SR animation-name
&
262
- '
223
260 .S0# - . n.@
1 ! @
!$<T "
Media query
*+
255
.G
1
8
255
$ QaR
222
Media Query
254
3 +Q$SR E
223
252 253
transition
221
250
"
transition-property
220
Spanning columns
253
G
. $ C.
O &# ,
249
219
FN 1 Z 5
? 6 ?<
?
?# ?
%$ :;? *+ :
227
+ *:
227 @font-face 1 ! @
'
229
@font-face
ﺻﻔﺤﻪ ﺍﻯ ﺭﺍ ﺧﺮﻳﺪﺍﺭﻯ ﻛﻨﻢ360 ﻣﻰ ﺧﻮﺍﻫﻢ ﻛﺘﺎﺏ ﻛﺎﻣﻞ ﻭ
$' $
1 ! @
9 288 !
289
1 [:
F+ !
263
M8
h
265
"P
266
1 ! +Rl
289
+
290
37 a
P( 1 ! +Rl +< 5 F HTML5 Herald
296
HTML5
296
O
API
IndexedDB
299
- +8 Drop
301
Canvas
302
Canvas
L0
( !
canvas
304
canvas
R
F
. D .#
. d
306
M+ Nd ;< 0 +
311
. !".# -+.
,
S( E
319 "+@
!+
O
322 canvas 325
&
+
$V"
R
-<+'
& j %
canvas
h:
5
$S( C Z " (
getImageData "
b$ *+ 4
O =
329 330
SVG SVG
Z&# -
$ -+ -+7 ( cache.manifest Z
$ P D$
server
" ..
Manifest
Z.. ' .. F
'
++4(
D ..T
275
HTML
3 . a> ! .+Rl
.
. 1 !1 T
275
a'N ! @
276
"+
( " $#
a'N
6T
(
FM0 +< 5 F
'\
HTML5 Herald
.P(
FM0 -, F
"P
fallback j0
FM0 3 $ P EF
cach.manifest
1 . ! .+Rl
$S( C F
canvas
HTML5
281
canvas
318
329
271
280
O H &# -
( H &.#
$..
279
C
314
329
..+< 5 ..
..
278
3S0 - +
Canvas
307 fillStyle
322
P(
..
& .# 1 m R
0
4<\ 6 C -
307
316
&#1 m RE
canvas canvas
RN
271
277
/0*
305
2a
. F".# ! +Rl 1 F +%>
-
canvas A+P
304 . -.
%
S
302
M
h8
FM..0 :"..
275
301
&, N
H$> ' *G
273
Web SQL
?%I 6 Canvas, SVG :;2 . ? *+
Drag and
+45$
272
Web Sockets
298
&
) & .# 1 m .R + 4'
Web Workers
297
E
+' KT o
270 % "5 B! %
'\
290
position
Z. '
' .8
1
.5 FM0
282 283
-+
a N 1$
284
*+ 4
= P( 1 ! +Rl
285 .P( 1 . ! .+Rl ;.< 0
!$+.#
285 * E 1 ! +Rl
285
<P
286 " .. 287 " 287 288
1 ! +Rl
A.. $( !"..# ! ..+Rl $O
.. !
P( 1 ! +Rl !
1 ! +Rl
!"# ! +Rl
!
' Z"(
5 $
6
CSS3
348
CSS
! %
c &
T
Modernizr 1
! @ +8
C
1
( % "5
351
8 4
Q
=
.S( -
334
Z%& WAI-ARIA $ WAI-ARIA
356
*+ 4
E $ M
1 ! @ <+'
SVG
ZV '
0
1 ! @
$S( C -
336 ZV ' 1 ! @
$S( F" R
338
G
SVG
( R"
Canvas
F"+* ) Drag and Drop 8
339 draggable)
354
Inkscape
334 ZV ' 1 ! @ 337
J%JK
354
357
SVG
333
IE8
WAI-ARIA:"
353
10
333
+ *:
0
*+ 4
351
J%JK
Modernizr
HTML
$.#
4
Modernizr:L
347
350
HTML5 3.
F".# F"+.*
F
hq
+< 5 F
'\
+4\
340
Q
(F"#
=
341
DataTransfer
&, N
:H J%JK
342
!"# drop
345
S F *+ 4
345 - "+
ﺻﻔﺤﻪ ﺍﻯ ﺭﺍ ﺧﺮﻳﺪﺍﺭﻯ ﻛﻨﻢ360 ﻣﻰ ﺧﻮﺍﻫﻢ ﻛﺘﺎﺏ ﻛﺎﻣﻞ ﻭ
AR
H$ 5 =
6
F
1
#!"
!"
HTML
# !$ %& !'
aut
! 9)
:!*;
. ! /! NYC
.
!
!
.
#" )
!< ! #
H! , !
!) .#!
.
)
7 /
! ? B. Wall Street
! J/ !
*+ , -.
, !
6 #
6
8" 2
9" =>
?
,
!> " !< / !I3 6
2 3 $ 5
!
)
=)
1
6
#
faciam LLC
#@ /
9
A0
# $
/
!9
. 9
4
0
C 8 # $
Girl Develop It ,
http://alexisgo.com/
/ 0 1
2D ? E
!
<
) /
K
93
0
. * FG
#+ ;
)
+$ .#
Resistor 2
!
/ !
? !P !
0
K
!& L
" ! 9) !
!
#
. !9
!$G ? ! R9!< ? !L
S! *0
!& L .#
/
#) !
6 .#!
TV9
? B.
CH!
& L 5
L
6 M L N)
# 5" #59' )
!& L / ! , $ ) D 0 9
/ CH
?B$
,
.
!+
2000 ?
O
.#
R) 6/
)
)
? B.
< N) GIF ) Q0
K /
, @
U
/ . T
! ) 8! 7
Q>$ CH .#
)
/
T )
K
9 & L
http://impressivewebs.com 3
/ ! #) !X
& L !
!
1999 ? CSS3 /
:!)
HTML5
/ !
/ 8!P /
* !.< /, !
)
!
/, !
DP a^
"
! H!
. 0?!
!
9!$6 WebKit
#!
$
!DY
6 FO \
(http://www.standardista.com/) .
! ) 6 !
)! ). 9
" 9)
? B !$ / )G<
8!" 2 ! 5!
!Q@ %! ^
!& L J ) !0 ! CSS3 HTML5
!
#
Z $ 2007 ? FO !$
9" CH ! ) ! @9
#*_' :)
9D W:) H
? ' )<
!5 CSS3
& L
+0
/
[ *) \0 WebKit
.
)O /
! HTML5 CSS3 #!! /
@)6 ]0
!
! 9 ! ;H3 K / 5!! K
5
0
0 JavaScript (.
2] !
1. Alexis Goldstein 2. Louis Lazaris 3. Stele weyl
% &' ( ) ! CSS3 HTML5 " #$ !& L
' cQ>0
)
9d+
#
9
12
# 5" & L ^ &
K /
. !)6 ! K ! & ! (WIPA)
#
,
X
)
!
K #59!'
!QQ>
L!
! !
a^!
!9 *_
!
! #
. 9
,
Max Design (http://mxdesign.com.au/) #)
?
18 F
.#
$ CSS / . 9 9$
ﺻﻔﺤﻪ ﺍﻯ ﺭﺍ ﺧﺮﻳﺪﺍﺭﻯ ﻛﻨﻢ360 ﻣﻰ ﺧﻮﺍﻫﻢ ﻛﺘﺎﺏ ﻛﺎﻣﻞ ﻭ
7 !
/
)
6 K
5
G!- 9 6
=) ,
0 I3
/ 3 +] 9+
& L / /e 9 0 , @ J & L #+ =) / ? . ! = , @ #+ / =) 8 ) & L # , < =) 8" & L /e 9 0 ) . , 6 P K & L T V3 _0 CSS3 HTML5 ) ! ! 9 !& L ) ! / !-) ! D 0 9 , 6 #) 8! :!) / ! . < K #_0 / # 9d+ . $ )G<U ^5 6 N* ! !0 ! PhoneGap !d+ ) ! 8 9 .# , $ 6 /e 9 0 ) f! > / ! 2 !@ < / ! , ! d < " .</ #1) P HTML5 CSS3 , @ + # , $ %Q +$ , + @ 0 $ / 9 T ) ]) , !$ , .) 0 D+0 Windows 8 &. $ , $ /e 9 0 + , @ # ! ) 9 ) JavaScript HTML5 CSS3 , @ : 3T ) 0 # /! 0 @0 g ) V [H+3 $ P 9) / / N) 8 , 9)6 /e 9 0 ) / ) -) F *3 . Java ) C ,$ $ . F 8 8P & L ! ! /! ! !) P / ! /e ! 9 0 / 9 h 9 @ A / ! K! !) Z !i !) ! *0 ! / K / 50 . $ +P 0 " ! ! + ? !j + 6 / K / 9 K ) ) $ .2 K > +P 0 HTML5 7 ! 6 / ! ! K ) 0h P )K ) $2] / $* F !' Q !+0 !" L . h!P ! 6 ! ! ! K ) .# CSS3 h!P N!) !93 0 # , $, ai 0K ) CSS3 HTML5 / # ; !9 ! N!+ # , $ k8 j # ; ) 2 / " L 9 , @ 6 . 9 4 D ) P # ; 6 2 D@ / V 6# *; / K +P 0 ) K! #! !; QQ> " $ " V " ? 5 QQ>0 e +0 9! 9!$6 ! - / ! ,e " L ) $ P : . 99 , @ .#! , !. ! " !V !QQ>0 / ,e / ? 5 93 / & #B g -) ) ? !5 !QQ>0 ,e N!) / ! T $ Q; )P T " T +Q0 : . ) :& / ! ! ! T l) L ) 0 T9 k - ,e 8 _@' + ; < 2 - V ! !P ! 8! K ! f! > / ! =!> . :' ,e T 9 ; m *0 ) P ,e 93 #_0 ) => "i F_i 0 n & ) # $ %^ 2 & / !-) h !9 !) , ! !X / !0h !P F _ !i 0 2 5 2 , 6 «TP » .T9 " 5 K !& L !" & ! ! ! + ! T$ 0K ) +P 0 2 .T$ , + 9 9 ;H3 " & ) ) ?B$ 5 *3
*3
% &' ( ) ! CSS3 HTML5 " #$
14
WeDesign K
!& L 7 ! 6 #)
/
& L !) P / ! K !
K
& L/ 9
X
T0 ) U
!$
6/!
)
!+P 0
1388 ? .
q6
& L
H / 8
*0
FO \
/
$
6/ ,
, . 9
. $
+0
K
TP
) / # 5" /, 5P
K
) .#
, $ +P 0 / K
+P 0
6
K
K
& L/
. F 3HL %
http://www.wedesign.ir/ :#)
0
& LT0
WeDesign
/
I3
8 a.abdolali@gmail.com : +)
0
6 l) L
DVD :#
)
/ &
#
,$ X K
K . 9 8!" 2 !
, @
\0
) . 9 %Q
CSS3
/
/ T
:
HTML5
f > # " quicktime
/ ,e < /,
$
6 T " #3
8" 2
, +
6/ =
10
-)
@ K
)
$
6/ T "
ﺻﻔﺤﻪ ﺍﻯ ﺭﺍ ﺧﺮﻳﺪﺍﺭﻯ ﻛﻨﻢ360 ﻣﻰ ﺧﻮﺍﻫﻢ ﻛﺘﺎﺏ ﻛﺎﻣﻞ ﻭ
P
•
/ 50 •
/ .#
•
" # " 40 •
, $ MH'
:) +0 /
8 DVD N) K
K
) /
DVD
8
! , @!
N!Y
U !.
? + & s ) , 9$ d ) ) 2 )6 . )G< +) HTML5 :!) " P / P #3 #$ T +Q0 d ) / ;6 9 C D$ 2002 ? ! #1) ! !P createElement ! , @ ! / !P . =) 8" XSL 9 ! HTML 1/ ! %! Y .> 9$ ' 93 $ P , @ innerHTML . N* CSS , @ 0 + #! 9) / $ f) 50 / , 0 ' 93 .#" Ft ; HTML5 =*9P 2008 ? !' 93 W !99 ) ! 9$ !) P !' 93 9 ! 0 + : . 8 06 > 1 / 8 CSS 9 / P " 93 * Y 9 0 + ) ) P HTML5 / ! , ! < , ! ! 5 , 99 #\ \& + . $ + ? +3 ) P / % Y ) . ]) 2 ! =) ! #!$ ) ! ) / !9" 0 =" . 5 T ) ?& HTML , F ! ! ! F ' » :#$ 3 T %^ ) K DP 2 9 !! ! !) ! !D90 ! !$ ? ! !+3 1!!! #!!! 9) 9!!!$ / ! ! %!!! Y ! ! CSS ! !9" 0 !) . 9 " 5 ) P% Y 6 9 , @ document.createElement(elementName) N*! 6 ! !0 ! !P T! 2 ! !) ! *! Y ZHL CSS 7 < 0 «. x Q $ ) ) !9" 0 !) ! 6 K O !5" !+ 9 + HTML5 F 9 / ! ! !) P 9" 0 ) » :#@ _$ #$ ZHL 9" 0 ) ? & 0 . $ «.T $ 7 V 9 6 0 6 IE7 / + 0 ' N) # P 5 N) ! ?&. , @ HTML shiv F *3 #$ = H * ^ 4y : 9 #; / 5 F ; @0 5 . .9 IE HTML5 ? 5" / #1) { $ :2009 ) e • " !i Modernizer ! > ! >! HTML5 shiv F =}06 ~ " :2009 X e • . 7 6 ! !) ) P +P #1) P/ / " & , N) :2010 ) " • . = #1) T]& T / + 8: < .#! HTML / ! tag !+ ? !' !+ K! !) 8
t
!V9
$ , 9.
!$ , @ ! HTML %! Y !) HTML !Q93 ,e " tag ? 5 Q93 % Y ,e , $ +P 0 / K
2. Working group 3. Sam Ruby 4. John Resig (#
8 jQuery
5. Remy Sharp 6. Kangax 7. John-David Dalton 8. porneL
>
T
Z * c>$ ) )
%q .T9
.1 )]6 / <
% &' ( ) ! CSS3 HTML5 " #$
16
1 ! / ƒA0 shiv #1) $ P O 5" -) 899 0 :2010 ‚ • +!! q !L ! ! . ! /8! - T!!q . G! !+ IE { !Y / ! %! 9 _@!' . 99 7H0 , 0 :& , N) " ) / T K 9 5 0 2 IEPP !Q ! !) IE Print Protector :) " T „ < : 0 P :2010 :) 6 • * !.< 8! { Y _@' , @ HTML5 shiv F + .9 . , $ " i HTML5 F . …) 50 IEPP , $ X :&, HTML5 shiv +) ; F :2010 :) 6 • 3 ? \ GitHub IEPP #" , D3 ,e < #) " :2011 ) " • . =) 8" 8 =3 U L =0 ) %0 0 6/ "/ # 0 , $ X ) P/ HTML5 shiv Modernizr > $ . 9 IEPP v2 :2011 :) 6 • HTML5 F ! , @! ?& -+ ? & , @ > ) . 9 .) & L / ! f > " / + /, 9 . # ) + N) D90 HTML5 shiv ! , @ / 9 ) K DP 2 9 D90 ) .# 6K *. < +!$ K ! ) 2 .T) =\ ) 8 +$ 9 + / " G ƒA0 K ! #! !) !. F !D %! / ! , ) ! D W ! 9 :!+3 : !$ !+ ! !0 !9 l) .0 . ) G- 4 $ -) O 5" ) K ) .# 0M @ 0 6 / -) i & ? & CSS3 HTML5 / +!$ ! ! !) ! ) 8Y ; 0 / ) 7 / % ^ !& ^ !9 5! 0 -H ! ) – 9 ) . ) * , D HTML5 0 6 , @ ! / ! , !$ ) ! D !0 !9 ! N!+ +!$ # 5; $7 6 , $ 9 6 . ) HTML5 K / !5 :! ! !9 8! +!$ !$ ! @ ! ) ! 0 ! K! ) 2 +) . $ , ]
/
4
=) )6 ? < 9 5 0 jQuery HTML5 Boilerplate Modernizr > 2011 :) 6
$ ,9
5
0
1. Mathias Bynens 2. Janathan Neal 3. Alexander Farkas 4. Paul Irish
ﺻﻔﺤﻪ ﺍﻯ ﺭﺍ ﺧﺮﻳﺪﺍﺭﻯ ﻛﻨﻢ360 ﻣﻰ ﺧﻮﺍﻫﻢ ﻛﺘﺎﺏ ﻛﺎﻣﻞ ﻭ
!)
! "
T +!Q0 ! 9)
.T _$
) $, +
!
HTML
.T) .
)
a^
! m !
)
& L / /e
:; &
! ) #1) !
+$
T
?+&
)
! N*!
)
x
/ 9
‡)
5
) P/
0
K>
CSS3
9 0 )
8
#
6
HTML5
) 0 ) PU. K
#
)
+
F D
!$
#!
!_
!0#!; #!
! + . !
> :!
!L !
h!P
%! q ! K
)
9!
0
K #!_0 / )
)
) 9$6 CSS
$
$ ,
0
) P 3 i
9" &
l) L
0 T 9 N+ +$
9
-
D6
& L .#
! / !
&
!^Y ! 9) ) ! /e !) P / ,
&
9
!9" ) 0 !) P 9
!)
$
‰ !3
#
a^ . ! T
CSS
> CSS .
! !
N*
;
0
!T 9 Z $
, P .T 9
0 !'
. !
!9
!)
!0 0
!\ / ! K !
! 6
K!
!
0 ! HTML /
!
!9 , @!
!
101» K
, $ +P 0
!+ 5 0
% ]9)
!P +_
8 CSS / 0
0
# )
" /
!) / ! . !
>
.#
) * , D «K .#
,
,
K!
{Y
Y
+$
99 0 "H
)
0/
K
)
"
9*
Y K
T)
6
+$
) :01& #
, +
) 9$6 CSS )
1
HTML
9
5 ^
# 8 / $ HTML {Y
& L
5
-
. )
/ ;6 / +P 0 "/
X
\ ai 0U '
% ;
D9. < +$
) t
,- . & 9
+ . F
HTML5
) 9!$6 CSS HTML !
+!$ "
)
HTML
T9
# +
& L #
) $
$
( , $ ])
+$ =
CSS3
+
(
/
) +
<
,$ $
HTML
k
= /8 Y K
U $ 0T9
5 #) D
#) D
?j
N)
/* /! /
U
A0 :& 6
P
) 5; / ? j
$
/
.#
,
)
F 9
= / K
0H .
HTML5
? L
9 0 ) 4
T9
# 5;
CSS3
9" / E0 F 3HL K
) K
)
+
+ /
,
HTML5
"
m
. / ! :+5
$ cQ>0 CSS3
2
@
N)
&. )
?&
! + . !$ #>!
/
>
. ) !
9)
; F .
0
CSS
, @
/
9" 0
8
; F .
0
% &' ( ) ! CSS3 HTML5 " #$ <
HTML5
!
!t
!
!)
) 9$6 #1)
#1) #1) !
! < ) 9!$6 #1)
P
18
P ) P / API
J
K
PF
!\
! #!!
2 O ! :!!Q" ! ) 4
.#
/
iK
/ => / \
9
VU '
P
/*
. )
6 :Q" / ! . ! m !
+D" /
:Q" ) .
!) ! , !$ 9 :*; :Q" c>!. Z !i N) D90
)
#1)
: . >
D6
P 0
)
)
4 5# ,- . 3
:Q" % q .# + +i :Q" , ) : $ K ) t ) ] ) D > %0 0 D6 P :Q" 0 9 , 0 0 3HL >
&6# :7 8 f!) 50 ! ) / G . / ) d>) 0 / \ T / % ^ 9) :*; . ! 9 , @ ! CSS3 HTML5 + 0T9 k , 99 h ; )O 9d+ T 9 !) %! q ! T ! ! a !i 0 T) !< ! ! ) * .< # 5i 1 . $ " L $ * – , @ : ;, ) P / / 9" HTML5 . >;4 <. = ,+ 9+ :: ! 8 #! , !$ " !i HTML5 ) P J/ ) 95 ' 93 +$ :Q" ) !.) + #) ! N!) :' T9 " 5 +$ HTML5 Herald #) 1 .T 9 " 5 T s , $ , 99 div / % Y 9 " .T 9 6/ K ? L # . ! 5 ; i & ? & HTML5 / 9)8 .T 9 " ^9 + ! header article, section, nav, footer, aside: d+ ) % Y 2 HTML5 .& 9 . & 6# . >( -& :: 8 !X 6 l!) L HTML5 ! T 9 U ^5 / ) P , +DP 0 :*; :Q" % ^ , !P +$ T) < / -) / 95 5 ' 93 1 . 9 TV9 % ^ . ) 9 0 95 < / 0 9 CSS3
HTML5
1
HTML5 . >:& :: ?- 8 m ! ! 2 !" ! #! , @ ! :! ; !i & ? !& HTML5 / # ; ) 0 9 ) :! +) / " ,$ F 3HL #_' 0 k : $ i&?& . $ -K !> !0 k : !$ ! ! -) 99 NY (URL) K F _@' 6 ) 5 4 3 !& L !0 #! " ! !+ . !99 ! * .< . Y / *5P , 8B „) 0 / , 99
1. Markup language 2. semantic 3. Date picker 4. slider 5. Spinner box
ﺻﻔﺤﻪ ﺍﻯ ﺭﺍ ﺧﺮﻳﺪﺍﺭﻯ ﻛﻨﻢ360 ﻣﻰ ﺧﻮﺍﻫﻢ ﻛﺘﺎﺏ ﻛﺎﻣﻞ ﻭ
,# @#
19
HTML5 ! ! 2 !" ! ) .> #3 / 0 3HL +0 :Q" ) ! ) * FG 2 " F !' ! !$ ! !$ 8! ) ! !9d+ ! ! !; !0 !) ! ! 0 !*3 ! !99 , @ ! ! ) +) ; / # ; ) * .<2 3 . $ / *$ +) ; / / ‡) + #1) P , @
! & 8A B C :0D ' 8
HTML5
# " 95) # 9) / ! !D 6 – 9 ! T
#
!)
, @!
9Y
2]
^
/, ^
) # #1)
/
;
P
2 OF
0, 6 9
$
)
)
$
93
.
99
T
P & ="
"
d+
/
"
!
!
! !0 , !
!q6 !) P / !
1! . ! 9 K >
!
:Q"
_@' :
1 . $
# " @$
0
!)
!
!9 --
9 !
[+\!
!, #
! ‡)
!
!50 !
div /
! %! Y
! !-)
. 9 UG&
2. gradient
X
0
9d+
! ,
6
)
, @
)
0
0
+$ ? & .
) G-
9
) Q0
D6
9
9
T9
h)
F+
& L
)
) /
CSS3
.# )
"
, @
9
9
A :0 G> 8 /
)
s ) 6 ;
. ,$
9" 0 X
/ ) 2
!G
$G
c\
. ) - V
;) @
*5P / ) )
& L
W/ -) N) 8
y f) 50 ) P / , $
0
/ )
!^ / y
$
?&
, P +$
K GP / #
' & 8A -
" 6
/ , !)
1. selector
U '
/
0
CSS3
0 =& L
!) ! * . !9
-) /
- !
(
< ) Q0 y
< ) Q0 # )<
CSS3
)< CSS3
<
8"
8Y +
1 CSS3 T
" ^5 T)
+& 4
.T)
0k : $
&6# :09E 8
a i 0 HTML5 /,
' 93 \
: $8
#)
P
T)
@
.T #$
!
=9)8
!
$ "i
6
="
, 0/ % Y
CSS3 1
+0
j ƒ c>$ /
. ) #!
HTML5
8 video audio ' 93 . : ;T
+ :Q" )
) *;
6 )
& L y
0 )
0 ) Q0 T]&
$
9 f) 50 CSS :
< ) Q0 Q93 N) /
< ) Q0 9Y
;/
0
0
% &' ( ) ! CSS3 HTML5 " #$
20 !
CSS3
+!$
CSS3
t
6
K &
#1)
P
+!$ ! : !$ ! B0 / ! , P . 9 !@> !
/ !Q93 ! & !) !- !
? !& !
@ + .>
!
!) \ 5
9
9
5
F
!i & ? !&
" t
#
) $ s Times ) Georgia s
0 " K R)
/ # "
#! "
*!
!
!- CSS
=) !+
!
.T 9 , @ 5
/ !
‡)
!)
. 9!$
n
*PA .
)
/
/
& MO
" 5
U !Q
! )
F !3HL %!
Q> "
L
F ' D6
/ ! !D 6
!
0 !
t
* Y
) J ) 08 -
, $ " i HTML5
0
, !P +!$ ! ! #! P
#
?
/ ! ! T!
SVG
Canvas
x -) /
.
$
* .< % q
#1) . 9 T
/
]
) T
" 5 +$
xQ K
9)
/ :Q"
9d+ .K #_0 / + 5 9
_
P API / 0 V
/
k
*$
$a i 0 :
L
9d+ –
/ +
) ,
API
9"
K
-) ) % ; /
9"
9
,
.
Canvas, SVG :0>!
Drag and Drop
T!
$ 2 O
) P:
. 9 , @ !]) ) !Q0 =) !+
T)
, $ & L :)
)
! T9
0 V
, @
P / API
9 0
@ 5i
! T!
" i _@'
- F API
"
L M . >,# +& < + # * 6) # :0>! 8
! /
D90
- :Q"
T )
6
# "
3
, 4E
:T)
Arial
T) /
0
@ > #1)
!+5
# 5;
T9
) ,
. , $ 8D]
! @ T! K
! T!
)
' :0?+ 8
aP 0
< _@'
+0 _@' / _ T 4
K!& *
) , $
1! . !$ / G!
i&
.+
" )
#
, 9)6
? L
9$ #
D 6 l) L
float
2 +0 0:
Verdana #
0,
9Y : $
WT
* .<
) !Q0 / G
/ !) PJ ! ‡)
! T!
0
2
, P
B0 / , P ) . 9
- . >I&J *+
s !$2 d T
, P
/ Q93 0 : $
#
$ + ,+
"
+ ) )+ ) < 0
0
. 9 !)
.+
d M L
) ,
!. +
T +$ T 9
E & HA . > 1 :0 9> 8
, P )
9 n 5
!9 * / !
+ ; 8P :*;
G
:Q" ) . $ , d <
keyframe
1
1
T ) Q0
1. transform 2. download 3. Geolocation 4. Offline Web App 5. Web Storage
ﺻﻔﺤﻪ ﺍﻯ ﺭﺍ ﺧﺮﻳﺪﺍﺭﻯ ﻛﻨﻢ360 ﻣﻰ ﺧﻮﺍﻫﻢ ﻛﺘﺎﺏ ﻛﺎﻣﻞ ﻭ
8
? :Q" # > )
"
*
,$
< a^ 6
, @
# 0
,# @#
21 * 9 Drag
)8-) P – T)
)
#
"
F '
!< ! / !) P #1)
_@!'
6
P API
!' 93
. #
6
; 0k
L
. $
* .<
0
K
*;
_
-
.
/
+ ) and Drop
. 9
+ Modernizr :R
! >
Modernizr .#!! HTML5 F
CSS3
!)
. ! ) 9
!
!+ HTML5 / ! ! +0
! >
!&
CSS /
)
)
!P
/!
8
* ! .< [ ! *) \0 ! #!!
!.9)8 : !$
T! K ! ? !L !
8!!
.T) , K
,
.#
/ !
Y !
N*
!
, @
6 hP
/
9
h)
N) +$ : $ )
, $ 8 +0 CSS3 HTML5
8!! N!!)
6 #1) !
, P +$
6 Modernizr )<
!
,S ST
)
#!_0 !
HTML5
N!) 0 99
!$
!
!'H N!) !
+! P
; m *0 !
! k
,
7
N+ +$
T!
!j_* / ! . 99 !0 T !9
6
N)
.#
, $, @
/
9
0!
9 "
6 ! , H!3 . !$ . )
/
8
! / ! !
+$
" !i ! T 9 5 !9
P
m
.
) !)
=>
-) / :Q"
6
#$ :
K
N)
!@
/
9" )
" /
)
"i
#! 5" ! * . 9 ! ! " !t
9
m
!
:! ;
B0 #3
6
0
,0
, @
F 3HL \
) 6 _@' / : 9 #;
1. Microdata
_ HTML5 F 9
!$ / ! D90 label ) .#
. $ * f^
F !@0 !0 T) ,
K
)
#
)
+$
'
N*
Q>
)
. $
0 ' ! !U
:L ,S ST
.>
, 8)
/ % Y
, 8) }F 9
9$6 /
K
HTML
9" d+
WAI-ARIA
) , $ 9 ;H3 Š_* $
m
, d<K
, $ ]) / /
1
! label / ! N)
)
/ 3 +] WAI-ARIA
/ L
0
6,
,S ST
F 9
+ P 0
9$
6
WAI-ARIA :
. !$ ! , ! 2 !
P
/
?j
9Y
!
E * W . >V&W
) $6 +$ /
6
), $ P
T9
[O + &
f > / =>
% &' ( ) ! CSS3 HTML5 " #$
22
> : 9)6
=) +
: $ )
K
,+ S+ )
<h1>A Perfect Summer's Day</h1> <p>It was a lovely day for a walk in the park. The birds were singing and the kids were all back at school.</p>
,
6 ! O!
#!
6 ! m !
)
)"2
$ K
/
$ 6 : ) 9 + . $ example.css
.footer { background-color: #CCC; border-top: 1px solid #333; }
:#
, $, @
:) " 2
9
excerpt
+
$,
=) + :) "
.> D90
example.css (excerpt) border-top: 1px solid #333;
=) !+ ! T >!i #! " !
!) P =!>
!$ " !i
! *; /
/
0 :T) 6
function animate() { new_variable = "Hello"; }
/ \ /P
$
NY
=> N) D90 T 9 :T 9
0 , @
0 N) T / +3 ^\
function animate() { ⋮ return new_variable; }
ﺻﻔﺤﻪ ﺍﻯ ﺭﺍ ﺧﺮﻳﺪﺍﺭﻯ ﻛﻨﻢ360 ﻣﻰ ﺧﻮﺍﻫﻢ ﻛﺘﺎﺏ ﻛﺎﻣﻞ ﻭ
> # H3
,# @#
23 >
9>
>
&A < >, +
.
%2
%. /0
%1
$%&' % ( )
. *
+, ( )
*
- #
!" . 3
.$ *
.$ *
$(
8 !0& 7 +
45 /6
ﻣﻰ ﺧﻮﺍﻫﻢ ﻛﺘﺎﺏ ﻛﺎﻣﻞ ﻭ 360ﺻﻔﺤﻪ ﺍﻯ ﺭﺍ ﺧﺮﻳﺪﺍﺭﻯ ﻛﻨﻢ
" #$ CSS3 !Y ! 9)
! , !
T !
9
)P )
F _ !i 0 ! #! + 8X !& K #!_0 / ! !93 ! +$ / ! Z $
9 * T) ,
:!Q" ) !)
/, 9)6 /
0
)
"
)
8" 2
\Y /
6K
) -
&6#
HTML5 /
9" )
CSS3
HTML5
/ #)
T
) ,e <
^Y
)
$ n & :Q" ) % ^
K /
. 9
9+$
.
6
#!
#!
!
!)
>!!
!
!P .#
: !$ >
*. 9) /
8" < d>) 0 ! %! q
!
*; >
0
, $ "i 6 ) –
!
#) ) ! : !.
1. Markup Language
i&?&
8 / ) P
;
, @
9d+
9 /
)
2
$ + K
_ !)
!
*; / > & L
2 @ < !
!
! 8!
K /
:Q"
/ ") 6
+0 / ! )
93
>
:Q"
,
/8 Y
! ,
!) ! _ f !' 0 / ! 1
#
/ G
.
9d+
" ) *D >
)
$
HTML4
$ :' & #
)
/ &
XHTML1.0
/ ^
5 ^ T
- HTML5 6
B0 =) ) HTML5 )
,)
. J
/ API
, H3 .#
"
)
J/ G
/ ) PF
) #1)
K M L N) >
HTML
#
/ Q>
D90
) HTML5
) ! 6 HTML5 . !$ ! , @ !
V ! / !) < ? !' >! !
!
$
HTML5
P :'
/* ?+&
CSS3
9d+ .T
. 9
!
:Q" )
ai 0 1
) P/ #
9)
@ ' 93
9 +L 0 " +) ; /
+0 ;
% &' ( ) ! CSS3 HTML5 " #$ ? !' _@!'
0
#
26
, $ HTML5 l
]9 .
!' 93
!
!
8 Y.
!X
!P
) 9 0 95
/ !
/ G!
/
!
, P M L
-)
/ ! ,
/
k <canvas> % Y
_@!' :! .T
! !
/
9" )
ai 0
9"
> W3C #)
HTML
, $ "i > 0 _@'
-) / 50 /
, @
!' 93
#
< div / % Y
) P / API
/ 'H . 9
)
!d+ / !0 95 ! / ! % Y
article, section, header, footer
! 8
& L? '
) P @) 50 HTML5 +
!. !' 93 /
0 s 9
1
HTML5
) Q0 T !. #
8 / ) P
/,e
90 *3 /
)
. #
; -)
;
-) / % Y )
, H3
9" )
.
; <audio> <video> / % Y
K
?
0
9 , @
_@'
*$
# "
! "
_
*$ ^ _
API
!$ , $
/
(, !$ !$ = !<
h! 0) ! +
T!
+!$ V
#
;
!
*0 !
/
.2 #
8" 2
)
x
9) / P
)
D6
2
? 5"
#
API
$2]
* P 8" 2
, #!.& /
!) *
!i 6
!)
#1) !
!
#
T
)<
9
)
/
^_
9
T
" +$
/
P
8" 2 / > , @
)) .
) #1)
#1)
"
F
" 5 K
P / API
Q0 3/
)
0F;
. $ 9
- API
9
–
$ , ."
'H / (.
,
. $
<
_ F *3 f@> API
F @0 )
/ 3 +] API .#
/, d < F API
)
n #
/* !
& L
$ P 9
/ 5 / => /
)
< HTML5
]0
Z +]
$
]0 Y
. ) $ .#
K ! ? !L
!
!
! ) #1) ! .
!
HTML5
!
4 !.>
!
. !9)6 !+ K ! & ! HTML5
!.> , @!
F 9!
!0,
! 8
/
!
T @
! m !
9" )
=> !
)! /
) ,e
) $
$ 2 O
) T) $ E+^ 0 T 9"
!.> !-)
, * HTML5
/ =>
T9 , $
!9" ‹ !_ .> 8
*]
;
!) 8
)
#
1. http://www.w3.org/TR/html-design-principles/ 2. Application Programming Interface 3. User interface
ﺻﻔﺤﻪ ﺍﻯ ﺭﺍ ﺧﺮﻳﺪﺍﺭﻯ ﻛﻨﻢ360 ﻣﻰ ﺧﻮﺍﻫﻢ ﻛﺘﺎﺏ ﻛﺎﻣﻞ ﻭ
$
2 O
! ,$ P
-) x Q .
0
"
/ / V
9 9"
HTML5
27
CSS3
2
!93
NEWT
F *3 3
.# !
1
$
K 8-
! ) !$ / ! Š!_
!
O
]
«. 6
*0
) P/ /
/
P
9d+
.T )
&6# /7
8
9" HTML5» 9
9
HTML5
/ /
9" F *3 f@>
K
? 5 ,e
$ - 'H #DP ? & /
HTML5
9" )
+0
23
/0 ! T!.Y !' 93 4
) Q0
)
:*; ? . 6
Ajax /
!
? *\ !
!) <
h)
! :!*;
!99
.
!
HTML4
!!
.#
!
:! ; #!
0 6 /8!
/ !
K
!!
0h)
$K *_ ? &
Web Forms 2.0
K #_0 /
/! 0 1
/
8" 2
8" 2
8! HTML5 # & /
i&?&
$ ]) /8 Y 0
.
, @ $
9
.) # 9)6
$2q T
0 /,e !< . $
8 XHTML 2.0 / . $ 8 +0 HTML5 5
/* !+ !) K (K
DP 2
6) HTML5 B !DP T
9 )
9 ) W3C .#
$
#
P
9
)
#>
,
L
HTML5
$ ])
0/
D+
HTML5
, $ f;
,
>
)
8" 2 % ; 2
6
XHTML 2.0
ZY9# ! E #
0 HTML5 F 9
f >
9
HTML5
D90 0 #
) 0f > ,
0
.#
9$
0?&
,Y + :
XHTML
K #_0 /
) #) D
0/
, @
2 ".
K &
5
/
B0 L
.T 5!
XML
q6
;
9
0 !!
> K #
)
5
!!+ :!!'
$
#+
9
;
) ? L
8 HTML5
*$
K .
.
!!
: $ ]) f >
,$
/ #) 8 K
i&?&
9
" L
*$
HTML4 F
, @
B0 K , DY
)
& L #+
K
#) ,
U L
5,
P
8" 2 ! !
! XHTML HTML4 > Web Apps 1.0
/
T
,
$
, $? _ 8 K / G
#!!$ .#
/
#)
D
,
8" 2 .#
5
=< ? ' )
? !!'
! K /
K &
/! 0 1 ! /!
/ P #) D
.#
JK #_0 /
!.
! :!+3 /8!
!! )
,
,
L
(WHATWG
)]6 9d+
W3C
1. Bruce Lawson 2. http://www.brucelawson.co.uk/2010/meet-newt-new-exciting-web-technologies/ 3. New Exciting Web Technologies
.# 5. Client-side
«
P • /} » ,e
)
- Ja _' Œ@ 0 .4
% &' ( ) ! CSS3 HTML5 " #$ !9
(
1
! / )G!<
!D! \ J/
Ž }N "
( K #!_0 J
! #!
) SVG
! /
d+ K J/
XHTML /
5!
HTML
8! +0 / !P !
!" ! #!
K #!_0 / ! !
*0
:# 9$6
/
#" )
, !)
!
, @
,
)
8
!) . !
F 9!
s !$
!
0
D0
"F 9
F @
0,
) . $
!DP 2
)
$ M ^ [H*; W3C
~ @0
#
9
/
)
.,
$Š_
)
8 +0 2.0
K #_0 / 2 "
5 . $, D +
6
HTML5
/ -) F 9 5
#
P )6
0
7
x Q>
. $ , 99 R .T)
+
D6
)$
9
) .
!
6
http://www.whatwg.org/html/
! !i & ? & !-)
#!
( .# ! B0
, $ UG& 9 2 5!
0 ? !&
0
T!X
!L !
,
!) .
HTML
!D90 ! #!
/ !-) F 9 ! ! F 9! !-)
6
) ! #! , H3 .#
!) . !$
!
B0 HTML $
4
: $
-)
Web Storage
9
, $ 6
*0
)
0 9
>
, +$
) 0 +
0 , $ D0 >
8 HTML5 ) P F
/ /
9"
/ 5
Web Worker
=
@ T ,
; F !3HL / & D90 WHATWG , $ , ]9
2H N)
0 , $ D0 F 9
WHATWG
3) .#
5
) P
9 2004 ?
HTML /
! , ,
P , < #.< / # - Š3
"
/
. 93
) WCAG
W3C
! D0 WHATWG , ! } 9!
!
9d+
/ +9
0/ # $
= !<
0, $T
/ K
+) ; /
#!"
[O + &
/
2
!$#! , !99
: ;T
F 9!
! m !
M L
)
+ )) WHATWG ) $ -) /
9" ,
0/ !
!$ 2 !q T! ! 9!
HTML5
! #
, !$ : !.0 Opera Apple, Mozilla / ! # $
! & !D 6 . !
2!
!' F 9 !
(K / _ J/ )G<
3
!)
HTML J
CSS
28
#
P
, $ D0 WHATWG
Canvas /
_
5
0
, 8) .
6
$
d+ : $
1. Scalable vector graphic 2. accessibility 3. Web Hypertext Application Technology Working Group
. 9
5P
6 )
2
B0 ) :
/,
. F 3HL %
/
.4
http://blog.whatwg.org/html-is-the-new-html5/ 5. Microdata
. 9
5P
6 )
. F 3HL %
/
.6
http://wiki.whatwg.org/wiki/FAQ#What_are_the_various_versions_of_the_spec.3F
ﺻﻔﺤﻪ ﺍﻯ ﺭﺍ ﺧﺮﻳﺪﺍﺭﻯ ﻛﻨﻢ360 ﻣﻰ ﺧﻮﺍﻫﻢ ﻛﺘﺎﺏ ﻛﺎﻣﻞ ﻭ
29
CSS3
. !
6
http://dev.w3.org/html5/spec/
.#
0 !
9!
! (.#!
!'H ? !L
!0 !
5*9
93
s# Y
, !9)6 !+
!9)
9
2
)
6
8
I5
*
0
W3C
) .#
9 6
9" -)
1
! )
95
Q93 / 50
!0 ! , $ ])
!$,
0/
0/ ,
V9
)
) P ' 93 F
/ ! !0
!
N+
_@'
9
. 99
0
d+
)
0 _@!' 0 99 )G<
T
. 99 7 Z i 8!
) /
$8 +0
!-) / ! =!> !D 6
#!
!; M !L ! ! #! !99
!95 ! T
!
T
, @
"K
\
9" / 50
K
_@' N)
\!
% ^
9 0
x
L
8
T " =><
9 3
95
< #!
. $
/ API
)< \0
; !" 5
6
, H3 .#
* P/
8" 2 . $
! m !
/ ! API HTML5 / #
1. semantic 2. Third party software 3. plugins
;
-
. $
,
# )G<
.
8"
0
' 93
/ 2
$
F _@' )
*0
"
D ] P/
< O e
) N 9 0 HTML5 T !" #!
' 93
#*_' C B + +i
#*_' , 9)6 / :Q"
!& L
95
) h@ – T 9 T
99
/ !. F !; , !$ 0, ) ! HTML5
T
^ +
/ API / ) P J/
)
/ _@' :
, !$ !$ / ?! K
#
, $ & L ) < JK / .
, @!
(
)
a i 0 [H*;
, @ , +
N+
) Z +]
HTML5 &-
$, 6
+
9" HTML5 ' 93 /
B0 ) . *0
6
_
9
/ /
, $ : .0 HTML5
) Microdata WAI-ARIA
! T!
#
F 9
F @0 ? &
/ E 0?# 0 & , !+
m
F 9
*$ T
*0
8
0 , !$ ! D0 F 9 !
/
WHATWG
.#"
!
W3C
http://dev.w3.org/html5/
WHATWG F
/
!
&6# /7
HTML5
99 " +
P / , 99 h ; :)O Z +] 6K
? L
8 / . :)O . )
6
% &' ( ) ! CSS3 HTML5 " #$
30
/* !$
, @
6
! ! #!
K F _@' & L
! CSS
h^
) ?+&
!
!) !
) ) P/
‡)
F 9
5
8
% . %
%
% CSS +%
%F
2
.#
% <+; +%@ %
%
-, ! P !
/ !
&)
& L/ )
/. . 3
0
x
/ ! !) 8! F !;
! . 9
!
!)
!
. -) / # ! .#
V9 T !9 CSS3
)! ;
/
# " @$
! , @
) P/ #
CSS3
;/
x
9
K L
.# 8]
8
*0
!
.T) .#
!< ! CSS3 !) P / ! #! 8-
]
& L/
!/
09
F 9 U L
/ " i HTML *] x
/ 5
/
) Q0 x
90 *3 CSS3 / # /
$
.# 8] HTML5 CSS F
& L ; ' 93
CSS3
9
2
>
/ API HTML5
CSS3
)
/ E 0?# 0 & +!$ ! 4 !
9
. 9
)
8 +0 # 6
;+
CSS
93
< ) Q0 )
+
+H
_@'
* .< 5
F *3
95
+0 / & CSS3
?j ;
=9)8 .+
#
9d+ .(#
_@'
!. / ! / !
>
33
6
2 ] /, d < /
3
)
E
)
0 9
, @
F 9
J3" + C 6,
& L h;
. 9"
6
< = 6 >.? CSS
0 >
, P
0
CSS
;+ D+
#
*]
9
N* /
9 + .*. :9
#C.
, $ "i
*0
>
@3 .B +
+ 3
#
– -) / 8] =>
N* T
&
P CSS2.1 >
!& L FH !. !.>
0
& ) :9
B(
2.1 > ) .
!' 93 x !
A 8
*
D90 CSS3 F *3 .#
309
cascade
% G2 + HI $1
' 93 , P
HTML
&)
. 3 / !K 3 +) ; >
_@'
CSS
1
^ + .#
) ! 6 CSS3 .T !9 c>!. !$ + ~HL
#+
/
–
- CSS3
; ! :Q@ CSS3
CSS3 &L
) P/ #
1. Cascading Style Sheet – CSS 2. http://www.w3.org/Style/CSS/current-work.en.html 3. selectors
ﺻﻔﺤﻪ ﺍﻯ ﺭﺍ ﺧﺮﻳﺪﺍﺭﻯ ﻛﻨﻢ360 ﻣﻰ ﺧﻮﺍﻫﻢ ﻛﺘﺎﺏ ﻛﺎﻣﻞ ﻭ
K
)
; Y
T)
6
31
CSS3
! )!
d+ /
! ) P/ 6U !
. ,
& L
) . 9)6
#) !
),
,e <
!
!& L !
]) 2.1 >
/
/P N9 0 )
K &
/ ?j
!$ , @
/
M L N) 9 0
, @
#
, P
+
!*] !' 93 !
HTML
-, P )
/
!)
! 2 O ! , P ) / 8 +0
y !
! / ! !$
]) /
8!P ! !
!& L
. $
,
) T)
y!
, </
_@'
0 ]) / / -) ,
)!
, @
,
-9) [ 5;
, @
9" 0 )
'
)
.#$
- , 9)6
-
-)
!08! +0 +!$ _@!' ! : ! 9) ) Q0
$
0
6
) , P
+P
/
. $
&
$
, P
/
D-
]9
8
, @
P
, P )
!L
. * 3 <,
+% . %
+
8 % #B +% % D%" (' %
% . %
= %S
1
8
.F U &
+ +; +
M +
% !
3*
31 " VGS +; +
+
+/1
/ +
F
7)
+ D
.Q
.L
+
.F
M +
&O
&O7 1
&O
. F +; +
!
+ #= J LS
# 3
. F8 1+; +
/1
* 3 + +@
8
/1 $1 +") #
+
"+ #
7 + <,
8 N"
+
-webkit-tranform
1 63 8 1
1
. F 8 03
/1 R
1;.
03 8
transform
+
M +
0/ 1
8. * 3 1
M L
: V+6 DK< D" ('
KX3 4
& O +/1 8
O+ 1+; +
"+ 8
R
=0
"i
* 8
#+; +
% P <+ <
8# W " * +
, @
. F8
M +
& O ('
<
3 %* : %
+1
8 % # %3 3 WebKit
% 8. %
1. gradient
%
1
CSS3
. F8 B
T +; +
. % M %+
# 3
&O#1
% -moz-transform
9
:
D" 3'
<, N"
CSS3
/ $
!
/ "i
) Q0
)
$
_@' / G
9" 0 )
, P +$
h" 9
0
0, 0
/
)
P
+
)6
$G
.#$ _@'
-9 +
. $ , 8" _@'
9" 0
0
=< )$
. 99 , @
& L q6
y
$
!0 N) ]) /
F;
6/
$
) -
s# !
8
.T) , ) F 5"
M L ; ?
1
$
N9 0 )
. 99 8) + CSS
&6# /7
HTML5
+
& !
8 31 CSS3
+
+, S
3Z/1 1
1
.F
3 8
O
% &' ( ) ! CSS3 HTML5 " #$
32 .
% 8%
L #
1
N " .Q : 1
1
%& O
03
%
/%
1
+&
3'
8
.
N"
+ \
#$
_ "
8
^,
!
T !9 Z !$
!0 T !9
!
!L !
T !
T!
6 T9
#)
)6 !
/ _
&
1
# Q
9R
1 + \
L # 1 + \
R 8
1 .Q +
Q
=S
[ +, S = S
M +
X /1 #
/1
. 1 BR
1
C. 1
ZO
8
1 *
+ "
+[ /
- % &' ( ) ! .& !
0 ) P / ,e < 0 T 9
!$=) !) T !9
+@
(2 = S
/ F + + #+
/* !
:
# 0 < +; + ] %
(2
9 6 8 CSS3 8 S+
%
1
CSS
O+ 4
CSS
% # %*
/1 +/1
+ .
+%0
8 +7 )> + < %,
&O
+
& L
5 l
$
2
L
T9
! m
/, \
F
) 0T9
#
#)
[#
5; / #_0 /
$# 0
_@' / 8P =9 Y :) +$ : $
$ 0 6
& L/
<
.T .> / ! ! .T !9 =) !
7 ! ? !& ! ! T )
#!
T9
!) 8
+"
, @
-#) ! K /
D90
)
? !' ) 8
+ ) . /
)
) .T #)
7
+
/
5; /
/ , $ ) 0 ĥ B0 ,
D
& L
-)
) 0 +3 : ;
6 T9 Z P
T9
, @
K
.T $ )
+) .#
+!$
$ / % 9
D / , $?*
%0
)
+3 : ;/
, @
5;
+
K #_0 /
: $
$ #DP
) $ 9 + #
) ,
.T 9 , @!
*D
T)
C 8
#) 3
n &
CSS3
,e < N) % ;
HTML5
T)
5
.T)
R Y# . >& ! ) , $
, !$ : .
T !V3 ! B0 Š!3 ]) Š3
)
. $ +
6
, $
+) ; /
, @! F
#!
5!
B0 )
T9
M L
$, @
0?& . L
9 HTML5 Y #
: ; q )
ﺻﻔﺤﻪ ﺍﻯ ﺭﺍ ﺧﺮﻳﺪﺍﺭﻯ ﻛﻨﻢ360 ﻣﻰ ﺧﻮﺍﻫﻢ ﻛﺘﺎﺏ ﻛﺎﻣﻞ ﻭ
&#
2 O ^
$ ]) =) +
33
CSS3
!) HTML4 ! !
XHTML
(
T
,
0
/ ,e <
Ĺ _ 2 :Q"
=) !+ !
)
). #
9 +L +$
0
+$
1
B0 HTML5
:!*; !9 + #!
! +$ M L 9
) T
*5
, $ *50
$
CSS3
! )
!9
. 9
+ /
!
8 ?)
+%
) P/ #
a +
; .
99
%1+; + $(%
d )
%&
%
%
.`*
+F B
% M +
2 Q
% %
! #!
;
9)6 " ) F ; -#!
<
!)
!
. 9 ! !
V
,
Z
! J
9
W !
!)
! ) #1) !
*!$ / ! N! 9 0 ! . 9 / , @
K #!_0 8! N) 5 " !i .T 9 #!) D T !9
$
;/
+
P :+_0 F ;
.
)
/ 5 / ?j K
.T 9 9$6 N 9 0 )
pollyfill
2
]
3
99 , @ 9
#
$ + K
T "
+
* .< #
# + #3 )
)8-) P / N 9 0 T) f5i m \
1. Doctype 2. http://gs.statcounter.com/#browser_version-ww-monthly-201011-201101-bar
/ ) P/ #
;
) D .+ )
#
;
9)6 " F ;
;
pollyfill
_ ,
,
, @
#
. 9)
CSS3
.#
0, d < +
* .< +$ V
[ ' Q>
!" 5 +!$
]0 ? &
*$
G;
+%% . % 3 %
)
! )
0 Q;
k
.
6Q + http://www.sitepoint.com/
T " Flash >
, @!
*$ 9
) P/ #
$( #2011 +3 8 6 73
!) P / % Y
V
!+
9L
? 9 # > +$
HTML5
!; !
+ 3 +; + $(
>%%*
9)8-) P / . /
;
0 !'
! , !P
-#1) ! !
0
>
.`* %
9"
# 9) /
& c
% %3 8 %
;
* !.< #!
! . ! / !
+0
/ /
+; +
# 3 O . 3
HTML5 /
S
9 0
*0
1
W 40
< "
+%& 3 # % +%1 8 %?)
\"
, @
<
+) ; /
-Y 6
1 =S
) B0 . $
)
s#
B + +; + .
P <+ < +; + #b
%3 O
! 6
/ $
F
d+
8 )
9
}F " i
HTML5
#*_'
/Q+ 7 8
a 9E = S
%&O [
!&
47
2
95
9 Z
T IE6
; -) # 5i .T)
!'
* .< g
= +9 7
/ #
HTML5
#
9d+ +$ _@'
.# !-)
&6# /7
HTML5
/
Q;
)
6
)
i #
; )
) +$ 0 T 9
5
% &' ( ) ! CSS3 HTML5 " #$
34
! pollyfill
)8-) !P / ! N! 9 0 ! h!;
T !9 , @ !
CSS3
! / ! !$
=) !+ F !@0 ) T
!>
!9d+
!P
:!
. . ) P
+) ; /
!_
K!
!)
) #
? !&
[ !+X 8!
#!
!
! ) K
8!
: ; #)
"
99 ;
, @
Y !)
)8-) P / N 9 0 $ +
Z i
,
=) +
& .#
,.
)
#
,8 - #
) P/
* .< ) . 99
* .<
; !
6 ! , H3 (
P! &
) P/
#
^9) . $ ,
!
+) ; /
:
* .<
0 / !. / ! #!
!
+) ;
.T 9 , @
) * ! 9
; .
6 !
\9)
9)
, @
!93 ! .T)
M L F @0 P
!) P / ! #
* !.< !
#
) [ 5^;
' 93 6
#+
#!) D
!) P /
= ! ! #!
? !j
V
!' 93 / ! $ , @!
ZHL )
!
$
D 6 ]) /
! #) !
40
T
!]) / ! !
=) + 8 0 /
+) !; / !
! + #! !'
9
+) !; /
8! 0
/ !
$
#*_'
! } ) P >
1
$
X
# 9)
#
9 >
=) 8"
9 ). $ . $ + f;
#
;
N) 2
* .<
!& L CSS3 HTML5 +!$ ! T
T
, @!
& L
)8-) P / , $ ;
.
ZHL +$ \
9d+ .#
8
Y
=<
;
/ ! K h) !
)
#
) : ;
]0 D 6 9 0 +
$ CSS3 HTML5
9d+
h^
T9
99
, @
, @
" 5
+) ; /
.!&
/
\&
=!
1
!+ ! 6 ! F !@ :!)
! #
. !99
, $ 2H3 2009 ? ! , @!
! , !$ 3 ! !\ $
!
$, @ l) L
/
K
G
.#
$G
2
6 : _0 / K
, + /
StatCounter
#. / '
#)
0
, +
DY
# # .#
@0
/
ai
$
$ ?&
1. http://gs.statcounter.com/#mobile_vs_desktop-ww-monthly-200901-200912-bar 2. http://gs.statcounter.com/#mobile_vs_desktop-ww-monthly-201011-201101-bar
ﺻﻔﺤﻪ ﺍﻯ ﺭﺍ ﺧﺮﻳﺪﺍﺭﻯ ﻛﻨﻢ360 ﻣﻰ ﺧﻮﺍﻫﻢ ﻛﺘﺎﺏ ﻛﺎﻣﻞ ﻭ
, + '
DY
#
)
6
K
,$
/ -) / N 9 0 @0
E
-) /, 99 h ; :)O .#
N!)
:
0 ),
, @
&S> G A ] &J !@ 0 l!) L
K
) $
, @
? *; : ; /
* , D CSS3 HTML5 / #
T)
\
\
)
=
Y
?&.
/8 - #@-$
) ? 5; L
35
CSS3
! .#!
L + 8 [ 5^;
L !*0
Y ) ?&K
)
K &
!?
+
‰ 3
\ +$ V
$
'
400 W#
'
!
P
/
! :!) !9
/
: $ !$
x !Q> / @}
<•
(iPad iPhone /
!
!
/
1
!
* !.< / !
!)
!) ;
! 2
/
9 ) . 99
J:! 3 T ! !
Offline
*0
/
0 !
!
iOS
/
Offline
,
/
$ )
8
:)
<•
* .< CSS3 HTML5 ;
/
)
: 3T
; . 99
# " @!$ #!
8
* .< :) ^9 +
* !.< CSS3
) $
/
HTML5
P
!) P / #
)$
9" HTML5, CSS3
. ,$
, @
8
\
CSS3
/ /
?j /
8
SVG Web Storage Canvas API
!) P / #
6
\
4
P 0: ; s
/
&6# /7
HTML5
y :
,
90 *3
$
/
k CSS3
$ . -)
/ ! x
L
T9
" 5 +$
! Web Storage Offline / ! !99
!
!)
!5P
#!
!
!
, @! . !
#! 8
)
!$
? L
) /
9"
/
9" . , $ & L :)
l) L !_
#$
8
) ) /
9) ! /
!9" ! 8 K
!@ > /
!9
9) ! :!)
, @
/ !-) / ! /
8
K
/ 0
!
%! q :!)
#\ \& $
,$ & L L
/!
$
P # 9) W
T
9 l
, @ . 99 ,
0
Š_
/
)
0
9" ) D6
/
, @
! T
k !@ CSS3 HTML5 T /!
!_
!> !
! T !9
! & !)
>
^) $
!& L
+) !; / !
\" T 9 , @
) P/ 5; /
!$ ! !) P / !
+!$ !D 6
l!) L
!) P F !
!)
D6
2
#!
)
1. Android 2. Offline apps
!*]
! ,.
#) !
/ ! ) 0
@ > / !
)
*!$
T
. $ , @
! 0 ! . $ , +
!)
9" N)
+ ) ! F _@' )
9
!_ @0 $
+) !; / !
9$6
, @
D6
9 /
?&
>
3 &J #
? \5
: ;x
< M L
/ .
) . $ , @
: ; f >
/
P
/
9$ #
#
)
9 K /
>
K / )
9$
>
) $
9"
) $
6) ^ &E . & +)!
6
10 :Q" .
/ ! N!)
)
$
)
/ .
.
% &' ( ) ! CSS3 HTML5 " #$ +) ; /
)
UG!&
polyfill
CSS3
HTML5
. ! , ! CSS3
!^9 +
. !
, !$ !$
#
)
(9 ;
)8-) P N) 8 , 9)6
2]
)
/ ! 1
9+0 ; JK
!& L / ! / !-)
/ /
# 9)
K
;
$n
,
)
D90
) P/ /
9
9"
+P ) " . < /
_@' N) #
!
D90
) G-
/ !) P K GP /
;
D- #
P
!) P / !
!& L / !
/ ! #!
! 6/
!0 ! 6 K
$ 9
)8-) !P / ! N 9 0
!]) K
HTML5
36
i&?&
6
)]6
:+3
, 9)6 /
* .< O / .#
, @!
8!
!
9" ) /
! /
#! "
!
\^9 :)O !
, @
!
%
!9 )
CSS3
. $ -) K
. 9 )
9+$ ,
6 K 0
, @
HTML5
)
0 D )=
& L/ 9 -Y
+) ; / .
ai 0
ﺻﻔﺤﻪ ﺍﻯ ﺭﺍ ﺧﺮﻳﺪﺍﺭﻯ ﻛﻨﻢ360 ﻣﻰ ﺧﻮﺍﻫﻢ ﻛﺘﺎﺏ ﻛﺎﻣﻞ ﻭ
)
/ , 9)6 / , P ?&
% !& #$ ., #
'&
1
8A CSS3
F+
A
! 6# !
! / !
!
T!)
$
)
" i :j *) / N*
) !Q0 !) T !9 n ! & ) !Q0
!^ / ! y!
" !i _@!'
6
!; !Q93 N!) !9
!9Y
!; /
) T)
>!
? _0 ? &
<
2
. 9)
#+! N!)
2
, @! !
)! 0 ! ! #! 95
"i
y
0
0
0
)
D6 9
IE9
y
!
, P # > y N)
y )P
2. Color stop
T9 6
9 c>. W $ .
) . 9 , @
& background-image, border-image F
1. gradient
#
< ) Q0 9Y
) y
!
0 ) 9Y 7
y f; 0 D 6
y f; 0
!] list-
-) / y
9d+
_@'
!0 T !9 * !
)
0 /, )
2 O -) CSS3 9
<
) Q0 * .<
9d+
:Q" ) M ^ /
B0 y
# 5;
+0
y
0
< @ L : $ F+
) 9Y
0
+$ y
A
0#
N) y N) : $ y f; 0 )
2 }y 8 y
)
y T)
Z $ CSS3
y
' 93
/ -) /, P .T) *
) Q0 ) 9Y
f > y
G- =) +
T "
& L
"i
. / ! .#!
9)
T.$ :Q"
; CSS3 . 9 L
"
) ! 6 ! / !L ! . ! , @
s#! Y y!
R)
8+
JPEG #
9
$ /
) 7
;
.T 9 #
#
0
! .T !
!t
/
/
!0 6
"i /
0 N) 0 9 0
9 ) )
0 , @
_ / 5 y f; 0 )
9 url()
< ) Q0 CSS
% &' ( ) ! CSS3 HTML5 " #$ ! y!
0
, @
178
i&?&
* . 9 , @
8
y
9 !. 8! .
>
*]
) Q0 UG&
+!$ M !L U !^5
$ + #@
!
-)
9
!9d+
< ) Q0 9 +
, P ./ , )
!D 6
!99 #" )
y
CSS
y
P
0
/! !
!
!-
i&?&
! N) ? L
! ! . 5 !i !DY ^;
) 9!$6
!^ y!
!0 ! .#
) #
!) ? !+ & , $,
) !q6 y!
!
. ! 9 c>!.
. !$ < !
#!DP !) y
!9
y # &
0 N) #
+$ V
DP
0Z
/
0Z
!
V
f!) 50 / ! / y!
0#
Q93 a^
A
0 6 5M y
0
?j
93
2011 !) e . !
" !i F 9 !
# *!$ !) #\ \&
>) T
+
) $
!
!
!" 5 = < ?
; H)
6
1! . ! , @ ! !
CSS3
.#$ /
$
)" ){$ 0 " 9
"
)
) ? j 7-1 ) Q0
. )
9 +
) y f; 0
+0
;
, $ Z $ y N)
0 )
# *$
M ^
^ y y
,
0T
0# @
c>. +$ 0 Š_
;
WebKit
, @
/
* .<
!0 / D9!. < P
)<
2 ] +$ /
, d < y9 /
!0 Q > y!
: 99
8
)
5 y
< .#
%0 0
5M _F+
. ), . !
)
) Q0 =) ) /
0 ) ? L
#
O
$
M $
) y )<
)
) ? j 7-1 ) Q0
!$ ]) y
0
#
$ ,
0
0, P
y
CSS3
‘Y
=) + y J
^ y
y!
y
, @
0 M L ) +9 8 .T
! B0 !-) y!
(style-type
0 ) Q0 y
-) CSS / y
^ :#
0
* .< ) D background-image
. /
0
(W3C) K " )"
ﺻﻔﺤﻪ ﺍﻯ ﺭﺍ ﺧﺮﻳﺪﺍﺭﻯ ﻛﻨﻢ360 ﻣﻰ ﺧﻮﺍﻫﻢ ﻛﺘﺎﺏ ﻛﺎﻣﻞ ﻭ
/
DP 2 , 0
9
! 6 # ., #
179
!
!-
WebKit /
#!
!0
!
) P/
, $ "i #
!i & ? !& ! !
! ) 9 W3C ; )
#! !
W3C
} ) P
!9d+
D90 K
!. < ! F
!)
# ,
" )" ,$
0 )
! ,$ & L y 8!
0 +) ; F
!<• !
.
9
* .<
!+0 !i & ? &
. 9
* .<
( -webkit-, -moz-, -o-) . 99
2
8 % f93
!K * A +O : #
% % Q #B +%
1
. F '+; .
%T
%1+; +
% . F % # %1+; + +& 3
8
*
d+
% %/
S
% % . 3 %* . 3
d ) %% #e %% 3 0
*
7 8
0 >]
<
:!Q" !
SVG
8
SVG IE
!
;
!
) .#!
2. Open source
A 8
(Q
E
+& 3 8 +1 +/ *
6 #+ "
/1
# * d+
)
3
T
B+
+%% WebKit
y
IE
0 +) ; /
/ ! >!
! 6
0
> !
+ \
*
SVG
Q Q
%% 8
+")
* .<
1
+; #= S
8 31
(W3C
+%%") %%<
+%%
6Q + http://nightly.webkit.org/ <
IE9
) ?& ) >*$
0 ) Q0 #
(. ! T
S
9 6
1 *
; ?•
y
*
+; + 8
.F
%%*
^Y
11.10 >
!+0 #!) D
8 . 3
Q +; + +0./
#= J 7 3
+
B85 7 8
0/ #
. 99
1. Nightly Build
.
+ D
8 %%3 !%% $ %%*
#
< , WebKit
=S
. 3 9
A +O
+ 7*
8
! Opera J +) !; / ! >
d )8 [ L #
+8#
L e 2
1 *
$
e8 +O
WebKit
= / +; + #
%9H # 1 *
% d % + i%
1+; + >.F
% 8
%1 * 8
+; + 8
. %F
T
http://www.webkit.org/
% Q %
R) 8 .
* .<
! #$ WebKit <+; +F B +
%8
* .<
0 +) ; F
~ !" / !
1
: .
D6/
* .< y !)
) / ;
=) +
/
!) 11.10 / >!
!
A /0 G> 8
) 7 -
2
0 ! !0 !
F+
0F . $
/ @}
! ‡)
8A CSS3
y!
0 #_0 > !
!
x !Q>
!
* !.< / ! . 99
!
W3C
5
2 O
) ! #) !
+) !; F
>
!
'&
99
! Š!_ :!Q@
^ y
.T) -
0 ]) /
* .< L
T 'Q
)
% &' ( ) ! CSS3 HTML5 " #$ / 1!
L
!
#
+) ; / !
y
9d+
+!$ !
/ !
TD
/
1!
K!
!+
, ! y!
!
!)
T!
! m !
/, $ 4
y
, P . ) 1
L
6 y
0
0F
1!
#)
! !
/
!" ) " WebKit
D90 #
8 N) :T) G
0TD" : ;
0 N) D90
#)
0 B *0 *5P
[O + & .#
, $,
! = !< 9$
#+
,
9
=) + 8 (!# $
T
Y
Z $ / ’ Y
0 N) 7-2 ) Q0
0,
+
.T 9
y
0#
/
7 - , $ ) .T 9
7 - , $
1 .
, @
) P
^ y
Z $ 6
, 9)6
.0 @0 T)
W3C ! :#
#
^ y
# > F B *0 => /
+) !; N*!
WebKit
0
#
$
^ y J
7 - , $
7 - /, $
x Q> F
), $ P
!$ ! , ! 0 , !
- s ), $ R
"/
!P HTML5 herald #)
HTML5 herald
!
7
S! *0 / !& ! ) 8 7-2 ) Q0
0
. $* 8 F
$
. $
y!
Y
.#
ai 08
) 9 +$ /
O ! #+! ;
!
, @
7 - / -
T
.T 9 Z $ :^!
0
) P
!-) l!) L )
! m !
180
<
+
!
0 ]) /
)
background-image: linear-gradient( … );
#DP !
50 / 0
T
. ! 9 c>. .
. 9
c>.
9 c>.
, $ #
y
0 ]) #DP
9 # & 6/
$Z $ ]6
# & +$ ! 90deg !9
y f; 0
0, $ #+
y
y
0
/ $
50 #DP f > #+ 0deg .(deg)
0 y
) 9 P
ﺻﻔﺤﻪ ﺍﻯ ﺭﺍ ﺧﺮﻳﺪﺍﺭﻯ ﻛﻨﻢ360 ﻣﻰ ﺧﻮﺍﻫﻢ ﻛﺘﺎﺏ ﻛﺎﻣﻞ ﻭ
8
< 6:
)
)
0
6 /
F+
, @
0 # &
)
) \
)
)
N) 50 /
T
! 6 # ., #
181
#+ / #!DP y!
.
P #)
! c>!. 67 !
!0 #000
m
? !j
/
8A CSS3
\3 #DP /
<. $
, @
? L )
'
!9Y #! > ! #
( @! ) #FFF y
'&
right
/
top, bottom, left
=>
+
, @
A /0 G> 8
) \ / \ %0 0
y
D L
F+
) -
j y
+
O #+
F+
) . 9 ) )
#
0 / G =) +
8
$
50
y f; 0
. 9
c>.
/
% ^
V9
. 9*
.T 9 ! ) !) (7.3 ) !Q0 9 + ) Q93 N) / 9 !$
!) !
!$
/!
!
T!) ,
, @
!. <
:(.#
! )
<
.<
-moz-
)< + j
WebKit /
<
.)
O
y
]) (,
0T
). ) * ) P/ 99
)
/ )
)<
7 - / -
y
, @
>
-o-
$
-webkit-
95)
background-image: -moz-linear-gradient(270deg, #FFF 0%, #000 100%); background-image: -moz-linear-gradient(top, #FFF 0%, #000 100%); background-image: -moz-linear-gradient(#FFF 0%, #000 100%);
, $T
Q93 8
)<
, $ Z $ Q93 8
O
,
@ y
0 7-3 ) Q0
.#
, !. ! ; ! 6 !
!
top
!L ! !
\
)
9
! 9 c>.
T $ \
)
0 '
/ #
â&#x20AC;° "= <
.#" !'
100
/8! Y
!+
8! y f; 0 ) !]
! UG!&
6
"
~ @0 '
#!
, $ ;?j
0
) V
'
\ # top
y f; 0 )
6 \
)]6 0
#
, @0 ~ @0
:T 9 background-image: -moz-linear-gradient(#FFF, #000);
! 8 y f; 0 9Y T 9 :T)
,
y
,
]) x T)
/ P @
N) / ,
y
y T
0
, P ?& 9 â&#x20AC;° " .T 9
"i 6
% &' ( ) ! CSS3 HTML5 " #$
182
background-image: -moz-linear-gradient(30deg, #000, #FFF 75%, #000);
y!
!0
!) <
N) 8 y
@
)
T)
; '
y f; 0
75
. 9 #; 7-4 ) Q0
.#
!) < !^\
9 Z $ '
! / !^\
'
!^9 +
!$ !
!V
y f; 0
2
0 ^\
/
q
0
y
!< ) ,
y f; 0
; '
-
8
9
<
'
: 9
Z $ ^\
q
)P
-
),
100
c>. ? y f; 0
y! f; 0 /
,$
)+
0 N) 7-4 ) Q0
/ ^\
'".
.#
\
100
P 0?j
)
0
: $
+
8
K> Z $/ ) < ^\
? & .#
) ) "
background-image: -moz-linear-gradient(30deg, #000 50%, #FFF 75%, #000 90%);
.
, ." -
7-5 ) Q0
0
9 c>.
'
*$
$
100 0 ) \ . $
, @!
!
T ! \0 ! y
6 #! 5; 0
])
! #! : $
2 O !9 :' "
) / ]
'"
-
) < Z $ / ^\
0
7-5 ) Q0
])
! f) 50 ) P y f; 0 N) ) 9
/ '
\
. 9 c>.
' : $
background-image: -moz-linear-gradient(45deg,
ﺻﻔﺤﻪ ﺍﻯ ﺭﺍ ﺧﺮﻳﺪﺍﺭﻯ ﻛﻨﻢ360 ﻣﻰ ﺧﻮﺍﻫﻢ ﻛﺘﺎﺏ ﻛﺎﻣﻞ ﻭ
! 6 # ., #
183
'&
8A CSS3
F+
A /0 G> 8
#FF0000 0%, #FF6633 20%, #FFFF00 40%, #00FF00 60%, #0000FF 80%, #AA00AA 100%); background-image: -moz-linear-gradient(45deg, #FF0000, #FF6633, #FFFF00, #00FF00, #0000FF, #AA00AA);
!9d 6 8 7 !0 T!) , !
â&#x20AC;&#x153;
)
!]) !
T!
(.# #!
y!
a!i
c>. /
#!
!
9 )! 8
])
)
> _ 9
<
+
-
" T $
"
B0 -)
$ 9 , ,
!- "
-"
. 99
])
-
y N)
-) +
y 9" 0 )
]) , , / 9
:T)
9
background-image: -moz-linear-gradient(45deg, #000000 30%, #666666 30%, #666666 60%,
<
0
- , $, @
2
F
.#
K GP
" i) . $ . y , @
)
y
9 f) 50 T . 9
. 9
0
9Y
'" )
0
O
0 )
.
5;
: $ y
7-6 ) Q0
/8 Y 9 +
y l ; =9 Y 7-6 ) Q0
6
:*; ) Q0 #
/
/
?&
% &' ( ) ! CSS3 HTML5 " #$
184
#CCCCCC 60%, #CCCCCC 90%);
! F
7 - , $ !
!)
,$
>
T) ,
)
6
$
$
i&?&
V
0
N) 8 , 9)6
t
* 5 /, $ D90 .T ) 9
WebKit ., '& . >& !
/ !-
/!
WebKit
7
!i & ? & /
.#!
!0, d < +
!
8!
T)
9
>
0
/ 5
?& )
99
+) !; /
y
<
0 #_0 / > 9 0
0
+) ;
&# ! S )
!
6 T)
* .< y
* .< y ! T) 6 :+3
)
T
ai 0
0
$ /
+) ; / > +) ; /
h)
-
, P .T
(,
@ y
:T ) 9 -
)
W3C
9 WebKit / ) <
* .< 8
+) ; 7 - / -
^ +
)
)]6 ;
+)
0)
+
?j
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), to(#000000));
!P -webkit-gradient 2 ! ! 7 !- , $ ) 0
!+3 /
1 . 9
c>.
) < Z $ ^\ . $ .
+ color- h
!0
color- h
!0
<
50 y
0
, @!
! !
! / : $
!\
+$ .# 0 ! . !9
) 8
\
y
0 #DP 0 9 c>.
y
F+
" !i )
9
, @
/P
0Z
6
) < Z $ ^\ ) ) / 3 ) \
0 / y f; 0
1 . 9 c>. to J/
!
#' Q
93
c>. center ) top, bottom, left, right J/
) q6 y
!$ / '
linear-gradient
'
c>. / 5 +
) < ^\
& from J/
0
/ y f; 0
F '
stop()
c>.
y f; 0
$
stop()
. 9
c>.
^\
6
y
8
\
: 9 #; ? j
)
background-image: -webkit-gradient(linear, left top, right bottom, from(red), to(purple), color-stop(20%, orange), color-stop(40%, yellow), color-stop(60%, green), color-stop(80%, blue));
?!
GeoCities
#) !
6 )
)
+
-
+
~ "
.T) $
ﺻﻔﺤﻪ ﺍﻯ ﺭﺍ ﺧﺮﻳﺪﺍﺭﻯ ﻛﻨﻢ360 ﻣﻰ ﺧﻮﺍﻫﻢ ﻛﺘﺎﺏ ﻛﺎﻣﻞ ﻭ
+) ; / -
, @ #
1996
! 6 # ., #
185
c>!. to from / ! !) !
!
F !+
T
, @!
!0
#
'&
!
8A CSS3
) < Z $ ^\
F+
#
) color-stop(0, red)
A /0 G> 8
2 O #\ \& )]6
from(red)
.T 9
:T ) 9 : $ background-image: -webkit-gradient(linear, left top, right bottom, colorcolor-stop(0, red), red) color-stop(20%, orange), color-stop(40%, yellow), color-stop(60%, green), color-stop(80%, blue), colorcolor-stop(100%, purple)); purple)
y!
!+
y! f!; 0 !9
!
#!
!<
!9 , @!
!'
!
0 !^\
!0 !'
y! f!; 0
!
0 !^\
y! f!; 0 N!) !) from / '"
0 !'
!*
T
y f; 0 )
!) < ^\
! !'
/, + ;
!
-) F *3
60
! <
!' "
!9
!
. $
,
=) + , $ c>. y
>*!$ )
.#!
40 0 0 !<
!0, ! d < H) !
. 99 !
100 0 '
0
+) !)
0 !@
!L ! ,! 6 +
! y!
!
!
0
#!\ \& 6
99
, @
50 y '
0 8
0
/
m
T9*
.T 9
+WebKit
/
!P
! !D 6 6
)
)<
99
$ , $ c>. ,$
'
)
* .< -
8
)<
8
HTML5 herald
#
#)
) K ) 99
-webkit-gradient
9)
40
^ +
+) ; / 0
50 y
60
9
" 5 :Q" ) 0 0 T) -
!
y f; 0
+0
(-webkit-linear-gradient / P . !)
' 93 / 9
40 ^\
y +) ; / -
0/
+
) < y f; 0
/ !-
+0 !
/ !) < / !
! !^Y
!* . ! ) =) !+ , @!
$ _ y
7 !- / !-
'"8
$ _ 6 y f; 0
, $ c>. y
60
, @ $ _
100
c>.
' " y f; 0
'
. $
) !-
'
,$
$ ,
, $ c>.
Z $ -) y #+
) < y f; 0 / 6
/
) $ ) #!
$ , . c>.
<
!9
#! . $
'"
. $
-
#!
6
8! y! f!; 0 ) '
y f; 0
!0 Q93 / * :' " &
, !$ c>!. y! f!; 0 ! / !^\
!
</
+
9 , @
8+
) P WebKit . $
% &' ( ) ! CSS3 HTML5 " #$
186
> !
!
, !P
!)
T!)
!^ y!
!0 J
!
,S> K! ! &) 0>
7 !- /, !$
! 4
9
.T ) 9 !
!& L !) ? !+ & !
! # 5;
)
+ /
0
*$
+$ .#
$
!$ , ! ,
$
2]
!
R9< #
y! ^ . 9
m
y /
{$ 0 "
!q6 !' 8!
40 J 0 ! ! y!
0
; '
CSS :!)
<
"
, @!
m
, ]9<
37 # 5;
/ ! ,
" )"
! #!
m
:T )
:) " :
D90
/
0
, $ , ]9
)
0 (.
0, P )"
m
y /
6
8 y f; 0
T
m
F + V90
# " @$ '
0
.#
Z $ W3C
WebKit /
y
h@
+ 7-7 ) Q0
8 y f; 0 8
0
{$ 0 "
c>!. { !$ 0 " y
T9
. ) * , @
F B *0 => }y
0
/ 6h+P / F
9
+$ M L
N) ) { $ 0 " 8" 2 "
0
# " @$ 8
^ y
& L
:' :) " , @
0 .( 7-7 ) Q0) 9 * B0 ,
0
) Q0 =) )
6 CSS
!0 /, P y
! y!
-)
& L .
!9
!
'
60)
$
0 ^\
)
/ - # > .T) * , D
)< /
) P/
>
11.10
css/styles.css (excerpt) #ad2 { ⋮ background-image: -moz-linear-gradient( 270deg, rgba(0,0,0,0.4) 0, rgba(0,0,0,0) 37%, rgba(0,0,0,0) 83%, rgba(0,0,0,0.06) 92%, rgba(0,0,0,0) 98%
ﺻﻔﺤﻪ ﺍﻯ ﺭﺍ ﺧﺮﻳﺪﺍﺭﻯ ﻛﻨﻢ360 ﻣﻰ ﺧﻮﺍﻫﻢ ﻛﺘﺎﺏ ﻛﺎﻣﻞ ﻭ
! 6 # ., #
187
'&
8A CSS3
F+
A /0 G> 8
); background-image: -webkit-linear-gradient( 270deg, rgba(0,0,0,0.4) 0, rgba(0,0,0,0) 37%, rgba(0,0,0,0) 83%, rgba(0,0,0,0.06) 92%, rgba(0,0,0,0) 98% ); background-image: -o-linear-gradient( 270deg, rgba(0,0,0,0.4) 0, rgba(0,0,0,0) 37%, rgba(0,0,0,0) 83%, rgba(0,0,0,0.06) 92%, rgba(0,0,0,0) 98% ); }
!)
!)
!$ T!
! { $ 0 " :) "
!+0 B *0
y f; 0
y! f!; 0 ) ! 6 ) T) !
!-
!+-
$
+
UG&
Q93 / 9 /,
'
0/
) !< #+
+0
1 .T)
y
0J
O
98
]9)
). $
! :
/ !- 8! ;
!) < ) P/
T) >
, @
T
O
) < / ^\
) 270deg /
9 #; .T)
'" < (.#
!
0
T V90 ( ) < #+
) 0 '
0
+-
"
:\ 9
; '
98
, $ f) 50 y f; 0 ) :
WebKit
, 9)6
U @$
;
J +) ; / 0T ) 9
, , P ?&
.<
, @
css/styles.css (excerpt) #ad2 { â&#x2039;Ž backgroundbackground-image: -webkitwebkit-gradient(linear, gradient(linear, from(rgba(0,0,0,0.4)), colorcolor-stop(37%, rgba(0,0,0,0)), colorcolor -stop(83%, rgba(0,0,0,0)), colorcolor-stop(92%, rgba(0,0,0,0.16)), colorcolor-stop(98%, rgba(0,0,0,0))); background-image: -webkit-linear-gradient(
6
% &' ( ) ! CSS3 HTML5 " #$
188
270deg, rgba(0,0,0,0.4) 0, rgba(0,0,0,0) 37%, rgba(0,0,0,0) 83%, rgba(0,0,0,0.06) 92%, rgba(0,0,0,0) 98% ); backgroundbackground-image: linearlinear-gradient( 270deg, rgba(0,0,0,0.4) 0, rgba(0,0,0,0) 37%, rgba(0,0,0,0) 83%, rgba(0,0,0,0.06) 92%, rgba(0,0,0,0) 98% ); }
WebKit /
)< /
< (
" ) ") H)
!G
SVG !<
.T !9
!9
!<
9
< ) Q0 N)
.T 9 /
" !i !D 6 ! SVG
,
!+ ^ }y
) !Q0
9
93
6
T)
1!
9)
. $
,
=) +
A *M
P 8 / -) /
!+
!0TD
; SVG # " CSS3
0?&
5M _F+
0 ) #!
y
y
, @
6
:*; /
0 N) #
/, P
9
+ T
>
11.01
. 99
* .<
0
)
& $ ' SVG – % O+
XML
8 SVG .
+W 3
(+ GOd K
" ). 3
% SVG
#+ GOd K k
$1 8 !]<
+8 $ 1
+ k+ ] ) Scalable Vector Graphics
(. + ;
^, 7 +
+@
+
+ k+ ]
6
6
:T $ SVG
, @
y 9 T)
7 3
HTML
K (3 7 3 .
CSS3
# i
0#
"
"
0
9
E , #+ !]
L : #$ 49
"
]F
0 SVG :) " #
+
SVG
+ : 8
+ /
$1 " l
V -
+ +W 3
9 C
0 )
.#
[' )$
#
images/gradient.svg (excerpt)
ﺻﻔﺤﻪ ﺍﻯ ﺭﺍ ﺧﺮﻳﺪﺍﺭﻯ ﻛﻨﻢ360 ﻣﻰ ﺧﻮﺍﻫﻢ ﻛﺘﺎﺏ ﻛﺎﻣﻞ ﻭ
! 6 # ., #
189
'&
8A CSS3
F+
A /0 G> 8
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/RECSVG-20050904/DTD/svg10.dtd"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"> <title>Module Gradient</title> <defs> <linearGradient id="grad" x1="0" y1="0" x2="0" y2="100%"> <stop offset="0" stop-opacity="0.3" color-stop="#000000" /> <stop offset="0.37" stop-opacity="0" stop-color="#000000" /> <stop offset="0.83" stop-opacity="0" stop-color="#000000" /> <stop offset="0.92" stop-opacity="0.06" stop-color="#000000" /> <stop offset="0.98" stop-opacity="0" stop-color="#000000" /> </linearGradient> </defs> <rect x="0" y="0" width="100%" height="100%" style="fill:url(#grad)" /> </svg>
!0
!
7 - / -
!
6 !)
!
!)
y! .T !9
/ ) # *$ !0 Z ! ! .
c>. ! /
1 0
y f; 0
#! > sT 9 , @ ) !Q0
!93 !
++) "
,
/ -
^ y
CSS3
c>. lineargradient Q93 c>.
) < Z $ ^\
/ QQ / c>.
9
, @
, @ c>.
)
ai
y f; 0 )
6 style / Q Q
6
SVG :!)
2
5 . 9
0
) JPEG, GIF / # "
PNG
offset
0 f) 50
.T $ 1
1
9 #; SVG :) "
, $, @
! 50 ) .T 9
\ / &
5 !i DY N) ) y
P
P SVG
! y! f!; 0 (x2, y2 ! x1, y1 ) !\ ! #!
$
2
: # 5;
(rect Q93) T 9
^Y T
NY
K GP y
:) "
1 . 9 ,
k .svg
<
+
9
Q93 N) / 9
CSS
) Q0
: $
#
0 N)
" 5
])
?&
SVG :)
: )
; 9
" ) <
<
css/styles.css (excerpt) #ad2 { ⋮ backgroundbackground-image: url(../images/gradient.svg); ⋮ }
: !$ !) ! !0 !
!9
/ !
(.
) 9 CSS y * !.<
0F
#! "
!$ ! K !> CSS3 y!
0
)
/ !0 F
!
SVG :)
"
m
99 *
9
) P/
#! & !)
! ). !
K>
% &' ( ) ! CSS3 HTML5 " #$ !<
!$
!"
99
+ #" )
; 9
<
SVG :)
190 SVG #
" -)
"
^) $
99
$ , 6 CSS3 y
0F , @
)
!9
100 Z @0
‰ 3 ‰ "= < # &
!
Q93 / 9
/ ! !Q Q
' !)
!$ 1
V
; 100% ? 5
.
` /!
"
T
y! f!; 0
!0 ! 9
! y!
*+&
!
! ! 0 !
! ! " )
! #
9 , @
)<
y
y!
0
. 9 $ < + width
height
A
!0 /, ! P ]) / 0 ]) /
9d+
'Q
IE
; D90 . 9
q6 y
<
5M F+
; +$
) . 9 c>.
9
9) /
Q93
/ y
,
)
9)
+
, @
!G #!
F ' F @0
$
rect
. >&
!0 ! " .T 9 , @
!0 ! 9 c>!.
) !
9 , @
1!
0
< : SVG :) "
\
:!*; / ! >!
y!
IE
0 CSS
6
CSS3
y
! SVG ) !Q0 ! # !< :!
y
m
SVG
. 99 SVG
:+3 9+$
+
* .<
/ +3 ) $
+) ; /
>
\" : $ #
,
. ) : $ )
:#
IE /
+
7 - /, $
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#COLOR', endColorstr='#COLOR); /* IE6 & IE7 */ -msfilter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#COLOR' , endColorstr='#COLOR')"; /* IE8 */
!
1
!3 /
!
!< !)
GradientType
!$
\" : $
. 9 T V90 @' #!
y! f!; 0 /
!Q;
!)
T!) , ! , @ ! ) !*)
!“ T! y! .T 9
% 8 # e +% %
G; % #+ . <
%&
R
+
+
+
!
!
C.
!-
>
0
>
)]6 "
T
0 )
0 + T)
+ ,–
9 E . 30 1+; +
IE
1+ . < #$ 8
>
0 y
*
+ HI IE
"+ + 6 + 1 .Q F
!
S *0 .T 9 , @
! /
0
$ / +3 y
" i IE J +) ; /
)
1 .Q
6
0
(
+%H [ 1SVG . + 3 . 3
!+& L
3
y
^ , 4 9F
() 8 "+ . G; 7
ﺻﻔﺤﻪ ﺍﻯ ﺭﺍ ﺧﺮﻳﺪﺍﺭﻯ ﻛﻨﻢ360 ﻣﻰ ﺧﻮﺍﻫﻢ ﻛﺘﺎﺏ ﻛﺎﻣﻞ ﻭ
70 +
$* 8 (+ /
X /1 Q 8 +O 9L )
! 6 # ., #
191
'&
8A CSS3
F+
A /0 G> 8
G# . > U 9!$6 7
!
!
7 !-
!P
! /
!
/
d<
8 . 9 7
!9Y !
*]
!
!) #!+&
8
"
"
"
-)
^ y
) " 9
)
])
0 ]) /, $
/
) +
^ y
0
0 0 99
) . ) =) +
+0
0
) $
N+ +$ ) 9 f > . 9.
, !+
!
!^ / ! y WebKit
/ ! y! !1
])
!
!
!
!\ y!
! !+
8!
!0 !
!" /
, P +$
! 9 %]50 ) $ . 9 /
"
#
!)
!) !+0 !
+
! )!
=^ _ /
8-
]) / 8
RGB
/ -
)
])
8 T)
)
! / ! !$
8
y
)
:) .T) 0
8-
F ' O
1 •
y
9d+
8 HSL y ? P 1
:) *0 RGB 9
3
])
8
T
, P ) 0 9
” $
=) )6 ? < #) D
^ y
0 6/
" 5 +$ m
)
*; 8
. $ , 99 R
#)
7 - / , $ -)
9 + CSS3 -) F +0
=) +
/ . F )
)
2
) . 9
RGB
css3please 2
* .< y f; 0
P
?+
8 y
# " @$
=) )
6
? *;
) \
; +$
,
1. http://www.westciv.com/tools/gradients/
3. http://css3please.com/
* .<
)$
. ) =) +
2. http://gradients.glrzad.com/
+
# " @$ ,
/ 8 D90 8 , H3 . 9
)
{
) . $,
9
,
)
9
6
,
; 8
9 K>
0
!) . ) 8"
! , !0
* .
#
!0
?+
+$ /
> / y f; 0
0#
, P +$ 8
0
> y!
! #*!
^ y
1
/ 8
, P +$
T 0
! , !P +$
HSL /
/ \&
B0 HSLA ) RGBA
y f; 0
& L )
0, $ .
N!)
,
" )"
) . 9
!
!9 , @
, P +$
/ )< /
!D90 8!
!9
0 0
?&
/
)
9
Y
T 0
IE
#)
]) f > 7 - / , $