Css background Π½Π° вСсь экран: Как Ρ€Π°ΡΡ‚ΡΠ½ΡƒΡ‚ΡŒ Ρ„ΠΎΠ½ Π½Π° всю ΡˆΠΈΡ€ΠΈΠ½Ρƒ ΠΎΠΊΠ½Π°?

Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΠ΅

Как ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Ρ„ΠΎΠ½ΠΎΠ²ΡƒΡŽ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Π½Π° вСсь экран?

БСйчас Π²Ρ‹ ΡƒΠ·Π½Π°Π΅Ρ‚Π΅, ΠΊΠ°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Ρ‹Π²Π°Ρ‚ΡŒ Π±Π΅ΠΊΠ³Ρ€Π°ΡƒΠ½Π΄Π½ΡƒΡŽ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π΅Π΅ ΡˆΠΈΡ€ΠΈΠ½Π° соотвСтствовала Π·Π½Π°Ρ‡Π΅Π½ΠΈΡŽ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° ΠΈΠ»ΠΈ экрана ΠΌΠΎΠ½ΠΈΡ‚ΠΎΡ€Π°.

Π”ΠΎΠ²ΠΎΠ»ΡŒΠ½ΠΎ часто Π½Π° сайтах Π² качСствС Ρ„ΠΎΠ½Π° выступаСт Π½Π΅ просто ΠΊΠ°ΠΊΠΎΠΉ-Π½ΠΈΠ±ΡƒΠ΄ΡŒ Ρ†Π²Π΅Ρ‚, Π° ΠΈΠΌΠ΅Π½Π½ΠΎ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ с ΡƒΠ·ΠΎΡ€ΠΎΠΌ ΠΈΠ»ΠΈ рисунком. ΠžΡ‡Π΅Π½ΡŒ Π²Π°ΠΆΠ½ΠΎ ΡƒΠΌΠ΅Ρ‚ΡŒ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ рисунок ΠΏΠΎΠ΄ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ своСго ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°. Π­Ρ‚ΠΎΡ‚ процСсс ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡΡƒΡ‰Π΅ΡΡ‚Π²ΠΈΡ‚ΡŒ свойством 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, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ вмСстС с Π½ΠΈΠΌ, Π»ΡƒΡ‡ΡˆΠ΅ Π½Π΅ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ Π΅Π΄ΠΈΠ½ΡΡ‚Π²Π΅Π½Π½ΡƒΡŽ Π°Π²Ρ‚ΠΎΠΌΠ°Ρ‚ΠΈΡ‡Π΅ΡΠΊΡƒΡŽ ΡΠΎΡΡ‚Π°Π²Π½ΡƒΡŽ Ρ‡Π°ΡΡ‚ΡŒ, ΠΈΠ»ΠΈ задаётся с использованиСм Ρ‚ΠΎΠ»ΡŒΠΊΠΎ значСния ΡˆΠΈΡ€ΠΈΠ½Ρ‹ (для ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°,

background-size: 50%).Β Π Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ΠΎΠ² Π² Ρ‚Π°ΠΊΠΈΡ… случаях измСнился Π² 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 ExplorerOperaSafari (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.04.0 (2.0)10.04.1 (532)
ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ
contain ΠΈ cover
3.03.6 (1.9.2)9.0 [5]10.04.1 (532)
ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° SVG Ρ„ΠΎΠ½ΠΎΠ²44. 08.0 (8.0)9.031.0?
ΠžΡΠΎΠ±Π΅Π½Π½ΠΎΡΡ‚ΡŒAndroidFirefox Mobile (Gecko)Windows PhoneOpera MobileSafari 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>Β Β Β Β 

Π’Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ Π±ΡƒΠ΄Π΅Ρ‚ Ρ‚Π°ΠΊ Автор скрипта: VodkaBears
Π€Π°ΠΉΠ»Ρ‹ ΠΈ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΠΎΠ΅ описаниС Ρ‚ΡƒΡ‚

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ полноэкранного Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ изобраТСния с использованиСм 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

Π”ΡƒΠΌΠ°ΠΉΡ‚Π΅ ΠΎΠ± этом ΠΊΠ°ΠΊ ΠΎ Ρ„ΠΎΡ€ΠΌΠ°Ρ… ΠΈ Π³Ρ€Π°Ρ„ΠΈΠΊΠ΅, ΠΆΠΈΠ²ΡƒΡ‰ΠΈΡ… Π² ΠΏΠΎΠ»Π½ΠΎΠΌ Ρ‚Ρ€Π΅Ρ…ΠΌΠ΅Ρ€Π½ΠΎΠΌ пространствС.

ΠžΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

Π’Π°Ρˆ адрСс email Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½. ΠžΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ поля ΠΏΠΎΠΌΠ΅Ρ‡Π΅Π½Ρ‹ *