آموزش html & css3

51

Upload: jalal-delaram

Post on 24-Oct-2014

76 views

Category:

Documents


5 download

Tags:

TRANSCRIPT

Page 1: آموزش HTML & CSS3
Page 2: آموزش HTML & CSS3

2 عنوان

CSS3و HTML5آموزش در قالب پروژه

الكسيس گلدستين، لوييس الزاريس، استال ويلمؤلفان: مترجم: اميرعباس عبدالعلي

CSS2.1و HTML4نياز:پيش

مى خواهم كتاب كامل و 360 صفحه اى را خريدارى كنم

Page 3: آموزش HTML & CSS3

اينبار براي معرفي كتاب سعي كرديم از دوستان طراح، برنامه نويس، وبالگ نويس و وب مستر براي

كتاب كمك بخواهيم. بدون كمك اين دوستان شانس زيادي براي معرفي اثرمان وجود نشر و معرفي اين اند، هايي به ما لطف داشتند و در معرفي اين اثر به ما كمك كرده نداشت. در ادامه لوگوي و آدرس سايت

م.كني آورده شده است. از تمامي دوستاني كه ما را در معرفي و نشر اين فايل كمك كردند قدرداني مي

جواداحمدزاده - جامعه مجازي يا فاجعه مجازي

Page 4: آموزش HTML & CSS3

4 عنوان

فيلم و يا دوره آموزشي مرتبط با گونه خبر جديد درباره ي اين كتاب (ارائه محتواي تكميلي،هر

مي اين كتاب ي براي كسب اطالعات بيشتر درباره در صفحه مربوط به كتاب منتشر مي شود. موضوع) مراجعه كنيد WeDesignدر سايت آنتوانيد به صفحه اصلي

css3.html-http://books.wedesign.ir/html5

بكه هاي اجتماعيشي طراحي وب سايت و توانيد مطالب بيشتري درباره در شبكه هاي اجتماعي، مي ترجمبا دنبال كردن م

به دست بياوريد. تكنولوژي هاي مرتبط با آن

WeDesignي خبرنامه

ي سايت ما كه در صفحه اول سايتمان در آدرس توانيد با عضويت در خبرنامه عالوه بر آن ميwww.wedesign.ir هاي هاي در دست تاليف و ترجمه، دوره ي كتاب قرار دارد، جديدترين خبرها درباره

هايي كه قرار است برگزار كنيم را دريافت كنيد. ايميل شما نزد ما محفوظ است و به آموزشي و يا كارگاه كنيم. ميارسال ن spamهيچ عنوان براي شما

مى خواهم كتاب كامل و 360 صفحه اى را خريدارى كنم

Page 5: آموزش HTML & CSS3

����� ���

� �� �� ��������� 11

����� 13

���� ���WeDesign 14

��� ��!� DVD "��# 14 $% ��&'( 15

"��# ����� 17

��� ��� ��� �� ��� ���� �����17 ��� ��� ��� ����� ��� ���� 18

��� ��� ����� � � !"#�� �� 21 ��" ��$%� 22

�&� "�'�( )�� ����"*� � �� 23

)�� *+� :���� HTML5 �CSS3 25

HTML5 �+�� 25 � �� �$����,� ��+"��- 27

..�� $..# � /0..*�..+" 1� �0.. � 2�".. �.. 3�"� �HTML5 �45�� ���� 27

���HTML5 ���" ����- �"#�� -6� 29 CSS3 �+�� 30

��� CSS3 ���" ����- �"#�� -6� 30 1� �� �$7���8 �+�� � !9��: ���5 � +�� 32

���8���� ��1��� ;<0� 32 �� "#��= �� �8� �> 1��? !��%� �@<( 34

���>� ���� ��#�A 45��� 35

-�� *+� :.���(� ��� �/�� �01��2� HTML5

37

'�4�� ���B� herald HTML5 37 �C ��� ���5+� ���� HTML5 38

"�� D$� 39 � ���HTML 40 � ���head 41

�1 EF � ��$%�+� 1��� 42 G�+� � � ��� �� 45 H�I���� ���J !���� � HTML5 45

��..� �..�� K(..++3�� �..��8���� � F�..�L%�� "5�%� �+M � ��� �"� 46 N..�� �.. ��� �..%� � �..�HTML5 ��..�" �.. �

�"�$# 48 ��O ��$5+� $�"� � XHTML � ��� � $.#

48 �4(�; �P@Q E��R�� 50

�S��header 51 �S��section 51 �S��article 53 �S��nav 54 �S��aside 56 �S��footer 57

4(++� ��� ��R��� ���� HTML5 herald 58 =%T "��� 61

Page 6: آموزش HTML & CSS3

3.��4HTML5 �CSS3 �5�$ ���6 � 6

-�� *+�7 :������ 89��� ��' 63

�"� "T�" �$P� D$� �� � � 63

� � ����� U$V�"� 65 �$' ��R� 68

�S��hgroup 68 "T �Q����" ��O 70 �Q���figure �figcaption 70 �S��mark 71 �S�� ��� progress �meter 72

�S��time 73 K(++3�� � � �8W� ��� $T$� 75

�%< � »������� « ��O ����" $# ! �@�� 75 � ��� ZR� � [$<� �Q��� :+"�$ 76

0\ ��$' �� ��+- 76 �� ���Z 77 � ���M �#� � 78

� ���cite ���� ]��,� F�%*� 78 �+� ��� Q$(+@� � ��)+� ��� �4(�@�( 79

<��5 � �Q���+� ��� "T�B" ��O 79 �S��details 79

�+B� !��%# #��@� E�� � !"# 80 C�� ��� M�%� 80 SR+�S � async ���� � ���script 81

`(+�" B ���� E�����HTML5 82 �QaR 84

- �: *+� :�- � �2HTML5 85

��M�� ��� ��4T � ! �@�� Z��5 �� ��M�� 86 SR+�S ��� � 2�' �� b$���HTML5 88

SR+�S � required 88 C�� � � ' ��+��"<� ���\E� 2�' 91

SR+�S � placeholder 92 Polyfill�.....�� �.....T�MO�� SR+�.....S �

placeholder �&�����T �� ���c �� �, !"#-

"�� 93 SR+�S � pattern 96 SR+�S � disabled 97

SR+�S � readonly 98 SR+�S � multiple 98 SR+�S � form 99 SR+�S � autocomplete 99

� ���datalist SR �+�S � list 100 SR+�S � autofocus 101 ! � D$� ��� ���� "T�" 2�.' � �.�� HTML5

101 search 102 U� N ��� Email 103

URL�� 105 �@<( !��%# �� 105

�"�� 106 ! �"P� ���� F�%�ranges 107

d�� �� 108 ��(�e ���� � 109

'+"< ��� ! � ��� � ��O � �HTML5 '�4�� !"# "�� 112

�S��output 112 � �S�keygen 113

K(++3�� SR � �Q��� � + �.S �.�E� �.� b$.����0 � 1� � 2�' ��� <�5� HTML ."�.#� $.T�

113 �S��form 113 �S��optgroup 114 �S��textarea 114

�+�, 8+�� 114

;<�$ *+� :9�+= � !�� �HTML5 115

"��� ��( � g�&��e 115 4\�+� �\�� H�� � 116

���' ��� ��$V"E�� 8��� +!"�� 117 #+!$ ��� ��h8M����*8M�� /�� '+-< 117 #+!$ ��� ��h8M����*8M�� /�� 3$Q 117

�( �...�+...�� �...��' 1� �...�� � );...<0����8����� � �� $T$�� �"�� 117

$�"� � 118 H�� F � H�4' ��� �$�� 119

مى خواهم كتاب كامل و 360 صفحه اى را خريدارى كنم

Page 7: آموزش HTML & CSS3

����� ��� 7

SR+�S � autoplay 120 SR+�S� loop 121 SR+�S � preload 121 SR+�S � poster 122 SR+�S � audio 122 *:+���� "�� 1��� $.S( �.��'��E� ;.<0�

122 (�(+� � ��� ��� source 124 <&(+; ������ � ��$<c 6 �(8 � ��� � $.#

125 MIME type�� 126

"�(�Z '+-< �� �� �.� j.0: Z.��5 �.��' �.�� �� 128

H�� �R�� !"�� ��� Q�SR�� 128 ��"G�� ".HTML �CSS ��.�� ��. D��.#

129 '�4�� API .��"�� �.Q��� �.� b$������ ��

131 ' ;5$( � j0:+-< 133

�"Q =�5 � j0:� '+-< 136 <%� 2�,��� �: �� 1� k:�F� ��+F" '+-< 138

������1��E� .' F�.�1+-< FN j.0: F�.�1 � 138

<��5..+� �..�� ��..O �..� b$..���API �..Q��������"�� �� 141

��� �" �� 141 SR+�S �� 142

<&(+; � 3$Q+�� 143 �$P�E� ($Q� $S( ���E� U�� � 144

�%� EF��1 F$���j ��� 144

;(> *+� :���� CSS3 147

*:+���� �8���� 1� ��� "5�%� 147 M8�j��8 ��� CSS3 148

M8�j��8 ��� $R�"���*� 149 M8�j����8� SR+�S 151

Ua ��� �l� 152 aU ��� ��R�� �l�� 155

�$P� � �l� �Q���� �$(+" !"# 158 �$P�� �$(+!"#" 158

::selection 159 d�� � ��CSS3 160

RGBA 160 HSL �HSLA 161

(��� 162 Z%� � 3��$� 1� ! �@�� 163

�#$8 ��� �� �8border-radius 165 �� �, ���� ���� �Q��� 169

�%< 1� ! �@�� � <+"� inset "�� �#� ����� F��M%� �$> �� 172

���� ���� �� ��text-shadow 173 ���� ��� �+�* 174

� "4� ZS' � � ��$R+- 175

;�??&2 *??+� :??=���� �??� @??� CSS3 ��??+= �� A$ �.%�� � ����� 177

��$(� �R Bd��� 178

��"���� �$� W3C 180 "..5 �$..� �%� �..��8���� � � �:��..�� �

WebKit 184 ��" �%� F � ���5 -� ��� 185

��$( �R��� .�R Bd��� 1� ! �@.�� �.�SVG

188 ��$..(� ..�R d..��� ' 1� ! �@..�� �..�+�..��<�

������ ��$<c � 190 ����M��� @�+" 190

��$(� $G<� d��� 191 $O��� g��O� C�� �� �$� W3C 192

#+!$ � "5 �$� g��O��%E� WebKit 194 �� ��� � �'�8 ��- .� ���.5 -� ��� � ��+-

196 ��$(� "�$#���&( d��! 197

"�� 1� ! �@���� $S(�� k: � �1+�� 199 ���M $S(�� k: �1+�� 202

�: �0����� 204

Page 8: آموزش HTML & CSS3

3.��4HTML5 �CSS3 �5�$ ���6 � 8

;�(2 *+� :=B%% *C> �#D � �2 �?2� ��?����� �CSS3 205

K(++� Z&# �� 205 ����� F�%�translation 206

K(++� ���M �� F�%�scaling 208 jR�� 210

m$4�1��� 211 ���TK( M�� F � �T++� 212 *:+���� � 1������ ��$<c �8 �0 � � ���

FN 1� Z�5 212 ��G�� ���� 213

transition-property 215 transition-duration 216

transition-timing-function 217 transition-delay 218

�QaR$�� E� Q$SR+3� transition 219 !$<T "�� 1� ! �@�� � ��.G��� � .�C �.�$�

220 ��+%+�* �� 221

�'�- ��� <+"� 222 ...Q$SR+3� �...� b$...���(�&...+C �...�� 1� �P�� 223

animation-name 223 animation-duration 224

animation-timing-function 224 animation-iteration-count 224

animation-direction 224 animation-delay 225

animation-fill-mode 225 animation-play-state 225

�QaR �$� $�� . � ��.�� .Q$SR+3� ��+%+�* 225

��$R �� ��� � � +- �R$�N 226

;?� *+� :%$ �?�� � � �?��� ��?#� ��?< �?��6�������: 227

1� ! �@�� �� �� � � �� ��$'@font-face 227

�$� 1� ! �@��@font-face 229

4(++� 8���5 F�&�+�� �'�Z ��$' 230 Q$(+; �8��� Q$SR+� ��$' 233

! �"P�Unicode 234 : ��$' 1� ! �@��+��$ �P@Q �� !"# 235

�$��5 3�7�a�� 235 ��$' �R�� �.��' �� �.�� ;.<0� �> 1� .�?

���� Font Squirrel 237 3�7�a���O 240

�+F��" � ��$�"��CSS3 242 Q$SR+� column-count 243 Q$SR+� column-gap 243 Q$SR+� column-width 244

..Q$SR+� columns ��..�� �..QaR$��.. � Q$SR+3� F$� �� b$��� �� 246

F$� Q$SR � ��+� height 247 Q$SR+3� ��O F$� �� b$��� �� 248

Q$SR+� column-rule 248 �� �, O &#� F$� � 248

Spanning columns 249 3�7�a���O 250 �"( $�6��,� 251 Media Query�� 252

Media query�"� � �� �� 253 #+!$ g��O� 253

Media query���4�� � ��h:��� 254 *:+���� �8���� �� 255

�4���� � �+�* 255 ���> ��� 8"�1� �+" 256

;2� *+� :��6�%� ��C������� E �?2� ? = 8"� �

FG � �C1> .� H �F%� .��� "� � = 259

45$�+� ��&�� 260 ���O�� ��� �.� n.@� �.� b$����- .S0#�

261 "� ��� ����k 45$�+� ��&�� 262

���0�� 1� ! �@�� � Modernizr H�.� �6T*:+���� <��5 1�+� 45$�+� ��&�� 262 � ��'� 45$�+� ���� �\�� H�� 263

مى خواهم كتاب كامل و 360 صفحه اى را خريدارى كنم

Page 9: آموزش HTML & CSS3

����� ��� 9

45$� �&,�N+� ��&�E� position 263 � ��'� '��KT o�� � H$>+��� 265

��h8���� �*G� 266 �RN�� ��� 2a� ����M��� "5 B!��%��%� 270 ������ ��� E�� �P(�&�# 1� m��R 271

�..�� <��5..+� ..� ��.. �$..��� "..� FM..0� :������ ��� HTML5 271

�� �$���� ��� ��� ��4'+� )�&�.# 1� m��.R7�(+- �+- 272

�'�Z cache.manifest 273 4(++� D$� �$P� �� ��� server 275

� D�..T�� �' �..� F..�Z Manifest "�..� � HTML 275

��.� ����. 1� !1�T� � � Rl .+!� 3�.�a>����� ���� ! �@�� � a'N�� 275

a'N�� $#�" � � ( �+" 276 %>� �6T � (+F�� Rl 1�+!� �.� F".#��

FM0� � 277 <��5 F � �'�\�+� ��� � �&�.# 1� m��R

�� ���� HTML5 Herald 278 ������ FM0� -,� F � �"P� � �� �.P(

279 j0�fallback 280

$P� EF � 1�� ���3� 0�FM 281 �' �'�.8 ���.5 FM0� � .�Z cach.manifest

282 a�N 1$�� ���� �+�- 283

��� =����� � �4����+�* 284 Rl+!�1��� �� �P( 285

.# � +!$ � Rl ;.<0� .+!� 1�.�� �� �..P( 285

Rl+!�1��E� � *� 285 Rl+!�1��� <P�� 286 ! � �..�� Rl..+!� ��"��..�� A..�$( !"..#Rl+!�1��� �� �P($O�� ���� "��� � 287 � ��'� Rl �+!�1��� ! � �� 287 "�(�Z ! � ��� Rl+!� !"# 288

� !��+F� �� 288 M8 �h���� �� [�: � 1��� ! � �� 289

�"P��� Rl � +!�1��� 289 ��� 3�7�a�+� 290

<��5 F � �'�\�+� Rl+!�1��� �� �� �P(���� HTML5 Herald 290

API��� ��O HTML5 296 Web Workers 296

Web Sockets 297 Web SQL �IndexedDB 298

�� ��� � � � � �� 8+��-� 299

*+� ?�;2�.� :Canvas, SVG I��6 � ?%� Drag and

Drop 301

Canvas 301 %� !���� � ��(��L0 � Canvas 302

�S�� �R��canvas 302 �� �� -��� canvas 304

P� F � /0*�+A canvas 304 ��.� d�� ��0��� �� �.� -.�� �.� D��.#�

canvas 305 -���C 4<\ ��6�� �� ��� canvas 306

�+ � 3�S0� -Canvas 307 C�� ��� 0�d�� ;< �N+M� ��fillStyle 307

H�&#� -����O � ��� �, �+� 311 Rl .+!�1�..�� ..��( H�&.#�+- �� �..� !".#�

canvas 314 F � ���5�C $S(�� �� ��� canvas 316

��&� E� ��S(�� 318 "�(�Z �C $S(�� O��� � ��+�! @� �+" 319

����R� ���+� "� �getImageData 322 ��&� � '+-< ��$V"�� �� ��� canvas 322

�%��j �� �� ��� canvas 325 ���O�� ��� ��� �� b$����h:��� 329

��� =����� � �4����+�* 329 SVG 329

�� Z&# -��SVG 330

Page 10: آموزش HTML & CSS3

3.��4HTML5 �CSS3 �5�$ ���6 � 10

1� ! �@��Inkscape ���� ��.S( -���� SVG

333 '+�< ��� SVG 333

���0�� 1� ! �@�� � ZV�'�� 334 -���C $S(�� �� ZV�'�� 1� ! �@�� 334

$S( F"��R���� �� ZV�'�� 1� ! �@�� 336 Canvas �G� � �� ��SVG 337

Drag and Drop *)+F" (�R�"�� � 338 ���8 �� F � �hq 339 <��5 F � �'�\�+� .*+F" ) F".#draggable

� (F"#�Q��� � 340 �&,�NDataTransfer 341

�S�� F � H$�5 ��� drop !"# 342 ��� =����� � �4����+�* 345

�6�� �� F��� � �� AR+"�- 345

JK%�J L��: Modernizr 347

1� ! �@��Modernizr !��%� ��CSS 348 ��8��+�� Modernizr �&�����T ����c 350

*:+���� C�� 1�� � � ��� �� ��� HTML � IE8 �0 � � ��� "5�%� �( 351

��� =����� � �4����+�* 351

JK%�J � ": WAI-ARIA 353

�$��WAI-ARIA � ��8��4� �Q��� Z%&�� $.# 354

4\�+� �$�E� WAI-ARIA 354 ��� =����� � �4����+*� 356

JK%�J H :��M��� 357

مى خواهم كتاب كامل و 360 صفحه اى را خريدارى كنم

Page 11: آموزش HTML & CSS3

������� ���� �� ������� ��� 1

�� ��� ���� � �� ��� ��� ���� �� �� ����� ����� ������ ����� HTML � ��!" �� � #!"� #��!$ %&�!' �� .��� #"�)�� ��*+�� ,�-.��� �� /�0��1��� 2��3 �$� �� �� �� 4��� �1aut

faciam LLC 2�� �5�0 � �6 �� �� #������ 7���6 � ��8"� �!� ��)�� �!�9)� �� :!*; �� .�����!< �� /���9" => �� ?� #@� /�� ��9� ��A0 �� �� #��$Wall Street �! ?�B.� �� .��! ��!�

���!� �!�� �� �� #� � ��6 � #� ,��� ��� C�8 #��$ � /�� � 2�D ?�E�� ���93 � �����! �� ��) � ���� �� .��* FG� ,��!� ����!9��Girl Develop It �H!� ,��!� �!)� .#!� /�!�

����� �� �<� ����� /�� #+�; ����� ��)�� ��!>"� �!< /�!I3� �� ��) �� .�9� J/�!�� ,��!�NYC

Resistor �� �+$ .#� ������ �� ���6 �� =)� K� �� �� �� �����0http://alexisgo.com/ .�� �� �� �� ����2

���!��� /�!���0 �� K� ��"�!9)� �!&��L � �� #� ?�B$� �� � ���6 M��L N) �)���O ��)�� ?� �� �� .#� ?�B.�2000 �� #���5" #59' �)� �� � ?��!P ��!&��L �� �!� ���!�� �� �� .�!9�

�)��Q0GIF �! �� �!$G� ?�! R9!< ?�!L �� .#� ?�B.� �&��L � ��� R)�� ���� �����< N)������� �� ,��@� /��� �5 � ,���6 /�� K� /�� ,��$ �)�D �0 �9� S!��*0 �� �!&��L /�!�

T� �� �9������ �)�� �� U�� � �� /�.� T� � CH � �� � � /�� TV9� ��L � �� .���� /���� K� �&��L CH! � ��!+� �� �!�) 8!�� 7�� �Q>$ CH � �� ��)�� �� #)�! ���6 .#!��

http://impressivewebs.com .#� ��� ��� 3

:)� H�W �� �� ��"�9)� �&��L ��9D� ?� �� �� #� ��������"1999 #)� �&��L � /�!������ ?�'� �)�< � ����� /�� �! ��!� H!� .���� ?�B!$� /�)G<CSS3 �!X��� ��!�� �� ��

?� �� ��@)62007 2�!� �5!�0 ?�! ��!DY �� �!5 � ��� Z��$ �!����� � :!)� �� /��! ��8!"�WebKit FO��!$� ���+0 � [�*)�\0 �CSS3 ��WebKit /�8!P� /�����!� �! �� � #!� �9!$6HTML5

� �]0 ,��! �� ��!Q@� %!��^� � �$���6 FO�\� ��9" CH � �� /�� �� .���� �)O� / ���*�!.< / �� �!!�������CSS3 �HTML5 �!!� �!!�)��. (http://www.standardista.com/) � �!!&��L J�)��!!0 �!! ��

�5!!�0 �!!;H3 K� / ����!!@9� �� � #!!� �!!9� ,��!! �� �!!�)��6 �!!�� �� �)�!!� /HTML5�CSS3 � JavaScript �� #*_' �:)� �� /�� � K� �5�0 � �9�. �� �� ���� ���� �� �) �� ��� �)� ��DP a^

(.��� 2�]��

���� ��� ������ ����!

1. Alexis Goldstein

2. Louis Lazaris

3. Stele weyl

Page 12: آموزش HTML & CSS3

"��#$HTML5 �CSS3 %�&' (��) �! 12

F�� /�� ���)� ���18 �� #���5" �&��L �^�& �� �� #� ?� �� ��'� cQ>0 � �9� �!&��L�� .#� 7���6 � K� �5�0 ��� ��X� �� �� ��) ��� ,���9d+� � #� K� /�������� �� ��)

� �I3�9 �����!� K� #59!' ��!QQ>� �����! ����G!-���(WIPA) �!� K�!�& �! �� .�!)6 ���3�+]� /�����6�� �� /�CSS �L�! �! �!��� a^! �� �� �� � �!9 �*_� ���!� �!� #� �$��

,����� � ����9�+�� =)�� #)� �� .�9�9$Max Design (http://mxdesign.com.au/) �� ,���� �� .�9�

مى خواهم كتاب كامل و 360 صفحه اى را خريدارى كنم

Page 13: آموزش HTML & CSS3

���� ?� �� /e���9�0 �� ,��@� � ������� J�&��L #+ � =)��� ��� � /�� ��&��L �� �� ��� /��

�� .�!���� ��� =��� �� ,��@� #+ � /���� =)��� 8�� ����)� ��&��L � #� ,��� ���< =)�8"� ��� �)�HTML5 �CSS3 3 ���_0,���6 ��P� � K� �&��L �� �� T�V /e���9�0 �)� .��� �&��L ���

,��� ��6 ���� �� #)� �� ��9�� � ��� �!� �!�9� �!&��L �)�! �/�!-)� ��!�� �� �� �D �����0U�^5�� � ��6��� �N*����� # � ��9d+� .�$� �)G< �.����<� � K� #_0 /�� 8!�� :!)� �� /�!�

���9�0 �)� ��� � /e ��8 � � ��9�� .#� ,�$ ��6 ���� �� ��!d+� �)�!�PhoneGap �!� �! ���!0�� ,��@� CSS3� HTML5 ����� �#1)������P � 2�!@�< /��! ,�!�d�< � �"�.�< /�� f!�>� /�!�

����� �� � � � ��� ��])� �@�0 �$�� /�� � ��9�� T� �� �)�� ��+� �#� ,�$ %Q� �+$ ,��+�� #� /e���9�0 ��+� �� ,��@� �� �& .�$� ,�$ � � ��Windows 8 ,�!$ ,��.)��� �0���D+0

�� �� #� �� ,��@� � :��3 T�� �)� �� �����0 CSS3�HTML5 �JavaScript ����� ��!�)�9 �)���� [H+3 � ���$ ��P� ���9)� /�� � ����� �)� �� ��� ���� �V� � 0��@0 g�� ������� � � /�!�

�� � � ,�$ �$��C �)Java �� /�� N)�8� ,�9)6 �� /e���9�0 �)� /�����) ��-)� F��*3 � .������ .�� ���� F���8�� �8P ��&��L

A��9��� �� ����� ���� h �9� ���@ /e�!��9�0 / ������!� � �!)�P /�!� ��! � �! ��� /�!��� �+P�0 ���" 0 ��� � .��$K�� �� /���5 /��! �� K�!� �!)� �Z�!i�� �!)� �! �*0�!� /��

K�� �� /���� �9��� K�� �)� �)�$ .2��� K�>�� �+P�0 �!� �!��+� � ?�!j� �� ��+� ����6�� /���$�*�� ��� � ���h��P �� ��) K�� �)� ��$ 2�]�� �� /� K�� �)�0 7��!�6 /��! �!�HTML5 �CSS3 �!� K�� �)� .#� � F��!'�Q ���!+0 �!"�L �� .���� �� h!P�� � ��!�6�� ��! �!� ���#�� �; /��HTML5 �CSS3 �� � #� ,�$ ,��� a�i�0 K�� �)� �� �� h!P�� N!) ���!93 � �����0

#�� �; �)� �� 2��� �� /�� �"�L �� � ��9� ,��@� �6 �!� N!+� �� #� ,�$ ��k 8�� ���j� ��� ��!9�#�� �; �6 2�D@� .��9� 4�� �D �� �)�P

��� �� ���� K�� �+P�0 �� �� �)�� �� �V� � ���6 #� � ��*; /�� /�� �� ����� �� K�!� �� #!� ���!; �� �QQ>� ���"� ���$ �"�� �V� �� ���" ?��5� ��QQ>0 ���e�� ���+0

�� �P��� :�.� � ����� ��99� ,��@� ���$� e�� � �"�L �� ��)�, �� � �9!�� �9!$6 �!���-�� /�!�,e�� /�� ?��5� ���93 � /�&�� #B� g�� �-)� �)� .#!� ,�!.� �!"�� �!V� �� �!QQ>0 /��

�� ?��!5� ��!QQ>0 ,e�� N!) /��! T$�� �Q; �� �)�P �� �� T"�� T�+Q0 :�.� �)� :& /�� �0 T9� ��k �� ����-�� ,e�� 8�� �_@' ��+� �;���< �� �2��- �V� l)�L �)� �� T� �! �!��� � ��!�

=!> �� .���� �� :'� ,e�� T� � �9� ���;� m�*0�� �)�P ,e�� �!� �!P �!� 8!�� K�!� f!�>� /�!�=> ����� �"�i� F�_�i�0 � n��&� �) � #��� �$�� %�^� �� 2��� ���&� ���93 #_0 �� �)��

»TP�� �� ��� «,���6 h��!P F�_�!i�0 2��� �5 � 2� /�!0 ,��!� �!X��� �� �� /�!-)� h �!9� �!) � .T9� �"�5�

K� �!&��L �!"�& �! �!� �����!�+� � ��!�� � ����� T$� �����0 K�� �)� �+P�0 � 2��������;H3 �"�& �)� � �) � ����� ?�B$� .T$� ,��� ��+� ��9�� �9�

��5���*3 ��*3����

Page 14: آموزش HTML & CSS3

"��#$HTML5 �CSS3 %�&' (��) �! 14

��� �����WeDesign �&��L T�0WeDesign ?� ��1388 �9��� �� �� �� ���/ � K� �!&��L 7��!�6 �#)� K� �&��LK�� �+P�0 /� ��� ��� �&��L �)�� �X��� T�0 �)� U�� .��� ��q6 ��&��L � �*0�� FO�\� � ��

K�� �H� /��8�� ���� /��������� �)� 6 ���� K�!� �!+P�0 � �!$���6 /�!� � �!)�P /�!�K� �&��L /�� ��� .#�

,�� �� �.� F�3HL� %�� /�� #���5" / ,��� �,��� �)� /�� K�� � �$���6 /�� ,�$ �+P�0 /�� :#)� � ��I3� ��0http://www.wedesign.ir/ .��9� �5P���

:�+)� ���6 l)�L ��[email protected] �� 8�� .��$� ��+0 �� K�� TP�� � �����0

�� �����DVD ���� K�� ,��+� � � N)DVD ����� /��& �� #� ,�$ �X��� 8�� �)� :#�

• ,���6 /���� ,e��< / K�� : �� /�� • �� =� 10 �$���6 T��" #3�HTML5 �CSS3 ����-�� �� � � • 40 K� �� ,��@� /�� f�>� #��" � �� ,�$ MH'� ���" #��" • �-)� ��@� K�� /���50� �� ����� /�� :)�+0 ����� ����� �9�� �\0�� �� �� /��.

T��" ��)� /�� 2�� �)� �$���6 /�� ��8"�quicktime 2�!� �)� .��9� %Q� �� T�� /�� � �� ��8!"� �� 8��DVD .#� ��P�� K��

مى خواهم كتاب كامل و 360 صفحه اى را خريدارى كنم

Page 15: آموزش HTML & CSS3

�� ���! ,��9$ �� �d�)� ���) 2�� �)6 �� ?�+&� s�)� ��� N!Y�� U�!.�� �t�� ���$� ,��9.� �� T�� �� ,��@!�

HTML5 ����� ��+)�� �� .��� �)G< ?� ��2002 :!)�" �P�� /��P� #3� �� #$�� T�+Q0 �d�)� /�;6 ��9�� �� C�� �D$ �� �

XSL ��!� �� ,��@!� /�!P � �� .��� =)�8"� �� �� createElement ��!� �� #1)��!� ���!P ��innerHTML � �'�93 �� �$ �P�� � ��� ,��@� %!�Y� �� �.> �� � �9$� /�!�1 HTML �9!���

�+� �� �� ,��@� � ���0CSSN* �.��� ��� ?� ��2008 =*9P �HTML5 ,��0 �'�93 .#"�� Ft�; ���$ f)�50 /�� #!��9)� /�������� ���

�>�� ����1���6 �08 �+� � ����� � :�.� � �!'�93 W�!99� �)�!�9$ �� �!)�P �!'�93 �9!����0�+� �������� �)� �� �)�P � �9�� /�P �� �� ����" ���93 � �� �*�Y� �9����0CSS /�� � 8��

%�Y� �)� �+� ?�+3� �)�P /�� �� #\�\& ��+� .�$ ���� ,��!�< ,�� �! �! �5��� ,�99� /��!HTML5 .��� ��])�

#!$����) �� �!�) �� �� /�!9"�0 ="�.�� �� �5 ��� T�� ����) �?�& ,�����!� �� =)�!�2 HTML � �� T %�^� �)� �� K� ���DP 2����9�3 :#$��»�� ��� �F��' �� �� F���!� �!� �!����

CSS %!!!�Y� �!!! ��!!!� �� �!!!)� �!!!D90 ���!!!$ ?�!!!+3� ����1!!!��� #!!!��9)� �� � �9!!!$�� /�!!!�document.createElement(elementName) � �"�5� �� �)�P %�Y� �6 � ��9� ,��@� �! �!9"�0 �!)� .��9

7����< ��0��CSS �� ZHL� �!� � ���� ��!P� T!� 2�!� �!)� �! �*!�Y� �� ��� N*! �6 �! ���!0.��� x�Q �«

F��9�� �$�� ����)� ������� ��)�HTML5 � ��!9"�0 �!)� � �!�6 �� K� �O�!5" �!+� �9��+�_$� � � #$��� ZHL� �9"�0 �)� �� ?�& � �0 �� .�$ ����� :#@� ���» /��! �� ��!� �!)�P �9"�0 �)�

/�� �+���0 ��'� N) # �IE7 ��6 ���� �� ��6 �� �0 .T�$�� �� 7��V�� �� �9�« y�� ��P ��5 ��� N)4 F��*3 �� � #$�� =�H � �� �*�^�HTML shiv �! ?�& .��� ,��@�

:��9� #;� /�5 F�;�@0� • �)���e2009{��$ ��� :5

� �����?�5" /�� #1)�� ����HTML5 ������ ��IE .��� �.9� �� • �X�e2009 F���� =}06 ~���" :HTML5 shiv �!��> �� �!���� �>!�� � ��Modernizer �"�!i�

.��� • �)��"2010�"�& �� ,��� N) :/���-��� ���� ��+P �� #1)������P /��6 ��!��� �!)�)� ��P �7 �

:���< �8 & T� /���+� � .����� =��� �� ����� #1)��� T]

1 �!Q93 ,e�� �� �� �� �� ���� �� .HTML %!�Y� �!) �HTML ��!+� ��!V9� ��!$ ,��@!�tag /�!�HTML �� .#!��)�]�6K�� %�q� �� �� ?��5� �� �Q93 � %�Y� ,e�� �,�$ �+P�0 /��tag �"�� ��� ?�!'� ��!+� �� K�!� �!)� �� 8�� �� �

�� /���< .T9� 2. Working group

3. Sam Ruby

4. John Resig (#�� 8�� jQuery ���> �� Z�*� c>$ �)�) 5. Remy Sharp

6. Kangax

7. John-David Dalton

8. porneL

Page 16: آموزش HTML & CSS3

"��#$HTML5 �CSS3 %�&' (��) �! 16

• ����2010899� ���0�� :1 #1)��� �� ���$ �P�� �O�5" �� �-)� � � �shiv /�� �! /���A0 �� {�!Y /��! %!�9� �_@!'IE �!+� T!!q ��� .���G!� �� �+!!���q ��!L �! �!� .��! /8!�-��

�5�0 7H0 �,��0 :& ,�� N) �"�) /�� �� T�� K� ����9��.�99� • :)��62010:�� ��0���P :2 :)�" T�� �� � ��< ��IE Print Protector ��!Q � �! �!)IEPP ��

F���� ��+� �� �� ��� �.9�HTML5 shiv �� ,��@� ���� ���*�!.< 8!�� {�Y �_@' �� ��� F���� ��HTML5 .�� ,�$ �"�i�

• :)��62010 �+)�; F���� ��� :HTML5 shiv �� ,�� � �� ,�$ �X��� :&IEPP .��� �)�50 • �)��"2011�����" �������� :3 �� � #"�� ,�D3 � �� ,e��< #)���IEPP � ��GitHub ���� ?�\��

#�0 .��� =)�8"� 8�� �� =3� � ��� U�L� �� =0����)� � ��� %�0�0 �6 /�� ������" /�� • :)��62011 :IEPP v2 ��> �� � �$ �.9� �Modernizr �HTML5 shiv ,�$ �X��� �)�P /���� ��

F���!� �� ,��@!� ?�& �� ����-� ��� ��-+� ?�& � ����� ,��@� �>�� �)� ��HTML5 ���&��L .�9�� ��.)��

����HTML5 shiv ��.� �� #� �)����� �� ���+� N) �D90 ,�9��/ /��! f�>� ���"� /���+� ���6 K� ��*.�< �� �!� ,��@� /�� � �� �9��� �������� �) � K� ���DP 2����9� �D90 �)� .#�

�� ���A0 K� �+!$ K�!� �)� 2������� .T)��� =\� ���� �)� �� 8�� �� � �+$ �9��+� /���"� ��� �����G� �!� #!� �!)� �!.� F��!D� %!�� /��! ,�� �)�!D W�!�9� :!+3 :�!$ ��!+� �! �!0 �!9� l)�.0 ��

����� .�)��G- 4��$� � ���-)� � ��O�5" �� ��)�� /������ � HTML5 �CSS3 ��6 /�-)� ���� �� �� �i�& ?�& �� M�@� � �0 K�� �)� .#� �0

�� ���; ��0��� � �� �� /��)� 7���� � /�� ��� %��^� �)��8�Y � ��� �� �!���� �!)� �!�� �+!$ �! �� �� �0 ����6HTML5 ,�D ����9�)�� .�)�* – H!� � ��)�� �������- �5!�0 �!&�^� ����!9��

7���6 ,��$ �� �9�� �!� N!+� �+!$ � � #� �5;�� ���$ ,��!$ �)�!D �!0 �!9� �� ,��@!� /�!�HTML5 .�)����� ���6 � ��

�!� K�!� �)� �� 2��� ��+)� �� :!�� �� �!� �!9��� 8!�� �+!$ � ��!$� �!�@� ��!)�� �!���0 �K� /�!5 ��]�� .�$ ����� ,��

=)�)6 ?�<4

�5�0 � �� ����9��jQuery �5�0 ���> �� �$�� ,�9��Modernizr �HTML5 Boilerplate

:)��62011

1. Mathias Bynens

2. Janathan Neal

3. Alexander Farkas

4. Paul Irish

مى خواهم كتاب كامل و 360 صفحه اى را خريدارى كنم

Page 17: آموزش HTML & CSS3

���� ���� ���6�� ��9)� ��HTML5 �CSS3 �!)� �� �!�"�� T�+!Q0 �!�9)� �� .T)��.� �+$ �� �)��� K�>�� ��

�.�� /�� �@/e���9�0 �)���8 � �)�0�)�P U .T���_$� ���� ��)�$ ,��+� �� � �&��L /�� �� ?�+&� ��)��� #� �� �� K�� �)� �� �>�� N) ��� �! �)�� � a^ �� :;��& �� T���HTML

�CSS �)�9$6 �9��� �� #� ��+� �& .�)��� N*! ���)���� �� x� /� #1)��!� � �!�� ��!�)��� cQ>0�� ?�& � ��$� �$����)� � ���� �5�0 �� �� F��D� �� ����� �! m�! �� �)�P /��

HTML5 �CSS3 .�)����� �� �� �)�P �3�i�� �"����) #!;� #!� �!�+� .�!$� #>! ����0 �!����� � �!$� ���!_� ��!0

�� � �)� �� 2��� �� � m� �� �+� F��9�� �> :!��� ��!L �! �� K� #!_0 /�� #!� �!�+� .�!���K�� �� ��) ����� �� �9" �& �� =� /���$� ,��� ��0� K�� �)� ��)� � �9!�� h!P�� %!�q� �!�

?�j�.����� �� �� �+� /�� ��� � �5;�� /�� :+5����� l)�L �� �0 T�9� N+� �+$ � �� ,�� �)� K�� �)� �$�� �� �� U�� �#)�D� �� /�!�

��k � � /�� ����� ��� � �D�6 � �&��L ��& �� #�5;�� �� �� �0H�.� � ����� ?�j� �� ���9�� -

A0 :&��� �)� �+� �� � �)�$ �� /�� � �� ���HTML5 �CSS3 .#� �! /���!� �9" � /��E0 F�3HL� �K�� ?�L �� .#� ���6�� N) �� =� /8�Y K�� �)� �t��

�� ���+� � �$ ���� �X��� �+$ /e���9�0 �)� 4�� ,�� �� ��P�� U��$ �0 T�9� ��!^Y �!�9)� �) �!��� ���,�$ ��])� ��Y � �99���9� �< �� (���� �5 #)�D� �� ���& �� �� �� ��� ,��� � �� T�9� �!)�P /��

�"H� ���)� �!T�9� Z��$ ���� ,��P� .T�9�� ��0

*� (���# �+�� ,- . &� ���� �� /

/�� K�� �)� �5�0�� �� #� ,�$ �$�� � � ��&��L � ����9�� /���!9" �)�0�!)�P �9��� /�!� �� �+$ =��� #� ��+� .����- ��" �� ������ � �9*�HTML �CSS �$� ��� a^ ��� �!)� ��

��)���� F���\� a�i�0 U�' �� ����� �� ��HTML N* � � ���CSS ���!3 �� .��!� T����>�� �+$ � � %��; �� �0������ �Y �� T)���6HTML5 �CSS3 .���� ���; ��0��� � ��

01&�# � ,��+ : �! �� #�)���"� /�� K�� �)�HTML �CSS �! �!� �0��!' �� .�!���� �)�9!$6HTML �CSS �� ��D9.�< �+$ � .�)���� �)�9$6 K�!� �� T9� �0���!\� /�!� �� �!9��� �!)� �� �!0

1 � ��9� �5��^� /�����!) /��! .�!����> �� K�!� �)� �HTML �!� ��!�6�� K�!� �� �!����0HTML �$�� �+P�0 � ���� # �8��� / /�;6 / ����+_� �!+5� ���!P �+!$�� �!� �!�9� ,��@!�

,��� {�Y � ��;�� F���.�� ��0 /�����" /�� .#�CSS �� 8�� K�� �� �����0»101 �!��@� /�� �9"�0 � �� ,��CSS K� �&��L �� « ,�$ �+P�0 ���" � %��]9)� ��0 �� �)�* ,�D

.#� ,��� {�Y � 8�� ��;�� F���.�� ��0 �

Page 18: آموزش HTML & CSS3

"��#$HTML5 �CSS3 %�&' (��) �! 18

�� � � J��� � K�� �)� � 6 :Q" ��API�� #1)������P �)�P /�� � �� �����<HTML5 :!!Q" �!!)� 4�� /��!! .�!!�� m�!! ��!!����P F���!!\� �!!� #!!� 2�O �!!��!!���� �� #1)��� �!!���� �!!t��

��\ ���+D" /�� #1)������P/ => ��!)���� �)�9$6 #1)������P � ��� .#��� /���i K�� /���� :Q" �)� ����� �� :�.� ��� �����0 U�' �� ��!�< �)�9!$6 #1)������P � �� ����� � ��9� �V�

.�����> �� �D�6 � �)����� ��)���

3 ���� �� *� �4��5# ,- .��/

:Q" %�q� .#� �+�+i � � :Q" ,���) :��$ K�� �)� ,�!$ �9 :*; :Q" ����� � �� �� �!)� �� ��!���� �� �]�� �)�D ������> %�0�0 � �� �D�6 ��� �)���� �� ��� �t�� �� c>!.� Z�!i�� N) �D90 �����

�� ���9� ,��0 �� ��0�3HL� � �����> :Q" �����0 .�)������ �P �� �� ��&6# :7� �8�HTML5 �CSS3

�� � �)� �d>)��0 �� /���\� �T�� /�� ��� %��^� � ��9)� �� :*;��/ ���.� /��G�1 f!)�50 ��!)�� �� h��; ��)O� ��9d+� � T�9��� ��k �� ,�99� �� ����� ��+� �� �0 T�9�HTML5 �CSS3 .�!�9� ,��@!�

< #�5i� � �1�� � �)� �� �������� ���*�. �!� �!� �!� a�!i�0 � T)����!< �!)� %!�q� �!� T�!��/���9" ,��@� : �; ,����� ��)�P /�� ���– .���$ �"�� ��� � ��� � �� �L�$ � �*��

,+�9+ ::�! �8� ;4� <.� =� .�>HTML5 � �� �)�P J/�� � � �)�95� �'�93 �� � � �+$ � �:Q" �)� �� � �HTML5 �� #!� ,�!$ �"�!i�

�� �"�5� #)� �1 .T�9�HTML5 Herald � �"�5� �+$ � ��� N!) :'� �� �� T�9� �!.)�+� #)�!#�� �� ��� �6 /�� � K�� ?�L �� �� �� ��" .T�9� %�Y� ��9� /��div �� ,�$ ,�99� T� �� s���

�� ��" ��^9�+� �9)8� .T�9� �� � � /��HTML5 �� �� ���; ������ � �� �i�& ?�& .�!���5� ����%�Y� : ��d+� �)�� article, section, nav, footer, aside �header !

(-&� ::�� �8�. &���6# .�>2 � .&�9��HTML5 �� U�^5� /�)�P ,�� � �� ��+DP�0 �:*; :Q" %��^� ����� �� �!� T�9�HTML5 ��!X� �6 l!)�L ��

V9� �� %��^��� T �� /�-)� /����95� � ��5� �'�93 ��� � �1 .�9� ,��!P� �+$ � �� T)����<�� �< /�� �0 �9�� .���)�9 �0�95�

:&� ::��?- �8� .�>HTML5 #�� �; �)�0�9��� �� ��) /��HTML5 2�!" �! �#!� ,��@!� :! �; �!i�& ?�!& �� �� m�! �� �!�

�� �& ?�& �� �������� �� � � .��$���" �� ,�$ ���� F�3HL� #_' ��0�k :�$ � �i :!�+)� /�� K� F�_@' ���6 �) �(URL) �� NY �� K�!>�� �� �!0�k :�!$ �! �!������� �� �-)� � � � �99�-

,�99��)��0 /��3,��8B� ���4 �*5P ��. �Y /��5 �!� ���*�.< ��!+� .�!99� �!&��L �� �!0 #!��"�� �!�

1. Markup language

2. semantic

3. Date picker

4. slider

5. Spinner box

مى خواهم كتاب كامل و 360 صفحه اى را خريدارى كنم

Page 19: آموزش HTML & CSS3

���� ,#�@# 19

2�" Q" �)� !�)�* FG� ��#3� /�� �� �� �0�3HL� ���+0 : 2�!" �!�)���� �� �.> �! �!�HTML5 �!� ���!; ��!0��� � �� �� �!)��� ��!�� d+� � �!��!!9 �!� �!$�� 8!�� �)���!� �� F��!!' �� �!� ��!$

2�3#�� �; �)� �� ������ ���*�.< �! �0��!*3 �! � �!99� ,��@!� ���!� �)� �� �+)�; /�������� ����P �� ,��@����)� ��+� #1)�������*$ �+)�; /�������� /�� �� �� /�� .��$

�! &��8A � B�C :0D�' �8�HTML5 ��HTML5 �� ��) �*�;� ���93 � ,�^� � �0 ,��6 �� ��$ �����9Y ��^� / #��" �95) #��9)� /�

�'�93 .��� �+0� �=�"audio �video � �)� #� ���; �� �9�� �)����8 � �9�� 2�]�� �� ��– �! �!D�6�� T���" �� /�� �0�k :�$ ����� : �; T� �� �99� �! T� � #���� �� #1)������P � ��$ ��)��

���8"� �!)� �� ,��@!� /�� 2�O F��� �+� :Q" �)� �� .����� �P��&� =�" ��d+� �j��� c>$ /��%�Y� �� ��" �� ,��0 /�� .�)���

�&6# :09E �8� �CSS3

,�� �� �� 8�Y �+� �� ?�& /HTML5 � #!�� ��! � �!�� �! �!0 ,��!� �6 ��!�� �T)��� a�i�0/�-)� N)�8�W T� � CSS3 =9)8� �� � � ��� � �� �� �@ �� .T)����1 /�!���1 ��!q6 �!)�P

�� �� ,��P� �+$ � �� T�9� � �"�^5�� � �0 ��� �� �� �_@' : �� �'�93 ��\ � �! �1! .�!�9� K�>,��$y�� f)�50 �)�P /�� �� ��CSS3 �� �� :��$ 8�� �� #�"�@$ �� T)����< �! �� :Q" �1 .��$

#�� �; ) ��@� � h)� �9"�0 �X��� K�GP /��CSS3 �� �+&� 4��� � �� �"�i� �� #)� � �����0 ��$�)� ��9��� ��9��)� ��� /�$�� � �*5P / (��� /�� �� ��)�< � .T����

F+� �� �A :0�G> �8�2 ' &��8A ��- � !�G�� � �! ,��#�CSS3 )� �� /�� �)� 6�� � � ����0 =&�L �� �� �)��� �&��L�< �)��Q0 � y� #$��� ��P� �9��� ��

�� ��) � s�)��6CSS3 �� �X��� �� �0������ ���� �� �)� /�� �!��)� �!)� �!*�� .�!9� � �!� �� �!)� �!��$G� �� .#� �"�� ���; ��&��L ��� �� �< �)��Q0 # � U�' �� /��)� ���� ��&��L � �!9���

y�� ����0 �) �� �� � � �)� �)� �� .����� �� ��" �6 ��� c\� �-� ��)�< � �-)� /� �� � �����-

�� �+$ ?�& .���� ,�$ ����0 �)��Q0 T]& �$��y�� ����0 �����0 ,�!)�� � �!^ /�� [�+�\!�� �� /� : �� ��CSS �� ��9d+� ��)��G- ��9� �� �)��Q0 �� ,��@� � ��9� f)�50 �!� �!� ���!50 �!� �!����0-

�< �)�Q0 ��Q93 N) /�� ������ %!�Y� �!-)� �!� ,��� �6 ���� .�)��- �V� �� �9��� /�!�div �0���< �)�Q0 �9Y ���� ���; /�� �� �� �0 ��� �9�� �D�6 �� ,��@� .��9� UG& �� �)���

1. selector

2. gradient

Page 20: آموزش HTML & CSS3

"��#$HTML5 �CSS3 %�&' (��) �! 20

��1 :0�9> �8� ��E &��HA .�>1 ��1 � �! ���@�+ .�>CSS3 F�� �� �.�+��� ��+� �) �)�+��)�< �� K��& � #1)������P ��+�; �8P :*; �� ��6� �t��CSS3 �+!$ �

�� ,��P� ,��P �)� �� � � ����0 �� ����G��� ������ � �� ��,��P .��9� � �+!$ �! :�!$ �!��B0 /�!��� ,��P� �!@>� �� /�!Q93 �!& �!) � ��9� n�5� ���9� ���5� ����� �d M�L �� �� /�Q93 �0 ���

,��P �)� .��9� �� :�$ ���B0 /�� �! ���!-� �! �� :Q" �)� .�$� ,��d�< ���� �) � ,�� ���� ����0�� 2�+0� � ,�9)6 � �� #� #�� WT���� �!.�+��� �!i�& ?�!& � �! �!9*� /�!�keyframe ?�!& ��

�+� ���*�.< �������� ��0 :��� ?�L � �i�& ��$� �� ��" �t�� �!� �!)�\5� �� �9��� T� �+$ T�9��.�+��� �)�#�� ���� ��.�9�� �9$��

*���' :0?+ �8�I&J � *+�� K!&� ,+��� ��- .�> #��"Arial �� a�P�0 �� �) ���� #��"Verdana s ��Georgia �)Times 2���d�� T� �)�$ s �!)� �� s��!$

�� ���-� �:Q" ,��$ � T)������� �D�6 l)�L �� �� �)�� ���0 " ��#�� �"� �0��" K� R)�� � ��� /�� ����" �� ,��� #��< �_@' � T��)�� �� �� /��G��� ���� �� �02

#!��" ����*! �!�� � �)��!Q0�� �� /�!)�PJ �!��)� �! �1! .��!$ /��G!��� � ��!� T!�� /�� �! T!� ��0�V���CSS ���!-��� �� �6 �� ,��@� � �� T)����� �9Y :�$ � �� ��+0�_@' /��_� T����0 T�!�� =)�!+� ���� ���!

2�O ��9)�,��� �"�i� �_@' � �� �*�Y� �$� ��� �� �) �float .T�9� ,��@� ! �8��+��# *�6)�# :0>3,#�+&� < .�>L��M ,�4E � 4 &�MO ��� *PA .���5

� �)�P :�� /��������API1)������P /��# ,�$ 8D]� �@�>����)� �)� �� /���� .��� /��! ��,�$ �&��L :)� �� /������������ �� �t�� �!)� �� .�9!$� �!�@� T!� K� ���!+5� ��� ��!� /�� �9���0

� � :Q" ��]�� �� ������ ���-� F������ �)� J�)�08�-�� ����� ������ #�5;�� :T)����� �� n�� /��,�� k � ��*$ �)� �� � � ��9d+� .K� #_0 /��API�� �"�5� �Q>� ��L � �D90 �� �� � � T�9�

a�i�0 :��� ��L�+� ��$ T���� ) � �"�� F��' �D�6 �� �@�5i ���*�.< %�q� ��)� U�!Q� ���!� � ����� /�+�– �� �"�5� �+$ � �� �5 �9� ��9d+� �!� �!� T�9� F�!3HL� %!�� /��! �!D�6 �� �!����0

�)� ,�� �� �.� API.��9� ,��@� �� :0>!��� �8�Canvas, SVG �Drag and Drop

�� x�Q � /���9" �� � �� K�� ?�� :Q" �#�>� �)�!Q0 =)�!+� � T!� /��! �!� T�!�� ��!])�,�$ �� K��_� �-)��) %�;� /���9" �� �)� �*�� � ��� .���$Canvas � ����0 � HTML5 $ �"�i� ,�

a^ � #� �� T���" �� �����< /���� � �9�API ,��!P� �+!$ �! �!� #!� �� x� #1)������P�� �-)� /� �� .��9� T� �� ��0�V����� �)��Q0 ��6 �� ,��@� � �0 ���SVG ?� ��P� �� #��

1. transform

2. download

3. Geolocation

4. Offline Web App

5. Web Storage

مى خواهم كتاب كامل و 360 صفحه اى را خريدارى كنم

Page 21: آموزش HTML & CSS3

���� ,#�@# 21

�*�9� �)8-)�P �� �)� �� �#� �"�� F��' �������� �� �6 �� � � ���*�.< ����0 � ��� ������ K��_� ��*; ���� /�� ��� � �� 6 �� .��$API �!� /�!)�P #1)������P T)����!<– Drag

and Drop ���� ��� � ���.� ��+� �)- �.� #�� �; �0�k ��L � �� �_@!' �� �!'�93 ���� ��� � ���� ��+� ������ �� �� .�9�

:R� ,S�STModernizr /��!! ��!!P�� /�!!���8 � ��!!�� �� /�!!��� ��8!! � N!!)HTML5 .#!!� ��8!! � ��!!+�Modernizr �!!��> ��

F�!!����� ���!!+0 �� ���*�!!.< [�!!*)�\0 �!!� #!!� ��Y�!!� � �!!��6 #1)��!!����PHTML5 �CSS3 ���� �)��9$ 9��� ,��P� �+$ � � � N* �� ��� /��CSS �!)� �� .��!�)�9 �!.9)8� :�!$ � �� ��

�� ,��@� /�� h)� ���6�� N) �� => Modernizr ,���6 T!� K�!� ?�!L �� �!��> �� �)� �� .T)�K�� ��)�< �� �� ,���6 hP�� N) �+$ :�$ �)� � .#� ,�$ ,��@� �� �)��� ��� �� !� ���!& �� �� �

:Q" �� /�� � �-)� /��HTML5 �CSS3 .#� ,�$ 8��+0 :� ,S�STWAI-ARIA

F��9�� �������� �)����� � ���� �� 7�� � m� �� ,����� � HTML5 �!� ,��! 2�!� �6 �� .��!$WAI-ARIA �3�+]��� N+� �+$ � �� �9�� ��P�� /����8 � �)� 6 �� /� #!_0 �!���� N!) �0 �99�

K� �)��� ,��d�<� � �!$� ��!� �� T!� �+!�P ���0�!� ��� ��!� /��! �!���� �!)� �� /��L � /���9" �!j_*� /��! .�99� ���;� m�*0�� �+$ ����� � �9��� �+�P ���0�� ���"� /�� ,�$ ��])� /��

��d+�WAI-ARIA �� #$�� :��� K�� N) ���0� �� ��" �� ��� N!) ���!� �"�!i� �!� T�9� �!'H �� /���9" �)� ���� �� ,�0�� � �Q>� �!� �!�k �� �5 �!9� �6 �! ,�H!3 .�!$� �!�@� ����0 �!0 T�!9�

�;H3 �_*� � �� �0��'�� ,�$ �9� .�)����� �.� �6 ,�� �� ����� ��)� U�� :L ,S�ST ! !1

,���8)� F��9�� �� �.> ��HTML5 �� K��_� �"�i� � m� �� �� ���$�� /�! N) ��label �! %�Y� �� � � /��HTML �)� .#�label #!���5" �!*�� .�9!�� ��!��� :! �; ��!$�� /��! �D90 ��

,���8)� }F��9�� /�� � �� ���B0 #3� � �6 � m� �� F�3HL� � #� ��)� ���� �� �9�� �!�" �!t���� � �)� � �+$ ���� �9$6 /�� ?�j� �9Y ����6 �� T�9�.�$�*� f^� �� ��� ���\

V&W ���� �� �! �E *��W� .�>

,�$ �P�� [O�+&��_@' /�� �'� N* �� K�� �)� �� �� �� �)�,��� ,��@� �)��6 F��!@0 �!0 T)�=> :��9� #;� ����� �)� � .��$ ���$6 �+$ /�� �� f�>� /��

1. Microdata

Page 22: آموزش HTML & CSS3

"��#$HTML5 �CSS3 %�&' (��) �! 22

�>�� ,+�S+

�+� � :�$ �)� � K�� �)� �� �������� =) :�9)6

<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.cssexample.cssexample.cssexample.css

.footer {

background-color: #CCC;

border-top: 1px solid #333;

}

�+�� �� ���$ ,��� =)�+� :)�" �� �.> �D90 ���excerpt :#� ,�$ ,��@� :)�" 2�� ��9� ��

example.css example.css example.css example.css (excerpt)(excerpt)(excerpt)(excerpt)

border-top: 1px solid #333;

��� � /�� ��0 ��� �� =)�!+� �! T�>!i #!��" �! �� �!)�P =!> ���!$ �"�!i� �!�*; /���� ��� :T)��6

function animate() {

new_variable = "Hello";new_variable = "Hello";new_variable = "Hello";new_variable = "Hello";

}

��\ /�P � ��$� ���� ���� �� �� NY�� => N) �D90 � T�9� ����0 �� �� ��0 N) T����> ���/ �� ,��@� /��+3 �^\� � #�H3 �� �� :T�9�

function animate() {

return new_variable;return new_variable;return new_variable;return new_variable;

}

مى خواهم كتاب كامل و 360 صفحه اى را خريدارى كنم

Page 23: آموزش HTML & CSS3

���� ,#�@# 23

,��+ ���&A <�> �>� �9> � �>

���� ���� ���� ����

�� ����� ��� ����� ������ ��� ��� �� .���

����� �� � � ����� �� � � ����� �� � � ����� �� � �

� � ��� ��� ��� !"�� ������# ���� $%&' �%� �(�) �� .�*�� � +, �(�) ��*��� �-�� � �%.�/0� �%1 ��%2 .�3�

�� � �� � �� � �� �

�� ��� ��� �� �� $(� ������ 45�/6� .$�*���

����� ����� ����� �����

������ �� � !0&� 7����+� ������ ��� ��� �� �� ��� 8� .$�*���

Page 24: آموزش HTML & CSS3

مى خواهم كتاب كامل و 360 صفحه اى را خريدارى كنم

Page 25: آموزش HTML & CSS3

"�� #$�

��&6#HTML5 �CSS3 �T�!�� ��9�� �� �)�P �)� � ��������� �)� ��^Y ��9)� ���� �� :Q" �)� ,��!� ��!Y �!�9)� � �!��

HTML5 �CSS3 #)� K� /�� 2�� � /����� /�� 8X�!& K� #!_0 /�!���8"� #!�+�� F�_�!i�0 ��!�� �� /�Q>� d+� .T���9�� a�i�0 �� /���9" �)� �� T���,�9)6 /�� ��\Y ��/ $ /��� ���!93 �! �+

�9�� �9+$��� �K� M��L N). ��1 ��P�� :'� � �D90 �����> ���,e��< � �)��,���6 K�� �� �� �� �)�� �! Z��$ � ��9�* �T)�#�� �; �� ,��@� ��9d+� � ��9� /�����) �)�P /��HTML5 �CSS3 �� ��)��- ��" �� :!Q" �)� �����0

,�)��� ���"�� �!)� � �)���� ���$�� n��&� :Q" �)� %��^� � �� ����� �� � �)�� 2�� :Q" � ��� :Q" .��9� �5��^� T�

HTML5 /*�-

���93 � �6 �� ,����� �� /8�YHTML5 �� ��) ���!� ?�+&� � .���� �*�.� � ��8"�< �d>)��0 ���$�� ��)� ���.� J�� � �� ����� J/��G�HTML �6 �� � #!� #!��9)� /�� �! %!��q ��! � �i�& ?�& ��

,��@!!� K� /�� �!! ,��� �!!) ��!!_� f�!!'�0 /��!! �!!� .��!!$HTML5 ��!! � �!!)� �� �>!!�� �)�!! 6���.� /��G�1 �� ��! ��!P�� ��*; �>�� �� �� �0������ �� � � �#� /�)�P F������ /��& �� #�

��*D �>�� �)� ��9d+� � �"�)API#1)��� /�� .#� ,�$ �"�i� �6 � 8�� /�)�P ��)�� �� �@� �� ��$HTML5 �"�)���B0 =)��)� �>�� // �+� K��_� ��*; ��$– :��!$ �>�� �)�

�'�93 ���+0HTML4 �XHTML1.0 �!)�< ?�!'� �>!�� �!)� �&��L �� ��6 � ,�H3 .#� �V��!� /�2�@�< ���+0 /�� � �>�� �)� �� ��$ :'�& ��9�+L� �0 �"�� ���; �! ���!� �!��� ��!� � � � ��

����� /���^ � #� ����� �+)�; /�������� #)�)�!� :�!.� ���! � � �! �! 8!�� �� �!�)��

1. Markup Language

Page 26: آموزش HTML & CSS3

"��#$HTML5 �CSS3 %�&' (��) �! 26

�� �'H .�9� l� � �]9� �� �&��L ?�'� �� /�HTML5 �� �� #� ,�$ ?�!'� �_@!' �� �����0 �&��LHTML #)� ��W3C �����> 1

. ��+� �� ?��HTML5 ���!.� �!'�93 /�� �)�P �@)�50 �!� �!X��� ��!P�� /��G!� �!'�93 � �!�� �)� � 8�� /�)�P�� ,��P� M��L � �� #� ,�$ �"�i� �>�� ���8� �Y .��)�9 �0�95�� /�� �0 ���

�� �;� ���� %�Y� �� �����0 �95��! /�!� ��!d+� /�!0article, section, header, footer �� /���!� �%�Y� �_@' ���9� ,��@� �-)� /�� %�Y� � �� ��0 /��div s��9� �<

,e�� ��)� � ,�H3/ HTML5 /���9" �� �-)� /���50 /�� �� � ��API ��!� �! 8�� �-)� �)�P /���� /���9" �)� �� � � .��� %�Y� �� ,��@� � �)��Q0 T� �� �90��*3 ��<canvas>,�� k � /��!

%�Y� ���*$ �� n�� /��<video> �<audio> ��_@!' :! �� �!'�93 ���!� �!�� � ���!.� #�� �; �#��< #�� �; �-)� � �_@' � #��" ����/���9" �)� �� � � �K�� �)� �� .�� �� a�i�0 �� �� .T���

API / *�-

API ����� ��_� F��*3 f@>�2�� ��)�� #� ��8"�2. API �!�� �!��"��� ��_� � ��*$ �^�_� ��/� ���3 ��9� ��Q0 – /� ��� ��� �)� ��9)� /�P � �� F��@0 �)� � ��!$� ,�$ � � ����� /��

.#� ,��� T���" ��)���� /�� �^�_�API ��3�+]� �+�� �� /� �� (,�!$ �!$�� =�!< �� h! ��0) �!��� T���" �+$ �� /�� �T!�� �� �+!$ �V����� x� ���)�� ��D�6 �� 2��� �� ��$ ,��." � �� �9�

���> �� 2�� / .�$ ���� ?�5" ������� �) � ��8"� �)�< � F���� �� ,��@�API ,��d�< F���� ���� �'H /�� #� ���� #� ���; �� /�

�< �� ���$ ��P� �9���. 2�� ��0 F�;�� ���� �))(.���$ 2�]�� �*��P ��8"� �� � � API �! �*0�!� ��HTML5 => �� .�$ �9��� ��� � �"�5� �K�� /�5 /��

� �]0 ��� �Z�+]� ���#1)��� �� / � ��)��API #!.&� �!)�*� ��!)���� #1)��!����P /�� ,��#� �9��� ���� #1)������P ��)���� �� �$�� � �]0 �Y��� .�)�$� /���!i �6 �!���� ���

.#��� => ��$� 2�O �� ����� �� #1)��!� �! m�! �� /�� �� K�!� ?�!L �� ���!� �! �� �!�)��

�� ���; ��0��� � ��=> �)� T)�$ �E+^� �0 T� .��� ����� 4�� �� ��

/���9" �� � � �T�9� ,��$� �� #� 2�O F��9!�� �� �!.> ���!�� �!� �)�!�HTML5 ��!��� ,�$ ��P ��9�� �� �!.> �!-)� �!9" ��!_� �� �� �!)� �� ��!��HTML5 �!+� K�!�& �! �� �! � .�!9)6

/���9" � �.> 8��� 8�� �-)� x�Q � /�� �HTML5 ,��*�/���9" �)� ���� ���!� 8�� �� �� �!.> HTML5 �� �"�� �V� �� �� ��*]� �� �)� �� .���$ ,e�� �� �)�$ ,��!�� T���@� � �)�� ,��@!� �!0

1. http://www.w3.org/TR/html-design-principles/

2. Application Programming Interface

3. User interface

مى خواهم كتاب كامل و 360 صفحه اى را خريدارى كنم

Page 27: آموزش HTML & CSS3

/7� �8� ��&6#HTML5 �CSS3 27

�9��� ��9�»HTML5 /���9" � .�6 � �*0�� /�� «��O ��� 1 F��*3 � �$ � 2NEWT ���!93 � ��

�� �� ��� � ?��5� ,e�� /���9" F��*3 f@>� ��]�� � �)�P /�� K� 8�-��3 .#� �-� �'H #DP �?�& �� � �!_ ���! �� /�����P ��9d+� � K�� �$�� �! �! �)�!$ /�!�

/���9" �)� ���+0 � 2�3 ��L � �� �T� ���HTML5 �� .T�)��

/0����� �D�� ,� ��5-

,����� .#� ,��� �$� ����� ����� ,�� �� K� T!.Y �!'�93 � �)�Q0 �� �� �)� �:*; ?� ���!��� ,��@� ��P� � ��� � #)� ���� �� K��& � /� .��6

2�� .#� ,��� ���B0 K� ,�DY ���9�� ��8"� /���!� �!)�< � �� h)� �,�� JK� #_0 /��Ajax 4 ,�$ � �� ��� U�L ��)���� � �"�L �� � ���5 �� �� � ��� �!� ���� ?�*\!� ���!� :!*; �� �!.

�� ���; #)� K� .����� 2�!� �! ��*$ ������ /�� �0��1��!� /�!���8"� �!� :!+3 /8!���� /�!� � �!99��5�0 �� /���� �� =�< �?�'� �)� � #)� K� �&��L #+ � 8�� K� ����9�� .����

���.� �� � ����� �)� ?�L �� .#� ,�$ ?�_� 8�� K� /��G�HTML4 �� � �� �� /�P #)�D�XHTML F���!!� ��!!+� :!!'� �� �!!� ���HTML4 #!!$�� ��!! �� ��� �!!�)���� ?�!!'� �� �!!��

#> ������ �0XML �� ,��@� �>�� �� �� �i�& ?�& �� .���HTML4 �XHTML �! K� /�� �! ,���� ��L�� ,��@� ���$� �� �HTML5 K�*_� ?�& �� 8��.#� ��$ HTML5 �q6 �� :�$ ��])� f�>� �9 �>�� �� � �Web Forms 2.0 �Web Apps 1.0 /�� �!� ��

2�� �$�� � ���� � K� #���� ���B0 �L� � ���9 �)� h)� K� #_0 /����8"� :! �; � �0��6��� ��0/���D-� 2�" .���$ ��])� ��0 #�� �; � �� 2�� � ��*$ �� ��.)�� /8!���� /�!��0��1��� /����8"� �#!�2�� %�; ��8"� �� K��& � K� #_0 /�� �9)6� #��& /� � #+ �� �)� ��HTML5 /�!�� �� 8!��

��� ��+� �i�& ?�& �� �� �� ��$ ��])� /8�Y �0 ���$ 2�q�� T� � �9 �� �)� �#)�D� �� .#�� 2�� � �� �6HTML5 �� .T��9$

�� ����� ��HTML5 �� � ��� �5�0 ?�& �� /XHTML 2.0 �� ��� 8�� ,e��!< .�$/ �5!�0XHTML 2.0 �5�0 /�� � �D90 �0 #� ,�$ f;��HTML5 .��$ 8��+0

�# B ���# � ,Y+ : �� ,� ���� ZY9# !�EHTML5 /*� �6) � �6 ��)�]� F��9�� ��HTML5 �� �)��0 f�>� ,��� �� ��0 ��!+� �!) K� ���!DP T���9�) ��$

W3C d+� � ��9WHATWG .#� ��P�� �9 �)� �� f�>� �>�� �� �(W3C (K� ���DP 2����9�)

1. Bruce Lawson

2. http://www.brucelawson.co.uk/2010/meet-newt-new-exciting-web-technologies/

3. New Exciting Web Technologies

4 . ,e�� �)� ����-�� Ja�_' �@�0»���P /}�« .#� 5. Client-side

Page 28: آموزش HTML & CSS3

"��#$HTML5 �CSS3 %�&' (��) �! 28

J��!'� F��9!�� �!� #� ������ :#�9$6 ��)�� [O�+&� ��HTML �CSS �!� /���!D-� �� � �!9� ��d+� K� � �*0�� /��������� �� /���� �� 8�� ��9d+�SVG ��!�\� J/����� }N�"���) �)G!< 1

( �WCAG ��� /�+9���) J/�)G<2 (K� /��_�

�)�$ �-)� /� ��WHATWG ����� J/���9" ,������ ��+� �)) K� #!_0 J���! � /��3 ��!)�� (#��$ �� /���"� ��0 ,��� �)� .�$� �)�P /�!�Apple, Mozilla �Opera �� �!� #!� ,�!$ :��!.0

?�2004 #!�� �� K� ���!DP 2����9� /��! �� ��!$ �5!�0HTML ��!�&� �!D�6 .��!� �� ��� �� �����W3C #��$ � ��� ��� ��������0 /�� 8!��+0 /�!P �! � �!"�� ,�!)��� �� �!����� ,�!99�

������� /�� � /��HTML /�� �! �#!� ,��@� : �; T� �+)�; /�������� /�� � ��XHTML

2.0 �� �� ��! ,�� ,��� �)� �� �)� �� .,��� 8��+0 �!���� F��9!�� � #!"�� =�!< � K� #!_0 /�!�2�" �_ �� K� #_0 /�� 2�!� � ���!$ 2�!q�� T!� �! �9! �� �!)� .�!���� ��D0 �� �$ M�^� [H*; ��$

HTML5 �~�@0� �)� �� �5 .�$ ,��D� �6 � W3C � ��� #"�)�� �� ,��� �)� ��0 ,�$ T���" F��9�� !� }�9! ��+� ���� �� /�-)� F��9�� ,��WHATWG �! m�! �� F��9!�� � ��!� �!�D0HTML5

.��� �5�0 �� 7�� � x�Q>� R�� �+� �)�$#�� �#� #�� .�$� ,�99� � M��L ���93 � �� �� ���� ��P� ,��< #.< /��

����� �� F��@� �9 �� ��P� �)6 ��� .T)���� �D�6 � ���9� ��)�� ����-� �3� ����0 �� s��!$ ��!�.�� �2H� N)

��0 ,�$ ��D0 F��9��WHATWG �� ���0� ���6 �� ���http://www.whatwg.org/html/ �!� �� � =��� ����0 � ��HTML ,��� ���B0 .#� ��3)5 #� ,�$ UG& �9 2�� ��. �! �!i�& ?�& �� (

�� �@� T� ,��� ������� ��9 �)� ��$� ��!)� �! T!X�� ��!L 5!�0 ?�!& �� �!-)� � #!� �!��B0 � ��+� ��� ,��$� �6 � �>�� ,��+$ � ���04 .

��0 ,�$ ��D0 �>��WHATWG #!�� �; � F�!3HL� /��& �D90 �� �!D90 �!� #!� �)�!�HTML �)�P F������ � ���� ��P�HTML5 /�!-)� F��9!�� ��6 � ,�H3 .#� ,�$ ,���]9� �9 �)� �� 8��

��0WHATWG #� ,�$ ��D0/���9" �� �� :��$ �� �-)� �*0�� /�� ����!� F��9!�� �!)� .��!$,���8)� ��d+� ��5

/��_� �Canvas �/�5 ��Web Worker ���Web Storage �� �!-)� ����!� � � � ���� :��$ ��$6 .

1. Scalable vector graphic

2. accessibility

3. Web Hypertext Application Technology Working Group

4. ,�� �� �.� F�3HL� %�� /�� .��9� �5P��� ���6 �)� � 2�� ���B0 �)� :��� / http://blog.whatwg.org/html-is-the-new-html5/

5. Microdata

6� ���6 �)� � �.� F�3HL� %�� /�� . .��9� �5P��http://wiki.whatwg.org/wiki/FAQ#What_are_the_various_versions_of_the_spec.3F

مى خواهم كتاب كامل و 360 صفحه اى را خريدارى كنم

Page 29: آموزش HTML & CSS3

/7� �8� ��&6#HTML5 �CSS3 29

�!!�0 ,�!!$ �!!�D0 F��9!!��W3C �!!� �� ���6 �� �!!����0http://dev.w3.org/html5/spec/ .�!!� �� �9��/���9" �-)� � m� �� F� ���6 �� 8�� ��http://dev.w3.org/html5/ .#� ��� ��

F��9�� �� F��@0 ?�&W3C �WHATWG F��9!�� ��!'H ?�!L � s#��Y ��WHATWG ,���_� �+� /� /�� ��� � �0 #� �0. �I5 �*�� �) �� �� ,�!9)6 �!+� �!9)�� �!���� (.#!� �!0 �� �!�� �)� �Z�+]���*$ T� � ���� �9 �� ���� � �9 /�� �5*9� ���93 � �� �9 �� �)� �� 2��� �� ���0

�'�93 /�����)HTML5 /���9" � .#"�� ��� � �6 � �*0�� /��

&-HTML5 /�E�� 0?# 0� &� ����

��� ��$ ,��� a�i�0 [H*; �� ��^��+�HTML5 ����95� �Q93 /���50 �� #� ,�$ :��.01 ,��!+� � � /���9" /���50API�*0�� /��. �)� �)�P �'�93 � F����B0 �)� ,�$ ��])� ��V9� �!�)���� �!0 �!��

��6 �� �6 �� ,��@� � ��� �K� �_@' N) .�99� �0 ��d+� �)��������� ,��+� � �)�P J/����95� �'�93WAI-ARIA �Microdata ,�� �� ��) ��!$

�+�+i ��B �C #*_' �� N+� �� � �(��� T���� ��!� �� �0�_@!' �0 �99� � ��!��� /��! �!0 T�9� T���" ��$��– ��� � T� � #� �)� �� ��� �)� h@��� N+� �� �_@' ��� �)G< T!� � �9�

�� �D �]�P /����0�� �_@' : �� %��^� �9���0 .�99� 7��� �� �� / /�� x� ��L � 8�� ����95� �'�93 ,�$ �&��L �)�< JK� Z�i�� �)� /�� � ��$8��+0 � ���

�!$�� /���!� �� ,��@� � �99� ���< �O�e�� ����� F�_@' �� #� ,�!$ =!> �� 8!�� �!-)� /�!������:Q" �� ���� �)� �� .�$� �)G< .��� T���� #*_' ,�9)6 /��

���)�< ��API � �*0�� /��HTML5 N�9�0 !&��L �� �� �)�� ?�! K� �� ,��@!� �!D�6 �� #!���� �� �\0�� �� �99� ,�� ��9�� ���� �� /���� .��� ���!; M��!L ��!� � �� /�!.� F��!; � ,�!$ �0

�� �\�!�� � T��!" #!��< #!�� �; �!"�5� ��6 � ,�H3 .#� �"��HTML5 �!� #!� �!95� �)�! 2�� � �-� ���*��P /����8"�2 ���8"� ���3 ��� �� �!� T���" K� �� �� �\��� � T��" =>< �� ��!99�

.�$ ���� �+� h��; :)O� �Z�+]� ��,�99� �� ��P� /��#�� �; � ���-� �� � /��HTML5 �API �! m�! �� /�!�

� �6��)���� �� ,���6 K�� ?�L �� 8�� /�.� :)O� . .��$

1. semantic

2. Third party software

3. plugins

Page 30: آموزش HTML & CSS3

"��#$HTML5 �CSS3 %�&' (��) �! 30

CSS3 /*�-

�-)� /�8]� => – /���� #�+�� �*�� �� ����– �� ,��@� �6 �� K� F�_@' �&��L �� �� ���!$��� �*0��� ���� N* /��1 ����� h�^� ��)� ?�+&� � �� ��^��+� .#�CSS �! �!� #!� ���! �

�6 �� ,��@��� T����0 �'�93 ,��P � N*HTML .T�!9� c>!.� ��! �_@' �� ��CSS3 �)�! 6 F��9�� �� �>��CSS F��*3 .#�CSS3 ���)� � �D90 �+� ~HL� �� � �)� �)�P /�� �!)� �!�� ��!$

F��9�� �5�0 �� ��&�� ���� �>�� �)� �� #� �95� ��� CSS .#�2

����� �� ��������� �� ��������� �� ��������� �� ����

�+�CSS ���309 �� ��&�) :9 �;+� � ��< =��6� >.?� 8� �%� .�% � �%� �%�<+; +%@� �� ��&�)

�;+� ���9� �.*. :9 ��+� ����� � �9��+� �A� 8� ��@3� .B�cascade �� �����% � �� � � ���CSS �%�

�� !/� �09 �� ����� � #C.��� D��+� �E� �� 33� �%F ���% � %���G2� +�HI� $1 � +� 3���� +%��� C�6, ��� � +H� ���� �/.� .3� �J3" �� +� �/� !K�3� �� B�(�� ��� �� �� �� ��&�) 3�.

CSS3 �>�� �� �� #� �0���� �6 ���+0 /��&CSS2.1 ���� ��P�. �>��)2.1 �+)�; �>�� F��9��CSS �� ��!&��L FH�!.� �� � � �� #� ,�$ �"�i� �0������ �>�� �)� �� ��9d+� .(#�

�� U�L� �93 �x�! �!.> �&��L /�� ���� ��*]� ��&��L h;��� � � ?�j� ���93 � .�9� �!'HTML �"�i� ,�!�P � ���� /�� �) � �9� �� x� ,��P � �0 �9�� ���; �� �_@' �� �� /�-

��)���� ���� ��*]� x� /�,��d�< /�� �! � ��!� /��! �!)� 8!�� F�!;�� ���!� .�9�� 2�]�� /��� ��� � �_@' �� �� /��5� �)��Q0 �x� �&�L .�9"��

#�� �; /��CSS3 90��*3=9)8� �� ���*�.< �� ��� /�!�3 � �!� �!)� � ��!�� �)�! ��!.� /�!��$�� ��'�93�< �)��Q0 ���� /�� #�� �; �� /���� � #�"�@$ ��.�+��� ���5� �9���.�-)� /��

CSS3 ��HTML5 F��*3 �� �� ����� �K�� �)� �� .#�8]�CSS3 �!� ,��@� ��!���V9� �T�!9�F��9�� �� 2� �>�� CSS #�� �; /�� � x� ��L � 8�� ���8��+0 � #� �)�P /��CSS3 .#�

�� �)� ��CSS3 ��HTML5 �API .#�8]� �6 � �*0�� /��

&-CSS3 /�E�� 0?# 0� &� ����

#!�� �; �! :Q@� ��L � �K�� �)� ����� �� �!)�P /�!�CSS3 �!� �+!$ �! 4�!�� ���!�� �� .T)����!<�� ��Y �� T)���6 #�� �; �)�P /��CSS3 ��]�� ���� ��&��L /�� .#� 8�-��

1. Cascading Style Sheet – CSS

2. http://www.w3.org/Style/CSS/current-work.en.html

3. selectors

مى خواهم كتاب كامل و 360 صفحه اى را خريدارى كنم

Page 31: آموزش HTML & CSS3

/7� �8� ��&6#HTML5 �CSS3 31

N�9�0 �)� �� � � ,e��< �� /���� �� �� �� /�P ��,��� �� �� �)�! ��d+� /����� .��� ��!�y�� ����0 ��1 �$�� �?�j� ��� /�� �� K��& � � � /�� �&��L �� �� ����� �)� .�9)6 �! �)�P /��

,�)� �F�5"� )�N�9�0 �)� �� �� ����� .T �6 U�!� � #)�! �!�� �!&��L �! � ��!$ ,��@� � � � ���� ��$� �$�� �-9��+� M�L �;� �� �� M�L N) �9���0.�99� 8)�+� ��

,��P ��+� ��)�- �� =�< �)�$?� �� �� �� ,��@� � �� #��CSS �>��2.1 ,��� ��])� ��)��-9)� [�5;�� �)6 ���s#� ,�� ��

�!$�� �!) � �)�! �y!�� ����!0 N) ��])� /�� ��$G� �� �� �!��� ��!*]� ��!&��L ���!� /�!�,���< /�� F�;�� ���� .�99� ,��@� �'� /���9"�0,��P �)� /�� �!'�93 �!� ��! 2�O �!�HTML

�"�i��� 8�+0 ���� �_@' �� ��&��L ��q6 �� .��$ ,��8"� �_@' � /�� ���,��P �)� ��])� /�� -

�9"�0 �� ,��@� � ��)� ��)���� � �)� �� /�� �� �� ,���6 8!P �! ���� �y�� ����0 ��])� /�� .�$�� ,��@� ���9"�0 �)� �� �� .#$��� ��P� �)�Q0 �� ,��@� T)���� �! ���!� /�� /�-)� ,�� ��)�

,��P �)� .#$��� ��P� �� CSS3 �� ,��P� �+$ � ,��P ��+� ��� ,��P �& � �� ,�9)6 ���-� � �� �-)� �)�� �_@' � ����-�

8!�+0 �+!$ �_@!' �!� :�!�9)� ��+P �� �$ ���� /���� h"�9� � �]9� ��� �)� �� ��9� �"�i� �� �!0��� �� ��$�� � ����� /�� � ���� ���� ��6 �� �� /���D-� ��� ���� �0�� �0 �)��Q0 ���$

��� ,��@� M�L �� /�+ �_@' /��G��� ���� � ��$ 8��,�0���� �0 .��$

��� �� ��� �� � �� ���� :����� �� � ���� �� ��� �� � �� ���� :����� �� � ���� �� ��� �� � �� ���� :����� �� � ���� �� ��� �� � �� ���� :����� �� � � ������ ���� � ! ������� ���� � ! ������� ���� � ! ������� ���� � ! �

��.��F 8� ���*� 8� ������ �03�� �+� �1CSS3 !�L� ��� �� .�*��3� �<�,� � D" 3' ��� #�3� ����� ���+� ��� ��8� �1��.��F 8� B�� +1 �� M��+� ��� � �� #+;� +��+� �<�,� N�" ��&�O #�1 �+%� .%��

��.��F 8� �03�� �+� #=�J�transform ���% � 8� %��� #%�3� �����% � P��<+��< ��-moz-transform �����% �

�3�# ���O+� �1+;� +� �+� ��.Q ��/1 ��R�� �+� �� �L�S ��WebKit � +� 3��� 8� %��� #B +%� ���T +; ��� �-webkit-tranform ��.��F ��� 8� �"+� 8� ����� � �+� ��F � �1�; .��� ����� � %� D%" ��(' ��� �1

�%� ��%� .�% � �� U�&� ��&�O ��(' �� �� � � ��� � :� V+6� DK< D" ��(' ��� �/1 �� �*��3�

��� ��� �� �� +� +@�# �6�3� 8� �"+� �1.� � ��<� ��� 8� #�W�" �*���� �� M��+�

��+� ��� ��+� ��R�� �KX3� 4���� �.�L� �� �� �1��&�O ��.��F +;� +� ��8� �1 �%� M�%�+� ��3�%*� :%��

CSS3 �<�,� � � �&� !��� 8�31��.��F ��� 7�+� =�%S �� � �%�� 8� .%��� =�0�� �� ��+/1 � � �0/� �1

�� +,�S ����� ����+� +;� +� �� M��+� ��&�O ��+/1 �� 7) �� M��+� ��� � 8� N�" ���.��F 8� ����� � �+� ��%� !��� ��3�*� �� ����8 .�*��3� ��&�O 7 � �� ��� � ��/1 $1 +") �� ��3Z/1 �3� ����� �

����O��.��F ��� 8� ��+� D �� �1��&�O ��� #��� !��� �1+;� +� �� �1 1 31��" VGS +;� +� ��8� �

1. gradient

Page 32: آموزش HTML & CSS3

"��#$HTML5 �CSS3 %�&' (��) �! 32

.�

�� +@� �� =�S ��� �� �1� ��(2� �� �CSS ��&�O ��� �/1 ��+/1 ����� ��� ��� �1# �%� 8�%� �L 8� ����� � ���[� +,�S =�S �� #��Q ���CSS3 N�" ��.Q :� �1���� �03�� �+� .� � +�&�� �9��6� 8�

�� ��9R� ��� �1� +��\� �� �1��%&�O �%� ��+%0� ��� ��3' �� N�" ��� � :� �� M��+� �1� ��

�1� +��\� �� ���� C.���# ���O+� 4���� �� �S+� ��(2� =�S ��� �� �L CSS 7� ) >��+� �� � � ��� 8� +���.Q ��/1 �1���� �� � ��� � �� �� #�0�<�+; +� �]� �� +��\� ��R�� 8� ����� � �� �� �1 �<�%,� �1� 8� ���

�*���� �/%� %� #�%*���� ���%� �%�� �� #$���� ^�,�� �� ��X��/1 #��� +� � �� .�1� B�R�� ��Z�O �1

����� � 8� ����� � +��" �� ���� +�[�/� �� _��" ��� 8� �� �/�F +�+�� #+��Q �1� .���

/*�- %�&' (��) �! .&��!�� � �# ��[�#

� ���+� ��� �&��L �� �5 �� #)� �� ��5;�� /��� ,e��< �0 T�9� T�!9� Z��!$ �� �0�)�P /��� �!� �!�� ����� �� l� �� �� � � #_0 /�� �T�9�� ��L2���� �� ��$��� � =)��!)� �T�!9� �!� ��!$ �!0 T�!9�

#�0 ����$ �0��6����� ��$ ,�\�� F����)� �0 T�9� T!�� �)6��!� �! m� �� / ��!L �! � T� �!� ���� ��� #)� /��_� �& � �_@' /�8P� =9�Y � :)�+$ � :�$ ��&��L /�� � ���< �6 � T�9�

�� ��*D �� .T�.> �+� �� /�� ��5;�� /���� �� ��-)� �� � � /��! �!� .T�!9� =)�!�� 7��! ?�!& �! �!� T��)��

�� � �)�0��+3� : �; �� ��)����,��$ �)�0��� /���� ,��@� ��)��� #!� �!)� 8�� ��+"�� � T�9�K� /�� �D90 �� �� �)�� �)� .T��� 7���B0 � ,��� �D �� �6 � T�9� Z�P� ����� � ,�� �� �� #)�!-

����� � ���� ,��@� K� #_0 /�� T�9�� ?�!'� �)� 8�� ��+��)�.� /�� #)� �&��L ���� �� ��� �� #)�3� �� .T�9�

&� ��,��$ ?�*�� � �+�� :�$ � �� T)��� n�� ,��@!� .T�$� ��+)���� �$�� /�� �D /�� ��HTML5 �CSS3 K�� �)� �� �� .#� %�9� � %0�� ���+3� : �; /�� �$�� #DP �� C�8 ����

��������� �)� �� ,��@� ��5;�� �)��$ �9��+� #�� � ,e��< N) %��; �� �� T)��� �5 �+!$ � �� .T)�����

R��Y# .�>&���&# � ��� �Y���HTML5 �!�)���� ,��!$ �� T�!V3 �!��B0 �!3� �6 �� ,��@!� � #!� �5!�0 ?�& �� ��9�

����$� �� ,��$ �� :�.� ��])� �3� ��)���� ,��$ �� F����B0 �)� �� T�9� ��.� �L� #� 2�O � ,��@� : �;��q �) � �^ ��])� �=)�+��+� �+)�; /�������� �� M�L ��$ .��$

مى خواهم كتاب كامل و 360 صفحه اى را خريدارى كنم

Page 33: آموزش HTML & CSS3

/7� �8� ��&6#HTML5 �CSS3 33

�� �+$ �� #� �95� ��� �)� ,e��< �� ��) �����0 �! �!� �� ��0�� � /��HTML4 �!) �XHTML �$���9 Z�� � ��9� �� �� /�1 � ��HTML5 ���� ���B0. :Q" �� ���� �)� ��)2 �(��� T���� �_

� �*5� ��9d+� �+$ �_@' ��� �)� �� �< ,��� =)�!+� �!����� �� :!*; �!9��+� #!�� � #� T�� }F�"�i� � F����B0 .�$ ���� HTML5 ,�$ ��*50 ���$ � �� ��9�+L� �+$ � �� ��� �! �+$ M�L ��9��

��d+� �+)�; /��������IE6 .#� ����� T� #�� �; �-)� #�5i� .T)��� #*_' ��)���� ���� �� �\" ��9��0 /��HTML5 �CSS3 �!-)� �

/���9" ��!�6 ���� s#� ���-Y �6 � �*0�� /��2 ���!& �47 �� �!�) �� ��!9� ��� ��!� �� �!'���>���9)� /����� ,��@� ����1��� # #�� �; �.� �� �� �99� ���*�.< g�� �)�P /�� �+� /� .�9�

����� �� ��������� �� ��������� �� ��������� �� ����

� � �1�� =�S �� ���.`*�� ��+�3�� +;� +� $( ��9L� =� +9�� � ��� 8�?) �� a��� ��� �/Q+� 7��8 ��

2011 � S �� +;� +� ��� $( #40 �� � W�� � � 7� a�9E� =�S �� ��+ �� B +� +;� +� .� � +% �%&O [�� �� P��<+��< +;� +� #b�� �<��"� �� ���� ��+F B � ��2��Q �� ���.`*�� ��+�3�� 8� 6� 7�3��

.� � ����G; +%&�3� #��%� +%1 8�%?) �� �� �%1+;� +� $(% �%� M��+� ������ #�3��O ��� ����&��� c��

�%%� �%%� �%%3��8 �%%�� �� ��%%���� >%%*� �+%%� .%%3� d��) �� �%%3��O ���%% ����%%&��� ���%% �%%� %%�����http://www.sitepoint.com/ .�3� �6Q�+�

����� ��]�� �� � �� �9)8-)�P /�������� ����)��,��� Z�� #!�� �; ���+0 �� �0 ��� /�!�HTML5 �CSS3 � �]0 ?�& ��3 �� � �99� ,��@� �9)6�" �)� F�;�� ���� .�9�� ���; � ��� ��� � �� �� � �.� /�

�� ?�9� #�>� �+$ �� ����� �9��� .#� ,�� #!��< �� ���*�!.< #!�� �; � ��!� J������ �� ��9�-

�� ,��@� � T��" ����%�Y� �!)�P /��HTML5 �!)� �� �!����� �!� �0��!' �� W�!� �!) ���� ���+� ���*�.< #�� �; �>�� ����Flash �!� ���!; �!����� ��� � �� �� �� �V����� T��" ���!� .�!���

,��d�< �+� �9)6�" F�;�� #1)��!� �� ,��@!� �! �)� � #� �0 �� �� �V����!� ,�!�P ��!+� ��!�)���� /������ �+� ���*�.< �+$ �V����� #�� �; �� ��*$ ��9� N!�9�0 �! .��9� /�� ��*!$ /�!� /��!

#�� �; ��)�P /��pollyfill �� ��*$ � ��� ��� .�9)��#�� �; /�� #1)��!� �� ,��@� � �)�P /��-

�+� K��_� ,�� �)�D �.�+� ���)�� ��$� #!_0 ��8! � N) �5�0 �Q; �� ����� [�'�Q>� �� K���� ��6 �� �� �)����� .���� ���� #�+�� #3� � �)� ���!� �"�!i� �� �$�� �P� :+_0 F�;�� ���� �

#�� �; �)� ?�j� K�� �)� �� �� � #� /���i �� �� ��k ����� �)� �� �� /��5� /�� .T�9� N�9�0 T)��� �Q; �� ����� ��� �)� �� � �)8-)�P /��pollyfill �+!$ � �� �� #!)�D� �T�!9� �!"�5�

�5 �� �� ��� ��� �� �� �+$ �0 T�9� N�9�0 �)� �� 2��� �� f5i m�\� � �� .T�9� �9$6 ��

1. Doctype 2. http://gs.statcounter.com/#browser_version-ww-monthly-201011-201101-bar

Page 34: آموزش HTML & CSS3

"��#$HTML5 �CSS3 %�&' (��) �! 34

N!�9�0 �! h!;��� �� /���!� �� �� T��� ZHL� �)� �� ��� �)� [�5^; � �)8-)�!P /�!�pollyfill �!��!!$�� ��!!])� /��!! �!!� ���!!�� �?�!!j� ���!!93 �!! .T)���!!� �P�!!�&� /�!!� �� ��!!�CSS3 �T�!!9� ,��@!!�

�$�� � �� �� �V����� �'�93 �6 ��+)�; /���������� =)�+� 8�0 /�� �9��� =)�!+� F��!@0 �)� ��� T����!> �+)�!; /�������� �� �D�6 ��])� /�� �� ����� #�+�� ��\9)� ��+)�; � �)�P /�������� ��

N�9�0 �� $�� ��9)� � .T�9� ,��@� �)8-)�P /��� �+)�!; /�!������� �� �!'�93 /�!� ��!9d+� 8!�0�� ,��� =)�+� ��$� �� � #� ,��@� : �; #)� :� ��� �!P��� :!� �! #)�! �� ,��@!� �#!)�D�

.��.� �)�P � �+)�; /�������� �� M�L F��@0 �P�� � ��� �� #� ��+� �& .#� ,�.� � �� �������� ���*�.< �� Z�i�� �)� ����� � �!�+� �#!� ���!_� ��!)�P /��������!� �)

�� =�! �!� #!� �)� K� �* !��9�� ��" ��^9)� .��$� ,��� #� �� �� �� ,8�-�� #�40 �!'���� ,��@� �)�P /�������� �� ���� ��� �� ��� ��� #�� �; �.� �� �� �99� K�!� �!)� �� �� �)��

�� #*_' ��$���� �� � ���*�.< ���$� #�� �; �� ���*�.< �)� .�99� ?�!& �� [�!+X�� 8!�� �!)�P /�!� #!�� �; ��!����� �!� }�)�P �>�� �X��� � � #� =)�8"� ���*�!.< �!����� �6 �!�0 /�!.� /�!�

�� ��$. �>�� �9���)9 �!���� 8!�� �! �Y �!)� ��6 �! ,�H3 (����1��� #��9)� ������ �� � #!� ����+� f;�� .��$ �9d+��� =�< � K���� �� � #�� �; �� N) 2��� �� ���*�.< �� ��� T���� ZHL� �+$ � �T)�� ��

�� h�^� �� �)� �� �#��� :��� �� ,��@!� � �� �&�L �� ���\� �Y �� �)�$HTML5 �CSS3 �!&��L,��� ,��@� � ��)� : �; ������ ��� ��0 ��)�,��$ ��9d+� .#� ���� 8-)�P /�� �+!$ �! T� �� �)

�� �"�5� � �]0 ��D�6 �� ,��@� � ����� �� T�9� �� ���� ���; ���� ��� ��� � �� 8�� �� ?�*; : �; /��� ,��@� �+)�; /�������� �� �+� � �99� #�� �; �� �9���0 /��HTML5 �CSS3 .���* ,�D

�� \�&� �E� &S> �G�A ]�&J � .!&� ; :)O� �� ��)h��,�99� �� ,��@� /�� �-)� /HTML5 �CSS3 K� h)�! �$� � �!@�0 l!)�L �� /��!�

.#� ,��+� #)� ��0 �� /���6 ���� StatCounter ?� ��2009 N!) �� =�! ���!�� �#� ,�$ 2H3�

�@�0 �� K� ��� ��� �� �'�� �!� ,��@!� �K� �� ��G� � #.� /�� �� ,��+� �!99�1 � �!+� �� . �� �#� �$G� �'�� ��DY �� � #� ,�$ � �� ��DY ���\� �)� �?�2 ,�!$ �3�!� �! � . ��!�6 �!� �!��

N�9�0 �� ��� � #� ���\� �)� �� =� �5;�� F��!@� ���!\� ���$ ,��@� ���6 :��_0 /�� /�-)� /���@�0 ���� �� #� ai�� ��$� �Y�� ?�& .�� ���� K� � ,��+� /�� � /��� �:!)� �� �$�� l)�L �

#@-$ ��L � .#� �$� ?�& �� /8�-��

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 صفحه اى را خريدارى كنم

Page 35: آموزش HTML & CSS3

/7� �8� ��&6#HTML5 �CSS3 35

���\� �)�$4 ��+� 8�� [�5^; � �)�� K��& � �+� ���� ���\� �+$ �V� �� �'�� �!�� .#!� ��L W#� �P�0 : �; ���� ���\� �)� �$�400 �L�!*0�� �Y �)� ?�& K� !?� �� ��3 �� �$� �'��

/�����) � HTML5 �CSS3 �s��� HTML5, CSS3 /���9" � /�� �! ��P�� /�������� �� � � ���� :�$ � �6 � �*0�� /��

�$�� ,�$ ���*�.< �:)� �� /�� �!$�� x�!Q>� /��@} ������ �?�j� /�� .��� /�� �! :!)� �� :��3 T�� �� �� �)����8 �iOS �� ,��@� �99�. /����8 � �9���)iPhone �iPad����� ( � �!9�� ��<�� �

�!)����� J:!��3 T!�� /�� �! ��P�� ������ ��^9�+� � :)� �� ��<��1 /��������!� �� � �! �! HTML5 �CSS3 �� ���*�.< #�� �; .�99� ���*�!.< /�!������� �!)� �� �! � �!�0 �!� �!)�P /��

�� y�� :�� �90��*3 ���$ �� #�"�@!$ #!�� �; � ��CSS3 �� ���*�!.< �Canvas API �Web Storage �SVG ��$�� �� ��� /��CSS3,�� k � /��Offline ,��� /����8 � ���2

Offline #�� �; �� /���� � �!)�P /��.�-)�

/���9" �� /���� �#\�\& �� �� �"�5� �+$ � K�� �)� �� �� �� �)�� /��! x� ��L � �T�9��$�� �� ,��@� ,�$ �&��L :)� �� /�� ��/���9" .� /�!���8 � �!9��� �)��Offline �Web Storage �!

,�$ �&��L �L� �)� �!� �!5P��� #!��9)� �! :!)� �� �!$�� l)�L �� �� ���� ��� ���� �0 ��� �� �!99��$�� .�99� ,���6� �!)� �� ,��@!� �! � �!���� #!��9)� �! /���!_� �!�� %!�q� :!)� �� /�!�

/���9" �� ��� � �� ���0 .��� ,��@� ����8 � �)� �� �#$��� ��P� #��9)� � ��� �� ���� :Q" ��10 /���9" �)� ���� �� /���!9" �! 8�� K�� ?�L �� W��� T���� �_ �� /�!-)� /�!�

�� �9$6 �� �D�6 �� ,��@� � �� �)�$ ����� �����0 �� ���! �!@�>� /����8 � �� �� ��9� l� �� �)�� �D�6.��� ,��@�

�6) � ^� &E . &� �3 &J

/�! N!) �� ��+)�! �!� T����> �\" � T�9� ,��@� �)�P /���9" N) �� T����> �� #��� ?�\5� T����!> �!� �^)��$ �� � ��5;�� /���� �� .�$� ,��@� : �; x� ������HTML5 �CSS3 k�!@�

M�L �� �� /�.� )�! F�_@' �)� ��9� ���< �� ��!_� �� �!� T�!9� �!&��L ���!$ �! �� ��+ /�!� �!� ��!_� �)� .�$� ,��@� : �; �f�>� �!& �!) � �+)�!; /�!������� ��!)�P /�!������� �!���0

.�$� ,��+� �@�0 �$�� /�� � ��P�� /�������� ��*!$ � �+)�!; /�!������� �)��9$ �#� #�� ��!) �� �+!$ �!D�6 �� �!)�P F�!����� /��!

��>��� K� /����� � l!)�L �� �!)�� ��!*]� � ��! ,�.� �)��0 ��9� K� /��������� �� �������� ������ /���>�� � ��9� �)��9$ �� �������� ���)�� �D�6 �� 2��� �� � �� #)� �� �@�>� /��

� .���� ��.���� �� /�� �?�& ���� �� �� ��$� �$�� ��) � � !� ��!�� ���)�� #!� �)��������

1. Android

2. Offline apps

Page 36: آموزش HTML & CSS3

"��#$HTML5 �CSS3 %�&' (��) �! 36

��+)�; /�������� �� ����� �� �)� �� ��$ �9��� ��P�� /��������� �)8-)�P N)�8� ,�9)6 �� ��N�9�0 �� #� �)� ���� 2�]�� �)� �� /��� �D90 ����$ n�� ,�� �� � �)8-)�!P /�!�polyfill UG!& ��

�P /�!������� /��! �� �)��G- �;� �� �)���� �D90 � ��9� .�!��� ,�!$ �!$�� �!)HTML5 �CSS3 /���9" ������K� �)�P /�� ,��!� ��!])� K� ��!&��L /��! �� /�!)�P � K�GP /���� �� ��� �� .�!��

����1��� #��9)� ��+P ��) �"�.�< /�������� ���)�]�69 #!�� �; �� � � �� ( /�!�HTML5 �CSS3 �� :+3 � � � ���*�.< _@' N) # � �����6 ��!^9�+� � ��!6 /���D-� #�� �; � ��9+0��; JK� �

��!6 K� ��!&��L /��! /�!-)� ��!�� �� �� �i�& ?�& �� �,�9)6 /��������� � O� /����� �!0 .#�

�� ,��@� �� ����� �� �0��D�HTML5 �CSS3 �� %�� �� ,��@!� ��8!�� �!� ���!�� �� �!�9�� �� �) =��� ��+)�; /���������� �9+$��� ���� ��)� /���9" �)� /�����) � ����� .��$ ��! �!�

,�9)6 /�� ���9��� �� ��. �� /� �� ,���6 �K� �&��L / �-)� K� .��9���� �#!��"�� �\^9� :)O��� ���-Y �� ���� a�i�0 ��)�� ���� ,��P� ?�& !��� ,��@� ��������� �)� �� ���0

مى خواهم كتاب كامل و 360 صفحه اى را خريدارى كنم

Page 37: آموزش HTML & CSS3

%�!& #$�

F+� �� �A1 ��CSS3 ' &���8A � ,��#� .

!�6�# 7�� T.$ :Q" �� �"�i� /�� �)��N* ���� �"�i� :j� �*)� /���$�� � �)� ���� �! ��!� /��

��!� �! �� �)��!Q0 �!) � T�!9� �"�!i� �_@!' � �� /�� ��$� /���� ��9)� ��� T�"�� ��) �� �'�93,��P .T)�* L �� ���� �� /�-)� / �T!)��� n�!�&� �)��!Q0 � �6 � � ��� /�� � #� R)�� �&��y�� ����0 .�9�� ��CSS3 �� ���; �� ��� � �� �� ��� �; y!�� ����!0 �6 ��0 �� ��� � �!^ /�!�

,�)�� �< �� ���8+� ��L � �� �)�Q0 �)�9Y ��9d+� � T)��� /� �! .T�!�� ���!; �!Q93 N!) �!9���CSS3 �� 2�O �-)� #��" � �� f�>� y�� ����0 �)�9Y �� #�JPEG �!9Y �������!; /�� �) � T)���

�< �� �)�Q0 � �)���� ��9���.T�9� �"�i� �� �_@' � �� 7��� y�� ����0 �� �������� ���*�.<�< �)�Q0 �9Y ���� �"�i� � �� #� ?�_0 ?�& �� �9���� �!t��

�� �� �)� ����� :Q" �)� ����� �� y�� ����0 �� ���0 ��!� ,��@� ��. �>!�� �)�! 6 �!� /��!L �! ��9d+� � M�^� /�������� ���+0IE9 .����G- =)�+� � �� �D�6 �9���

y�� ����0 � �� ��CSS3 �� Z��$ T�9�� �� s#!��Y y!�� ����!0 �T�!9�* �!� �!��� ,��P� #�>� �F+� �� �A�6 ���B0 � y�� �� ���< �@�L :��$ � y�� �) � y�� � y�� N) �� /��! .#!� �-)� /��

�� �+$ �y�� ����0 # � y�� f;�0 ��D�6 � �� ��9� c>.� �� y�� �)�9Y �����02 �� 2��� �� .�9)��y�� f;�0 �)� �� �� #�5;�� N) � y�� N) :��$ �� #+! � y�� f;�0 �� �� �� y�� ������� W��$

�� �_� �/�5 y�� f;�0 �0 �9� N!) �� ,��@!� �)�!���0 �!� �)�P �� �� .���� �� 2�� }y�� ����0 N)�< �)�Q0 �� ��)��� �� �9��� �� �!]� �!� �!� #!�95� ���! �)� .��9� ,��@� 8�� y�� ����0 �� �����0

CSS ��� �� ��url() �� ,��@� F���� �9���) �)���background-image, border-image �& �list-

1. gradient

2. Color stop

Page 38: آموزش HTML & CSS3

"��#$HTML5 �CSS3 %�&' (��) �! 178

style-type�� ( y�� ����0 �� �����0 y!�� ����0 �� ,��@� ��i�& ?�& �� �*�� .��9� ,��@� 8�� �� �� �!�background-image .���� �� ���*�.< �)�D

y�� ����0 �� ,��@� � �� ��CSS /�� �� �� �9���>� ��*]� �-)� ����� ��� ��)��Q0 UG& �0 �y�� ����0 ,��P ��)� �!.� 8!�� �+!$ M�!L U�!^5�� ��!9d+� � �!99� #"�)�� �� y�� ����0 �)��Q

�� y�� ����0 �M�L �)�+9��8 � � ��$ /��CSS �< �)��Q0 �9��+� �-)� � ��9����+� #�@�� .���$ �� y�� ����0 Z�� ��CSS3 ,�)�� � �^ :#� ��P�� �i�& ?�& �� /� �! �� �!D�6 ���� ,��P� .

�)�� %�0�0 .T��� M�$ �

�5M _F+� �� �A

y�� ����0 �5My�� ����0 �6 y�� �� #� �)�� �!��B0 ��!-)� y!�� �! �!-�� �� ��! N) ?�L �� ���� �!���� �! �!�� .�5�!i ��!DY �^; �� �) � #�� � �Y �� ���)�< � O� �� ?�j� ���93 � :�99� /�!�

,��� ��� 8��� �)�" �) {�$�0�" �9��� ���"��� �)�9!$6 ��!^ y!�� ����!0 �! ��!)� ?�!+&� � ���$� �)�Q0 �� .�)���1-7 ?�j� .#� ,�$ ,��� =)�+� �y�� J����0 Z�� �)� �� �)��

�)�Q01-7 ?�j� y�� ����0 �� �)�� �^

����� �9��+� y!�� � �)��!q6 y!�� �#!DP �!)� y�� ����0 N) # � /�� ��)�Q0 =)��)� /��f;�0 � ����)�< y�� ��!����� .�!�9� c>!.� �� ��!$ ��])� �y�� ����0 �)� ?�L �� ���)�� �� �� �)��

�� 2�]�� �+$ /�� �� ����� �;� ���+0 � ��� a^�� �y�� ����0 � �� �+$ �V����� �Q93 .���!$�<�� �5 y�� � ���� � � ,�$ Z��$ y�� N) �� �����0 �)� �� #��& �DP �� #�� � �� !� �!9� �

,��� c>.� �+$ .�)� y�� ����0 �_ �� ����� �� M�^� ������ �� �^ �!� �V� � �>)� T� � �+� �)��$ ���$ .�!�

WebKit ?� ��� y�� ����0 T��0 #�� �; �� ����� f!)�50 /��! /�� �! �� � ��!� �!"�5� =�< ���< .#� ,��d�< � y9� �/���� �@� � �� ��� ,��@� ��� �� �� y!�� ����0 #�� �; H)��� �6 ��

,�� /�� � �� � ��� ���*�.< �� ������ �Q>� � �!)���e �� �1! .��!� ,��@!� �!02011 ) K� ���DP 2����9�W3C �� y!�� ����!0 /��D9!.�< �� � (CSS3 .��!� �"�!i� F��9!�� �! ��

$ ��� ��P�� ���"�)�" �� �� /�� � � ,��0 �� � #��*!$ �!)� #\�\& �� .#$�� /���� #��*

مى خواهم كتاب كامل و 360 صفحه اى را خريدارى كنم

Page 39: آموزش HTML & CSS3

/0�G> �8� �� F+� �� �ACSS3 ' &���8A � ,��#� !�6�# .

179

������!� �! �� y!�� ����0 F���� ��� �� #� ��)� /��; � W3C ���! ��!-�� ����!0 ���!�)�9 �� ,��� =)�+� ���"�)�" �� :�.� }�)�P �� � .��$W3C �>�� �� /�!������� �)�P /��WebKit

,�$ ���*�.<� 0 �K�� �)� 7��-� ���� �� ��� #!� ,�$ �"�i� #�� �; �)� ��5�0 #_0 �>�� �� �D9 �!i�& ?�!& �� � #!� 2�O ��!�� ����� �/��@} � 2��� /�������� �� �D�6 /������ � ���� �0 �

�� ���*�.< �y�� ����0 �+)�; F���� �� �������� �)� #)�! �� ���*�!.< /��! .�99� �! �!� �)�!���L �y�� ����0 �+)�; F����,�$ �& �� �+)�!; F���!� ��!9d+� ��0�!� �!0 �!������� �!)� ��!��

�9��� ���*�.< ��� �>!�� �� 8!�� ��!<�� �!����� . /11.10 ������!� ��!�� �� �!��)� �!)�W3C �� ���*�.< x�!Q>� ���!.�< �! F���!� �!)� �� �~�!" /�!������� ���!+0 �!i�& ?�& �� .�9�

��$�� ���*�.< �� �99�. ) -webkit-, -moz-, -o-(

����� �� � � ����� �� � � ����� �� � � ����� �� � � - - - - WebKit �#$��#$��#$��#$� ������ !������ !������ !������ !1111

e8��+O �����WebKit 8�%� f93� !K�*� �A +O :� #� � ��<+; ��+F B +� ���T �1+;� +� >.F �� ��2

d��) 8� [�� �A +O ��� ��� � �http://www.webkit.org/ ��.��F �'+;� .� � d+� � �� �%� %�Q �1

�� ��+WebKit �� �<�,� ���# #B +%� ���%T �%1+;� +� �� %�Q ��%��� �%�� 8� ����� � 7��8 �� �L

�� =�S ��� �� ��� .� � B85 7��8 ���� ��*� 8� �0� >]� �� ����� �%��8 � �%1 �� �%�.��F �%�� #�%1+;� +� � 8� �(Q ��� 8� .�3� �*� �A �� ����� � ���8 � ���# �+�8�� +&�3� ���8 � ��� �� +;� +� 8� ��*� ��� ���

� ���+��\� ��+") �S ����+� D �� �� � � +� 7�*������R�) 8� .� � �� =�/�� +;� +� # ��*� ��� ��

�� +&�3� �8 � +1 +/�*� ��� �� +;� +� 8� �%/�� ���.��%F �S � � �0/� #� � �6 �� �E� ��� ���%�9��6� �� �����*� ��� #+��" ��/1 �� ��� ����� ��Q +;� +� �+0./� �� � �%�� �%� .3�%*�� ��%9H �� #�1

���� #=�J� 7��3� ��) �3� �*� �� �Q ���.��F �1���� +;� #=�S ������% � d�% �+� i%�� �L��� e��2�

W3C��*� �� 8�31 �� ( �� #�*�� d+� � �� ���T B +� ��Q�� �1 8� �������*� ��� .�3� ����� � �1 ��%%*� ��+%%") �%%<���� �+%%� �%%��8 � WebKit $�%%*� �+%%� d��) �%%� #e�%%�3�0� 8 %%3� !%%���

http://nightly.webkit.org/ .�3� �6Q�+�

�� �;� ?�� �)� ?�& �)� � y�� ����0 ��^Y �� ���� �� �� ��IE �>�� � J�+)�!; /�!�Opera �! *$� .T)��- ��� ���>IE9 �>�� �� ��<� �11.10 �>�� � �+)�; /�� �#�� �; �� �0SVG �< �� ��9���

�� ���*�.< �� y�� ����0 �)��Q0 # � � �99�SVG ���!� ��) .#!� ��!6 ���!� SVG :!Q" �� �>!�� ���!+0 �#!)�D� �� � (.��!� T����! �!_ �:!Q@� ��L � T����) �!����� /�!�IE ��!� ��

� �'�Q ��� ���*�.< ��^ y�� ����0 ��])� /� .�99�

1. Nightly Build

2. Open source

Page 40: آموزش HTML & CSS3

"��#$HTML5 �CSS3 %�&' (��) �! 180

,�$ R�� s�)� ,��$ 4�� �Y��� .��$�*� ���-� y�� ����0 �� ,��@� / #� TD� ��� /��1!�L� �! ���,��$ ������ �+)�; /�-�� ��9d+� � �)�P ��� 7��-� /�-�� �� .#��� ���8�� �F���� 7��-� /

WebKit � 7����" /��� � �� ���� a�i�0 8�� �� �$ ��� ��!�� �� �+!$ �! �� /��� �1! � T����� �� �� ��8 � N) :T)��G� /��!�� �!-)� l!)�L �)� �� � ��)�9 �+$ /�� �� y�� ����0 F���� ����0

.T�9� Z��$ ���� ,��P� .�)��1� �L� � �� ������ �� x�Q>� F���� �� #��� #)� �� �^ y�� ����0 N) �D90HTML5 herald �! m�! �� :�^!�� �� T!� �6 � ���� ��!P�

�)�Q0 �� �� #� #)� �� �0�B��*0 �*5P �����2-7 K�!� ��!+� �! m�! �� S!��*0 /��!& �!�) 8��,�$ �P�� [O�+&� .#� ,�$ ,��� =)�+� 8�� (!#� ,��! y!�� �! � O�! #+!�; �� y�� ����0 �� �)�

�� Z��$ �9$�� #+ � � ��$ �!� =�!< �!� ,�!�0 ,��! �� �1! � ��� �!)� �� �� ��!�� � ��!$��Y �� T� �� �Y�� /�� �� �$�� ,�� �� � �9� .��$

�)�Q02-7 #)� �� �^ y�� J����0 N)HTML5 herald

�y!�� ����0 ��� ������� 7��-� ,��$ � #�>� �F�B��*0 => /�� y�� ����0 # � /�� �� Z��$ $ �)� .T�9�,�� �+� �� 7��-� ,�� TD" : �; � �0 �� �!� ��! �!��� /��� �D90 � #� �0

�� �+)�!; N*! � ��� 7��-� ,��$ �1 .��� ����� ,��@� �6 �� ,�9)6WebKit ���!"�)�" ��� �� ��� �)�P ��� � �� ��.0��@0 � T)����< .T�9�

!� �+��� ����!W3C � ������� ��� �)�:#� �^ y�� ����0 ��])� /�

background-image: linear-gradient( … );

�y�� ����0 ��])� #DP ���8���< �6 : �� ��� y�� f;�0 �� c>.� �� �� #DP ���50 /�� .��9��� T� �� T� � ��9� c>.� �� �9� #��& �6 /��� �� y�� ����0 ����)�� �� �� �)��� �����0 �! �����0

@��$�� �6 �/���� F�+�� �� ,�� �� �� �� /� .�!�9� c>.� �� ��$ Z��$ �]�6 �� y�� ����0 ����� .��� ���� #��& ��+$ ��0 ,�$ ���50 #DP f��>� #+ � y�� ����0 �#��& �� �)� �� N) �� ��

) ���)�9 �P�� � �� �)��\� �)� ��)��� ���50 /�� deg .(0deg � ,��$� #�� #+ � � ��!9�90deg �!

مى خواهم كتاب كامل و 360 صفحه اى را خريدارى كنم

Page 41: آموزش HTML & CSS3

/0�G> �8� �� F+� �� �ACSS3 ' &���8A � ,��#� !�6�# .

181

��\ %�0�0 ��+� � � O� #+/ � �\3 #DP /��� �� �)��\� �� ��P �#)� /�� #+ /�� .���� ���$�� � /���� F�+�� �� 8�� ��top, bottom, left �right �� ,��@� c>!.� �� �< .��$ �#!DP ���!�

y�� f;�0 �� ���50 �� �� y�� ��� �� => �)� .��9�� �� y!�� �6 7�!�� � m� �� ?�L �) � �'���� c>.� �� .�9�

�)��- ��) �)� �� #� /���� %��^�� ����!0 �� ?�!j� �!9Y #!�>� �!� #� �D �L� ��+� � y�� � .��9�* �� ��=)�+� ��V9� y�� �� �� ,��@� � �� ���j� �y�� ����0 /��G�#FFF � (��@!)#000

�� ��])� (,��) �9�.T �< �� ��)�< � O� �� y�� ����0 T� /�� �9��� �)�!Q0 �9��+�) �Q93 N) /7.3 �� �!�) �!)� (

�)�* ��� � �� �)� ��� �. ���.�< �� ��+��j� �� ��)-moz- ,��� ,��@� T!)�� �!$�� ��!) �! �!���>�� �� ��$� �)�<� �������� �)�P /�� /WebKit �� �!� ��<� ������ � ���!.�< �� ��!$�� /�!�

�95)-webkit- �-o- �� ,��@� �99�� #� ����) ��.)���� �� ��� 7��-� /�-�� ���.(:

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%);

�)�Q03-7 ,�$ T �Q93 8��� � ��)�< � � ,�$ Z��$ �Q93 8��� � O� �� �� ,�� � ��@ y�� ����0

.#�

�� ��� ��� � T�$�� �� /��� �)� 6 �9�� ���\� ��)�top ,�!.� �!�; �! 6 ��!� �� ��=�< ���\� �#� �� � #� ��" ���!��� ��!L �! �!����� ��!�9�� c>.� �� ���\� �)� �� �0��'

���\�top .#"�� ���� �V� �� �� �)�]�6 �� �� y�� f;�0 ����� ��0 �� ~�@0� �'�� �� 8!�� y�� f;�0 �)� 6 � �"�100 �!'��

�� �#� ,��@0� ~�@0� �'�� ���0 �!+� �!]�� � ��!� UG!& �� #!� ,�$ ��; ?�j� �� �� �)�� /8!�Y ��� �� �� ���� :T�9�

background-image: -moz-linear-gradient(#FFF, #000);

�P�� N) /�� � �� y�� ����0 �� ���� ,��P� �?�& �! 8�� y�� f;�0 �9Y � T�9� ��])� �x� /�� �� ��9� ��" .T�9� �"�i� �6 �� ,�� y�� � ,�� �� � T)�� ��@ � ,�� y�� �� T���� :T)���

Page 42: آموزش HTML & CSS3

"��#$HTML5 �CSS3 %�&' (��) �! 182

background-image: -moz-linear-gradient(30deg, #000, #FFF 75%, #000);

�� �� y�� f;�0 ��75 y!�� ����!0 ��!)�< � N)�8� �y�� ��@ ���� ��� �)� �� T)��� ���; �'�� �)�Q0 � .#� ,�$ ��)�+�4-7 .��9� #;�

�)�Q04-7 .#� y�� f;�0 � /���� �� y�� ����0 N)

�� �^\� �� �� y�� f;�0 ����� Z��$ �^\� �����0 �� ��q � /�0 ��!)�< �!^\� � ��9� Z��$ �'�� �� ��q � �)�P �� :�$ ��+� � 8�� ��100 �^\� �� ��'�" .���� ���; �'��0 �!^\� � �'�� �!� /�

,��� K�>�� Z��$ /�� ,��� c>.� ?�� y�� f;�0 �� �� �-�� � ��)� �!� �!< ��)� !$ ��!^9�+� � �� ���\� � ��)�< �^\� �� �� �-��100 �� �< �� �'�� �!V� �� 2�� y!�� f;�0 /�� �� �-�� � 8�� �9�

�"�� :��9� �P�0 ?�j� �)� � ?�& .#� ����) �)�

background-image: -moz-linear-gradient(30deg, #000 50%, #FFF 75%, #000 90%);

�]�� �� �� �-�� ����0 /�� ��])� ��� �)� �)�Q0 � ��*$ ���$5-7 .�� ����

�)�Q05-7 �^\� ��� ��)�< � Z��$ /�� �)��\� �� ��'�" � 0 �100 ,��." �-�� ����0 ���9� c>.� �'��

�� ��])� ��$.

�!� f)�50 �)�P y�� f;�0 N) �� ����� �� �� ,��@!� �! �� �6 #!�5;�� �!� #!��� 2�O �!�9�.� �'��y�� ����0 �� ����� :�$ � :'��" ����)�9� �� /�'�� ���\� ��� .��9� c> T�!�\0 �!�

�� :��$

background-image:

-moz-linear-gradient(45deg,

مى خواهم كتاب كامل و 360 صفحه اى را خريدارى كنم

Page 43: آموزش HTML & CSS3

/0�G> �8� �� F+� �� �ACSS3 ' &���8A � ,��#� !�6�# .

183

#FF0000 0%,

#FF6633 20%,

#FFFF00 40%,

#00FF00 60%,

#0000FF 80%,

#AA00AA 100%);

background-image:

-moz-linear-gradient(45deg,

#FF0000,

#FF6633,

#FFFF00,

#00FF00,

#0000FF,

#AA00AA);

�� ��])� �� ���+� ��-�� �O� �� ��0 �� �� 2��� �� ��!9d�6 8�� 7���� � ���� �)��� ����� �� �9� �!-"���" � T�$�� � �9Y �� �� F���� �� .#��� K�GP ,��!� ��!])� �!� �� T!� �� �)�!� �!0 T!)�

��$ �.� ����� �)���� . �"�i�)��'�" �)� �����-"���" � ��(.#��� ���8�� �� y�� �y�� ����0 ��y�� N) �� ���� � �� �� ���B0 �-)� �-�� � �� .�99� #!�� �� y!�� �� ��� �

y�� ���9� f)�50 �T� � ����) ��5;�� �� a!i�� � c>.� /��� � �$ �9���>� �_� �-)�+� �� ���� :�$ �y�� �� �� �� �9"�0 �)� �� ,��@� � .���� �< ���0 �9��� ,�� �)�� #!�� ���!� ��])� �� ,��

�)�Q0 �� �� /8�Y �9��+�6-7 �� .��9�

�)�Q06-7 y�� l�;� =9�Y � ���� �< �����0 �9��� ,�� /�.��9� ��])� ,��

:T)���9� ���-� �,�$ ,��@� �6 �� :*; �)�Q0 # � /�� �� /�� � ?�&

background-image:

-moz-linear-gradient(45deg,

#000000 30%,

#666666 30%,

#666666 60%,

Page 44: آموزش HTML & CSS3

"��#$HTML5 �CSS3 %�&' (��) �! 184

#CCCCCC 60%,

#CCCCCC 90%);

�� �N)�8� ,�9)6 �� ���!� 7��-� ,��$ �� ,�$ ��� � �>�� �)� �� ��$� �$�� ��V�� �����0,��$ �D90 �� ���� ���� ���� � �*5� /� ,���� ���� �6 � �i�& ?�& �� �t�� F���!� �!)� � T)�

.T��)�9 �� �� �� T� �� �+)�;

.�>&���&# �! �S��) ����! �'&�,� .WebKit �>�� �)� 6 �T)��� a�i�0 �� ��^��+� �5�0 #_0 / 7����< ��0�� /WebKit ������!� /�!-�� ��

W3C �� ���*�.< y�� ����0 ��� �$�� /�� �>�� ?�& �)� � ��9� /�!������� �!i�& ?�& /���)�<� /WebKit� �>�� �� ��9� �� ���*�.< �y�� ����0 ��� �+)�; / 9�,��d�< �+� �� �9 .#!� �!0

�)�]�6 �� ��!�� �� 8!�� �� �+)�!; /���!� �T)��6 :+3 � ���*�.< 8�� �+)�; /�������� �� �)� �� ���� ���; ��+)���� � T)���9� �y�� ����0 ��� �+)�; 7��-� /�-�� � �h)� ���-� ���� ,��P� .T���

� �� (,�� � ��@ y�� ����0) ��+��� ?�j� :T��)�9 �-�� �)�

background-image:

-webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), to(#000000));

#�'�Q �� ,��@� /�P � linear-gradient 2�!� �! ���!+3 /��� �-webkit-gradient ��!P� c>.� ������< ����� ���93 � �� y�� ����0 Z�� ��6 �� �� ������ �7��!-� ,��$ �)� �� �1 .��9�

�� �� ��)�< � Z��$ �^\� .��$ ���50 �y�� ����0 #DP �0 ��9� c>.� �� ��)�< � Z��$ �^\� �)� ���0 J/���� F�+�� �) � /��3 �)��\� ��'�� � top, bottom, left, right �) �center.��� c>.� �

c>.� �/�5 ��&��y�� f;�0 ���� �� ����0 /���� �+$ .#� y �+�� � �� �)��q6 y�� �����0 J/����from J/���� �+�� � �� ��)�< �^\� �to �!� �1 .��9� c>.� h �!0 �� ,��@!� �! �!����0color-

stop() y�� f;�0 ����� F��' �� h �!0 �� �!� /���!\� ��!��� .�!�9� �"�!i� �� ��0�������� /��color-

stop() �� ���� 0 ���� ���$�� c>.� �� y�� f;� � �!$� /�'�� :�$ � �)� 8�� ���\� �)� � �9��� c>.� ��^\� �6 �� �� y�� �8�� ���\� ����� .�9�

:��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));

��-�� ��+� �� �~�" ��� �� ,��@� � #)�! ��6��) �� ������ �)��� ��+�GeoCities ?�! ��1996 #� �$�� �+)�; /�-�� � ��.T)�

مى خواهم كتاب كامل و 360 صفحه اى را خريدارى كنم

Page 45: آموزش HTML & CSS3

/0�G> �8� �� F+� �� �ACSS3 ' &���8A � ,��#� !�6�# .

185

O #\�\& �� /�!��� F�!+�� �� ,��@!� �! �� ��)�< � Z��$ �^\� �� #��� 2�from �to c>!.��)�]�6 �� .T�9� ��from(red) ��� � color-stop(0, red) �� �#� ����) �!)� �! �� �����!� T����!0:T��)�9 :�$

background-image:

-webkit-gradient(linear, left top, right bottom,

colorcolorcolorcolor----stop(0, red)stop(0, red)stop(0, red)stop(0, red),

color-stop(20%, orange),

color-stop(40%, yellow),

color-stop(60%, green),

color-stop(80%, blue),

colorcolorcolorcolor----stop(100%, purple)stop(100%, purple)stop(100%, purple)stop(100%, purple));

/���� �+�� �� ���from �!^\� �� y!�� f!;�0 N!) �!) �0 � ,��@!� �!'�� y!�� ��!+� �� ��!�9� �!^\� �� ��'�" ���� �< /�� y�� f;�0 ����� /�� ,�$ c>.�0 �y!�� f!;�0 ��!��� �!0 �!'��

�� ,��@� �*� :'�" �& �� �-�� ��)��$ �)� �� .��$ �!� �!< �� y!�� f!;�0 ��!��� �!0 �Q93 / ��!9� �!^\� �� #!�� � #!� #!��) �!-�� � ����� ���$�_� c>!.� y!�� f!;�0 �!� /� �#!� ,�!$

�� Z��$ ��-)� y�� #+ � ���$�_� �!� �0��!' �� �T�� y�� f;�0 �)� 6 � �� ����� .��$ ���� �� � 6 y�� f;�0100 ,���+�;� ��'�" �� ��$� ,�.� c>.� �'�� �!*� � ���!)�< �^\� �� /

�� �< ����)�< y�� f;�0 /�� ,�$ ���50 y�� ��+� � ��'�93 /��9� �*3 � .��$ ��!��� �!�� ��-)� F� �^\� �� �� y�� f;�040 ��!�� �� 8!�� y!�� f!;�0 �)� 6 � ��$� ,��� c>.� �'��60 �!'��

�� ��'�" �y�� f;�0 ����� �� ,�$ c>.� y�� ��$� ,�$ c>.�0 �040 �� �< �� �'�� � �!9� �� ��'�" 8�� ���)�< y�� f;�0 �� ,�$ ���50 y��60 �0 �'��100 !< �� �'�� �!� � ��!'�" � �!9�

�� 40 ��60 �_� � �� y�� ����0 �8�� �'���� ,��� =)�+� �,�$ c>.� y�� �� �� ���$ .��$ �� �� ��^��+� ,�!�d�< H)��!� �!����� /�!-�� �� �+)�; /�-�� �)� ���9� ����>*!$� .#!� �!0

��� �� �)����8 � y�� ����0 � m� �� /���� ���+0 �� ��� � �� ���� ����0 ��+)� �)� �� � � .�99���8 � �� �� ���� �"�5� :Q" �)� ��)�< �� .T�9� �� �� ��!� 7��!-� /�!-�� �� �!)� ��!^Y �� T�9�* �

#)�HTML5 herald �!* .�! �) =)�!+� ��� � �������� ���+0 �� ��+-�� ����0 �0 T)��- ��� � �)�<� �+)�; /�������� �� #� �)� K� WebKit y!�� ����0 /�� ,��@!� �0��!@� ��!� �� �!�

�� ���) �99�-webkit-gradient /�P � -webkit-linear-gradient�� ( ��!L �! �� ��!� �� �!� �����0��9� ,��@� ���8+�� �!)�<� /�!������� #!\�\& �� .�!)�� ��!P� �! �!D�6 ��! �� ��0 ��9)� ��� /

WebKit � �� �� �)�P�� ���*�.< �-�� � �99�� �� ,��@� /��� �6 �� ��� ,�!�6 �+� �� � 6 �� �99� .�$�

Page 46: آموزش HTML & CSS3

"��#$HTML5 �CSS3 %�&' (��) �! 186

�>�� ,S> K! ! � &) 0> ���� ,��!$ �� � �! 4�� ��9�� T!)��� �!^ y!�� ����!0 J��!� 7��!-� /� �!� �!��� ,��!P� �� �!)� ��

.T��)�9 �� ������ ! ��!� �! y!�� ����0 ��&��L �� �+$ M��L ��� �� �� ��! �!&��L ��!)� ?�!+&� �! ��!$� ,��

2�� �� �+$ .#� ,��� 2�]�� �-)� �)�Q0 =)��)� ����� N) �) {�$�0�" ��8"� �! #�5;�� �)� �� �����0)�* ,��@� ��0�� h@����*$ ���$� �$�� ��� � �� �� �&��L � m� �� :'� :)�" ��� . ��+� /��

:)�" : �� y�� ����0 ,��P �� ,��@� � ���"���CSS.�� ���� ��6 � �� ���9� �� {�$�0�" �� �� ���)�" ��� ,��P � m� �� ,�]9< �����0 � �!�9� ��! �� y!�� ����!0 /

�)�Q0) ��9�* �� F�B��*0 => }y�� ����0 � m� �� y�� /����7-7 R9< � #� �^ �� y�� ����0 .( ,���]9� �6 �� 8�� y�� f;�0�� ���B0 �,�� y�� /�� �� #�"�@$ ��8�� �D90 �� ,�$ .�9��

�)�Q07-7 ���+� {�$�0�" �� �^ y�� ����0 �� /�

J�0�!� �! y!�� �!� #!� c>!.� {�!$�0�" y�� ����0 � m� �� F�+�V90 ��40 ��!q6 �!'���� ) ��$60 ���� #�"�@$ �'��. #�5;�� �� 8�� y�� f;�0 ����� � (37 ���; �'�� 8!�� �0�� � ����

�^\� �)� ��0 �� �� .#� �'�� h+P /�� ��8 � �)� �� T����0 :!)�" �� ,��@!� /��! ,��� /��6CSS � ������� /�-�� #�>� .T)�* ,�D W3C �� Z��$ ��<� ����"�)�" ������ � m� �� F���� � T�9�

11.10 �>�� � �)�<� /�������� �)�P /�� /WebKit �� �� :T��)��

css/styles.css css/styles.css css/styles.css css/styles.css (excerpt)(excerpt)(excerpt)(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 صفحه اى را خريدارى كنم

Page 47: آموزش HTML & CSS3

/0�G> �8� �� F+� �� �ACSS3 ' &���8A � ,��#� !�6�# .

187

);

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�B��*0 ��)�!< #+ � O� �� ��+-�� ����0 �� T���� /�� � 270deg (��)�< #+ � O� ��) y�� f;�0 ���+0 �1 .T)��� T�V90 �! {�$�0�" :)�" �� �� ��

�^\� �� �� ��9� #;� .T)��� :\9� ����� �� UG& �� y�� ����0 J���)�< /T)�� y!�� f!;�0 �)�! 6 ��)� ���� ��98 �� ��'�" � �"�� ���; �'��98 ,���)� �0 �'�� �� �!� �!-�� ��+� � ��Q93 /��9� /

�� �< ��� ,�$ f)�50 �y�� f;�0 �)� 6 ��$. /�� �0�� �� ����� �]9)� ��)0 ��!+-�� ��$� �'�� ,��(.#� :��� U�@$ ������ �;� �� �

��� ,��P� ?�& J�+)�; /�-�� �� �WebKit ���! �� ������!� /�!-�� �8!�� ��!)�< �� � T)��- ��� � ���>�� ,��@� ���� �,�9)6 �� �0 T��)�9 ���.�< �� ,��@� :���� ���; ��������� �)�P /��

css/styles.css css/styles.css css/styles.css css/styles.css (excerpt)(excerpt)(excerpt)(excerpt)

#ad2 {

backgroundbackgroundbackgroundbackground----image:image:image:image:

----webkitwebkitwebkitwebkit----grgrgrgradient(linear,adient(linear,adient(linear,adient(linear,

from(rgba(0,0,0,0.4)),from(rgba(0,0,0,0.4)),from(rgba(0,0,0,0.4)),from(rgba(0,0,0,0.4)),

colorcolorcolorcolor----stop(37%, rgba(0,0,0,0)),stop(37%, rgba(0,0,0,0)),stop(37%, rgba(0,0,0,0)),stop(37%, rgba(0,0,0,0)),

colorcolorcolorcolor----stop(83%, rgba(0,0,0,0)),stop(83%, rgba(0,0,0,0)),stop(83%, rgba(0,0,0,0)),stop(83%, rgba(0,0,0,0)),

colorcolorcolorcolor----stop(92%, rgba(0,0,0,0.16)),stop(92%, rgba(0,0,0,0.16)),stop(92%, rgba(0,0,0,0.16)),stop(92%, rgba(0,0,0,0.16)),

colorcolorcolorcolor----stop(98%, rgba(0,0,0,0)));stop(98%, rgba(0,0,0,0)));stop(98%, rgba(0,0,0,0)));stop(98%, rgba(0,0,0,0)));

background-image:

-webkit-linear-gradient(

Page 48: آموزش HTML & CSS3

"��#$HTML5 �CSS3 %�&' (��) �! 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%

);

backgroundbackgroundbackgroundbackground----image:image:image:image:

linearlinearlinearlinear----gradient(gradient(gradient(gradient(

270deg,270deg,270deg,270deg,

rgba(0,0,0,0.4) 0,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.4) 0,

rgba(0,0,0,0) 37%,rgba(0,0,0,0) 37%,rgba(0,0,0,0) 37%,rgba(0,0,0,0) 37%,

rgba(0,0,0,0) 83%,rgba(0,0,0,0) 83%,rgba(0,0,0,0) 83%,rgba(0,0,0,0) 83%,

rgba(0,0,0,0.06) 92%,rgba(0,0,0,0.06) 92%,rgba(0,0,0,0.06) 92%,rgba(0,0,0,0.06) 92%,

rgba(0,0,0,0) 98%rgba(0,0,0,0) 98%rgba(0,0,0,0) 98%rgba(0,0,0,0) 98%

););););

}

)��� �������� �� � � � �� y�� ����0 ?�&�)�<� /�������� � ��<� �(���"�)�") H /WebKit �� ,��� =)�+� .��$

� !�G�� �� �5M _F+� �� �A *M��SVG ��!<� �� .T�!9� �"�!i� �!D�6 �! �� ��!+�^ }y�� ����0 �)� �� ���� ��P� 8�� /�-)� /�������� ��9�

11.01 �>�� � TD� � �6 �� :*; /�� ��1!��� #!��9)� ��!+� �� �!0 ��9 �)��!Q0 ��SVG �!< �� �!9����� ���*�.< #��" � y�� ����0 N) # � � .�99�SVG �< �)�Q0 N) ���93 � �6 ���� ���; � �9���

�� ��������� �)� �� ,��P ��+� T����0 �� ,��@� � �� �� /�CSS3 ,�� �� �� T)�� � � .T�9� /��

����� �� � � ����� �� � � ����� �� � � ����� �� � �– SVG &$�'&$�'&$�'&$�'

SVG ���9� C���Scalable Vector Graphics k+� �]�)d��K� ���+� (+�GO .� �SVG �%��O+� ����8 XML

k+� �]� �"� �+� +W�3� + :� 8� �� � �d��K� k���+� �� ����� � #+�GO 3�. � �� +W�3� ��� ���"� )

�� 7��3 �+� �/� �� � � ���"� �� ��9�HTML �� +@� �� (.�+�; ���� �� $1�8�� !]< ��SVG �%�!]�� ��� ��� $�1��" �l��� �� ���E�,�� #+�# �� ^�,�� 7����+� ��+ �� �� ���K� �(3� 7�3�� ��� �+�8 $�1�

.� � ��� i�� �L��� :� #$���� �� ��"� ]F �� [�'

:)�" # � �)�$SVG �� �V� � 4�9�0� �� ,��@� � y�� ����0 # � � ��6 ���� �6 �� �� �� �-�� ����0 ��+� �� ��0 �)� �� .#� #��� �CSS3 � ��9�� T)�� � �SVG :T�$��

images/gradient.svg images/gradient.svg images/gradient.svg images/gradient.svg (excerpt)(excerpt)(excerpt)(excerpt)

مى خواهم كتاب كامل و 360 صفحه اى را خريدارى كنم

Page 49: آموزش HTML & CSS3

/0�G> �8� �� F+� �� �ACSS3 ' &���8A � ,��#� !�6�# .

189

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-

SVG-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>

:)�" � ���SVG �*$ �� �$ ����� �P�� ���9� #;� ����!0 ��!� 7��-� /�-�� �� /��)� #� �� �^ y��CSS3 �� ,�$ ,��@� /�-�� �SVG �! �� �6 �!)��� � y!�� ����!0 Z�!� �!� .���� ��P�

�Q93 �� ,��@�lineargradient c>.��,�� y�� f;�0 �1 � �� c>.� �� �� �! �� �!)��� .T�!9�c>.��� c>.� ��)�< � Z��$ �^\� ���� T�9�. ) �)�!\� ��!�50 � x1, y1 �! x2, y2( y!�� f!;�0 �!�

�Q�Q /���� � �9�� �)�� � ai�� �:��� 2�� � /�offset ��! /���\� /��& �� ���0 �1 �!� #!�y�� f;�0 �)� �� 2��� �� #�5;�� �� c>.� �� �� �5�!i ��DY N) �)� y�� ����0 f)�50 �� �5 .�9�

�Q93) T�9� ��])�rect� � � (�Q�Q �� ,��@ /style .T���$�1 ���+-�� ����0 � �� �6 #!�>� sT�9� ,��@� ��+)� �� �6 �� ��^Y �T� � �� NY�� � K�GP y�� ����0 N) �� ?�&

:)�" �)� SVG ����< � ��.svg :)�" �� �1 .��9� ,�� kCSS :!)�" ��� SVG �)�!Q0 ���!93 �! ���< �9��� �"�5� ��Q93 N) / #��" � �)��Q0 �� :�$ ��+� � #�� ��9� /��JPEG, GIF �) �PNG

�< �� �� �� ���; �9��� :�)���

css/styles.css css/styles.css css/styles.css css/styles.css (excerpt)(excerpt)(excerpt)(excerpt)

#ad2 {

backgroundbackgroundbackgroundbackground----image: url(../images/gradient.svg);image: url(../images/gradient.svg);image: url(../images/gradient.svg);image: url(../images/gradient.svg);

}

:)�" � m� �� ���SVG y�� ����0 F���� �� �0��� �)� ��CSS :�!$ �!)� �! �!0 ���)�9 �� �!��� ��!9� ���*�!.< �� #!��" �� �� �� /������ �� � �99�* �� �� �� �9��� �)�P /��������

��!� ���� K�>��. ) #!��& �!)� �� �!� y!�� ����!0 F���!�CSS3 �!� K�!>�� �!$(.�� �� /���!�

Page 50: آموزش HTML & CSS3

"��#$HTML5 �CSS3 %�&' (��) �! 190

�� :+3 �9+$�� �������� #��" �� �^)��$ �� � �99�SVG �< �� � �� �!< � �!$� �!"�� ���; �9�� � m� �� ���SVG y�� ����0 F���� �CSS3 :)�" �-)� ��$� ,��6SVG �+� #"�)�� �� �� � �99�

F���� ��+�CSS3 �� ,��@� .�99� �� y�� ����0 �� ��'� F��@0CSS �� y�� ����0 �SVG �)��!Q0 �!� #� �)� ��SVG �� �!�

�< � ,��@� �9���� =�< #��& �� ����$ Z�@0�� � ��3 ���"100 �!< :!� � ������ �'�� �� �!9����+� :)�" ��9)� /�� .�9��$�<SVG �< :� �9��� �!Q�Q �!)� ����!$�1 �� �!� �V����� �Q93 / /�!�

height �width �Q93 �� ��rect ?��5� �� �6 ���\� � ��9� ,��@�100% .���� ���;

�5M F+� �� �A ����`� *+&��� .�>&���� � !�G�� �� ,�!�P ��])� /�� �>!�� ����1!��� #!��9)� �� y!�� ����!0 / �� :!*; /�!�9 �!� � /�!����" �� T����!0

�'�Q �IE y�� ����0 ��])� /�� �� y!�� ����!0 �!��" .T�9� ,��@� �,�� /��IE �y!�� f!;�0 ���+� ���*�.< � �� ��� �; �D90 .�9� �! y!�� ����!0 ��!�9� c>!.� �!� #� �)� ���� ���; �+$ ��� � �

� �)��! � ���!� �� �! �)� .��9� c>.� �� ��)�< � ��q6 y�� ��9d+� � /��+3 �) �$� �\"� :�$#� ,��� �!� �!��" �)� ���9� ,��@� y�� ����0 �� �+)�; /�������� �� �����> ��� ��� �! �!���0

.�)�� ���+� ,��$ /�� ��� 7��-� /IE :#� :�$ �)� �

filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#COLOR',

endColorstr='#COLOR); /* IE6 & IE7 */

-ms-

filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#COLOR'

, endColorstr='#COLOR')"; /* IE8 */

�����!< �!)� �!$� �\"� :�$ � y�� ����0 �����> ���GradientType ��!3 /�� �! ��1 �!�� � .��9� T�V90 �@' ��3 �� ��$� /��+3 �y�� ����0 �����>

�)�]�6 �� ,��!� ,��@!� ��!+&�L �� �6 �� �!� �!� �!-�� ����0 �� �0 /���� T!)� �#!� y!�� f!;�+� ���" �� T����0IE ���� �)�!*)� ���!� T!� y!�� ����0 ��� �� S��*0 .T�9� ,��@�� �!Q; �� �!)� ��

�>�� � �� y�� ����0 �)� �� T)���� J�+)�; /��IE .T�9� �"�i�

����� ����� ����� �����– ����� ( � )�� !�� � !� �*� ���+�,����� ( � )�� !�� � !� �*� ���+�,����� ( � )�� !�� � !� �*� ���+�,����� ( � )�� !�� � !� �*� ���+�,

1+�.�< #$���� ^�,�� 4�9F �� ��X��/1 �IE �� ��� ������ ��+ � +� �� +�HI� ���G;# � �%�� 8�

��.Q ���/� �9 �E� .�30� ����� � �(�) 8� ���� 7�0�� �� ���Q �� e � +%� �� ��%� #+�.�< �� �� ��R�� �1�� +���� $�*� ��8��+O ��.Q ��� 8� �"+� .���G; 3� �"+� +�6�+ �1 .�+�SVG %H� [�� �1 %���� ���%&� +

.�3� � �+� �F� �� C.��� �1+;� +� �� �� 7����� ��� � ��� 8� (+�/� ��9L�)

مى خواهم كتاب كامل و 360 صفحه اى را خريدارى كنم

Page 51: آموزش HTML & CSS3

/0�G> �8� �� F+� �� �ACSS3 ' &���8A � ,��#� !�6�# .

191

��G# .�>� U� ,��$ �� ?�& ����d�< � ��"�� ��" �� �^ y�� ����0 ��])� / �9!$6 7��!� 7��!-� �� �! /��

�� ��)�$ �"�� ��) �� /����� �)� �+� �����0 �9� 7����" �� �)� �!���� ��!P� � �! ���� /����8 � .��� N+� �+$ � �� �!9Y �! �� �� ��� �� ����� ��*]� �-)� � ��9� ��])� �^ y�� ����0 �0 �99�

�� ��!� �!)� #!+&� �����8 � �)� .� �) =)�+� ��� � �������� ���+0 �� �0 ���)�9 f�>� �� ��� �+$ /�� .�9.�

{���6 ��P1 � /��8 ��� ,��P� �+$ � �� ,��� �&��L � y�� ����0 �0 ��� ,��!+� �! �!^ /�!�y�� f;�0 �)�<� /�������� � ���"�)�" ������ �� �� �)��� �����>�� /�� /WebKit ��� �

y!�� �!D90 ��8! � �)� .�9� ��])� �� /�\�& � �^ y�� ����0 #� ���; ��8 � �)� .��$ ,��� =)�+� /�!����8-��� ?�+ �� ?�*; �9�� ���� ,��P� �+$ � � � �!�9� �!1� �� �!���� ��0 ,�$ � � �� �� ���

� �� ?�+��8-� �)��\� ���� F��' �� �1RGBA �) �HSLA .���� ���B0 ���O�� ������2 �� ,��P� �+$ � �� ,��� ��])� /��8 � � �!�9� ,��@� y�� f;�0 �� T� �0 �� ���

�� ��9d+�y /�-�� � 8�� � �� ��RGB �� ��)�� �!� ,��!P� �+$ � ��8 � �*�� .��)�� N!) �� �!� �!�� y�� ?��PHSL ��9� K�>�� �� �� y�� �8��� /�����!\� �y!�� ����0 �� # � ���� �� ���HSL ��

� RGB �� :)�*0 ��8 � �)� .�9��+� ���*�.< �� #�"�@$ � �� �9��� � � ����!0 �����0 �! �� ��!���>�� y!� �� �1 ���9� ��])� ��8 � �)�RGB �! #*!�� ��8! � �!)� .��)�8"�� �6 � �� #�"�@$ � ,��� =)��)� ��

�� ���; �+$ ��� � �� /�.� F������ ���*; ��8 � ���� �!+� ��!� ,��!0 ���!"� /�� =^�_� �)�$ ���R�� � ���$ .�$� ,�99�

=)�)6 ?�< #)�D� ��3 � T� 2�� � �)css3please ,�� �� �� ,��P� �+$ � �� ,��� /����� �!0 �!��

�� � �� �� �)��� �^ y�� ����0 �6 /�+� ���*�.< �y�� f;�0 �� ���8 � �)� � �!�9� %]50 �)�$ .�9���" �� #� /��8 � �D90 ��8 � �)� �� ����� �T)�� :)�� .T)��� �"�5� �+$ � �� #)� �)� ��Y ��� /��

IE ,��$ �-)� ��9� �� T� �� �� ��])� ��)�� �y�� ����0 ��� 7��-� /�� �!)� �� ��!)� � ,�H3 .�9��� #)� �-)� F������ � m� �� /���� �����0CSS3 �!$�� �9��+� �)�! � ��!� /�!� ���!+0 �! �� �!�

,��$ ,��P �)� �0 ��9� ��])� �f�>� 7��-� /������� ���+0 �� �� .� �) =)�+� ��� � ���

1. http://www.westciv.com/tools/gradients/

2. http://gradients.glrzad.com/

3. http://css3please.com/