WWW - Kutub.info 19257

1
:
HTML5
: HTML5

><header
><article
><nav
><section
><aside
><footer
HTML4 HTML5
HTML5
><mark
><details
><summary
><dialog
2
><progress
><time
><figure
><figcaption

: Media
Elements
><audio
><video
><source

: Graphics
><canvas
><svg
><svg
linear Gradient
><defs
><linearGradient
3

: Forms
><datalist
><keygen
><output
> <input
HTML5
Color
date
datetime-local
email
month
number
range
search
tel
Time
url
4
week

CSS3:
CSS3 Rounded Corners
CSS3 Border Images
CSS3 Backgrounds
CSS3 Gradients
CSS3 Shadows
CSS3 Text
CSS3 Font
CSS3 2D Transforms
CSS3 3D Transforms
CSS3 Transitions
CSS3 Animations
CSS3 Multiple Columns
CSS3 User Interface
++ ++ ++ ++ ++ ++ ++ ++ ++
++ ++ ++ ++
mohammad200610022@gmail.com:
): (HTML5
HTML
) (Java script
) (Flash Player
) (Android) (I Phone
):(Tags
) (special keywords
)><( NN N N N

6
HTML5
1
FF
FF ( lower case FF
(Upper case
FF FF )(Lower CaseFF FF 2
HTML5
FF FF HTML4 HTML5FF FF FF
(Lower Case .
7
HTML5 3
HTML5FF FF FF FF FF FF
.
8
9
HTML5 4
HTML5 FF FF FF
.
(/ XHTML XML
FF 5
HTML5
FF FF FF FF FF FF HTML4 HTML5FF
(Lower Case FF FF
.
10
11
class Id 6
HTML5 Class FF FF
FF FF FF FF FF FF FF FF Class
FF FF FF FF spaceFF FF FF FF
' ' ( ) (
> <img alt 7

> < img alt
FF FF FF FF FF FF ,FF FF FF FF
FF FF FF

12
> <html ><body 8
HTML5 FF FF > < html > < body
><html
, FFF
> , <html
> <body IE9FF FF
><body
13
><head 9
HTML5 > < head
, FF FF
FF > <bodyFF FF > , <headFF FF FF FF
><head
14
15

HTML5

HTML5
><header
TAG
NN NN NN NN ) ( html5NN NN NN NN NN NN NN )
(header NN NN) ( bodyN NN NN NN NN NN
) (head ) (header
NNN NNN ) ( headNNN NNN) ( body ) ( headerNNN )
( bodyN NN) ( header NN NN NN NN N NN NN
NN
.

CSS id

16
ID CSS
CSS class

Class CSS
CSS style

dir

17
> <header
CSS
18
> <header CSS
19
><article
TAG
NN> <article></articleNN NN NN NN NN ) ( HTML5NN
) ( body NN
N NN NN

CSS id

ID CSS
CSS class

Class CSS
CSS style

dir

20
> <article
CSS
21
22
FF FF FF FF > < header > < articleFF FF
FF FF FF CSS
><div
23
><nav
TAG
> <nav></nav ) (HTML5
FF FF FF FF FF FF FF FF
menu

CSS id

ID CSS
CSS class

Class CSS
CSS style

dir

24
25
FF > < header> <nav> < articleFF
FF FF FF CSS
><div
26
><section
TAG
NN><section></sectionNN NN NN > < articleNN NN NN
NN NN ) ( HTML5NN NN NN NN NN NN NN)(body
NN NN NN NN NN NN NN NN NN NN NN NN

CSS id

ID CSS
CSS class

Class CSS
CSS style

dir

27
28
29
OUTPUTE
> <header> <nav><section

> < article FF FF
CSS ><div
30
><aside
TAG
> < aside></aside ) ( HTML5NN NN
NN NN NN NN NN NN NN NN NN NN NN

CSS id

ID CSS
CSS class

Class CSS
CSS style

dir

31
32
33
OUTPUTE
34
><footer
TAG
NNN> < footer></footerNNN NNN NNN NNN NNN ) ( HTML5NNN
NN NN NN NN NN NN NN)(bodyNN NN NN)
NN( NN NN NN NN NN NN NN
) (header) (article

CSS id

ID CSS
CSS class

Class CSS
CSS style

dir

35
36
37
OUTPUTE
38
HTML5 HTML4
HTML4 HTML5
<div id=header> <header>
<div id=nav> <nav>
<div id=aside> <aside>
<div id=section> <section>
<div id=article> <article>
<div id=footer> <footer>
39
HTML5
><mark
TAG
> < mark></markNN NN NN NN NN ) ( HTML5N NN

CSS id

ID CSS
CSS class

Class CSS
CSS style

dir

40
41
><details
TAG
NN> < details></detailsNN NN NN NN NN ) ( HTML5NN
NN
><summery

CSS id

ID CSS
CSS class

Class CSS
CSS style

dir

open

42
><summary
TAG
NNN> < summary></summaryNNN NNN NNN NNN NNN )(HTML5

CSS id

ID CSS
CSS class

Class CSS
CSS style

dir

43
> <details FF FF >
<summaryFF FF FF FF FF FF FF FF
(Programming Languages
44
><dialog
TAG
> < dialog></dialog ) ( HTML5

CSS id

ID CSS
CSS class

Class CSS
CSS style

dir

open
45
FF FF FF FF FF > <dialogFF FF FF style
FF FF text-alignFF FF FF FF open
dialog dialog
46
47
><progress
TAG
> <progress></progress ) (HTML5

CSS id

ID CSS
CSS class

Class CSS
CSS style

max

value
48
49
50
><time
TAG
> < time></time ) ( HTML5NN NN NN
NN NN NN

CSS id

ID CSS
CSS class

Class CSS
CSS style

datetime
><time
51
52
><figure
TAG
> < figure></figureNN NN NN NN ) ( HTML5N NN
> <img

CSS id

ID CSS
CSS class

Class CSS
CSS style

53
54
><figcaption
TAG
> < figcaption></figcaption ) ( HTML5NN
)(figure

CSS id

ID CSS
CSS class

Class CSS
CSS style

dir

55
56

-1
-2 > <mark
-3 > <details
-4 > <figure
-5 HTML5 CSS
57

Media Elements
FF FF FF FF FF FF HTML5
.
><audio
TAG
N> < audio></audioNN NN NN N ) ( HTML5N N
NN NN NN NN)(adobe flash playerNN
) , (HTML4 NN NN

CSS id

ID CSS
CSS class
58

Class CSS
CSS style

FF FF FF controls

)(controls
FF FF FF FF src
src > < img
FF loop
)(1,2,3,.....
FF FF FF FF FF FF FF autoplay
)(true/false
hidden
(auto preload
59
/
/
.mp3 )(IE+9
.wav, .ogg )(Firefox
.mp3, .mp4,.wav, .ogg )(chrome
.mp3, .wav )(safari
.wav, .ogg )(opera
60
><video
TAG
NN> < video></videoNN NN NN NN ) ( HTML5NN NN
)(adobe flash player
NN NN ) , (HTML4NN NN N NN NN NN NN NN NN

CSS id

ID CSS
CSS class

Class CSS
CSS style

FF FF FF controls

)(controls
FF FF FF FF src
src > < img
61
FF FF FF loop
)(1,2,3,.....
FF FF FF FF FF FF FF autoplay
)(true/false
hidden
(auto preload
height
width
FF FF FF FF F FF poster

/
/
.mp3,.mp4 )(IE+9
.mp4, .wav, .ogg, .webM )(Firefox
.mp3, .mp4,.wav, .ogg, .webM )(chrome
.mp3, .mp4, .wav )(safari
.mp4, .wav, .ogg, .webM )(opera
62
63
><source
TAG
NN> < sourceNN NN NN NN ) ( HTML5NN NN NN
NN NN NN NN NN NN srcNN NN NN NN <audio
<video

src
type
64
65

-1 > <video
-2 > <audio
-3 > <source
-4 poster
66

Graphics
><canvas
TAG
< canvas></canvas NN NN NN NN ) ( html5NN N
) ( graphics) ( java script NN NN )(canvas
NNN NNN NNN NNN NNN) ( containerNNN NNN NNN NNN
) ( height , width NN N )(java script

CSS id

ID CSS
CSS class

Class CSS
67
CSS style

canvas height
canvas width
-1 ) (canvas )
(java script
-2 ) (canvas ) (java script
). (id
68
69
><svg
TAG
> < svg></svgNN NN NN NN NN ) ( HTML5NN NN NN
) ( canvas ) ( svgNN NN
NN NN NN NN NN NN ) ( JavaScriptNN NN NN NN
NNN NNN NNN) (canvasFF FF FF FF FF FF
> <svg></svg
,(rect,(circle (star

CSS id

ID CSS
CSS class

Class CSS
CSS style

svg height
svg width
70
><svg

><circle :
71
cx:
cy:
r:
style="fill:blue:
72
><svg
><rect
:
width:
hieght:
style="fill:blue:
73
><svg
><polygon
:
points:
";style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd

fill
stroke
stroke-width
fill- rule Fillstroke evenodd
FF FF FF FF FF FF FF
FF FF FF FF FF
stroke stroke-width
74
><svg
75
><svg

><circle :
cx:
cy:
r:
style="fill:blue:
> <text

fill:
font-size:
font-family:
x:
y:
SVG

76
linear Gradient
linear Gradient

><defs
TAG
> < defs></defsNNN NNN NNN NNN NNN ) (HTML5
definitionFFF FFF FFF FFF ><linearGradientFFF
><defs
><linearGradient
TAG
> < linearGradient></linearGradientNNNN NNNN NNNN NNNN NNNN )
(HTML5 id

id linearGradient id

77
><stop
TAG
> < stop></stop ) ( HTML5NN NN NN

Stop-color
stop
style
78
> <linearGradient id
grad1 <stop NN NN
NN NN NN NN <stopNN NN stop-colorNN NN
NNN NNN stop-opacityNNN NNN NNN NNN NNN NNN NNN id
NNNN NNNN <linearGradientNNNN NNNN fillNNNN NNNN <circle
:
)fill:url(#grad1
79
80

1 SVG )(vector
) (bitmap .
2 SVG XML
3 SVG bitmap
jpg png . gif
4 SVG .
5 SVG W3C
SVG
1 SVG .
2 SVG .
3 SVG .
4 SVG .
5 SVG .
81

-1 ><canvas
-2 > <svg
-3 ><svg
-4 ><svg
82

Forms
FF FF FF HTML5 FF FF FF
FF FF FF FF FF FF FF FF FF
FF FF
.
:
<datalist> .1
<keygen> .2
<output> .3
83
><datalist
TAG
> < datalist></datalistFF FF FF FF FF )(HTML5
list FF
> <input HTML5 FF FF FF >
<detalistFF FF FF FF FF FF FF FF
><datalist FF autocompleteFF ><input
FF FF FF
><input

CSS id

ID CSS
CSS class

Class CSS
CSS style

84
FF listFF FF (browsersFF FF FF
> <detalist FF idFF FF FF
> <option FF FF
> <input ><detalist >
<detalist > <select HTML4
85
><keygen
TAG
> < keygen></keygenFF FF FF FF FF )(HTML5
FF FF FF FF > < keygenFF FF FF
. > < keygen
FF .FF FF FF FF FF FF FF
(Private FF FF . ( PublicFF FF FF FF
.FF FF FF
FFF FFF FFF FFF FFF FFF FFF FFF
FF .FF FF FF FF FF FF PHP
ASP.NET

CSS id

ID CSS
CSS class

Class CSS
CSS style

86
87
><output
TAG
> < output></outputFF FF FF FF FF )(HTML5
> < output FF FF
.

CSS id

ID CSS
CSS class

Class CSS
CSS style

name

PHP
88
FF > <formFF FF FF
( oninput FF FF FF FF
FF FF FF ><input
. (value > <output
nameFF FF xFF FF FF FF FF FF

89
90
> <input HTML5
HTML5 forms
. .
color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week
91
Color
> <input type[[

92
date
93
datetime-local
[[ [[ [[ [[ [[ [[ [[ [[

94
email
[[[ [[[ [[[ [[[ [[[ [[[ [[[ [[[ .

[[ [[ [[ [[ [[ [[
@ .com.
95
month
[[[[[[[[[ [[[[[[[[[[ [[[[[[[[[ [[[[[[[[[ [[[[[[[[[ .
96
number
number
=.
[[
:
. max:
. min:
. step:
. value:
Required:
97
range
. [[
[[[[[[[[[[ [[[[[[[[[[ [[[[[[[[[[ [[[[[[[[[[ [[[[[[[[[[ .
[[
:
. max:
. min:
. step:
. value:
Required:
98

search
.
99

tel

(tel (safari 8
100

Time

(time ( Firefox or Internet Explorer
101

url
url
.
url .
( Internet Explorer (url
102

week

( Internet Explorer (week
103

-1 ><<datalist
-2 <
-3
<facebook HTML5 (CSS
104
-4 < HTML5
(CSS
-5 < HTML5
(CSS
105

CSS3
FF FF CSS3 FF FF

.
:CSS3
CSS3 Rounded Corners 1
CSS3 Border Images 2
CSS3 Backgrounds 3
CSS3 Gradients 4
CSS3 Shadows 5
CSS3 Text 6
CSS3 Fonts 7
CSS3 2D Transforms 8
CSS3 3D Transforms 9
CSS3 Transitions 10
CSS3 Animations 11
CSS3 Multiple Columns 12
CSS3 User Interface 13
106
CSS3 Rounded Corners
)Rounded Corners(border-radius

FF

107
108
50px
50px
15px
FF border-radiusFF FF
15px 50pxFF F 15pxF FF F F FF
50px FF

109
Border-image
Border-image

FF FF FF FF FF FF FF FF FF FF
(border
110
7FF FF border-imageFF
url 100 round
round
-webkit-
111
CSS3
F FF FF F F FF
FF FF FF FF FF FF
.
-webkit- google safari

-moz- firefox
-o- opera
112
Border-image-outset


113
background
Background-origin

FF FF FF FF FF(1-background-origin: border-box
)
FF FF FF(2- background-origin: content-box
)
FF FF(3-background-origin: padding-box
)
114
[[ 11[[ [[ [[ Background-origin[[ [[
border-box
115
content-box
116
padding-box [[ [[

117
Background-size


FF FF FF FF FF(background-size: cover
)
background-size: contain
(
)
) (background-size: auto
118
119
120
121
Background-clip

) (1- background-clip: border-box
) (2- background-clip: padding-box
) (3-background-clip: content-box
122
10 :
) (background-clip: padding-box
123
10 :
(background-clip: content-box )
124
10 :
(background-clip: content-box )
125
Color
CSS
-1
-2 (Hex
CSS3
:RBGA-1
RBG

)rgba(red, green, blue, alpha

RBG-1(red, green, blue
0 255
alpha -2
.
0.1,0.2,0.3,0.4,0.5,...1
126
9 background
RBGA
)rbga (0,255,0,0.5
(0,255,0
) (0.5
127

128
:HSL-2

)hsl:(hue, saturation, lightness

hue -1
0 360
120
240
:saturation -2
%100
lightness -3 %0
%100
129
130
131
6
-1 (hue %0
-2 (saturation %100
-3 (lightness %100

7
132
-1 (hue %0
-2 (saturation %100
-3 (lightness %0

:HSLA-3
alpha
)hsla:(hue, saturation, lightness, alpha

hue -1
0 360
120
240
:saturation -2
%100
lightness -3 %0
%100
alpha -4
.
0.1,0.2,0.3,0.4,0.5,...1
133

alpha
134
CSS3 Gradients
) (Gradients .
(Gradients FF FF FF
> <SVG FF
. CSS3 FF
(Gradients .
):(Gradients
Linear Gradients-1
repeating-linear-gradient-2
radial-gradient-3
repeating-radial-gradient-4
135
:Linear Gradients-1
Linear Gradients

:Linear Gradients
background: linear-gradient(direction, color-stop1,color-stop2,...);
direction
color-stop
136
11
linear-gradient
direction
top
137
FF linear-gradientFF
FF FF FF FF FF

1-(-webkit-) Google chrome or safari
2-(-moz-) Firefox
3-(-o-) opera
138
direction bottom

139
direction
140
Linear Gradients-Diagonal

( Tow Direction

background:-moz-linear-gradient(right top, red, orange, yellow, green, blue);

background:-moz-linear-gradient(left top, red, orange, yellow, green, blue)

background:-moz-linear-gradient(right bottom, red, orange, yellow, green, blue)

background:-moz-linear-gradient(left bottom, red, orange, yellow, green, blue)
141
142
Linear Gradients-Using Angles
FF FF FF FF FF FF
FF (anglesFF FF FF FF FF FF FF
.
:Linear Gradients-Using Angles

;)background: linear-gradient(angle, color-stop1,color-stop2
.(deg
HEX rgba hsla
143
180deg
FF FF FF .FF FF FF FF
FF FF FF FF

144
145
Linear Gradients-Using Transparency
Linear Gradients
(rgba
)(hsla
rgba
146
hsla
147
hsla rgba FF FF FF

148
FF FF FF FF FF( hsla( rgba FF FF FF FF
Linear Gradients
149
repeating-linear-gradient-2
FF FF FF FF linear-gradientF
.
150
FF FF FF repeating-linear-gradientFF FF FF
270deg FF FF
.%10 FF
%10
%20
151
radial-gradient-3
FF FF FF linear-gradient
FF FF FF FF

:radial-gradient
background: radial-gradient(shape size at position, start-color,..., last-color);

:shape size at position-1
start-color -2
last-color -3
152
. F F F FF F FF
. FF FF FF
FF FF FF FF FF

153
FF

154
Set Shape
(circle FF FF radial-gradient
( Ellipse
155
radial-gradient
Repeating a radial-gradient
FF FF FF FF radial-gradientFF
.
156
157
CSS3 - Shadow

1-text-shadow
2-box-shadow
text-shadow
text-shadow

F F F FF
FFF FFF ( horizontal shadowFFF FFFvertical
( shadow
158

horizontal shadow =1px
vertical shadow =3px
159
text-shadow

color shadow= red
160
text-shadow

shadow effect=4px
shadow color= red
161

162

(,

163
box-shadow
box-shadow

FF FF FF
FFF FFF ( horizontal shadowFFF FFFvertical
( shadow
164
><div
box-shadow
165
box-shadow
< div>
box-shadow
color shadow= green
166
box-shadow
><div

shadow effect=10px
shadow color= green
167
Pseudo-classes
FF FF FF FF FF FF FF CSSFF
CSS3 FF FF
. FF FF FF FF FF
FF FF FF FF Pseudo-classes FF FF FF
.
Pseudo-classes
-1 (tag
-2 (link (link
.
: pseudo-class
selector:pseudo-class
{
;property:value
}
168
selector
:hover FF FF FF FF FF

:visited FF(link

:link (link
:active FF FF FF
(link
(selector :first-child
FF(selector

(selector :last-child
FF(selector

:valid FF FF FF FF FF FF>
<input text FF

:invalid FF FF FF FF FF FF>
<input text FF

:target FF FF FF FF
FFF targetFFF FFF FFF FFF
FF FF FF FF FF FF

169
170
FF FF FF FF FF FF FF classFF
> <div >:<style
(.pseudo FF FF FF FF
.
FF FF(.pseudo:hoverFF FF FF FF FF
.

(.pseudo:hover
)(.pseudo
171
(:first-child )selector (p
FF FF > <styleFF FF FF (:first-childFF
(selector FF
(selector
172
(:last-childFF FF )selector (p
FF FF > <styleFF FF FF (:last-childFF
(selector
(selector
173
FF FF FF FF (:validFF FF )selector (input
> <style (:valid
> <input text
. FF FF FF FF
> <input FF F FF( FF

174
FF F (:invalidF F )selector (input
> <style FF FF (:invalidFF FF
> <input text FF FF FF
. FF FF FF
> <input FF F FF( FF
(valid
175

-1 > <a href (#news
href
-2 > <p id href
-3 > <style ( target background

id href

176
CSS3 Text
Word Wrapping
Word Wrapping
FF FF FF FF F FF

177
178
CSS3 Web Fonts
FF FF CSS3
web server FF FF FF

TTF TrueType Fonts
OTF Open Type Fonts
WOFF The Web Open Font Format
WOFF 2.0 The Web Open Font Format
EOT Embedded Open Type Fonts
SVG Fonts/Shapes Scalable Vector Graphics
179

: Font
@font-face
{
) (font-family: type your font
) (src: path your font
}
font-familyFF FF FF
CSS3 > <style
font-familyFF FF FF (.@font-face

180
FF FF FF FF FF
font-family FF @font-faceFF FF font-family
FF FF FF FF > <styleFF FF F FF FF
FF F
FF FF FF FF FF FF FF FF FF FF FF
FF FF FF FF FF

181
CSS3 2D Transforms
FF CSS3FF 2D Transforms 3D Transforms

FF
FF FF FF FF FF FF FF F
.
-1FF 2D transformsFF FF FF FF

-2 method (
182
2D Transforms methods
1 translate(X-axis, Y-axis)
2 Rotate()
3 scale(width, height)
4 skew(X-axis, Y-axis)
5 Matrix(parameters)
translate() Method
transform: translate(X-axis, Y-axis) method

FF method
(X-axis, Y-axis
183
184
FF FF FF FF FF FF FF classFF
> <div >:<style
):(.move FF FF FF
FF FF FF FF (X-axisFF
0px (Y-axis 0px .
++ ++):(.move:hoverFF FF FF FF FF
.

(.move:hover
FF FF FF X-axis,
(Y-axisF FF FF 50px ( X-axis FF FFY-
100px (axis
185
FF FF 12FF FF FF FF FF FF
transformFF FF FF methodFF FF( transformFF
translate FF FF FF FF FF FF FF
) (X-axis, Y-axisFF FF FF
50px =(x-axis )100px =(Y-axis
186
rotate() Method
)(transform: rotate method

FF FF methodFF FF FF FF FF FF

)(deg
187
rotateFF FF FF FF FF FF FF FF FF
(45deg
188
rotateFF FF FF FF FF FF FF FF FF
(-45deg
189
scale() Method
transform: scale() method

FF FF FF FF method
(width,height
190
scale
)(widthFFFF 3FFFF FFFF FFFF FFFF FFFF
(height
191
scale
)(widthFFF FFF FFF FFF FFF FFF FFF
(height 3
skew() Method
)(transform: skew method

FF FF methodF F FF FF F FF

skewX (X-axis) -1
skewY (Y-axis) -2
skew(X-axis, Y-axis)-3
(deg
192
skewXFF FF FF FF FF FF FF FF FF
(X-axis (20deg
193
skewXFF FF FF FF FF FF FF FF FF
(Y-axis (20deg
194
skewFF FF FF FF FF FF FF FF FF
(X-axis (10deg (Y-axis (20deg
195
matrix() Method
transform: matrix() method

2d methods ( method
FF 6 FF FFF.( methodFF( transform
( scale,rotate ,skew,translate
196
matrix FF FF F FF F
(scale,rotate,skew,translate (method

transform-origin Property
transform-origin

FF FF X-
(axis-Y-axis ( transform-origin
FF FF FF (transformFF FF FF FF
(transform-origin
197
:Transform-origin -1 2D transform

)(X-axis Y-axis
:Transform-origin -2 3D transform

)(X-axis Y-axis Z-axis
-3FFFF FFFF FFFF FFFF (transform

FFF FFF (translateFFF FFF
(Transform-origin FF
FFFF FFFF FFFF (transformFFFF
FFF FFF FFF FFF Transform-
(origin
198
199
200
CSS3 3D Transforms
3D Transforms 2D FF 3DFF
(Y-axis (methods FF FF FF .2DFF FF
3D .
201
3D:rotate Method
transform: rotateZ method

methodFF FF FF FF FF Z
(deg
202
3D Transform Methods
203
transform-style
transform-style method
FF FF methodFF FF FF FF FF
FF FF . 3DFF FF FF FF
. transform
transform-style
flat-1 (3D
preserve-3D-2
(3D

transform-style
><div class=child
204
205
FF FF (div2FF FF FF (div1
transform-style (preserve-3d
(flat FF FF FF FF FF
(div2
perspective
perspective

F FF F 3DF

206
207
(perspectiveFF FF FF FF FF 3DFF FF

perspective-origin
Perspective-origin

3d
).(X-axis-Y-axisFF FF FF FF FF FF FF
Perspective .
208
209
14 Perspective-
origin (x-axis %50
(Y-axis %99
-1FF FF FF 3D transformFF FF

-2 (Editors 3D transform
(online
) (http://liveweave.com
210
backface-visibility
backface-visibility

FF FF FF

211
CSS3 Transitions
FF FF FF FF FF FF (transitionFF
FF
CSS3 .
transitions
1 transition
2 transition-delay
3 transition-duration
4 transition-property
5 transition-timing-function
(transition
-1
-2
212

transition
transition
transition

213
class FF >
<div >:<style
(.pseudo FF FF FF FF
.
214
FF FF(.pseudo:hoverFF FF FF FF FF
FF FF FF
(2s .

(.pseudo:hover
) (.pseudo
transition

(,
215
9
(,
width (2s height (3s
216
transition-timing-function

ease , , FF FF
(
linear
ease-in
ease-out
FF FF FF ease-in-out
FF FF .FF FF FF FF FF ( ease-inFF
(ease-out
217
FF FF 10FF FF (transition-timing-functionFF
(ease-in FF
FF
(ease-in
218
transition-dalay
transition-dalay

(

219
FF FF 10FF FF FF (transition-delayFF
(5s FF FF FF FF FF FF
5 FF FF FF
.
Transition + Transformation
(methods FF TransformationFF
FF TransitionFF FF FF FF FF FF FF
.
220
FF FF FF FF
.
221
CSS3 Animations
FF FF FF FF FF FF CSS3 FF FF FF
FF FFF FFF FF FFF FFF FF
.(Flash (S( JavaScript
1- animation-name
2- @keyframes
3- animation-duration
4- animation-delay
5- animation-iteration-count
222
animation
animation

FF.FF FF FF (animationFF FF FF
(@keyframes
@ keyframes
FFF FFF FFF FF FFF FFF FFF .FFF
FF FF FF FF FF (animationFF FF
) ( from ) ( to FF FF
FFF FFF FFF FFF (@keyframesFFF FFF
(animation
) (@keyframes
:
@-moz-keyframes keyframes_name
{
}from {property
}to {property
}
223
) (@keyframes
:
@-moz-keyframes keyframes_name
{
}0%{property
}25%{property
}50%{property
}75%{property
}100%{property
)
(keyframes
) (from)(to

) (0%
) (100%++ ++ ++ ++ ++ ++ ++

++ ++ ++) (0%++) (100%++

224

) (%0 ) (from ) (100% )(to
animation-name

FF FF FF (@keyframesFF
(@keyframes
animation-duration

FF FF (fromFF FF FF (toFF FF FF
(s
animation-delay

FF FF (fromFF FF FF (toFF FF FF
(s
animation-iteration-count

FF FF FF
225
(from (to
226

-1FFF FFF 13FFF FFF (@keyframes FFF
FF (changecolorFF FF FF FF (fromFF FF
(background-color (toFF FF FF background-
(color
-2FFF FFF 9FFF FFF (animation-nameFFF

(@keyframes
-3 10 FF (animation-durationFF
FF FF FF( FF FF
( FF FF FF FF
(
227
-1 5 (div
(position
228
-2 10 (animation-name FF
(@keyframe
-3 11 (animation-duration
(4s
-4FF FF 14FF FF (@keyframeFF FF FF

-5FF FF 15FF FF FF (0%FF FF FF

FF FF (leftFF (topFF FF FF
(position FF FF FF
(left (top
-6 16 FF (100%FF FF F
FF FF (leftFF (topFF FF FF
(position
(left=200 (top=0 FF FF FF
FF FF

229
-1 15 (left=0(top=0
-2FF FF 16FF FF FF FF FF FF FF
(left=200(top=0
-3FF FF 17FF FF FF FF FF FF FF
(left=0(top=0
230

231

232

233
Animation-iteration-count
234
12
(animation-iteration-count
(infinite
animation-direction
animation-direction
FF
(alternate (reverse
235
FF FF 13FF FF FF (animation-directionFF
(reverse FF F FF F F F
.
236
animation-timing-function
animation-timing-function

FF FF FF ( transition-timing-functionFF

237
FF FF FF animationFF FF FF FF

238
FF FF 10FF FF FF FF FF FF FF
animationFF FF FF FF FF FF FF

-1 (animation-name
-2 (animation-duration
-3 (animation-timing-function
-4 (animation-delay
-5 (animation-iteration-count
-6 (animation-direction
239
CSS3 Multiple Columns

(newspapers .
240
column-count
column-count

241
11 FF FF (column-countFF FF
3 FF FF FF FF

column-gap
column-gap
FF FF FF FF FF

242
12 (column-gap

243
column-rule-style
column-rule-style
FF FF FF FF FF FF
(border-style
244
FFF FFF FFF (solidFFF FFF FFF FFF
(dotted
245
column-rule-width
column-rule-width

246
column-rule-color
column-rule-color
FF

247
-1FF FF FF FF 16FF FF column-rule-
(color
-2FF FF FF FF FF FF FF (rgbaFF

248
column-rule
column-rule

column-rule-width-1
column-rule-style-2
column-rule-color-3
FFF FFF FFF (column-ruleFFF FFF

249
14 (column-rule
-1 (column-rule-width
-2 (column-rule-style
-3 (column-rule-color
250
column-span
column-span
(column-span
251
FF FF 16FF FF (column-spanFF FF FF
FFF > <h2FFF FFF > <divFFF FFF FFF FFF

column-width
column-width

252
13 (250px
)(column-span
253
CSS3 User Interface
resize
resize
(Horizontal FF (vertical FF (bothFF FF FF
resize FF FF FF overflow

254
overflow
overflow
CSS2FF

auto-1 (scroll
FF FF FF

hidden - 2 FF FF FF FF

visible -3 hidden

scroll - 4 (auto scroll

FF FF FF FF FF FF

255

FF FF
(resize . (overflow
256
9 FF FF (resizeFF FF FF FF
(horizontal
9 FF FF (resizeFF FF FF FF
(both
257
outline-offset
outline-offset
FFF FFF FFF FFF FFF FFF FFF (outline
(border
258
13FF FF (outline-offsetFF FF
(outline (border 15px
259

-1
260
-2
-3 FF FF FF FF FF FF FF
FF (HTML5,CSS3FF FF FF FF FF FF FF

261

FFFFFF FFFFFF FFFFFF /http://www.w3schools.com FFFFFF
/http://www.w3arabiconline.comFFF FFF FFF FFFi

* HTML, CSS

http://www.kutub.info/library/book/18973
* (CSS Responsive

* +++ +++ +++ +++ +++ +++

++ ++ ++ ++ ++ ++ ++ ++
mohammad200610022@gmail.com:
i F F FF FF

(

)

262

WWW - Kutub.info 19257

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

WWW - Kutub.info 19257

Uploaded by

Copyright:

Available Formats

1

> <img alt 7

> <header> <nav><section

> <input type[[

[[[ [[[ [[[ [[[ [[[ [[[ [[[ [[[ .

[[[[[[[[[ [[[[[[[[[[ [[[[[[[[[ [[[[[[[[[ [[[[[[[[[ .

(time ( Firefox or Internet Explorer

( Internet Explorer (url

( Internet Explorer (week

-webkit- google safari

)rgba(red, green, blue, alpha

:Linear Gradients-Using Angles

HEX rgba hsla

FFF FFF FFF FFF FFF FFF FFF FFF

FF CSS3FF 2D Transforms 3D Transforms

transform: translate(X-axis, Y-axis) method

FFF FFF FFF FFF FFF FFF FFF FFF

)(transform: rotate method

transform: scale() method

)(transform: skew method

transform: matrix() method

-3FFFF FFFF FFFF FFFF (transform

transform: rotateZ method

FFF FFF FFF FFF FFF FFF FFF FFF

++ ++ ++) (0%++) (100%++

-2FFF FFF 9FFF FFF (animation-nameFFF

-4FF FF 14FF FF (@keyframeFF FF FF

-5FF FF 15FF FF FF (0%FF FF FF

scroll - 4 (auto scroll

* +++ +++ +++ +++ +++ +++

You might also like