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

Π Π°ΡΡ‚ΡΠ½ΡƒΡ‚ΡŒ ΠΈ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Ρ„ΠΎΠ½ CSS

ΠžΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ Β«Ρ€Π°ΡΡ‚ΡΠ½ΡƒΡ‚ΡŒ ΠΈ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΒ» …

Если Ρƒ вас Π΅ΡΡ‚ΡŒ растровый Ρ„ΠΎΡ€ΠΌΠ°Ρ‚, ΠΊΠ°ΠΊ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ, Π½Π΅ Π·Π΄ΠΎΡ€ΠΎΠ²ΠΎ (графичСски) Ρ€Π°ΡΡ‚ΡΠ³ΠΈΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ ΠΈ Π²Ρ‹Ρ‚ΡΠ³ΠΈΠ²Π°Ρ‚ΡŒ. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡŽΡ‰ΠΈΠ΅ΡΡ ΡƒΠ·ΠΎΡ€Ρ‹, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ иллюзию Ρ‚ΠΎΠ³ΠΎ ΠΆΠ΅ эффСкта. НапримСр, Ссли Ρƒ вас Π΅ΡΡ‚ΡŒ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ становится свСтлСС Π² Π½ΠΈΠΆΠ½Π΅ΠΉ части страницы, Ρ‚ΠΎΠ³Π΄Π° Π²Ρ‹ Π±ΡƒΠ΄Π΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π³Ρ€Π°Ρ„ΠΈΠΊΡƒ ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ Π² ΠΎΠ΄ΠΈΠ½ пиксСль ΠΈ Ρ‚Π°ΠΊΠΎΠΉ ΠΆΠ΅ высоты, Ρ‡Ρ‚ΠΎ ΠΈ ваш ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ (ΠΈΠ»ΠΈ, ΠΆΠ΅Π»Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ, большС, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΡ‡Π΅ΡΡ‚ΡŒ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅), Π° Π·Π°Ρ‚Π΅ΠΌ размСститС Π΅Π³ΠΎ ΠΏΠΎ всСй ΡˆΠΈΡ€ΠΈΠ½Π΅. стр. Π’ΠΎΡ‡Π½ΠΎ Ρ‚Π°ΠΊ ΠΆΠ΅, Ссли Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ ΠΏΡ€ΠΎΠ±Π΅Π³Π°Π΅Ρ‚ ΠΏΠΎ страницС, ΠΎΠ½ Π±ΡƒΠ΄Π΅Ρ‚ Π½Π° ΠΎΠ΄ΠΈΠ½ пиксСль Π² высоту ΠΈ ΡˆΠΈΡ€Π΅ вашСго ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° ΠΈ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡ‚ΡŒΡΡ ΠΏΠΎ страницС.

ΠžΠ±Ρ‹Ρ‡Π½ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ иллюзию растяТСния, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π·Π°ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€, ΠΊΠΎΠ³Π΄Π° ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ увСличиваСтся ΠΈΠ»ΠΈ ΡƒΠΌΠ΅Π½ΡŒΡˆΠ°Π΅Ρ‚ΡΡ, Π²Ρ‹ Π΄Π΅Π»Π°Π΅Ρ‚Π΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ большС, Ρ‡Π΅ΠΌ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€. Π›ΡŽΠ±ΠΎΠ΅ ΠΏΠ΅Ρ€Π΅ΠΊΡ€Ρ‹Ρ‚ΠΈΠ΅ Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ Π·Π° ΠΏΡ€Π΅Π΄Π΅Π»Π°ΠΌΠΈ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°.

Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ эффСкт, основанный Π½Π° Ρ‡Π΅ΠΌ-Ρ‚ΠΎ ΠΏΠΎΡ…ΠΎΠΆΠ΅ΠΌ Π½Π° ΠΊΠΎΡ€ΠΎΠ±ΠΊΡƒ с ΠΈΠ·ΠΎΠ³Π½ΡƒΡ‚Ρ‹ΠΌΠΈ краями, Ρ‚ΠΎ Π²Ρ‹ Π±Ρ‹ ΠΏΡ€ΠΈΠΊΡ€Π΅ΠΏΠΈΠ»ΠΈ Π»Π΅Π²ΡƒΡŽ сторону ΠΊΠΎΡ€ΠΎΠ±ΠΊΠΈ ΠΊ Π»Π΅Π²ΠΎΠΉ сторонС ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° с достаточным ΠΏΠ΅Ρ€Π΅ΠΊΡ€Ρ‹Ρ‚ΠΈΠ΅ΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ (Π² ΠΏΡ€Π΅Π΄Π΅Π»Π°Ρ… Ρ€Π°Π·ΡƒΠΌΠ½ΠΎΠ³ΠΎ) Π½Π΅ зависимо ΠΎΡ‚ Ρ‚ΠΎΠ³ΠΎ, насколько большой ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€, ΠΎΠ½ Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ заканчиваСтся Ρ„ΠΎΠ½, Π° Π·Π°Ρ‚Π΅ΠΌ Π²Ρ‹ Π½Π°ΠΊΠ»Π°Π΄Ρ‹Π²Π°Π΅Ρ‚Π΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ с ΠΏΡ€Π°Π²ΠΎΠΉ стороны Ρ€Π°ΠΌΠΊΠΈ с ΠΈΠ·ΠΎΠ³Π½ΡƒΡ‚Ρ‹ΠΌΠΈ краями ΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π°Π΅Ρ‚Π΅ Π΅Π³ΠΎ справа ΠΎΡ‚ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°.

Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, ΠΏΠΎ ΠΌΠ΅Ρ€Π΅ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ сТимаСтся ΠΈΠ»ΠΈ растСт, эффСкт ΠΈΠ·ΠΎΠ³Π½ΡƒΡ‚ΠΎΠΉ ΠΊΠΎΡ€ΠΎΠ±ΠΊΠΈ, ΠΏΠΎ-Π²ΠΈΠ΄ΠΈΠΌΠΎΠΌΡƒ, ΡƒΠΌΠ΅Π½ΡŒΡˆΠ°Π΅Ρ‚ΡΡ ΠΈΠ»ΠΈ увСличиваСтся вмСстС с Π½ΠΈΠΌ — Π½Π° самом Π΄Π΅Π»Π΅ это Π½Π΅ Ρ‚Π°ΠΊ, Π½ΠΎ ΠΎΠ½ создаСт иллюзию Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ происходит.

Π§Ρ‚ΠΎ касаСтся Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΡƒΠΌΠ΅Π½ΡŒΡˆΠ΅Π½ΠΈΡ ΠΈ увСличСния изобраТСния Π² ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π΅, Π²Π°ΠΌ потрСбуСтся ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΡ€ΠΈΠ΅ΠΌΡ‹ налоТСния слоСв, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Ρ€Π°Π±ΠΎΡ‚Π°Π»ΠΎ Π² качСствС Ρ„ΠΎΠ½Π°, ΠΈ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ JavaScript, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π΅Π³ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€ Π² ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π΅. Π’Π°ΠΌ Π½Π΅Ρ‚ Ρ‚Π΅ΠΊΡƒΡ‰Π΅Π³ΠΎ способа ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ это с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS …

Π‘ΠΎΡŽΡΡŒ, Ссли Π²Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½ΡƒΡŽ Π³Ρ€Π°Ρ„ΠΈΠΊΡƒ, Π²Ρ‹ Π²Ρ‹Ρ…ΠΎΠ΄ΠΈΡ‚Π΅ Π·Π° Ρ€Π°ΠΌΠΊΠΈ ΠΌΠΎΠ΅Π³ΠΎ ΠΎΠΏΡ‹Ρ‚Π°.

Css фоновая ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° Π½Π° вСсь экран – Π’Π°Ρ€ΠΈΡ„Ρ‹ Π½Π° ΡΠΎΡ‚ΠΎΠ²ΡƒΡŽ связь