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

image-rendering | CSS | WebReference

Π‘ΠΎΠΎΠ±Ρ‰Π°Π΅Ρ‚ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρƒ, ΠΊΠ°ΠΊΠΈΠΌ Π°Π»Π³ΠΎΡ€ΠΈΡ‚ΠΌΠΎΠΌ ΠΈΠ½Ρ‚Π΅Ρ€ΠΏΠΎΠ»ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΡ€ΠΈ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠΈ Π΅Π³ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ² ΠΈΠ»ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ ΠΌΠ°ΡΡˆΡ‚Π°Π±Π° Π² ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π°Ρ… Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°.

ΠšΡ€Π°Ρ‚ΠΊΠ°Ρ информация

Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽauto
НаслСдуСтсяДа
ΠŸΡ€ΠΈΠΌΠ΅Π½ΡΠ΅Ρ‚ΡΡΠš изобраТСниям, Ρ„ΠΎΠ½ΠΎΠ²Ρ‹ΠΌ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ°ΠΌ, <video>, <canvas>
АнимируСтсяНСт

Бинтаксис

image-rendering: auto | crisp-edges | pixelated

ΠžΠ±ΠΎΠ·Π½Π°Ρ‡Π΅Π½ΠΈΡ

ΠžΠΏΠΈΡΠ°Π½ΠΈΠ΅ΠŸΡ€ΠΈΠΌΠ΅Ρ€
<Ρ‚ΠΈΠΏ>Π£ΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ Ρ‚ΠΈΠΏ значСния.<Ρ€Π°Π·ΠΌΠ΅Ρ€>
AΒ &&Β BЗначСния Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π²Ρ‹Π²ΠΎΠ΄ΠΈΡ‚ΡŒΡΡ Π² ΡƒΠΊΠ°Π·Π°Π½Π½ΠΎΠΌ порядкС.<Ρ€Π°Π·ΠΌΠ΅Ρ€> && <Ρ†Π²Π΅Ρ‚>
A | BΠ£ΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ Π½Π°Π΄ΠΎ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄Π½ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΈΠ· ΠΏΡ€Π΅Π΄Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Ρ… (A ΠΈΠ»ΠΈ B).
normal | small-caps
A || BКаТдоС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ ΡΠ°ΠΌΠΎΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΈΠ»ΠΈ совмСстно с Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ Π² ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ»ΡŒΠ½ΠΎΠΌ порядкС.width || count
[ ]Π“Ρ€ΡƒΠΏΠΏΠΈΡ€ΡƒΠ΅Ρ‚ значСния.[ crop || cross ]
*ΠŸΠΎΠ²Ρ‚ΠΎΡ€ΡΡ‚ΡŒ ноль ΠΈΠ»ΠΈ большС Ρ€Π°Π·.[,<врСмя>]*
+ΠŸΠΎΠ²Ρ‚ΠΎΡ€ΡΡ‚ΡŒ ΠΎΠ΄ΠΈΠ½ ΠΈΠ»ΠΈ большС Ρ€Π°Π·.<число>+
?Π£ΠΊΠ°Π·Π°Π½Π½Ρ‹ΠΉ Ρ‚ΠΈΠΏ, слово ΠΈΠ»ΠΈ Π³Ρ€ΡƒΠΏΠΏΠ° Π½Π΅ являСтся ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ.inset?
{A, B}ΠŸΠΎΠ²Ρ‚ΠΎΡ€ΡΡ‚ΡŒ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅ A, Π½ΠΎ Π½Π΅ Π±ΠΎΠ»Π΅Π΅ B Ρ€Π°Π·.<радиус>{1,4}
#ΠŸΠΎΠ²Ρ‚ΠΎΡ€ΡΡ‚ΡŒ ΠΎΠ΄ΠΈΠ½ ΠΈΠ»ΠΈ большС Ρ€Π°Π· Ρ‡Π΅Ρ€Π΅Π· Π·Π°ΠΏΡΡ‚ΡƒΡŽ.<врСмя>#

ЗначСния

auto
Π‘Ρ€Π°ΡƒΠ·Π΅Ρ€ примСняСт встроСнный Π² Π½Π΅Π³ΠΎ Π°Π»Π³ΠΎΡ€ΠΈΡ‚ΠΌ интСрполяции, ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ бикубичСский ΠΌΠ΅Ρ‚ΠΎΠ΄.
crisp-edges
ЦСль Π°Π»Π³ΠΎΡ€ΠΈΡ‚ΠΌΠ° β€” быстроС ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ, для Ρ‡Π΅Π³ΠΎ примСняСтся ΠΌΠ΅Ρ‚ΠΎΠ΄ интСрполяции ΠΏΠΎ блиТайшим Ρ‚ΠΎΡ‡ΠΊΠ°ΠΌ. Он Π½Π΅ создаёт сглаТивания Π²ΠΎΠΊΡ€ΡƒΠ³ Π»ΠΈΠ½ΠΈΠΉ ΠΈ Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΠΎΠ²Π°Ρ‚ΡŒ Π² Ρ‚Π΅Ρ… случаях, ΠΊΠΎΠ³Π΄Π° трСбуСтся ΡΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ ΠΏΠ΅Ρ€Π²ΠΎΠ½Π°Ρ‡Π°Π»ΡŒΠ½Ρ‹ΠΉ Π½Π°Π±ΠΎΡ€ Ρ†Π²Π΅Ρ‚ΠΎΠ² ΠΈ Ρ€Π΅Π·ΠΊΠΎΡΡ‚ΡŒ ΠΊΡ€Π°Ρ‘Π².
pixelated
ΠŸΡ€ΠΈ ΡƒΠ²Π΅Π»ΠΈΡ‡Π΅Π½ΠΈΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ сохраняСт контраст ΠΈ ΠΊΠΎΠ½Ρ‚ΡƒΡ€Ρ‹ изобраТСния, Π½Π΅ допуская размытия Ρ†Π²Π΅Ρ‚ΠΎΠ² ΠΈ ΠΊΠΎΠ½Ρ‚ΡƒΡ€ΠΎΠ². ΠŸΡ€ΠΈ ΡƒΠΌΠ΅Π½ΡŒΡˆΠ΅Π½ΠΈΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ² Π°Π½Π°Π»ΠΎΠ³ΠΈΡ‡Π΅Π½ auto.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>image-rendering</title> <style> img { border: 1px solid #ccc; } .fast { image-rendering: pixelated; } </style> </head> <body> <p><img src=»image/russia.png» alt=»Π€Π»Π°Π³ России»> <img src=»image/russia.png» alt=»Π€Π»Π°Π³ России»></p> </body> </html>

Π’ Π΄Π°Π½Π½ΠΎΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ Π΄Π²Π΅ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ с ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ 30 пиксСлСй ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΠ²Π°ΡŽΡ‚ΡΡ Π΄ΠΎ 200 пиксСлСй с использованиСм Ρ€Π°Π·Π½Ρ‹Ρ… Π°Π»Π³ΠΎΡ€ΠΈΡ‚ΠΌΠΎΠ².

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅

Internet Explorer ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ нСстандартноС свойство -ms-interpolation-mode.

Safari Π΄ΠΎ вСрсии 10 ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ свойство -webkit-image-rendering.

Firefox ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ -moz-crisp-edges.

БпСцификация

КаТдая спСцификация ΠΏΡ€ΠΎΡ…ΠΎΠ΄ΠΈΡ‚ нСсколько стадий одобрСния.

  • Recommendation (РСкомСндация) β€” спСцификация ΠΎΠ΄ΠΎΠ±Ρ€Π΅Π½Π° W3C ΠΈ Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΠΎΠ²Π°Π½Π° ΠΊΠ°ΠΊ стандарт.
  • Candidate Recommendation (ВозмоТная рСкомСндация) β€” Π³Ρ€ΡƒΠΏΠΏΠ°, ΠΎΡ‚Π²Π΅Ρ‡Π°ΡŽΡ‰Π°Ρ Π·Π° стандарт, ΡƒΠ΄ΠΎΠ²Π»Π΅Ρ‚Π²ΠΎΡ€Π΅Π½Π°, ΠΊΠ°ΠΊ ΠΎΠ½ соотвСтствуСт своим цСлям, Π½ΠΎ трСбуСтся ΠΏΠΎΠΌΠΎΡ‰ΡŒ сообщСства Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ² ΠΏΠΎ Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ стандарта.
  • Proposed Recommendation (ΠŸΡ€Π΅Π΄Π»Π°Π³Π°Π΅ΠΌΠ°Ρ рСкомСндация) β€” Π½Π° этом этапС Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ прСдставлСн Π½Π° рассмотрСниС ΠšΠΎΠ½ΡΡƒΠ»ΡŒΡ‚Π°Ρ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ совСта W3C для ΠΎΠΊΠΎΠ½Ρ‡Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ утвСрТдСния.
  • Working Draft (Π Π°Π±ΠΎΡ‡ΠΈΠΉ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚) β€” Π±ΠΎΠ»Π΅Π΅ зрСлая вСрсия Ρ‡Π΅Ρ€Π½ΠΎΠ²ΠΈΠΊΠ° послС обсуТдСния ΠΈ внСсСния ΠΏΠΎΠΏΡ€Π°Π²ΠΎΠΊ для рассмотрСния сообщСством.
  • Editor’s draft (РСдакторский Ρ‡Π΅Ρ€Π½ΠΎΠ²ΠΈΠΊ) β€” чСрновая вСрсия стандарта послС внСсСния ΠΏΡ€Π°Π²ΠΎΠΊ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π°ΠΌΠΈ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°.
  • Draft (Π§Π΅Ρ€Π½ΠΎΠ²ΠΈΠΊ спСцификации) β€” пСрвая чСрновая вСрсия стандарта.

Π‘Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹

auto41286.13.6
crisp-edges6.13.6
pixelated
412810
auto4. 13.6377.1
crisp-edges3.6377.1
pixelated4.1
37
10.2

Π‘Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹

Π’ Ρ‚Π°Π±Π»ΠΈΡ†Π΅ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ² ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ обозначСния.

  • Β β€” свойство ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ поддСрТиваСтся Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠΌ со всСми допустимыми значСниями;
  • Β β€” свойство Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠΌ Π½Π΅ воспринимаСтся ΠΈ игнорируСтся;
  • Β β€” ΠΏΡ€ΠΈ Ρ€Π°Π±ΠΎΡ‚Π΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ появлСниС Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… ошибок, Π»ΠΈΠ±ΠΎ свойство поддСрТиваСтся лишь частично, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π½Π΅ всС допустимыС значСния Π΄Π΅ΠΉΡΡ‚Π²ΡƒΡŽΡ‚ ΠΈΠ»ΠΈ свойство примСняСтся Π½Π΅ ΠΊΠΎ всСм элСмСнтам, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΡƒΠΊΠ°Π·Π°Π½Ρ‹ Π² спСцификации.

Число ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ Π²Π΅Ρ€ΡΠΈΡŽ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°, начиная с ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ свойство поддСрТиваСтся.

Автор ΠΈ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Ρ‹

Автор: Π’Π»Π°Π΄ ΠœΠ΅Ρ€ΠΆΠ΅Π²ΠΈΡ‡

ПослСднСС измСнСниС: 24.

09.2018

Π Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Ρ‹: Π’Π»Π°Π΄ ΠœΠ΅Ρ€ΠΆΠ΅Π²ΠΈΡ‡

Border-image β€’ ΠŸΡ€ΠΎ CSS

Border-image β€” свойство, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ позволяСт Π·Π°Π΄Π°Π²Π°Ρ‚ΡŒ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ для Ρ€Π°ΠΌΠΊΠΈ элСмСнта. Бвойство заполняСт Ρ€Π°ΠΌΠΊΡƒ Π·Π°Π΄Π°Π½Π½ΠΎΠΉ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΎΠΉ, распрСдСляя части изобраТСния Ρ‚Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ³Π»ΠΎΠ²Ρ‹Π΅ части Π½Π°Ρ…ΠΎΠ΄ΠΈΠ»ΠΈΡΡŒ Π² ΡƒΠ³Π»Π°Ρ… Ρ€Π°ΠΌΠΊΠΈ, Π° пространства ΠΌΠ΅ΠΆΠ΄Ρƒ Π½ΠΈΠΌΠΈ заполнялись ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹ΠΌΠΈ частями изобраТСния.

БпСцификация: w3.org/TR/css3-background/#border-images.

Π­Ρ‚ΠΎ свойство позволяСт Π»Π΅Π³ΠΊΠΎ Π΄Π΅Π»Π°Ρ‚ΡŒ нСвСроятныС ΡˆΡ‚ΡƒΠΊΠΈ, для ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Ρ€Π°Π½ΡŒΡˆΠ΅ Ρ‚Ρ€Π΅Π±ΠΎΠ²Π°Π»ΠΎΡΡŒ ΠΎΡ‚ 3-Ρ… Π΄ΠΎ 8-ΠΌΠΈ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ ΠΈ манипуляции с Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΎΠΉ.

ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°ΠΌΠΈ:

НС поддСрТиваСтся Π² IE10 ΠΈ Π½ΠΈΠΆΠ΅. Π’ старой ΠΎΠΏΠ΅Ρ€Π΅ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ с прСфиксом. ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ старых Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ² (ΠΈΠ»ΠΈ с ΠΎΡ‚ΠΊΠ»ΡŽΡ‡Π΅Π½Π½Ρ‹ΠΌΠΈ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ°ΠΌΠΈ) увидят ΡΡ‚Π°Π½Π΄Π°Ρ€Ρ‚Π½ΡƒΡŽ Ρ€Π°ΠΌΠΊΡƒ, Π·Π°Π΄Π°Π½Π½ΡƒΡŽ Π²

border, поэтому ΠΈΠΌΠ΅Π΅Ρ‚ смысл Π·Π°Π΄Π°Π²Π°Ρ‚ΡŒ Π΅ΠΉ подходящиС ΡΡ‚ΠΈΠ»ΡŒ ΠΈ Ρ†Π²Π΅Ρ‚.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€:

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹Π΅ изобраТСния:

МоТно ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚Π½Ρ‹Π΅ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ, Π½ΠΎ ΠΈ ΠΎΠ²Π°Π»ΡŒΠ½Ρ‹Π΅:

ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ ΠΈΠ· ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°:

ΠŸΡ€ΠΈ этом border-radius Π½Π΅ влияСт Π½Π° border-image, Ρ‚Π°ΠΊ Ρ‡Ρ‚ΠΎ ΠΊΡ€ΡƒΠ³Π»Ρ‹Π΅ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ для Ρ€Π°ΠΌΠΊΠΈ β€” СдинствСнный способ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΎΠΊΡ€ΡƒΠ³Π»ΡƒΡŽ Ρ€Π°ΠΌΠΊΡƒ.

Π“Π»Π°Π²Π½ΠΎΠ΅ Ρ‚Ρ€Π΅Π±ΠΎΠ²Π°Π½ΠΈΠ΅ β€” ΡΠΈΠΌΠΌΠ΅Ρ‚Ρ€ΠΈΡ‡Π½ΠΎΡΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ.

Π Π°ΠΌΠΊΠ° с ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒ рСзиновая, ΠΈ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½Π° ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Ρƒ любого Ρ€Π°Π·ΠΌΠ΅Ρ€Π°.

ΠŸΠΎΠΈΠ·ΠΌΠ΅Π½ΡΠΉΡ‚Π΅ Ρ€Π°Π·ΠΌΠ΅Ρ€ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ ΠΊΠ°ΠΊ Ρ€Π°ΠΌΠΊΠ° адаптируСтся вмСстС с элСмСнтом:

Или ΠΎΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ этот ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Π² ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΠΌ ΠΎΠΊΠ½Π΅.

Π’ качСствС Ρ€Π°ΠΌΠΊΠΈ ΠΌΠΎΠ³ΡƒΡ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ достаточно слоТныС изобраТСния:

ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ°:

Π‘Π°ΠΌΡ‹ΠΉ ΠΊΠΎΡ€ΠΎΡ‚ΠΊΠΈΠΉ способ Π·Π°Π΄Π°Ρ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ для Ρ€Π°ΠΌΠΊΠΈ выглядит Π²ΠΎΡ‚ Ρ‚Π°ΠΊ:

border: 60px solid transparent;
border-image: url("//img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_XL.png") 25% round;

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚:

Для border ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ Π½ΡƒΠΆΠ½ΠΎ Π·Π°Π΄Π°Ρ‚ΡŒ Ρ‚ΠΎΠ»Ρ‰ΠΈΠ½Ρƒ ΠΈ ΡΡ‚ΠΈΠ»ΡŒ Ρ€Π°ΠΌΠΊΠΈ. Π¦Π²Π΅Ρ‚ β€” ΠΎΠΏΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎ, Π½ΠΎ Ρ€Π°ΠΌΠΊΡƒ ΠΈΠΌΠ΅Π½Π½ΠΎ Ρ‚Π°ΠΊΠΎΠ³ΠΎ Ρ†Π²Π΅Ρ‚Π° увидят ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ, Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚

border-image. По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ это Π±ΡƒΠ΄Π΅Ρ‚ Ρ†Π²Π΅Ρ‚ тСкста. МоТно Π·Π°Π΄Π°Π²Π°Ρ‚ΡŒ transparent β€” ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½Ρ‹ΠΉ.

Для border-image ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ Π·Π°Π΄Π°Π²Π°Ρ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ (border-image-source), Ρ€Π°Π·ΠΌΠ΅Ρ€ ΡƒΠ³Π»ΠΎΠ²ΠΎΠΉ части (border-image-slice) ΠΈ ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π΅Π½ΠΈΠ΅ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ (border-image-repeat).

Заданная ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° рСТСтся Π²ΠΎΡ‚ ΠΏΠΎ Ρ‚Π°ΠΊΠΎΠΉ схСмС:

Π–Π΅Π»Ρ‚Ρ‹ΠΌ Π²Ρ‹Π΄Π΅Π»Π΅Π½Ρ‹ ΡƒΠ³Π»ΠΎΠ²Ρ‹Π΅ части, Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… задаСтся свойством border-image-slice, Π·Π΅Π»Π΅Π½Ρ‹ΠΌ β€” Π·Π°ΠΏΠΎΠ»Π½ΡΡŽΡ‰ΠΈΠ΅.

Рассмотрим ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Π΅ свойства border-image.

Border-image-source

Π’ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹Π΅ значСния: none ΠΈΠ»ΠΈ <image>

.

ВСорСтичСски, ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Π΄Π°Π²Π°Ρ‚ΡŒ ΠΈ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Ρ‹, Π½ΠΎ ΠΎΠ½ΠΈ Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ Π² Π₯Ρ€ΠΎΠΌΠ΅/Π‘Π°Ρ„Π°Ρ€ΠΈ ΠΈ Π½Π΅ Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ Π² FF. Π‘ ΠΈΡ… ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΌΠΎΠΆΠ½ΠΎ Π±Ρ‹Π»ΠΎ Π±Ρ‹ Π΄Π΅Π»Π°Ρ‚ΡŒ Ρ€Π΅Π·ΠΈΠ½ΠΎΠ²Ρ‹Π΅ Ρ‚Π΅Π½ΠΈ Π½Π΅ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎΠΉ Ρ„ΠΎΡ€ΠΌΡ‹, Π²ΠΎΡ‚ Ρ‚Π°ΠΊΠΈΠ΅, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ (ΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Π² Π₯Ρ€ΠΎΠΌΠ΅). Π‘ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π°ΠΌΠΈ ΠΌΠΎΠΆΠ½ΠΎ Π΄Π΅Π»Π°Ρ‚ΡŒ ΠΈ Π±ΠΎΠ»Π΅Π΅ странныС Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹, ΠΏΡ€ΠΈΡ‡Π΅ΠΌ ΡƒΠ·ΠΎΡ€Ρ‹ сами заботятся ΠΎ своСй ΠΏΡ€ΠΎΠΏΠΎΡ€Ρ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ. ΠŸΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ Π½ΠΈΠΆΠ΅ Π½Π° ΠΌΠΎΠΌΠ΅Π½Ρ‚ написания ΡΡ‚Π°Ρ‚ΡŒΠΈ Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π² Π₯Ρ€ΠΎΠΌΠ΅ ΠΈ Π‘Π°Ρ„Π°Ρ€ΠΈ.

Upd: Π’ Firefox Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ начиная с 29-ΠΉ вСрсии.

Π Π°Π·ΠΌΠ΅Ρ€ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ Ρ€Π°Π²Π΅Π½ Ρ‚ΠΎΠ»Ρ‰ΠΈΠ½Π΅ Ρ€Π°ΠΌΠΊΠΈ. Π¦Π²Π΅Ρ‚ ΠΈ ΡΡ‚ΠΈΠ»ΡŒ Ρ€Π°ΠΌΠΊΠΈ ΠΈΠ³Π½ΠΎΡ€ΠΈΡ€ΡƒΡŽΡ‚ΡΡ.

Если Π·Π°Π΄Π°Ρ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ border-image-source, ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° Π·Π°ΠΏΠΎΠ»Π½ΠΈΡ‚ собой ΡƒΠ³ΠΎΠ»ΠΊΠΈ, Π½Π΅ зная Ρ‡Ρ‚ΠΎ Π΅ΠΉ Π΄Π΅Π»Π°Ρ‚ΡŒ дальшС:

border: 80px solid transparent;
border-image: url("//img-fotki. yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_XL.png");

Border-image-slice

Π’Π°ΠΆΠ½ΠΎΠ΅ свойство, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ опрСдСляСт Ρ€Π°Π·ΠΌΠ΅Ρ€ куска изобраТСния, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Π·Π°ΠΏΠΎΠ»Π½ΠΈΡ‚ ΡƒΠ³Π»Ρ‹ Ρ€Π°ΠΌΠΊΠΈ. ΠžΡΡ‚Π°Π»ΡŒΠ½Ρ‹Π΅ части Π±ΡƒΠ΄ΡƒΡ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Π½Ρ‹ для заполнСния пространства ΠΌΠ΅ΠΆΠ΄Ρƒ ΡƒΠ³Π»Π°ΠΌΠΈ ΠΏΠΎ Π°Π»Π³ΠΎΡ€ΠΈΡ‚ΠΌΡƒ, Π·Π°Π΄Π°Π½Π½ΠΎΠΌΡƒ Π² border-image-repeat.

Π’ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹Π΅ значСния:

<ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚Ρ‹> β€” Ρ€Π°ΡΡΡ‡ΠΈΡ‚Ρ‹Π²Π°ΡŽΡ‚ΡΡ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° изобраТСния. Π“ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΡˆΠΈΡ€ΠΈΠ½Ρ‹, Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹Π΅ β€” ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ высоты.

<числа> β€” пиксСли (для растрового изобраТСния) ΠΈΠ»ΠΈ ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹ (для Π²Π΅ΠΊΡ‚ΠΎΡ€Π½ΠΎΠ³ΠΎ). Π•Π΄ΠΈΠ½ΠΈΡ†Ρ‹ измСрСния Π½Π΅ ΡƒΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‚ΡΡ.

fill β€” ΠΊΠ»ΡŽΡ‡Π΅Π²ΠΎΠ΅ слово, Π΄ΠΎΠΏΠΎΠ»Π½ΡΡŽΡ‰Π΅Π΅ ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰ΠΈΠ΅ значСния. Если ΠΎΠ½ΠΎ Π·Π°Π΄Π°Π½ΠΎ, ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π΅ обрСзаСтся Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠΌ ΠΊΡ€Π°Π΅ΠΌ Ρ€Π°ΠΌΠΊΠΈ, Π° заполняСт Ρ‚Π°ΠΊΠΆΠ΅ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ Π²Π½ΡƒΡ‚Ρ€ΠΈ Ρ€Π°ΠΌΠΊΠΈ. ΠžΡ‡Π΅Π½ΡŒ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ для ΠΎΠΊΡ€ΡƒΠ³Π»Ρ‹Ρ… Ρ€Π°ΠΌΠΎΠΊ.

Π§Ρ‚ΠΎΠ±Ρ‹ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ значСния для ΠΊΠ°ΠΆΠ΄ΠΎΠΉ стороны, нСсколько Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Π΄Π°Ρ‚ΡŒ Ρ‡Π΅Ρ€Π΅Π· ΠΏΡ€ΠΎΠ±Π΅Π».

Π‘ΡƒΠΌΠΌΠ° Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ ΠΏΡ€ΠΎΡ‚ΠΈΠ²ΠΎΠΏΠΎΠ»ΠΎΠΆΠ½Ρ‹Ρ… сторон Π΄ΠΎΠ»ΠΆΠ½Π° Π±Ρ‹Ρ‚ΡŒ мСньшС Ρ€Π°Π·ΠΌΠ΅Ρ€Π° ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ, ΠΈΠ½Π°Ρ‡Π΅ Π±ΡƒΠ΄Π΅Ρ‚ Π½Π΅Ρ‡Π΅ΠΌ Π·Π°ΠΏΠΎΠ»Π½ΡΡ‚ΡŒ пространство ΠΌΠ΅ΠΆΠ΄Ρƒ ΡƒΠ³Π»Π°ΠΌΠΈ.

border: 80px solid transparent;
border-image: url("//img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_L.png");
border-image-slice: 100;

Border-image-repeat

Бвойство опрСдСляСт ΠΊΠ°ΠΊ Π±ΡƒΠ΄ΡƒΡ‚ Π·Π°ΠΏΠΎΠ»Π½ΡΡ‚ΡŒΡΡ ΠΏΡ€ΠΎΠΌΠ΅ΠΆΡƒΡ‚ΠΊΠΈ ΠΌΠ΅ΠΆΠ΄Ρƒ ΡƒΠ³Π»Π°ΠΌΠΈ.

Π’ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹Π΅ значСния:

stretch β€” растягиваСт Π·Π°ΠΏΠΎΠ»Π½ΡΡŽΡ‰ΠΈΠΉ участок ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ. Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ;

repeat β€” повторяСт Π·Π°ΠΏΠΎΠ»Π½ΡΡŽΡ‰ΠΈΠΉ участок, ΠΏΡ€ΠΈ этом Π²ΠΈΠ΄Π½Ρ‹ мСста стыков с ΡƒΠ³Π»ΠΎΠ²ΠΎΠΉ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΎΠΉ;

round β€” заполняСт ΠΏΡ€ΠΎΠΌΠ΅ΠΆΡƒΡ‚ΠΎΠΊ ΠΌΠ΅ΠΆΠ΄Ρƒ ΡƒΠ³Π»Π°ΠΌΠΈ. ΠœΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Π·Π°ΠΌΠ΅Ρ‚Π΅Π½ стык Π² сСрСдинС стороны. Π‘Π°ΠΌΠΎΠ΅ Π°ΠΊΠΊΡƒΡ€Π°Ρ‚Π½ΠΎΠ΅ дСйствиС.

space β€” дСйствуСт ΠΏΠΎΡ…ΠΎΠΆΠ΅ Π½Π° repeat. Π Π°Π·Π½ΠΈΡ†Ρ‹ Π½Π΅ ΠΎΠ±Π½Π°Ρ€ΡƒΠΆΠΈΠ»Π°.

МоТно Π·Π°Π΄Π°Ρ‚ΡŒ Π΄Π²Π° значСния сразу, ΠΏΠ΅Ρ€Π²ΠΎΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚Π²Π΅Ρ‡Π°Ρ‚ΡŒ Π·Π° ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ Π² Π²Π΅Ρ€Ρ…Π½Π΅ΠΉ ΠΈ Π½ΠΈΠΆΠ½Π΅ΠΉ Ρ€Π°ΠΌΠΊΠ΅, Π²Ρ‚ΠΎΡ€ΠΎΠ΅ β€” Π·Π° Π»Π΅Π²ΡƒΡŽ ΠΈ ΠΏΡ€Π°Π²ΡƒΡŽ.

border-image: url("//img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_L.png");
border-image-slice: 100;
border-image-repeat: repeat;

Π‘Π»Π΅Π²Π° repeat, справа round.

Если Ρ€Π°ΠΌΠΊΠ° слоТная ΠΈ стороны ΠΏΠ»ΠΎΡ…ΠΎ ΡΡ‚Ρ‹ΠΊΡƒΡŽΡ‚ΡΡ ΠΌΠ΅ΠΆΠ΄Ρƒ собой, stretch сработаСт ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚Π½Π΅Π΅:

Border-image-width

border-image-width

Бвойство управляСт ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ Π²ΠΈΠ΄ΠΈΠΌΠΎΠΉ части Ρ€Π°ΠΌΠΊΠΈ, ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΠ΅Ρ‚ Π΅Ρ‘. Если это Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ большС ΡˆΠΈΡ€ΠΈΠ½Ρ‹ border-width, ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° Ρ€Π°ΠΌΠΊΠΈ Π·Π°ΠΏΠΎΠ»Π·Π΅Ρ‚ ΠΏΠΎΠ΄ содСрТимоС, Π΄Π°ΠΆΠ΅ Ссли Π½Π΅ Π·Π°Π΄Π°Π½Π½ΠΎ свойство fill.

Π’ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹Π΅ значСния:

<Π΄Π»ΠΈΠ½Π°> β€” значСния Π² px ΠΈΠ»ΠΈ em;

<%> β€” значСния Π² ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚Π°Ρ… ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° изобраТСния;

<числа> β€” числовоС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ умноТаСтся border-width

auto β€” ΠΊΠ»ΡŽΡ‡Π΅Π²ΠΎΠ΅ слово. Если ΠΎΠ½ΠΎ Π·Π°Π΄Π°Π½ΠΎ, Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Ρ€Π°Π²Π½ΠΎ соотвСтствСнному border-image-slice. Если подходящСго Ρ€Π°Π·ΠΌΠ΅Ρ€Π° Π½Π΅Ρ‚, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ border-width, ΠΏΡ€ΠΈ этом ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° заполняСт вСсь ΡƒΠ³ΠΎΠ» Ρ€Π°ΠΌΠΊΠΈ, заползая ΠΏΠΎΠ΄ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚. НСмного странно Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚.

border: 60px solid transparent;
border-image: url("//img-fotki. yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_L.png");
border-image-slice: 80;
border-image-repeat: round;
border-image-width: 160px;

Π‘ΠΏΡ€Π°Π²Π° Ρ€Π°ΠΌΠΊΠ° с border-image-width. На ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ слСва Π²ΠΈΠ΄Π½ΠΎ, ΠΊΠ°ΠΊ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΎΠ±Ρ€Π΅Π·Π°Π»Π°ΡΡŒ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠΌΠΈ краями Ρ€Π°ΠΌΠΊΠΈ. ΠŸΡ€Π°Π²Π°Ρ Ρ€Π°ΠΌΠΊΠ° засчСт ΡƒΠ²Π΅Π»ΠΈΡ‡Π΅Π½Π½ΠΎΠΉ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ Π·Π°ΠΏΠΎΠ»Π·Π»Π° ΠΏΠΎΠ΄ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚.

Border-image-outset

Π˜Π½Ρ‚Π΅Ρ€Π΅ΡΠ½ΠΎΠ΅ свойство, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰ΠΈΠ΅ ΠΎΡ‚ΠΎΠ΄Π²ΠΈΠ½ΡƒΡ‚ΡŒ Ρ€Π°ΠΌΠΊΡƒ Π·Π° ΠΏΡ€Π΅Π΄Π΅Π»Ρ‹ элСмСнта. ΠžΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ значСния Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ΡΡ.

Π’ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹Π΅ значСния:

<Π΄Π»ΠΈΠ½Π°> β€” значСния Π² px ΠΈΠ»ΠΈ em;

<числа> β€” числовоС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ умноТаСтся border-width.

border: 60px solid transparent;
border-image: url("//img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_L.png");
border-image-slice: 120;
border-image-repeat: round;
border-image-outset: 60px 10px 50px 120px;

Π‘ΠΏΡ€Π°Π²Π° ΠΏΡ€ΠΈΠΌΠ΅Ρ€ с border-image-outset. Π­Ρ‚ΠΎ свойство Π½Π΅ влияСт Π½Π° Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ элСмСнта, Π° Ρ€Π°ΠΌΠΊΠ° ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠ΅Ρ€Π΅ΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒ сосСдниС элСмСнты:

border-image β€” довольно слоТноС, Π½ΠΎ ΠΎΡ‡Π΅Π½ΡŒ интСрСсноС свойство. МнС ΠΎΡ‡Π΅Π½ΡŒ нравится идСя ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ вмСсто Ρ‚Ρ€Π°Π΄ΠΈΡ†ΠΈΠΎΠ½Π½ΠΎΠ³ΠΎ способа ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π³Ρ€Π°Ρ„ΠΈΡ‡Π΅ΡΠΊΡƒΡŽ Ρ€Π°ΠΌΠΊΡƒ для Ρ€Π΅Π·ΠΈΠ½ΠΎΠ²Ρ‹Ρ… элСмСнтов. ΠŸΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ Π² постС нСсколько Π΄ΠΈΠΊΠΎΠ²Π°Ρ‚Ρ‹, Π½ΠΎ я ΡƒΠ²Π΅Ρ€Π΅Π½Π°, Ρ‡Ρ‚ΠΎ свойство ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒ Π±ΠΎΠ»Π΅Π΅ изящно, Π° ΠΎΡ‚ Π΅Π³ΠΎ возмоТностСй просто Π·Π°Ρ…Π²Π°Ρ‚Ρ‹Π²Π°Π΅Ρ‚ Π΄ΡƒΡ… : )

НапримСр, Π’Π°Π΄ΠΈΠΌ МакССв ΠΏΡ€Π΅Π΄Π»ΠΎΠΆΠΈΠ» с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ border-image Π΄Π΅Π»Π°Ρ‚ΡŒ Ρ‚Π΅Π½ΡŒ слоТной Ρ„ΠΎΡ€ΠΌΡ‹ для Π±Π»ΠΎΠΊΠ°, Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ Π·Π°Ρ€Π°Π½Π΅Π΅ нСизвСстны.

ΠŸΡ€ΠΈΠ³ΠΎΡ‚ΠΎΠ²ΡŒΡ‚Π΅ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΡΡ‰ΡƒΡŽ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ ΠΈ посмотритС ΠΊΠ°ΠΊ border-image Π»Π΅Π³ΠΊΠΎ справится с Π·Π°Π΄Π°Ρ‡Π΅ΠΉ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ всСго лишь ΠΏΠ°Ρ€Ρ‹ строчСк ΠΊΠΎΠ΄Π°:

МоТно ΠΌΠ΅Π½ΡΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ Π±Π»ΠΎΠΊΠ° ΠΈ Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ Π² Π½Π΅Π³ΠΎ сколько ΡƒΠ³ΠΎΠ΄Π½ΠΎ тСкста β€” Ρ‚Π΅Π½ΡŒ Π±ΡƒΠ΄Π΅Ρ‚ растянСтся вслСд Π·Π° Π½ΠΈΠΌ.

ΠŸΡ€Π΅ΠΊΡ€Π°ΡΠ½Π°Ρ простота. Π‘ΡƒΠ΄Π΅Ρ‚ Π·Π΄ΠΎΡ€ΠΎΠ²ΠΎ, ΠΊΠΎΠ³Π΄Π° это свойство ΠΌΠΎΠΆΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠ»Π½ΠΎΡ†Π΅Π½Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π±Π΅Π· оглядки Π½Π° старыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹.

Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡ Ρ€Π°ΠΌΠΎΠΊ Π½Π°Π³ΡƒΠ³Π»Π΅Π½Ρ‹ ΠΏΠΎ запросу «Ρ€Π°ΠΌΠΊΠΈ». ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° с дТСдаями β€” Ρ„ΠΎΡ‚ΠΎΠΆΠ°Π±Π°.

4 симпатичных CSS-эффСкта для ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ

Когда-Ρ‚ΠΎ ΠΌΡ‹ использовали ΠΈΡΠΊΠ»ΡŽΡ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Photoshop для создания симпатичных графичСских эффСктов. Π’ настоящСС врСмя ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ чистый CSS для этих Ρ†Π΅Π»Π΅ΠΉ. Π”Π°Π½Π½Ρ‹ΠΉ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ Π΄Π΅Π»Π°Π΅Ρ‚ ΠΎΡ‡Π΅Π½ΡŒ Π³ΠΈΠ±ΠΊΠΈΠΌ процСс создания Π΄ΠΈΠ·Π°ΠΉΠ½Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π»Π΅Π³ΠΊΠΎ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ ΠΈ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π² любоС врСмя.

БСгодня я расскаТу Π²Π°ΠΌ, ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ нСсколько ΠΎΡ‡Π΅Π½ΡŒ простых ΠΈ симпатичных CSS-эффСктов для ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΏΠΎΠ»Π°Ρ€ΠΎΠΈΠ΄ ΠΈΠ»ΠΈ Π²ΠΈΠ½ΡŒΠ΅Ρ‚ΠΊΡƒ.

ΠŸΠΎΠ»Π°Ρ€ΠΎΠΈΠ΄

Π”Π΅ΠΌΠΎ: Π½Π° Tinkerbin.

Наш ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ эффСкт прСдставляСт собой созданиС изобраТСния Π² Π²ΠΈΠ΄Π΅ Ρ„ΠΎΡ‚ΠΎ ΠΏΠΎΠ»Π°Ρ€ΠΎΠΈΠ΄. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Ρ€Π°Π·Π½Ρ‹Π΅ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹, ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ Π»Π΅Π³ΠΊΠΎ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π±Π΅Π»ΡƒΡŽ Ρ€Π°ΠΌΠΊΡƒ, которая повторяСт ΡΡ‚ΠΈΠ»ΡŒ, Ρ…Π°Ρ€Π°ΠΊΡ‚Π΅Ρ€Π½Ρ‹ΠΉ для ΠΌΠ³Π½ΠΎΠ²Π΅Π½Π½ΠΎΠ³ΠΎ Ρ„ΠΎΡ‚ΠΎ, популярный нСсколько дСсятилСтий Π½Π°Π·Π°Π΄.

ΠŸΡ€Π°Π²Π΄Π°, ΠΌΠ½Π΅ этот эффСкт ΠΎΡ‡Π΅Π½ΡŒ Π½Π΅ нравится, Π½ΠΎ ΠΌΠ½Π΅ каТСтся, Ρ‡Ρ‚ΠΎ Π²Ρ‹ смоТСтС ΠΏΡ€ΠΈΠ΄ΡƒΠΌΠ°Ρ‚ΡŒ Π΅ΠΌΡƒ достойноС ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅.

HTML

Для этого эффСкта ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΠΌ ΠΊ div-Ρƒ класс «polaroid». А Π²Π½ΡƒΡ‚Ρ€ΡŒ Π΅Π³ΠΎ помСстим ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈ тСкст. Π― Π±ΡƒΠ΄Ρƒ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ 200px Π½Π° 200px (это Π²Π°ΠΆΠ½ΠΎ).

<div>
Β <p>Π‘Π°Ρ€Π°, Π”Π΅ΠΊ ’02</p>
Β <img src=»/200/200/people/1. jpg» />
</div>

ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Π² Π΄Π΅ΠΌΠΎ-ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ Π²Ρ‹ΡˆΠ΅, ΠΌΡ‹ использовали ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ рукописный ΡˆΡ€ΠΈΡ„Ρ‚. Π­Ρ‚ΠΎΡ‚ ΡˆΡ€ΠΈΡ„Ρ‚ называСтся Kaushan. Π§Ρ‚ΠΎΠ±Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ, Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ этот Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚ ΠΊΠΎΠ΄Π° ΠΌΠ΅ΠΆΠ΄Ρƒ Ρ‚Π΅Π³Π°ΠΌΠΈ head Π½Π° вашСй HTML-страницС.

<link href=’http://fonts.googleapis.com/css?family=Kaushan+Script’ rel=’stylesheet’ type=’text/css’>

CSS

Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΏΠ΅Ρ€Π΅ΠΉΠ΄Π΅ΠΌ ΠΊΒ  CSS. Для класса polaroid, ΠΌΡ‹ установим position: relative ΠΈ ΡˆΠΈΡ€ΠΈΠ½Ρƒ 220px. ΠžΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ здСсь Π²Π°ΠΆΠ½ΠΎ, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ ΠΌΡ‹ Π±ΡƒΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ для тСкста.

Π”Π°Π»Π΅Π΅, ΠΌΡ‹ Π±ΡƒΠ΄Π΅ΠΌ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ для эффСкт ΠΏΠΎΠ»Π°Ρ€ΠΎΠΈΠ΄Π°. ВмСсто Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒ стили ΠΊ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ Π³Ρ€Π°Π½ΠΈΡ†Π΅ Π΄ΠΎ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ, ΠΌΡ‹ установим Π΅Π΄ΠΈΠ½ΡƒΡŽ Π³Ρ€Π°Π½ΠΈΡ†Ρƒ 10px Π²ΠΎΠΊΡ€ΡƒΠ³ изобраТСния, Π° Π·Π°Ρ‚Π΅ΠΌ ΠΏΠ΅Ρ€Π΅ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΠΌ стили для Π½ΠΈΠΆΠ½Π΅ΠΉ. Π’ Π½ΠΈΠΆΠ½Π΅ΠΉ части Π³Ρ€Π°Π½ΠΈΡ†Π° Ρ‚ΠΎΠ»Ρ‰Π΅, Ρ‡Π΅ΠΌ ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Π΅, Π½Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ ΡˆΠΈΡ€ΠΈΠ½Ρƒ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ 45px. Π― Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΠ» box-shadow.

.polaroid {
Β position: relative;
Β width: 220px;
}
Β 
. polaroid img {
Β border: 10px solid #fff;
Β border-bottom: 45px solid #fff;
Β -webkit-box-shadow: 3px 3px 3px #777;
Β -moz-box-shadow: 3px 3px 3px #777;
Β box-shadow: 3px 3px 3px #777;
}
Β 
.polaroid p {
Β position: absolute;
Β text-align: center;
Β width: 100%;
Β bottom: 0px;
Β font: 400 18px/1 ‘Kaushan Script’, cursive;
Β color: #888;
}

ΠœΠ½ΠΎΠΆΠ΅ΡΡ‚Π²Π΅Π½Π½Π°Ρ Ρ€Π°ΠΌΠΊΠ°

Π”Π΅ΠΌΠΎ-ΠΏΡ€ΠΈΠΌΠ΅Ρ€: Π½Π° Tinkerbin.

Π•ΡΡ‚ΡŒ нСсколько способов, с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΌΠ½ΠΎΠΆΠ΅ΡΡ‚Π²Π΅Π½Π½ΡƒΡŽ Ρ€Π°ΠΌΠΊΡƒ Π½Π° CSS. Один ΠΈΠ· самых простых ΠΈ самых популярных способов выполнСния Π΄Π°Π½Π½ΠΎΠ³ΠΎ Ρ‚Ρ€ΡŽΠΊΠ° Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ box-shadow с Ρ€Π°Π·Π½Ρ‹ΠΌΠΈ установками.

HTML

HTML-ΠΊΠΎΠ΄ ΠΎΡ‡Π΅Π½ΡŒ прост для этого ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°. На самом Π΄Π΅Π»Π΅, div здСсь Π½Π΅ обязатСлСн. Если Π²Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄Π½ΠΎ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΎΡ‚ΠΊΠ°Π·Π°Ρ‚ΡŒΡΡ ΠΎΡ‚ ΠΎΠ±Π΅Ρ€Ρ‚ΠΊΠΈ ΠΈ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒ класс прямо ΠΊ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡŽ.

<div>
Β <img src=»/400/200/nature/1.jpg» />
</div>

Как Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Ρ‚Π΅Π½ΡŒ

ΠŸΡ€Π΅ΠΆΠ΄Π΅ Ρ‡Π΅ΠΌ ΠΏΡ€Π΅ΠΉΠ΄Π΅ΠΌ ΠΊ Π½Π°ΡˆΠ΅ΠΌΡƒ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρƒ, Π΄Π°Π²Π°ΠΉΡ‚Π΅ рассмотрим ΠΊΠ°ΠΊ Ρ‚Π΅Π½ΠΈ Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚. Π₯отя ΠΌΡ‹ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ устанавливаСм Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‡Π΅Ρ‚Ρ‹Ρ€Π΅ значСния для этого свойства, Π½Π° самом Π΄Π΅Π»Π΅ ΠΈΡ… ΡˆΠ΅ΡΡ‚ΡŒ:

box-shadow: inset x y blur spread color;

Inset создаСт Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΡŽΡŽ Ρ‚Π΅Π½ΡŒ (ΠΌΡ‹ Π±ΡƒΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ это ΠΏΠΎΠ·ΠΆΠ΅), Ρ… устанавливаСт Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ смСщСниС, Ρƒ Π·Π°Π΄Π°Π΅Ρ‚ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ смСщСниС, blur опрСдСляСт, насколько размытая Π±ΡƒΠ΄Π΅Ρ‚ Ρ‚Π΅Π½ΡŒ ΠΈ spread, ΠΊΠ°ΠΊ Π΄Π°Π»Π΅ΠΊΠΎ Ρ‚Π΅Π½ΡŒ Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°ΡΠΏΡ€ΠΎΡΡ‚Ρ€Π°Π½ΡΡ‚ΡŒΡΡ. ВСнь, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ ΠΌΡ‹ использовали Π² ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰Π΅ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ выглядит ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ:

box-shadow: 3px 3px 3px #777;

Π­Ρ‚ΠΎΡ‚ ΠΊΠΎΠ΄ устанавливаСт offsets ΠΈ blur Ρ€Π°Π²Π½Ρ‹ΠΌ 3px ΠΈ Ρ†Π²Π΅Ρ‚ #777, распространСниС Π½Π΅ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΎ. Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π΄Π°Π²Π°ΠΉΡ‚Π΅ Π½Π°Ρ‡Π½Π΅ΠΌ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ с нашим ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠΌ:

.multiple-borders {
Β box-shadow: 0px 0px 0px 7px #000;
}

Как Π²ΠΈΠ΄ΠΈΡ‚Π΅, Ρƒ нас Π½Π΅ установлСно смСщСниС ΠΈ Π½Π΅Ρ‚ размытия, Π° spread Ρ€Π°Π²Π΅Π½ сСми пиксСлям. Π’ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π΅, Ρ‚Π΅Π½ΡŒ выглядит Ρ‚Π°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ чСрная Ρ€Π°ΠΌΠΊΠ° ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ сСмь пиксСлСй.

Π§Ρ‚ΠΎΠ±Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π²Ρ‚ΠΎΡ€ΡƒΡŽ Ρ‚Π΅Π½ΡŒ, всС Ρ‡Ρ‚ΠΎ Π½ΡƒΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ — это Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Π·Π°ΠΏΡΡ‚ΡƒΡŽ, Π° Π·Π°Ρ‚Π΅ΠΌ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΠΈΡ‚ΡŒ Ρ‚Π΅ ΠΆΠ΅ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹, Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΠ² Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ значСния. На этот Ρ€Π°Π· я установил ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ spread Ρ€Π°Π²Π½Ρ‹ΠΉ 5px (Ρ‡Π΅Ρ€Π½Ρ‹ΠΉ), Π° Π²Ρ‚ΠΎΡ€ΠΎΠΉ — Ρ€Π°Π²Π½Ρ‹ΠΉ 10px (Π±Π΅Π»Ρ‹ΠΉ).

.multiple-borders {
Β box-shadow: 0px 0px 0px 5px #000, 0px 0px 0px 10px #fff;
}

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ ΠΊΠ°ΠΊ Π΄Π²Π΅ Ρ€Π°ΠΌΠΊΠΈ ΠΏΠΎ 5px, ΠΎΠ΄Π½Π° чСрная ΠΈ ΠΎΠ΄Π½Π° бСлая.

CSS

Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π²Ρ‹ Π·Π½Π°Π΅Ρ‚Π΅ ΡΡƒΡ‚ΡŒ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ Ρ‚Π΅Π½ΠΈ, ΠΏΡ€ΠΈΡˆΠ»ΠΎ врСмя Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ наш эффСкт. НСудобство состоит Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ ΠΌΡ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ‚Ρ€ΠΈ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ вСрсии ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈ Ρ‚ΠΎΠ³ΠΎ ΠΆΠ΅ ΠΊΠΎΠ΄Π°, для ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΈ всСх Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ².

.multiple-borders {
Β -webkit-box-shadow:
Β 0px 0px 0px 2px rgba(0,0,0,0.6),
Β 0px 0px 0px 14px #fff,
Β 0px 0px 0px 18px rgba(0,0,0,0.2),
Β 6px 6px 8px 17px #555;
Β 
Β -moz-box-shadow:
Β 0px 0px 0px 2px rgba(0,0,0,0.6),
Β 0px 0px 0px 14px #fff,
Β 0px 0px 0px 18px rgba(0,0,0,0.2),
Β 6px 6px 8px 17px #555;
Β 
Β box-shadow:
Β 0px 0px 0px 2px rgba(0,0,0,0.6),
Β 0px 0px 0px 14px #fff,
Β 0px 0px 0px 18px rgba(0,0,0,0.2),
Β 6px 6px 8px 17px #555;
}

Π’ΠΈΠ½ΡŒΠ΅Ρ‚ΠΊΠ°


Π”Π΅ΠΌΠΎ-ΠΏΡ€ΠΈΠΌΠ΅Ρ€: Π½Π° Tinkerbin.

На этот Ρ€Π°Π· ΠΌΡ‹ собираСмся ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π΄Ρ€ΡƒΠ³ΠΎΠΉ Ρ‚ΠΈΠΏ box-shadow, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΎΡ‡Π΅Π½ΡŒ Π½Π΅ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹ΠΉ эффСкт. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ «inset» для Ρ‚Π΅Π½ΠΈ, ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Ρ‚Π°ΠΊΠΎΠΉ красивый эффСкт Π°-ля Photoshop, ΠΊΠ°ΠΊ Π²ΠΈΠ½ΡŒΠ΅Ρ‚ΠΊΠ°, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ CSS.

HTML

На этот Ρ€Π°Π· Π½Π°ΠΌ Π½ΡƒΠΆΠ΅Π½ пустой div. ΠŸΡ€ΠΈ ΠΆΠ΅Π»Π°Π½ΠΈΠΈ ΠΌΠΎΠΆΠ½ΠΎ Ρ€Π°Π·ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ тСкст Π²Π½ΡƒΡ‚Ρ€ΠΈ, Π½ΠΎ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ вставлСно с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS. ΠŸΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ внутрСнняя Ρ‚Π΅Π½ΡŒ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΡΠ²Π»ΡΡ‚ΡŒΡΡ ΠΏΠΎΠ΄ содСрТаниСм вставлСнным Π² HTML-ΠΊΠΎΠ΄, Π° это ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ ΡΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒ Π΅Ρ‘ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ.

<div>
</div>

CSS

Π’ CSS Π½Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΊΠ°ΠΊ Ρ„ΠΎΠ½, Π° Π·Π°Ρ‚Π΅ΠΌ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ ΡˆΠΈΡ€ΠΈΠ½Ρƒ ΠΈ высоту div-a. ПослС этого настало врСмя ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ‚Π΅Π½ΠΈ. ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ Π² Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΈ inset установлСно ΠΊΠ°ΠΊ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅, Ρ‚Π°ΠΊ ΠΈ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ смСщСниС Ρ€Π°Π²Π½Ρ‹ΠΌ 0.

Π’Π°ΠΌ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒΡΡ странным, Ρ‡Ρ‚ΠΎ я ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΠΈΠ» Ρ‚Ρ€ΠΈ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Π° ΠΎΠ΄Π½ΠΎΠΉ ΠΈ Ρ‚ΠΎΠΉ ΠΆΠ΅ Ρ‚Π΅Π½ΠΈ. ΠŸΡ€ΠΈΡ‡ΠΈΠ½Π°, ΠΏΠΎ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ я сдСлал это, Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ я Ρ…ΠΎΡ‚Π΅Π» ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π½Π° самом Π΄Π΅Π»Π΅ Ρ‚Π΅ΠΌΠ½ΡƒΡŽ Π²ΠΈΠ½ΡŒΠ΅Ρ‚ΠΊΡƒ, ΠΈ ΠΎΠ΄Π½ΠΎΠΉ Ρ‚Π΅Π½ΠΈ Ρ‚ΡƒΡ‚ Π±ΡƒΠ΄Π΅Ρ‚ Π½Π΅ достаточно!

. vignette {
Β background: url(«/400/200/nature/5.jpg»);
Β width: 400px; height: 200px;
Β -webkit-box-shadow:
Β inset 0 0 50px #000,
Β inset 0 0 50px #000,
Β inset 0 0 50px #000;
Β 
Β -moz-box-shadow:
Β inset 0 0 50px #000,
Β inset 0 0 50px #000,
Β inset 0 0 50px #000;
Β 
Β box-shadow:
Β inset 0 0 50px #000,
Β inset 0 0 50px #000,
Β inset 0 0 50px #000;
}

Π“Ρ€Π°Π½ΠΆ-эффСкт для Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΈ

Π”Π΅ΠΌΠΎ-ΠΏΡ€ΠΈΠΌΠ΅Ρ€: Π½Π° Tinkerbin.

Для Π½Π°Ρ‡Π°Π»Π° Π²Π°ΠΌ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΠ΅ ΡˆΠ΅Ρ€ΠΎΡ…ΠΎΠ²Π°Ρ‚ΠΎΠ΅ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅. Π― использовал эту тСкстуру для создания этого изобраТСния. Π₯ΠΈΡ‚Ρ€ΠΎΡΡ‚ΡŒ Ρ‚ΡƒΡ‚ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ тСкстуру Ρ‚ΠΎΡ‡Π½ΠΎΠ³ΠΎ Ρ‚ΠΎΠ³ΠΎ ΠΆΠ΅ Ρ†Π²Π΅Ρ‚Π° ΠΊΠ°ΠΊ Ρ„ΠΎΠ½ страницы, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ Π²Ρ‹ Π±ΡƒΠ΄Π΅Ρ‚Π΅ ΠΏΠΎΠΌΠ΅Ρ‰Π°Ρ‚ΡŒ Π΅Ρ‘.

HTML

ΠŸΡ€ΠΎΡΡ‚ΠΎ создайтС пустой div,Β  для ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ„ΠΎΠ½ΠΎΠ²Ρ‹Π΅ изобраТСния.

<div>
</div>

CSS

Π”Π°Π²Π°ΠΉΡ‚Π΅ сдСлаСм Ρ‡Ρ‚ΠΎΠ±Ρ‹ наш эффСкт появлялся Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора ΠΌΡ‹ΡˆΠΈ. Для Π½Π°Ρ‡Π°Π»Π°, ΠΌΡ‹ примСняСм Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° ΠΈ создаСм нСбольшой эффСкт Π²ΠΈΠ½ΡŒΠ΅Ρ‚ΠΊΠΈ, ΠΊΠ°ΠΊ Π² ΠΏΡ€ΠΎΡˆΠ»ΠΎΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅. Π’Π΅ΠΏΠ΅Ρ€ΡŒ всё, Ρ‡Ρ‚ΠΎ ΠΌΡ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ, это Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ нашС Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора ΠΌΡ‹ΡˆΠΈ.

body {
Β background: #867d79;
}
Β 
.grunge {
Β background: url(«http://lorempixum.com/400/200/technics/4»);
Β width: 400px; height: 200px;
Β margin: 50px;
Β -webkit-box-shadow: inset 0 0 20px black;
Β -moz-box-shadow: inset 0 0 20px black;
Β box-shadow: inset 0 0 20px black;
}
Β 
.grunge:hover {
Β background: url(«/imagetreatments-texture3.png»), url(«/400/200/technics/4.jpg»);
}

Π—Π°ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅

НадСюсь, Π²Π°ΠΌ ΠΏΠΎΠ½Ρ€Π°Π²ΠΈΠ»ΠΈΡΡŒ эти Ρ‡Π΅Ρ‚Ρ‹Ρ€Π΅Ρ… эффСкта. На созданиС ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΈΠ· Π½ΠΈΡ… ΡƒΠΉΠ΄Π΅Ρ‚ всСго лишь ΠΌΠΈΠ½ΡƒΡ‚Π°, Π½ΠΎ всС ΠΎΠ½ΠΈ Π΄ΠΎΠ±Π°Π²Π»ΡΡŽΡ‚ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΉ ΡΡ‚ΠΈΠ»ΡŒ для ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ. Но, ΠΊΠ°ΠΊ ΠΈ с Π»ΡŽΠ±Ρ‹ΠΌΠΈ эффСктами, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ ΠΈΡ… ΠΈΠ·Π±ΠΈΡ€Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ ΠΈ Π½Π΅ пСрСусСрдствуйтС!

ΠŸΠ΅Ρ€Π΅Π²ΠΎΠ΄ ΡΡ‚Π°Ρ‚ΡŒΠΈ с designshack.net


Если Ρƒ Вас Π²ΠΎΠ·Π½ΠΈΠΊΠ»ΠΈ вопросы, Ρ‚ΠΎ для ΡΠΊΠΎΡ€Π΅ΠΉΡˆΠ΅Π³ΠΎ получСния ΠΎΡ‚Π²Π΅Ρ‚Π° Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΠ΅ΠΌ Π²ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ нашим Ρ„ΠΎΡ€ΡƒΠΌΠΎΠΌ

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ.

HTML, XHTML ΠΈ CSS Π½Π° 100%

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ

Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠΊΡ€Π°ΡΠΈΡ‚ΡŒ Ρ„ΠΎΡ€ΠΌΡƒ. Π˜Ρ… ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π² качСствС ΠΊΠ½ΠΎΠΏΠΎΠΊ. Для задания ΠΊΠ½ΠΎΠΏΠΊΠΈ-ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅ΠΌ type=»image». ΠŸΡ€ΠΈ этом Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Π·Π°Π΄Π°Ρ‚ΡŒ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ src. Π•Π³ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ – адрСс ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ Π½Π° сСрвСрС.

ΠŸΠΎΠ»ΡƒΡ‡Π°Π΅Ρ‚ΡΡ ΠΎΡ‡Π΅Π½ΡŒ симпатичный Π²ΠΈΠ΄ Ρ„ΠΎΡ€ΠΌΡ‹, Π½ΠΎ Π½Π°Π΄ΠΎ ΡΠ»Π΅Π΄ΠΈΡ‚ΡŒ Π·Π° Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠΌ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ графичСскиС ΠΊΠ½ΠΎΠΏΠΊΠΈ Π½Π΅ оказались большС самой Ρ„ΠΎΡ€ΠΌΡ‹.

Для ΠΏΠΎΠ»Π΅ΠΉ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ alt, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π·Π°Π΄Π°Π΅Ρ‚ Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π½Ρ‹ΠΉ тСкст, Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΉ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ указатСля ΠΌΡ‹ΡˆΠΈ Π½Π° ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅. ΠžΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ этот Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ, Ссли Ρƒ посСтитСля ΠΎΡ‚ΠΊΠ»ΡŽΡ‡Π΅Π½Π° Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ° ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ, это Π±ΡƒΠ΄Π΅Ρ‚ СдинствСнная Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΡΠΎΠΎΠ±Ρ‰ΠΈΡ‚ΡŒ Π΅ΠΌΡƒ, ΠΊΡƒΠ΄Π° Π½Π°Π΄ΠΎ Π½Π°ΠΆΠ°Ρ‚ΡŒ для ΠΎΡ‚ΠΏΡ€Π°Π²ΠΊΠΈ Ρ„ΠΎΡ€ΠΌΡ‹.

МоТно Π·Π°Π΄Π°Ρ‚ΡŒ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ Π½Π° страницС ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ тСкста с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° align. ΠœΠ½ΠΎΠΆΠ΅ΡΡ‚Π²ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ этого Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ‚ Π²Π°ΠΌ Π²Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΊΠ°ΠΊ ΡƒΠ³ΠΎΠ΄Π½ΠΎ.

ЗначСния Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° align:

β€’ left – ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ;

β€’ right – ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ;

β€’ top – Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ Π²Π΅Ρ€Ρ…Π½Π΅ΠΉ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ ΠΏΠΎ самому высокому элСмСнту строки;

β€’ texttop – Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ Π²Π΅Ρ€Ρ…Π½Π΅ΠΉ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ ΠΏΠΎ самому высокому элСмСнту тСкста;

β€’ middle – сСрСдина изобраТСния выравниваСтся ΠΏΠΎ Π±Π°Π·ΠΎΠ²ΠΎΠΉ Π»ΠΈΠ½ΠΈΠΈ строки;

β€’ absmiddle – сСрСдина изобраТСния выравниваСтся ΠΏΠΎ сСрСдинС строки;

β€’ baseline – Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ Π½ΠΈΠΆΠ½Π΅ΠΉ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ изобраТСния ΠΏΠΎ Π±Π°Π·ΠΎΠ²ΠΎΠΉ Π»ΠΈΠ½ΠΈΠΈ строки;

β€’ bottom – Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ Π½ΠΈΠΆΠ½Π΅ΠΉ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ изобраТСния ΠΏΠΎ ΠΎΠΊΡ€ΡƒΠΆΠ°ΡŽΡ‰Π΅ΠΌΡƒ тСксту.

Π’ листингС 6.13 прСдставлСн ΠΏΡ€ΠΈΠΌΠ΅Ρ€ создания ΠΊΠ½ΠΎΠΏΠΎΠΊ-ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ нарисованы Π² графичСском Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π΅. Для Π½ΠΈΡ… Π·Π°Π΄Π°Π½ΠΎ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΈ Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π½Ρ‹ΠΉ тСкст.

Листинг 6.13. Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ графичСских ΠΊΠ½ΠΎΠΏΠΎΠΊ

<html>

<head>

<title>ΠšΠΎΠ½ΡΡ‚Ρ€ΡƒΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Ρ„ΠΎΡ€ΠΌ</title>

</head>

<body>

<form action=»test.php» enctype=»multipart/form-data» method=»post» name= «test» target=»_blank»>

<input name=»submit» type=»image» src=»Send.jpg» alt=»ΠΠ°ΠΆΠΌΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΡ‚ΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ» align=»left» border=»5″ /><input name=»reset» type=»image» src= «Clear.jpg» alt=»ΠΠ°ΠΆΠΌΠΈΡ‚Π΅ для очистки Ρ„ΠΎΡ€ΠΌΡ‹» align=»right» />

</form>

</body>

</html>

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠΌ ΠΊΠΎΠ΄Π° ΠΈΠ· листинга 6.13 ΠΏΠΎΠΊΠ°Π·Π°Π½ Π½Π° рис.Β 6.7.

Рис.Β 6.7. ГрафичСскиС ΠΊΠ½ΠΎΠΏΠΊΠΈ

НарисованныС ΠΊΠ½ΠΎΠΏΠΊΠΈ оТивят Π²ΠΈΠ΄ вашСй Ρ„ΠΎΡ€ΠΌΡ‹.

Π”Π°Π½Π½Ρ‹ΠΉ тСкст являСтся ΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚ΠΎΠΌ.

ΠŸΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠ΅Π½ΠΈΠ΅ Π½Π° ЛитРСс

Π₯Ρ€Π°Π½Π΅Π½ΠΈΠ΅ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ Π² css с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ base64

ΠŸΠΎΡ‡ΠΈΡ‚Π°Ρ‚ΡŒ ΠΌΠΎΠΆΠ½ΠΎ Ρ‚ΡƒΡ‚: http://habrahabr.ru/post/116538/

Β 

Π›ΡƒΡ‡ΡˆΠ΅ Ρ‚Π°ΠΊΠΎΠ΅ Π·Π°ΡΠΎΠ²Ρ‹Π²Π°Ρ‚ΡŒ Π² CSS ΠΈ ΠΊΠ°ΠΊ Π’Ρ‹ ΠΏΠΎΠ½ΠΈΠΌΠ°Π΅Ρ‚Π΅ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ Π΅Ρ‰Ρ‘ мСньшС Ρ‡Π΅ΠΌ Π² ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ Π½ΠΈΠΆΠ΅.
Π‘ΠΎΠ»ΡŒΡˆΠΎΠ΅ прСимущСство Ρ‚Π°ΠΊΠΎΠ³ΠΎ ΠΌΠ΅Ρ‚ΠΎΠ΄Π° Π² скорости Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ Ρ‚Π°ΠΊΠΎΠΉ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ, ΠΈΠ»ΠΈ большого числа ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ это просто тСкст, Π½Π΅Ρ‚ нСобходимости Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ большоС число ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ ΠΏΠΎ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ, всё хранится Π² ΠΎΠ΄Π½ΠΎΠΌ CSS Ρ„Π°ΠΉΠ»Π΅.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ с ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΎΠΉ base64:

Код ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ base64:

<img alt="" src="data:image/png;base64,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" />

Β 

ΠžΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹Π΅ изобраТСния: CSS-ΠΏΡ€ΠΈΡ‘ΠΌΡ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠΌΠΎΠ³Π°ΡŽΡ‚ ΡΠΊΠΎΠ½ΠΎΠΌΠΈΡ‚ΡŒ врСмя | by Nikita | WebbDEV

Если Π²Ρ‹ Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ‚Π΅ΡΡŒ Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΎΠΉ, Ρ‚ΠΎ высока Π²Π΅Ρ€ΠΎΡΡ‚Π½ΠΎΡΡ‚ΡŒ Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ Π²Π°ΠΌ Π·Π½Π°ΠΊΠΎΠΌΡ‹ Π΄Π²Π° Ρ‡ΡƒΠ΄ΠΎΠ²ΠΈΡ‰Π°, ΠΎ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… ΠΏΠΎΠΉΠ΄Ρ‘Ρ‚ Ρ€Π΅Ρ‡ΡŒ Π² ΡΡ‚Π°Ρ‚ΡŒΠ΅. Π Π΅Ρ‡ΡŒ ΠΈΠ΄Ρ‘Ρ‚ ΠΎΠ± изобраТСниях ΠΈ ΠΎ Π΄Π΅Π΄Π»Π°ΠΉΠ½Π°Ρ…. Иногда, ΠΏΠΎ ΠΊΠ°ΠΊΠΈΠΌ-Ρ‚ΠΎ ΠΏΡ€ΠΈΡ‡ΠΈΠ½Π°ΠΌ, ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ Π½ΠΈΠΊΠ°ΠΊ Π½Π΅ хотят ΠΏΠΎΠΌΠ΅Ρ‰Π°Ρ‚ΡŒΡΡ Π² Ρ‚Π΅ мСста ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² страниц, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ для Π½ΠΈΡ… ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½Ρ‹, Π° Π²Ρ‹ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΡ‚Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ нСсколько часов Π½Π° Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ с этим Ρ€Π°Π·ΠΎΠ±Ρ€Π°Ρ‚ΡŒΡΡ.

Автор этого ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»Π° Π³ΠΎΠ²ΠΎΡ€ΠΈΡ‚, Ρ‡Ρ‚ΠΎ ΠΎΠ½ часто сталкивался с ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎΠΉ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠΎΠΉ, ΠΈ эти столкновСния ΠΊΠΎΠ΅-Ρ‡Π΅ΠΌΡƒ Π΅Π³ΠΎ Π½Π°ΡƒΡ‡ΠΈΠ»ΠΈ. Π—Π΄Π΅ΡΡŒ ΠΎΠ½ Ρ…ΠΎΡ‡Π΅Ρ‚ Ρ€Π°ΡΡΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΎ пяти ΠΏΠΎΠ΄Ρ…ΠΎΠ΄Π°Ρ… ΠΊ ΡƒΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΡŽ Ρ€Π°Π·ΠΌΠ΅Ρ€Π°ΠΌΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ нравятся Π΅ΠΌΡƒ большС всСго.

ΠŸΡΡ‚Π½ΠΈΡ†Π°. ΠŸΡΡ‚ΡŒ часов Π²Π΅Ρ‡Π΅Ρ€Π°. Π’Π°ΠΌ Π½Π°Π΄ΠΎ срочно Π΄ΠΎΠ΄Π΅Π»Π°Ρ‚ΡŒ Π½Π΅ΠΊΡƒΡŽ страницу. Всё Π³ΠΎΡ‚ΠΎΠ²ΠΎ, ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ° лишь Π² ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ°Ρ…, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½ΠΈΠΊΠ°ΠΊ Π½Π΅ ΠΏΠΎΠΌΠ΅Ρ‰Π°ΡŽΡ‚ΡΡ Ρ‚ΡƒΠ΄Π°, Π³Π΄Π΅ ΠΈΠΌ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΎ Π±Ρ‹Ρ‚ΡŒ. Если это ΡΠ»ΡƒΡ‡ΠΈΠ»ΠΎΡΡŒ с Π²Π°ΠΌΠΈ β€” Π²ΠΎΡ‚ ΠΎΠ΄Π½ΠΎ волшСбноС срСдство, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ вас Π²Ρ‹Ρ€ΡƒΡ‡ΠΈΡ‚:

Выглядит Π·Π½Π°ΠΊΠΎΠΌΠΎ? ΠœΡ‹ всС это Π΄Π΅Π»Π°Π»ΠΈ ΠΊΠΎΠ³Π΄Π°-Ρ‚ΠΎ. НС Π½Π°Π²ΠΎΠ΄ΠΈΠ» Π»ΠΈ вас это Π½Π° мысли ΠΎ ΠΌΠΎΡˆΠ΅Π½Π½ΠΈΡ‡Π΅ΡΡ‚Π²Π΅?

ИспользованиС свойств background вСсьма ΠΏΠΎΠ»Π΅Π·Π½ΠΎ, ΠΎΠ½ΠΈ просто Π΄Π΅Π»Π°ΡŽΡ‚ Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ ΠΎΡ‚ Π½ΠΈΡ… оТидаСтся. Однако стоит ΠΏΠΎΠΌΠ½ΠΈΡ‚ΡŒ ΠΎ Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒ ΠΈΡ… слСдуСт лишь для Ρ‚Π΅Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½Π΅ ΡΠ²Π»ΡΡŽΡ‚ΡΡ Ρ‡Π°ΡΡ‚ΡŒΡŽ основного содСрТимого страницы, для ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, Π·Π°ΠΌΠ΅Π½ΡΡŽΡ‰ΠΈΡ… тСкст, ΠΈ Π² Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… особых случаях.

Π§Ρ‚ΠΎ Ссли я скаТу, Ρ‡Ρ‚ΠΎ свойство object-fit ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΠΌΠΎ ΠΊ элСмСнтам <img>? Оно, кстати, Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ ΠΈ с Π²ΠΈΠ΄Π΅ΠΎ.

Π’ΠΎΡ‚ ΠΈ всё. ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ свойству object-fit ΠΌΠΎΠΆΠ½ΠΎ Π½Π°Π·Π½Π°Ρ‡ΠΈΡ‚ΡŒ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ contain.

О ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ΅ object-fit

К Π½Π΅ΡΡ‡Π°ΡΡ‚ΡŒΡŽ, object-fit Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π² IE ΠΈ Π² старых вСрсиях Safari, ΠΎΠ΄Π½Π°ΠΊΠΎ, для Ρ‚Π°ΠΊΠΈΡ… случаСв имССтся ΠΏΠΎΠ»ΠΈΡ„ΠΈΠ»Π».

Π’ΠΎΡ‚ свСдСния ΠΎ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ΅ этой возмоТности, взятыС ΠΎΡ‚ΡΡŽΠ΄Π°.

ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° object-fit Π½Π°ΡΡ‚ΠΎΠ»ΡŒΠ½Ρ‹ΠΌΠΈ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°ΠΌΠΈ

Π’ΠΎ, ΠΎ Ρ‡Ρ‘ΠΌ ΠΌΡ‹ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‡Ρ‚ΠΎ Π³ΠΎΠ²ΠΎΡ€ΠΈΠ»ΠΈ, ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒΡΡ интСрСсным, Π½ΠΎ Π² ΡƒΡΡ‚Π°Ρ€Π΅Π²ΡˆΠΈΡ… Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ…, Π±Π΅Π· ΠΏΠΎΠ»ΠΈΡ„ΠΈΠ»Π»ΠΎΠ², Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ это Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚. Если Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ ΡƒΠ½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½ΠΎΠ΅, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Ρ‚ΠΎ, ΠΎ Ρ‡Ρ‘ΠΌ ΠΌΡ‹ Π±ΡƒΠ΄Π΅ΠΌ Π³ΠΎΠ²ΠΎΡ€ΠΈΡ‚ΡŒ сСйчас, Π²Π°ΠΌ ΠΏΠΎΠ΄ΠΎΠΉΠ΄Ρ‘Ρ‚. Π­Ρ‚ΠΎΡ‚ ΠΌΠ΅Ρ‚ΠΎΠ΄, ΠΎΠ΄ΠΈΠ½ ΠΈΠ· ΠΌΠΎΠΈΡ… Π»ΡŽΠ±ΠΈΠΌΡ‹Ρ…, Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π²Π΅Π·Π΄Π΅.

Π—Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ ΠΎΠ½ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π½ΡƒΠΆΠ½ΠΎ ΠΏΠΎΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ Π² Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ элСмСнт, свойство positionΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ установлСно Π² Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ relative, Π° свойство padding Π·Π°Π΄Π°Π½ΠΎ Π² ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚Π½ΠΎΠΌ Π²Ρ‹Ρ€Π°ΠΆΠ΅Π½ΠΈΠΈ. Π’ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π·Π°ΠΉΠΌΡ‘Ρ‚ всю ΡΠ²ΠΎΠ±ΠΎΠ΄Π½ΡƒΡŽ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ элСмСнта. Выглядит это Ρ‚Π°ΠΊ:

Π’ΡƒΡ‚ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠ΄ΡƒΠΌΠ°Ρ‚ΡŒ ΠΎ Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ это слишком слоТно. Однако, послС Ρ‚ΠΎΠ³ΠΎ ΠΊΠ°ΠΊ Π²Ρ‹ ΠΏΠΎΠΉΠΌΡ‘Ρ‚Π΅ смысл этого ΠΏΡ€ΠΈΡ‘ΠΌΠ°, Π²Ρ‹ осознаСтС, Ρ‡Ρ‚ΠΎ ΠΎΠ½ ΠΎΡ‡Π΅Π½ΡŒ прост ΠΈ ΡƒΠ΄ΠΎΠ±Π΅Π½. К Ρ‚ΠΎΠΌΡƒ ΠΆΠ΅, этот ΠΏΡ€ΠΈΡ‘ΠΌ ΡˆΠΈΡ€ΠΎΠΊΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π² Netflix.

ВзглянитС Π½Π° ΠΈΠΌΠ΅Π½Π° классов

Π’ΡƒΡ‚ для управлСния Ρ€Π°Π·ΠΌΠ΅Ρ€Π°ΠΌΠΈ изобраТСния ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ свойство height: auto, ΠΈ, ΠΊΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, свойство max-width. Π’ΠΏΠΎΠ»Π½Π΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Ρ‡Ρ‚ΠΎ Π²Π°ΠΌ этот ΠΏΡ€ΠΈΡ‘ΠΌ ΡƒΠΆΠ΅ Π·Π½Π°ΠΊΠΎΠΌ:

Π’Π°ΠΊΠΎΠΉ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΠΌ Π² Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²Π΅ случаСв, Ρ‚ΠΎΠ³Π΄Π°, ΠΊΠΎΠ³Π΄Π° ваш ΠΌΠ°ΠΊΠ΅Ρ‚ Π½Π΅ слишком слоТСн.

Под Β«ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒΡŽΒ» я Ρ‚ΡƒΡ‚ понимаю врСмя Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ страниц. Π‘ΠΎΠ»ΡŒΡˆΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΎΡ‡Π΅Π½ΡŒ Π΄ΠΎΠ»Π³ΠΎ Π·Π°Π³Ρ€ΡƒΠΆΠ°Ρ‚ΡŒΡΡ, Ρ‡Ρ‚ΠΎ создаст Ρƒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ Π²ΠΏΠ΅Ρ‡Π°Ρ‚Π»Π΅Π½ΠΈΠ΅ Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ ваши страницы Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ ΠΌΠ΅Π΄Π»Π΅Π½Π½ΠΎ, особСнно, Ссли эти страницы ΠΏΡ€ΠΎΡΠΌΠ°Ρ‚Ρ€ΠΈΠ²Π°ΡŽΡ‚ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройствах.

Π—Π½Π°Π΅Ρ‚Π΅ Π»ΠΈ Π²Ρ‹ ΠΎ Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Π² соврСмСнных Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ… ΠΌΠΎΠΆΠ½ΠΎ ΠΌΠ΅Π½ΡΡ‚ΡŒ источник изобраТСния Π² зависимости ΠΎΡ‚ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ страницы? ИмСнно для этого сущСствуСт Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ srcset.

ΠŸΠΎΠ΄ΠΎΠ±Π½Ρ‹Π΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π² Ρ‚Π΅Π³Π΅ HTML 5 . Π’ Ρ‚ΠΎΠΌ случаС, Ссли Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ эту Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΡŽ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚, здСсь прСдусмотрСн запасной Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ с использованиСм Ρ‚Π΅Π³Π° <img>:

  • Если вашС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π΅ являСтся Ρ‡Π°ΡΡ‚ΡŒΡŽ содСрТимого страницы β€” ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ background-image.
  • Если ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° IE вас Π½Π΅ интСрСсуСт β€” Π²ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ΡΡŒ object-fit.
  • Π’Π΅Ρ…Π½ΠΈΠΊΠ° с ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ΠΌ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° со ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎ настроСнным свойством padding, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΠ°Ρ Netflix, Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π²Π΅Π·Π΄Π΅.
  • Π’ Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²Π΅ случаСв для Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ с ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ°ΠΌΠΈ достаточно ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π² CSS свойство height: auto;
  • Если Π²Ρ‹ ΡΡ‚Ρ€Π΅ΠΌΠΈΡ‚Π΅ΡΡŒ ΡΠΎΠΊΡ€Π°Ρ‚ΠΈΡ‚ΡŒ врСмя Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ страниц, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ srcset для Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ ΠΌΠ΅Π½ΡŒΡˆΠΈΡ… Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ² Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройствах.

НадССмся, рассмотрСнныС здСсь ΠΏΠΎΠ΄Ρ…ΠΎΠ΄Ρ‹ ΠΊ Ρ€Π°Π±ΠΎΡ‚Π΅ с изобраТСниями Π²Π°ΠΌ пригодятся.

ΠŸΠ΅Ρ€Π΅Π²ΠΎΠ΄ ΡΡ‚Π°Ρ‚ΡŒΠΈ Time-saving CSS techniques to create responsive images

ИспользованиС CSS для Π²ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ Π΄Π΅ΠΊΠΎΡ€Π°Ρ‚ΠΈΠ²Π½Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ 1.

Π€ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ для HTML-страницы

Π’Π°Π±Π»ΠΈΡ†Π° стилСй для Π²Π΅Π±-страницы опрСдСляСт Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ для цСлая страница.

 …
  <Ρ‚ΠΈΠΏ стиля="тСкст/CSS">
    body { background: #ffe url('/images/home-bg.jpg') repeat; }
  

<Ρ‚Π΅Π»ΠΎ>
...
 

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ 2. Π€ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ с CSS для Ρ€ΠΎΠ»Π»ΠΎΠ²Π΅Ρ€ΠΎΠ² ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ

Π’Π°Π±Π»ΠΈΡ†Π° стилСй для Π²Π΅Π±-страницы ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ Ρ„ΠΎΠ½ CSS свойство для создания Π΄Π΅ΠΊΠΎΡ€Π°Ρ‚ΠΈΠ²Π½Ρ‹Ρ… эффСктов Ρ€ΠΎΠ»Π»ΠΎΠ²Π΅Ρ€Π°, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π½Π°Π²ΠΎΠ΄ΠΈΡ‚ курсор ΡƒΠΊΠ°Π·Π°Ρ‚Π΅Π»ΡŒ ΠΌΡ‹ΡˆΠΈ Π½Π°Π΄ ссылкой.

 a:hover { background: #ffe url('/images/hover.gif') repeat; Ρ†Π²Π΅Ρ‚: #000;
  тСкстовоС ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅: Π½Π΅Ρ‚;
} 

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ 3. Π€ΠΎΠ½ΠΎΠ²Ρ‹Π΅ изобраТСния с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS для создания Π·Π°ΠΊΡ€ΡƒΠ³Π»Π΅Π½Π½Ρ‹Ρ… ΡƒΠ³Π»ΠΎΠ² Π²ΠΊΠ»Π°Π΄ΠΊΠΈ ΠΈΠ»ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ элСмСнты

Набор стилСй для Π²Π΅Π±-страницы ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ Ρ„ΠΎΠ½ CSS свойство для создания Π·Π°ΠΊΡ€ΡƒΠ³Π»Π΅Π½Π½Ρ‹Ρ… ΡƒΠ³Π»ΠΎΠ² Π½Π° элСмСнтах.

 …
  <Ρ‚ΠΈΠΏ стиля="тСкст/CSS">
    div#ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ { ΡˆΠΈΡ€ΠΈΠ½Π°:600px; }
    Ρ€Π°Π·Π΄.aComment { background: url('images/middle.gif') repeat-y left top;
    ΠΏΠΎΠ»Π΅: 0 0 30px 0; }
    div.aComment blockquote { background: url('images/top.gif') no-repeat left top;
    ΠΌΠ°Ρ€ΠΆΠ°: 0; отступ: 8px 16px; }
    div.aComment div.submitter { background:#fff url('images/bottom.gif') no-repeat left top;
    ΠΌΠ°Ρ€ΠΆΠ°: 0; Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ свСрху: 30px; }
  

<Ρ‚Π΅Π»ΠΎ>
  <Π΄Π΅Π»>
    <Π΄Π΅Π»>
      <Ρ†ΠΈΡ‚Π°Ρ‚Π°>
        

ΠŸΡ€ΠΈΠ²Π΅Ρ‚, Π”ΠΆΠΎΠ½! МнС ΠΎΡ‡Π΅Π½ΡŒ нравится эта Ρ‚Π΅Ρ…Π½ΠΈΠΊΠ°, ΠΈ я ΡΠΎΠ±ΠΈΡ€Π°ΡŽΡΡŒ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π΅ Π½Π° своСм Π²Π΅Π±-сайтС!

<Π΄Π΅Π»> Π°Π½ΠΎΠ½ΠΈΠΌΠ½Ρ‹ΠΉ трус ΠΈΠ· Эльбонии
<Π΄Π΅Π»> …
…

АдаптивныС изобраТСния

ВСкст Π² Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π΅ автоматичСски ΠΎΠ±Ρ‚Π΅ΠΊΠ°Π΅Ρ‚ ΠΊΡ€Π°ΠΉ экрана, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ Π½Π΅ пСрСполнялся. Π”Ρ€ΡƒΠ³ΠΎΠ΅ Π΄Π΅Π»ΠΎ с изобраТСниями. Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡ ΠΈΠΌΠ΅ΡŽΡ‚ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠΉ Ρ€Π°Π·ΠΌΠ΅Ρ€. Если ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΡˆΠΈΡ€Π΅ экрана, ΠΎΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠ΅Ρ€Π΅ΠΏΠΎΠ»Π½Π΅Π½ΠΎ, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Ρ‚ ΠΊ появлСнию Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠΉ полосы ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ.

К ΡΡ‡Π°ΡΡ‚ΡŒΡŽ, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΡ€ΠΈΠ½ΡΡ‚ΡŒ ΠΌΠ΅Ρ€Ρ‹ Π² CSS, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€Π΅Π΄ΠΎΡ‚Π²Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ это.

ΠžΠ³Ρ€Π°Π½ΠΈΡ‡ΡŒΡ‚Π΅ свои изобраТСния #

Π’ вашСй Ρ‚Π°Π±Π»ΠΈΡ†Π΅ стилСй Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΎΠ±ΡŠΡΠ²ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ изобраТСния Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ с Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠΌ, ΠΏΡ€Π΅Π²Ρ‹ΡˆΠ°ΡŽΡ‰ΠΈΠΌ Ρ€Π°Π·ΠΌΠ΅Ρ€ содСрТащСго ΠΈΡ… элСмСнта, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ max-inline-size .

  img { 
ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΉ встроСнный Ρ€Π°Π·ΠΌΠ΅Ρ€: 100%;
Ρ€Π°Π·ΠΌΠ΅Ρ€ Π±Π»ΠΎΠΊΠ°: Π°Π²Ρ‚ΠΎ;
}

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ max-width вмСсто max-inline-size , Ссли Ρ…ΠΎΡ‚ΠΈΡ‚Π΅, Π½ΠΎ ΠΏΠΎΠΌΠ½ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎ Ρ…ΠΎΡ€ΠΎΡˆΠΎ ΠΈΠΌΠ΅Ρ‚ΡŒ ΠΏΡ€ΠΈΠ²Ρ‹Ρ‡ΠΊΡƒ Π΄ΡƒΠΌΠ°Ρ‚ΡŒ с Ρ‚ΠΎΡ‡ΠΊΠΈ зрСния логичСских свойств.

Π­Ρ‚ΠΎ ΠΆΠ΅ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΈ ΠΊ Π΄Ρ€ΡƒΠ³ΠΈΠΌ Π²ΠΈΠ΄Π°ΠΌ встроСнного ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Π²ΠΈΠ΄Π΅ΠΎ ΠΈ Ρ„Ρ€Π΅ΠΉΠΌΠ°ΠΌ.

  ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, 
Π²ΠΈΠ΄Π΅ΠΎ,
iframe {
ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΉ встроСнный Ρ€Π°Π·ΠΌΠ΅Ρ€: 100%;
Ρ€Π°Π·ΠΌΠ΅Ρ€ Π±Π»ΠΎΠΊΠ°: Π°Π²Ρ‚ΠΎ;
}

Π‘ этим ΠΏΡ€Π°Π²ΠΈΠ»ΠΎΠΌ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ Π±ΡƒΠ΄ΡƒΡ‚ автоматичСски ΡƒΠΌΠ΅Π½ΡŒΡˆΠ°Ρ‚ΡŒ изобраТСния, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ΠΈ ΠΏΠΎΠΌΠ΅ΡΡ‚ΠΈΠ»ΠΈΡΡŒ Π½Π° экранС.

Π”ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ значСния Ρ€Π°Π·ΠΌΠ΅Ρ€Π° Π±Π»ΠΎΠΊΠ° auto ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ ΡΠΎΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠ΅ сторон ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ останСтся постоянным.

Иногда Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π΅ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ изобраТСния, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Ссли ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ добавляСтся Ρ‡Π΅Ρ€Π΅Π· систСму управлСния ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ΠΎΠΌ.Если ваш Π΄ΠΈΠ·Π°ΠΉΠ½ Ρ‚Ρ€Π΅Π±ΡƒΠ΅Ρ‚, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠ΅ сторон изобраТСния ΠΎΡ‚Π»ΠΈΡ‡Π°Π»ΠΎΡΡŒ ΠΎΡ‚ Ρ€Π΅Π°Π»ΡŒΠ½Ρ‹Ρ… Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ² изобраТСния, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ свойство aspect-ratio Π² CSS.

  img { 
ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΉ встроСнный Ρ€Π°Π·ΠΌΠ΅Ρ€: 100%;
Ρ€Π°Π·ΠΌΠ΅Ρ€ Π±Π»ΠΎΠΊΠ°: Π°Π²Ρ‚ΠΎ;
ΡΠΎΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠ΅ сторон: 2/1;
}

Но Ρ‚ΠΎΠ³Π΄Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ ΠΌΠΎΠΆΠ΅Ρ‚ ΡΠΆΠ°Ρ‚ΡŒ ΠΈΠ»ΠΈ Ρ€Π°ΡΡ‚ΡΠ½ΡƒΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ΠΎ соотвСтствовало ΠΆΠ΅Π»Π°Π΅ΠΌΠΎΠΌΡƒ ΡΠΎΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΡŽ сторон.

Π§Ρ‚ΠΎΠ±Ρ‹ этого Π½Π΅ ΠΏΡ€ΠΎΠΈΠ·ΠΎΡˆΠ»ΠΎ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ свойство object-fit .

Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ object-fit , Ρ€Π°Π²Π½ΠΎΠ΅ , содСрТит , ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρƒ ΡΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ ΠΏΡ€ΠΎΠΏΠΎΡ€Ρ†ΠΈΠΈ изобраТСния, Π΄Π°ΠΆΠ΅ Ссли это ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ свСрху ΠΈ снизу остаСтся пустоС пространство.

  img { 
ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΉ встроСнный Ρ€Π°Π·ΠΌΠ΅Ρ€: 100%;
Ρ€Π°Π·ΠΌΠ΅Ρ€ Π±Π»ΠΎΠΊΠ°: Π°Π²Ρ‚ΠΎ;
ΡΠΎΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠ΅ сторон: 2/1;
ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π°: содСрТит;
}

Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ object-fit для cover ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρƒ ΡΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ ΡΠΎΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠ΅ сторон изобраТСния, Π΄Π°ΠΆΠ΅ Ссли это ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚ ΠΎΠ±Ρ€Π΅Π·ΠΊΡƒ изобраТСния свСрху ΠΈ снизу.

  img { 
ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΉ встроСнный Ρ€Π°Π·ΠΌΠ΅Ρ€: 100%;
Ρ€Π°Π·ΠΌΠ΅Ρ€ Π±Π»ΠΎΠΊΠ°: Π°Π²Ρ‚ΠΎ;
ΡΠΎΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠ΅ сторон: 2/1;
ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π°: ΠΊΡ€Ρ‹ΡˆΠΊΠ°;
}
Π’ΠΎ ΠΆΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ с двумя Ρ€Π°Π·Π½Ρ‹ΠΌΠΈ значСниями для `object-fit`.ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ ΠΈΠΌΠ΅Π΅Ρ‚ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ `object-fit`, Ρ€Π°Π²Π½ΠΎΠ΅ `contain`. Π’Ρ‚ΠΎΡ€ΠΎΠΉ ΠΈΠΌΠ΅Π΅Ρ‚ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ `object-fit`, Ρ€Π°Π²Π½ΠΎΠ΅ `cover`.

Если ΠΎΠ±Ρ€Π΅Π·ΠΊΠ° свСрху ΠΈ снизу Ρ€Π°Π²Π½ΠΎΠΌΠ΅Ρ€Π½ΠΎ Π²Ρ‹Π·Ρ‹Π²Π°Π΅Ρ‚ затруднСния, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ свойство CSS object-position для настройки фокуса ΠΎΠ±Ρ€Π΅Π·ΠΊΠΈ. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΠ±Π΅Π΄ΠΈΡ‚ΡŒΡΡ, Ρ‡Ρ‚ΠΎ самый Π²Π°ΠΆΠ½Ρ‹ΠΉ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ изобраТСния ΠΏΠΎ-ΠΏΡ€Π΅ΠΆΠ½Π΅ΠΌΡƒ Π²ΠΈΠ΄Π΅Π½.

  img { 
ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΉ встроСнный Ρ€Π°Π·ΠΌΠ΅Ρ€: 100%;
Ρ€Π°Π·ΠΌΠ΅Ρ€ Π±Π»ΠΎΠΊΠ°: Π°Π²Ρ‚ΠΎ;
ΡΠΎΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠ΅ сторон: 2/1;
ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π°: ΠΊΡ€Ρ‹ΡˆΠΊΠ°;
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π°: Π²Π²Π΅Ρ€Ρ…Ρƒ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ;
}

Доставка ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ #

Π­Ρ‚ΠΈ ΠΏΡ€Π°Π²ΠΈΠ»Π° CSS ΡΠΎΠΎΠ±Ρ‰Π°ΡŽΡ‚ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρƒ, ΠΊΠ°ΠΊ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ изобраТСния.Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ Π² своСм HTML-ΠΊΠΎΠ΄Π΅, ΠΊΠ°ΠΊ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΎΠ±Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Ρ‚ΡŒ эти изобраТСния.

Π‘ΠΎΠ²Π΅Ρ‚Ρ‹ ΠΏΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρƒ #

Если Π²Ρ‹ Π·Π½Π°Π΅Ρ‚Π΅ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ изобраТСния, Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ ΡˆΠΈΡ€ΠΈΠ½Π° ΠΈ высота . Π”Π°ΠΆΠ΅ Ссли ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ отобраТаСтся с Π΄Ρ€ΡƒΠ³ΠΈΠΌ Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠΌ (ΠΈΠ·-Π·Π° вашСго ΠΏΡ€Π°Π²ΠΈΠ»Π° max-inline-size: 100% ), Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ всС Ρ€Π°Π²Π½ΠΎ Π·Π½Π°Π΅Ρ‚ ΡΠΎΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠ΅ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ ΠΈ высоты ΠΈ ΠΌΠΎΠΆΠ΅Ρ‚ Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚ΡŒ Π½ΡƒΠΆΠ½ΠΎΠ΅ количСство мСста. Π­Ρ‚ΠΎ ΠΏΡ€Π΅Π΄ΠΎΡ‚Π²Ρ€Π°Ρ‚ΠΈΡ‚ пСрСскакиваниС Π΄Ρ€ΡƒΠ³ΠΎΠ³ΠΎ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° ΠΏΡ€ΠΈ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ΅ изобраТСния.

   src="image.png" 
alt="ОписаниС изобраТСния."
width="300"
height="200"
>
ΠŸΠ΅Ρ€Π²ΠΎΠ΅ Π²ΠΈΠ΄Π΅ΠΎ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ ΠΌΠ°ΠΊΠ΅Ρ‚ Π±Π΅Π· ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Ρ… Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ² изобраТСния. ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΠΊΠ°ΠΊ тСкст ΠΏΡ€Ρ‹Π³Π°Π΅Ρ‚ послС Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ. Π’ΠΎ Π²Ρ‚ΠΎΡ€ΠΎΠΌ Π²ΠΈΠ΄Π΅ΠΎ прСдоставлСны Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ изобраТСния; для изобраТСния оставлСно мСсто, Ρ‡Ρ‚ΠΎΠ±Ρ‹ послС Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ тСкст Π½Π΅ ΠΏΡ€Ρ‹Π³Π°Π».

Π‘ΠΎΠ²Π΅Ρ‚Ρ‹ ΠΏΠΎ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ΅ #

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ loading , Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠΎΠ±Ρ‰ΠΈΡ‚ΡŒ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρƒ, насколько срочно Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ Π·Π°Π³Ρ€ΡƒΠΆΠ°Π» ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅. Для ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π½ΠΈΠΆΠ΅ сгиба ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ lazy . Π‘Ρ€Π°ΡƒΠ·Π΅Ρ€ Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ Π·Π°Π³Ρ€ΡƒΠΆΠ°Ρ‚ΡŒ Π»Π΅Π½ΠΈΠ²Ρ‹Π΅ изобраТСния Π΄ΠΎ Ρ‚Π΅Ρ… ΠΏΠΎΡ€, ΠΏΠΎΠΊΠ° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π½Π΅ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΈΡ‚ страницу Π²Π½ΠΈΠ· Π½Π°ΡΡ‚ΠΎΠ»ΡŒΠΊΠΎ, Ρ‡Ρ‚ΠΎ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π²ΠΎΡ‚-Π²ΠΎΡ‚ появится Π² ΠΏΠΎΠ»Π΅ зрСния. Если ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‡ΠΈΠ²Π°Π΅Ρ‚, ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ загруТаСтся.

   src="image.png" 
alt="ОписаниС изобраТСния."


loading="lazy"
>

Для Π³Π»Π°Π²Π½ΠΎΠ³ΠΎ изобраТСния Π² Π²Π΅Ρ€Ρ…Π½Π΅ΠΉ части страницы ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ loading Ρ€Π°Π²Π½ΠΎΠ΅ Π½Π΅Ρ‚Π΅Ρ€ΠΏΠ΅Π»ΠΈΠ²ΠΎΠΌΡƒ .

   src="hero.jpg" 
alt="ОписаниС изобраТСния."


loading="eager"
>

Для Π²Π°ΠΆΠ½ΠΎΠ³ΠΎ изобраТСния Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρƒ ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π² Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ΅ вашСго Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°.

    

Но ΠΏΠΎΠΌΠ½ΠΈΡ‚Π΅: ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ проситС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ ΠΏΡ€ΠΈΠΎΡ€ΠΈΡ‚Π΅Ρ‚ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ ΠΎΠ΄Π½ΠΎΠ³ΠΎ рСсурса, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ изобраТСния, Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρƒ придСтся — ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ ΠΏΡ€ΠΈΠΎΡ€ΠΈΡ‚Π΅Ρ‚ Π΄Ρ€ΡƒΠ³ΠΎΠ³ΠΎ рСсурса, Ρ‚Π°ΠΊΠΎΠ³ΠΎ ΠΊΠ°ΠΊ сцСнарий ΠΈΠ»ΠΈ Ρ„Π°ΠΉΠ» ΡˆΡ€ΠΈΡ„Ρ‚Π°. ВыполняйтС ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½ΡƒΡŽ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΡƒ изобраТСния Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π² Ρ‚ΠΎΠΌ случаС, Ссли это Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ.

Π”Π΅ΠΊΠΎΠ΄ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ изобраТСния #

БущСствуСт Ρ‚Π°ΠΊΠΆΠ΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ дСкодирования , ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊ элСмСнтам img . Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρƒ, Ρ‡Ρ‚ΠΎ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Π΄Π΅ΠΊΠΎΠ΄ΠΈΡ€ΠΎΠ²Π°Π½ΠΎ асинхронно. Π—Π°Ρ‚Π΅ΠΌ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ ΠΌΠΎΠΆΠ΅Ρ‚ Ρ€Π°ΡΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΏΡ€ΠΈΠΎΡ€ΠΈΡ‚Π΅Ρ‚Ρ‹ ΠΏΡ€ΠΈ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ Π΄Ρ€ΡƒΠ³ΠΎΠ³ΠΎ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°.

   src="image.png" 
alt="ОписаниС изобраТСния."


loading="lazy"
decoding="async"
>

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ sync , Ссли само ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ являСтся Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ Π²Π°ΠΆΠ½Ρ‹ΠΌ элСмСнтом содСрТимого для опрСдСлСния ΠΏΡ€ΠΈΠΎΡ€ΠΈΡ‚Π΅Ρ‚Π°.

   src="hero.jpg" 
alt="ОписаниС изобраТСния."


loading="eager"
decoding="sync"
>

АдаптивныС изобраТСния с

srcset #

Благодаря этому объявлСнию ваш max-inline-size: 9 030% Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ сломаСтся ΠΈΠ· своих ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ΠΎΠ². Но Π΄Π°ΠΆΠ΅ Ссли большоС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ сТимаСтся, выглядит Π½ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½ΠΎ, это Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ Ρ…ΠΎΡ€ΠΎΡˆΠΎ. Если ΠΊΡ‚ΠΎ-Ρ‚ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ устройство с малСньким экраном Π² сСти с Π½ΠΈΠ·ΠΊΠΎΠΉ пропускной ΡΠΏΠΎΡΠΎΠ±Π½ΠΎΡΡ‚ΡŒΡŽ, ΠΎΠ½ Π±ΡƒΠ΄Π΅Ρ‚ Π·Π°Π³Ρ€ΡƒΠΆΠ°Ρ‚ΡŒ излишнС большиС изобраТСния.

Если Π²Ρ‹ создаСтС нСсколько вСрсий ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈ Ρ‚ΠΎΠ³ΠΎ ΠΆΠ΅ изобраТСния с Ρ€Π°Π·Π½Ρ‹ΠΌΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€Π°ΠΌΠΈ, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΠΎΠ±Ρ‰ΠΈΡ‚ΡŒ ΠΎΠ± этом Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρƒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° srcset .

ДСскриптор ΡˆΠΈΡ€ΠΈΠ½Ρ‹ #

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‚ΡŒ список Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ, Ρ€Π°Π·Π΄Π΅Π»Π΅Π½Π½Ρ‹Ρ… запятыми. КаТдоС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ URL-адрСсом изобраТСния, Π·Π° ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ слСдуСт ΠΏΡ€ΠΎΠ±Π΅Π», Π·Π° ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ ΡΠ»Π΅Π΄ΡƒΡŽΡ‚ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠ΅Ρ‚Π°Π΄Π°Π½Π½Ρ‹Π΅ ΠΎΠ± ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΈ. Π­Ρ‚ΠΈ ΠΌΠ΅Ρ‚Π°Π΄Π°Π½Π½Ρ‹Π΅ Π½Π°Π·Ρ‹Π²Π°ΡŽΡ‚ΡΡ дСскриптором.

Π’ этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΌΠ΅Ρ‚Π°Π΄Π°Π½Π½Ρ‹Π΅ ΠΎΠΏΠΈΡΡ‹Π²Π°ΡŽΡ‚ ΡˆΠΈΡ€ΠΈΠ½Ρƒ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΡˆΠΈΡ€ΠΈΠ½Ρ‹, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Π΅Π΄ΠΈΠ½ΠΈΡ†Ρƒ измСрСния w .Один w β€” это ΠΎΠ΄ΠΈΠ½ пиксСль.

   src="small-image.png" 
alt="ОписаниС изобраТСния."


loading="lazy"
decoding="async"
srcset="small-image. png 300w,
medium-image.png 600w,
big-image.png 1200w" 4 > 0 9 Атрибут srcset
Π½Π΅ замСняСт Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ src . ВмСсто этого Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ srcset дополняСт Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ src .Π’Π°ΠΌ ΠΏΠΎ-ΠΏΡ€Π΅ΠΆΠ½Π΅ΠΌΡƒ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΈΠΌΠ΅Ρ‚ΡŒ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ src , Π½ΠΎ Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ ΠΌΠΎΠΆΠ΅Ρ‚ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π΅Π³ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΎΠ΄Π½ΠΈΠΌ ΠΈΠ· ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ΠΎΠ², пСрСчислСнных Π² Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π΅ srcset .

Π‘Ρ€Π°ΡƒΠ·Π΅Ρ€ Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ Π·Π°Π³Ρ€ΡƒΠΆΠ°Ρ‚ΡŒ большиС изобраТСния, Ссли ΠΎΠ½ΠΈ Π½Π΅ Π½ΡƒΠΆΠ½Ρ‹. Π­Ρ‚ΠΎ экономит ΠΏΡ€ΠΎΠΏΡƒΡΠΊΠ½ΡƒΡŽ ΡΠΏΠΎΡΠΎΠ±Π½ΠΎΡΡ‚ΡŒ.

Π Π°Π·ΠΌΠ΅Ρ€Ρ‹ #

Если Π²Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ дСскриптор ΡˆΠΈΡ€ΠΈΠ½Ρ‹, Π²Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ² , Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρƒ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΡƒΡŽ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ. Π­Ρ‚ΠΎ сообщаСт Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρƒ, ΠΊΠ°ΠΊΠΎΠ³ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° Π²Ρ‹ ΠΎΠΆΠΈΠ΄Π°Π΅Ρ‚Π΅, Ρ‡Ρ‚ΠΎ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ Π² Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… условиях.Π­Ρ‚ΠΈ условия ΡƒΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‚ΡΡ Π² ΠΌΠ΅Π΄ΠΈΠ°-запросС.

Атрибут Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Π΅Ρ‚ Ρ€Π°Π·Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΉ запятыми список ΠΌΠ΅Π΄ΠΈΠ°-запросов ΠΈ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ изобраТСния.

Π‘Ρ‚Ρ€Π°Π½Π½ΠΎ ΠΈΠΌΠ΅Ρ‚ΡŒ ΠΌΠ΅Π΄ΠΈΠ°-запросы CSS Π²Π½ΡƒΡ‚Ρ€ΠΈ элСмСнта HTML. Π­Ρ‚ΠΎ ΠΏΠΎΡ€Ρ‚ΠΈΡ‚ Ρ€Π°Π·Π΄Π΅Π»Π΅Π½ΠΈΠ΅ прСдставлСния ΠΈ структуры. Но это СдинствСнный способ своСврСмСнно ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡƒΡŽ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Π°Ρ…, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π±Ρ‹Ρ‚ΡŒ эффСктивным.

   src="small-image.png" 
alt="ОписаниС изобраТСния."


Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ° = "Π»Π΅Π½ΠΈΠ²Ρ‹ΠΉ"
Π΄Π΅ΠΊΠΎΠ΄ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ = "асинхронный"
srcset = "малСнькоС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅.png 300w,
medium-image.png 600w,
large-image.png 1200w"
size="(min-width: 66em) 33vw,
(min-width: 44em) 50vw,
100vw"
0 >

Π’ этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ Π²Ρ‹ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚Π΅ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρƒ, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΈ ΡˆΠΈΡ€ΠΈΠ½Π΅ области просмотра 66em ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π΅ ΡˆΠΈΡ€Π΅ ΠΎΠ΄Π½ΠΎΠΉ Ρ‚Ρ€Π΅Ρ‚ΠΈ экрана (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΌΠ°ΠΊΠ΅Ρ‚Π° ΠΈΠ· Ρ‚Ρ€Π΅Ρ… столбцов)

Для ΡˆΠΈΡ€ΠΈΠ½Ρ‹ области просмотра ΠΌΠ΅ΠΆΠ΄Ρƒ 44em ΠΈ 66em ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‚ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π° ΠΏΠΎΠ»ΠΎΠ²ΠΈΠ½Π΅ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ экрана (ΠΌΠ°ΠΊΠ΅Ρ‚ ΠΈΠ· Π΄Π²ΡƒΡ… столбцов).

Для всСго, Ρ‡Ρ‚ΠΎ Π½ΠΈΠΆΠ΅ 44em ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π° всю ΡˆΠΈΡ€ΠΈΠ½Ρƒ экрана.

Π­Ρ‚ΠΎ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ самоС большоС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π΅ ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ для самого ΡˆΠΈΡ€ΠΎΠΊΠΎΠ³ΠΎ экрана. Π¨ΠΈΡ€ΠΎΠΊΠΎΠ΅ ΠΎΠΊΠ½ΠΎ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ ΠΌΠ°ΠΊΠ΅Ρ‚ с нСсколькими столбцами, Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ помСщаСтся Π² ΠΎΠ΄ΠΈΠ½ столбСц. Π­Ρ‚ΠΎ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ мСньшС, Ρ‡Π΅ΠΌ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΠΎΠ΅ для ΠΌΠ°ΠΊΠ΅Ρ‚Π° с ΠΎΠ΄Π½ΠΈΠΌ столбцом Π½Π° Π±ΠΎΠ»Π΅Π΅ ΡƒΠ·ΠΊΠΎΠΌ экранС.

ДСскриптор плотности пиксСлСй #

Π•ΡΡ‚ΡŒ Π΅Ρ‰Π΅ ΠΎΠ΄Π½Π° ситуация, ΠΊΠΎΠ³Π΄Π° Π²Π°ΠΌ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΠΈΡ‚ΡŒΡΡ ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ нСсколько вСрсий ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈ Ρ‚ΠΎΠ³ΠΎ ΠΆΠ΅ изобраТСния.

НСкоторыС устройства ΠΈΠΌΠ΅ΡŽΡ‚ дисплСи высокой плотности. На дисплСС с Π΄Π²ΠΎΠΉΠ½ΠΎΠΉ ΠΏΠ»ΠΎΡ‚Π½ΠΎΡΡ‚ΡŒΡŽ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΠΏΠ°ΠΊΠΎΠ²Π°Ρ‚ΡŒ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ Π½Π° Π΄Π²Π° пиксСля Π² пространство ΠΎΠ΄Π½ΠΎΠ³ΠΎ пиксСля. Благодаря этому изобраТСния Π½Π° Ρ‚Π°ΠΊΠΈΡ… дисплСях выглядят Ρ‡Π΅Ρ‚ΠΊΠΈΠΌΠΈ.

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ дСскриптор плотности для описания плотности пиксСлСй изобраТСния ΠΏΠΎ ΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΡŽ ΠΊ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡŽ Π² Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π΅ src . ДСскриптор плотности прСдставляСт собой число, Π·Π° ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ слСдуСт Π±ΡƒΠΊΠ²Π° x: 1x , 2x ΠΈ Ρ‚.Β Π΄.

   src="small-image.png" 
alt="ОписаниС изобраТСния. "


loading="lazy"
decoding="async"
srcset="small-image.png 1x,
medium-image.png 2x,
big -image.png 3x"
>

Если small-image.png ΠΈΠΌΠ΅Π΅Ρ‚ Ρ€Π°Π·ΠΌΠ΅Ρ€ 300 Π½Π° 200 пиксСлСй, Π° medium-image.png ΠΈΠΌΠ΅Π΅Ρ‚ Ρ€Π°Π·ΠΌΠ΅Ρ€ 600 Π½Π° 400 пиксСлСй, Ρ‚ΠΎ medium-image.png ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ 2x послС Π½Π΅Π³ΠΎ Π² спискС srcset .

Π’Π°ΠΌ Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ†Π΅Π»Ρ‹Π΅ числа.Если другая вСрсия изобраТСния ΠΈΠΌΠ΅Π΅Ρ‚ Ρ€Π°Π·ΠΌΠ΅Ρ€ 450 Π½Π° 300 пиксСлСй, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΎΠΏΠΈΡΠ°Ρ‚ΡŒ Π΅Π΅ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ 1,5x .

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΠ»ΠΈ дСскрипторы ΡˆΠΈΡ€ΠΈΠ½Ρ‹ ΠΈΠ»ΠΈ дСскрипторы плотности, Π½ΠΎ Π½Π΅ ΠΎΠ±Π° вмСстС.

ΠŸΡ€Π΅Π·Π΅Π½Ρ‚Π°Ρ†ΠΈΠΎΠ½Π½Ρ‹Π΅ изобраТСния #

Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡ Π² HTML ΡΠ²Π»ΡΡŽΡ‚ΡΡ содСрТимым. Π’ΠΎΡ‚ ΠΏΠΎΡ‡Π΅ΠΌΡƒ Π²Ρ‹ всСгда прСдоставляСтС Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ alt с описаниСм изобраТСния для ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌ чтСния с экрана ΠΈ поисковых систСм.

Если Π²Ρ‹ встраиваСтС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ прСдставляСт собой чисто Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹ΠΉ эффСкт Π±Π΅Π· ΠΊΠ°ΠΊΠΎΠ³ΠΎ-Π»ΠΈΠ±ΠΎ осмыслСнного содСрТания, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ пустой Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ alt .

   src="flourish.png" 
alt=""


>

Π’Ρ‹ всС Ρ€Π°Π²Π½ΠΎ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ alt . ΠžΡ‚ΡΡƒΡ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΉ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ alt β€” это Π½Π΅ Ρ‚ΠΎ ΠΆΠ΅ самоС, Ρ‡Ρ‚ΠΎ пустой Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ alt . ΠŸΡƒΡΡ‚ΠΎΠΉ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ alt сообщаСт ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ΅ чтСния с экрана, Ρ‡Ρ‚ΠΎ это ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ являСтся ΠΏΡ€Π΅Π·Π΅Π½Ρ‚Π°Ρ†ΠΈΠΎΠ½Π½Ρ‹ΠΌ.

Π’ ΠΈΠ΄Π΅Π°Π»Π΅ ваши ΠΏΡ€Π΅Π·Π΅Π½Ρ‚Π°Ρ†ΠΈΠΎΠ½Π½Ρ‹Π΅ ΠΈΠ»ΠΈ Π΄Π΅ΠΊΠΎΡ€Π°Ρ‚ΠΈΠ²Π½Ρ‹Π΅ изобраТСния Π²ΠΎΠΎΠ±Ρ‰Π΅ Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ Π² вашСм HTML. HTML для структуры. CSS ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½ для ΠΏΡ€Π΅Π·Π΅Π½Ρ‚Π°Ρ†ΠΈΠΈ.

Π€ΠΎΠ½ΠΎΠ²Ρ‹Π΅ изобраТСния #

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ свойство background-image Π² CSS для Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ ΠΏΡ€Π΅Π·Π΅Π½Ρ‚Π°Ρ†ΠΈΠΎΠ½Π½Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ.

  элСмСнт { 
background-image: url(flourish.png);
}

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ нСсколько ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ-ΠΊΠ°Π½Π΄ΠΈΠ΄Π°Ρ‚ΠΎΠ², ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ image-set для background-image .

Ѐункция image-set Π² CSS Π²ΠΎ ΠΌΠ½ΠΎΠ³ΠΎΠΌ ΠΏΠΎΡ…ΠΎΠΆΠ° Π½Π° Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ srcset Π² HTML. ΠŸΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²ΡŒΡ‚Π΅ список ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ с дСскриптором плотности пиксСлСй для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΈΠ· Π½ΠΈΡ….

  элСмСнт { 
background-image: image-set(
small-image.png 1x,
medium-image.png 2x,
big-image.png 3x
);
}

Π‘Ρ€Π°ΡƒΠ·Π΅Ρ€ Π²Ρ‹Π±Π΅Ρ€Π΅Ρ‚ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ подходящСС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ для плотности пиксСлСй устройства.

ΠŸΡ€ΠΈ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π½Π° сайт Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΡƒΡ‡ΠΈΡ‚Ρ‹Π²Π°Ρ‚ΡŒ мноТСство Ρ„Π°ΠΊΡ‚ΠΎΡ€ΠΎΠ²:

Π Π΅Π·Π΅Ρ€Π²ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ подходящСго мСста для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ изобраТСния. ВыяснитС, сколько Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ² Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ. Π Π΅ΡˆΠΈΡ‚Π΅, являСтся Π»ΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ ΠΈΠ»ΠΈ Π΄Π΅ΠΊΠΎΡ€Π°Ρ‚ΠΈΠ²Π½Ρ‹ΠΌ.

Π‘Ρ‚ΠΎΠΈΡ‚ ΠΏΠΎΡ‚Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ врСмя, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½Ρ‹Π΅ изобраТСния.ΠŸΠ»ΠΎΡ…ΠΈΠ΅ ΠΈΠΌΠΈΠ΄ΠΆΠ΅Π²Ρ‹Π΅ стратСгии Π²Ρ‹Π·Ρ‹Π²Π°ΡŽΡ‚ Ρ€Π°Π·ΠΎΡ‡Π°Ρ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈ Ρ€Π°Π·Π΄Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ. Π₯ΠΎΡ€ΠΎΡˆΠ°Ρ стратСгия изобраТСния Π΄Π΅Π»Π°Π΅Ρ‚ ваш сайт быстрым ΠΈ Ρ‡Π΅Ρ‚ΠΊΠΈΠΌ, нСзависимо ΠΎΡ‚ устройства ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ ΠΈΠ»ΠΈ сСтСвого ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ.

Π’ вашСм Π½Π°Π±ΠΎΡ€Π΅ инструмСнтов Π΅ΡΡ‚ΡŒ Π΅Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ элСмСнт HTML, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ Π²Π°ΠΌ Π»ΡƒΡ‡ΡˆΠ΅ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ свои изобраТСния: элСмСнт picture .

ΠŸΡ€ΠΎΠ²Π΅Ρ€ΡŒΡ‚Π΅ свои знания ΠΎΠ± изобраТСниях

Π§Ρ‚ΠΎΠ±Ρ‹ изобраТСния ΠΏΠΎΠΌΠ΅ΡΡ‚ΠΈΠ»ΠΈΡΡŒ Π² ΠΎΠΊΠ½Π΅ просмотра, Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ стили.

Π’Π΅Ρ€Π½ΠΎ НСвСрно

Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡ Π±Π΅Π· содСрТания Π±ΡƒΠ΄ΡƒΡ‚ Ρ‚Π°ΠΊΠΈΠΌΠΈ ΠΆΠ΅ большими, ΠΊΠ°ΠΊ ΠΈ ΠΈΡ… СстСствСнныС Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹.

Когда высота ΠΈ ΡˆΠΈΡ€ΠΈΠ½Π° изобраТСния ΠΈΠΌΠ΅ΡŽΡ‚ нССстСствСнноС ΡΠΎΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠ΅ сторон, ΠΊΠ°ΠΊΠΈΠ΅ стили ΠΌΠΎΠ³ΡƒΡ‚ ΠΏΠΎΠΌΠΎΡ‡ΡŒ ΠΎΡ‚Ρ€Π΅Π³ΡƒΠ»ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ соотвСтствиС изобраТСния этим пропорциям?

соотвСтствиС ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π° соотвСтствиС изобраТСния соотвСтствиС изобраТСния ΡΠΎΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠ΅ сторон

Π£ΠΊΠ°ΠΆΠΈΡ‚Π΅, ΠΊΠ°ΠΊ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ соотвСтствуСт ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹ΠΌ словам, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, содСрТат ΠΈ ΠΏΠΎΠΊΡ€Ρ‹Π²Π°ΡŽΡ‚ .

Π­Ρ‚ΠΎΠΉ собствСнности Π½Π΅ сущСствуСт, я Π΅Π΅ Π²Ρ‹Π΄ΡƒΠΌΠ°Π».

Π­Ρ‚ΠΎΠΉ собствСнности Π½Π΅ сущСствуСт, я Π΅Π΅ Π²Ρ‹Π΄ΡƒΠΌΠ°Π».

Π­Ρ‚ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ привСсти ΠΊ нССстСствСнному ΡΠΎΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΡŽ сторон изобраТСния ΠΈΠ»ΠΈ ΡƒΡΡ‚Ρ€Π°Π½ΠΈΡ‚ΡŒ Π΅Π³ΠΎ.

Установка высоты ΠΈ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ Π½Π° Π²Π°ΡˆΠΈΡ… изобраТСниях Π½Π΅ позволяСт CSS ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ€Π°Π·Π½Ρ‹Π΅ стили.

Π’Π΅Ρ€Π½ΠΎ НСвСрно

ВоспринимайтС ΠΈΡ… ΠΊΠ°ΠΊ Π½Π°ΠΌΠ΅ΠΊΠΈ, Π° Π½Π΅ ΠΏΡ€Π°Π²ΠΈΠ»Π°.

CSS ΠΈΠΌΠ΅Π΅Ρ‚ большоС количСство динамичСских ΠΎΠΏΡ†ΠΈΠΉ для измСнСния Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ² ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, Π΄Π°ΠΆΠ΅ Ссли высота ΠΈ ΡˆΠΈΡ€ΠΈΠ½Π° встроСны Π² Ρ‚Π΅Π³.

Атрибут srcset Π½Π΅ _______ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° src , ΠΎΠ½ _______ Π΅Π³ΠΎ.

ΠΊΠΎΠΌΠΏΠ»ΠΈΠΌΠ΅Π½Ρ‚, замСняСт Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ, дополняСт

srcset ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎ Π½Π΅ замСняСт Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ src .

ΠŸΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²Π»ΡΠ΅Ρ‚ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρƒ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ возмоТности Π½Π° Π²Ρ‹Π±ΠΎΡ€, Ссли ΠΎΠ½ Π½Π° это способСн.

ΠžΡ‚ΡΡƒΡ‚ΡΡ‚Π²ΠΈΠ΅ alt Π½Π° ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΈ Ρ€Π°Π²Π½ΠΎΡΠΈΠ»ΡŒΠ½ΠΎ пустому alt .

Π’Π΅Ρ€Π½ΠΎ НСвСрно

ΠŸΡƒΡΡ‚ΠΎΠΉ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ alt сообщаСт ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ΅ чтСния с экрана, Ρ‡Ρ‚ΠΎ это ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ являСтся ΠΏΡ€Π΅Π·Π΅Π½Ρ‚Π°Ρ†ΠΈΠΎΠ½Π½Ρ‹ΠΌ

ΠžΡ‚ΡΡƒΡ‚ΡΡ‚Π²ΡƒΠ΅Ρ‚ alt , Π½ΠΈΡ‡Π΅Π³ΠΎ Π½Π΅ Π³ΠΎΠ²ΠΎΡ€ΠΈΡ‚ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ΅ чтСния с экрана.

Как ΠΎΠ±Ρ€Π΅Π·Π°Ρ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π² CSS β€” Uploadcare

ΠžΠ±Ρ€Π΅Π·ΠΊΠ° ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS β€” Ρ…ΠΎΡ€ΠΎΡˆΠΎ освСщСнная Ρ‚Π΅ΠΌΠ°, ΠΈ Π² Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π΅ Π΅ΡΡ‚ΡŒ мноТСство статСй ΠΎΠ± этом, Ρ‚Π°ΠΊ Π·Π°Ρ‡Π΅ΠΌ Π΅Ρ‰Π΅ ΠΎΠ΄Π½Π°? Π­Ρ‚ΠΎ Ρ…ΠΎΡ€ΠΎΡˆΠΈΠΉ вопрос, ΠΈ Ρƒ мСня Π΅ΡΡ‚ΡŒ ΠΎΡ‚Π²Π΅Ρ‚. МногиС сообщСния ΠΎΡ…Π²Π°Ρ‚Ρ‹Π²Π°ΡŽΡ‚ 1000 ΠΈ 1 хакСрский способ ΠΎΠ±Ρ€Π΅Π·Π°Ρ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ ввСсти Π² Π·Π°Π±Π»ΡƒΠΆΠ΄Π΅Π½ΠΈΠ΅ Π½ΠΎΠ²ΠΈΡ‡ΠΊΠ°. ΠœΡ‹ отбросим ΠΌΠ΅Ρ‚ΠΎΠ΄Ρ‹ ΠΎΠ±Ρ…ΠΎΠ΄Π° ΠΈ сосрСдоточимся Π½Π° Ρ‚Π΅Ρ…, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΈΠ·Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎ ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π°Π»ΠΈΡΡŒ для ΠΎΠ±Ρ€Π΅Π·ΠΊΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ. К ΡΡ‡Π°ΡΡ‚ΡŒΡŽ, Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ Ρƒ нас Π΅ΡΡ‚ΡŒ Ρ…ΠΎΡ€ΠΎΡˆΠΈΠΉ Π½Π°Π±ΠΎΡ€ этих ΠΌΠ΅Ρ‚ΠΎΠ΄ΠΎΠ² ΠΈ Π΄Π°ΠΆΠ΅ большС.

Β«Π—Π°Ρ‡Π΅ΠΌ ΠΎΠ±Ρ€Π΅Π·Π°Ρ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅?Β» Π― Π±Ρ‹ спросил?

Β«ΠŸΠΎΡ‡Π΅ΠΌΡƒ ΠΌΡ‹ Π½Π΅ ΠΌΠΎΠΆΠ΅ΠΌ ΠΏΠ΅Ρ€Π΅ΡΡ‚Π°Ρ‚ΡŒ ΡΠΏΡ€Π°ΡˆΠΈΠ²Π°Ρ‚ΡŒ ΠΏΠΎΡ‡Π΅ΠΌΡƒ ΠΈ ΠΏΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ ΠΊ Ρ‚Π΅ΠΌΠ΅, Π“Π΅Ρ€ΠΌΠ°Π½?Β» Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Ρ€Π΅Π·ΠΎΠ½Π½ΠΎ ΡΠΏΡ€ΠΎΡΠΈΡ‚ΡŒ мСня Π² ΠΎΡ‚Π²Π΅Ρ‚.

Нам Π½ΡƒΠΆΠ½ΠΎ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠ°Ρ‚ΡŒ ΡΠΏΡ€Π°ΡˆΠΈΠ²Π°Ρ‚ΡŒ Β«ΠΏΠΎΡ‡Π΅ΠΌΡƒΒ», ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ ΠΌΡ‹ Ρ…ΠΎΡ‚ΠΈΠΌ ΠΏΡ€ΠΈΠ½ΡΡ‚ΡŒ взвСшСнноС Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅.ΠœΡ‹ Ρ…ΠΎΡ‚ΠΈΠΌ ΠΏΠΎΠ½ΡΡ‚ΡŒ, Π³Π΄Π΅ это ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΠΌΠΎ ΠΈ Ρ‡Π΅Π³ΠΎ Π½Π°ΠΌ это стоит. Иногда ΠΌΡ‹ Ρ…ΠΎΡ‚ΠΈΠΌ ΠΎΠ±Ρ€Π΅Π·Π°Ρ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS просто ΠΏΠΎΡ‚ΠΎΠΌΡƒ, Ρ‡Ρ‚ΠΎ ΠΌΡ‹ Ρ„Ρ€ΠΎΠ½Ρ‚Π΅Π½Π΄-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ ΠΈ Π½Π΅ ΠΌΠΎΠΆΠ΅ΠΌ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ это Π½Π° сСрвСрС. Π­Ρ‚ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Π»ΠΈΠ±ΠΎ ΠΈΠ·-Π·Π° отсутствия Π·Π½Π°Π½ΠΈΠΉ, Π»ΠΈΠ±ΠΎ ΠΈΠ·-Π·Π° доступа ΠΊ сСрвСру. Π₯ΠΎΡ€ΠΎΡˆΠ΅ΠΉ Π½ΠΎΠ²ΠΎΡΡ‚ΡŒΡŽ являСтся Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Π±ΠΎΠ³Π°Ρ‚Ρ‹ΠΉ CDN API здСсь ΠΊ вашим услугам.

ΠŸΠΎΡΠΌΠΎΡ‚Ρ€ΠΈΡ‚Π΅ Π½Π° эту ΠΏΡ€Π΅ΠΊΡ€Π°ΡΠ½ΡƒΡŽ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½Ρƒ горящих ΡƒΠ³Π»Π΅ΠΉ:

НСмного ΠΏΠΎΠ΄ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π² URL, ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΠΎΠ±Ρ€Π΅Π·Π°Ρ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈ ΡΠΎΡΡ€Π΅Π΄ΠΎΡ‚ΠΎΡ‡ΠΈΡ‚ΡŒΡΡ Π½Π° горящих углях Π·Π° Ρ†Π΅Π½Ρ‚Ρ€Π°Π»ΡŒΠ½Ρ‹ΠΌ справа.

НСдостаток этого ΠΌΠ΅Ρ‚ΠΎΠ΄Π° Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Π½Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ CDN для хранСния Π½Π°ΡˆΠΈΡ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ.

ΠžΡΡ‚Π°Π»ΠΈΡΡŒ Π»ΠΈ случаи, ΠΊΠΎΠ³Π΄Π° Π½Π°ΠΌ Π½ΡƒΠΆΠ½Π° ΠΎΠ±Ρ€Π΅Π·ΠΊΠ° изобраТСния Π½Π° основС CSS? ΠšΠΎΠ½Π΅Ρ‡Π½ΠΎ, я ΠΌΠΎΠ³Ρƒ ΠΏΠΎΠ΄ΡƒΠΌΠ°Ρ‚ΡŒ ΠΎ Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ эффСкта параллакса ΠΈΠ»ΠΈ карусСли фиксированного Ρ€Π°Π·ΠΌΠ΅Ρ€Π° для отобраТСния Ρ€Π°Π·Π½Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, Π»ΠΈΠ½Π·Ρ‹ Π½Π° Π²Π΅Π±-сайтах элСктронной ΠΊΠΎΠΌΠΌΠ΅Ρ€Ρ†ΠΈΠΈ часто ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ ΠΎΠ±Ρ€Π΅Π·ΠΊΡƒ.

Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ ΠΌΡ‹ рассмотрим ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠ΅ способы ΠΎΠ±Ρ€Π΅Π·ΠΊΠΈ изобраТСния с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS ΠΎΡ‚ самых простых Π΄ΠΎ самых слоТных:

ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ ΠΈ основной ΠΏΠΎΠ΄Ρ…ΠΎΠ΄.Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ ΠΎΠ±Ρ‰ΠΈΠΉ элСмСнт ΠΈ Π΄Π²Π° свойства: object-fit ΠΈ object-position . Π”Π°Π²Π°ΠΉΡ‚Π΅ сначала исслСдуСм ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π½ΠΎ-подходящих . Π― Π½Π΅ Π±ΡƒΠ΄Ρƒ Π·Π°Π½ΠΈΠΌΠ°Ρ‚ΡŒΡΡ Ρ„ΠΎΡ€ΠΌΡƒΠ»ΠΈΡ€ΠΎΠ²ΠΊΠΎΠΉ ΠΈ Π²ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡΡŒ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ΠΌ ΠΈΠ· стандарта CSS.

Бвойство object-fit ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚, ΠΊΠ°ΠΊ содСрТимоС Π·Π°ΠΌΠ΅Π½Π΅Π½Π½ΠΎΠ³ΠΎ элСмСнта Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½ΠΎ Π² ΠΏΠΎΠ»Π΅, установлСнном Π΅Π³ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΠΎΠΉ высотой ΠΈ ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ.

Π’ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ΡΡŒ прСдоставлСнной ссылкой Π½Π° стандарт, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ·Π½Π°Ρ‚ΡŒ ΠΎ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Π°Ρ… значСния.Π― ΠΏΡ€ΠΈΠ²Π΅Π΄Ρƒ нСсколько ΠΆΠΈΠ²Ρ‹Ρ… ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ², Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΎΠΈΠ»Π»ΡŽΡΡ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΡ….

Π‘ΠΌ. ΠΏΠ΅Ρ€ΠΎ 01. , object-fit ΠΈ object-position Π“Π΅Ρ€ΠΌΠ°Π½ Π’Π΅Π±ΠΈΠ΅Π² (@terbiy) Π½Π° КодПСнС.

ИдСя object-fit Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Ρƒ нас Π΅ΡΡ‚ΡŒ , ΠΈ ΠΎΠ½ ΠΈΠΌΠ΅Π΅Ρ‚ ΡƒΠΊΠ°Π·Π°Π½Π½Ρ‹ΠΉ Ρ€Π°Π·ΠΌΠ΅Ρ€:

  <ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅
 
  src="https://ucarecdn.com/dbffe489-e4c9-449f-a013-2f2381eb778c/-/preview/400x300/"
  alt="Π˜ΡΡ…ΠΎΠ΄Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅"
>  
  .fitting-image {
  ΡˆΠΈΡ€ΠΈΠ½Π°: 150 пиксСлСй;
  высота: 150 пиксСлСй;
  ΠΎΠ±ΡŠΠ΅ΠΊΡ‚-ΠΏΠΎΠ΄Π³ΠΎΠ½ΠΊΠ°: <ΠΊΠ°ΠΊΠΎΠ΅-Ρ‚ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅>;
}  

Π’ этом случаС Ρ€Π°Π·ΠΌΠ΅Ρ€ составляСт 150 Π½Π° 150 пиксСлСй.Π Π°Π·ΠΌΠ΅Ρ€ изобраТСния, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΌΡ‹ Ρ…ΠΎΡ‚ΠΈΠΌ ΠΏΡ€ΠΎΠ΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ, составляСт 201 Π½Π° 300 пиксСлСй. Нам Π½ΡƒΠΆΠ½ΠΎ ΠΊΠ°ΠΊ-Ρ‚ΠΎ ΠΏΡ€ΠΈΠΌΠΈΡ€ΠΈΡ‚ΡŒ эту Ρ€Π°Π·Π½ΠΈΡ†Ρƒ. Бвойство object-fit позволяСт Π·Π°Π΄Π°Ρ‚ΡŒ ΡΡ‚Ρ€Π°Ρ‚Π΅Π³ΠΈΡŽ согласования. Π”ΠΎΠ»ΠΆΠ΅Π½ ΠΏΡ€ΠΈΠ·Π½Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ это Π½Π΅ всСгда ΠΏΡ€ΠΈΠ²ΠΎΠ΄ΠΈΡ‚ ΠΊ ΠΎΠ±Ρ€Π΅Π·ΠΊΠ΅. Иногда Π²Ρ‹ Ρ€Π°ΡΡ‚ΡΠ³ΠΈΠ²Π°Π΅Ρ‚Π΅ΡΡŒ ΠΈΠ»ΠΈ ΡƒΠΌΠ΅Π½ΡŒΡˆΠ°Π΅Ρ‚ΡΡΠ΅. Π’Π΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅, ΠΏΠΎΠ»Π΅Π·Π½ΠΎ ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΏΠΎΠ»Π½ΡƒΡŽ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½Ρƒ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π½ΠΎ-подходящих , Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π΅ Π²Π²ΠΎΠ΄ΠΈΡ‚ΡŒ вас Π² Π·Π°Π±Π»ΡƒΠΆΠ΄Π΅Π½ΠΈΠ΅.

УмСньшСнноС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π΄ΠΎ выглядит Π½Π΅ ΡΡ‚ΠΎΠ»ΡŒ ΠΎΡ‡Π΅Π²ΠΈΠ΄Π½Ρ‹ΠΌ. Π”Π°Π²Π°ΠΉΡ‚Π΅ рассмотрим ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π»ΡƒΡ‡ΡˆΠ΅ ΠΏΠΎΠ½ΡΡ‚ΡŒ, ΠΊΠ°ΠΊ это Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚.

Π‘ΠΌ. ΠΏΠ΅Ρ€ΠΎ 01. , object-fit ΠΈ object-position Π“Π΅Ρ€ΠΌΠ°Π½ Π’Π΅Π±ΠΈΠ΅Π² (@terbiy) Π½Π° КодПСнС.

На Π΄Π°Π½Π½Ρ‹ΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ‚ ΠΌΡ‹, Π½Π°ΠΊΠΎΠ½Π΅Ρ†, подошли ΠΊ CSS-свойству object-position . Π­Ρ‚ΠΎ свойство ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ Π½Π°ΠΌ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅ΠΌΡ‹ΠΉ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚. ВзглянитС Π½Π° ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹. ΠŸΡ€ΠΎΡ‡Ρ‚ΠΈΡ‚Π΅ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ Π½ΠΈΠΆΠ΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ½ΡΡ‚ΡŒ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹ свойства object-position .

Π‘ΠΌ. ΠΏΠ΅Ρ€ΠΎ 01. ΠΈ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π½Π°Ρ ΠΏΠΎΠ΄Π³ΠΎΠ½ΠΊΠ° Π“Π΅Ρ€ΠΌΠ°Π½Π° Π’Π΅Π±ΠΈΠ΅Π²Π° (@terbiy) Π½Π° КодПСнС.

Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π²Ρ‹ ΠΏΠΎΠ½ΠΈΠΌΠ°Π΅Ρ‚Π΅, ΠΊΠ°ΠΊ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΎΠ±Ρ€Π΅Π·Π°Π½Π½ΠΎΠ³ΠΎ изобраТСния.

Π£Ρ„, послСдняя Ρ‡Π°ΡΡ‚ΡŒ Π±Ρ‹Π»Π° довольно большой. Π‘ΡƒΠ΄Π΅Ρ‚ Π»ΠΈ этот Ρ‚Π°ΠΊΠΎΠΉ ΠΆΠ΅? Ну, я надСялся, Ρ‡Ρ‚ΠΎ это Π±ΡƒΠ΄Π΅Ρ‚ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ ΠΎΡ‡Π΅Π½ΡŒ ΠΏΠΎΡ…ΠΎΠΆΠ΅Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΌΡ‹ ΠΌΠΎΠ³Π»ΠΈ Π΅Π³ΠΎ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΡΠΎΠΊΡ€Π°Ρ‚ΠΈΡ‚ΡŒ. Π― Π΄ΡƒΠΌΠ°Π», ΠΌΡ‹ ΡƒΠ²ΠΈΠ΄ΠΈΠΌ Π½Π΅Π±ΠΎΠ»ΡŒΡˆΡƒΡŽ ΡΠΌΡ‹ΡΠ»ΠΎΠ²ΡƒΡŽ Ρ€Π°Π·Π½ΠΈΡ†Ρƒ, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ я посвящу нСбольшой Π°Π±Π·Π°Ρ† ΠΈ нСсколько ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ². Π£ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ изобраТСния оказалось Ρ„Π°Π»ΡŒΡˆ-Π΄Π½ΠΎ, Π° ΠΏΠΎΡ‚ΠΎΠΌ Π΅Ρ‰Π΅ ΠΎΠ΄Π½ΠΎ.

ΠŸΠΎΠ·Π²ΠΎΠ»ΡŒΡ‚Π΅ ΠΌΠ½Π΅ сначала ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ Π½Π° стандарты: background-image , background-size ΠΈ background-position .НС Ρ‚Ρ€Π°Ρ‚ΡŒΡ‚Π΅ Π½Π° это слишком ΠΌΠ½ΠΎΠ³ΠΎ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ, Ссли Π²Π°ΠΌ Π½ΡƒΠΆΠ½Ρ‹ практичСскиС ΠΎΡ‚Π²Π΅Ρ‚Ρ‹. Π›ΡƒΡ‡ΡˆΠ΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½Ρ‹Π΅ Π½ΠΈΠΆΠ΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ ΠΈ исслСдуйтС ΠΈΡ… CSS. Π’ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ΡΡŒ этими ссылками, Ссли Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π³Π»ΡƒΠ±ΠΎΠΊΠΎΠ΅ ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΈΠ»ΠΈ Π²Π΄ΠΎΡ…Π½ΠΎΠ²Π΅Π½ΠΈΠ΅ для экспСримСнтов.

Π“Π΄Π΅ Π±Ρ‹ Π²Ρ‹ Ρ…ΠΎΡ‚Π΅Π»ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ вмСсто ΠΎΠ±Ρ‹Ρ‡Π½ΠΎΠ³ΠΎ ? Π§Ρ‚ΠΎ ΠΆ, использованиС Ρ„ΠΎΠ½ΠΎΠ²Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π½Π΅ Π΄Π°Π΅Ρ‚ Π²Π°ΠΌ возмоТности пСрСтаскивания. Если ΠΌΡ‹ Π³ΠΎΠ²ΠΎΡ€ΠΈΠΌ ΠΎ восприятии Π² этом контСкстС, я ΠΏΡ€Π΅Π΄Π»Π°Π³Π°ΡŽ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ„ΠΎΠ½ΠΎΠ²Ρ‹Π΅ изобраТСния для создания настроСния.ΠŸΡ€ΠΎΡΡ‚Ρ‹Π΅ изобраТСния Ρ…ΠΎΡ€ΠΎΡˆΠΈ, Ссли ΠΎΠ½ΠΈ ΡΠ²Π»ΡΡŽΡ‚ΡΡ Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΌΠΈ Π΄Π΅ΠΉΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΌΠΈ Π»ΠΈΡ†Π°ΠΌΠΈ повСствования.

Однако отвлСчСмся ΠΎΡ‚ ΠΏΠ΅Ρ€Ρ†Π΅ΠΏΡ‚ΠΈΠ²Π½Ρ‹Ρ… рассуТдСний ΠΈ вСрнСмся ΠΊ основным ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°ΠΌ:

Π‘ΠΌ. ΠΏΠ΅Ρ€ΠΎ 04. Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π“Π΅Ρ€ΠΌΠ°Π½Π° Π’Π΅Π±ΠΈΠ΅Π²Π° (@terbiy) Π½Π° КодПСнС.

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²ΠΈΠ΄Π΅Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠ΅ состояниС Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ изобраТСния скорСС ΠΈΠΌΠ΅Π»ΠΎ Π±Ρ‹ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ ΠΏΠ»ΠΈΡ‚ΠΊΠΈ, Ρ‡Π΅ΠΌ ΠΎΠ±Ρ€Π΅Π·ΠΊΡƒ. Π”Ρ€ΡƒΠ³ΠΈΠ΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€ΠΈΡ€ΡƒΡŽΡ‚ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΌΡ‹ ΠΎΠΆΠΈΠ΄Π°Π΅ΠΌ ΠΎΡ‚ кадрирования. ИспользованиС свойства background-size Π΄Π°Π΅Ρ‚ Π²Π°ΠΌ большС гибкости с Ρ‚ΠΎΡ‡ΠΊΠΈ зрСния Ρ€Π°Π·ΠΌΠ΅Ρ€Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ€Π°ΡΡ‚ΡΠ½ΡƒΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅.

  .strange-size-background-image {
  Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅: 1234px 5678px;
}  

ΠŸΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½Ρ‹ΠΉ Π²Ρ‹ΡˆΠ΅ ΠΊΠΎΠ΄ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ дСйствитСлСн.

Π‘Π»Π΅Π΄ΡƒΡŽΡ‰Π°Ρ Ρ‡Π°ΡΡ‚ΡŒ Π΄Π°Π΅Ρ‚ Π²Π°ΠΌ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΡƒΡŽ Π³ΠΈΠ±ΠΊΠΎΡΡ‚ΡŒ ΠΎΠ±Ρ€Π΅Π·ΠΊΠΈ. Π’ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π²Ρ‹ ΠΏΠΎΠΌΠ½ΠΈΡ‚Π΅ свойство box-sizing , ΡΠΎΠΎΠ±Ρ‰Π°ΡŽΡ‰Π΅Π΅ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρƒ, Ρ‡Ρ‚ΠΎ Π²ΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒ Π² ΡˆΠΈΡ€ΠΈΠ½Ρƒ. Π•ΡΡ‚ΡŒ Π΄Π²Π° свойства Ρ„ΠΎΠ½Π°, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‰ΠΈΠ΅ Ρ‚Ρƒ ΠΆΠ΅ идСю: background-origin ΠΈ background-clip .

Π― создал ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€ΠΈΡ€ΡƒΡŽΡ‰ΠΈΠΉ Π΄Π΅Π²ΡΡ‚ΡŒ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹Ρ… ΠΊΠΎΠΌΠ±ΠΈΠ½Π°Ρ†ΠΈΠΉ:

Π‘ΠΌ. ΠΏΠ΅Ρ€ΠΎ 04.Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π“Π΅Ρ€ΠΌΠ°Π½Π° Π’Π΅Π±ΠΈΠ΅Π²Π° (@terbiy) Π½Π° КодПСнС.

Оба background-origin ΠΈ background-clip ΠΈΠΌΠ΅ΡŽΡ‚ Ρ‚Ρ€ΠΈ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹Ρ… значСния: border-box , padding-box ΠΈ content-box . Π’ ΠΏΠ΅Ρ€Π²ΠΎΠΌ случаС Π²Ρ‹ опрСдСляСтС мСсто для размСщСния Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ изобраТСния. Для border-box Π²Π΅Ρ€Ρ…Π½ΠΈΠΉ Π»Π΅Π²Ρ‹ΠΉ ΡƒΠ³ΠΎΠ» Ρ„ΠΎΠ½Π° Π±ΡƒΠ΄Π΅Ρ‚ Π² Π²Π΅Ρ€Ρ…Π½Π΅ΠΉ Π»Π΅Π²ΠΎΠΉ Ρ‚ΠΎΡ‡ΠΊΠ΅ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹. Π›ΠΎΠ³ΠΈΠΊΠ° ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Π° для padding-box ΠΈ content-box .ЕдинствСнная Ρ€Π°Π·Π½ΠΈΡ†Π° Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² Ρ‚ΠΎΠΌ, Π³Π΄Π΅ Π²Ρ‹ примСняСтС Ρ„ΠΎΠ½.

Бвойство background-clip сообщаСт, Π³Π΄Π΅ происходит Β«ΠΎΠ±Ρ€Π΅Π·ΠΊΠ°Β». ВзглянитС Π½Π° ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ CSS:

  .origin-border-clip-content {
  background-origin: Π³Ρ€Π°Π½ΠΈΡ†Π°;
  Ρ„ΠΎΠ½ΠΎΠ²Ρ‹ΠΉ ΠΊΠ»ΠΈΠΏ: содСрТимоС;
}  

Π­Ρ‚ΠΎ заставляСт вашС Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π°Ρ‡ΠΈΠ½Π°Ρ‚ΡŒΡΡ Π² Π²Π΅Ρ€Ρ…Π½Π΅ΠΌ Π»Π΅Π²ΠΎΠΌ ΡƒΠ³Π»Ρƒ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ ΠΈ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠ°Ρ‚ΡŒΡΡ Π² Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΏΡ€Π°Π²Ρ‹ΠΉ ΡƒΠ³ΠΎΠ». Но Π²Ρ‹ ΡƒΠ²ΠΈΠ΄ΠΈΡ‚Π΅ СдинствСнный Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚ ΠΏΠΎΠ΄ содСрТимым ΠΈΠ·-Π·Π° ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½Π½ΠΎΠ³ΠΎ отсСчСния.

ΠžΠΏΠΈΡΠ°Π½Π½Ρ‹Π΅ Π΄Π²Π° свойства Π±Ρ‹Π»ΠΈ ΠΏΠ΅Ρ€Π²Ρ‹ΠΌ Π»ΠΎΠΆΠ½Ρ‹ΠΌ Π΄Π½ΠΎΠΌ, ΠΎ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ я ΡƒΠΏΠΎΠΌΠΈΠ½Π°Π». ΠŸΠΎΡ‡Π΅ΠΌΡƒ я ΠΈΡ… Ρ‚Π°ΠΊ Π½Π°Π·Π²Π°Π»? ΠŸΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΈ Ρ€Π΅Π΄ΠΊΠΈΠ΅ гости Π² Π΄Ρ€ΡƒΠ³ΠΈΡ… ΡΡ‚Π°Ρ‚ΡŒΡΡ… ΠΏΠΎ Ρ‚Π΅ΠΌΠ΅, Π° я ΠΈΡ… ΠΎΠ±Π½Π°Ρ€ΡƒΠΆΠΈΠ» Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π² спСцификации. А Ρ‡Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ Π²Ρ‚ΠΎΡ€ΠΎΠ΅ Ρ„Π°Π»ΡŒΡˆ-Π΄Π½ΠΎ? Π­Ρ‚ΠΎ отсСчСниС ΠΏΠΎ тСксту. Π‘Π°ΠΌΠΎΠ΅ интСрСсноС Π² Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΈ text свойства background-clip Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΎ взято ΠΈΠ· Ρ‚Π°ΠΊ Π½Π°Π·Ρ‹Π²Π°Π΅ΠΌΠΎΠ³ΠΎ HTML Living Standard. Π—Π° этим стоит ΠΊΠΎΠ½Ρ„Π»ΠΈΠΊΡ‚ старых Π²Ρ€Π΅ΠΌΠ΅Π½, Π° прСфикс -webkit- β€” это старый ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ ΠΊ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΊΠ΅ Π½ΠΎΠ²Ρ‹Ρ… Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ….Волько эти Π΄Π²Π° Ρ„Π°ΠΊΡ‚ΠΎΡ€Π° ΠΌΠΎΠ³ΡƒΡ‚ привнСсти ΡΡŽΠΆΠ΅Ρ‚ ΠΈ ΠΏΠΎΠ²ΠΎΡ€ΠΎΡ‚ Π² эту ΡΡ‚Π°Ρ‚ΡŒΡŽ, Π½ΠΎ Π½Π΅ Π±ΡƒΠ΄Π΅ΠΌ Π·Π°Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒ Ρ‚Π°ΠΊ Π΄Π°Π»Π΅ΠΊΠΎ. ВзглянитС Π½Π° этот ΠΎΡ‡Π°Ρ€ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ класс CSS:

.
  .background-clip-to-text {
  Ρ†Π²Π΅Ρ‚: ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½Ρ‹ΠΉ;
  Ρ„ΠΎΠ½ΠΎΠ²Ρ‹ΠΉ ΠΊΠ»ΠΈΠΏ: тСкст;
  -webkit-background-clip: тСкст;
}  

Π­Ρ‚ΠΎ позволяСт Π½Π°ΠΌ Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ красивый эффСкт изобраТСния, Ρ€Π°ΡΠΊΡ€Π°ΡˆΠΈΠ²Π°ΡŽΡ‰Π΅Π³ΠΎ наш тСкст.

Π‘ΠΌ. ΠΏΠ΅Ρ€ΠΎ 05. background-origin ΠΈ background-clip Π“Π΅Ρ€ΠΌΠ°Π½Π° Π’Π΅Π±ΠΈΠ΅Π²Π° (@terbiy) Π½Π° КодПСнС.

Π”ΠΎ написания этой ΡΡ‚Π°Ρ‚ΡŒΠΈ я Π·Π½Π°Π», Ρ‡Ρ‚ΠΎ этот эффСкт доступСн Π² SVG, ΠΈ собирался Π²Π°ΠΌ Π΅Π³ΠΎ ΠΎΠΏΠΈΡΠ°Ρ‚ΡŒ. Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π½Π°ΠΌ это большС Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ Ρƒ нас Π΅ΡΡ‚ΡŒ Π³ΠΎΡ€Π°Π·Π΄ΠΎ Π±ΠΎΠ»Π΅Π΅ простоС CSS-Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅.

Π‘ΠΎΠ»ΡŒΡˆΠ΅ всСго Ρ…Π°ΠΊΠΎΠ² Π² ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰ΠΈΠ΅ Ρ€Π°Π·Ρ‹ использовалось для сохранСния ΠΏΡ€ΠΎΠΏΠΎΡ€Ρ†ΠΈΠΉ содСрТимого ΠΎΠ±Ρ€Π΅Π·Π°Π½Π½ΠΎΠ³ΠΎ изобраТСния. Когда Π²Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, ΠΈΠΌΠ΅ΡŽΡ‰Π΅Π΅ 100% ΡˆΠΈΡ€ΠΈΠ½Ρƒ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°, Π²Ρ‹ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ явно Π·Π°Π΄Π°Ρ‚ΡŒ высоту, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ ΠΏΡ€ΠΎΠΏΠΎΡ€Ρ†ΠΈΠΈ. Π’ этом Π²Π°ΠΌ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ CSS-свойство ΡΠΎΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠ΅ сторон .Он ΠΈΠΌΠ΅Π΅Ρ‚ Π΄ΠΎΡΡ‚ΠΎΠΉΠ½ΡƒΡŽ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΡƒ соврСмСнных Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ², Π½ΠΎ Π½Π΅ Π½Π°ΡΡ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ…ΠΎΡ€ΠΎΡˆ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΡΡ‚Π°Π²Π°Ρ‚ΡŒΡΡ Π½Π΅Π±Ρ€Π΅ΠΆΠ½Ρ‹ΠΌ. ΠŸΠΎΠΆΠ°Π»ΡƒΠΉΡΡ‚Π°, ΠΏΡ€ΠΎΠ²Π΅Ρ€ΡŒΡ‚Π΅ caniuse.com для ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΊΠΈ.

Π‘ΠΌ. ΠΏΠ΅Ρ€ΠΎ 06. Ρ„ΠΎΠ½-ΠΊΠ»ΠΈΠΏ: тСкст Π“Π΅Ρ€ΠΌΠ°Π½Π° Π’Π΅Π±ΠΈΠ΅Π²Π° (@terbiy) Π½Π° КодПСнС.

ΠŸΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ Π·Π°Π΄Π°Π½Π½Ρ‹ΠΉ радиус Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ ΠΈ скрытый ΠΏΠ΅Ρ€Π΅Π»ΠΈΠ² β€” Π΄Π²Π° инструмСнта мастСров CSS, Ρ€ΠΈΡΡƒΡŽΡ‰ΠΈΡ… свои ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ. ΠœΡ‹ Π²ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡΡ ΠΈΡ… ΠΌΠ΅Ρ‚ΠΎΠ΄Π°ΠΌΠΈ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΎΠΊΡ€ΡƒΠ³Π»ΡƒΡŽ ΠΎΠ±Ρ€Π΅Π·ΠΊΡƒ. ΠœΡ‹ Π½Π΅ Π±ΡƒΠ΄Π΅ΠΌ Π·Π°Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Ρ‚ΡŒΡΡ здСсь Π½Π°Π΄ΠΎΠ»Π³ΠΎ, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ этот ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ ΠΊΠ°ΠΊ с ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹ΠΌΠΈ, Ρ‚Π°ΠΊ ΠΈ с Ρ„ΠΎΠ½ΠΎΠ²Ρ‹ΠΌΠΈ изобраТСниями, ΠΈ ΠΌΡ‹ ΡƒΠΆΠ΅ рассмотрСли ΠΈΡ….

Π‘ΠΌ. ΠΏΠ΅Ρ€ΠΎ 06. Ρ„ΠΎΠ½-ΠΊΠ»ΠΈΠΏ: тСкст Π“Π΅Ρ€ΠΌΠ°Π½Π° Π’Π΅Π±ΠΈΠ΅Π²Π° (@terbiy) Π½Π° КодПСнС.

ΠšΡ€Π°ΡΠΈΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ собаки Π²Ρ‹ΡˆΠ΅ ΠΈΠΌΠ΅Π΅Ρ‚ Π½Π΅ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΡƒΡŽ Ρ€Π°ΠΌΠΊΡƒ. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Ρ‚ΡŒ навСсти Π½Π° Π½Π΅Π³ΠΎ курсор ΠΈ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Π΅Ρ‚ Π½Π΅ Π½Π΅Π²ΠΈΠ΄ΠΈΠΌΡƒΡŽ ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΡƒΡŽ Π³Ρ€Π°Π½ΠΈΡ†Ρƒ, Π° Ρ€Π΅Π°Π»ΡŒΠ½ΡƒΡŽ.

Π­Ρ‚ΠΎ свойство CSS являСтся СдинствСнным Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ΠΌ, Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹ΠΌ для примСнСния ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎΠΉ ΠΎΠ±Ρ€Π΅Π·ΠΊΠΈ:

  . Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ класс {
  border-radius: <ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅>;
}  

Бинтаксис свойства border-radius слоТСн, ΠΈ я Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΡŽ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ…ΠΎΡ€ΠΎΡˆΠΈΠΉ справочник, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ½ΡΡ‚ΡŒ Π΅Π³ΠΎ Π»ΡƒΡ‡ΡˆΠ΅.

Π­Ρ‚Π° Ρ‚Π΅Ρ…Π½ΠΈΠΊΠ° самая слоТная срСди Π½Π°Π·Π²Π°Π½Π½Ρ‹Ρ… ΠΈ самая мощная. Π’ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, потрСбуСтся ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Π°Ρ ΡΡ‚Π°Ρ‚ΡŒΡ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΡ…Π²Π°Ρ‚ΠΈΡ‚ΡŒ всС Π΅Π³ΠΎ возмоТности. Или ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½ΡƒΡŽ ΠΊΠ½ΠΈΠ³Ρƒ, Ссли вас интСрСсуСт Ρ‚Π΅ΠΌΠ° SVG. ΠœΡ‹ рассмотрим Π΅Π³ΠΎ синтаксис, основноС использованиС ΠΈ рассмотрим нСсколько ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ².

Если Π²Ρ‹ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ΄ΡƒΠΌΠ°Π΅Ρ‚Π΅ ΠΎΠ± этом CSS-инструмСнтС, Ρ‚ΠΎ ΠΏΠΎΠΉΠΌΠ΅Ρ‚Π΅, Ρ‡Ρ‚ΠΎ Π² ΠΊΠ°ΠΊΠΎΠΌ-Ρ‚ΠΎ смыслС это СдинствСнный инструмСнт, Π½Π°Π·Π²Π°Π½Π½Ρ‹ΠΉ Π² этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ ΠΈ посвящСнный ΠΎΠ±Ρ€Π΅Π·ΠΊΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ. Π”Ρ€ΡƒΠ³ΠΈΠ΅ свойства CSS ΠΈΠΌΠ΅ΡŽΡ‚ ΠΏΠΎΠ±ΠΎΡ‡Π½Ρ‹ΠΉ эффСкт ΠΎΠ±Ρ€Π΅Π·ΠΊΠΈ β€” ΠΌΡ‹ Π²ΠΎΠΎΠ±Ρ‰Π΅ Π½Π΅ ΡƒΠ΄ΠΎΡΡƒΠΆΠΈΠ»ΠΈΡΡŒ ΠΈΡ… Ρ€Π°ΡΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ? ΠŸΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ эти свойства Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ доступнСС Π² использовании.ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, ΠΈΠ½ΠΎΠ³Π΄Π° ΠΊΠ°Π΄Ρ€ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π½ΡƒΠΆΠ½ΠΎ ΠΊΠ°ΠΊ ΠΏΠΎΠ±ΠΎΡ‡Π½Ρ‹ΠΉ эффСкт, Π° Π½Π΅ основной.

Π‘Π½Π°Ρ‡Π°Π»Π° рассмотрим синтаксис свойства clip-path :

  . clip-ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ {
  ΠΊΠ»ΠΈΠΏ-ΠΏΡƒΡ‚ΡŒ: <ΠΊΠ»ΠΈΠΏ-источник> | [ <базовая Ρ„ΠΎΡ€ΠΌΠ°> || <ΠΏΠΎΠ»Π΅ Π³Π΅ΠΎΠΌΠ΅Ρ‚Ρ€ΠΈΠΈ> ] | Π½ΠΈΠΊΡ‚ΠΎ
}  

ΠœΡ‹ исслСдуСм ΠΊΠ°ΠΆΠ΄ΡƒΡŽ ΠΎΡ‚ самой ΠΏΡ€ΠΈΠΌΠΈΡ‚ΠΈΠ²Π½ΠΎΠΉ Π΄ΠΎ самой слоТной.

Π½Π΅Ρ‚

ΠŸΡƒΡ‚ΡŒ отсСчСния Π½Π΅ создаСтся.

Базовая Ρ„ΠΎΡ€ΠΌΠ° ΠΈ гСомСтричСская ΠΊΠΎΡ€ΠΎΠ±ΠΊΠ°

Π­Ρ‚Π° Ρ‡Π°ΡΡ‚ΡŒ синтаксиса позволяСт Π½Π°ΠΌ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ с ΠΏΡ€Π΅Π΄ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΌ Π½Π°Π±ΠΎΡ€ΠΎΠΌ Ρ„ΠΈΠ³ΡƒΡ€.НСсмотря Π½Π° свои ограничСния, ΠΎΠ½ довольно ΠΌΠΎΡ‰Π½Ρ‹ΠΉ. Для Π±Π°Π·ΠΎΠ²ΠΎΠΉ Ρ„ΠΎΡ€ΠΌΡ‹ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ inset() , circle() , ellipse() , polygon() ΠΈΠ»ΠΈ path() . ПослСдний прСдоставляСт Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ синтаксис SVG для ΠΎΠ±Ρ€Π΅Π·ΠΊΠΈ.

ΠœΡ‹ ΠΌΠΎΠ³Π»ΠΈ Π±Ρ‹ ΠΎΠΏΡƒΡΡ‚ΠΈΡ‚ΡŒ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ гСомСтричСской ΠΊΠΎΡ€ΠΎΠ±ΠΊΠΈ . Π§Ρ‚ΠΎ ΠΆ, ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ ΠΈ ΠΏΡ€ΠΎΠΏΡƒΡΡ‚ΠΈΡ‚ΡŒ Π±Π°Π·ΠΎΠ²ΠΎΠΉ Ρ„ΠΎΡ€ΠΌΡ‹ . ΠŸΡ€ΠΈ использовании Π±Π»ΠΎΠΊΠ° Π³Π΅ΠΎΠΌΠ΅Ρ‚Ρ€ΠΈΠΈ Π²Ρ‹ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡ΠΈΠ²Π°Π΅Ρ‚Π΅ ΠΎΠ±Ρ€Π΅Π·ΠΊΡƒ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΉ ΠΎΠ±Π»Π°ΡΡ‚ΡŒΡŽ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€. g., padding-box ΠΈΠ»ΠΈ Π²Π΄ΠΎΡ…Π½ΠΎΠ²Π»Π΅Π½Π½Ρ‹ΠΉ SVG ΡˆΡ‚Ρ€ΠΈΡ…-бокс . Π― Π½Π΅ Π±ΡƒΠ΄Ρƒ ΠΏΡ€ΠΈΠ²ΠΎΠ΄ΠΈΡ‚ΡŒ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ примСнСния Π±Π»ΠΎΠΊΠ° Π³Π΅ΠΎΠΌΠ΅Ρ‚Ρ€ΠΈΠΈ . Если Π±Ρ‹ я попытался ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΎΠ±Ρ€Π°Π·Π΅Ρ†, ΠΌΠ½Π΅ Π±Ρ‹ ΠΏΠΎΡ‚Ρ€Π΅Π±ΠΎΠ²Π°Π»ΠΎΡΡŒ ΠΊΠ°ΠΊ ΠΌΠΈΠ½ΠΈΠΌΡƒΠΌ 42 ΠΈΠ· Π½ΠΈΡ….

Π’Π΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠ½ΡΡ‚ΡŒ, взглянув Π½Π° ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ свойства background-clip , прСдставлСнныС Π²Ρ‹ΡˆΠ΅.

Π‘ΠΌ. ΠΏΠ΅Ρ€ΠΎ 09. базовая Ρ„ΠΎΡ€ΠΌΠ° ΠΎΡ‚ Π“Π΅Ρ€ΠΌΠ°Π½Π° Π’Π΅Π±ΠΈΠ΅Π²Π° (@terbiy) Π½Π° КодПСнС.

ΠΊΠ»ΠΈΠΏ-источник

clip-source здСсь ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ CSS url() .Π‘ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ² Π½Π° ΠΌΠΎΠΌΠ΅Π½Ρ‚ написания ΡΡ‚Π°Ρ‚ΡŒΠΈ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ внСшниС SVG. Π§Ρ‚ΠΎ это Π·Π½Π°Ρ‡ΠΈΡ‚ для нас ΠΊΠ°ΠΊ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ²? Бинтаксис ΠΏΠΎΠ΄Ρ€Π°Π·ΡƒΠΌΠ΅Π²Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ Π³Π΄Π΅-Ρ‚ΠΎ Π² Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ΅ страницы Ρƒ вас Π΅ΡΡ‚ΡŒ элСмСнт , содСрТащий со ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹ΠΌ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ΠΎΠΌ . ΠŸΡ€Π°ΠΊΡ‚ΠΈΡ‡Π΅ΡΠΊΠΈ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅ΠΌΡ‹ΠΉ внСшний SVG β€” это ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹ΠΉ Ρ„Π°ΠΉΠ». ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, ΠΌΡ‹ помСстим Π²Π½ΡƒΡ‚Ρ€ΡŒ , ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ мСста Π²Π½ΡƒΡ‚Ρ€ΠΈ SVG, ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½Π½ΠΎΠ³ΠΎ для опрСдСлСния, Π½ΠΎ Π½Π΅ для рисования.Π‘ΠΌ. ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€:

Π‘ΠΌ. ΠΏΠ΅Ρ€ΠΎ 09. clip-path Π“Π΅Ρ€ΠΌΠ°Π½Π° Π’Π΅Π±ΠΈΠ΅Π²Π° (@terbiy) Π½Π° КодПСнС.

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°ΠΉΡ‚ΠΈ SVG, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ я использовал Π² HTML-части этого ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°. Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠΈΡ‚ элСмСнт с описаниСм Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎΠ³ΠΎ Π·ΠΈΠ³Π·Π°Π³Π° Π² свойствС d . На Π΄Π°Π½Π½Ρ‹ΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ‚ я Π±Ρ‹Π» ΠΎΡ‡Π΅Π½ΡŒ Π΄ΠΎΠ²ΠΎΠ»Π΅Π½, Π½ΠΎ CSS ΠΏΡ€Π΅Π²Π·ΠΎΡˆΠ΅Π» ΠΌΠΎΠΈ оТидания. ΠžΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ΡΡ, я ΠΌΠΎΠ³Ρƒ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎ ΠΎΠ±Ρ€Π΅Π·Π°Ρ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈ Π·Π°ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ тСкст Π²ΠΎΠΊΡ€ΡƒΠ³ Π½Π΅Π³ΠΎ ΠΎΡ‚Ρ€Π°ΠΆΠ°Ρ‚ΡŒ Π΅Π³ΠΎ Ρ„ΠΎΡ€ΠΌΡƒ. ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ этот ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ с ΠΏΠ»Π°Π²Π°ΡŽΡ‰ΠΈΠΌΠΈ элСмСнтами.ΠŸΠΎΡΠΌΠΎΡ‚Ρ€ΠΈΡ‚Π΅ Π½Π° ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€:

Π‘ΠΌ. ΠΏΠ΅Ρ€ΠΎ 10. shape-outside ΠΎΡ‚ Π“Π΅Ρ€ΠΌΠ°Π½Π° Π’Π΅Π±ΠΈΠ΅Π²Π° (@terbiy) Π½Π° КодПСнС.

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠ΄ΡƒΠΌΠ°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ Ρ„ΠΎΡ€ΠΌΠ° Π·Π° ΠΏΡ€Π΅Π΄Π΅Π»Π°ΠΌΠΈ β€” это нСпонятная ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΡΡ‚ΡŒ ΠΎΠ΄Π½ΠΎΠΉ ΠΈΠ· пСрвоклассных Π½ΠΎΡ‡Π½Ρ‹Ρ… сборок. Π― Ρ€Π°Π΄ Ρ€Π°Π·ΠΎΡ‡Π°Ρ€ΠΎΠ²Π°Ρ‚ΡŒ вас, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΌΡ‹ Ρ€Π°Π±ΠΎΡ‚Π°Π΅ΠΌ со Π·Ρ€Π΅Π»Ρ‹ΠΌ свойством CSS, ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅ΠΌΡ‹ΠΌ 94,61% доступных Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ². ΠŸΠ»ΠΎΡ…Π°Ρ Ρ‡Π°ΡΡ‚ΡŒ этого свойства Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ свой SVG для отсСчСния ΠΈΠ· ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰Π΅Π³ΠΎ шага. Π― Π΄ΡƒΠΌΠ°ΡŽ, Ρ‡Ρ‚ΠΎ ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»Ρ‹ CSSWG ΠΈ MDN вводят Π² Π·Π°Π±Π»ΡƒΠΆΠ΄Π΅Π½ΠΈΠ΅ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ доступности синтаксиса path β€” Π΅Π³ΠΎ Π½Π΅Ρ‚ Π½Π° Π²Π΅Π±-сайтС W3C, ΠΈ я Π½Π΅ смог Π½Π°ΠΉΡ‚ΠΈ Π΅Π³ΠΎ срСди ΠΊΠΎΠ΄Π° Π½Π° GitHub ΠΈΠ»ΠΈ Π·Π°ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Π΅Π³ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π² Firefox ΠΈΠ»ΠΈ Chrome. .ΠŸΠΎΠΆΠ°Π»ΡƒΠΉΡΡ‚Π°, слСдитС Π·Π° ΠΌΠΎΠ΅ΠΉ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠΎΠΉ, созданной Π² Ρ€Π΅ΠΏΠΎΠ·ΠΈΡ‚ΠΎΡ€ΠΈΠΈ MDN GitHub, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡Π°Ρ‚ΡŒ обновлСния расслСдования.

Π― Π²Ρ€ΡƒΡ‡Π½ΡƒΡŽ ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Π°Π» ΡƒΠΊΠ°Π·Π°Π½Π½ΠΎΠ΅ Π²Ρ‹ΡˆΠ΅ свойство SVG path ΠΈ использовал Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ polygon shape-outside . Π― Ρ‚Π°ΠΊΠΆΠ΅ использовал shape-margin: 1em , Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ свободноС пространство Π²ΠΎΠΊΡ€ΡƒΠ³ ΠΌΠΎΠ΅Π³ΠΎ изобраТСния для Π»ΡƒΡ‡ΡˆΠ΅Π³ΠΎ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ эффСкта. ΠŸΠΎΠΆΠ°Π»ΡƒΠΉΡΡ‚Π°, ΠΈΠ·ΡƒΡ‡ΠΈΡ‚Π΅ Ρ€Π°Π·Π΄Π΅Π» CSS ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° CodePen.

ΠžΠ±Ρ€Π΅Π·ΠΊΠ° ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS оказалась Π³ΠΎΡ€Π°Π·Π΄ΠΎ Π±ΠΎΠ»Π΅Π΅ ΡˆΠΈΡ€ΠΎΠΊΠΎΠΉ Ρ‚Π΅ΠΌΠΎΠΉ, Ρ‡Π΅ΠΌ я ΠΌΠΎΠ³ сСбС ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ.Если Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΠΎΠ±Ρ€Π΅Π·Π°Π½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π±Π΅Π· Π΄ΠΈΠ½Π°ΠΌΠΈΠΊΠΈ, я Π±Ρ‹ Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΠΎΠ²Π°Π» ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для этого ваши CDN API. Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π·Π°ΡΠ΅Π»ΠΈΡ‚ΡŒ сСрвСр, Π½ΠΎ это ΠΏΠΎΡ‚Ρ€Π΅Π±ΡƒΠ΅Ρ‚ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ обслуТивания, поэтому Π²Π·Π²Π΅ΡΡŒΡ‚Π΅ всС Π·Π° ΠΈ ΠΏΡ€ΠΎΡ‚ΠΈΠ². Если Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ вашС ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π±Ρ‹Π»ΠΎ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΌ ΠΈΠ»ΠΈ Π±ΠΎΠ³Π°Ρ‚Ρ‹ΠΌ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΌ интСрфСйсом, рассмотритС описанныС Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹ ΠΈ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ подходящий для Π²Π°ΡˆΠΈΡ… Π½ΡƒΠΆΠ΄. Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄Π΅Π»Π°Ρ‚ΡŒ Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ, Π±Π΅Π· спорных Ρ…Π°ΠΊΠΎΠ².

Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ с CSS Β· GitHub

Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ с CSS Β· GitHub

МгновСнно Π΄Π΅Π»ΠΈΡ‚Π΅ΡΡŒ ΠΊΠΎΠ΄ΠΎΠΌ, Π·Π°ΠΌΠ΅Ρ‚ΠΊΠ°ΠΌΠΈ ΠΈ Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚Π°ΠΌΠΈ.

АдаптивныС изобраТСния с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS

Π­Ρ‚ΠΎΡ‚ Ρ„Π°ΠΉΠ» содСрТит Π΄Π²ΡƒΠ½Π°ΠΏΡ€Π°Π²Π»Π΅Π½Π½Ρ‹ΠΉ тСкст Unicode, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΈΠ½Ρ‚Π΅Ρ€ΠΏΡ€Π΅Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ ΠΈΠ»ΠΈ скомпилирован Π½Π΅ Ρ‚Π°ΠΊ, ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½ΠΈΠΆΠ΅. Для просмотра ΠΎΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ Ρ„Π°ΠΉΠ» Π² Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π΅, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ скрытыС символы Unicode. Π£Π·Π½Π°ΠΉΡ‚Π΅ большС ΠΎ Π΄Π²ΡƒΠ½Π°ΠΏΡ€Π°Π²Π»Π΅Π½Π½Ρ‹Ρ… символах Unicode Π­Ρ‚ΠΎΡ‚ Ρ„Π°ΠΉΠ» содСрТит Π΄Π²ΡƒΠ½Π°ΠΏΡ€Π°Π²Π»Π΅Π½Π½Ρ‹ΠΉ тСкст Unicode, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΈΠ½Ρ‚Π΅Ρ€ΠΏΡ€Π΅Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ ΠΈΠ»ΠΈ скомпилирован Π½Π΅ Ρ‚Π°ΠΊ, ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½ΠΈΠΆΠ΅.Для просмотра ΠΎΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ Ρ„Π°ΠΉΠ» Π² Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π΅, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ скрытыС символы Unicode. Π£Π·Π½Π°ΠΉΡ‚Π΅ большС ΠΎ Π΄Π²ΡƒΠ½Π°ΠΏΡ€Π°Π²Π»Π΅Π½Π½Ρ‹Ρ… символах Unicode Π­Ρ‚ΠΎΡ‚ Ρ„Π°ΠΉΠ» содСрТит Π΄Π²ΡƒΠ½Π°ΠΏΡ€Π°Π²Π»Π΅Π½Π½Ρ‹ΠΉ тСкст Unicode, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΈΠ½Ρ‚Π΅Ρ€ΠΏΡ€Π΅Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ ΠΈΠ»ΠΈ скомпилирован Π½Π΅ Ρ‚Π°ΠΊ, ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½ΠΈΠΆΠ΅. Для просмотра ΠΎΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ Ρ„Π°ΠΉΠ» Π² Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π΅, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ скрытыС символы Unicode. Π£Π·Π½Π°ΠΉΡ‚Π΅ большС ΠΎ Π΄Π²ΡƒΠ½Π°ΠΏΡ€Π°Π²Π»Π΅Π½Π½Ρ‹Ρ… символах Unicode Π­Ρ‚ΠΎΡ‚ Ρ„Π°ΠΉΠ» содСрТит Π΄Π²ΡƒΠ½Π°ΠΏΡ€Π°Π²Π»Π΅Π½Π½Ρ‹ΠΉ тСкст Unicode, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΈΠ½Ρ‚Π΅Ρ€ΠΏΡ€Π΅Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ ΠΈΠ»ΠΈ скомпилирован Π½Π΅ Ρ‚Π°ΠΊ, ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½ΠΈΠΆΠ΅. Для просмотра ΠΎΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ Ρ„Π°ΠΉΠ» Π² Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π΅, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ скрытыС символы Unicode. Π£Π·Π½Π°ΠΉΡ‚Π΅ большС ΠΎ Π΄Π²ΡƒΠ½Π°ΠΏΡ€Π°Π²Π»Π΅Π½Π½Ρ‹Ρ… символах Unicode Π­Ρ‚ΠΎΡ‚ Ρ„Π°ΠΉΠ» содСрТит Π΄Π²ΡƒΠ½Π°ΠΏΡ€Π°Π²Π»Π΅Π½Π½Ρ‹ΠΉ тСкст Unicode, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΈΠ½Ρ‚Π΅Ρ€ΠΏΡ€Π΅Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ ΠΈΠ»ΠΈ скомпилирован Π½Π΅ Ρ‚Π°ΠΊ, ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½ΠΈΠΆΠ΅. Для просмотра ΠΎΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ Ρ„Π°ΠΉΠ» Π² Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π΅, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ скрытыС символы Unicode. Π£Π·Π½Π°ΠΉΡ‚Π΅ большС ΠΎ Π΄Π²ΡƒΠ½Π°ΠΏΡ€Π°Π²Π»Π΅Π½Π½Ρ‹Ρ… символах Unicode Π­Ρ‚ΠΎΡ‚ Ρ„Π°ΠΉΠ» содСрТит Π΄Π²ΡƒΠ½Π°ΠΏΡ€Π°Π²Π»Π΅Π½Π½Ρ‹ΠΉ тСкст Unicode, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΈΠ½Ρ‚Π΅Ρ€ΠΏΡ€Π΅Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ ΠΈΠ»ΠΈ скомпилирован Π½Π΅ Ρ‚Π°ΠΊ, ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½ΠΈΠΆΠ΅.Для просмотра ΠΎΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ Ρ„Π°ΠΉΠ» Π² Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π΅, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ скрытыС символы Unicode. Π£Π·Π½Π°ΠΉΡ‚Π΅ большС ΠΎ Π΄Π²ΡƒΠ½Π°ΠΏΡ€Π°Π²Π»Π΅Π½Π½Ρ‹Ρ… символах Unicode Π­Ρ‚ΠΎΡ‚ Ρ„Π°ΠΉΠ» содСрТит Π΄Π²ΡƒΠ½Π°ΠΏΡ€Π°Π²Π»Π΅Π½Π½Ρ‹ΠΉ тСкст Unicode, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΈΠ½Ρ‚Π΅Ρ€ΠΏΡ€Π΅Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ ΠΈΠ»ΠΈ скомпилирован Π½Π΅ Ρ‚Π°ΠΊ, ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½ΠΈΠΆΠ΅. Для просмотра ΠΎΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ Ρ„Π°ΠΉΠ» Π² Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π΅, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ скрытыС символы Unicode. Π£Π·Π½Π°ΠΉΡ‚Π΅ большС ΠΎ Π΄Π²ΡƒΠ½Π°ΠΏΡ€Π°Π²Π»Π΅Π½Π½Ρ‹Ρ… символах Unicode Π­Ρ‚ΠΎΡ‚ Ρ„Π°ΠΉΠ» содСрТит Π΄Π²ΡƒΠ½Π°ΠΏΡ€Π°Π²Π»Π΅Π½Π½Ρ‹ΠΉ тСкст Unicode, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΈΠ½Ρ‚Π΅Ρ€ΠΏΡ€Π΅Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ ΠΈΠ»ΠΈ скомпилирован Π½Π΅ Ρ‚Π°ΠΊ, ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½ΠΈΠΆΠ΅.Для просмотра ΠΎΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ Ρ„Π°ΠΉΠ» Π² Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π΅, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ скрытыС символы Unicode. Π£Π·Π½Π°ΠΉΡ‚Π΅ большС ΠΎ Π΄Π²ΡƒΠ½Π°ΠΏΡ€Π°Π²Π»Π΅Π½Π½Ρ‹Ρ… символах Unicode Π­Ρ‚ΠΎΡ‚ Ρ„Π°ΠΉΠ» содСрТит Π΄Π²ΡƒΠ½Π°ΠΏΡ€Π°Π²Π»Π΅Π½Π½Ρ‹ΠΉ тСкст Unicode, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΈΠ½Ρ‚Π΅Ρ€ΠΏΡ€Π΅Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ ΠΈΠ»ΠΈ скомпилирован Π½Π΅ Ρ‚Π°ΠΊ, ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½ΠΈΠΆΠ΅. Для просмотра ΠΎΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ Ρ„Π°ΠΉΠ» Π² Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π΅, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ скрытыС символы Unicode. Π£Π·Π½Π°ΠΉΡ‚Π΅ большС ΠΎ Π΄Π²ΡƒΠ½Π°ΠΏΡ€Π°Π²Π»Π΅Π½Π½Ρ‹Ρ… символах Unicode Π­Ρ‚ΠΎΡ‚ Ρ„Π°ΠΉΠ» содСрТит Π΄Π²ΡƒΠ½Π°ΠΏΡ€Π°Π²Π»Π΅Π½Π½Ρ‹ΠΉ тСкст Unicode, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΈΠ½Ρ‚Π΅Ρ€ΠΏΡ€Π΅Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ ΠΈΠ»ΠΈ скомпилирован Π½Π΅ Ρ‚Π°ΠΊ, ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½ΠΈΠΆΠ΅. Для просмотра ΠΎΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ Ρ„Π°ΠΉΠ» Π² Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π΅, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ скрытыС символы Unicode. Π£Π·Π½Π°ΠΉΡ‚Π΅ большС ΠΎ Π΄Π²ΡƒΠ½Π°ΠΏΡ€Π°Π²Π»Π΅Π½Π½Ρ‹Ρ… символах Unicode Π­Ρ‚ΠΎΡ‚ Ρ„Π°ΠΉΠ» содСрТит Π΄Π²ΡƒΠ½Π°ΠΏΡ€Π°Π²Π»Π΅Π½Π½Ρ‹ΠΉ тСкст Unicode, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΈΠ½Ρ‚Π΅Ρ€ΠΏΡ€Π΅Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ ΠΈΠ»ΠΈ скомпилирован Π½Π΅ Ρ‚Π°ΠΊ, ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½ΠΈΠΆΠ΅. Для просмотра ΠΎΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ Ρ„Π°ΠΉΠ» Π² Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π΅, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ скрытыС символы Unicode. Π£Π·Π½Π°ΠΉΡ‚Π΅ большС ΠΎ Π΄Π²ΡƒΠ½Π°ΠΏΡ€Π°Π²Π»Π΅Π½Π½Ρ‹Ρ… символах Unicode Π­Ρ‚ΠΎΡ‚ Ρ„Π°ΠΉΠ» содСрТит Π΄Π²ΡƒΠ½Π°ΠΏΡ€Π°Π²Π»Π΅Π½Π½Ρ‹ΠΉ тСкст Unicode, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΈΠ½Ρ‚Π΅Ρ€ΠΏΡ€Π΅Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ ΠΈΠ»ΠΈ скомпилирован Π½Π΅ Ρ‚Π°ΠΊ, ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½ΠΈΠΆΠ΅.Для просмотра ΠΎΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ Ρ„Π°ΠΉΠ» Π² Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π΅, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ скрытыС символы Unicode. Π£Π·Π½Π°ΠΉΡ‚Π΅ большС ΠΎ Π΄Π²ΡƒΠ½Π°ΠΏΡ€Π°Π²Π»Π΅Π½Π½Ρ‹Ρ… символах Unicode Π­Ρ‚ΠΎΡ‚ Ρ„Π°ΠΉΠ» содСрТит Π΄Π²ΡƒΠ½Π°ΠΏΡ€Π°Π²Π»Π΅Π½Π½Ρ‹ΠΉ тСкст Unicode, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΈΠ½Ρ‚Π΅Ρ€ΠΏΡ€Π΅Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ ΠΈΠ»ΠΈ скомпилирован Π½Π΅ Ρ‚Π°ΠΊ, ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½ΠΈΠΆΠ΅. Для просмотра ΠΎΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ Ρ„Π°ΠΉΠ» Π² Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π΅, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ скрытыС символы Unicode. Π£Π·Π½Π°ΠΉΡ‚Π΅ большС ΠΎ Π΄Π²ΡƒΠ½Π°ΠΏΡ€Π°Π²Π»Π΅Π½Π½Ρ‹Ρ… символах Unicode Π’Ρ‹ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ это дСйствиС Π² Π΄Π°Π½Π½Ρ‹ΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ‚.Π’Ρ‹ вошли Π² Π΄Ρ€ΡƒΠ³ΡƒΡŽ Π²ΠΊΠ»Π°Π΄ΠΊΡƒ ΠΈΠ»ΠΈ ΠΎΠΊΠ½ΠΎ. ΠŸΠ΅Ρ€Π΅Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ±Π½ΠΎΠ²ΠΈΡ‚ΡŒ сСанс. Π’Ρ‹ Π²Ρ‹ΡˆΠ»ΠΈ Π½Π° Π΄Ρ€ΡƒΠ³ΠΎΠΉ Π²ΠΊΠ»Π°Π΄ΠΊΠ΅ ΠΈΠ»ΠΈ Π² Π΄Ρ€ΡƒΠ³ΠΎΠΌ ΠΎΠΊΠ½Π΅. ΠŸΠ΅Ρ€Π΅Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ±Π½ΠΎΠ²ΠΈΡ‚ΡŒ сСанс.

Π’Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π½Π° Π²Π΅Π±-сайтС с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ HTML ΠΈ CSS

HTML ΠΈ CSS ΠΌΠΎΠ³ΡƒΡ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ для выравнивания ΠΈ плавания ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π½Π° вашСм Π²Π΅Π±-сайтС. Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ ΠΌΡ‹ ΠΏΠΎΠΊΠ°ΠΆΠ΅ΠΌ Π²Π°ΠΌ, ΠΊΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ HTML для выравнивания ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ ΠΏΠΎ тСксту (ΠΈΠ»ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠΌ элСмСнтам страницы) ΠΈ ΠΊΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ CSS для выравнивания ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, обтСкая ΠΈΡ… тСкстом, ΠΊΠ°ΠΊ Π²Ρ‹ Π²ΠΈΠ΄ΠΈΡ‚Π΅ Π² Π³Π°Π·Π΅Ρ‚Π΅ ΠΈΠ»ΠΈ ΠΆΡƒΡ€Π½Π°Π».

ΠŸΡ€Π΅ΠΆΠ΄Π΅ Ρ‡Π΅ΠΌ ΠΌΡ‹ углубимся Π² ΠΊΠΎΠ΄, Π΄Π°Π²Π°ΠΉΡ‚Π΅ посмотрим Π½Π° Ρ€Π°Π·Π½ΠΈΡ†Ρƒ ΠΌΠ΅ΠΆΠ΄Ρƒ Π²Ρ‹Ρ€ΠΎΠ²Π½Π΅Π½Π½Ρ‹ΠΌΠΈ ΠΈ ΠΏΠ»Π°Π²Π°ΡŽΡ‰ΠΈΠΌΠΈ изобраТСниями.

  • Π’Ρ‹Ρ€ΠΎΠ²Π½Π΅Π½Π½Ρ‹Π΅ изобраТСния: Β ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ изобраТСния, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅ слСва, ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ ΠΈΠ»ΠΈ справа. ВСкст Π½Π΅ ΠΎΠ±Ρ‚Π΅ΠΊΠ°Π΅Ρ‚ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, Π° размСщаСтся Π΄ΠΎ ΠΈΠ»ΠΈ послС Π½Π΅Π³ΠΎ (Π² Π²ΠΈΠ΄Π΅ Π±Π»ΠΎΠΊΠ°), Π² зависимости ΠΎΡ‚ Π²Ρ‹Π±Ρ€Π°Π½Π½ΠΎΠ³ΠΎ выравнивания.
  • ΠŸΠ»Π°Π²Π°ΡŽΡ‰ΠΈΠ΅ изобраТСния: ΠΊΠΎΠ³Π΄Π° ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠ»Π°Π²Π°Π΅Ρ‚, тСкст ΠΎΠ±Ρ‚Π΅ΠΊΠ°Π΅Ρ‚ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π»Π΅Π³ΠΊΠΎ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ ΠΏΡ€Π°Π²ΠΈΠ»Π° CSS, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ±Π΅ΡΠΏΠ΅Ρ‡ΠΈΡ‚ΡŒ достаточноС пустоС пространство Π²ΠΎΠΊΡ€ΡƒΠ³ изобраТСния.ΠŸΠ»Π°Π²Π°ΡŽΡ‰ΠΈΠ΅ ΠΏΡ€Π°Π²ΠΈΠ»Π° Ρ‚Π°ΠΊΠΆΠ΅ часто ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ для размСщСния ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π² Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹Π΅ ряды, ΠΊΠ°ΠΊ это происходит с галСрСями ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ ΠΈ сСлСкторами эскизов.

Π‘Π½Π°Ρ‡Π°Π»Π° ΠΌΡ‹ рассмотрим шаги ΠΏΠΎ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΡŽ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ HTML, Π° Π·Π°Ρ‚Π΅ΠΌ ΠΏΠΎΠΊΠ°ΠΆΠ΅ΠΌ, ΠΊΠ°ΠΊ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒ изобраТСния с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS.

Π’Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ изобраТСния HTML

Π’Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚Π΅ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ дСйствия, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ, Ρ†Π΅Π½Ρ‚Ρ€Ρƒ ΠΈΠ»ΠΈ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π²Π΅Π±-страницы.

Π’Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ ΠΊΠΎΠ΄ HTML, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ:

jpg" Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅="Π²Π»Π΅Π²ΠΎ">

Как Π²ΠΈΠ΄ΠΈΡ‚Π΅, ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π²Ρ‹Ρ€ΠΎΠ²Π½Π΅Π½ΠΎ ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ, Π° тСкст отобраТаСтся справа.

Π’Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ

Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ этот HTML-ΠΊΠΎΠ΄, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ справа ΠΎΡ‚ тСкста:

Π’Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ

Π§Ρ‚ΠΎΠ±Ρ‹ Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π² тСкст, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ ΠΊΠΎΠ΄:

Π­Ρ‚ΠΎΡ‚ ΠΊΠΎΠ΄ Π±ΡƒΠ΄Π΅Ρ‚ Π²ΡΡ‚Π°Π²Π»ΡΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π² Π°Π±Π·Π°Ρ†Ρ‹, Π½ΠΎ это Π½Π΅ ΠΎΡ‡Π΅Π½ΡŒ чистый ΠΌΠ°ΠΊΠ΅Ρ‚.

Π’Π΅Ρ€Ρ…Π½Π΅Π΅ ΠΈ Π½ΠΈΠΆΠ½Π΅Π΅ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅

Наряду с Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ, ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ ΠΈ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎ Π²Π΅Ρ€Ρ…Π½Π΅ΠΌΡƒ ΠΈ Π½ΠΈΠΆΠ½Π΅ΠΌΡƒ ΠΊΡ€Π°ΡŽ для опрСдСлСния располоТСния тСкста ΠΈ изобраТСния.

ΠŸΡ€ΠΈ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠΈ ΠΏΠΎ Π²Π΅Ρ€Ρ…Π½Π΅ΠΌΡƒ ΠΊΡ€Π°ΡŽ ΠΎΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΠΊΠ°ΠΊ тСкст Sed feugiat tincidunt Tellus выравниваСтся с Π²Π΅Ρ€Ρ…Π½ΠΈΠΌ ΠΏΡ€Π°Π²Ρ‹ΠΌ ΡƒΠ³Π»ΠΎΠΌ изобраТСния.

ΠŸΡ€ΠΈ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠΈ ΠΏΠΎ Π½ΠΈΠΆΠ½Π΅ΠΌΡƒ ΠΊΡ€Π°ΡŽ Ρ‚ΠΎΡ‚ ΠΆΠ΅ тСкст вмСсто этого выравниваСтся ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ Π½ΠΈΠΆΠ½Π΅ΠΌΡƒ ΠΊΡ€Π°ΡŽ изобраТСния.

Π’ Ρ‚ΠΎ врСмя ΠΊΠ°ΠΊ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ HTML ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ для Π±Π°Π·ΠΎΠ²Ρ‹Ρ… ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ², ΠΏΠ»Π°Π²Π°ΡŽΡ‰ΠΈΠ΅ изобраТСния с ΠΊΠΎΠ΄ΠΎΠΌ CSS ΠΌΠΎΠ³ΡƒΡ‚ ΠΎΠ±Π΅ΡΠΏΠ΅Ρ‡ΠΈΡ‚ΡŒ Π±ΠΎΠ»ΡŒΡˆΡƒΡŽ Π³ΠΈΠ±ΠΊΠΎΡΡ‚ΡŒ.

ΠŸΠ»Π°Π²Π°ΡŽΡ‰ΠΈΠ΅ изобраТСния CSS

Π’Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚Π΅ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ дСйствия, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒ изобраТСния Π½Π° вашСм Π²Π΅Π±-сайтС Π²ΠΏΡ€Π°Π²ΠΎ ΠΈΠ»ΠΈ Π²Π»Π΅Π²ΠΎ ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Β«Π½Π΅ ΠΏΠ»Π°Π²Π°Ρ‚ΡŒΒ» ΠΈΠ»ΠΈ Β«ΠΎΡ‡ΠΈΡΡ‚ΠΈΡ‚ΡŒΒ».

ΠŸΠ»Π°Π²Π°ΡŽΡ‰ΠΈΠ΅ изобраТСния справа с пСрСносом тСкста

Π’ этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΌΡ‹ Π²ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌ Ρ‚Π΅Π³ изобраТСния Π² наш HTML-Ρ„Π°ΠΉΠ», Π½ΠΎ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΡ†ΠΈΡ€ΡƒΠ΅ΠΌ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€Π° (Β«hpΒ»).

Код форматирования вызываСтся ΠΈΠ· ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ Ρ„Π°ΠΉΠ»Π° CSS, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ float:right , Π° Ρ‚Π°ΠΊΠΆΠ΅ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π»Ρ‹, любСзно прСдоставлСнныС ΠΏΡ€Π°Π²ΠΈΠ»ΠΎΠΌ margin .

 # л.с.  {
ΠΏΠΎΠΏΠ»Π°Π²ΠΎΠΊ: справа;
 полС: 0 0 0 15 пиксСлСй;
} 

Как Π²ΠΈΠ΄ΠΈΡ‚Π΅, ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠ²ΡˆΠΈΠΉΡΡ ΠΌΠ°ΠΊΠ΅Ρ‚ Π±ΠΎΠ»Π΅Π΅ Π°ΠΊΠΊΡƒΡ€Π°Ρ‚Π½Ρ‹ΠΉ, с пСрСносом тСкста ΠΏΠΎΠ΄ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ.

ΠžΡΡ‚Π°Π»ΠΈΡΡŒ ΠΏΠ»Π°Π²Π°ΡŽΡ‰ΠΈΠ΅ изобраТСния с пСрСносом тСкста

Если ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ ΠΏΠΎΠΌΠ΅Ρ‡Π΅Π½ΠΎ Π² HTML-Ρ„Π°ΠΉΠ»Π΅, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ просто ΠΎΡ‚Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ CSS, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΡΠΊΡΠΏΠ΅Ρ€ΠΈΠΌΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ с Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π½Ρ‹ΠΌΠΈ ΠΌΠ°ΠΊΠ΅Ρ‚Π°ΠΌΠΈ.

 # л.с.  {
ΠΏΠ»Ρ‹Ρ‚ΡŒ Π½Π°Π»Π΅Π²ΠΎ;
 полС: 0 15 пиксСлСй 0 0;
} 

Π‘Π΅Π· ΠΏΠΎΠΏΠ»Π°Π²ΠΊΠ°

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ float:none для отобраТСния изобраТСния Π² тСкстС Π±Π΅Π· пСрСноса. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ ΠΏΠΎΠ»Π΅ΠΉ (ΠΏΡ€ΠΈ ΠΆΠ΅Π»Π°Π½ΠΈΠΈ) для ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π»ΠΎΠ².

 # л.с.  {
ΠΏΠΎΠΏΠ»Π°Π²ΠΎΠΊ: Π½Π΅Ρ‚;
 полС: 0 15 пиксСлСй 0 0;
} 

ΠžΡ‡ΠΈΡΡ‚ΠΊΠ° ΠΏΠΎΠΏΠ»Π°Π²ΠΊΠΎΠ²

ΠŸΡ€ΠΈ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π²Π°ΠΆΠ½ΠΎ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ очистки.ΠŸΠ»Π°Π²Π°ΡŽΡ‰ΠΈΠ΅ изобраТСния (ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ Π²Π΅Π±-элСмСнты) Π±ΡƒΠ΄ΡƒΡ‚ Π½Π°ΠΊΠ»Π°Π΄Ρ‹Π²Π°Ρ‚ΡŒΡΡ Π΄Ρ€ΡƒΠ³ Π½Π° Π΄Ρ€ΡƒΠ³Π°, Ссли Π²Ρ‹ Π½Π΅ «очиститС» ΠΏΠ»Π°Π²Π°ΡŽΡ‰ΠΈΠ΅ элСмСнты. ΠžΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ очистки послС ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Ρ€Π°Π·Π΄Π΅Π»Π°, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ ΠΏΠ»Π°Π²Π°Π΅Ρ‚ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅.

Π’ этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ Ρƒ нас Π΅ΡΡ‚ΡŒ Π΄Π²Π° Ρ€Π°Π·Π΄Π΅Π»Π° (с использованиСм Ρ‚Π΅Π³ΠΎΠ² div ), ΠΎΠ΄ΠΈΠ½ ΠΈΠ· ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… содСрТит ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, Π° Π²Ρ‚ΠΎΡ€ΠΎΠΉ содСрТит ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ тСкст ΠΈ ΠΊΡ€Π°ΡΠ½ΡƒΡŽ Ρ€Π°ΠΌΠΊΡƒ. ΠŸΠ΅Ρ€Π²Π°Ρ сСкция позиционируСтся с использованиСм ΠΏΡ€Π°Π²ΠΈΠ»Π° float:left , ΠΈ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²ΠΈΠ΄Π΅Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ ΠΎΠ½Π° ΠΏΠ΅Ρ€Π΅ΠΊΡ€Ρ‹Π²Π°Π΅Ρ‚ Π²Ρ‚ΠΎΡ€ΡƒΡŽ ΡΠ΅ΠΊΡ†ΠΈΡŽ.

ΠŸΠ΅Ρ€Π΅ΠΊΡ€Ρ‹Ρ‚ΠΈΠ΅ происходит ΠΈΠ·-Π·Π° Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ ΠΌΡ‹ Π½Π΅ использовали ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ очистки.ΠŸΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚Π΅ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π΅ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ CSS ΠΊΠΎ Π²Ρ‚ΠΎΡ€ΠΎΠΌΡƒ элСмСнту div:

.
 .div2Β {
Π³Ρ€Π°Π½ΠΈΡ†Π°: 1 пиксСль, сплошной красный Ρ†Π²Π΅Ρ‚;
ясно: оба;
} 

Β 

Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²ΠΈΠ΄Π΅Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ Π΄Π²Π΅ сСкции большС Π½Π΅ ΠΏΠ΅Ρ€Π΅ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‚ΡΡ. ΠŸΡ€Π°Π²ΠΈΠ»ΠΎ очистки ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ с нСсколькими значСниями:

  • Π½Π΅Ρ‚ – позволяСт ΠΏΠ»Π°Π²Π°ΡŽΡ‰ΠΈΠ΅ элСмСнты с ΠΎΠ±Π΅ΠΈΡ… сторон.
  • слСва – ΠΏΠ»Π°Π²Π°ΡŽΡ‰ΠΈΠ΅ элСмСнты слСва Π·Π°ΠΏΡ€Π΅Ρ‰Π΅Π½Ρ‹.
  • справа – с ΠΏΡ€Π°Π²ΠΎΠΉ стороны Π½Π΅ Π΄ΠΎΠΏΡƒΡΠΊΠ°ΡŽΡ‚ΡΡ ΠΏΠ»Π°Π²Π°ΡŽΡ‰ΠΈΠ΅ элСмСнты.
  • ΠΎΠ±Π° – ΠΏΠ»Π°Π²Π°ΡŽΡ‰ΠΈΠ΅ элСмСнты Π½Π΅ Π΄ΠΎΠΏΡƒΡΠΊΠ°ΡŽΡ‚ΡΡ с ΠΎΠ±Π΅ΠΈΡ… сторон.
  • Π½Π°ΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚ΡŒ β€” наслСдуСт чистоС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ своСго родитСля.

ΠŸΠΎΡΠΊΡΠΏΠ΅Ρ€ΠΈΠΌΠ΅Π½Ρ‚ΠΈΡ€ΡƒΠΉΡ‚Π΅ с ΠΏΡ€Π°Π²ΠΈΠ»Π°ΠΌΠΈ CSS, Ρ‚Π°ΠΊΠΈΠΌΠΈ ΠΊΠ°ΠΊ float ΠΈ clear , ΠΈ вскорС Π²Ρ‹ освоитС Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ ΠΈ Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½Π½Ρ‹Π΅ ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ страниц.

Если Π²Π°ΠΌ Π½ΡƒΠΆΠ½Π° ΠΏΠΎΠΌΠΎΡ‰ΡŒ с вашСй ΡƒΡ‡Π΅Ρ‚Π½ΠΎΠΉ записью HostPapa, ΠΎΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ заявку Π² слуТбу ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΈ Π½Π° ΠΏΠ°Π½Π΅Π»ΠΈ управлСния.

34 Pure CSS Image Gallery


ΠœΡ‹ Ρ…ΠΎΡ‚ΠΈΠΌ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ Π½Π°ΡˆΡƒ ΠΏΠΎΠ΄Π±ΠΎΡ€ΠΊΡƒ ΠΊΠΎΠ΄ΠΎΠ² CSS Gallery ΠΈΠ· codenpen.Π’Ρ‹ ΠΊΠΎΠ³Π΄Π°-Π½ΠΈΠ±ΡƒΠ΄ΡŒ ΡΠ»Ρ‹ΡˆΠ°Π»ΠΈ ΠΎ Π³Π°Π»Π΅Ρ€Π΅Π΅ CSS? Π’Ρ‹ Π·Π½Π°Π΅Ρ‚Π΅, ΠΊΠ°ΠΊ ΠΎΠ½ΠΈ Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚? ΠŸΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΊΡ€ΡƒΡ‚ΠΎΠΉ сайт заслуТиваСт своСй собствСнной Π³Π°Π»Π΅Ρ€Π΅ΠΈ.

ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ эти Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Π΅ Π³Π°Π»Π΅Ρ€Π΅ΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ ΠΏΠΎΡ‚Ρ€ΡΡΠ°ΡŽΡ‰ΠΈΠΌ Π²ΠΈΠ΄Π΅ΠΎΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ΠΎΠΌ ΠΈ изобраТСниями с ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌΠΈ вашСго ΠΏΠΎΡ€Ρ‚Π°Π»Π°. КаТдая галСрСя ΠΈΠΌΠ΅Π΅Ρ‚ ряд настраиваСмых Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ со ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹ΠΌΠΈ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π°ΠΌΠΈ.

Π›ΡƒΡ‡ΡˆΠΈΠΉ ΠΊΠΎΠ΄ CSS-Π³Π°Π»Π΅Ρ€Π΅ΠΈ с ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°ΠΌΠΈ
Grid CSS Gallery
  Автор  : iGadget
  Π Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π½ΠΎ  с использованиСм HTML ΠΈ CSS 
ГалСрСя 3D CSS
  Автор  : Peter Westendorp
  Π Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π½ΠΎ  с использованиСм HTML, CSS ΠΈ JS 
ГалСрСя Simple HTML CSS
  Автор  : Jdias
  Π Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π½ΠΎ  с использованиСм HTML ΠΈ CSS 
ГалСрСя CSS
  Автор  : Ana Travas
  Π Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π½ΠΎ  с использованиСм HTML ΠΈ CSS 
CSS Gallery Hover Effect
  Автор  : Sasha
  Π Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π½ΠΎ  с использованиСм HTML ΠΈ CSS 
ΠœΠΎΡ‰Π½Π°Ρ CSS-галСя
  Автор  : Π›ΡŽΠ΄ΠΌΠΈΠ»Π° Π’Ρ€Π΅Ρ‚ΡŒΡΠΊΠΎΠ²Π°
  Π Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π½ΠΎ  с использованиСм HTML ΠΈ CSS 
ГалСрСя CSS – Drop Spread Blur
  Автор  : YCW
  Π Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π½ΠΎ  с использованиСм HTML ΠΈ CSS 
Lovely CSS Image Gallery
  Автор  : Remi Robichet
  Π Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π½ΠΎ  с использованиСм HTML ΠΈ CSS 
ГалСрСя ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Slide CSS
  Автор  : ΠŸΠ°Ρ‚Ρ€ΠΈΠΊ ΠœΠ°ΠΊΠΌΠ΅Ρ€Ρ„ΠΈ
  Π Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π½ΠΎ  с использованиСм HTML ΠΈ CSS 
ГалСрСя Pure CSS
  Автор  : Jens Grochtdreis
  Π Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π½ΠΎ  с использованиСм HTML ΠΈ CSS 
Адаптивная галСрСя CSS
  Автор  : Daniel Subat
  Π Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π½ΠΎ  с использованиСм HTML ΠΈ CSS 
ГалСрСя Pure CSS Codepen
  Автор  : MD Ashik
  Π Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π½ΠΎ  с использованиСм HTML ΠΈ CSS 
Лайтбокс ГалСрСя CSS
  Автор  : Nebo
  Π Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π½ΠΎ  с использованиСм HTML ΠΈ CSS 
Pure CSS Gallery Hover Effect
  Автор  : Nicolas Udy
  Π Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π½ΠΎ  с использованиСм HTML ΠΈ CSS 
Адаптивная галСрСя Pure CSS
  Автор  : Jhey
  Π Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π½ΠΎ  с использованиСм HTML ΠΈ CSS 
ГалСрСя Pure CSS Π½Π° сСтках
  Автор  : Yoksel
  Π Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π½ΠΎ  с использованиСм HTML ΠΈ CSS 
ГалСрСя Pretty 3D CSS
  Автор  : UnderscoDe
  Π Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π½ΠΎ  с использованиСм HTML ΠΈ CSS 
Fancy CSS Gallery
  Автор  : Shak Daniel
  Π Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π½ΠΎ  с использованиСм HTML ΠΈ CSS 
ГалСрСя ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π½Π° чистом CSS
  Автор  : Π­Π½Π΄Ρ€ΡŽ ΠšΡ€ΡƒΠΊ
  Π Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π½ΠΎ  с использованиСм HTML ΠΈ CSS 
ГалСрСя Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Codepen
  Автор  : Mert Cukuren
  Π Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π½ΠΎ  с использованиСм HTML ΠΈ CSS 
ГалСрСя Pure CSS ΠžΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ ΠΈ Π·Π°ΠΊΡ€Ρ‹Ρ‚ΡŒ
  Автор  : Panikaro
  Π Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π½ΠΎ  с использованиСм HTML ΠΈ CSS 
CSS Grid Gallery
  Автор  : Sean
  Π Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π½ΠΎ  с использованиСм HTML ΠΈ CSS 
Pure ГалСрСя ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ CSS Lightbox
  Автор  : Alexandre CMC Souza
  Π Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π½ΠΎ  с использованиСм HTML ΠΈ CSS 
ГалСрСя ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ CSS
  Автор  : ΠœΠ΅Π»ΠΈΡ‚Π°
  Π Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π½ΠΎ  с использованиСм HTML ΠΈ CSS 
ГалСрСя CSS
  Автор  : YCW
  Π Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π½ΠΎ  с использованиСм HTML ΠΈ CSS 
ГалСрСя CSS с использованиСм Clip
  Автор  : Sussie Casasola
  Π Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π½ΠΎ  с использованиСм HTML ΠΈ CSS 
Image Reflect CSS Gallery
  Автор  : Jesse Couch
  Π Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π½ΠΎ  с использованиСм HTML ΠΈ CSS 
ГалСрСя ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ CSS
  Автор  : Axel
  Π Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π½ΠΎ  с использованиСм HTML ΠΈ CSS 
Адаптивная сСтка CSS ГалСрСя
  Автор  : Vhanla
  Π Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π½ΠΎ  с использованиСм HTML, CSS ΠΈ JS 
CSS ГалСрСя РСшСниС ΠΏΠΎ Π½Π°Π·Π½Π°Ρ‡Π΅Π½ΠΈΡŽ
  Автор  : Nityanand Siddharth Maddali
  Π Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π½ΠΎ  с использованиСм HTML ΠΈ CSS 
ГалСрСя ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ HTML Код CSS
  Автор  : YCW
  Π Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π½ΠΎ  с использованиСм HTML, CSS ΠΈ JavaScript 
НалоТСниС Π³Π°Π»Π΅Ρ€Π΅ΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ CSS
  Автор  : Julie Park
  Π Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π½ΠΎ  с использованиСм HTML, CSS ΠΈ JS 
ГалСрСя Codepen
  Автор  : Wannle
  Π Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π½ΠΎ  с использованиСм HTML, CSS ΠΈ JS 
ГалСрСя ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Codepen
  Автор  : YCW
  Π Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π½ΠΎ  с использованиСм HTML, CSS ΠΈ JS 

МоС ΠΏΡƒΡ‚Π΅ΡˆΠ΅ΡΡ‚Π²ΠΈΠ΅ с чистыми изобраТСниями CSS.

Π― Π±Ρ‹Π» ΠΏΠΎΡ‡Ρ‚ΠΈ Π² сСрСдинС своСго… | by Eleftheria Batsou

Π― Π±Ρ‹Π» ΠΏΠΎΡ‡Ρ‚ΠΈ Π² сСрСдинС своСго Ρ‡Π΅Π»Π»Π΅Π½Π΄ΠΆΠ° #100DaysOfCode, ΠΊΠΎΠ³Π΄Π° Π½Π°Ρ‡Π°Π» Π·Π°ΠΌΠ΅Ρ‡Π°Ρ‚ΡŒ Π² своСм Ρ‚Π²ΠΈΡ‚Ρ‚Π΅Ρ€Π΅ нСсколько симпатичных ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ с Ρ…ΡΡˆΡ‚Π΅Π³ΠΎΠΌ #dailyCssImages. Когда я Π½Π°ΠΆΠΈΠΌΠ°Π» Π½Π° Π½ΠΈΡ…, я ΠΌΠΎΠ³ Π²ΠΈΠ΄Π΅Ρ‚ΡŒ ΠΊΠΎΠ΄, всю красоту CSS/SCSS ΠΈ всСго нСсколько строк HTML. Π― Π½Π°Ρ‡Π°Π» ΠΊΠΎΠΏΠ°Ρ‚ΡŒΡΡ Π² изобраТСниях ΠΈ ΠΊΠΎΠ΄Π°Ρ…, я слСдил Π·Π° нСсколькими Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌΠΈ Π½Π° Codepen, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ создавали Π»ΠΈΠ±ΠΎ простыС ΠΈ симпатичныС, Π»ΠΈΠ±ΠΎ слоТныС ΠΈ Π΄Π΅Ρ‚Π°Π»ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ изобраТСния. Π― Π±Ρ‹Π» ΠΎΡ‡Π°Ρ€ΠΎΠ²Π°Π½. НСсколько Π΄Π½Π΅ΠΉ Π½Π°Π·Π°Π΄ я нашСл Π½Π° Medium ΡΡ‚Π°Ρ‚ΡŒΡŽ ΠΏΠΎΠ΄ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ΠΌ «Руководство для Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‰ΠΈΡ… ΠΏΠΎ изобраТСниям Π½Π° чистом CSSΒ», Π½Π°ΠΏΠΈΡΠ°Π½Π½ΡƒΡŽ создатСлСм конкурса Daily CSS Images ΠΏΠΎ ΠΈΠΌΠ΅Π½ΠΈ Майкл ΠœΠ°Π½Π³ΠΈΠ°Π»Π°Ρ€Π΄ΠΈ.Π­Ρ‚ΠΎ Π±Ρ‹Π» ΡƒΡ‡Π΅Π±Π½ΠΈΠΊ ΠΎ Ρ‚ΠΎΠΌ, ΠΊΠ°ΠΊ Π½Π°Ρ‡Π°Ρ‚ΡŒ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ изобраТСния CSS. На свой 44-ΠΉ дСнь #100DaysOfCode я Ρ€Π΅ΡˆΠΈΠ» ΠΏΠΎΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Ρ‚ΡŒ. Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ Π½ΠΈΠΆΠ΅. ОписаниС ΠΌΠΎΠ΅ΠΉ Ρ€ΡƒΡ‡ΠΊΠΈ Π±Ρ‹Π»ΠΎ:

Π”Π΅Π½ΡŒ: 44 ΠΈΠ· 100

Π― ΠΏΠ»Π°Π½ΠΈΡ€ΡƒΡŽ ΠΏΡ€ΠΈΠ½ΡΡ‚ΡŒ Π²Ρ‹Π·ΠΎΠ² #dailycssimages. Π― Π²ΠΏΠ΅Ρ€Π²Ρ‹Π΅ ΠΏΡ‹Ρ‚Π°ΡŽΡΡŒ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Β«ΠΊΠΎΠ°Π»ΡƒΒ», ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ CSS. Π― слСдовал этому руководству здСсь .

Π― ΡƒΠ²Π΅Ρ€Π΅Π½, Ρ‡Ρ‚ΠΎ ΡƒΠ·Π½Π°ΡŽ Ρ‚Π°ΠΊ ΠΌΠ½ΠΎΠ³ΠΎ Π½ΠΎΠ²ΠΎΠ³ΠΎ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ этого испытания, я люблю ΠΌΠΈΠ»Ρ‹Π΅ Π²Π΅Ρ‰ΠΈΡ†Ρ‹, ΠΈ это Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ я ΠΏΠ»Π°Π½ΠΈΡ€ΡƒΡŽ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ.Π― Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΏΡ€ΠΈΠ·Π½Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ я уТасно Ρ€ΠΈΡΡƒΡŽ ΠΎΡ‚ Ρ€ΡƒΠΊΠΈ, Π½ΠΎ я Π±ΡƒΠ΄Ρƒ Π±Ρ€ΠΎΡΠ°Ρ‚ΡŒ сСбС Π²Ρ‹Π·ΠΎΠ², Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΡ‚Π°Ρ‚ΡŒ Π»ΡƒΡ‡ΡˆΠ΅ с ΠΊΠΎΠ΄ΠΎΠΌ ΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ.

ПослС прочтСния ΡΡ‚Π°Ρ‚ΡŒΠΈ мСня Π·Π°Ρ†Π΅ΠΏΠΈΠ»ΠΎ. Π― подписался Π½Π° 10-Π½Π΅Π΄Π΅Π»ΡŒΠ½Ρ‹ΠΉ Ρ‡Π΅Π»Π»Π΅Π½Π΄ΠΆ ΠΈ Π½Π° ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ дСнь ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠ» своС ΠΏΠ΅Ρ€Π²ΠΎΠ΅ элСктронноС письмо. Π’Π΅ΠΌΠ° Π±Ρ‹Π»Π° «МСдвСТонок».

ЧСстно говоря, ΠΌΠΎΠ΅ ΠΏΠ΅Ρ€Π²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π±Ρ‹Π»ΠΎ отстойным.

Как Π½ΠΈ странно, Ρ…ΠΎΡ‚ΡŒ ΠΌΠ½Π΅ ΠΈ Π½Π΅ понравился Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚, Π½ΠΎ я остался Π΄ΠΎΠ²ΠΎΠ»Π΅Π½ своим Ρ‚Π²ΠΎΡ€Π΅Π½ΠΈΠ΅ΠΌ!

На ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ дСнь я ΠΈΠ·ΠΌΠ΅Π½ΠΈΠ» свой ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ ΠΊ созданию ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ.Π‘Π½Π°Ρ‡Π°Π»Π° я сдСлал простой набросок Ρ€ΡƒΡ‡ΠΊΠΎΠΉ ΠΈ Π±ΡƒΠΌΠ°Π³ΠΎΠΉ.

А ΠΏΠΎΡ‚ΠΎΠΌ я попытался Π΅Π³ΠΎ Π·Π°ΠΊΠΎΠ΄ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ.

Π›Π°Π΄Π½ΠΎ, ΠΎΠΏΡΡ‚ΡŒ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ Π½Π΅ супСр, Π½ΠΎ Π»ΡƒΡ‡ΡˆΠ΅, Ρ‡Π΅ΠΌ Π² ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ дСнь.

Код | Π’ΠΈΠ΄Π΅ΠΎΡƒΡ€ΠΎΠΊ

На 3-ΠΉ ΠΈ 4-ΠΉ дСнь я пытался Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ большС Π΄Π΅Ρ‚Π°Π»Π΅ΠΉ ΠΊ своим изобраТСниям ΠΈ Π³ΡƒΠ³Π»ΠΈΠ» Π² поисках вдохновСния для ΠΆΠΈΠ²ΠΎΡ‚Π½Ρ‹Ρ….

НаконСц-Ρ‚ΠΎ я создал эти ΠΎΠ±Ρ€Π°Π·Ρ‹:

Код | Π’ΠΈΠ΄Π΅ΠΎΡƒΡ€ΠΎΠΊ

Код

| Π’ΠΈΠ΄Π΅ΠΎΡƒΡ€ΠΎΠΊ

На 5-ΠΉ дСнь я создал симпатичноС сущСство, ΠΈ людям ΠΎΠ½ΠΎ, ΠΏΠΎΡ…ΠΎΠΆΠ΅, ΠΎΡ‡Π΅Π½ΡŒ ΠΏΠΎΠ½Ρ€Π°Π²ΠΈΠ»ΠΎΡΡŒ.

Код

Π­Ρ‚ΠΎ ΠΏΡ€ΠΈΠ΄Π°Π»ΠΎ ΠΌΠ½Π΅ увСрСнности, ΠΈ я Π±Ρ‹Π» Π³ΠΎΡ‚ΠΎΠ² ΠΊΠΎ Π²Ρ‚ΠΎΡ€ΠΎΠΉ Π½Π΅Π΄Π΅Π»Π΅. Π― Π½Π΅ Π±ΡƒΠ΄Ρƒ Π²Π΄Π°Π²Π°Ρ‚ΡŒΡΡ Π² подробности… Π½ΠΎ я ΠΈΠ·ΡƒΡ‡ΠΈΠ» ΠΏΠ°Ρ€Ρƒ Π½ΠΎΠ²Ρ‹Ρ… инструмСнтов ΠΈ попытался ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ свои Π½Π΅Π΄Π°Π²Π½ΠΈΠ΅ знания ΠΊ изобраТСниям.

Π˜Π½ΡΡ‚Ρ€ΡƒΠΌΠ΅Π½Ρ‚Ρ‹ Π±Ρ‹Π»ΠΈ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π½ΠΎ Ρ‚Π°ΠΊΠΈΠΌΠΈ: Π“Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π½Ρ‹Π΅ Ρ†Π²Π΅Ρ‚Π° ΠΈ БыстрыС Ρ„ΠΎΡ€ΠΌΡ‹.

  1. Π’Π΅ΠΌΠΎΠΉ Π±Ρ‹Π»Π° ЕДА!
  2. Π― Π½Π°Ρ‡Π°Π» Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ

На Ρ‚ΠΎΠΉ Π½Π΅Π΄Π΅Π»Π΅ я ΠΏΡ€ΠΈΠ³ΠΎΡ‚ΠΎΠ²ΠΈΠ» ΠΏΠΈΡ†Ρ†Ρƒ, Π³Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€, Ρ‚Π°ΠΊΠΎ, Ρ‡ΠΈΠ·ΠΊΠ΅ΠΉΠΊ ΠΈ ΠΏΠΈΡ€ΠΎΠ³!

Код | Π’ΠΈΠ΄Π΅ΠΎΡƒΡ€ΠΎΠΊ

Код

| Π’ΠΈΠ΄Π΅ΠΎ-ΡƒΡ‡Π΅Π±Π½ΠΈΠΊ

The Π³Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€ Π½Π° сСгодняшний дСнь ΠΈΠΌΠ΅Π΅Ρ‚ 1019 просмотров Π½Π° codepen

Код | Π’ΠΈΠ΄Π΅ΠΎΡƒΡ€ΠΎΠΊ

Код

| Π’ΠΈΠ΄Π΅ΠΎ-ΡƒΡ€ΠΎΠΊ

Код

Π’ΠΈΠ΄Π΅ΠΎ-ΡƒΡ€ΠΎΠΊ

… ΠΈ закончился монстр!

Π― ΠΈΠ·ΠΌΠ΅Π½ΠΈΠ» своСго монстра ΠΈ Ρ€Π΅ΡˆΠΈΠ» ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π΅Π³ΠΎ ΠΌΠΈΠ»Ρ‹ΠΌ.

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ясно Π²ΠΈΠ΄Π΅Ρ‚ΡŒ, ΠΊΠ°ΠΊ я стал Π»ΡƒΡ‡ΡˆΠ΅ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ, Π½ΠΎ Π½Π΅ Ρ€ΠΈΡΠΎΠ²Π°Ρ‚ΡŒ.

Код | Π’ΠΈΠ΄Π΅ΠΎΡƒΡ€ΠΎΠΊ

Π­Ρ‚Π° Ρ€ΡƒΡ‡ΠΊΠ° ΠΈΠΌΠ΅Π΅Ρ‚ 1098 просмотров Π½Π° Codepen, ΠΈ я Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΏΡ€ΠΈΠ·Π½Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ Π² этот ΠΌΠΎΠΌΠ΅Π½Ρ‚ я ΠΎΡ‡Π΅Π½ΡŒ гордился своСй Ρ€Π°Π±ΠΎΡ‚ΠΎΠΉ.

Π’Π°ΠΊ ΠΊΠ°ΠΊ я люблю Π±Ρ‹Ρ‚ΡŒ ΠΈΠ³Ρ€ΠΈΠ²Ρ‹ΠΌ я объСдинил Ρ‚Ρ€ΠΈ Π²Π΅Ρ‰ΠΈ:

  1. Π‘ΡƒΠΏΠ΅Ρ€Π³Π΅Ρ€ΠΎΠΈ
  2. Анимация
  3. МИНЬОНЫ

И вуаля Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Ρ‹:

Код | Π’ΠΈΠ΄Π΅ΠΎΡƒΡ€ΠΎΠΊ

Код

| Π’ΠΈΠ΄Π΅ΠΎΡƒΡ€ΠΎΠΊ

На Π»Π΅Π²ΠΎΠΌ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΈ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ, ΠΊΠ°ΠΊ я нашСл Π·Π½Π°Ρ‡ΠΎΠΊ Apple App Store Π½Π° изобраТСниях Google, Π° Π½Π° ΠΏΡ€Π°Π²ΠΎΠΌ β€” ΠΊΠ°ΠΊ я Π΅Π³ΠΎ воссоздал:

Код | Π’ΠΈΠ΄Π΅ΠΎ-ΡƒΡ€ΠΎΠΊ

Π§Ρ‚ΠΎ касаСтся Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΠΎΠ²:

Код | Π’ΠΈΠ΄Π΅ΠΎΡƒΡ€ΠΎΠΊ

Код

| Π’ΠΈΠ΄Π΅ΠΎΡƒΡ€ΠΎΠΊ

Код

| Π’ΠΈΠ΄Π΅ΠΎΡƒΡ€ΠΎΠΊ

Код

| Π’ΠΈΠ΄Π΅ΠΎΡƒΡ€ΠΎΠΊ

Π›ΠΎΠ³ΠΎΡ‚ΠΈΠΏ elm Π±Ρ‹Π» Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ слоТным, поэтому я воспользовался инструмСнтом Clippy:

Код | Π’ΠΈΠ΄Π΅ΠΎ-ΡƒΡ€ΠΎΠΊ

МСня Π²Π΄ΠΎΡ…Π½ΠΎΠ²ΠΈΠ»ΠΎ это ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅:

Π― быстро набросал рисунок:

И послС примСнСния CSS Ρƒ мСня появился собствСнный ΠΊΠΎΠ΄ Nitendo 2DS:

| Π²ΠΈΠ΄Π΅ΠΎΡƒΡ€ΠΎΠΊ

Π― создал ΠΏΡΡ‚ΡŒ Ρ€Π°Π·Π½Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π½Π° основС ΠΎΠ΄Π½ΠΎΠΉ ΠΈ Ρ‚ΠΎΠΉ ΠΆΠ΅ Ρ†Π²Π΅Ρ‚ΠΎΠ²ΠΎΠΉ ΠΏΠ°Π»ΠΈΡ‚Ρ€Ρ‹.

ВсС Ρ‚Ρ€ΠΎΠ΅ Π±Ρ‹Π»ΠΈ минималистичны ΠΈ довольно абстрактны.

ΠΊΠΎΠ΄ | Π²ΠΈΠ΄Π΅ΠΎΡƒΡ€ΠΎΠΊ

ΠΊΠΎΠ΄

| Π²ΠΈΠ΄Π΅ΠΎΡƒΡ€ΠΎΠΊ

ΠΊΠΎΠ΄

| Π²ΠΈΠ΄Π΅ΠΎΡƒΡ€ΠΎΠΊ

На 44 дСнь я создал Ρ€ΠΎΠ±ΠΎΡ‚Π°. Π‘Π½Π°Ρ‡Π°Π»Π° я Π³ΡƒΠ³Π»ΡŽ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ изобраТСния, ΠΊΠΎΠ³Π΄Π° Π½Π°Ρ…ΠΎΠΆΡƒ Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ ΠΌΠ½Π΅ большС всСго ΠΏΠΎΠ½Ρ€Π°Π²ΠΈΠ»ΠΎΡΡŒ, Ρ€ΠΈΡΡƒΡŽ Π΅Π³ΠΎ, Π° ΠΏΠΎΡ‚ΠΎΠΌ ΠΊΠΎΠ΄ΠΈΡ€ΡƒΡŽ.

ΠΊΠΎΠ΄ | Π²ΠΈΠ΄Π΅ΠΎΡƒΡ€ΠΎΠΊ

На 45-ΠΉ дСнь я Ρ€Π΅ΡˆΠΈΠ» ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ ΠΏΠΎΡ…ΠΎΠΆΠ΅Π΅, космичСский талисман-Ρ€ΠΎΠ±ΠΎΡ‚!

ΠΊΠΎΠ΄| Π²ΠΈΠ΄Π΅ΠΎ-ΡƒΡ‡Π΅Π±Π½ΠΈΠΊ

Π― Π·Π°ΠΊΠΎΠ½Ρ‡ΠΈΠ» испытаниС вкусным Ρ‚ΠΎΡ€Ρ‚ΠΎΠΌ

Π£ этой Ρ€ΡƒΡ‡ΠΊΠΈ 2.523 просмотра, ΠΈ это Π΄Π΅Π»Π°Π΅Ρ‚ мСня ΠΎΡ‡Π΅Π½ΡŒ счастливым, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ я ΠΏΠΎΡ‚Ρ€Π°Ρ‚ΠΈΠ» ΠΌΠ½ΠΎΠ³ΠΎ часов Π½Π° поиск ΠΈ ΠΊΠΎΠ΄ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅.

Π­Ρ‚ΠΎΡ‚ Π²Ρ‹Π·ΠΎΠ² ΠΏΠΎΠΌΠΎΠ³ ΠΌΠ½Π΅ Π²ΠΎ ΠΌΠ½ΠΎΠ³ΠΈΡ… ΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΡΡ…:

  • Π― стал Π»ΡƒΡ‡ΡˆΠ΅ Ρ€Π°Π·Π±ΠΈΡ€Π°Ρ‚ΡŒΡΡ Π² CSS/SCSS, я Ρ‚Π°ΠΊΠΆΠ΅ ΡƒΠ·Π½Π°Π» ΠΎΠ± Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ.
  • Π― ΠΈΠ·ΡƒΡ‡ΠΈΠ» Π½ΠΎΠ²Ρ‹Π΅ инструмСнты для Ρ€Π°Π±ΠΎΡ‚Ρ‹ с Ρ†Π²Π΅Ρ‚Π°ΠΌΠΈ, Ρ„ΠΎΡ€ΠΌΠ°ΠΌΠΈ ΠΈ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠ΅ΠΉ.
  • Π― общался с людьми ΠΏΠΎ всСму ΠΌΠΈΡ€Ρƒ Ρ‡Π΅Ρ€Π΅Π· Codepen, Twitter ΠΈ Youtube.
  • Π― подСлился своими знаниями Π½Π° Codepen ΠΈ Youtube ΠΈ надСюсь, Ρ‡Ρ‚ΠΎ ΠΏΠΎΠΌΠΎΠ³ ΠΈ Π²Π΄ΠΎΡ…Π½ΠΎΠ²ΠΈΠ» Π΄Ρ€ΡƒΠ³ΠΈΡ… Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ².
Автор записи

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

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