ΠΠ°ΠΊ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΡΠΎΠ½ΠΎΠ²ΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ Π½Π° Π²Π΅ΡΡ ΡΠΊΡΠ°Π½?
Π‘Π΅ΠΉΡΠ°Ρ Π²Ρ ΡΠ·Π½Π°Π΅ΡΠ΅, ΠΊΠ°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²ΡΠ²Π°ΡΡ Π±Π΅ΠΊΠ³ΡΠ°ΡΠ½Π΄Π½ΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ, ΡΡΠΎΠ±Ρ Π΅Π΅ ΡΠΈΡΠΈΠ½Π° ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΎΠ²Π°Π»Π° Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΡΠΈΡΠΈΠ½Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° ΠΈΠ»ΠΈ ΡΠΊΡΠ°Π½Π° ΠΌΠΎΠ½ΠΈΡΠΎΡΠ°.
ΠΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΡΠ°ΡΡΠΎ Π½Π° ΡΠ°ΠΉΡΠ°Ρ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΡΠΎΠ½Π° Π²ΡΡΡΡΠΏΠ°Π΅Ρ Π½Π΅ ΠΏΡΠΎΡΡΠΎ ΠΊΠ°ΠΊΠΎΠΉ-Π½ΠΈΠ±ΡΠ΄Ρ ΡΠ²Π΅Ρ, Π° ΠΈΠΌΠ΅Π½Π½ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Ρ ΡΠ·ΠΎΡΠΎΠΌ ΠΈΠ»ΠΈ ΡΠΈΡΡΠ½ΠΊΠΎΠΌ. ΠΡΠ΅Π½Ρ Π²Π°ΠΆΠ½ΠΎ ΡΠΌΠ΅ΡΡ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°ΡΡ ΡΠΈΡΡΠ½ΠΎΠΊ ΠΏΠΎΠ΄ ΡΠ°Π·ΠΌΠ΅ΡΡ ΡΠ²ΠΎΠ΅Π³ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°. ΠΡΠΎΡ ΠΏΡΠΎΡΠ΅ΡΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡΡΡΠ΅ΡΡΠ²ΠΈΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎΠΌ background-size, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΡΠ°Π·ΠΌΠ΅ΡΡ ΡΠΎΠ½Π°. ΠΡΠ»ΠΈ Π΄Π»Ρ Π½Π΅Π³ΠΎ ΡΠΊΠ°Π·Π°ΡΡ ΠΎΠ΄Π½ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅, ΡΠΎ ΠΎΠ½ΠΎ Π±ΡΠ΄Π΅Ρ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΎΠ²Π°ΡΡ ΡΠΈΡΠΈΠ½Π΅ ΡΠ°ΡΡΠΌΠ°ΡΡΠΈΠ²Π°Π΅ΠΌΠΎΠ³ΠΎ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ ΡΠ°ΠΉΠ»Π°, Π° Π²ΡΡΠΎΡΠ° ΠΏΠΎΠ΄Π³ΠΎΠ½ΠΈΡΡΡ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ. ΠΠΎ Π² ΡΠΎ ΠΆΠ΅ Π²ΡΠ΅ΠΌΡ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΊΠ°Π·ΡΠ²Π°ΡΡ Π΄Π²Π° Π·Π½Π°ΡΠ΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ ΡΠΈΡΠΈΠ½Ρ ΠΈ Π²ΡΡΠΎΡΡ. Π Π½Π°ΡΠ΅ΠΌ ΡΠ»ΡΡΠ°Π΅ Π½ΡΠΆΠ½ΠΎ ΡΠ°ΡΡΡΠ½ΡΡΡ Π½Π°Ρ ΡΠΎΠ½ Π½Π° Π²ΡΡ ΡΠΈΡΠΈΠ½Ρ, ΠΏΠΎΡΡΠΎΠΌΡ Π΄Π»Ρ ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π° Π·Π°Π΄Π°Π΅ΠΌ ΡΠΈΡΠΈΠ½Π° 100%.
ΠΡΠΈΠΌΠ΅Ρ ΡΠΌΠΎΡΡΠΈΠΌ Π·Π΄Π΅ΡΡ
CSS
body { background: url(img.jpg) no-repeat; background-size:100%; }
Π‘ΠΌΠΎΡΡΠΈΠΌ Π² Π±ΡΠ°ΡΠ·Π΅Ρ
ΠΠ° Π·Π°ΠΌΠ΅ΡΠΊΡ
Π‘ΠΎΠ²Π΅ΡΡΡ ΠΎΠ±ΡΠ°ΡΠ°ΡΡ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° ΡΠ°Π·ΠΌΠ΅ΡΡ ΡΠΎΠ½ΠΎΠ²ΠΎΠΉ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ. ΠΡΠ»ΠΈ ΠΎΠ½ΠΈ Π±ΡΠ΄Ρ Π½Π΅ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ Π±ΠΎΠ»ΡΡΠΈΠ΅, ΡΠΎ ΠΏΡΠΈ ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΈΠΈ ΠΎΠΊΠ½Π° ΠΊΠ°ΡΠ΅ΡΡΠ²ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈΡΠΏΠΎΡΡΠΈΡΡΡΡ. ΠΡΠΆΠ½ΠΎ ΠΏΡΠΈΠΊΠΈΠ΄ΡΠ²Π°ΡΡ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΠΎΠΊΠ½Π° ΠΈ ΠΎΠ±ΡΠ°Π±ΠΎΡΠ°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π² Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΡ ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠ°Ρ ΡΠ°ΠΊ, ΡΡΠΎΠ±Ρ Π±ΡΠ»ΠΎ ΠΈΠ΄Π΅Π°Π»ΡΠ½ΠΎΠ΅ ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΠΊ ΠΎΠ±ΡΠ΅ΠΌΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ.
Π ΠΊΠ°ΠΊΠΈΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ?
9.0+ | 3.0+ | 9.6+ | 3.1+ | 3.6+ | 2.0+ | 2.0+ |
ΠΡΠ΅Π½ΠΎΠΊ: 3 (ΡΡΠ΅Π΄Π½ΡΡ 5 ΠΈΠ· 5)
ΠΠΎΠ½ΡΠ°Π²ΠΈΠ»Π°ΡΡ ΡΡΠ°ΡΡΡ? Π Π°ΡΡΠΊΠ°ΠΆΠΈΡΠ΅ ΠΎ Π½Π΅ΠΉ Π΄ΡΡΠ·ΡΡΠΌ:
ΠΡΡΡΡ ΠΏΠΎ CSS (Π² ΠΎΡΠΊΡΡΡΠΎΠΌ Π΄ΠΎΡΡΡΠΏΠ΅)
Π£ΡΠΎΠ²Π΅Π½Ρ ΡΠ»ΠΎΠΆΠ½ΠΎΡΡΠΈ:
Π‘ΡΠ΅Π΄Π½ΠΈΠΉ
ΠΡΠ΅ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎΠ΅
background-size — CSS | MDN
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅Β background-size
Β Π²Β CSS ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π·Π°Π΄Π°Π²Π°ΡΡ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.
background
, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΏΠΎΡΠ»Π΅ CSS ΡΠ²ΠΎΠΉΡΡΠ²Π° background-size
, ΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΡΠΎΠ³ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π° Π·Π°ΡΠ΅ΠΌ ΡΠ±ΡΠ°ΡΡΠ²Π°Π΅ΡΡΡ Π΄ΠΎ ΠΈΡΡ
ΠΎΠ΄Π½ΠΎΠ³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ c ΠΏΠΎΠΌΠΎΡΡΡ ΡΠΎΠΊΡΠ°ΡΡΠ½Π½ΠΎΠ³ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π°.
background-size: cover;
background-size: contain;
background-size: 50%;
background-size: 3em;
background-size: 12px;
background-size: auto;
background-size: 50% auto;
background-size: 3em 25%;
background-size: auto 6px;
background-size: auto auto;
background-size: auto, auto;
background-size: 50%, 25%, 25%;
background-size: 6px, auto, contain;
background-size: inherit;
background-size: initial;
background-size: unset;
ΠΠ½Π°ΡΠ΅Π½ΠΈΡ
<ΡΠ°Π·ΠΌΠ΅Ρ>
- ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅Β
Β ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°ΡΡ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎΒ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΒ Π² Π·Π°Π΄Π°Π½Π½ΠΎΠΌ ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΠΈ. ΠΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ Π½Π΅ Π΄ΠΎΠΏΡΡΠΊΠ°Π΅ΡΡΡ.<length>
<ΠΏΡΠΎΡΠ΅Π½ΡΡ>
- ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅
, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΡΠ΅Ρ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠ΅ΠΌ ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΠΈ Π΄ΠΎ ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΡΠΎΡΠ΅Π½ΡΠ° ΠΎΠ±Π»Π°ΡΡΠΈ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΡΠΎΠ½Π°, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΡΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ<percentage>
background-origin
. ΠΠ±Π»Π°ΡΡΡ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΡΠΎΠ½Π° ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΎΠ±Π»Π°ΡΡΡΡ, ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅ΠΉ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΏΠΎΠ»Ρ ΠΈ Π΅Π³ΠΎ ΠΎΡΡΡΡΠΏΡ; ΠΎΠ±Π»Π°ΡΡΡ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½Π° Π½Π° ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΈΠ»ΠΈ ΠΎΠ±Π»Π°ΡΡΡ, ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΡΡ Π³ΡΠ°Π½ΠΈΡΡ, ΠΎΡΡΡΡΠΏΡ ΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅. ΠΡΠ»ΠΈattachment
ΡΠΎΠ½Π° ΡΠ²Π»ΡΠ΅ΡΡΡfixed
, ΠΎΠ±Π»Π°ΡΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠΎΠ½Π° Π²ΠΌΠ΅ΡΡΠΎ ΡΡΠΎΠ³ΠΎ ΡΠ²Π»ΡΠ΅ΡΡΡ Π²ΡΠ΅ΠΉ ΠΎΠ±Π»Π°ΡΡΡΡ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ°, Π½Π΅ Π²ΠΊΠ»ΡΡΠ°Ρ ΠΎΠ±Π»Π°ΡΡΡ, ΠΏΠΎΠΊΡΡΡΡΡ ΠΏΠΎΠ»ΠΎΡΠ°ΠΌΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ, Π΅ΡΠ»ΠΈ ΠΎΠ½ΠΈ ΠΏΡΠΈΡΡΡΡΡΠ²ΡΡΡ. ΠΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠ΅ ΠΏΡΠΎΡΠ΅Π½ΡΡ Π½Π΅ Π΄ΠΎΠΏΡΡΠΊΠ°ΡΡΡΡ. auto
- ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ Π·Π°Π΄Π°Π½Π½ΡΠΌ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ΠΌ, ΡΠΎΡ ΡΠ°Π½ΡΡ Π΅Π³ΠΎ ΠΏΡΠΎΠΏΠΎΡΡΠΈΠΈ.
contain
- ΠΠ°ΡΡΡΠ°Π±ΠΈΡΡΠ΅Ρ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ ΡΠ°ΠΊ, ΡΡΠΎΠ±Ρ ΠΎΠ½Π° ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎ Π½Π°ΠΊΡΡΠ»Π° ΡΠΎΠ±ΠΎΠΉ Π²Π΅ΡΡ Π±Π»ΠΎΠΊ. ΠΠ°ΡΡΠΈΠ½ΠΊΠ° ΠΏΡΠΈ ΡΡΠΎΠΌ Π½Π΅ ΠΎΠ±ΡΠ΅Π·Π°Π΅ΡΡΡ, Π° Π²ΠΏΠΈΡΡΠ²Π°Π΅ΡΡΡ Π² Π±Π»ΠΎΠΊ Ρ ΡΠΎΡ ΡΠ°Π½Π΅Π½ΠΈΠ΅ΠΌ ΠΏΡΠΎΠΏΠΎΡΡΠΈΠΉ.
cover
- ΠΠ»ΡΡΠ΅Π²ΠΎΠ΅ ΡΠ»ΠΎΠ²ΠΎ, ΠΎΠ±ΡΠ°ΡΠ½ΠΎΠ΅
contain
. ΠΠ°ΡΡΡΠ°Π±ΠΈΡΡΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ Π±ΠΎΠ»ΡΡΠ΅ cΒ ΡΠΎΡ ΡΠ°Π½Π΅Π½ΠΈΠ΅ΠΌΒ ΠΏΡΠΎΠΏΠΎΡΡΠΈΠΉΒ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ (ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π΅ ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ ΡΠΏΠ»ΡΡΠ΅Π½Π½ΡΠΌ).Β ΠΠΎΠ³Π΄Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ ΠΈΠΌΠ΅ΡΡ ΡΠ°Π·Π½ΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡ, ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΎΠ±ΡΠ΅Π·Π°Π΅ΡΡΡ Π»ΠΈΠ±ΠΎ Π²Π»Π΅Π²ΠΎ / Π²ΠΏΡΠ°Π²ΠΎ, Π»ΠΈΠ±ΠΎ ΡΠ²Π΅ΡΡ Ρ / ΡΠ½ΠΈΠ·Ρ.
ΠΠ½ΡΠ΅ΡΠΏΡΠ΅ΡΠ°ΡΠΈΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ (ΡΠΈΡΠΈΠ½Π° ΠΈ Π²ΡΡΠΎΡΠ°) ΠΈ Π²Π½ΡΡΡΠ΅Π½Π½Π΅ΠΉ ΠΏΡΠΎΠΏΠΎΡΡΠΈΠΈ (ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ ΡΠΈΡΠΈΠ½Ρ ΠΈ Π²ΡΡΠΎΡΡ).Β Π Π°ΡΡΡΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π²ΡΠ΅Π³Π΄Π° ΠΈΠΌΠ΅Π΅Ρ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡ ΠΈ Π²Π½ΡΡΡΠ΅Π½Π½ΡΡ ΠΏΡΠΎΠΏΠΎΡΡΠΈΡ. ΠΠ΅ΠΊΡΠΎΡΠ½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ΅Ρ ΠΈΠΌΠ΅ΡΡ ΠΎΠ±Π° Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠ° (ΠΈ, ΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎ, Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΈΠΌΠ΅ΡΡ Π²Π½ΡΡΡΠ΅Π½Π½ΡΡ ΠΏΡΠΎΠΏΠΎΡΡΠΈΡ).Β ΠΠ½ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ ΠΈΠΌΠ΅ΡΡ ΠΎΠ΄Π½ΠΎ ΠΈΠ»ΠΈ Π½Π΅ ΠΈΠΌΠ΅ΡΡ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ², ΠΈ Π² Π»ΡΠ±ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΠΎΠ½ ΠΌΠΎΠΆΠ΅Ρ ΠΈΠΌΠ΅ΡΡ ΠΈΠ»ΠΈ Π½Π΅ ΠΈΠΌΠ΅ΡΡ Π²Π½ΡΡΡΠ΅Π½Π½ΡΡ ΠΏΡΠΎΠΏΠΎΡΡΠΈΡ.Β ΠΡΠ°Π΄ΠΈΠ΅Π½ΡΡ ΠΎΠ±ΡΠ°Π±Π°ΡΡΠ²Π°ΡΡΡΡ ΠΊΠ°ΠΊ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π±Π΅Π· Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΠΈΠ»ΠΈ Π²Π½ΡΡΡΠ΅Π½Π½Π΅ΠΉ ΠΏΡΠΎΠΏΠΎΡΡΠΈΠΈ.
ΠΡΠ΅Π΄ΡΠΏΡΠ΅ΠΆΠ΄Π΅Π½ΠΈΠ΅: ΠΡΠΎ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΠ»ΠΎΡΡ Π² Gecko 8.0 (Firefox 8.0 / Thunderbird 8.0 / SeaMonkey 2.5). ΠΠΎ ΡΡΠΎΠ³ΠΎ, Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΡ ΠΎΠ±ΡΠ°Π±Π°ΡΡΠ²Π°Π»ΠΈΡΡ ΠΊΠ°ΠΊ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π±Π΅Π· Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ², Ρ Π²Π½ΡΡΡΠ΅Π½Π½Π΅ΠΉ ΠΏΡΠΎΠΏΠΎΡΡΠΈΠ΅ΠΉ, ΠΈΠ΄Π΅Π½ΡΠΈΡΠ½ΠΎΠΉ ΠΏΡΠΎΠΏΠΎΡΡΠΈΠΈΒ ΠΎΠ±Π»Π°ΡΡΠΈ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΡΠΎΠ½Π°.
Π€ΠΎΠ½ΠΎΠ²ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΡΠ³Π΅Π½Π΅ΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΠΈΠ· ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ -moz-element
(en-US) (ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ) Π² Π½Π°ΡΡΠΎΡΡΠ΅Π΅ Π²ΡΠ΅ΠΌΡ ΠΎΠ±ΡΠ°Π±Π°ΡΡΠ²Π°ΡΡΡΡ ΠΊΠ°ΠΊ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Ρ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΠΈΠ»ΠΈ ΠΊΠ°ΠΊ ΠΎΠ±Π»Π°ΡΡΡ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΡΠΎΠ½Π°, Π΅ΡΠ»ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ ΡΠ²Π»ΡΠ΅ΡΡΡ SVG, Ρ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠ΅ΠΉ Π²Π½ΡΡΡΠ΅Π½Π½Π΅ΠΉ ΠΏΡΠΎΠΏΠΎΡΡΠΈΠ΅ΠΉ.
ΠΡΠ΅Π΄ΡΠΏΡΠ΅ΠΆΠ΄Π΅Π½ΠΈΠ΅: ΠΡΠΎ Π½Π΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ½Π½ΠΎΠ΅ Π² Π½Π°ΡΡΠΎΡΡΠ΅Π΅ Π²ΡΠ΅ΠΌΡ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π·Π°ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ Π² ΡΠΎΠΌ, ΡΡΠΎ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡ ΠΈ ΠΏΡΠΎΠΏΠΎΡΡΠΈΡ Π΄ΠΎΠ»ΠΆΠ½Ρ Π±ΡΡΡ ΡΠ°ΠΊΠΈΠΌΠΈ ΠΆΠ΅ ΠΊΠ°ΠΊ Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π²ΠΎ Π²ΡΠ΅Ρ ΡΠ»ΡΡΠ°ΡΡ .
ΠΠΈΠ·ΡΠ°Π»ΠΈΠ·ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π·Π°ΡΠ΅ΠΌ Π²ΡΡΠΈΡΠ»ΡΠ΅ΡΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΡΠΏΠΎΡΠΎΠ±ΠΎΠΌ:
- ΠΡΠ»ΠΈ ΠΎΠ±Π° Π°ΡΡΠΈΠ±ΡΡΠ° Π²Β
background-size
Β Π·Π°Π΄Π°Π½Ρ ΠΈ ΡΠ°Π·Π»ΠΈΡΠ½Ρ ΠΎΡΒauto
: - Π€ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ Π² ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠ΅.
- ΠΡΠ»ΠΈΒ
background-size
ΡΠΎΠ΄Π΅ΡΠΆΠΈΡΒcontain
Β ΠΈΠ»ΠΈΒcover
: - ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·ΠΈΡΡΠ΅ΡΡΡ Ρ ΡΠΎΡ ΡΠ°Π½Π΅Π½ΠΈΠ΅ΠΌ Π΅Π³ΠΎ Π²Π½ΡΡΡΠ΅Π½Π½Π΅ΠΉ ΠΏΡΠΎΠΏΠΎΡΡΠΈΠΈ ΠΏΡΠΈ Π½Π°ΠΈΠ±ΠΎΠ»ΡΡΠ΅ΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠ΅, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡΡΡ Π²Π½ΡΡΡΠΈ ΠΎΠ±Π»Π°ΡΡΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΡΠΎΠ½Π° ΠΈΠ»ΠΈ ΠΏΠΎΠΊΡΡΠ²Π°Π΅Ρ Π΅Ρ. ΠΡΠ»ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ Π²Π½ΡΡΡΠ΅Π½Π½Π΅ΠΉ ΠΏΡΠΎΠΏΠΎΡΡΠΈΠΈ, ΠΎΠ½ΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ Ρ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ ΠΎΠ±Π»Π°ΡΡΠΈ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΡΠΎΠ½Π°.
- ΠΡΠ»ΠΈΒ
background-size
Β ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ ΠΊΠ°ΠΊΒauto
Β ΠΈΠ»ΠΈΒauto auto
: - ΠΡΠ»ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠΌΠ΅Π΅Ρ ΠΎΠ±Π° Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΡ
ΡΠ°Π·ΠΌΠ΅ΡΠ°, ΠΎΠ½ΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ Ρ ΡΠ°ΠΊΠΈΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ.Β ΠΡΠ»ΠΈ ΠΎΠ½ΠΎ Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΡ
ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΠΈ Π²Π½ΡΡΡΠ΅Π½Π½Π΅ΠΉ ΠΏΡΠΎΠΏΠΎΡΡΠΈΠΈ, ΠΎΠ½ΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ Ρ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ ΠΎΠ±Π»Π°ΡΡΠΈ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΡΠΎΠ½Π°. ΠΡΠ»ΠΈ ΠΎΠ½ΠΎ Π½Π΅Β ΠΈΠΌΠ΅Π΅Ρ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ², Π½ΠΎ ΠΈΠΌΠ΅Π΅Ρ ΠΏΡΠΎΠΏΠΎΡΡΠΈΡ, ΠΎΠ½ΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ ΡΠ°ΠΊ, Π΅ΡΠ»ΠΈ Π±ΡΠ» Π±ΡΠ» Π±Ρ ΡΠΊΠ°Π·Π°Π½Β
.Β ΠΡΠ»ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠΌΠ΅Π΅Ρ ΠΎΠ΄ΠΈΠ½ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΠΈ ΠΏΡΠΎΠΏΠΎΡΡΠΈΡ, ΠΎΠ½ΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ Ρ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ, ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ½Π½ΡΠΌ ΡΡΠΈΠΌ ΠΎΠ΄Π½ΠΈΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ ΠΈ ΠΏΡΠΎΠΏΠΎΡΡΠΈΠ΅ΠΉ.Β ΠΡΠ»ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠΌΠ΅Π΅Ρ ΠΎΠ΄ΠΈΠ½ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠΉ ΡΠ°Π·ΠΌΠ΅Ρ, Π½ΠΎ Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ ΠΏΡΠΎΠΏΠΎΡΡΠΈΡ, ΠΎΠ½ΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ Π²Π½ΡΡΡΠ΅Π½Π½Π΅Π³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΠΈ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠΎΠ½Π°. contain - ΠΡΠ»ΠΈ background-size ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ ΠΎΠ΄ΠΈΠ½ Π°ΡΡΠΈΠ±ΡΡΒ
auto
ΠΈ ΠΎΠ΄ΠΈΠ½ Π½Π΅-auto
: - ΠΡΠ»ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠΌΠ΅Π΅Ρ Π²Π½ΡΡΡΠ΅Π½Π½ΡΡ ΠΏΡΠΎΠΏΠΎΡΡΠΈΡ, ΡΠΎ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·ΠΈΡΡΠΉΡΠ΅ Π΅Π³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠΊΠ°Π·Π°Π½Π½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ, ΠΈ Π²ΡΡΠΈΡΠ»ΠΈΡΠ΅ Π΄ΡΡΠ³ΠΎΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΠΈΠ· ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΠΈ Π²Π½ΡΡΡΠ΅Π½Π½Π΅ΠΉ ΠΏΡΠΎΠΏΠΎΡΡΠΈΠΈ. ΠΡΠ»ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ Π²Π½ΡΡΡΠ΅Π½Π½Π΅ΠΉ ΠΏΡΠΎΠΏΠΎΡΡΠΈΠΈ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΠΊΠ°Π·Π°Π½Π½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°.Β ΠΠ»Ρ Π΄ΡΡΠ³ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠ΅Π΅ Π²Π½ΡΡΡΠ΅Π½Π½Π΅Π΅ ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, Π΅ΡΠ»ΠΈ ΠΎΠ½ΠΎ Π΅ΡΡΡ.Β ΠΡΠ»ΠΈ ΡΠ°ΠΊΠΎΠ³ΠΎ Π²Π½ΡΡΡΠ΅Π½Π½Π΅Π³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° Π½Π΅Ρ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΠΎΠ±Π»Π°ΡΡΠΈ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΡΠΎΠ½Π°.
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΠΎΠ½Π° Π΄Π»Ρ Π²Π΅ΠΊΡΠΎΡΠ½ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, Π² ΠΊΠΎΡΠΎΡΡΡ ΠΎΡΡΡΡΡΡΠ²ΡΡΡ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡ ΠΈΠ»ΠΈ ΠΏΡΠΎΠΏΠΎΡΡΠΈΠΈ, Π΅ΡΡ Π½Π΅ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½ΠΎ Π²ΠΎ Π²ΡΠ΅Ρ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ . ΠΡΠ΄ΡΡΠ΅ ΠΎΡΡΠΎΡΠΎΠΆΠ½Ρ, ΠΏΠΎΠ»Π°Π³Π°ΡΡΡ Π½Π° ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅, ΠΎΠΏΠΈΡΠ°Π½Π½ΠΎΠ΅ Π²ΡΡΠ΅, ΠΈ ΡΠ΅ΡΡΠΈΡΡΠΉΡΠ΅ Π² Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ (Π² ΡΠ°ΡΡΠ½ΠΎΡΡΠΈ, Π²ΠΊΠ»ΡΡΠ°Ρ Π²Π΅ΡΡΠΈΠΈ Firefox 7 ΠΈΠ»ΠΈ Π±ΠΎΠ»Π΅Π΅ ΡΠ°Π½Π½Π΅ΠΉ Π²Π΅ΡΡΠΈΠΈ ΠΈ Firefox 8 ΠΈΠ»ΠΈ Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ·Π΄Π½Π΅ΠΉ Π²Π΅ΡΡΠΈΠΈ), ΡΡΠΎΠ±Ρ ΡΠ±Π΅Π΄ΠΈΡΡΡΡ, ΡΡΠΎ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ ΠΏΡΠΈΠ΅ΠΌΠ»Π΅ΠΌΡ.
Π€ΠΎΡΠΌΠ°Π»ΡΠ½ΡΠΉ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡ
ΠΡΠ»ΠΈ Π²Ρ ΡΠΊΠ°Π·ΡΠ²Π°Π΅ΡΠ΅ Π³ΡΠ°Π΄ΠΈΠ΅Π½Ρ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΡΠΎΠ½Π° ΠΈ ΡΠΊΠ°Π·Π°Π»ΠΈ background-size
, ΠΊΠΎΡΠΎΡΡΠΉ Π±ΡΠ΄Π΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ Π²ΠΌΠ΅ΡΡΠ΅ Ρ Π½ΠΈΠΌ, Π»ΡΡΡΠ΅ Π½Π΅ ΡΠΊΠ°Π·ΡΠ²Π°ΡΡ ΡΠ°Π·ΠΌΠ΅Ρ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ Π΅Π΄ΠΈΠ½ΡΡΠ²Π΅Π½Π½ΡΡ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΡΡ ΡΠΎΡΡΠ°Π²Π½ΡΡ ΡΠ°ΡΡΡ, ΠΈΠ»ΠΈ Π·Π°Π΄Π°ΡΡΡΡ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠΎΠ»ΡΠΊΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΡΠΈΡΠΈΠ½Ρ (Π΄Π»Ρ ΠΏΡΠΈΠΌΠ΅ΡΠ°,
).Β Π Π΅Π½Π΄Π΅ΡΠΈΠ½Π³ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠΎΠ² Π² ΡΠ°ΠΊΠΈΡ
ΡΠ»ΡΡΠ°ΡΡ
ΠΈΠ·ΠΌΠ΅Π½ΠΈΠ»ΡΡ Π² Firefox 8, ΠΈ Π² Π½Π°ΡΡΠΎΡΡΠ΅Π΅ Π²ΡΠ΅ΠΌΡ ΠΎΠ½ ΠΎΠ±ΡΡΠ½ΠΎ Π½Π΅ΡΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌ Π²ΠΎ Π²ΡΠ΅Ρ
Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ
, ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π΅ ΡΠ΅Π°Π»ΠΈΠ·ΡΡΡ ΡΠ΅Π½Π΄Π΅ΡΠΈΠ½Π³ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ ΡΒ CSS3 ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠ΅ΠΉ background-size
ΠΈ ΡΒ CSS3 ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠ΅ΠΉ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠ° Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.
.bar {
width: 50px; height: 100px;
background-image: gradient(...);
background-size: 25px;
background-size: 50%;
background-size: auto 50px;
background-size: auto 50%;
background-size: 25px 50px;
background-size: 50% 50%;
}
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎ Π½Π΅ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ°Π·ΠΌΠ΅Ρ Π² ΠΏΠΈΠΊΡΠ΅Π»ΡΡ
ΠΈΒ ΡΠ°Π·ΠΌΠ΅ΡΒ auto
Ρ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠΎΠΌ, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ Π½Π΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ Π²ΠΎΡΠΏΡΠΎΠΈΠ·Π²Π΅ΡΡΠΈ ΡΠ΅Π½Π΄Π΅ΡΠΈΠ½Π³ Π² Π²Π΅ΡΡΠΈΡΡ
Β Firefox Π΄ΠΎ 8 ΠΈ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ
, Π½Π΅ ΡΠ΅Π°Π»ΠΈΠ·ΡΡΡΠΈΡ
ΡΠ΅Π½Π΄Π΅ΡΠΈΠ½Π³ Firefox 8, Π±Π΅Π· Π·Π½Π°Π½ΠΈΡ ΡΠΎΡΠ½ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΡΠΎΠ½ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΡΠΊΠ°Π·ΡΠ²Π°Π΅ΡΡΡ.
ΠΡΠΎΠ±Π΅Π½Π½ΠΎΡΡΡ | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) | ||
---|---|---|---|---|---|---|---|
ΠΠ°Π·ΠΎΠ²Π°Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° | 1.0-webkit (en-US) [2] | 3.6 (1.9.2)-moz (en-US) [4] | 9.0 [5] | 9.5-o (en-US) with some bugs [1] | 3.0 (522)-webkit (en-US) but from an older CSS3 draft [2] | ||
3.0 | 4.0 (2.0) | 10.0 | 4.1 (532) | ||||
ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° Π·Π½Π°ΡΠ΅Π½ΠΈΠΉcontain ΠΈ cover | 3.0 | 3.6 (1.9.2) | 9.0 [5] | 10.0 | 4.1 (532) | ||
ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° SVG ΡΠΎΠ½ΠΎΠ² | 44. 0 | 8.0 (8.0) | 9.0 | 31.0 | ? |
ΠΡΠΎΠ±Π΅Π½Π½ΠΎΡΡΡ | Android | Firefox Mobile (Gecko) | Windows Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
ΠΠ°Π·ΠΎΠ²Π°Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° | (ΠΠ°)-webkit (en-US) 2.3 | 1.0-moz (en-US) 4.0 | ? | ? | 5.1 (maybe earlier) |
ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° SVG ΡΠΎΠ½ΠΎΠ² | ? | 8.0 (8.0) | ? | ? | ? |
- [1] Π Opera 9.5 Π²ΡΡΠΈΡΠ»Π΅Π½ΠΈΠ΅ ΠΎΠ±Π»Π°ΡΡΠΈ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΡΠΎΠ½Π° Π½Π΅ΠΊΠΎΡΡΠ΅ΠΊΡΠ½ΠΎ Π΄Π»Ρ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΡ ΡΠΎΠ½ΠΎΠ².Β Opera 9.5 ΡΠ°ΠΊΠΆΠ΅ ΠΈΠ½ΡΠ΅ΡΠΏΡΠ΅ΡΠΈΡΡΠ΅Ρ ΡΠΎΡΠΌΡ Ρ Π΄Π²ΡΠΌΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡΠΌΠΈ ΠΊΠ°ΠΊ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΠΉ ΠΌΠ°ΡΡΡΠ°Π±Π½ΡΠΉ ΠΊΠΎΡΡΡΠΈΡΠΈΠ΅Π½Ρ ΠΈ, ΠΏΠΎ-Π²ΠΈΠ΄ΠΈΠΌΠΎΠΌΡ, Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ΅ ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΎΡΡΠ΅ΡΠ΅Π½ΠΈΡ. ΠΡΠΎ Π±ΡΠ»ΠΎ ΠΈΡΠΏΡΠ°Π²Π»Π΅Π½ΠΎ Π² Opera 10.
- [2] ΠΡΠ°ΡΠ·Π΅ΡΡ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ WebKit ΠΈΠ·Π½Π°ΡΠ°Π»ΡΠ½ΠΎ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π»ΠΈ Π±ΠΎΠ»Π΅Π΅ ΡΡΠ°ΡΡΠΉ ΡΠ΅ΡΠ½ΠΎΠ²ΠΈΠΊΒ CSS3
background-size
, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΏΡΠΎΠΏΡΡΠ΅Π½Π½ΠΎΠ΅ Π²ΡΠΎΡΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ°ΡΡΠΌΠ°ΡΡΠΈΠ²Π°Π΅ΡΡΡ ΠΊΠ°ΠΊ Π΄ΡΠ±Π»ΠΈΡΡΡΡΠ΅Π΅ ΠΏΠ΅ΡΠ²ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅; ΡΡΠΎΡ ΡΠ΅ΡΠ½ΠΎΠ²ΠΈΠΊ Π½Π΅ Π²ΠΊΠ»ΡΡΠ°Π΅Ρ Π² ΡΠ΅Π±Ρ ΠΊΠ»ΡΡΠ΅Π²ΡΠ΅ ΡΠ»ΠΎΠ²Π°contain
ΠΈΠ»ΠΈcover
. - [3] Konqueror 3.5.4 ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ
-khtml-background-size
. - [4] Π₯ΠΎΡΡ ΡΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΡΠ²Π»ΡΠ΅ΡΡΡ Π½ΠΎΠ²ΡΠΌ Π² Gecko 1.9.2 (Firefox 3.6), Π² Firefox 3.5 ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΡΠ°ΡΡΡΠ½ΡΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠ²Π΅ΡΡ
ΡΠΎΠ½Π°, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ
-moz-border-image
(en-US)..foo { background-image: url(bg-image.png); -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; -moz-border-image: url(bg-image.png) 0; }
- [5] Π₯ΠΎΡΡ Internet Explorer 8 Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅Β
background-size
, Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π½Π΅ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΠΎΠ³ΠΎ Π°ΡΡΠΈΠ±ΡΡΠ°Β-ms-filter
Β Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ Π²ΠΎΡΠΏΡΠΎΠΈΠ·Π²Π΅ΡΡΠΈ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ Π΅Π³ΠΎ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ:
ΠΡΠΎ ΠΈΠΌΠΈΡΠΈΡΡΠ΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅-ms-filter: "progid:DXImageTransform. Microsoft.AlphaImageLoader(src='path_relative_to_the_HTML_file', sizingMethod='scale')";
cover
.
ΠΠ΅Π»Π°Π΅ΠΌ Π²ΠΈΠ΄Π΅ΠΎ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΡΠΎΠ½Π° ΡΠ°ΠΉΡΠ° Ρ ΠΏΠΎΠΌΠΎΡΡΡ HTML
Π‘Π΅ΡΡΠΆΠ° Π‘ΡΡΠΎΠ΅ΠΆΠΊΠΈΠ½ΠΠΎΠΏΠΈΡΠ°ΠΉΡΠ΅Ρ
Π ΡΠ΅ΠΊΡΡΠ΅ΠΉ ΡΡΠ°ΡΡΠ΅ ΠΌΡ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡΠΈΠΌ ΠΎ ΡΠΎΠΌ, ΠΊΠ°ΠΊ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ Π²ΠΈΠ΄Π΅ΠΎ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΡΠΎΠ½Π° Π΄Π»Ρ ΡΠ°ΠΉΡΠ° (video background). ΠΠΈΠ΄Π΅ΠΎ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΡΠΎΠ½Π° ΡΡΡΠ°Π½ΠΈΡΡ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠΎΠ»ΡΠΊΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ HTML5. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ ΠΌΡ:
- ΠΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ ΡΠ΅Π³ video Π½Π° HTML-ΡΡΡΠ°Π½ΠΈΡΠ΅;
- Π‘ ΠΏΠΎΠΌΠΎΡΡΡ CSS-ΡΡΠΈΠ»Π΅ΠΉ ΡΠ°ΡΡΡΠ½Π΅ΠΌ Π²ΠΈΠ΄Π΅ΠΎ Π½Π° Π²Π΅ΡΡ ΡΠΊΡΠ°Π½ ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠ³ΠΎ ΡΠΎΠ½Π°.
Π‘ΠΎΠ·Π΄Π°Π΅ΠΌ Π²ΠΈΠ΄Π΅ΠΎΠΏΠ»Π΅Π΅Ρ Ρ ΠΏΠΎΠΌΠΎΡΡΡ HTML
Π ΡΠΎΠΌ, ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ Π²ΠΈΠ΄Π΅ΠΎΠΏΠ»Π΅Π΅Ρ Ρ ΡΠ΅Π±Ρ Π½Π° ΡΠ°ΠΉΡΠ΅ Ρ ΠΏΠΎΠΌΠΎΡΡΡ HTML5 ΠΌΡ ΡΠΆΠ΅ Π³ΠΎΠ²ΠΎΡΠΈΠ»ΠΈ Π² ΡΡΠ°ΡΡΠ΅ ΠΡΠΎΠΈΠ³ΡΡΠ²Π°ΡΠ΅Π»Ρ Π²ΠΈΠ΄Π΅ΠΎ HTML5. Π ΡΠΎΠΉ ΠΆΠ΅ ΡΡΠ°ΡΡΠ΅ ΠΌΡ ΠΎΠ±ΡΡΠΆΠ΄Π°Π»ΠΈ Π²ΠΎΠΏΡΠΎΡ ΠΊΡΠΎΡΡΠ±ΡΠ°ΡΠ·Π΅ΡΠ½ΠΎΡΡΠΈ, Π²ΡΠΏΠΎΠΌΠ½ΠΈΠΌ ΠΎΡΠ½ΠΎΠ²Π½ΡΡ ΠΈΠ΄Π΅Ρ:
ΠΠ΅ Π²ΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ Π²ΠΎΡΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΡΡ ΠΊΠ°ΠΊΠΎΠΉ-ΡΠΎ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΡΠΉ Π²ΠΈΠ΄Π΅ΠΎ-ΡΠΎΡΠΌΠ°Ρ, ΠΏΠΎΡΡΠΎΠΌΡ Π½ΡΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π²ΠΈΠ΄Π΅ΠΎ-ΠΊΠΎΠ΄Π΅ΠΊΠΎΠ². ΠΡΠ°ΡΠ·Π΅Ρ ΠΊΠ»ΠΈΠ΅Π½ΡΠ° Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΠΌΡΠΉ ΡΠΎΡΠΌΠ°Ρ ΠΈΠ· ΠΏΡΠ΅Π΄Π»ΠΎΠΆΠ΅Π½Π½ΡΡ ΠΈ Π²ΠΎΡΠΏΡΠΎΠΈΠ·Π²Π΅Π΄Π΅Ρ Π½ΡΠΆΠ½ΠΎΠ΅ Π²ΠΈΠ΄Π΅ΠΎ.
ΠΠΎΡΡΠΎΠΌΡ, ΡΠΎΠ·Π΄Π°Π΄ΠΈΠΌ Π²ΠΈΠ΄Π΅ΠΎ Π΄Π»Ρ ΡΠΎΠ½Π° ΡΠ°ΠΉΡΠ° Π² Π΄Π²ΡΡ ΡΠΎΡΠΌΠ°ΡΠ°Ρ : H.264 ΠΈ WebM. ΠΡΠΎΠ³ΠΎ Π±ΡΠ΄Π΅Ρ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ, ΡΡΠΎΠ±Ρ ΠΎΡ Π²Π°ΡΠΈΡΡ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΉ ΡΡΠ΄ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ² (Google Chrome, Mozilla Firefox, Safari, Opera, Internet Explorer). ΠΠΎΠ»ΡΡΠ΅Π½Π½ΠΎΠ΅ Π²ΠΈΠ΄Π΅ΠΎ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΡΡΡ ΠΎΠ±Π΅ΡΠ½ΡΡΡ Π² ΡΠ΅Π³ div Π΄Π»Ρ ΠΏΠΎΡΠ»Π΅Π΄ΡΡΡΠ΅Π³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ. ΠΠΎΠ»ΡΡΠΈΠΌ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΠΊΠΎΠ΄ HTML:
<div>
<video loop="loop" autoplay="autoplay" preload="auto">
<source src="nubex.mp4"></source>
<source src="nubex.webm" type="video/webm"></source>
</video>
</div>
ΠΠ»Π°Π³ΠΎΠ΄Π°ΡΡ Π°ΡΡΠΈΠ±ΡΡΡ autoplay Π²ΠΈΠ΄Π΅ΠΎ Π±ΡΠ΄Π΅Ρ ΠΏΡΠΎΠΈΠ³ΡΡΠ²Π°ΡΡΡΡ ΡΡΠ°Π·Ρ ΠΏΠΎΡΠ»Π΅ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΡΡΡΠ°Π½ΠΈΡΡ, ΠΊΠΎΠ³Π΄Π° ΡΠ΅ΡΠΈΡ Π±ΡΠ°ΡΠ·Π΅Ρ (ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ Π°ΡΡΠΈΠ±ΡΡ preload ΡΡΠΎΠΈΡ Π½Π° Π·Π½Π°ΡΠ΅Π½ΠΈΠΈ auto).
ΠΠ°ΡΡΡΠ°ΠΈΠ²Π°Π΅ΠΌ ΡΡΠΈΠ»ΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS
Π Π°ΡΡΠΌΠΎΡΡΠΈΠΌ ΡΠ΅ΠΏΠ΅ΡΡ CSS-ΠΊΠΎΠ΄ Π΄Π»Ρ Π²ΠΈΠ΄Π΅ΠΎ.
ΠΠΎΠ»Π½ΡΠΉ ΠΊΠΎΠ΄ ΡΡΡΠ°Π½ΠΈΡΡ Ρ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Π½ΡΠΌ Π²ΠΈΠ΄Π΅ΠΎ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΡΠΎΠ½Π° ΡΠ°ΠΉΡΠ°:
<html>
<head>
<title>ΠΠΈΠ΄Π΅ΠΎ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΡΠΎΠ½Π° ΡΠ°ΠΉΡΠ° - ΠΡΠ±Π΅ΠΊΡ</title>
<style>
.overlay {width: 100%; height:100%; display:block;}
#nubexDiv {
top: 0; bottom: 0; left: 0; right: 0;
position: fixed;
overflow: hidden;
}
#nubexVideo {
top: 0; left: 0;
position: absolute;
width: auto; height: auto;
min-width: 100%;
min-height: 100%;
}
</style>
</head>
<body>
<div>
<video loop="loop" autoplay="autoplay" preload="auto">
<source src="nubex.mp4"></source>
<source src="nubex.webm" type="video/webm"></source>
</video>
</div>
</body>
</html>
ΠΠ΄Π΅ΡΡ ΠΌΡ, ΠΏΠΎ-ΡΡΡΠΈ, Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΠΌ Π±Π»ΠΎΠΊ Ρ Π²ΠΈΠ΄Π΅ΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ HTML, ΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°Π΅ΠΌ Π΅Π³ΠΎ Π½Π° Π²Π΅ΡΡ ΡΠΊΡΠ°Π½.
Π‘ΠΌΠΎΡΡΠΈΡΠ΅ ΡΠ°ΠΊΠΆΠ΅:
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ΅ Π²ΠΈΠ΄Π΅ΠΎ Π΄Π»Ρ ΡΠΎΠ½Π° Π±Π»ΠΎΠΊΠ°
ΠΡΠ΅Π½Ρ ΡΠ΄ΠΎΠ±Π½ΡΠΉ ΠΈ ΠΏΡΠΎΡΡΠΎΠΉ Π² ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΠΏΠ»Π°Π³ΠΈΠ½ jQuery Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ Π²ΠΈΠ΄Π΅ΠΎΡΠΎΠ½Π° Ρ Π±Π»ΠΎΠΊΠ°. Π‘ Π½ΠΈΠΌ Π½Π΅ ΡΡΠ΅Π±ΡΠ΅ΡΡΡ Π½Π°Π³ΡΠΎΠΌΠΎΠΆΠ΄Π΅Π½ΠΈΡ Π½ΠΈ css Π½ΠΈ html ΠΊΠΎΠ΄ΠΎΠ², Π²ΡΡ ΠΊΠΎΠ½ΡΡΡΡΠΊΡΠΈΡ Π±Π»ΠΎΠΊΠ° Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΠΏΡΠΈΠΌΠ΅ΡΠ½ΠΎ ΡΠ°ΠΊ: <div data-vide-bg=»path/video»></div>
ΠΠΎΠ΄ΠΊΠ»ΡΡΠ°Π΅ΠΌ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΡ jQuery ΠΈ ΠΏΠ»Π°Π³ΠΈΠ½ jquery.vide.js ΠΈ ΠΏΡΠΎΡΡΠΎ Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΠΌ Π°ΡΡΠΈΠ±ΡΡ data-vide-bg=»path/video» ΠΊ Π½ΡΠΆΠ½ΠΎΠΌΡ Π±Π»ΠΎΠΊΡ.
ΠΠ΄Π΅: path — ΠΏΠ°ΠΏΠΊΠ° Ρ ΡΠ°ΠΉΠ»Π°ΠΌΠΈ video.jpg, video.mp4, video.ogv ΠΈ video.webm
ΠΡΠΈΠΌΠ΅Ρ:
<div data-vide-bg=»/demo/vide/video»> <div> ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ΅ Π²ΠΈΠ΄Π΅ΠΎ Π΄Π»Ρ ΡΠΎΠ½Π° </div> </div>
<div data-vide-bg=»/demo/vide/video»> Β Β Β Β <div> Β Β Β Β Β Β Β Β ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ΅ Π²ΠΈΠ΄Π΅ΠΎ Π΄Π»Ρ ΡΠΎΠ½Π° Β Β Β Β </div> </div> |
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ΅ Π²ΠΈΠ΄Π΅ΠΎ Π΄Π»Ρ ΡΠΎΠ½Π°
Π’Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π°ΡΡΠΈΠ±ΡΡ data-vide-options Π΄Π»Ρ Π½Π°ΡΡΡΠΎΠ΅ΠΊ Π²ΠΈΠ΄Π΅ΠΎ. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΠΎΠ½ΠΈ Π²ΡΠ³Π»ΡΠ΄ΡΡ ΡΠ°ΠΊ:
volume: 1 | Π³ΡΠΎΠΌΠΊΠΎΡΡΡ (ΠΎΡ 0 Π΄ΠΎ 1) |
playbackRate: 1 | ΡΠΊΠΎΡΠΎΡΡΡ Π²ΠΈΠ΄Π΅ΠΎ (ΠΌΠ΅Π΄Π»Π΅Π½Π½Π΅Π΅ Π±ΡΡΡΡΠ΅Π΅) |
muted: true | ΠΎΡΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ Π·Π²ΡΠΊΠ° (true, false) |
loop: true | ΠΏΠΎΠ²ΡΠΎΡ (true, false) |
autoplay: true | Π°Π²ΡΠΎΠΏΡΠΎΠΈΠ·Π²Π΅Π΄Π΅Π½ΠΈΠ΅ (true, false) |
position: ‘50% 50%’ | ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π²ΠΈΠ΄Π΅ΠΎ, ΡΠ°ΠΊΠΆΠ΅ ΠΊΠ°ΠΊ background-position Π΄Π»Ρ CSS |
posterType: ‘detect’ | Π’ΠΈΠΏ ΠΏΠΎΡΡΠ΅ΡΠ° («detect» β Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ; «none» β Π±Π΅Π· ΠΏΠΎΡΡΠ΅ΡΠ°; «jpg», «png», «gif»,… — ΡΠΎΡΠ½ΠΎΠ΅ ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΈΠ΅. |
resizing: true | ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π²ΠΈΠ΄Π΅ΠΎ ΠΏΠΎΠ΄ ΡΠ°Π·ΠΌΠ΅ΡΡ Π±Π»ΠΎΠΊΠ° (true, false) |
bgColor: ‘transparent’ | ΡΠ²Π΅Ρ Π΄Π»Ρ ΡΠΎΠ½Π° Π±Π»ΠΎΠΊΠ° Ρ Π²ΠΈΠ΄Π΅ΠΎ |
className: ‘ ‘ | ΠΊΠ»Π°ΡΡ Π΄Π»Ρ Π±Π»ΠΎΠΊΠ° Ρ Π²ΠΈΠ΄Π΅ΠΎ |
ΠΡΠΈΠΌΠ΅Ρ:
<div data-vide-bg=»/demo/vide/video» data-vide-options=»playbackRate: 0.1, position: ‘0 100%'»> <div> ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ΅ Π²ΠΈΠ΄Π΅ΠΎ Π΄Π»Ρ ΡΠΎΠ½Π° </div> </div>
<div data-vide-bg=»/demo/vide/video» data-vide-options=»playbackRate: 0.1, position: ‘0 100%'»> Β Β Β Β <div> Β Β Β Β Β Β Β Β ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ΅ Π²ΠΈΠ΄Π΅ΠΎ Π΄Π»Ρ ΡΠΎΠ½Π° Β Β Β Β </div> </div> |
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ΅ Π²ΠΈΠ΄Π΅ΠΎ Π΄Π»Ρ ΡΠΎΠ½Π°
ΠΠ»Ρ ΡΠΎΠ³ΠΎ ΡΡΠΎΠ±Ρ ΡΠ΄Π΅Π»Π°ΡΡ Π²ΠΈΠ΄Π΅ΠΎΡΠΎΠ½ Π½Π° Π²Π΅ΡΡ ΡΠΊΡΠ°Π½, Π½ΡΠΆΠ½ΠΎ ΠΏΡΠΎΠΏΠΈΡΠ°ΡΡ Π°ΡΡΠΈΠ±ΡΡ data-vide-bg ΠΊ ΡΠ΅Π³Ρ body ΠΈ Π·Π°Π΄Π°ΡΡ Π΅ΠΌΡ 100% Π²ΡΡΠΎΡΡ ΠΈ ΡΠΈΡΠΈΠ½Ρ:
ΠΡΠΈΠΌΠ΅Ρ:
<!doctype html> <html> <title>ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π²ΠΈΠ΄Π΅ΠΎΡΠΎΠ½ Π²ΠΎ Π²Π΅ΡΡ ΡΠΊΡΠ°Π½ / Atuin</title> <meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″ /> <script src=»http://code. jquery.com/jquery-1.12.4.min.js» type=»text/javascript»></script> <script src=»http://atuin.ru/demo/vide/jquery.vide.js»></script> <style> html, body{ height:100%; width:100%; margin:0; display:table; } div { font-size:42px; text-align:center; vertical-align:middle; font-family:verdana; color:#BFE2FF; display:table-cell; } </style> <body data-vide-bg=»/demo/vide/video»> <div>ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π²ΠΈΠ΄Π΅ΠΎΡΠΎΠ½ Π²ΠΎ Π²Π΅ΡΡ ΡΠΊΡΠ°Π½</div> </body> </html>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!doctype html> <html> Β Β Β Β <title>ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π²ΠΈΠ΄Π΅ΠΎΡΠΎΠ½ Π²ΠΎ Π²Π΅ΡΡ ΡΠΊΡΠ°Π½ / Atuin</title> Β Β Β Β <meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″ /> Β Β Β Β <script src=»http://code.jquery.com/jquery-1.12.4.min.js» type=»text/javascript»></script>Β Β Β Β Β Β Β Β <script src=»http://atuin.ru/demo/vide/jquery.vide.js»></script>Β Β Β Β Β Β <style> Β Β Β Β Β Β Β Β html, body{ Β Β Β Β Β Β Β Β height:100%; Β Β Β Β Β Β Β Β width:100%; Β Β Β Β Β Β Β Β margin:0; Β Β Β Β Β Β Β Β display:table; Β Β Β Β Β Β Β Β }Β Β Β Β Β Β Β Β Β Β div { Β Β Β Β Β Β Β Β font-size:42px; Β Β Β Β Β Β Β Β text-align:center; Β Β Β Β Β Β Β Β vertical-align:middle;Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β font-family:verdana; Β Β Β Β Β Β Β Β color:#BFE2FF; Β Β Β Β Β Β Β Β display:table-cell; Β Β Β Β Β Β Β Β } Β Β Β Β </style>Β Β Β Β Β Β Β Β Β Β Β Β <body data-vide-bg=»/demo/vide/video»> Β Β Β Β Β Β Β Β <div>ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π²ΠΈΠ΄Π΅ΠΎΡΠΎΠ½ Π²ΠΎ Π²Π΅ΡΡ ΡΠΊΡΠ°Π½</div> Β Β Β Β </body> </html>Β Β Β Β |
Π€Π°ΠΉΠ»Ρ ΠΈ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎΠ΅ ΠΎΠΏΠΈΡΠ°Π½ΠΈΠ΅ ΡΡΡ
Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΏΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½ΠΎΠ³ΠΎ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ CSS
ΠΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½ΠΎΠ΅ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΎΡΠ΅Π½Ρ Π½ΡΠΆΠ½ΠΎ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΏΠΎΡΡΡΠΎΠ»ΠΈΠΎΒ ΠΈΠ»ΠΈ ΡΠ°ΠΉΡΠ° Ρ ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΡΠΌΠΈ. ΠΠ±ΡΡΠ½ΠΎ Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΠΏΠ»Π°Π³ΠΈΠ½ jQuery, ΠΊΠΎΡΠΎΡΡΠΉ ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅Ρ ΡΠ°Π·ΠΌΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π½Π° ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΡΡΠΈΠΉ Π΄Π»Ρ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ° ΠΈ ΠΏΡΠΎΠ²ΠΎΠ΄ΠΈΡ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΡΠ΅ Π²ΡΡΠΈΡΠ»Π΅Π½ΠΈΡ, ΡΡΠΎΠ±Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΎΠ²Π°Π»ΠΎ ΡΡΡΠ°Π½ΠΈΡΠ΅ ΠΏΠΎ ΡΠΈΡΠΈΠ½Π΅ ΠΈΒ Π²ΡΡΠΎΡΠ΅.Β
Β
Β
ΠΠΎ Π·Π½Π°Π΅ΡΠ΅Β Π»ΠΈ ΠΡ, ΡΡΠΎ Π΅ΡΠ»ΠΈ ΠΠ°ΠΌ Π½Π΅ Π½ΡΠΆΠ½ΠΎ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ ΠΎΡΠ΅Π½Ρ ΡΡΠ°ΡΡΠ΅ Π²Π΅ΡΡΠΈΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ², ΡΠ°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ Internet Explorer Π²Π΅ΡΡΠΈΠΈ 8 ΠΈ Π½ΠΈΠΆΠ΅, ΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°ΡΡ ΡΡΠΎΡ Π·Π°ΠΌΠ΅ΡΠ°ΡΠ΅Π»ΡΠ½ΡΠΉ ΡΡΡΠ΅ΠΊΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΡΡΠΎΠΊΠΈ ΠΊΠΎΠ΄Π° CSS? Π ΡΠ΅ΠΉΡΠ°Ρ ΠΌΡ ΡΠ°ΡΡΠΊΠ°ΠΆΠ΅ΠΌ, ΠΊΠ°ΠΊ ΠΈΠΌΠ΅Π½Π½ΠΎ ΡΡΠΎ ΠΌΠΎΠΆΠ½ΠΎΒ ΡΠ΄Π΅Π»Π°ΡΡ.
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ ΡΠ°Π±ΠΎΡΡΒ βΒ Π‘ΠΊΠ°ΡΠ°ΡΡ ΠΈΡΡ ΠΎΠ΄Π½ΡΠΉΒ ΠΊΠΎΠ΄Β
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°Β ΡΠΎΠ½Π°Β
Π‘ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΠΎΠ½Π° ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Π΄Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΠΊΠ°ΠΊΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±ΡΡΡ Π΅Π³ΠΎ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΡΠ»Π΅Π΄ΡΡΡΠ°ΡΒ Π·Π°ΠΏΠΈΡΡ:
#elem{ background:url('kermit.jpg') center center no-repeat; background-size:100px 150px; }
ΠΠΎ ΡΡΠΎΒ Π΅ΡΠ΅ Π±ΠΎΠ»Π΅Π΅ ΡΠ΄ΠΎΠ±Π½ΠΎ, ΡΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ Π΄Π²Π° Π²ΠΎΠ»ΡΠ΅Π±Π½ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡΒ β contain ΠΈΒ cover:
- ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ contain (ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΡ) ΠΌΠ΅Π½ΡΠ΅Ρ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠ°ΠΊ, ΡΡΠΎΠ±Ρ ΠΎΠ½ΠΎ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΠΏΠΎΠΌΠ΅ΡΡΠΈΠ»ΠΎΡΡ Π²Β ΡΠ»Π΅ΠΌΠ΅Π½Ρ;
- ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ cover (Π½Π°ΠΊΡΡΠ²Π°ΡΡ) Π±ΠΎΠ»Π΅Π΅ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎ β ΠΎΠ½ΠΎ Π΄Π΅Π»Π°Π΅Ρ ΡΠ°ΠΊ, ΡΡΠΎΠ±Ρ Π²Π΅ΡΡ ΡΠΎΠ½ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π±ΡΠ» Π½Π°ΠΊΡΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ. Π Π°Π·ΠΌΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΌΠ΅Π½ΡΠ΅ΡΡΡ Π½Π° Π½Π°ΠΈΠΌΠ΅Π½ΡΡΠ΅ΠΉ, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡΠΈΠΉ Π½Π°ΠΊΡΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ. ΠΠΎΡΠΌΠΎΡΡΠΈΡΠ΅ Π½Π° ΠΏΡΠΈΠΌΠ΅Ρ Π½ΠΈΠΆΠ΅. ΠΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π±ΡΠ΄Π΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΎ Π΄Π»Ρ ΠΏΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½ΠΎΠ³ΠΎ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎΒ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.
ΠΠ½Π°ΡΠ΅Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΠΎΠ½Π° contain ΠΈΒ cover
Π’Π°ΠΊ ΡΡΠΎ Π²ΡΠ΅, ΡΡΠΎΒ Π½Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ,Β β Π·Π°Π΄Π°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΌΡ Ρ ΠΎΡΠΈΠΌ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°ΡΡ Π½Π° ΠΏΠΎΠ»Π½ΡΠΉ ΡΠΊΡΠ°Π½, ΡΠΎΠ½ΠΎΠ²ΡΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°Β html:
html{ /* ΠΡΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π±ΡΠ΄Π΅Ρ Π²ΡΠ²ΠΎΠ΄ΠΈΡΡΡΡ Π½Π° ΠΏΠΎΠ»Π½ΡΠΉ ΡΠΊΡΠ°Π½ */ background:url('background.jpg') no-repeat center center; /* Π§ΡΠΎΠ±Ρ Π³Π°ΡΠ°Π½ΡΠΈΡΠΎΠ²Π°ΡΡ, ΡΡΠΎ ΡΠ»Π΅ΠΌΠ΅Π½Ρ html Π²ΡΠ΅Π³Π΄Π° Π±ΡΠ΄Π΅Ρ ΠΏΠΎΠ»Π½ΠΎΠΉ Π²ΡΡΠΎΡΡ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ° */ min-height:100%; /* ΠΠΎΠ»ΡΠ΅Π±ΡΡΠ²ΠΎ */ background-size:cover; } body{ /* ΠΠ±Ρ ΠΎΠ΄Π½ΠΎΠΉ ΠΏΡΡΡ Π΄Π»Ρ Π½Π΅ΠΊΠΎΡΠΎΡΡΡ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ² */ min-height:100%; }
Π ΡΠ΅ΠΏΠ΅ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π²ΡΠ²ΠΎΠ΄ΠΈΡΡΡ Π½Π° ΠΏΠΎΠ»Π½ΡΠΉ ΡΠΊΡΠ°Π½. ΠΠ½ΠΎ Π±ΡΠ΄Π΅Ρ ΠΌΠ΅Π½ΡΡΡΡΡ Π² ΡΠ°Π·ΠΌΠ΅ΡΠ°Ρ ΠΏΡΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΠΎΠΊΠ½Π°Β ΠΈΠ»ΠΈ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠ³ΠΎ ΡΡΡΡΠΎΠΉΡΡΠ²Π°. ΠΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΡΡ Π²ΡΠ΅ΠΌΠΈ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠΌΠΈ ΠΈ ΠΌΠ½ΠΎΠ³ΠΈΠΌΠΈ ΡΡΡΠ°ΡΠ΅Π²ΡΠΈΠΌΠΈ Π²Π΅ΡΡΠΈΡΠΌΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ², ΠΊΠ°ΠΊ Π½Π°ΡΡΠΎΠ»ΡΠ½ΡΡ , ΡΠ°ΠΊ ΠΈ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ , Π΄Π°ΠΆΠ΅ ΡΠ°ΠΊΠΈΡ , ΠΊΠ°ΠΊ Internet Explorer, Π½Π°ΡΠΈΠ½Π°Ρ ΠΎΡ Π²Π΅ΡΡΠΈΠΈΒ 9.
ΠΠ»Π°Π³ΠΎΠ΄Π°ΡΠΈΠΌ Zanthia Π·Π° Π·Π°ΠΌΠ΅ΡΠ°ΡΠ΅Π»ΡΠ½ΠΎΠ΅Β ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅.
ΠΠ²ΡΠΎΡ ΡΡΠΎΠΊΠ° MartinΒ Angelov
ΠΠ΅ΡΠ΅Π²ΠΎΠ΄Β βΒ ΠΠ΅ΠΆΡΡΠΊΠ°
Π‘ΠΌΠΎΡΡΠΈΡΠ΅Β ΡΠ°ΠΊΠΆΠ΅:
Π€ΠΎΠ½
Π Π΄Π°Π½Π½ΠΎΠΌ ΡΠ°Π·Π΄Π΅Π»Π΅ ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Π΄Π°Π²Π°ΡΡ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅ ΡΠ΅Π΄Π°ΠΊΡΠΈΡΡΠ΅ΠΌΠΎΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ.
Π ΠΏΠΎΠ»Π΅ Π¦Π²Π΅Ρ ΡΠΎΠ½Π° —Β ΠΌΠΎΠΆΠ½ΠΎ Π²ΡΠ±ΡΠ°ΡΡ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΠ΅ ΡΠ²Π΅ΡΠΎΠ²ΠΎΠ΅ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅ ΡΠΎΠ½Π° Π²ΡΠ±ΡΠ°Π½Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
ΠΠ»Ρ Π΅Π³ΠΎ ΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π½Π°ΠΆΠΌΠΈΡΠ΅ Π»Π΅Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ ΠΌΡΡΠΈ ΠΏΠΎ ΠΊΠ½ΠΎΠΏΠΊΠ΅ Β«ΠΠ±Π·ΠΎΡΒ» .Β Π ΠΎΡΠΊΡΡΠ²ΡΠ΅ΠΌΡΡ ΠΎΠΊΠ½Π΅ Π¦Π²Π΅ΡΠ° Π²ΡΠ±Π΅ΡΠΈΡΠ΅Β Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΡΠ΄ΠΎΠ±Π½ΡΠΉ Π΄Π»Ρ ΠΠ°Ρ Π²Π°ΡΠΈΠ°Π½Ρ ΠΈΠ· ΠΏΡΠ΅Π΄Π»ΠΎΠΆΠ΅Π½Π½ΡΡ .
Π ΡΠ°Π·Π΄Π΅Π»Π΅ Π‘ΠΏΠ΅ΠΊΡΡ Π΅ΡΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ Π² ΠΎΠ±ΡΠ΅ΠΉ ΠΏΠ°Π»ΠΈΡΡΠ΅ ΡΠ²Π΅ΡΠΎΠ² ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° Π²ΡΠ±ΡΠ°ΡΡ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΡΠΉ ΠΎΡΡΠ΅Π½ΠΎΠΊ ΠΈ , Π΄Π°Π»Π΅Π΅ Π² ΡΠΊΠ°Π»Π΅, Π²ΡΠ²ΠΎΠ΄ΠΈΠΌΠΎΠΉ ΡΠΏΡΠ°Π²Π° Π±ΠΎΠ»Π΅Π΅ ΡΠΎΡΠ½ΠΎ ΠΏΠΎΠ΄ΠΎΠ±ΡΠ°ΡΡ Π½ΡΠΆΠ½ΡΠΉ ΡΠ²Π΅Ρ.Β ΠΠΎΠ΄ Π²ΡΠ±ΡΠ°Π½Π½ΠΎΠ³ΠΎ ΡΠ²Π΅ΡΠ° ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ Π²Π½ΠΈΠ·Ρ ΠΎΠΊΠ½Π°. Π’Π°ΠΊ ΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π²Π²Π΅ΡΡΠΈ ΡΠ°ΠΌΠΎΡΡΠΎΡΡΠ΅Π»ΡΠ½ΠΎ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΡΠΉ ΠΊΠΎΠ΄ ΡΠ²Π΅ΡΠ°Β ΡΠ΅ΡΡΠ½Π°Π΄ΡΠ°ΡΠ΅ΡΠΈΡΠ½ΡΠΌ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ ΡΠ²Π΅ΡΠ° RGB, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ: #ff0000 (ΠΊΡΠ°ΡΠ½ΡΠΉ).
ΠΠΎΠ³Π΄Π° Π²ΠΎΠ·Π½ΠΈΠΊΠ°Π΅Ρ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎΡΡΡ Π² ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΠΊΠ°ΠΊΠΎΠ³ΠΎ Π»ΠΈΠ±ΠΎ «Π½Π΅ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΠΎΠ³ΠΎ» ΡΠ²Π΅ΡΠ° Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ Π΅Π³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ RGB, (Red, Green , Blue )ΡΠΎΡΠ΅ΡΠ°Π½ΠΈΠ΅ ΠΊΡΠ°ΡΠ½ΠΎΠ³ΠΎ, Π·Π΅Π»Π΅Π½ΠΎΠ³ΠΎ ΠΈ ΡΠΈΠ½Π΅Π³ΠΎ ΡΠ²Π΅ΡΠ° Π² ΡΠΈΡΠ»ΠΎΠ²ΠΎΠΌ Π²ΡΡΠ°ΠΆΠ΅Π½ΠΈΠΈ. ΠΠ°ΠΆΠ΄ΡΠΉ ΠΎΡΡΠ΅Π½ΠΎΠΊ ΠΈΠ· ΠΎΡΠ½ΠΎΠ²Π½ΡΡ
ΡΠ²Π΅ΡΠΎΠ² Π² ΡΠΈΡΡΠ΅ΠΌΠ΅ RGBΠΌΠΎΠΆΠ΅Ρ Π²ΡΡΠ°ΠΆΠ°ΡΡΡΡ Π² ΡΠΈΡΠ»Π΅ ΠΎΡ0Π΄ΠΎ255.
ΠΠΎ ΠΎΠΊΠΎΠ½ΡΠ°Π½ΠΈΠΈ Π²ΡΠ±ΠΎΡΠ° ΡΠ²Π΅ΡΠ° Π½ΡΠΆΠ½ΠΎ Π½Π°ΠΆΠ°ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ «ΠΡΠΈΠΌΠ΅Π½ΠΈΡΡ«.
Π ΡΠ°Π·Π΄Π΅Π»Π΅ ΠΠ°Π»ΠΈΡΡΠ° Π΅ΡΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΠΏΠΎΠ΄ΠΎΠ±ΡΠ°ΡΡ ΡΠ²Π΅Ρ ΠΈΠ· ΠΏΡΠ΅Π΄Π»ΠΎΠΆΠ΅Π½Π½ΡΡ Β Π²Π°ΡΠΈΠ°Π½ΡΠΎΠ² , Π½Π°ΠΆΠ°Π² Π»Π΅Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ ΠΌΡΡΠΈ Π½Π° ΠΊΠ²Π°Π΄ΡΠ°ΡΠΈΠΊ Ρ Π²ΡΠ±ΡΠ°Π½Π½ΡΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ, ΠΊΠΎΠ΄ Π²ΡΠ±ΡΠ°Π½Π½ΠΎΠ³ΠΎ ΡΠ²Π΅ΡΠ° ΠΎΡΠΎΠ±ΡΠ°Π·ΠΈΡΡΡ Π²Π½ΠΈΠ·Ρ ΠΎΠΊΠ½Π°. Π Π΄Π°Π½Π½ΠΎΠΌ ΡΠ°Π·Π΄Π΅Π»Π΅ ΡΠ°ΠΊ ΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π²Π²Π΅ΡΡΠΈ ΡΠ°ΠΌΠΎΡΡΠΎΡΡΠ΅Π»ΡΠ½ΠΎ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΡΠΉ ΠΊΠΎΠ΄ ΡΠ²Π΅ΡΠ°Β ΡΠ΅ΡΡΠ½Π°Π΄ΡΠ°ΡΠ΅ΡΠΈΡΠ½ΡΠΌ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ ΡΠ²Π΅ΡΠ° RGB.
ΠΠΎ ΠΎΠΊΠΎΠ½ΡΠ°Π½ΠΈΠΈ Π²ΡΠ±ΠΎΡΠ° ΡΠ²Π΅ΡΠ° Π½ΡΠΆΠ½ΠΎ Π½Π°ΠΆΠ°ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ «ΠΡΠΈΠΌΠ΅Π½ΠΈΡΡ«.
Π ΡΠ°Π·Π΄Π΅Π»Π΅ ΠΠ°Π·Π²Π°Π½ΠΈΡ, ΡΠ°ΠΊ ΠΆΠ΅ ΠΊΠ°ΠΊ ΠΈ Π² ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠ΅ΠΌ, Π΅ΡΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΠΏΠΎΠ΄ΠΎΠ±ΡΠ°ΡΡ ΡΠ²Π΅Ρ ΠΈΠ· ΠΏΡΠ΅Π΄Π»ΠΎΠΆΠ΅Π½Π½ΡΡ Β Π²Π°ΡΠΈΠ°Π½ΡΠΎΠ² , Π½Π°ΠΆΠ°Π² Π»Π΅Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ ΠΌΡΡΠΈ Π½Π° ΠΊΠ²Π°Π΄ΡΠ°ΡΠΈΠΊ Ρ Π²ΡΠ±ΡΠ°Π½Π½ΡΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ. ΠΠΎΠ΄Β ΠΈ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ Π²ΡΠ±ΡΠ°Π½Π½ΠΎΠ³ΠΎ ΡΠ²Π΅ΡΠ° ΠΎΡΠΎΠ±ΡΠ°Π·ΠΈΡΡΡ Π²Π½ΠΈΠ·Ρ ΠΎΠΊΠ½Π°. Π’ΡΡ ΡΠ°ΠΊ ΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π²Π²Π΅ΡΡΠΈ ΡΠ°ΠΌΠΎΡΡΠΎΡΡΠ΅Π»ΡΠ½ΠΎ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΡΠΉ ΠΊΠΎΠ΄ ΡΠ²Π΅ΡΠ°Β ΡΠ΅ΡΡΠ½Π°Π΄ΡΠ°ΡΠ΅ΡΠΈΡΠ½ΡΠΌ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ ΡΠ²Π΅ΡΠ° RGB.
ΠΠΎ ΠΎΠΊΠΎΠ½ΡΠ°Π½ΠΈΠΈ Π²ΡΠ±ΠΎΡΠ° ΡΠ²Π΅ΡΠ° Π½ΡΠΆΠ½ΠΎ Π½Π°ΠΆΠ°ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ «ΠΡΠΈΠΌΠ΅Π½ΠΈΡΡ«.
Β
Π― Ρ ΠΎΡΡ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠΎΠ½ΠΎΠ²ΡΠΉ Π²ΠΈΠ΄Π΅ΠΎ, ΠΈ ΠΌΠ½Π΅ Π½ΡΠΆΠ½ΠΎ Π²ΠΈΠ΄Π΅ΠΎ, ΡΡΠΎΠ±Ρ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ°Π·ΠΌΠ΅Ρ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΡ ΡΠΊΡΠ°Π½Π°, Π±Π΅Π· ΡΠ²Π΅Π»ΠΈΡΠ΅Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π²
I have recently been having a problem with a video background. The video background itself is working fine, it was rendered for me by a friend in 4k and I was able to input it into my background via this code:
Html=
<video autoplay loop muted poster="css/videobackground/poster.png">
<source src="css/videobackground/GLitch5.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Css=
#video-bg {
position: fixed;
right: 0;
top: 0;
width: 100% !important;
height: auto !important;
z-index: -1;
background: transparent url(videobackground/poster.png) no-repeat;
background-size: cover;
}
It’s supposed to be really simple, but after testing it on a a heap of different screen sizes throughout my school, at home and at friends houses, each with very different resolutions. I found that on the thinner screens, using this exact code made a white strip appear along the bottom of the screen:
View post on imgur.com
I fixed this by changing the width and height to:width: auto !important;
height: 100% !important;
But this means that on very widescreen computers, it creates a white strip along the left side of the screen: http://i. imgur.com/SSFz6fw.png I have also tried making both the width and height set to 100%, but on wide screens, this makes two white strips appear either side of the video (or the background image) and on very thin/tall screens, white strips appear on the bottom and top of the screen (or the background image). The one other thing I have tried is making both width and height set to auto/cover (both do the same thing):
width: auto !important;
height: auto !important;
Which works, it makes the video full screen and not create any white strip on any screen resolution, but, it makes the video appear very zoomed in and I can no longer get that very clean, 4k look to the video. Instead it looks pixelated and extremely zoomed in.
I am wondering if anyone can help me set parameters to the video so it’s full screen on any resolution without making it zoomed in. This may mean that the video is stretched/squished on some screens, but I would rather have the stretched/squished effect to the video than white strips down the sides and bottom/top or the zoomed in affect. If anyone can help, please do. (I have external javascript files, so if this problem requires javascript or JQuery, that’s fine.)
Π£ ΠΌΠ΅Π½Ρ Π½Π΅Π΄Π°Π²Π½ΠΎ Π²ΠΎΠ·Π½ΠΈΠΊΠ»Π° ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ° Ρ ΡΠΎΠ½ΠΎΠ²ΡΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ. ΠΠΈΠ΄Π΅ΠΎ ΡΠΎΠ½ ΡΠ°ΠΌ ΠΏΠΎ ΡΠ΅Π±Π΅ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎ, ΠΎΠ½Π° Π±ΡΠ»Π° ΠΎΠΊΠ°Π·Π°Π½Π° ΠΌΠ½Π΅ Π΄ΡΡΠ³ΠΎΠΌ Π² 4k, ΠΈ Ρ Π±ΡΠ» Π² ΡΠΎΡΡΠΎΡΠ½ΠΈΠΈ Π²Π²Π΅ΡΡΠΈ Π΅Π³ΠΎ Π² ΡΠ²ΠΎΠΉ ΡΠΎΠ½ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΡΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π°:
Html =
<video autoplay loop muted poster="css/videobackground/poster.png">
<source src="css/videobackground/GLitch5.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Css =
#video-bg {
position: fixed;
right: 0;
top: 0;
width: 100% !important;
height: auto !important;
z-index: -1;
background: transparent url(videobackground/poster.png) no-repeat;
background-size: cover;
}
ΠΡΠΎ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±ΡΡΡ ΠΎΡΠ΅Π½Ρ ΠΏΡΠΎΡΡΠΎ, Π½ΠΎ ΠΏΠΎΡΠ»Π΅ ΡΠ΅ΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π΅Π³ΠΎ Π½Π° ΠΊΡΡΡ ΡΠ°Π·Π½ΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΡΠΊΡΠ°Π½Π° Π²ΠΎ Π²ΡΠ΅ΠΌΡ ΠΌΠΎΠ΅ΠΉ ΡΠΊΠΎΠ»Ρ, Π΄ΠΎΠΌΠ° ΠΈ Π² Π΄ΠΎΠΌΠ°Ρ Π΄ΡΡΠ·Π΅ΠΉ, ΠΊΠ°ΠΆΠ΄ΡΠΉ Ρ ΠΎΡΠ΅Π½Ρ ΡΠ°Π·Π½ΡΠΌΠΈ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΡΠΌΠΈ. Π― ΠΎΠ±Π½Π°ΡΡΠΆΠΈΠ», ΡΡΠΎ Π½Π° ΡΠΎΠ½ΠΊΠΈΡ ΡΠΊΡΠ°Π½Π°Ρ , ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΡΠΎΡ ΡΠΎΡΠ½ΡΠΉ ΠΊΠΎΠ΄ ΡΠ΄Π΅Π»Π°Π» Π±Π΅Π»Π°Ρ ΠΏΠΎΠ»ΠΎΡΠ° ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ Π² Π½ΠΈΠΆΠ½Π΅ΠΉ ΡΠ°ΡΡΠΈ ΡΠΊΡΠ°Π½Π°:
View post on imgur.com
Π― ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΉ, ΠΈΠ·ΠΌΠ΅Π½ΠΈΠ² ΡΠΈΡΠΈΠ½Ρ ΠΈ Π²ΡΡΠΎΡΡ Π΄ΠΎ:width: auto !important;
height: 100% !important;
ΠΠΎ ΡΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ ΠΎΡΠ΅Π½Ρ ΡΠΈΡΠΎΠΊΠΎΡΠΊΡΠ°Π½Π½ΡΠ΅ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΡ, ΠΎΠ½ ΡΠΎΠ·Π΄Π°Π΅Ρ Π±Π΅Π»ΡΡ ΠΏΠΎΠ»ΠΎΡΡ Π²Π΄ΠΎΠ»Ρ Π»Π΅Π²ΠΎΠΉ ΡΡΠΎΡΠΎΠ½Ρ ΡΠΊΡΠ°Π½Π°:
View post on imgur.com
Π― ΡΠ°ΠΊΠΆΠ΅ ΠΏΠΎΠΏΡΡΠ°Π»ΡΡ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠΈΡΠΈΠ½Ρ ΠΈ Π²ΡΡΠΎΡΡ ΡΠ°Π²Π½ΡΠΌΠΈ 100%, Π½ΠΎ Π½Π° ΡΠΈΡΠΎΠΊΠΈΡ
ΡΠΊΡΠ°Π½Π°Ρ
ΡΡΠΎ Π΄Π΅Π»Π°Π΅Ρ Π΄Π²Π΅ Π±Π΅Π»ΡΠ΅ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΠΎΡΠ²Π»ΡΡΡΠΈΠΌΠΈΡΡ Ρ ΠΎΠ±Π΅ΠΈΡ
ΡΡΠΎΡΠΎΠ½ Π²ΠΈΠ΄Π΅ΠΎ (ΠΈΠ»ΠΈ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅), Π° Π½Π° ΠΎΡΠ΅Π½Ρ ΡΠΎΠ½ΠΊΠΈΡ
/Π²ΡΡΠΎΠΊΠΈΡ
ΡΠΊΡΠ°Π½Π°Ρ
ΠΏΠΎΡΠ²Π»ΡΡΡΡΡ Π±Π΅Π»ΡΠ΅ ΠΏΠΎΠ»ΠΎΡΡ Π²Π½ΠΈΠ·Ρ ΠΈ ΡΠ²Π΅ΡΡ
Ρ ΡΠΊΡΠ°Π½Π° (ΠΈΠ»ΠΈ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅). ΠΠ΄Π½Π° Π΄ΡΡΠ³Π°Ρ Π²Π΅ΡΡ, ΠΊΠΎΡΠΎΡΡΡ Ρ ΠΏΡΡΠ°Π»ΡΡ ΡΡΠΎ ΡΠ΄Π΅Π»Π°ΡΡ ΠΈ ΡΠΈΡΠΈΠ½Ρ ΠΈ Π²ΡΡΠΎΡΡ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Π½ΡΠ΅ Π² Π°Π²ΡΠΎ/ΠΊΡΡΡΠΊΠΈ (ΠΎΠ±Π° Π΄Π΅Π»Π°ΡΡ ΡΠΎ ΠΆΠ΅ ΡΠ°ΠΌΠΎΠ΅):width: auto !important;
height: auto !important;
ΠΠΎΡΠΎΡΡΠΉ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ, ΠΎΠ½ Π΄Π΅Π»Π°Π΅Ρ Π²ΠΈΠ΄Π΅ΠΎ Π² ΠΏΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½ΠΎΠΌ ΡΠ΅ΠΆΠΈΠΌΠ΅, Π° Π½Π΅ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ Π»ΡΠ±ΡΡ Π±Π΅Π»ΡΡ ΠΏΠΎΠ»ΠΎΡΡ Π½Π° Π»ΡΠ±ΠΎΠΉ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ ΡΠΊΡΠ°Π½Π°, , Π½ΠΎ, ΡΡΠΎ Π΄Π΅Π»Π°Π΅Ρ Π²ΠΈΠ΄Π΅ΠΎ ΠΎΡΠ΅Π½Ρ ΡΠΈΠ»ΡΠ½ΠΎ ΡΠ²Π΅Π»ΠΈΡΠ΅Π½Π½ΡΠΌ, ΠΈ Ρ Π±ΠΎΠ»ΡΡΠ΅ Π½Π΅ ΠΌΠΎΠ³Ρ ΠΏΠΎΠ»ΡΡΠΈΡΡ ΡΡΠΎΡ ΠΎΡΠ΅Π½Ρ ΡΠΈΡΡΡΠΉ, 4k ΡΠΌΠΎΡΡΠ΅ΡΡ Π½Π° Π²ΠΈΠ΄Π΅ΠΎ. ΠΠΌΠ΅ΡΡΠΎ ΡΡΠΎΠ³ΠΎ ΠΎΠ½ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ Π½Π΅ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅Π½Π½ΠΎ ΠΈ ΡΡΠ΅Π·Π²ΡΡΠ°ΠΉΠ½ΠΎ ΡΠ²Π΅Π»ΠΈΡΠ΅Π½ΠΎ.
ΠΌΠ½Π΅ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎ, Π΅ΡΠ»ΠΈ ΠΊΡΠΎ-Π½ΠΈΠ±ΡΠ΄Ρ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΠΌΠΎΡΡ ΠΌΠ½Π΅ Π·Π°Π΄Π°ΡΡ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ Π΄Π»Ρ Π²ΠΈΠ΄Π΅ΠΎ, ΡΠ°ΠΊ ΡΡΠΎ ΠΏΠΎΠ»Π½ΡΠΉ ΡΠΊΡΠ°Π½ Π½Π° Π»ΡΠ±ΠΎΠΌ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠΈ Π±Π΅Π· Π΄Π΅Π»Π°Π΅Ρ Π΅Π³ΠΎ ΡΠ²Π΅Π»ΠΈΡΠ΅Π½Π½ΠΎΠΉ. ΠΡΠΎ ΠΌΠΎΠΆΠ΅Ρ ΠΎΠ·Π½Π°ΡΠ°ΡΡ, ΡΡΠΎ Π²ΠΈΠ΄Π΅ΠΎ ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°Π΅ΡΡΡ/Π½Π° Π½Π΅ΠΊΠΎΡΠΎΡΡΡ ΡΠΊΡΠ°Π½Π°Ρ , Π½ΠΎ Ρ ΠΏΡΠ΅Π΄ΠΏΠΎΡΠ΅Π» Π±Ρ ΠΈΠΌΠ΅ΡΡ ΡΠ°ΡΡΡΠ½ΡΡΡΠΉ/ΡΠΊΡΠΈΠΏΡΡΠΈΠΉ ΡΡΡΠ΅ΠΊΡ Π΄Π»Ρ Π²ΠΈΠ΄Π΅ΠΎ, ΡΠ΅ΠΌ Π±Π΅Π»ΡΠ΅ ΠΏΠΎΠ»ΠΎΡΡ Π²Π½ΠΈΠ· ΠΏΠΎ Π±ΠΎΠΊΠ°ΠΌ, Π½ΠΈΠΆΠ½ΠΈΠΉ/Π²Π΅ΡΡ Π½ΠΈΠΉ ΠΈΠ»ΠΈ ΡΠ²Π΅Π»ΠΈΡΠ΅Π½Π½ΡΠΉ ΡΡΡΠ΅ΠΊΡ. ΠΡΠ»ΠΈ ΠΊΡΠΎ-ΡΠΎ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΠΌΠΎΡΡ, ΠΏΠΎΠΆΠ°Π»ΡΠΉΡΡΠ°. (Π£ ΠΌΠ΅Π½Ρ Π΅ΡΡΡ Π²Π½Π΅ΡΠ½ΠΈΠ΅ JavaScript ΡΠ°ΠΉΠ»ΠΎΠ², ΠΏΠΎΡΡΠΎΠΌΡ, Π΅ΡΠ»ΠΈ ΡΡΠ° ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ° ΡΡΠ΅Π±ΡΠ΅Ρ ΡΠ²Π°ΡΠΊΡΠΈΠΏΡ ΠΈΠ»ΠΈ JQuery, ΡΡΠΎ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎ.)
javascript html5 css3 responsive-design html5-video65
Π£Π²Π΅Π»ΠΈΡΡΡΠ΅ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΎΠ½Π°, ΠΏΠΎΠΆΠ°Π»ΡΠΉΡΡΠ°! — ΠΠΏΠ°ΡΡΠ°ΠΌΠ΅Π½ΡΡ A List Apart
Π ΠΌΠΈΡΠ΅ ΡΠ΅ΠΊΠ»Π°ΠΌΡ, ΡΡΡΠ΅ΠΌΡΡΠ΅ΠΌΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΊΠ°ΠΆΠ΄ΡΠΉ Π΄ΡΠΉΠΌ ΡΡΠ΅Π΄Ρ Π΄Π»Ρ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΡ Π±ΡΠ΅Π½Π΄Π° ΠΈΠ»ΠΈ ΠΏΡΠΎΠ΄ΡΠΊΡΠ°, ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ Π²ΡΠ΅ Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΠΌ ΡΠ°Π·ΡΠ°Π±Π°ΡΡΠ²Π°ΡΡ Π²Π΅Π±-ΡΠ°ΠΉΡΡ Ρ ΠΏΠΎΠ»Π½ΠΎΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½ΡΠΌ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠΌ. ΠΡΠΏΠΎΠ»ΡΠ·ΡΡ CSS, ΡΡΠΎΠ³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π»Π΅Π³ΠΊΠΎ Π΄ΠΎΡΡΠΈΡΡ. ΠΡΠΎΡΡΠΎ ΠΏΠΎΠΌΠ΅ΡΡΠΈΡΠ΅ ΠΎΠ³ΡΠΎΠΌΠ½ΠΎΠ΅ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π° ΡΡΡΠ°Π½ΠΈΡΡ Ρ ΠΎΠ΄Π½ΠΎΠΉ ΡΡΡΠΎΠΊΠΎΠΉ ΠΊΠΎΠ΄Π° (ΡΡΡΠΎΠΊΠΈ Ρ ΠΏΠΎΠΌΠ΅ΡΠΊΠΎΠΉ Β» β Π Π΅Π΄. ):
ΠΡΠΎΠ΄ΠΎΠ»ΠΆΠ΅Π½ΠΈΠ΅ ΡΡΠ°ΡΡΠΈ Π½ΠΈΠΆΠ΅
body {
ΡΠΎΠ½: # 000 url (myBackground_1280x960.jpg) Β»
ΡΠ΅Π½ΡΡ ΡΠ΅Π½ΡΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ Π±Π΅Π· ΠΏΠΎΠ²ΡΠΎΡΠ°;
}
Π ΠΏΠ΅ΡΠ²ΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ ΡΠ΅Π½ΡΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ 1280 Π½Π° 960 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, Π·Π°ΠΊΡΠ΅ΠΏΠ»Π΅Π½Π½ΠΎΠ΅ Π·Π° ΠΎΠ±Π»Π°ΡΡΡΡ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° (ΠΎΠ½ΠΎ Π½Π΅ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΡΡΡ Π²ΠΌΠ΅ΡΡΠ΅ Ρ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠΎΠΌ).
ΠΠΎ ΠΊΠ°ΠΊΠΎΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π±ΡΠ΄Π΅Ρ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ Π±ΠΎΠ»ΡΡΠΈΠΌ? ΠΠΎΠ½ΠΈΡΠΎΡΡ ΠΈ ΠΎΠΏΠ΅ΡΠ°ΡΠΈΠΎΠ½Π½ΡΠ΅ ΡΠΈΡΡΠ΅ΠΌΡ Π±ΡΡΡΡΠΎ ΡΠ°Π·Π²ΠΈΠ²Π°Π»ΠΈΡΡ, ΠΈ Π² ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ΅ ΠΏΠΎΡΠ²ΠΈΠ»ΡΡ ΡΠΈΡΠΎΠΊΠΈΠΉ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½ Π΄ΠΎΡΡΡΠΏΠ½ΡΡ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠΉ ΡΠΊΡΠ°Π½Π°. Π‘Π°ΠΌΡΠ΅ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΠ΅ ΡΠ΅Π³ΠΎΠ΄Π½Ρ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΡ — 1024×768 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, 1280×800 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, 1280×1024 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΈ 1440×900 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ. ΠΠ΄Π½Π°ΠΊΠΎ Ρ ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΠ΅ΠΌ ΡΠΊΡΠ°Π½ΠΎΠ² Π²ΡΡΠΎΠΊΠΎΠΉ ΡΠ΅ΡΠΊΠΎΡΡΠΈ (1920×1080 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ) ΠΈ ΠΏΡΠΎΡΠ΅ΡΡΠΈΠΎΠ½Π°Π»ΡΠ½ΡΡ Π΄ΠΈΡΠΏΠ»Π΅Π΅Π², ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΠΈΡ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ Π΄ΠΎ 2560×1600 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ Π²ΡΠ΅.
Π’Π°ΠΊΠΆΠ΅ Π΅ΡΡΡ ΠΎΡΠ½ΠΎΠ²Π°Π½ΠΈΡ Π΄Π»Ρ Π±ΠΎΠ»Π΅Π΅ Π½ΠΈΠ·ΠΊΠΈΡ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠΉ. ΠΠ½ΠΎΠ³ΠΈΠ΅ Π»ΡΠ΄ΠΈ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡ ΡΠ°Π·ΠΌΠ΅Ρ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ°, ΡΡΠΎΠ±Ρ Π·Π°ΠΏΠΎΠ»Π½ΠΈΡΡ ΡΠ°ΡΡΡ ΡΠΊΡΠ°Π½Π°, Π² ΡΠΎ Π²ΡΠ΅ΠΌΡ ΠΊΠ°ΠΊ ΡΡΠ΄ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ ΡΠΊΡΠ°Π½ΠΎΠ² ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ ΡΠΎΠ»ΡΠΊΠΎ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ 800×600 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ. Π ΡΡΠΎ ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ ΠΊΠ°ΡΠΌΠ°Π½Π½ΡΡ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠΎΠ² Ρ Π±ΠΎΠ»Π΅Π΅ Π½ΠΈΠ·ΠΊΠΈΠΌΠΈ Ρ Π°ΡΠ°ΠΊΡΠ΅ΡΠΈΡΡΠΈΠΊΠ°ΠΌΠΈ.
ΠΠΌΠ΅ΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΠΎΠ½Π° Π»ΡΡΡΠΈΠΌ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ Π±ΡΠ»ΠΎ Π±Ρ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΡΡΠΎΠ±Ρ ΠΎΠ½ΠΎ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΎΠ²Π°Π»ΠΎ ΡΠ°Π·Π½ΡΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΠΌ ΠΎΠΊΠ½Π°. Π ΡΠΎΠΆΠ°Π»Π΅Π½ΠΈΡ, Π² CSS 2.1 Π½Π΅Ρ ΡΡΠ΅Π΄ΡΡΠ² ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠΎΠ½ΠΎΠ²ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ.
ΠΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΎΠ±Ρ
ΠΎΠ΄Π½ΡΡ
ΠΏΡΡΠ΅ΠΉ, ΠΎΠ΄Π½Π°ΠΊΠΎ Π²ΡΠ΅ ΠΎΠ½ΠΈ ΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ HTML img
(Π²ΠΌΠ΅ΡΡΠΎ ΡΠΎΠ½Π° CSS). ΠΠ½ΠΈ ΡΠ°ΠΊΠΆΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π΄Π»Ρ ΡΠ»ΠΎΠ΅Π² ΠΈ ΡΠ°Π±Π»ΠΈΡ ΠΈΠ»ΠΈ ΡΡΠ΅Π½Π°ΡΠΈΠ΅Π², ΡΡΠΎΠ±Ρ ΡΠ°Π·ΡΠ΅ΡΠΈΡΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠ°. ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, Π½Π΅ Π²ΡΠ΅ ΡΡΠΈ ΠΌΠ΅ΡΠΎΠ΄Ρ ΡΠΎΡ
ΡΠ°Π½ΡΡΡ ΠΏΡΠΎΠΏΠΎΡΡΠΈΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΡΡΠΎ ΠΏΡΠΈΠ²ΠΎΠ΄ΠΈΡ ΠΊ Π½Π΅ΡΠ΅Π°Π»ΠΈΡΡΠΈΡΠ½ΠΎ ΡΠ°ΡΡΡΠ½ΡΡΠΎΠΌΡ ΡΠΎΠ½Ρ.
CSS3 ΡΠΎΠ½Ρ ΡΠΏΠ΅ΡΠ°Ρ Π½Π° ΠΏΠΎΠΌΠΎΡΡ # section2
Π£ΡΠΎΠ²Π΅Π½Ρ 3 ΠΌΠΎΠ΄ΡΠ»Ρ W3C CSS Background and Borders Module (Π² Π½Π°ΡΡΠΎΡΡΠ΅Π΅ Π²ΡΠ΅ΠΌΡ — ΡΠ°Π±ΠΎΡΠΈΠΉ ΠΏΡΠΎΠ΅ΠΊΡ) ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ background-size
, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΠ΅Ρ Π½Π°ΡΠΈΠΌ ΡΡΠ΅Π±ΠΎΠ²Π°Π½ΠΈΡΠΌ. ΠΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ (Π΅ΡΠ»ΠΈ ΡΡΡΠ»Π°ΡΡΡΡ Π½Π° ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ W3C):
ΡΠΎΠ΄Π΅ΡΠΆΠ°Ρ
ΠΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Ρ ΡΠΎΡ
ΡΠ°Π½Π΅Π½ΠΈΠ΅ΠΌ Π΅Π³ΠΎ Π²Π½ΡΡΡΠ΅Π½Π½Π΅Π³ΠΎ ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΡ ΡΡΠΎΡΠΎΠ½ (Π΅ΡΠ»ΠΈ ΠΎΠ½ΠΎ Π΅ΡΡΡ) Π΄ΠΎ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°, ΡΡΠΎΠ±Ρ ΠΈ Π΅Π³ΠΎ ΡΠΈΡΠΈΠ½Π°, ΠΈ Π΅Π³ΠΎ Π²ΡΡΠΎΡΠ° ΠΌΠΎΠ³Π»ΠΈ ΡΠΌΠ΅ΡΡΠΈΡΡΡΡ Π² ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠΎΠ½Π°.
cover
ΠΠ°ΡΡΡΠ°Π±ΠΈΡΡΠΉΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΡΠΎΡ
ΡΠ°Π½ΡΡ Π΅Π³ΠΎ Π²Π½ΡΡΡΠ΅Π½Π½Π΅Π΅ ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ ΡΡΠΎΡΠΎΠ½ (Π΅ΡΠ»ΠΈ ΠΎΠ½ΠΎ Π΅ΡΡΡ), Π΄ΠΎ Π½Π°ΠΈΠΌΠ΅Π½ΡΡΠ΅Π³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°, ΡΡΠΎΠ±Ρ ΠΈ Π΅Π³ΠΎ ΡΠΈΡΠΈΠ½Π°, ΠΈ Π΅Π³ΠΎ Π²ΡΡΠΎΡΠ° ΠΌΠΎΠ³Π»ΠΈ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΠΏΠΎΠΊΡΡΠ²Π°ΡΡ ΠΎΠ±Π»Π°ΡΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠΎΠ½Π°.
Π‘ΠΎΠ΄Π΅ΡΠΆΠΈΡ
Π²ΡΠ΅Π³Π΄Π° ΠΏΠΎΠΌΠ΅ΡΠ°Π΅ΡΡΡ Π½Π° Π²ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π² ΠΏΡΠ΅Π΄Π΅Π»Π°Ρ
Π²Π°ΡΠ΅Π³ΠΎ ΠΎΠΊΠ½Π° ΠΏΡΠΎΡΠΌΠΎΡΡΠ°, ΠΎΡΡΠ°Π²Π»ΡΡ Π½Π΅ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΡΠ΅ Π³ΡΠ°Π½ΠΈΡΡ Π»ΠΈΠ±ΠΎ Π½Π° ΡΠ²Π΅ΡΡ
Ρ-ΡΠ½ΠΈΠ·Ρ
, Π»ΠΈΠ±ΠΎ Π½Π° ΡΠ»Π΅Π²Π°-ΡΠΏΡΠ°Π²Π°
, Π΅ΡΠ»ΠΈ ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ° Π½Π΅ ΡΠΎΠ²ΠΏΠ°Π΄Π°Π΅Ρ.ΠΠΎ Π²ΡΠΎΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΌΡ ΡΠ°ΡΡΠΈΡΠΈΠ»ΠΈ ΠΊΠΎΠ΄ ΠΈΠ· ΠΏΠ΅ΡΠ²ΠΎΠ³ΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠ°, ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠ² Π΄Π»Ρ ΡΠ²ΠΎΠΉΡΡΠ²Π° background-size
Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ contain
.
ΠΠ±Π»ΠΎΠΆΠΊΠ°
Π²ΡΠ΅Π³Π΄Π° Π·Π°ΠΏΠΎΠ»Π½ΡΠ΅Ρ ΠΎΠΊΠ½ΠΎ Π±ΡΠ°ΡΠ·Π΅ΡΠ°, ΠΎΡΡΠ΅Π·Π°Ρ ΠΏΡΠΈ ΡΡΠΎΠΌ Π²ΠΎΠ»ΠΎΡΡ ΠΈΠ»ΠΈ ΡΡΠΈ, ΡΡΠΎ Ρ Π»ΠΈΡΠ½ΠΎ ΠΏΡΠ΅Π΄ΠΏΠΎΡΠΈΡΠ°Ρ Π² Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²Π΅ ΡΠ»ΡΡΠ°Π΅Π². ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΊΠΎΠ½ΡΡΠΎΠ»ΠΈΡΠΎΠ²Π°ΡΡ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° background-position
. Π ΡΡΠ΅ΡΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΌΡ ΡΠ½ΠΎΠ²Π° ΡΠ°ΡΡΠΈΡΠΈΠ»ΠΈ ΠΏΠ΅ΡΠ²ΡΠΉ ΠΏΡΠΈΠΌΠ΅Ρ, Π½Π° ΡΡΠΎΡ ΡΠ°Π· ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠ² Π΄Π»Ρ ΡΠ²ΠΎΠΉΡΡΠ²Π° background-size
Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ cover
.
Π§ΡΠΎΠ±Ρ Π²ΠΊΠ»ΡΡΠΈΡΡ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠΎΠ½Π°, Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ Π² ΡΠ°Π±Π»ΠΈΡΡ ΡΡΠΈΠ»Π΅ΠΉ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΠΎΠ±ΡΡΠ²Π»Π΅Π½ΠΈΡ:
body {
ΡΠΎΠ½: # 000 url (myBackground_1280x960.jpg) Β»
ΡΠ΅Π½ΡΡ ΡΠ΅Π½ΡΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ Π±Π΅Π· ΠΏΠΎΠ²ΡΠΎΡΠ°;
-moz-background-size: ΠΎΠ±Π»ΠΎΠΆΠΊΠ°;
ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΎΠ½Π°: ΠΎΠ±Π»ΠΎΠΆΠΊΠ°;
}
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ background-size
ΡΠΆΠ΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΡΡ Firefox 3.6 (Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΏΡΠ΅ΡΠΈΠΊΡΠ° -moz
; Firefox 4 Π±ΡΠ΄Π΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΎΠ±ΡΡΠ½ΠΎΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ CSS3), Chrome 5, Safari 5 ΠΈ Opera 10.54; ΠΈ ΠΎΠ½ Π±ΡΠ΄Π΅Ρ Π²ΠΊΠ»ΡΡΠ΅Π½ Π² Internet Explorer 9 (ΠΎΠ½ ΡΠΆΠ΅ Π΄ΠΎΡΡΡΠΏΠ΅Π½ Π² Preview 3).Π‘ΡΠ°ΡΡΠ΅ Π²Π΅ΡΡΠΈΠΈ Webkit ΠΈ Opera ΡΠΆΠ΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ background-size , ΠΎΠ΄Π½Π°ΠΊΠΎ ΡΡΠΈ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ ΠΎΡΠ½ΠΎΠ²Π°Π½Ρ Π½Π° ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠ΅ΠΌ ΠΏΡΠΎΠ΅ΠΊΡΠ΅, ΠΊΠΎΡΠΎΡΡΠΉ Π½Π΅ Π²ΠΊΠ»ΡΡΠ°Π» ΠΊΠ»ΡΡΠ΅Π²ΡΠ΅ ΡΠ»ΠΎΠ²Π°
, ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠ΅
, ΠΈ , ΠΎΡ
Π²Π°ΡΡΠ²Π°ΡΡΠΈΠ΅
.
ΠΠ±ΡΠ°ΡΠ½ΠΎΠΉ ΡΡΠΎΡΠΎΠ½ΠΎΠΉ ΡΡΠΎΠ³ΠΎ ΠΌΠ΅ΡΠΎΠ΄Π° ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΎΡΡΡΡΡΡΠ²ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΡΠΎΠ½Π° Π΄Π»Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΠΎΠΉ ΡΠΈΡΠΈΠ½Ρ ΠΈΠ»ΠΈ Π²ΡΡΠΎΡΡ. ΠΡΠ»ΠΈ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ°Π·ΠΌΠ΅Ρ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ° Π΄ΠΎ ΠΎΡΠ΅Π½Ρ ΠΌΠ°Π»Π΅Π½ΡΠΊΠΎΠΉ ΡΠΈΡΠΈΠ½Ρ ΠΈΠ»ΠΈ Π²ΡΡΠΎΡΡ, ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡΡ Π΄ΠΎ ΠΎΡΠ΅Π½Ρ ΠΌΠ°Π»Π΅Π½ΡΠΊΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°, ΡΡΠΎ ΡΠ°ΡΡΠΎ ΡΠ²Π»ΡΠ΅ΡΡΡ Π½Π΅ΠΆΠ΅Π»Π°ΡΠ΅Π»ΡΠ½ΡΠΌ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ΠΌ.
ΠΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΠΎΠ² CSS3 Π² ΠΌΠΈΠΊΡ # section3
ΠΠΎΠ΄ΡΠ»Ρ W3C CSS3 Media Queries (ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΠΎΠ²Π°Π½Π½ΡΠΉ ΠΊΠ°Π½Π΄ΠΈΠ΄Π°Ρ) ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΡΡΠ»ΠΎΠ²Π½ΡΠ΅ ΠΏΡΠ°Π²ΠΈΠ»Π°, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π² ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΡ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π°Ρ ΡΠΈΡΠΈΠ½Ρ ΠΈΠ»ΠΈ Π²ΡΡΠΎΡΡ. ΠΡΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π½Π°ΠΌ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°ΡΡ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠΎΠ½Π° Ρ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΠΎΠΉ ΡΠΈΡΠΈΠ½Ρ ΠΈ Π²ΡΡΠΎΡΡ ΠΈ ΡΠ°ΠΊ Π΄Π°Π»Π΅Π΅. ΠΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ Firefox 3.5, Chrome, Safari 3 ΠΈ Opera 7, Π° ΡΠ°ΠΊΠΆΠ΅ Π±ΡΠ΄ΡΡ Π²ΠΊΠ»ΡΡΠ΅Π½Ρ Π² Internet Explorer 9.
ΠΠΎΠ±Π°Π²Π»ΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΠΏΡΠ°Π²ΠΈΠ»Π° ΡΡΠΈΠ»Ρ, ΠΌΡ ΡΠΎΠΎΠ±ΡΠ°Π΅ΠΌ Π±ΡΠ°ΡΠ·Π΅ΡΡ, ΡΡΠΎ Π½Π΅ Ρ ΠΎΡΠΈΠΌ, ΡΡΠΎΠ±Ρ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π»ΠΎΡΡ ΠΌΠ΅Π½ΡΡΠ΅ 1024 Γ 768 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ:
body {
ΡΠΎΠ½: # 000 url (myBackground_1280x960.jpg) Β»
ΡΠ΅Π½ΡΡ ΡΠ΅Π½ΡΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ Π±Π΅Π· ΠΏΠΎΠ²ΡΠΎΡΠ°;
-moz-background-size: ΠΎΠ±Π»ΠΎΠΆΠΊΠ°;
ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΎΠ½Π°: ΠΎΠ±Π»ΠΎΠΆΠΊΠ°;
} @media only all and (max-width: 1024px) ΠΈ (max-height: 768px) {
ΡΠ΅Π»ΠΎ {
-moz-background-size: 1024px 768px;
ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΎΠ½Π°: 1024px 768px;
}
}
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ 1024x768 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΠ΅Ρ ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΡ ΡΡΠΎΡΠΎΠ½ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ (1280x960 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ). ΠΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ Π΄ΡΡΠ³ΠΎΠ³ΠΎ ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΡ Π²Ρ ΠΏΠΎΠ»ΡΡΠΈΡΠ΅ Π²Π½Π΅Π·Π°ΠΏΠ½ΡΠ΅ ΡΠΊΠ°ΡΠΊΠΈ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΏΡΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ°.
Π Π½Π°ΡΠΈΡ
ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΡ
ΠΏΡΠΈΠΌΠ΅ΡΠ°Ρ
, ΡΠ΅ΡΠ²Π΅ΡΡΠΎΠΌ ΠΈ ΠΏΡΡΠΎΠΌ, ΠΌΡ Π΄ΠΎΠ±Π°Π²ΠΈΠ»ΠΈ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ @media
, ΡΡΠΎΠ±Ρ Π½Π°ΡΠ΅ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π΅ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π»ΠΎΡΡ ΠΌΠ΅Π½ΡΡΠ΅ 1024 Π½Π° 768 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ.ΠΡΠΈΠΌΠ΅Ρ 5 ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ, ΡΡΠΎ, ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠ² Π΄Π»Ρ ΡΠ²ΠΎΠΉΡΡΠ²Π° background-position
Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ left-bottom
Π²ΠΌΠ΅ΡΡΠΎ center-center
, ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΊΠΎΠ½ΡΡΠΎΠ»ΠΈΡΠΎΠ²Π°ΡΡ ΡΠΏΠΎΡΠΎΠ± Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΡ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°.
ΠΠ΅ΡΠ΅ΡΠΌΠΎΡΡ ΡΡΠ°ΡΡΡ ΠΌΠ΅ΡΠΎΠ΄ΠΎΠ² # section4
ΠΡΠΎ Π·Π°Ρ Π²Π°ΡΡΠ²Π°ΡΡΠΈΠ΅ Π²ΡΠ΅ΠΌΠ΅Π½Π° Π΄Π»Ρ Π²Π΅Π±-ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ², ΠΊΠΎΠ³Π΄Π° Π²ΡΠ΅ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ² ΡΡΠ΅ΡΠ΄Π½ΠΎ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π½Π°Π΄ Π²Π½Π΅Π΄ΡΠ΅Π½ΠΈΠ΅ΠΌ Π½ΠΎΠ²ΡΡ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΠΉ, ΡΠ°ΠΊΠΈΡ ΠΊΠ°ΠΊ HTML5 ΠΈ CSS3. Π ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ΅ ΠΏΡΠΈΡΠ»ΠΎ Π²ΡΠ΅ΠΌΡ ΠΏΠ΅ΡΠ΅ΡΠΌΠΎΡΡΠ΅ΡΡ ΡΡΠ°ΡΡΠ΅ ΠΌΠ΅ΡΠΎΠ΄Ρ, ΡΡΠΎΠ±Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ, ΠΊΠ°ΠΊ ΡΠΎ ΠΆΠ΅ ΡΠ°ΠΌΠΎΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π΄Π΅Π»Π°ΡΡ Π±ΠΎΠ»Π΅Π΅ ΡΠ°Π·ΡΠΌΠ½ΡΠΌΠΈ ΠΈ ΡΠΈΡΡΡΠΌΠΈ ΡΠΏΠΎΡΠΎΠ±Π°ΠΌΠΈ.Π₯ΠΎΡΡ ΡΠΈΠΊΠ»Ρ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΡ Firefox, Chrome, Safari ΠΈ Opera ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΊΠΎΡΠΎΡΠΊΠΈΠ΅, Π±ΡΠ΄Π΅Ρ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎ ΠΏΠΎΡΠΌΠΎΡΡΠ΅ΡΡ, ΠΊΠ°ΠΊ Π±ΡΡΡΡΠΎ Π»ΡΠ΄ΠΈ ΠΎΡ Π²Π°ΡΡΡ Internet Explorer 9, ΡΡΠΎΠ±Ρ ΠΌΡ ΠΌΠΎΠ³Π»ΠΈ Π½Π°ΡΠ°ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΌΠ½ΠΎΠ³ΠΈΠ΅ ΠΈΠ· ΡΡΠΈΡ Π½ΠΎΠ²ΡΡ ΠΌΠ΅ΡΠΎΠ΄ΠΎΠ² Π² Π±Π»ΠΈΠΆΠ°ΠΉΡΠ΅Π΅ Π²ΡΠ΅ΠΌΡ Π² Π±ΠΎΠ»ΡΡΠΈΡ ΠΌΠ°ΡΡΡΠ°Π±Π°Ρ .
Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΏΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½ΠΎΠ³ΠΎ Π²ΠΈΠ΄Π΅ΠΎ ΡΠΎΠ½Π° Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ CSS
ΠΠ½ΠΎΠ³ΠΈΠ΅ ΠΈΠ· Π²Π°Ρ Π²ΠΈΠ΄Π΅Π»ΠΈ ΡΡΠΈ ΡΠ΄ΠΈΠ²ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ Π²Π΅Π±-ΡΠ°ΠΉΡΡ Ρ ΠΊΡΠ°ΡΠΈΠ²ΡΠΌ ΡΠΎΠ½ΠΎΠ²ΡΠΌ Π²ΠΈΠ΄Π΅ΠΎ ΠΈ ΡΠ΅ΠΊΡΡΠΎΠΌ Π½Π°Π²Π΅ΡΡ Ρ. ΠΠ½ΠΎΠ³ΠΎ Π»Π΅Ρ Π½Π°Π·Π°Π΄ ΡΡΠΎ Π±ΡΠ»ΠΎ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ»ΡΠΊΠΎ Π²ΠΎ ΡΠ½Π΅ ΠΈΠ»ΠΈ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠ»Π΅Ρ-ΠΏΠ°ΠΌΡΡΠΈ, ΡΡΠΎ Π΄Π΅Π»Π°Π»ΠΎ ΡΠ°ΠΉΡ ΠΎΡΠ΅Π½Ρ ΡΡΠΆΠ΅Π»ΡΠΌ Π΄Π»Ρ Π·Π°Π³ΡΡΠ·ΠΊΠΈ.
Π‘Π΅Π³ΠΎΠ΄Π½Ρ HTML, CSS ΠΈ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ ΡΠ΄Π΅Π»Π°Π»ΠΈ ΡΡΠΎ Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ ΡΠ΅Π°Π»ΡΠ½ΠΎΡΡΡΡ, Π½ΠΎ ΠΈ ΠΎΡΠ΅Π½Ρ ΠΏΡΠΎΡΡΠΎ ΡΠ΄Π΅Π»Π°ΡΡ:
1) ΠΡΠ΅ΠΆΠ΄Π΅ Π²ΡΠ΅Π³ΠΎ, Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΠΏΠΎΠ»ΡΡΠΈΡΡ Π²ΠΈΠ΄Π΅ΠΎ. Π ΠΎΠ΄Π½ΠΎΠΌ ΠΈΠ· ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠΈΡ ΠΏΠΎΡΡΠΎΠ² ΠΌΡ ΠΎΠΏΡΠ±Π»ΠΈΠΊΠΎΠ²Π°Π»ΠΈ ΡΡΠ°ΡΡΡ ΠΎ 10 Π»ΡΡΡΠΈΡ Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΡΡ Π²ΠΈΠ΄Π΅ΠΎΡΠ°ΠΉΡΠ°Ρ . Π’Π°ΠΊ ΡΡΠΎ Π²ΠΏΠ΅ΡΠ΅Π΄, Π²ΡΠ±Π΅ΡΠΈΡΠ΅ ΠΎΠ΄ΠΈΠ½ ΠΈ ΡΠ΄Π΅Π»Π°ΠΉΡΠ΅ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΡΠ°Π³.
2) ΠΠΎΠ±Π°Π²ΡΡΠ΅ Π²ΠΈΠ΄Π΅ΠΎ Π½Π° ΡΠ²ΠΎΠΉ ΡΠ°ΠΉΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ΅Π³Π° HTML5 video ΠΈ Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ ΠΈΡΡΠΎΡΠ½ΠΈΠΊ ΠΊ Π²ΠΈΠ΄Π΅ΠΎ, Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π±ΡΠ΄Π΅Ρ ΠΎΠ±Π΅ΡΠ½ΡΡΡ Π²ΠΈΠ΄Π΅ΠΎ ΡΠ°Π·Π΄Π΅Π»ΠΎΠΌ, ΠΊΠΎΡΠΎΡΡΠΉ Π±ΡΠ΄Π΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ Π΄Π»Ρ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π²ΠΈΠ΄Π΅ΠΎ Π½Π° ΡΠΎΠ½Π΅.ΠΠ°Π·ΠΎΠ²Π΅ΠΌ ΡΡΠΎΡ ΡΠ°Π·Π΄Π΅Π» Π²ΠΈΠ΄Π΅ΠΎBgWrapper:
3) ΠΠΎΠ±Π°Π²ΡΡΠ΅ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ CSS, ΡΡΠΎ Π·Π°ΡΡΠ°Π²ΠΈΡ Π²ΠΈΠ΄Π΅ΠΎ ΡΠΉΡΠΈ Π½Π° Π·Π°Π΄Π½ΠΈΠΉ ΠΏΠ»Π°Π½ ΠΈ Π·Π°ΠΉΠΌΠ΅Ρ 100% ΡΠΈΡΠΈΠ½Ρ ΠΈ Π²ΡΡΠΎΡΡ ΠΎΠΊΠ½Π°.
.videoBgWrapper {
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅;
Π²Π΅ΡΡ
: 0;
ΡΠΏΡΠ°Π²Π°: 0;
Π²Π½ΠΈΠ·Ρ: 0;
ΡΠ»Π΅Π²Π°: 0;
ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅: ΡΠΊΡΡΡΠΎ;
z-ΠΈΠ½Π΄Π΅ΠΊΡ: -100;
}
.videoBg {
ΠΏΠΎΠ·ΠΈΡΠΈΡ: Π°Π±ΡΠΎΠ»ΡΡΠ½Π°Ρ;
Π²Π΅ΡΡ
: 0;
ΡΠ»Π΅Π²Π°: 0;
ΡΠΈΡΠΈΠ½Π°: 100%;
Π²ΡΡΠΎΡΠ°: 100%;
}
4) ΠΠ°ΠΊΠΎΠ½Π΅Ρ, Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΠΎΠ² ΠΌΡ ΡΠΎΡ ΡΠ°Π½ΠΈΠΌ ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ ΡΡΠΎΡΠΎΠ½ Π²ΠΈΠ΄Π΅ΠΎ ΠΈ Π½Π°ΡΡΡΠΎΠΈΠΌ Π΅Π³ΠΎ ΡΠ°ΠΊ, ΡΡΠΎΠ±Ρ ΠΎΠΊΠ½ΠΎ Π²ΡΠ΅Π³Π΄Π° Π±ΡΠ»ΠΎ ΠΏΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½ΡΠΌ ΡΠΎΠ½ΠΎΠΌ.
@media (ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΠΎΠ΅ ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ ΡΡΠΎΡΠΎΠ½: 16/9) {
.videoBg {
ΡΠΈΡΠΈΠ½Π°: 100%;
Π²ΡΡΠΎΡΠ°: Π°Π²ΡΠΎ;
}
}
@media (ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎΠ΅ ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ ΡΡΠΎΡΠΎΠ½: 16/9) {
.videoBg {
ΡΠΈΡΠΈΠ½Π°: Π°Π²ΡΠΎ;
Π²ΡΡΠΎΡΠ°: 100%;
}
}
ΠΡΠ»ΠΈ Π²ΡΠ΅ ΠΈΠ΄Π΅Ρ Ρ ΠΎΡΠΎΡΠΎ, Ρ Π²Π°Ρ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±ΡΡΡ ΠΏΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½ΠΎΠ΅ Π²ΠΈΠ΄Π΅ΠΎ Π½Π° ΡΠΎΠ½Π΅ Π²Π°ΡΠ΅Π³ΠΎ ΡΠ°ΠΉΡΠ°. Π‘Π°ΠΌΠΎΠ΅ ΠΏΡΠΈΡΡΠ½ΠΎΠ΅ ΡΠΎ, ΡΡΠΎ ΠΎΠ½ ΡΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌ Ρ Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²ΠΎΠΌ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ², ΠΊΡΠΎΠΌΠ΅ Explorer 8, Π½ΠΎ ΠΊΠΎΠ³ΠΎ ΡΡΠΎ Π²ΠΎΠ»Π½ΡΠ΅Ρ.
ΠΠ°ΡΠ»Π°ΠΆΠ΄Π°ΠΉΡΠ΅ΡΡ
ΠΡΡΡΡΡΠΉ ΡΠΎΠ²Π΅Ρ - ΡΠ΄Π΅Π»Π°ΠΉΡΠ΅ ΠΏΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½ΡΠΉ ΡΠΎΠ½ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΡΡΠΎΠΊΠΈ CSS
ΠΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½ΡΠ΅ ΡΠΎΠ½ΠΎΠ²ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΡ, Π΅ΡΠ»ΠΈ Π²Ρ ΡΠΎΠ·Π΄Π°Π΅ΡΠ΅ ΠΏΠΎΡΡΡΠΎΠ»ΠΈΠΎ ΠΈΠ»ΠΈ Π²Π΅Π±-ΡΠ°ΠΉΡ Ρ ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΡΠΌΠΈ. ΠΠ±ΡΡΠ½ΠΎ Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΠΏΠ»Π°Π³ΠΈΠ½ jQuery, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅Ρ ΡΠ°Π·ΠΌΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² ΠΎΠΊΠ½Π΅ Π±ΡΠ°ΡΠ·Π΅ΡΠ° ΠΈ Π²ΡΠΏΠΎΠ»Π½ΡΠ΅Ρ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΡΠ΅ Π²ΡΡΠΈΡΠ»Π΅Π½ΠΈΡ, ΡΡΠΎΠ±Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠΊΡΡΠ»ΠΎ Π²ΡΡ ΡΠΈΡΠΈΠ½Ρ ΠΈ Π²ΡΡΠΎΡΡ ΡΡΡΠ°Π½ΠΈΡΡ.
ΠΠΎ Π·Π½Π°Π΅ΡΠ΅ Π»ΠΈ Π²Ρ, ΡΡΠΎ Π΅ΡΠ»ΠΈ Π²Ρ Π³ΠΎΡΠΎΠ²Ρ ΠΏΠΎΠΆΠ΅ΡΡΠ²ΠΎΠ²Π°ΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΎΠΉ IE8 ΠΈ Π±ΠΎΠ»Π΅Π΅ ΡΠ°Π½Π½ΠΈΡ Π²Π΅ΡΡΠΈΠΉ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π΄ΠΎΠ±ΠΈΡΡΡΡ ΡΠ°ΠΊΠΎΠ³ΠΎ Π²ΠΏΠ΅ΡΠ°ΡΠ»ΡΡΡΠ΅Π³ΠΎ ΡΡΡΠ΅ΠΊΡΠ° ΡΠΎΠ»ΡΠΊΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΡΡΠΎΡΠΊΠΈ CSS? ΠΠΎΡ ΠΊΠ°ΠΊ ΡΡΠΎ ΡΠ΄Π΅Π»Π°ΡΡ..
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΠΎΠ½Π°
Π‘ ΠΏΠΎΠΌΠΎΡΡΡ background-size Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΊΠ°Π·Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, Π½Π°ΡΠΊΠΎΠ»ΡΠΊΠΎ Π±ΠΎΠ»ΡΡΠΈΠΌ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±ΡΡΡ Π΅Π³ΠΎ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅. ΠΠ°ΠΊ ΡΡΠΎ:
#elem { ΡΠΎΠ½: url ('kermit.jpg') ΡΠ΅Π½ΡΡ ΡΠ΅Π½ΡΡ Π±Π΅Π· ΠΏΠΎΠ²ΡΠΎΡΠ°; ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΎΠ½Π°: 100 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ 150 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; }
ΠΠΎ ΡΡΠΎ Π΅ΡΠ΅ ΡΠ΄ΠΎΠ±Π½Π΅Π΅, ΡΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ Π΄Π²Π° ΠΌΠ°Π³ΠΈΡΠ΅ΡΠΊΠΈΡ
Π·Π½Π°ΡΠ΅Π½ΠΈΡ: ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ
ΠΈ ΠΎΡ
Π²Π°ΡΡΠ²Π°Π΅Ρ
:
- Π‘ΠΎΠ΄Π΅ΡΠΆΠ°ΡΡ ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅Ρ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠ°ΠΊ, ΡΡΠΎΠ±Ρ ΠΎΠ½ΠΎ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΠΏΠΎΠΌΠ΅ΡΠ°Π»ΠΎΡΡ Π² ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ΅;
- ΠΠ±Π»ΠΎΠΆΠΊΠ° Π±ΠΎΠ»Π΅Π΅ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½Π° - ΠΎΠ½Π° ββΠ΄Π΅Π»Π°Π΅Ρ ΡΠ°ΠΊ, ΡΡΠΎ ΡΠΎΠ½ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅.Π Π°Π·ΠΌΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅ΡΡΡ Π΄ΠΎ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ, ΡΡΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π΅ΠΌΡ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΠΏΠΎΠΊΡΡΠ²Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ (ΡΠΌ. ΠΠ»Π»ΡΡΡΡΠ°ΡΠΈΡ Π½ΠΈΠΆΠ΅). ΠΡΠΎ ΡΠ°ΠΊΠΆΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΌΡ Π±ΡΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π»Ρ Π½Π°ΡΠ΅Π³ΠΎ ΠΏΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½ΠΎΠ³ΠΎ ΡΠΎΠ½Π°.
ΠΡΠ°ΠΊ, Π²ΡΠ΅, ΡΡΠΎ Π½Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ, ΡΡΠΎ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΌΡ Ρ ΠΎΡΠΈΠΌ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ Π² ΠΏΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½ΠΎΠΌ ΡΠ΅ΠΆΠΈΠΌΠ΅ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΡΠΎΠ½Π° Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° html:
html { / * ΠΡΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π±ΡΠ΄Π΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Π² ΠΏΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½ΠΎΠΌ ΡΠ΅ΠΆΠΈΠΌΠ΅ * / ΡΠΎΠ½: url ('background.jpg') ΡΠ΅Π½ΡΡ Π±Π΅Π· ΠΏΠΎΠ²ΡΠΎΡΠ°; / * Π£Π±Π΅Π΄ΠΈΡΠ΅ΡΡ, ΡΡΠΎ ΡΠ»Π΅ΠΌΠ΅Π½Ρ html Π²ΡΠ΅Π³Π΄Π° Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ Π²ΡΡ Π²ΡΡΠΎΡΡ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ° * / ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½Π°Ρ Π²ΡΡΠΎΡΠ°: 100%; /* ΠΠ°Π³ΠΈΡ */ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΎΠ½Π°: ΠΎΠ±Π»ΠΎΠΆΠΊΠ°; } ΡΠ΅Π»ΠΎ{ / * ΠΠ±Ρ ΠΎΠ΄Π½ΠΎΠΉ ΠΏΡΡΡ Π΄Π»Ρ Π½Π΅ΠΊΠΎΡΠΎΡΡΡ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ² * / ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½Π°Ρ Π²ΡΡΠΎΡΠ°: 100%; }
Π ΡΠ΅ΠΏΠ΅ΡΡ Π²Π°ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ Π½Π° Π²Π΅ΡΡ ΡΠΊΡΠ°Π½! ΠΠ½ Π±ΡΠ΄Π΅Ρ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡ ΡΠ²ΠΎΠΈ ΡΠ°Π·ΠΌΠ΅ΡΡ ΠΏΠΎ ΠΌΠ΅ΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΠΎΠΊΠ½Π° ΠΈΠ»ΠΈ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ².ΠΠ½ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π²ΠΎ Π²ΡΠ΅Ρ ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΡ Π½Π°ΡΡΠΎΠ»ΡΠ½ΡΡ ΠΈ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ (Π±Π΅Π· IE8 ΠΈ Π½ΠΈΠΆΠ΅, ΠΊΠ°ΠΊ ΡΠΏΠΎΠΌΠΈΠ½Π°Π»ΠΎΡΡ Π²ΡΡΠ΅).
ΠΠΎΠ»ΡΡΠΎΠ΅ ΡΠΏΠ°ΡΠΈΠ±ΠΎ ΠΠ°Π½ΡΠΈΠΈ Π·Π° Π΅Π³ΠΎ ΡΡΠ΄Π΅ΡΠ½ΡΠΉ ΠΎΠ±ΡΠ°Π·.
Bootstrap StudioΠ Π΅Π²ΠΎΠ»ΡΡΠΈΠΎΠ½Π½ΡΠΉ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½Ρ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΡ Π²Π΅Π±-ΡΠ°ΠΉΡΠΎΠ² ΠΈ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ.
Π£ΡΠΈΡΡ Π±ΠΎΠ»ΡΡΠ΅CSS ΠΈ CSS3 ΠΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½ΠΎΠ΅ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ - Dreamweaver CS6
1.ΠΡΠ±ΠΎΡ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
ΠΡΠΎ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΡΠ°ΠΌΠΎ ΡΠΎΠ±ΠΎΠΉ ΡΠ°Π·ΡΠΌΠ΅ΡΡΠΈΠΌΡΡ, Π½ΠΎ, ΡΡΠΎΠ±Ρ Π±ΡΡΡ Π²Π½ΠΈΠΌΠ°ΡΠ΅Π»ΡΠ½ΡΠΌ, Π²Ρ Π΄ΠΎΠ»ΠΆΠ½Ρ ΡΠ±Π΅Π΄ΠΈΡΡΡΡ, ΡΡΠΎ Π²Π°ΡΠ΅ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, Π²Π΅ΡΠΎΡΡΠ½ΠΎ, ΠΈΠΌΠ΅Π΅Ρ ΡΠΈΡΠΈΠ½Ρ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅ 2000 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΈΠ»ΠΈ ΠΎΠΊΠΎΠ»ΠΎ ΡΠΎΠ³ΠΎ. Π§Π΅ΠΌ Π±ΠΎΠ»ΡΡΠ΅, ΡΠ΅ΠΌ Π»ΡΡΡΠ΅ ΠΏΡΠΈ ΡΠ°Π±ΠΎΡΠ΅ Ρ ΡΠΎΠ½ΠΎΠ²ΡΠΌΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌΠΈ Π² ΠΠ½ΡΠ΅ΡΠ½Π΅ΡΠ΅, ΠΏΡΠΎΡΡΠΎ ΠΏΠΎΡΡΠ°ΡΠ°ΠΉΡΠ΅ΡΡ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎ ΠΎΠΏΡΠΈΠΌΠΈΠ·ΠΈΡΠΎΠ²Π°ΡΡ ΡΡΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅.2. Π’Π΅Ρ Π½ΠΈΠΊΠ° CSS: ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
ΠΡΠΏΠΎΠ»ΡΠ·ΡΡ ΠΏΡΠΎΡΡΠΎΠΉ ΠΌΠ΅ΡΠΎΠ΄ CSS, Π½Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΡΠ½Π°ΡΠ°Π»Π° ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΡΡ Π½Π°ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π±ΡΠ΄Π΅Ρ ΡΠΎΠ½ΠΎΠ²ΡΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ. Π§ΡΠΎΠ±Ρ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΡΡ ΡΡΠΎ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΡΡΠ΅Π΅ ΠΌΠ΅ΡΡΠΎ, Π΄Π°Π²Π°ΠΉΡΠ΅ ΠΏΠ΅ΡΠ΅ΠΉΠ΄Π΅ΠΌ Π² ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ Β«ΠΠΎΠ΄Β» ΠΈ ΠΏΠ΅ΡΠ΅ΡΠ°ΡΠΈΠΌ Π½Π°ΡΠ΅ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Ρ ΠΏΠ°Π½Π΅Π»ΠΈ Β«Π€Π°ΠΉΠ»ΡΒ» Π² ΠΏΠ΅ΡΠ²ΡΡ ΡΡΡΠΎΠΊΡ ΠΏΠΎΠ΄ ΠΎΡΠΊΡΡΠ²Π°ΡΡΠΈΠΌ ΡΠ΅Π³ΠΎΠΌ Β«bodyΒ».3. ΠΠ°Π·Π½Π°ΡΡΡΠ΅ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΎΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
ΠΠ΅ΡΠ΅ΠΉΠ΄ΠΈΡΠ΅ Π² ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ Β«ΠΠΈΠ·Π°ΠΉΠ½Β» ΠΈ Π²ΡΠ±Π΅ΡΠΈΡΠ΅ ΡΡΠΎ Π±ΠΎΠ»ΡΡΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ΅, Π²Π΅ΡΠΎΡΡΠ½ΠΎ, Π±ΡΠ΄Π΅Ρ ΠΏΠΎΠΊΡΡΠ²Π°ΡΡ Π²ΡΠ΅ (Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠΎΠΊΡΡΡΠΈΡΡ Π²Π½ΠΈΠ·, ΡΡΠΎΠ±Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ ΡΠ²ΠΎΠΉ Π²Π΅Π±-ΡΠ°ΠΉΡ ΠΏΠΎΠ΄ ΡΡΠΈΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ, Π΅ΡΠ»ΠΈ Π²Ρ Π±Π΅ΡΠΏΠΎΠΊΠΎΠΈΡΠ΅ΡΡ), ΠΈ ΠΏΠΎΡΠ»Π΅ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π²Ρ Π²ΡΠ±ΡΠ°Π»ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΠΏΠΎΡΠΌΠΎΡΡΠΈΡΠ΅ Π½Π° ΠΏΠ°Π½Π΅Π»Ρ Β«Π‘Π²ΠΎΠΉΡΡΠ²Π°Β» ΠΈ Π΄Π°ΠΉΡΠ΅ ΡΡΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ - ΡΡΠΎ ΠΈΠΌΡ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΎΡΠ° Β«fsbgΒ», ΠΊΠΎΡΠΎΡΠΎΠ΅ Π±ΡΠ΄Π΅Ρ Π½Π°ΡΠΈΠΌ ΠΌΠ°Π»Π΅Π½ΡΠΊΠΈΠΌ ΡΠΎΠΊΡΠ°ΡΠ΅Π½ΠΈΠ΅ΠΌ Β«ΠΏΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½ΡΠΉ ΡΠΎΠ½Β».4. ΠΠ°ΡΠ½ΠΈΡΠ΅ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ CSS
ΠΡ Π±ΡΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΡ Dreamweaver Π΄Π»Ρ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ CSS ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ CSS ΠΏΡΡΠΌΠΎ Π² ΡΡΠΎΡ Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ. ΠΡΠ»ΠΈ Π²Ρ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΠΏΡΠΎΠ΄Π²ΠΈΠ½ΡΡΡ, ΡΡΠΎΠ±Ρ ΠΏΠΈΡΠ°ΡΡ CSS ΠΈ / ΠΈΠ»ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π²Π½Π΅ΡΠ½ΠΈΠΉ ΡΠ°ΠΉΠ» CSS, ΡΡΠΎ Π·Π°ΠΌΠ΅ΡΠ°ΡΠ΅Π»ΡΠ½ΠΎ ΠΈ Π½Π°ΡΡΠΎΡΡΠ΅Π»ΡΠ½ΠΎ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΡΡΡ, Π½ΠΎ Π·Π΄Π΅ΡΡ ΠΌΡ Π½Π΅ Π±ΡΠ΄Π΅ΠΌ ΡΡΠ»ΠΎΠΆΠ½ΡΡΡ Π·Π°Π΄Π°ΡΡ.ΠΠ΅ΡΠ΅ΠΉΠ΄ΠΈΡΠ΅ Β«ΠΠΊΠ½ΠΎΒ»> Β«Π‘ΡΠΈΠ»ΠΈ CSSΒ», ΡΡΠΎΠ±Ρ ΠΎΡΠΊΡΡΡΡ ΠΏΠ°Π½Π΅Π»Ρ CSS, ΠΈ Π½Π°ΠΆΠΌΠΈΡΠ΅ ΠΌΠ°Π»Π΅Π½ΡΠΊΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ Β«ΠΠΎΠ±Π°Π²ΠΈΡΡ Π½ΠΎΠ²ΠΎΠ΅ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ CSSΒ» Π² ΠΏΡΠ°Π²ΠΎΠΌ Π½ΠΈΠΆΠ½Π΅ΠΌ ΡΠ³Π»Ρ ΠΏΠ°Π½Π΅Π»ΠΈ.5. ΠΠ°Π΄Π°ΠΉΡΠ΅ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΎΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS
Π Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²ΠΎΠΌ ΠΎΠΊΠ½Π΅ Β«ΠΠΎΠ²ΠΎΠ΅ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ CSSΒ» ΠΌΡ Ρ ΠΎΡΠΈΠΌ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΡΠΈΠΏ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠ° Π½Π° Β«IDΒ», Π° Π·Π°ΡΠ΅ΠΌ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΎΡ Π½Π° Β«#fsbgΒ» ΠΈ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΠΏΡΠ°Π²ΠΈΠ»Π° ΠΊΠ°ΠΊ Β«(Π’ΠΎΠ»ΡΠΊΠΎ ΡΡΠΎΡ Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ)Β». ΠΡΠΎ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΡ Π·Π΄Π΅ΡΡ CSS-ΠΊΠΎΠ΄ Π½Π° Π½Π°ΡΠ΅ΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅ ΠΈ Π½Π°ΡΠ΅Π»Π΅Π½ Π½Π° Π»ΡΠ±ΠΎΠΉ HTML-ΡΠ»Π΅ΠΌΠ΅Π½Ρ Ρ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΎΡΠΎΠΌ Β«fsbgΒ».6. ΠΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠΎΠ½Π° Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΏΡΠΎΠΏΠΎΡΡΠΈΠΈ
ΠΡΠ±Π΅ΡΠΈΡΠ΅ ΠΎΠΏΡΠΈΡ Β«ΠΠΎΡΠΎΠ±ΠΊΠ°Β» ΠΈ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΠ΅ ΡΠΈΡΠΈΠ½Ρ Β«100%Β» ΠΈ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΠ΅ Π²ΡΡΠΎΡΡ Β«ΠΠ²ΡΠΎΒ».ΠΠ°ΠΆΠΌΠΈΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΡ Β«ΠΡΠΈΠΌΠ΅Π½ΠΈΡΡΒ» ΠΈ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ΠΈΡΠ΅ ΠΊ ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌΡ ΡΠ°Π³Ρ.7. ΠΠ°ΡΠΈΠΊΡΠΈΡΡΠΉΡΠ΅ ΡΠΎΠ½ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ
ΠΠ°ΡΠ΅ΠΌ Π²ΡΠ±Π΅ΡΠΈΡΠ΅ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡ Β«ΠΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅Β» ΠΈ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΠ΅ Π΄Π»Ρ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠΎΠ² Β«ΠΠ²Π΅ΡΡ ΡΒ» ΠΈ Β«Π‘Π»Π΅Π²Π°Β» Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Β«0Β» - ΠΏΡΠΈ ΡΡΠΎΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π²ΡΠ΅Π³Π΄Π° Π±ΡΠ΄Π΅Ρ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΡΡΡΡ Π² Π²Π΅ΡΡ Π½ΠΈΠΉ Π»Π΅Π²ΡΠΉ ΡΠ³ΠΎΠ». Π’Π°ΠΊΠΆΠ΅ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΠ΅ Π΄Π»Ρ Position Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Β«fixedΒ» - ΡΡΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ Π½Π°ΡΠ΅ΠΌΡ ΠΊΠΎΠ½ΡΠ΅Π½ΡΡ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΡΡΡΡ ΠΏΠΎ ΡΠΎΠ½ΠΎΠ²ΠΎΠΌΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. ΠΠ°ΠΊΠΎΠ½Π΅Ρ, ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΠ΅ Z-index Π½Π° Β«-100Β» - ΡΡΠΎ ΠΏΠΎΠ΄ΡΠΎΠ»ΠΊΠ½Π΅Ρ ΡΠΎΠ½ Β«ΠΏΠΎΠ΄Β» Π²ΡΠ΅ΠΌ ΠΎΡΡΠ°Π»ΡΠ½ΡΠΌ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠΎΠΌ, ΡΠ°ΠΊ ΡΡΠΎ Π½Π°Ρ Π²Π΅Π±-ΡΠ°ΠΉΡ ΠΎΠΊΠ°ΠΆΠ΅ΡΡΡ Β«ΠΏΠΎΠ²Π΅ΡΡ Β» Π½Π°ΡΠ΅Π³ΠΎ ΡΠΎΠ½Π°. ΠΠ°ΠΆΠΌΠΈΡΠ΅ Β«ΠΠΒ», ΡΡΠΎΠ±Ρ Π·Π°ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°ΡΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ.8. ΠΠΎΠ±Π°Π²ΡΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° CSS Π²ΡΡΡΠ½ΡΡ
ΠΠ°ΠΌ Π²ΡΠ΅ Π΅ΡΠ΅ Π½ΡΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π΄Π²Π° Π½Π΅Π±ΠΎΠ»ΡΡΠΈΡ ΠΊΡΡΠΎΡΠΊΠ° CSS. ΠΠ΅ΡΠ½ΡΠ²ΡΠΈΡΡ Π½Π° Π½Π°ΡΡ ΠΏΠ°Π½Π΅Π»Ρ CSS, Π½Π°ΠΆΠΌΠΈΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΡ ΡΡΡΠ»ΠΊΠΈ Β«ΠΠΎΠ±Π°Π²ΠΈΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎΒ» ΠΈ Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π°: Β«min-heightΒ», ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Π½ΠΎΠ΅ Π½Π° Β«100%Β», ΡΡΠΎ Π³Π°ΡΠ°Π½ΡΠΈΡΡΠ΅Ρ, ΡΡΠΎ Π½Π°ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π·Π°ΠΏΠΎΠ»Π½ΠΈΡ ΠΎΠ±Π»Π°ΡΡΡ ΡΠΊΡΠ°Π½Π° ΡΠ²Π΅ΡΡ Ρ Π²Π½ΠΈΠ·. Π’Π°ΠΊΠΆΠ΅ Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ min-width, ΡΠ°Π²Π½ΠΎΠ΅ Β«1040pxΒ», ΡΡΠΎ ΡΠΈΡΠΈΠ½Π° ΠΎΠ±ΠΎΠ»ΠΎΡΠΊΠΈ Π½Π° ΠΌΠΎΠ΅ΠΌ ΡΠ°ΠΉΡΠ΅, ΠΏΠΎΡΡΠΎΠΌΡ Ρ Π²ΡΠ΅Π³Π΄Π° Ρ ΠΎΡΡ, ΡΡΠΎΠ±Ρ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π±ΡΠ»ΠΎ ΠΊΠ°ΠΊ ΠΌΠΈΠ½ΠΈΠΌΡΠΌ ΡΠ°ΠΊΠΎΠΉ ΠΆΠ΅ ΡΠΈΡΠΈΠ½Ρ. ΠΠ±ΡΠ°ΡΠΈΡΠ΅ΡΡ ΠΊ ΠΌΠΎΠ΅ΠΌΡ ΡΠ½ΠΈΠΌΠΊΡ ΡΠΊΡΠ°Π½Π°, Π΅ΡΠ»ΠΈ Ρ Π²Π°Ρ Π΅ΡΡΡ Π²ΠΎΠΏΡΠΎΡΡ ΠΎ ΡΠΎΠΌ, ΡΡΠΎ ΠΈ Π³Π΄Π΅ Π²Ρ ΠΏΠ΅ΡΠ°ΡΠ°Π΅ΡΠ΅.9. ΠΡΠ΅Π΄Π²Π°ΡΠΈΡΠ΅Π»ΡΠ½ΡΠΉ ΠΏΡΠΎΡΠΌΠΎΡΡ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅
ΠΠ°ΠΆΠΌΠΈΡΠ΅ Β«F12Β», ΡΡΠΎΠ±Ρ ΠΏΡΠΎΡΠΌΠΎΡΡΠ΅ΡΡ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅ ΠΈ ΠΏΡΠΎΠ²Π΅ΡΠΈΡΡ. ΠΠ·ΠΌΠ΅Π½ΠΈΡΠ΅ ΡΠ°Π·ΠΌΠ΅Ρ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ° ΠΈ ΠΏΠΎΡΠΌΠΎΡΡΠΈΡΠ΅, ΠΊΠ°ΠΊ ΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΡΠΎΠ½.10. ΠΡΠΎΡ ΠΌΠ΅ΡΠΎΠ΄ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π² ΡΡΠΈΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ
ΠΡΠ° Π²Π΅ΡΡΠΈΡ ΠΎΡΠ»ΠΈΡΠ½ΠΎ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΈΡ Π΄Π»Ρ Google Chrome, Mozilla Firefox, Opera ΠΈ Safari. ΠΠ½ ΡΠ°ΠΊΠΆΠ΅ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π² IE7, 8 ΠΈ 9.11. ΠΠ΅ΡΠΎΠ΄ CSS3
Π’Π΅ΠΏΠ΅ΡΡ ΠΌΡ ΡΠΎΠ±ΠΈΡΠ°Π΅ΠΌΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π±ΠΎΠ»Π΅Π΅ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ ΠΈ Π±ΡΡΡΡΡΡ ΡΠ΅Ρ Π½ΠΈΠΊΡ, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ CSS3, Π° ΡΠ°ΠΊΠΆΠ΅ Π²ΡΡΡΠ½ΡΡ Π½Π°ΠΏΠΈΡΠ΅ΠΌ Π½Π°Ρ CSS Π²ΠΎ Π²Π½Π΅ΡΠ½ΠΈΠΉ ΡΠ°ΠΉΠ» CSS. ΠΠ°Π²Π°ΠΉ ΠΏΠΎΠ²Π΅ΡΠ΅Π»ΠΈΠΌΡΡ.ΠΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ ΡΠ΅Ρ Π½ΠΈΠΊΡ, ΠΊΠΎΡΠΎΡΡΡ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΉΡΠΈ Π½Π° CSS-Tricks.com, ΡΠΏΠ°ΡΠΈΠ±ΠΎ ΠΡΠΈΡΡ ΠΈ Π΅Π³ΠΎ ΡΠ΄ΠΈΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎΠΌΡ ΡΠ°ΠΉΡΡ!12. ΠΡΠΈΠΊΡΠ΅ΠΏΠΈΡΠ΅ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅
ΠΠ°ΡΠ½ΠΈΡΠ΅ Ρ ΡΠ°ΡΠ³Π΅ΡΠΈΠ½Π³Π° ΡΠ΅Π³Π° body Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS ΠΈ ΠΏΡΠΈΠΊΡΠ΅ΠΏΠΈΡΠ΅ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΠΈ ΠΌΡ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠ»ΠΈ, ΡΡΠΎΠ±Ρ ΡΠΎΠ½ Π½Π΅ ΠΏΠΎΠ²ΡΠΎΡΡΠ»ΡΡ, ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°Π»ΡΡ ΠΏΠΎ ΡΠ΅Π½ΡΡΡ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ ΠΈ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΠΈ, Π° ΡΠ°ΠΊΠΆΠ΅ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠ» ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅. ΠΊΡΠ·ΠΎΠ² {
ΡΠΎΠ½: url (../ images / fullscreen-bg.jpg) ΡΠ΅Π½ΡΡΠ°Π»ΡΠ½ΡΠΉ ΡΠ΅Π½ΡΡ Π±Π΅Π· ΠΏΠΎΠ²ΡΠΎΡΠ° ΠΈΡΠΏΡΠ°Π²Π»Π΅Π½;
}
13. Π£ΡΡΠ°Π½ΠΎΠ²ΠΈΡΠ΅ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΎΠ½Π° CSS3
Π’Π΅ΠΏΠ΅ΡΡ ΠΌΡ ΡΠΎΠ±ΠΈΡΠ°Π΅ΠΌΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Β«ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΎΠ½Π°Β», ΡΡΠΎΠ±Ρ ΡΠΊΠ°Π·Π°ΡΡ, ΡΡΠΎ ΡΡΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΏΠΎΠΊΡΡΠ²Π°ΡΡ Π²ΡΡ ΠΎΠ±Π»Π°ΡΡΡ ΡΠΊΡΠ°Π½Π°.ΠΡ Π΄ΡΠ±Π»ΠΈΡΡΠ΅ΠΌ Β«ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΎΠ½Π°Β» Ρ ΠΏΡΠ΅ΡΠΈΠΊΡΠΎΠΌ Π΄Π»Ρ Safari ΠΈ Chrome (-webkit-), Π·Π°ΡΠ΅ΠΌ ΡΠ½ΠΎΠ²Π° Ρ ΠΏΡΠ΅ΡΠΈΠΊΡΠΎΠΌ Π΄Π»Ρ Firefox (-moz-), Π° Π·Π°ΡΠ΅ΠΌ ΡΠ½ΠΎΠ²Π° Ρ ΠΏΡΠ΅ΡΠΈΠΊΡΠΎΠΌ Π΄Π»Ρ Opera (-o-). ΠΡΡ ΠΎΠ΄Π½ΡΠΉ Β«ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΎΠ½Π°Β» ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΈΡ ΠΏΠΎΡΡΠΈ Π΄Π»Ρ Π²ΡΠ΅Ρ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ², Π½ΠΎ ΠΌΡ ΠΏΠΎ-ΠΏΡΠ΅ΠΆΠ½Π΅ΠΌΡ Ρ ΠΎΡΠΈΠΌ Π±ΡΡΡ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΡΠΌΠΈ Π΄Π»Ρ Π±ΠΎΠ»Π΅Π΅ ΡΡΠ°ΡΡΡ Π²Π΅ΡΡΠΈΠΉ ΡΡΠΈΡ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ². -webkit-background-size: ΠΎΠ±Π»ΠΎΠΆΠΊΠ°; / * ΠΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Safari & amp; Π₯ΡΠΎΠΌ*/
-moz-background-size: ΠΎΠ±Π»ΠΎΠΆΠΊΠ°; / * ΠΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Firefox * /
-o-background-size: ΠΎΠ±Π»ΠΎΠΆΠΊΠ°; / * ΠΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Opera * /
ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΎΠ½Π°: ΠΎΠ±Π»ΠΎΠΆΠΊΠ°; / * ΠΡΠ΅ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ * /
14.
ΠΡΠΎΡ ΠΌΠ΅ΡΠΎΠ΄ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π² ΡΡΠΈΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ ΠΡΠ° Π²Π΅ΡΡΠΈΡ ΠΎΡΠ»ΠΈΡΠ½ΠΎ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΈΡ Π΄Π»Ρ Google Chrome, Mozilla Firefox 3.6+, Opera 10+ ΠΈ Safari 3+. ΠΠ½ ΡΠ°ΠΊΠΆΠ΅ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π² IE9 +.15. ΠΠΎΡΠΎΠ²Π°Ρ ΠΏΡΠΎΠ΄ΡΠΊΡΠΈΡ
ΠΠ°ΠΆΠΌΠΈΡΠ΅ Β«F12Β», ΡΡΠΎΠ±Ρ ΠΏΡΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΡΠΎΠ½ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅ ΠΈ ΠΏΠΎΠ»ΡΠ±ΠΎΠ²Π°ΡΡΡΡ ΡΠ²ΠΎΠ΅ΠΉ ΡΠ°Π±ΠΎΡΠΎΠΉ!ΠΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΡ: ΠΠ°ΠΊΠ΅ΡΠ½ΠΎΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ jQuery: jQuery Backstretch
http://srobbin.com/jquery-plugins/backstretch/ΠΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΡ: ΠΠ°ΠΊΠ΅ΡΠ½ΠΎΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ jQuery: Supersized
http://buildinternet.com/2011/07/supersized-3-2-fullscreen-jquery-slideshow/ ΠΠΎΠ΄ΠΏΠΈΡΠΈΡΡ Π½Π° ΠΌΠ΅Π½Ρ Π² Π’Π²ΠΈΡΡΠ΅ΡΠ΅! ΠΠΎΡΡΠ°Π²ΡΡΠ΅ Π»Π°ΠΉΠΊ Π’ΡΡΠ²ΠΈΠ΄Ρ Π½Π° Facebook!ΠΡΠ°Π²ΠΈΡΡΡ:
ΠΡΠ°Π²ΠΈΡΡΡ ΠΠ°Π³ΡΡΠ·ΠΊΠ°...
ΠΠΎΠ±Π°Π²ΠΈΡΡ ΠΏΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½ΡΠΉ Π²ΠΈΠ΄Π΅ΠΎ ΡΠΎΠ½ HTML5 Π½Π° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ
*** Π Π°Π±ΠΎΡΠ°Ρ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ Π½Π° CodePen.
CSS ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π½Π°ΠΌ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, Π½ΠΎ Π² Π½Π°ΡΡΠΎΡΡΠ΅Π΅ Π²ΡΠ΅ΠΌΡ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ Π²ΠΈΠ΄Π΅ΠΎ.
ΠΠ΅ Π±Π΅ΡΠΏΠΎΠΊΠΎΠΉΡΠ΅ΡΡ, Π½Π°ΡΡΡΠΎΠΉΠΊΡ ΠΏΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½ΠΎΠ³ΠΎ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ Π²ΠΈΠ΄Π΅ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π»Π΅Π³ΠΊΠΎ ΡΠΎΠ·Π΄Π°ΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΏΡΠΎΡΡΡΡ HTML ΠΈ CSS.
ΠΠ΅ΡΠ²ΡΠΌ Π΄Π΅Π»ΠΎΠΌ Π½ΡΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠ΅Π³ Π² HTML-ΡΠ°ΠΉΠ» ΡΠΎ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌΠΈ Π½Π°ΡΡΡΠΎΠΉΠΊΠ°ΠΌΠΈ:
<Π²ΠΈΠ΄Π΅ΠΎ ΠΏΠ»Π°ΠΊΠ°Ρ = "ΡΠΊΡΠΈΠ½ΡΠΎΡ.jpg "Π°Π²ΡΠΎΠ·Π°ΠΏΡΡΠΊ Π²ΠΎΡΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠΉ Π±Π΅Π·Π·Π²ΡΡΠ½ΡΠΉ ΡΠΈΠΊΠ»>
ΠΠΎΠΉΡΠΈ Π² ΠΏΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½ΡΠΉ ΡΠ΅ΠΆΠΈΠΌΠΡΠΉΡΠΈ ΠΈΠ· ΠΏΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½ΠΎΠ³ΠΎ ΡΠ΅ΠΆΠΈΠΌΠ°webm - Π»ΡΡΡΠΈΠΉ ΡΠΎΡΠΌΠ°Ρ Π΄Π»Ρ Π²Π΅Π±-Π²ΠΈΠ΄Π΅ΠΎ, Π½ΠΎ ΠΎΠ½ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΡΡ Π½Π΅ Π²ΡΠ΅ΠΌΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌΠΈ, ΠΏΠΎΡΡΠΎΠΌΡ mp4 ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ Π·Π°ΠΏΠ°ΡΠ½ΠΎΠ³ΠΎ Π²Π°ΡΠΈΠ°Π½ΡΠ°.
ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΏΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ Π΄ΡΡΠ³ΠΈΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠ΅ Π·Π΄Π΅ΡΡ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ:
-
ΠΏΠ»Π°ΠΊΠ°Ρ
- ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π²ΠΎ Π²ΡΠ΅ΠΌΡ Π·Π°Π³ΡΡΠ·ΠΊΠΈ Π²ΠΈΠ΄Π΅ΠΎ ΠΈ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Ρ Π΄Π»Ρ Π½Π΅ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΠΌΡΡ ΡΡΡΡΠΎΠΉΡΡΠ². -
autoplay
- Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ Π·Π°ΠΏΡΡΠΊΠ°Π΅Ρ Π²ΠΎΡΠΏΡΠΎΠΈΠ·Π²Π΅Π΄Π΅Π½ΠΈΠ΅ Π²ΠΈΠ΄Π΅ΠΎ ΠΏΠΎΡΠ»Π΅ Π·Π°Π³ΡΡΠ·ΠΊΠΈ. -
playsinline
- ΠΏΡΠ΅Π΄ΠΎΡΠ²ΡΠ°ΡΠ°Π΅Ρ ΠΏΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½ΡΠΉ ΡΠ΅ΠΆΠΈΠΌ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠΊΡΡΠ²Π°Π΅Ρ ΠΊΠΎΠ½ΡΠ΅Π½Ρ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ . -
Π±Π΅Π· Π·Π²ΡΠΊΠ°
- ΠΡΠ»ΠΎ Π±Ρ Π³ΡΡΠ±ΠΎ ΠΈΠΌΠ΅ΡΡ Π²ΠΈΠ΄Π΅ΠΎ Ρ Π°Π²ΡΠΎΠ²ΠΎΡΠΏΡΠΎΠΈΠ·Π²Π΅Π΄Π΅Π½ΠΈΠ΅ΠΌ ΡΠΎ Π·Π²ΡΠΊΠΎΠΌ, ΠΏΠΎΡΡΠΎΠΌΡ ΠΌΡ ΠΏΠΎΠ·Π°Π±ΠΎΡΠΈΠΌΡΡ ΠΎ Π΅Π³ΠΎ ΠΎΡΠΊΠ»ΡΡΠ΅Π½ΠΈΠΈ. -
loop
- ΠΠ°ΠΊ ΡΠΎΠ»ΡΠΊΠΎ Π²ΠΈΠ΄Π΅ΠΎ Π·Π°ΠΊΠΎΠ½ΡΠΈΡΡΡ, ΠΏΡΠΎΠΊΡΡΡΠΈΡΠ΅ ΡΠ½ΠΎΠ²Π° Π½Π΅ΠΏΡΠ΅ΡΡΠ²Π½ΠΎ Ρ Π½Π°ΡΠ°Π»Π°.
ΠΡΠ»ΠΈ Π²Ρ ΠΏΡΠΎΡΠΌΠ°ΡΡΠΈΠ²Π°Π΅ΡΠ΅ HTML-ΠΊΠΎΠ΄ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅, Π²ΠΈΠ΄Π΅ΠΎ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π½Π°ΡΠ°ΡΡ Π²ΠΎΡΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΡΡΡ Ρ ΠΈΡΡ ΠΎΠ΄Π½ΡΠΌ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ.
Π§ΡΠΎΠ±Ρ ΠΏΠΎΠ»ΡΡΠΈΡΡ ΠΏΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½ΠΎΠ΅ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ Π²ΠΈΠ΄Π΅ΠΎ, Π½Π°ΠΌ ΠΏΡΠΎΡΡΠΎ Π½ΡΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ CSS:
Π²ΠΈΠ΄Π΅ΠΎ {
ΡΠΈΡΠΈΠ½Π°: 100Π²Π²Ρ;
Π²ΡΡΠΎΡΠ°: 100vh;
ΠΎΠ±ΡΠ΅ΠΊΡ ΠΏΠΎΠ΄Ρ
ΠΎΠ΄ΠΈΡ: ΠΊΡΡΡΠΊΠ°;
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅;
Π²Π΅ΡΡ
: 0;
ΡΠ»Π΅Π²Π°: 0;
z-ΠΈΠ½Π΄Π΅ΠΊΡ: -1;
}
ΠΠΎΠΉΡΠΈ Π² ΠΏΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½ΡΠΉ ΡΠ΅ΠΆΠΈΠΌΠΡΠΉΡΠΈ ΠΈΠ· ΠΏΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½ΠΎΠ³ΠΎ ΡΠ΅ΠΆΠΈΠΌΠ° Π’Π΅ΠΏΠ΅ΡΡ, Π΅ΡΠ»ΠΈ Π²Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΠ΅ Π΅ΡΠ΅ ΠΎΠ΄ΠΈΠ½ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π² HTML, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ
:
ΠΡΠΈΠ²Π΅Ρ, ΠΌΠΈΡ
ΠΠΎΠΉΡΠΈ Π² ΠΏΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½ΡΠΉ ΡΠ΅ΠΆΠΈΠΌΠΡΠΉΡΠΈ ΠΈΠ· ΠΏΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½ΠΎΠ³ΠΎ ΡΠ΅ΠΆΠΈΠΌΠ° ΠΠ³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΡΡ ΠΏΠΎΠ²Π΅ΡΡ
Π²ΠΈΠ΄Π΅ΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ»Π΅Π΄ΡΡΡΠ΅Π³ΠΎ CSS:
h2 {
ΡΠ²Π΅Ρ: #fff;
Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ°: ΡΠ΅Π½ΡΡ;
ΠΌΠ°ΡΠΆΠ°-Π²Π΅ΡΡ
: 50vh;
}
ΠΠΎΠΉΡΠΈ Π² ΠΏΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½ΡΠΉ ΡΠ΅ΠΆΠΈΠΌΠΡΠΉΡΠΈ ΠΈΠ· ΠΏΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½ΠΎΠ³ΠΎ ΡΠ΅ΠΆΠΈΠΌΠ°ΠΠ°ΠΊ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΏΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½ΠΎΠ΅ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π² WordPress
ΠΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½ΠΎΠ΅ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΊΠ°ΠΆΠ΅ΡΡΡ Π½ΠΎΠ²ΠΎΠΉ ΡΠ΅Π½Π΄Π΅Π½ΡΠΈΠ΅ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½Π°, ΠΊΠΎΡΠΎΡΠ°Ρ ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ ΠΌΠΎΠ΄Π½ΠΎΠΉ.ΠΡ ΠΏΠΎΠ»ΡΡΠΈΠ»ΠΈ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ ΠΏΠΈΡΠ΅ΠΌ ΠΎΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠΏΡΠ°ΡΠΈΠ²Π°Π»ΠΈ Π½Π°Ρ, ΠΊΠ°ΠΊ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΏΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½ΠΎΠ΅ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π° ΡΠ²ΠΎΠΉ ΡΠ°ΠΉΡ WordPress. ΠΠ±ΡΡΠ½ΠΎ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠ° ΠΏΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½ΠΎΠ³ΠΎ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π½Π° Π²Π°ΡΠ΅ΠΌ ΡΠ°ΠΉΡΠ΅ WordPress ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ Π²Π°ΠΌ ΠΏΡΠΈΠ΄Π΅ΡΡΡ ΡΠ°Π±ΠΎΡΠ°ΡΡ Ρ ΡΠ°ΠΉΠ»Π°ΠΌΠΈ CSS ΠΈ HTML. ΠΠ°ΠΌ ΡΠ°ΠΊΠΆΠ΅ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΡΡΠΈΡΡΠ²Π°ΡΡ ΡΠ°Π·ΠΌΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈ Π΅Π³ΠΎ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π΄Π»Ρ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ², ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΡΠΊΡΠ°Π½Π°, ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠΉ, Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ² ΠΈ Ρ. Π. ΠΡΠΎΠ³ΠΎ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ, ΡΡΠΎΠ±Ρ Π½Π°ΠΏΡΠ³Π°ΡΡ Π½ΠΎΠ²ΠΈΡΠΊΠΎΠ² Π² WordPress. ΠΠ΅ Π²ΠΎΠ»Π½ΡΠΉΡΠ΅ΡΡ, Π² ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅ ΠΌΡ ΠΏΠΎΠΊΠ°ΠΆΠ΅ΠΌ Π²Π°ΠΌ, ΠΊΠ°ΠΊ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΏΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½ΠΎΠ΅ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π² WordPress Π±Π΅Π· ΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΊΠ°ΠΊΠΈΡ -Π»ΠΈΠ±ΠΎ ΡΠ°ΠΉΠ»ΠΎΠ² ΡΡΠΈΠ»Π΅ΠΉ ΠΈΠ»ΠΈ ΡΠ΅ΠΌ.
ΠΠΈΠ΄Π΅ΠΎΡΡΠΎΠΊ
ΠΠΎΠ΄ΠΏΠΈΡΠ°ΡΡΡΡ Π½Π° WPBeginner
ΠΡΠ»ΠΈ Π²Π°ΠΌ Π½Π΅ Π½ΡΠ°Π²ΠΈΡΡΡ Π²ΠΈΠ΄Π΅ΠΎ ΠΈΠ»ΠΈ Π²Π°ΠΌ Π½ΡΠΆΠ½Ρ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΠΈΠ½ΡΡΡΡΠΊΡΠΈΠΈ, ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠ°ΠΉΡΠ΅ ΡΠΈΡΠ°ΡΡ.
ΠΠ΅ΡΠ²ΠΎΠ΅, ΡΡΠΎ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ, ΡΡΠΎ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΠΈ Π°ΠΊΡΠΈΠ²ΠΈΡΠΎΠ²Π°ΡΡ ΠΏΠ»Π°Π³ΠΈΠ½ Simple Full Screen Background Image. ΠΠΎΡΠ»Π΅ Π°ΠΊΡΠΈΠ²Π°ΡΠΈΠΈ ΠΏΠ΅ΡΠ΅ΠΉΠ΄ΠΈΡΠ΅ Π² ΡΠ°Π·Π΄Π΅Π» Β«ΠΠ½Π΅ΡΠ½ΠΈΠΉ Π²ΠΈΠ΄ Β» ΠΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ BG ΠΈ Π·Π°Π³ΡΡΠ·ΠΈΡΠ΅ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅.
Π Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅ 1600 Γ 1200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ.ΠΠ°ΡΠ΅ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π±ΡΠ΄Π΅Ρ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΎ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ ΡΠΊΡΠ°Π½ΠΎΠΌ Π±ΡΠ°ΡΠ·Π΅ΡΠ°. ΠΠΎΡΠ»Π΅ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π²Ρ Π·Π°Π³ΡΡΠ·ΠΈΠ»ΠΈ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ ΡΠΎΡ ΡΠ°Π½Π΅Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. ΠΠ΅ΡΠ΅ΠΉΠ΄ΠΈΡΠ΅ Π½Π° ΡΠ²ΠΎΠΉ Π²Π΅Π±-ΡΠ°ΠΉΡ, ΡΡΠΎΠ±Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π² ΡΠ΅Π°Π»ΡΠ½ΠΎΠΌ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ.
ΠΡΠ±ΠΎΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π±ΠΎΠ»ΡΡΠ΅Π³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΠ»ΡΡΡΠΈΡ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ ΡΠΊΡΠ°Π½Π° ΠΈ ΠΊΠ°ΡΠ΅ΡΡΠ²ΠΎ ΡΠΎΠ½ΠΎΠ²ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΏΡΠΈ ΠΈΡ ΡΠΌΠ΅Π½ΡΡΠ΅Π½ΠΈΠΈ. ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ ΠΏΡΠΎΡΠ΅ΡΡΠΈΡΠΎΠ²Π°ΡΡ Π² ΡΠ°Π·Π½ΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ ΠΈ Π½Π° ΡΠ°Π·Π½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ , ΡΡΠΎΠ±Ρ ΡΠ±Π΅Π΄ΠΈΡΡΡΡ, ΡΡΠΎ Π²Π°ΡΠ΅ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎ Ρ ΠΎΡΠΎΡΠΎ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ Π½Π° ΡΠΊΡΠ°Π½Π°Ρ Π²ΡΠ΅Ρ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ².
ΠΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½ΠΎΠ΅ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ PRO
ΠΡΠ»ΠΈ Π²Ρ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ Ρ ΠΎΡΠΈΡΠ΅ Π²ΡΠ²Π΅ΡΡΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠ΅ ΡΠΎΠ½ΠΎΠ²ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π½Π° Π½ΠΎΠ²ΡΠΉ ΡΡΠΎΠ²Π΅Π½Ρ Π²Π°ΡΠ΅Π³ΠΎ ΡΠ°ΠΉΡΠ°, Π²Π°ΠΌ ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΠΈΡΡΡ PRO Π²Π΅ΡΡΠΈΡ ΡΡΠΎΠ³ΠΎ ΠΏΠ»Π°Π³ΠΈΠ½Π°. Π ΠΎΡΠ»ΠΈΡΠΈΠ΅ ΠΎΡ Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΠΎΠ³ΠΎ ΠΏΠ»Π°Π³ΠΈΠ½Π°, Π³Π΄Π΅ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΡΠΎΠ»ΡΠΊΠΎ 1 ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΠΏΡΠΎΡΠ΅ΡΡΠΈΠΎΠ½Π°Π»ΡΠ½Π°Ρ Π²Π΅ΡΡΠΈΡ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π²Π°ΠΌ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°ΡΡ Π½Π΅ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½Π½ΠΎΠ΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΡΠΎΠ½ΠΎΠ²ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ.
Π‘Π°ΠΌΠΎΠ΅ Π»ΡΡΡΠ΅Π΅ Π² ΠΏΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½ΡΡ ΡΠΎΠ½ΠΎΠ²ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΡ Pro - ΡΡΠΎ ΡΠΎ, ΡΡΠΎ ΠΎΠ½ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ ΡΠ°Π·Π½ΡΠ΅ ΡΠΎΠ½ΠΎΠ²ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π΄Π»Ρ ΡΠ°Π·Π½ΠΎΠ³ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ°. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΡΠ±ΡΠ°ΡΡ Π΄ΡΡΠ³ΠΎΠ΅ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ:
ΠΠ°ΡΠ΅Π³ΠΎΡΠΈΠΈ- ΠΡΡ ΠΈΠ²
- ΠΡΠ΄Π΅Π»ΡΠ½ΡΠ΅ ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΡ
- Π‘ΡΡΠ°Π½ΠΈΡ
- ΠΠ»Π°Π²Π½Π°Ρ ΡΡΡΠ°Π½ΠΈΡΠ° Π±Π»ΠΎΠ³Π°
- ΠΠ΅ΡΠ΅Π΄Π½ΡΡ ΡΡΡΠ°Π½ΠΈΡΠ°
- ΠΠΎΠΈΡΠΊ ΠΈ Π΄Ρ.
ΠΠ»Π°Π³ΠΈΠ½ ΠΈΠΌΠ΅Π΅Ρ ΠΏΠΎΠ»Π½ΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΡ ΡΠ΅Π·Π΅ΡΠ²Π½ΡΡ ΠΊΠΎΠΏΠΈΠΉ, ΠΏΠΎΡΡΠΎΠΌΡ, Π΅ΡΠ»ΠΈ Π΄Π»Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠ³ΠΎ ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΡ Π½Π΅Ρ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°Π΅ΠΌΠΎΠ³ΠΎ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΎΠ½ Π±ΡΠ΄Π΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ Π³Π»ΠΎΠ±Π°Π»ΡΠ½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅.ΠΠ½ ΡΠ°ΠΊΠΆΠ΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π·Π°Π³ΡΡΠΆΠ°ΡΡ ΠΈ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°ΡΡ ΡΠΎΠ½ΠΎΠ²ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΡΡΠΌΠΎ ΠΈΠ· ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠ° ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΠΉ. Π’Π°ΠΊΠΆΠ΅ Π΅ΡΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΠΏΠΎΡΡΠ΅ΠΏΠ΅Π½Π½ΠΎΠ³ΠΎ ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΏΡΠΈ Π·Π°Π³ΡΡΠ·ΠΊΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ.
ΠΡΠΎΡ ΠΏΠ»Π°Π³ΠΈΠ½ ΠΎΡΠ΅Π½Ρ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π΅Π½ Ρ ΡΠΎΡΠΊΠΈ Π·ΡΠ΅Π½ΠΈΡ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ ΠΈ ΡΡΠ΅Π±ΡΠ΅Ρ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΡ Π½Π°ΠΊΠ»Π°Π΄Π½ΡΡ ΡΠ°ΡΡ ΠΎΠ΄ΠΎΠ².
ΠΡ Π²ΠΈΠ΄ΠΈΠΌ, ΡΡΠΎ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ Π±Π»ΠΎΠ³Π³Π΅ΡΡ ΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ ΡΠΎΠ½ΠΎΠ²ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ Π½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·Π±ΡΠ°Π½Π½ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. ΠΡΠΎ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΊΡΡΡΠΎ, Π΅ΡΠ»ΠΈ Ρ Π²Π°Ρ Ρ ΠΎΡΠΎΡΠ΅Π΅ ΡΡΠ²ΡΡΠ²ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°.
ΠΠΎΠ»ΡΡΠΈΡΡ ΠΏΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½ΠΎΠ΅ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Pro
ΠΡ Π½Π°Π΄Π΅Π΅ΠΌΡΡ, ΡΡΠΎ ΡΡΠ° ΡΡΠ°ΡΡΡ ΠΏΠΎΠΌΠΎΠ³Π»Π° Π²Π°ΠΌ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΏΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½ΠΎΠ΅ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π² WordPress.ΠΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ Π½Π° ΡΠ²ΠΎΠ΅ΠΌ ΡΠ°ΠΉΡΠ΅ ΠΏΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½ΡΠ΅ ΡΠΎΠ½ΠΎΠ²ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ? ΠΠ°ΠΊ ΡΡ ΡΡΠΎ Π΄Π΅Π»Π°Π΅ΡΡ? ΠΡ ΡΠΎΠ±ΠΈΡΠ°Π΅ΡΠ΅ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΌΠ΅ΡΠΎΠ΄ ΠΊΠΎΠ΄Π° ΠΈΠ»ΠΈ Π΄ΡΡΠ³ΠΎΠΉ ΠΏΠ»Π°Π³ΠΈΠ½? ΠΠ°ΠΉΡΠ΅ Π½Π°ΠΌ Π·Π½Π°ΡΡ, ΠΎΡΡΠ°Π²ΠΈΠ² ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΉ Π½ΠΈΠΆΠ΅.
ΠΠ»ΡΡΡ ΠΈ ΠΌΠΈΠ½ΡΡΡ ΠΏΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π³Π΅ΡΠΎΠ΅Π²
ΠΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΎ 23 Π°Π²Π³ΡΡΡΠ° 2019 Π³.
ΠΠ° ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΠ΅ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π»Π΅Ρ ΠΌΡ ΡΡΠ°Π»ΠΈ ΡΠ²ΠΈΠ΄Π΅ΡΠ΅Π»ΡΠΌΠΈ ΠΎΠ³ΡΠΎΠΌΠ½ΠΎΠ³ΠΎ ΡΠ²Π΅Π»ΠΈΡΠ΅Π½ΠΈΡ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²Π° Π²Π΅Π±-ΡΠ°ΠΉΡΠΎΠ², ΡΠ°Π·ΡΠ°Π±ΠΎΡΠ°Π½Π½ΡΡ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ Π±ΠΎΠ»ΡΡΠΈΡ ΠΏΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½ΡΡ Π±Π°Π½Π½Π΅ΡΠ½ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ. ΠΠ°Π·ΡΠ²Π°Π΅ΡΠ΅ Π»ΠΈ Π²Ρ ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌΠΈ-Π³Π΅ΡΠΎΡΠΌΠΈ ΠΈΠ»ΠΈ Π±ΠΎΠ»Π΅Π΅ ΡΡΠ°Π΄ΠΈΡΠΈΠΎΠ½Π½ΡΠΌΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌΠΈ-Π±Π°Π½Π½Π΅ΡΠ°ΠΌΠΈ, ΠΏΡΠΈΠ½ΡΠΈΠΏΡ Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΎΡΡΠ°ΡΡΡΡ Π½Π΅ΠΈΠ·ΠΌΠ΅Π½Π½ΡΠΌΠΈ.
ΠΠ΅ΡΠ²ΠΎ-Π½Π°ΠΏΠ΅ΡΠ²ΠΎ: ΡΡΠΎ ΡΠ°ΠΊΠΎΠ΅ ΠΎΠ±ΡΠ°Π· Π³Π΅ΡΠΎΡ?
ΠΠ°ΠΊ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ, ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π³Π»Π°Π²Π½ΠΎΠ³ΠΎ Π³Π΅ΡΠΎΡ Π²Π΅Π±-ΡΠ°ΠΉΡΠ° Π·Π°ΠΏΠΎΠ»Π½ΡΠ΅Ρ Π²Π΅ΡΡ ΡΠΊΡΠ°Π½ ΠΈΠ»ΠΈ Π±ΠΎΠ»ΡΡΡΡ ΡΠ°ΡΡΡ ΡΠΊΡΠ°Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ. ΠΠ±ΡΡΠ½ΠΎ ΡΡΠΎ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Ρ ΡΡΠΈΡΡΠΎΠΌ ΠΈ / ΠΈΠ»ΠΈ Π΄ΡΡΠ³ΠΈΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π½Π° ΠΏΠ΅ΡΠ΅Π΄Π½Π΅ΠΌ ΠΏΠ»Π°Π½Π΅.
ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π³Π΅ΡΠΎΠ΅Π² ΡΡΠ°Π»ΠΈ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΠΌΠΈ ΠΏΠΎ ΠΌΠ½ΠΎΠ³ΠΈΠΌ ΠΏΡΠΈΡΠΈΠ½Π°ΠΌ. ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π³Π΅ΡΠΎΡ ΡΠ»ΡΠΆΠΈΡ ΠΌΠΎΡΠ½ΡΠΌ Π΄ΠΎΠΌΠΈΠ½ΠΈΡΡΡΡΠΈΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π²ΠΌΠ΅ΡΡΠ΅ Ρ ΠΎΡΠ½ΠΎΠ²Π½ΡΠΌ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠΌ ΠΈ Π±ΡΡΡΡΠΎ ΠΏΠ΅ΡΠ΅Π΄Π°Π΅Ρ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠ΅ ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΠ΅. Π‘ΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ ΠΈΡΡΠ»Π΅Π΄ΠΎΠ²Π°Π½ΠΈΠΉ, ΠΏΠΎΠ΄ΡΠ²Π΅ΡΠΆΠ΄Π°ΡΡΠΈΡ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΠΎΡΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π³Π΅ΡΠΎΠ΅Π² ΠΏΠΎ ΡΡΠ°Π²Π½Π΅Π½ΠΈΡ Ρ ΡΡΡΠ°ΡΠ΅Π²ΡΠΈΠΌΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌΠΈ Π²ΡΠ°ΡΠ°ΡΡΠΈΡ ΡΡ Π±Π°Π½Π½Π΅ΡΠΎΠ² ΠΊΠ°ΡΡΡΠ΅Π»ΠΈ:
ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, Ρ ΠΎΡΠΎΡΠΎ Π·Π°Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠΈΡΠΎΠ²Π°Π½ΠΎ, ΡΡΠΎ ΡΡΠ΅Π΄Π½Π΅ΡΡΠ°ΡΠΈΡΡΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ Π³ΠΎΡΠΎΠ²Ρ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ Π²Π½ΠΈΠ·, ΡΡΠΎΠ±Ρ Π½Π°ΠΉΡΠΈ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠΉ ΠΊΠΎΠ½ΡΠ΅Π½Ρ, ΠΈ ΡΠ°ΡΡΠΎ ΠΏΡΠ΅Π΄ΠΏΠΎΡΠΈΡΠ°ΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΡ ΡΠ΅Π»ΡΠΊΡ:
Π ΡΠΎΡΠ΅ΡΠ°Π½ΠΈΠΈ ΡΠΎ ΡΡΡΠ°Π½ΠΈΡΠ°ΠΌΠΈ Ρ Π΄Π»ΠΈΠ½Π½ΠΎΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΠΎΠΉ ΠΏΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½ΡΠ΅ Π±Π°Π½Π½Π΅ΡΡ Ρ Π³Π΅ΡΠΎΡΠΌΠΈ ΡΠΎΠ·Π΄Π°ΡΡ ΠΎΡΠ»ΠΈΡΠ½ΡΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ Π΄Π»Ρ ΠΏΠΎΠ²Π΅ΡΡΠ²ΠΎΠ²Π°Π½ΠΈΡ ΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ ΡΠΎΠΎΠ±ΡΠ°ΡΡ ΠΎ Π²Π°ΡΠ΅ΠΌ Π±ΡΠ΅Π½Π΄Π΅ ΠΈ ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΠΎΠΌ ΡΠΎΡΠ³ΠΎΠ²ΠΎΠΌ ΠΏΡΠ΅Π΄Π»ΠΎΠΆΠ΅Π½ΠΈΠΈ Π² ΡΠ²Π»Π΅ΠΊΠ°ΡΠ΅Π»ΡΠ½ΠΎΠΉ ΠΈ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΠΎΠΉ ΡΠΎΡΠΌΠ΅.ΠΠ½ΠΈ, ΠΊΠΎΠ³Π΄Π° Π²ΡΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π±ΡΠ»ΠΎ Π·Π°Π±ΠΈΡΠΎ Β«ΡΠ²Π΅ΡΡ Ρ Π²Π½ΠΈΠ·Β», Π·Π°ΠΊΠΎΠ½ΡΠΈΠ»ΠΈΡΡ. Π£Ρ !
ΠΠ·Π½Π°ΠΊΠΎΠΌΡΡΠ΅ΡΡ Ρ Π½Π°ΡΠΈΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π΄Π»Ρ ΠΠ°ΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎΠ³ΠΎ Π±Π»Π°Π³ΠΎΡΠ²ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠΎΠ½Π΄Π°
ΠΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π³Π΅ΡΠΎΠ΅Π² Π·Π²ΡΡΠ°Ρ ΠΏΠΎΡΡΡΡΠ°ΡΡΠ΅, ΡΡΠΎ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΠΉΡΠΈ Π½Π΅ ΡΠ°ΠΊ?
Π₯ΠΎΡΡ ΠΌΡ Π±ΠΎΠ»ΡΡΠΈΠ΅ ΠΏΠΎΠΊΠ»ΠΎΠ½Π½ΠΈΠΊΠΈ ΡΡΠΎΠ³ΠΎ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ Π΄ΠΈΠ·Π°ΠΉΠ½Π°, ΠΌΡ Π·Π°ΠΌΠ΅ΡΠΈΠ»ΠΈ, ΡΡΠΎ Π½Π°ΡΠΈΡ ΠΊΠ»ΠΈΠ΅Π½ΡΠΎΠ² ΡΠ°ΡΡΠΎ ΡΠΌΡΡΠ°Π΅Ρ ΡΠΏΠΎΡΠΎΠ± ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΈ ΠΊΠ°Π΄ΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, Π° ΡΠ°ΠΊΠΆΠ΅ ΡΠΎ, ΠΊΠ°ΠΊΠ°Ρ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Β«Π»ΠΈΠΏΠΊΠΎΠΉΒ», ΡΡΠΎΠ±Ρ ΠΏΠΎΡΡΠΎΡΠ½Π½ΠΎ ΠΎΡΡΠ°Π²Π°ΡΡΡΡ Π½Π° ΡΠΊΡΠ°Π½Π΅. ΠΠΎΡΠΎΡΠΊΠΈΠΉ ΠΎΡΠ²Π΅Ρ: ΡΠ½ΡΡΡ ΡΠΊΡΡΡ Ρ ΠΊΠΎΡΠΊΠΈ ΠΌΠΎΠΆΠ½ΠΎ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΠΌΠΈ ΡΠΏΠΎΡΠΎΠ±Π°ΠΌΠΈ.ΠΠΈ ΠΎΠ΄ΠΈΠ½ ΠΎΡΠ²Π΅Ρ Π½Π΅ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΈΡ Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΡΠΈΡΡΠ°ΡΠΈΠΈ.
ΠΠΌΠ΅ΡΡΠΎ ΡΡΠΎΠ³ΠΎ, Π²ΠΎΡ ΡΠΏΠΈΡΠΎΠΊ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½Π½ΡΡ ΠΎΡΠΈΠ±ΠΎΠΊ, ΡΠ²ΡΠ·Π°Π½Π½ΡΡ Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌΠΈ-Π³Π΅ΡΠΎΡΠΌΠΈ Π²Π΅Π±-ΡΠ°ΠΉΡΠΎΠ², ΠΈ Π½Π°ΡΠΈ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΠΌΡΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎΠΌΠΎΠ³ΡΡ Π²Π°ΠΌ:
ΠΠ±ΡΠ΅Π·ΠΊΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
ΠΠ°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΡΠ°ΡΡΠ°Ρ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ°, Ρ ΠΊΠΎΡΠΎΡΠΎΠΉ ΠΌΡ ΡΡΠ°Π»ΠΊΠΈΠ²Π°Π΅ΠΌΡΡ, - ΡΡΠΎ Π½Π΅ΠΈΠ·Π±Π΅ΠΆΠ½ΠΎΠ΅ ΠΊΠ°Π΄ΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ Ρ ΠΏΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½ΡΠΌΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌΠΈ Π³Π΅ΡΠΎΠ΅Π². ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΡΡΡΡΡ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ, ΡΡΠΎΠ±Ρ Π·Π°ΠΏΠΎΠ»Π½ΠΈΡΡ ΡΠΊΡΠ°Π½, ΠΎΠ½ΠΈ ΡΠ°ΠΊΠΆΠ΅ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°ΡΡΡΡ ΠΏΠΎ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΠΈ, ΠΈΠ½Π°ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π±ΡΠ΄ΡΡ ΠΊΠ°Π·Π°ΡΡΡΡ ΡΠ°ΡΡΡΠ½ΡΡΡΠΌΠΈ ΠΈΠ»ΠΈ ΡΠΆΠ°ΡΡΠΌΠΈ, Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΡ ΡΡΠΎΡΠΎΠ½ ΡΠΊΡΠ°Π½Π°.ΠΠ΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ ΠΏΡΠΎΡΠΌΠ°ΡΡΠΈΠ²Π°ΡΡ ΠΠ½ΡΠ΅ΡΠ½Π΅Ρ Ρ ΡΠ°Π·Π²Π΅ΡΠ½ΡΡΡΠΌΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌΠΈ. ΠΠΈΡΠ½ΠΎ Ρ ΠΏΡΠ΅Π΄ΠΏΠΎΡΠΈΡΠ°Ρ ΠΏΡΠΎΡΠΌΠ°ΡΡΠΈΠ²Π°ΡΡ ΠΎΠΊΠ½ΠΎ Π² Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠΌ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ Π² Π»Π΅Π²ΠΎΠΉ ΡΠ°ΡΡΠΈ ΡΠΊΡΠ°Π½Π°. ΠΠΎΠ½Π΅ΡΠ½ΠΎ, ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡ ΡΠ²ΠΎΠ΅. ΠΠΎ ΠΌΡ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΏΡΠΈΠ·Π½Π°ΡΡ, ΡΡΠΎ ΡΡΡΠ΅ΡΡΠ²ΡΡΡ ΡΠ°Π·Π½ΡΠ΅ ΠΏΡΠ΅Π΄ΠΏΠΎΡΡΠ΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠ΅ Π½ΡΠΆΠ½ΠΎ ΡΡΠΈΡΡΠ²Π°ΡΡ.
ΠΠ°ΠΊ ΡΠΎΠ»ΡΠΊΠΎ Π²Ρ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Π²ΠΎ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π²ΡΠ΅ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅, Π²Ρ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅, ΡΡΠΎ ΡΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ Π±Π΅ΡΠΊΠΎΠ½Π΅ΡΠ½ΠΎΠ΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠΉ ΡΡΠΎΡΠΎΠ½. ΠΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π³Π΅ΡΠΎΡ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°ΡΡΡΡ, ΡΡΠΎΠ±Ρ Π·Π°ΠΏΠΎΠ»Π½ΠΈΡΡ ΠΈΡ Π²ΡΠ΅. ΠΠ΅ΠΈΠ·Π±Π΅ΠΆΠ½ΠΎ ΠΏΡΠΎΠΈΠ·ΠΎΠΉΠ΄Π΅Ρ ΠΎΠ±ΡΠ΅Π·ΠΊΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.
ΠΠ·Π½Π°ΠΊΠΎΠΌΡΡΠ΅ΡΡ Ρ Π½Π°ΡΠΈΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π΄Π»Ρ Π£Π½ΠΈΠ²Π΅ΡΡΠΈΡΠ΅ΡΠ° ΠΠΈΡ Π°ΠΉ
ΠΠ΅ΠΊΠΎΡΠΎΡΡΠΌ ΡΠ°ΡΡΠΎ ΡΠ»ΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ½ΡΡΡ ΡΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΡ, ΠΏΠΎΡΡΠΎΠΌΡ ΠΌΡ ΡΠΎΡΠ»ΠΈ ΡΠ»Π΅Π΄ΡΡΡΡΡ Π°Π½Π°Π»ΠΎΠ³ΠΈΡ Π²Π΅ΡΡΠΌΠ° ΠΏΠΎΠ»Π΅Π·Π½ΠΎΠΉ.
ΠΡΠ΅Π΄ΡΡΠ°Π²ΡΡΠ΅, ΡΡΠΎ Ρ Π²Π°Ρ Π΅ΡΡΡ ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΡ 4 Γ 6, ΠΊΠΎΡΠΎΡΡΡ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°ΡΡ, ΡΡΠΎΠ±Ρ ΠΎΠ½Π° ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΎΠ²Π°Π»Π° ΡΠΎΡΠΎΡΠ°ΠΌΠΊΠ΅ 5 Γ 7. Π ΡΠΎΠΆΠ°Π»Π΅Π½ΠΈΡ, ΠΏΡΠΎΠΏΠΎΡΡΠΈΠΈ Π½Π΅ ΡΠΎΠ²ΡΠ΅ΠΌ ΡΠΊΠ»Π°Π΄ΡΠ²Π°ΡΡΡΡ. ΠΠ°ΠΌ Π½ΡΠΆΠ½ΠΎ Π±ΡΠ΄Π΅Ρ ΠΎΡΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°ΡΡ ΡΠ°ΠΌΡΠΉ ΠΊΠΎΡΠΎΡΠΊΠΈΠΉ ΠΊΡΠ°ΠΉ, ΡΡΠΎΠ±Ρ ΠΎΠ½ ΠΏΠΎΠΌΠ΅ΡΡΠΈΠ»ΡΡ, Π° Π·Π°ΡΠ΅ΠΌ ΠΎΠ±ΡΠ΅Π·Π°ΡΡ Π²ΡΠ΅ ΠΎΡΡΠ°ΡΠΊΠΈ ΠΎΡ Π±ΠΎΠ»Π΅Π΅ Π΄Π»ΠΈΠ½Π½ΠΎΠ³ΠΎ ΠΊΡΠ°Ρ. Π₯ΠΎΡΡ ΡΡΠΎ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΎΡΠ»ΠΈΡΠ½ΡΠΌ ΡΠΏΠΎΡΠΎΠ±ΠΎΠΌ Π²ΡΡΠ΅Π·Π°ΡΡ ΡΠΎΡΠΎΠ±ΠΎΠΌΠ±Π°ΡΠ΄ΠΈΡΠΎΠ²ΡΠΈΠΊΠΈ, Π²Ρ ΡΠΈΡΠΊΡΠ΅ΡΠ΅ Π²ΡΡΠ΅Π·Π°ΡΡ Π±Π°Π±ΡΡΠΊΡ ΠΈΠ· ΡΠ΅ΠΌΠ΅ΠΉΠ½ΠΎΠ³ΠΎ ΠΏΠΎΡΡΡΠ΅ΡΠ°.
Π’Π°ΠΊ Π² ΡΠ΅ΠΌ ΠΆΠ΅ Π²ΡΡ ΠΎΠ΄? ΠΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ, ΠΈ Β«ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΡΠΉΒ» ΠΎΡΠ²Π΅Ρ Π² ΠΊΠΎΠ½Π΅ΡΠ½ΠΎΠΌ ΠΈΡΠΎΠ³Π΅ Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡ ΡΠΎΠ³ΠΎ, ΡΠ΅Π³ΠΎ Π²Ρ Π½Π°Π΄Π΅Π΅ΡΠ΅ΡΡ Π΄ΠΎΡΡΠΈΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΡΠ²ΠΎΠ΅Π³ΠΎ ΡΠ°ΠΉΡΠ°.ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° ΡΡΠΈ ΡΠΎΠ²Π΅ΡΡ:
ΠΠ·Π±Π΅Π³Π°ΠΉΡΠ΅ ΡΠΈΠ»ΡΠ½ΠΎ ΠΎΠ±ΡΠ΅Π·Π°Π½Π½ΡΡ
ΠΈΡΡ
ΠΎΠ΄Π½ΡΡ
ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΠΉ.
ΠΡΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ Π²ΡΠΏΠΎΠ»Π½ΠΈΡΡ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎΠ΅ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π±Π΅Π· ΠΎΠ±ΡΠ΅Π·ΠΊΠΈ ΠΊΠ°ΠΊΠΈΡ
-Π»ΠΈΠ±ΠΎ ΠΊΠ»ΡΡΠ΅Π²ΡΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ². ΠΠ°ΡΠ° ΡΠ°Π±ΠΎΡΠ° Ρ ΠΠ°ΡΠΈΠΎΠ½Π°Π»ΡΠ½ΡΠΌ Π±Π»Π°Π³ΠΎΡΠ²ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠΌ ΡΠΎΠ½Π΄ΠΎΠΌ ΡΠ²Π»ΡΠ΅ΡΡΡ Ρ
ΠΎΡΠΎΡΠΈΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠΌ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΎΡΠ±ΠΎΡΠ½Π°Ρ ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΡ ΠΌΠΎΠΆΠ΅Ρ ΠΏΡΠ΅Π΄ΠΎΡΠ²ΡΠ°ΡΠΈΡΡ ΡΡΡΠ°Π½Π½ΠΎΠ΅ ΠΈ Π½Π΅ΡΠ΄Π°ΡΠ½ΠΎΠ΅ ΠΊΠ°Π΄ΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅.
ΠΠ·ΠΌΠ΅Π½ΠΈΡΠ΅ ΡΠΎΡΠΊΡ, ΠΎΡ ΠΊΠΎΡΠΎΡΠΎΠΉ ΠΏΡΠΎΠΈΡΡ
ΠΎΠ΄ΠΈΡ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅.
ΠΠ±ΡΡΠ½ΠΎ ΠΌΡ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΡΠ΅ΠΌ ΠΎΡ ΡΠ΅Π½ΡΡΠ° ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΠΈ, ΠΏΠΎΡΡΠΎΠΌΡ Π²Π΅ΡΡ
ΠΈ Π½ΠΈΠ· ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΠΈ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΎΠ±ΡΠ΅Π·Π°Π½Ρ. ΠΠ΄Π½Π°ΠΊΠΎ, ΡΠ°Π±ΠΎΡΠ°Ρ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Ρ ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΡΠΌΠΈ Π»ΡΠ΄Π΅ΠΉ, ΠΌΡ ΡΡΠ°ΡΠ°Π΅ΠΌΡΡ Π½Π΅ ΠΎΠ±ΡΠ΅Π·Π°ΡΡ Π³ΠΎΠ»ΠΎΠ²Ρ ΠΎΠ±ΡΠ΅ΠΊΡΠΎΠ². Π ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΠΌΡ Π±Ρ Π·Π°ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π»ΠΈ Π²Π΅ΡΡ
Π½ΡΡ ΡΠ°ΡΡΡ ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΠΈ, Π° ΡΠΎΠ»ΡΠΊΠΎ Π½ΠΈΠΆΠ½ΡΡ ΡΠ°ΡΡΡ ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΠΈ ΠΌΠΎΠΆΠ½ΠΎ Π±ΡΠ»ΠΎ Π±Ρ ΠΎΠ±ΡΠ΅Π·Π°ΡΡ.
ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΉ ΡΠΈΡΠΈΠ½Ρ.
ΠΡΠ»ΠΈ Π½ΠΈΡΠ΅Π³ΠΎ Π½Π΅ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ ΠΈ Π»ΡΠ±Π°Ρ ΡΠΎΡΠΌΠ° ΠΊΠ°Π΄ΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΊΠ°ΡΠ΅Π³ΠΎΡΠΈΡΠ΅ΡΠΊΠΈ Π·Π°ΠΏΡΠ΅ΡΠ΅Π½Π°, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠΎΡΡΠΎ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΉ ΡΠΈΡΠΈΠ½Ρ, ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π΅ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΡΡΡΡΡ.
Π Π°Π·ΠΌΠ΅Ρ ΡΠ°ΠΉΠ»Π°
ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΠΈΠ΄Π΅Π°Π»ΡΠ½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ Π³Π»Π°Π²Π½ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π²Π΅Π±-ΡΠ°ΠΉΡΠ° Π΄Π»Ρ ΠΏΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½ΡΡ ΡΠΎΠ½ΠΎΠ²ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΡΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ 1200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ Π² ΡΠΈΡΠΈΠ½Ρ.ΠΠ΄Π½Π°ΠΊΠΎ, Π΅ΡΠ»ΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ ΠΏΡΠΎΡΠΌΠ°ΡΡΠΈΠ²Π°ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ Π½Π° Π±ΠΎΠ»ΡΡΠΈΡ ΡΠΊΡΠ°Π½Π°Ρ , ΡΡΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°ΡΡ, ΡΡΠΎΠ±Ρ Π·Π°ΠΏΠΎΠ»Π½ΠΈΡΡ ΡΠΊΡΠ°Π½. ΠΡΠΎ ΡΠ°ΡΡΠΎ ΠΌΠΎΠΆΠ΅Ρ ΠΏΡΠΈΠ²Π΅ΡΡΠΈ ΠΊ Π½Π΅ΠΊΠΎΡΠΎΡΠΎΠΌΡ ΡΠ°Π·ΠΌΡΡΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. ΠΡΠ»ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠΎΠ±ΠΎΠΉ ΠΏΡΠΎΡΡΠΎ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΡΠ°ΠΊΠΎΠ΅ ΡΠ°Π·ΠΌΡΡΠΈΠ΅ ΡΠ°ΡΡΠΎ ΠΏΡΠΈΠ΅ΠΌΠ»Π΅ΠΌΠΎ - Π΄Π°ΠΆΠ΅ ΠΆΠ΅Π»Π°ΡΠ΅Π»ΡΠ½ΠΎ. ΠΠΎ Π΅ΡΠ»ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ ΠΏΠ΅ΡΠ΅Π΄Π½Π΅Π³ΠΎ ΠΏΠ»Π°Π½Π° ΠΈΠ»ΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ Π²Π°ΠΆΠ½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅ Π΄ΠΎΠ»ΠΆΠ½Ρ Π±ΡΡΡ ΡΠ΅Π·ΠΊΠΈΠΌΠΈ, ΠΌΡ ΡΠ°ΡΡΠΎ ΡΠΎΠ·Π΄Π°Π΅ΠΌ ΠΈΡΡ ΠΎΠ΄Π½ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π±ΠΎΠ»ΡΡΠ΅Π³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° Π² Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π΅ 1800 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΈΠ»ΠΈ ΠΎΠΊΠΎΠ»ΠΎ ΡΠΎΠ³ΠΎ. ΠΠΎΠ»ΠΎΠΆΠΈΡΠ΅Π»ΡΠ½ΡΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ? ΠΠΎΠ»Π΅Π΅ ΡΠ΅ΡΠΊΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. ΠΠ±ΡΠ°ΡΠ½Π°Ρ ΡΡΠΎΡΠΎΠ½Π°? Π€Π°ΠΉΠ»Ρ Π±ΠΎΠ»ΡΡΠ΅Π³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΡΠΈΠ²ΠΎΠ΄ΡΡ ΠΊ ΡΠ²Π΅Π»ΠΈΡΠ΅Π½ΠΈΡ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ Π·Π°Π³ΡΡΠ·ΠΊΠΈ.
ΠΠ·Π½Π°ΠΊΠΎΠΌΡΡΠ΅ΡΡ Ρ Π½Π°ΡΠΈΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π΄Π»Ρ Sargenti Architects
Π Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΡΡΡ ΠΏΡΠΎΡΠΌΠΎΡΡΠ΅ΡΡ Π΄Π°Π½Π½ΡΠ΅ Google Analytics, ΡΡΠΎΠ±Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ ΡΠΊΡΠ°Π½Π° ΡΠΈΠΏΠΈΡΠ½ΡΡ ΠΏΠΎΡΠ΅ΡΠΈΡΠ΅Π»Π΅ΠΉ ΠΈ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ Π²ΡΠ±ΡΠ°ΡΡ ΠΎΠΏΡΠΈΠΌΠ°Π»ΡΠ½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Ρ ΡΡΠ΅ΡΠΎΠΌ Π²Π°ΡΠ΅Π³ΠΎ ΡΠ΅Π»Π΅Π²ΠΎΠ³ΠΎ ΡΡΠ½ΠΊΠ° (ΠΎΠ΄Π½Π° ΠΈΠ· ΠΎΡΠ½ΠΎΠ²Π½ΡΡ ΠΈΠ΄Π΅ΠΉ, Π»Π΅ΠΆΠ°ΡΠΈΡ Π² ΠΎΡΠ½ΠΎΠ²Π΅ Π΄ΠΈΠ·Π°ΠΉΠ½Π°, ΠΎΡΠ½ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ Π½Π° Π΄Π°Π½Π½ΡΡ ).Π ΠΎΠ΄Π½ΠΎΠΌ ΠΈΠ· Π½Π°ΡΠΈΡ Π½Π΅Π΄Π°Π²Π½ΠΈΡ Π²Π΅Π±-ΠΏΡΠΎΠ΅ΠΊΡΠΎΠ² ΠΎΡΠ½ΠΎΠ²Π½Π°Ρ Π·Π°ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠΎΠ²Π°Π½Π½Π°Ρ ΡΡΠΎΡΠΎΠ½Π° ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π»Π° Π±ΠΎΠ»ΡΡΠΎΠΉ 27-Π΄ΡΠΉΠΌΠΎΠ²ΡΠΉ Π΄ΠΈΡΠΏΠ»Π΅ΠΉ Ρ ΡΠ°Π·Π²Π΅ΡΠ½ΡΡΡΠΌ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠΌ, ΡΡΠΎ Π΄Π°Π»ΠΎ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ Π±ΠΎΠ»Π΅Π΅ 2500 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ. ΠΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ°Π»ΠΈΡΡ Π΄Π»Ρ ΠΏΠΎΡΡΡΠΎΠ»ΠΈΠΎ, ΠΏΠΎΡΡΠΎΠΌΡ Π΄ΠΎΠ»ΠΆΠ½Ρ Π±ΡΠ»ΠΈ Π±ΡΡΡ ΡΠ΅ΡΠΊΠΈΠΌΠΈ. Π ΠΊΠΎΠ½Π΅ΡΠ½ΠΎΠΌ ΠΈΡΠΎΠ³Π΅ ΠΌΡ Π·Π°Π³ΡΡΠ·ΠΈΠ»ΠΈ ΠΈΡΡ ΠΎΠ΄Π½ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ 2500 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ Π² ΡΠΈΡΠΈΠ½Ρ. ΠΠ΅ΡΠΌΠΎΡΡΡ Π½Π° ΡΠΎ, ΡΡΠΎ ΠΌΡ ΡΠΈΠ»ΡΠ½ΠΎ ΠΎΠΏΡΠΈΠΌΠΈΠ·ΠΈΡΠΎΠ²Π°Π»ΠΈ JPG, ΠΏΠΎΠ»ΡΡΠ΅Π½Π½ΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡ ΡΠ°ΠΉΠ»ΠΎΠ² Π±ΡΠ»ΠΈ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ Π±ΠΎΠ»ΡΡΠΈΠΌΠΈ. Π§ΡΠΎ Π΅ΡΠ΅ Π±ΠΎΠ»Π΅Π΅ ΡΡΠ»ΠΎΠΆΠ½ΡΠ»ΠΎ, Π½Π° ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π³Π»Π°Π²Π½ΠΎΠ³ΠΎ Π³Π΅ΡΠΎΡ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ»ΠΎ ΡΠΎΠ±ΠΎΠΉ ΡΠ΅ΡΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ Π²ΡΠ°ΡΠ°ΡΡΠΈΡ ΡΡ Π²ΠΌΠ΅ΡΡΠ΅ Ρ ΠΎΠ±Π»Π°ΡΡΡΡ Π±Π°Π½Π½Π΅ΡΠ°.Π‘ΠΎΠ²ΠΎΠΊΡΠΏΠ½ΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡ ΡΠ°ΠΉΠ»ΠΎΠ² Π²ΡΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π² ΡΠ΅ΡΠΈΠΈ ΠΏΡΠΈΠ²Π΅Π»ΠΈ ΠΊ Π·Π½Π°ΡΠΈΡΠ΅Π»ΡΠ½ΡΠΌ Π·Π°Π΄Π΅ΡΠΆΠΊΠ°ΠΌ ΠΏΡΠΈ Π·Π°Π³ΡΡΠ·ΠΊΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ.
Π Ρ ΠΎΠ΄Π΅ Π΄Π°Π»ΡΠ½Π΅ΠΉΡΠ΅Π³ΠΎ ΠΈΡΡΠ»Π΅Π΄ΠΎΠ²Π°Π½ΠΈΡ ΠΌΡ ΡΠ·Π½Π°Π»ΠΈ, ΡΡΠΎ ΡΠ΅Π»Π΅Π²ΠΎΠΉ ΡΡΠ½ΠΎΠΊ Π²Π΅Π±-ΡΠ°ΠΉΡΠ° ΡΠ°ΡΡΠΎ ΠΏΡΠΎΡΠΌΠ°ΡΡΠΈΠ²Π°Π» Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ Ρ Π±ΠΎΠ»Π΅Π΅ ΡΠΈΠΏΠΈΡΠ½ΡΠΌ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ Π² Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π΅ 1200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, Π½ΠΎ Π²ΡΠ΅ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ ΠΏΠΎΠ΄Π²Π΅ΡΠ³Π°Π»ΠΈΡΡ ΡΠ½ΠΈΠΆΠ΅Π½ΠΈΡ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ ΠΈΠ·-Π·Π° ΡΠ»ΠΈΡΠΊΠΎΠΌ Π±ΠΎΠ»ΡΡΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ. ΠΠΎΡΠ°Π»Ρ ΠΈΡΡΠΎΡΠΈΠΈ? Π£ΡΠΏΠ΅ΡΠ½ΡΠΉ ΠΏΡΠΎΡΠ΅ΡΡ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΏΡΠΎΠ΅ΠΊΡΠΈΡΡΠ΅Ρ Ρ ΡΡΠ΅ΡΠΎΠΌ Π²Π°ΡΠ΅ΠΉ ΡΠ΅Π»Π΅Π²ΠΎΠΉ Π°ΡΠ΄ΠΈΡΠΎΡΠΈΠΈ.
ΠΠΈΠΏΠΊΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ
Π Π½Π°ΡΡΠΎΡΡΠ΅ΠΌΡ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²ΠΎ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ Π·Π½Π°ΠΊΠΎΠΌΡ Ρ Β«Π»ΠΈΠΏΠΊΠΎΠΉΒ» Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠ΅ΠΉ ΠΏΠΎ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°ΠΌ.ΠΠΎ ΠΌΠ΅ΡΠ΅ ΡΠΎΡΡΠ° ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΠΎΡΡΠΈ ΡΡΡΠ°Π½ΠΈΡ Ρ Π΄Π»ΠΈΠ½Π½ΠΎΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΠΎΠΉ, Π»ΠΈΠΏΠΊΠ°Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ ΡΡΠ°Π»Π° ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎΠΉ ΡΡΠ½ΠΊΡΠΈΠ΅ΠΉ. ΠΡΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΠΌ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΎΠ²Π°ΡΡ Ρ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΉ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠ΅ΠΉ Π²Π΅Π±-ΡΠ°ΠΉΡΠ°, Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π΄Π°Π»Π΅ΠΊΠΎ ΠΎΠ½ΠΈ ΠΏΡΠΎΠΊΡΡΡΠΈΠ»ΠΈ ΡΡΡΠ°Π½ΠΈΡΡ. ΠΠΎ ΠΊΠΎΠ³Π΄Π° Π΄Π΅Π»ΠΎ Π΄ΠΎΡ ΠΎΠ΄ΠΈΡ Π΄ΠΎ ΠΏΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½ΡΡ Π±Π°Π½Π½Π΅ΡΠΎΠ² Ρ Π³Π΅ΡΠΎΡΠΌΠΈ, ΠΌΡ ΠΎΠ±Π½Π°ΡΡΠΆΠΈΠ»ΠΈ, ΡΡΠΎ ΡΠ°ΡΡΠΎ Π±ΡΠ²Π°Π΅Ρ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ Β«Π½Π°ΠΊΠ»Π΅ΠΈΡΡΒ» Π΄ΡΡΠ³ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π½Π° ΠΎΡΠ½ΠΎΠ²Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π³Π΅ΡΠΎΡ, ΡΡΠΎΠ±Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠ΅ ΠΊΠ»ΡΡΠ΅Π²ΡΠ΅ ΡΠΎΡΠΊΠΈ ΠΎΡΡΠ°Π²Π°Π»ΠΈΡΡ Π²ΡΡΠ΅ ΡΠ³ΠΈΠ±Π°.
ΠΠ΄Π½Π°ΠΊΠΎ Π΄Π΅ΠΉΡΡΠ²ΡΠΉΡΠ΅ ΠΎΡΡΠΎΡΠΎΠΆΠ½ΠΎ. Π Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΠ°Π·ΠΌΠ΅ΡΠ° Π»ΠΈΠΏΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΎΠ½ ΠΌΠΎΠΆΠ΅Ρ ΠΎΠ³ΡΠ°Π½ΠΈΡΠΈΡΡ Π΄ΠΎΡΡΡΠΏΠ½ΠΎΠ΅ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ Π½Π° ΡΠΊΡΠ°Π½Π΅ ΠΈ ΡΡΡΠ³ΡΠ±ΠΈΡΡ Π»ΡΠ±ΡΠ΅ ΠΏΠΎΡΠ΅Π½ΡΠΈΠ°Π»ΡΠ½ΡΠ΅ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ Ρ ΠΊΠ°Π΄ΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ.Π‘Π°ΠΉΡ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΡ ΡΠΎΠ·Π΄Π°Π»ΠΈ Π΄Π»Ρ ΠΏΠ»Π°Π½ΡΠ°ΡΠΎΡΠΎΠ² Enliven, ΡΠ²Π»ΡΠ΅ΡΡΡ Ρ ΠΎΡΠΎΡΠΈΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠΌ ΡΡΠΎΠ³ΠΎ ΡΡΠ°ΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ Π±Π°Π»Π°Π½ΡΠ° Π»ΠΈΠΏΠΊΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ².
ΠΠΈΠ΄Π΅ΠΎ
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ Π²ΠΈΠ΄Π΅ΠΎ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΏΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½ΠΎΠ³ΠΎ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ Π²ΡΠ΅ Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΠΌ Π² ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΠ΅ Π³ΠΎΠ΄ ΠΈΠ»ΠΈ Π΄Π²Π°. Π€Π°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ, ΠΌΡ Π½Π΅Π΄Π°Π²Π½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΠ»ΠΈ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π²ΠΈΠ΄Π΅ΠΎ Π½Π° Π½Π°ΡΡ Π΄ΠΎΠΌΠ°ΡΠ½ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ. ΠΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π²ΠΈΠ΄Π΅ΠΎ Π΄ΠΎΠ»ΠΆΠ½Ρ Π·Π°Π΄Π°Π²Π°ΡΡ ΡΠΎΠ½ ΠΈΠ»ΠΈ Π½Π°ΡΡΡΠΎΠ΅Π½ΠΈΠ΅, Π½ΠΎ Π±Π΅Π· ΠΈΠ·Π»ΠΈΡΠ½Π΅ ΡΠΏΠ΅ΡΠΈΡΠΈΡΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ°, Π·Π²ΡΠΊΠ° ΠΈ / ΠΈΠ»ΠΈ ΠΎΠ·Π²ΡΡΠΈΠ²Π°Π½ΠΈΡ. ΠΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½ΠΎΠ΅ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ Π²ΠΈΠ΄Π΅ΠΎ ΠΎΠ±ΡΡΠ½ΠΎ Π΄Π»ΠΈΡΡΡ 30 ΡΠ΅ΠΊΡΠ½Π΄ ΠΈ Π½Π°ΡΡΡΠΎΠ΅Π½ΠΎ Π½Π° Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΉ ΡΠΈΠΊΠ».
ΠΠ½Π°Π»ΠΎΠ³ΠΈΡΠ½ΡΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, Π²ΠΈΠ΄Π΅ΠΎ ΡΠ°ΡΡΠΎ Π½Π°ΠΌΠ΅ΡΠ΅Π½Π½ΠΎ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΡΠ΅ΠΌΠ½ΡΠ΅ ΠΈ ΡΠ»Π΅Π³ΠΊΠ° ΡΠ°Π·ΠΌΡΡΡΠ΅ (ΠΈΠ»ΠΈ ΡΠ΅ΠΊΡΡΡΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅), ΡΡΠΎΠ±Ρ Π½Π° ΠΏΠ΅ΡΠ΅Π΄Π½Π΅ΠΌ ΠΏΠ»Π°Π½Π΅ Π²ΡΠ΄Π΅Π»ΡΠ»ΡΡ Π΄ΡΡΠ³ΠΎΠΉ ΡΠ΅ΠΊΡΡ ΠΈΠ»ΠΈ ΠΊΠΎΠ½ΡΠ΅Π½Ρ. ΠΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½ΠΎΠ΅ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ Π²ΠΈΠ΄Π΅ΠΎ Π½Π΅ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΡΡΠ΅Π΅ ΠΌΠ΅ΡΡΠΎ Π΄Π»Ρ ΠΊΠΎΡΠΏΠΎΡΠ°ΡΠΈΠ²Π½ΠΎΠ³ΠΎ Π²ΠΈΠ΄Π΅ΠΎ ΡΠΎ Π·Π²ΡΠΊΠΎΠ²ΡΠΌ ΡΠΎΠΏΡΠΎΠ²ΠΎΠΆΠ΄Π΅Π½ΠΈΠ΅ΠΌ ΠΈ Π³ΠΎΠ²ΠΎΡΡΡΠΈΠΌΠΈ Π³ΠΎΠ»ΠΎΠ²Π°ΠΌΠΈ. Π€Π°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ, Π²ΠΈΠ΄Π΅ΠΎ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±ΡΡΡ ΠΎΡΠΊΠ»ΡΡΠ΅Π½ΠΎ ΠΊΠ°ΠΊ Π΄Π»Ρ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΡ ADA, ΡΠ°ΠΊ ΠΈ Π΄Π»Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΈ Π½Π΅ΠΊΠΎΡΠΎΡΡΠΌΠΈ Π²Π΅Π±-Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌΠΈ.
Π’Π°ΠΊΠΆΠ΅ Π²Π°ΠΆΠ½ΠΎ Π·Π°ΠΌΠ΅Π½ΡΡΡ Π²ΠΈΠ΄Π΅ΠΎ ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΌΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌΠΈ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ .ΠΡΠΎΠ±Π»Π΅ΠΌΠ° Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ Π² Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ Π·Π°Π³ΡΡΠ·ΠΊΠΈ, Π½ΠΎ ΠΈ Π² ΡΠΎΠΌ, ΡΡΠΎ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ ΠΌΠΎΠ³ΡΡ ΡΠ°ΡΡΡΡΠΎΠΈΡΡΡΡ, Π΅ΡΠ»ΠΈ Π²Π°Ρ ΡΠ°ΠΉΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ Π±ΠΎΠ»ΡΡΡΡ ΡΠ°ΡΡΡ ΠΈΡ ΡΠ°ΡΠΈΡΠ½ΡΡ ΠΏΠ»Π°Π½ΠΎΠ² Π΄Π»Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ Π΄Π°Π½Π½ΡΡ .
ΠΠΎΠ±ΠΈΠ»ΡΠ½ΡΠΉ ΠΎΠΏΡΡ
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ ΡΠΏΠ΅ΡΠΈΡ Π½Π° ΠΏΠΎΠΌΠΎΡΡ! ΠΠΎΠ»ΡΡΠ°Ρ ΡΠ°ΡΡΡ ΡΡΠΎΠ³ΠΎ ΠΏΠΎΡΡΠ° ΠΏΠΎΡΠ²ΡΡΠ΅Π½Π° ΡΠΎΠΌΡ, ΠΊΠ°ΠΊ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΡΡΠΎΠ±Ρ ΠΎΠ½ΠΈ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΎΠ²Π°Π»ΠΈ ΡΠ°Π·Π½ΡΠΌ Π½Π°ΡΡΠΎΠ»ΡΠ½ΡΠΌ Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌ ΠΈ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΡΠΌ ΡΠΊΡΠ°Π½Π°. Π£ΡΠΈΡΡΠ²Π°Ρ ΡΠΎΡΡ ΡΠΈΡΠ»Π° ΠΏΡΠΎΡΠΌΠΎΡΡΠΎΠ² Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ² ΠΈ ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΠ΅ Π½ΠΎΠ²ΡΡ ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠΎΠ² Π²Π΅Π±-ΡΠ°ΠΉΡΠΎΠ², ΠΎΡΠΈΠ΅Π½ΡΠΈΡΠΎΠ²Π°Π½Π½ΡΡ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΠ΅ ΡΡΡΡΠΎΠΉΡΡΠ²Π°, ΡΠ°ΠΊΠΈΡ ΠΊΠ°ΠΊ Gutenberg, Π½Π΅ ΠΌΠ΅Π½Π΅Π΅ Π²Π°ΠΆΠ½ΠΎ ΡΡΠΈΡΡΠ²Π°ΡΡ, ΠΊΠ°ΠΊ Π±ΠΎΠ»ΡΡΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ-Π³Π΅ΡΠΎΠΈ ΠΌΠΎΠ³ΡΡ ΠΏΠΎΠ²Π»ΠΈΡΡΡ Π½Π° ΡΠ°Π±ΠΎΡΡ Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ².
ΠΠ½ΠΎΠ³Π΄Π° Π³Π»Π°Π²Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΎΡΡΠ°Π΅ΡΡΡ ΠΊΠ°ΠΊ ΠΏΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½ΠΎΠ΅ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, Π½ΠΎ ΡΠ΅ΠΏΠ΅ΡΡ ΠΎΠ½ΠΎ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΎΠ²Π°ΡΡ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠΉ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ (ΡΠ΅Π»Π΅ΡΠΎΠ½) Π² Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΊ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠΉ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ (ΠΏΠ»Π°Π½ΡΠ΅Ρ). Π Π΄ΡΡΠ³ΠΈΡ ΡΠ»ΡΡΠ°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π³Π»Π°Π²Π½ΠΎΠ³ΠΎ Π³Π΅ΡΠΎΡ ΡΠΎΡ ΡΠ°Π½ΡΠ΅Ρ ΡΠ²ΠΎΠ΅ ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ 16 Γ 9 ΠΈ ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ Π±ΠΎΠ»Π΅Π΅ ΡΡΠ°Π΄ΠΈΡΠΈΠΎΠ½Π½ΡΠΌ Β«Π±Π°Π½Π½Π΅ΡΠ½ΡΠΌΒ» ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ, Π² ΡΠΎ Π²ΡΠ΅ΠΌΡ ΠΊΠ°ΠΊ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°Π΅ΡΡΡ ΠΏΠΎΠ΄ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ, Π° Π½Π΅ ΡΠ²Π΅ΡΡ Ρ. ΠΠΏΡΡΡ ΠΆΠ΅, Π½Π΅Ρ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎΠ³ΠΎ ΠΈΠ»ΠΈ Π½Π΅ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎΠ³ΠΎ ΠΎΡΠ²Π΅ΡΠ°. ΠΠΎ Π²Π°ΠΆΠ½ΠΎ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅ΡΡ Π²ΡΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΡΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΡ Π½Π° ΡΡΠ°ΠΏΠ΅ ΠΏΠ»Π°Π½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π²Π°ΡΠ΅Π³ΠΎ ΠΏΡΠΎΠ΅ΠΊΡΠ°.
ΠΡΠ°ΠΊ, ΡΡΠΎ Π΄Π°Π»ΡΡΠ΅ Ρ ΠΏΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½ΡΠΌΠΈ Π±Π°Π½Π½Π΅ΡΠ°ΠΌΠΈ Ρ Π³Π΅ΡΠΎΡΠΌΠΈ?
Π‘Π»Π΅Π΄ΡΡΡΠ°Ρ ΡΠ²ΠΎΠ»ΡΡΠΈΡ Π±Π°Π½Π½Π΅ΡΠΎΠ²-Π³Π΅ΡΠΎΠ΅Π² Π²Π΅Π±-ΡΠ°ΠΉΡΠΎΠ² - ΡΡΠΎ Π±Π°Π½Π½Π΅Ρ WebGL.WebGL - ΡΡΠΎ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° Javascript Ρ ΠΎΡΠΊΡΡΡΡΠΌ ΠΈΡΡ ΠΎΠ΄Π½ΡΠΌ ΠΊΠΎΠ΄ΠΎΠΌ, ΡΠΏΠΎΡΠΎΠ±Π½Π°Ρ ΡΠ΅Π½Π΄Π΅ΡΠΈΡΡ 2D ΠΈ 3D ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΠ΅ ΠΎΠ±ΡΠ΅ΠΊΡΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠΌΠΈ ΡΠΏΠΎΡΠΎΠ±Π°ΠΌΠΈ. ΠΠΎΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠ΄ΠΈΠ½ Π·Π²Π΅Π·Π΄Π½ΡΠΉ ΠΏΡΠΈΠΌΠ΅Ρ: 3 Dreams of Black
ΠΡΠΌΠ°ΠΉΡΠ΅ ΠΎΠ± ΡΡΠΎΠΌ ΠΊΠ°ΠΊ ΠΎ ΡΠΎΡΠΌΠ°Ρ ΠΈ Π³ΡΠ°ΡΠΈΠΊΠ΅, ΠΆΠΈΠ²ΡΡΠΈΡ Π² ΠΏΠΎΠ»Π½ΠΎΠΌ ΡΡΠ΅Ρ ΠΌΠ΅ΡΠ½ΠΎΠΌ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²Π΅.