Π Π°Π·Π½ΠΎΠ΅

ВСнь снизу css: css β€” Как ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Ρ‚Π΅Π½ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ с ΠΎΠ΄Π½ΠΎΠΉ стороны?

27.12.1985

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

Как ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Ρ‚Π΅Π½ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ с ΠΎΠ΄Π½ΠΎΠΉ стороны css

CSS box-shadow Π³Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€

box-shadow β€” это CSS3 свойство, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ позволяСт ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ эффСкт Ρ‚Π΅Π½ΠΈ для, практичСски, любого элСмСнта Π²Π΅Π± страницы. Оно ΠΏΠΎΡ…ΠΎΠΆΠ΅ Π½Π° эффСкт Drop Shadows Π² Photoshop, с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ этого свойства создаСтся иллюзия Π³Π»ΡƒΠ±ΠΈΠ½Ρ‹ Π½Π° 2-ΠΌΠ΅Ρ€Π½Ρ‹Ρ… страницах.

Бинтаксис

Бвойство ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Π΅Ρ‚ составноС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΈΠ· пяти Ρ€Π°Π·Π½Ρ‹Ρ… частСй: Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ смСщСниС, Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ смСщСниС, Ρ€Π°Π·ΠΌΡ‹Ρ‚ΠΈΠ΅, растяТСниС, Ρ†Π²Π΅Ρ‚ Ρ‚Π΅Π½ΠΈ. К Ρ‚ΠΎΠΌΡƒ ΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ Π±ΡƒΠ΄Π΅Ρ‚ Π»ΠΈ Ρ‚Π΅Π½ΡŒ внСшнСй ΠΈΠ»ΠΈ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½Π΅ΠΉ.

Π’ ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠ΅ ΠΎΡ‚ Π΄Ρ€ΡƒΠ³ΠΈΡ… свойств, ΠΊΠ°ΠΊΠΈΡ… ΠΊΠ°ΠΊ border, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Ρ€Π°Π·Π±ΠΈΡ‚Ρ‹ Π½Π° подсвойства (border-width, border-style ΠΈ Ρ‚Π΄), box shadow CSS стоит особняком. БоотвСтствСнно, Π²Π°ΠΆΠ΅Π½ порядок, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ Π²Ρ‹ записываСтС значСния свойства.

Π“ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ смСщСниС (ΠΏΠΎ оси X)

ΠŸΠ΅Ρ€Π²ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ offset-x β€” смСщСниС Ρ‚Π΅Π½ΠΈ ΠΏΠΎ оси X. ΠŸΠΎΠ»ΠΎΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ смСстит Ρ‚Π΅Π½ΡŒ Π²ΠΏΡ€Π°Π²ΠΎ, Π° ΠΎΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ β€” Π²Π»Π΅Π²ΠΎ.

Π’Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ смСщСниС (ΠΏΠΎ оси Y)

Π’Ρ‚ΠΎΡ€ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ offset-y β€” смСщСниС Ρ‚Π΅Π½ΠΈ ΠΏΠΎ оси Y. ΠŸΠΎΠ»ΠΎΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ смСстит Ρ‚Π΅Π½ΡŒ Π²Π½ΠΈΠ·, Π° ΠΎΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ β€” Π½Π°Π²Π΅Ρ€Ρ….

Π Π°Π·ΠΌΡ‹Ρ‚ΠΈΠ΅

Π’Ρ€Π΅Ρ‚ΡŒΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ (blur) прСдставляСт собой радиус размытия Ρ‚Π΅Π½ΠΈ, посмотритС ΠΊΠ°ΠΊ ΠΎΠ½ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π½Π° box shadow Π³Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€Π΅ Π²Ρ‹ΡˆΠ΅. Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ 0 ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ Ρ‚Π΅Π½ΡŒ Π±ΡƒΠ΄Π΅Ρ‚ совсСм Π½Π΅ Ρ€Π°Π·ΠΌΡ‹Ρ‚Π°, края ΠΈ стороны Π±ΡƒΠ΄ΡƒΡ‚ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ Ρ‡Π΅Ρ‚ΠΊΠΈΠ΅. Π§Π΅ΠΌ Π²Ρ‹ΡˆΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅, Ρ‚Π΅ΠΌ Π±ΠΎΠ»Π΅Π΅ ΠΌΡƒΡ‚Π½ΡƒΡŽ ΠΈ Ρ€Π°Π·ΠΌΡ‹Ρ‚ΡƒΡŽ Ρ‚Π΅Π½ΡŒ Π²Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚Π΅. ΠžΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ значСния Π½Π΅ Π΄ΠΎΠΏΡƒΡΠΊΠ°ΡŽΡ‚ΡΡ.

РастяТСниС

Π§Π΅Ρ‚Π²Π΅Ρ€Ρ‚ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ (spread) прСдставляСт собой Ρ€Π°Π·ΠΌΠ΅Ρ€ Ρ‚Π΅Π½ΠΈ ΠΈΠ»ΠΈ дистанции ΠΎΡ‚ Ρ‚Π΅Π½ΠΈ Π΄ΠΎ элСмСнта. ΠŸΡ€ΠΈ ΠΏΠΎΠ»ΠΎΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠΌ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΈ Ρ‚Π΅Π½ΡŒ увСличится, Π²Ρ‹ΠΉΠ΄Π΅Ρ‚ Π·Π° ΠΏΡ€Π΅Π΄Π΅Π»Ρ‹ элСмСнта. ΠžΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΡƒΠΌΠ΅Π½ΡŒΡˆΠΈΡ‚ ΠΈ соТмСт Ρ‚Π΅Π½ΡŒ.

Π¦Π²Π΅Ρ‚ Ρ‚Π΅Π½ΠΈ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ Π»ΡŽΠ±Ρ‹ΠΌ ΠΈ записан Π² Ρ€Π°Π·Π½Ρ‹Ρ… Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π°Ρ…, доступных Π² CSS (HEX, RGB, RGBA ΠΈ ΠΏΡ€), ΠΏΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ Ρ€Π°Π·Π½Ρ‹Π΅ ΠΎΡ‚Ρ‚Π΅Π½ΠΊΠΈ Π² css box shadow generator.

Π’Π½Π΅ΡˆΠ½ΡΡ/внутрСнняя

Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ inset опрСдСляСт ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Ρ‚Π΅Π½ΠΈ. По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ ΠΎΠ½ΠΎ Π½Π΅ ΡƒΠΊΠ°Π·Π°Π½ΠΎ, это ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ Ρ‚Π΅Π½ΡŒ Π±ΡƒΠ΄Π΅Ρ‚ снаруТи элСмСнта. Для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ‚Π΅Π½ΡŒ Π±Ρ‹Π»Π° Π²Π½ΡƒΡ‚Ρ€ΠΈ элСмСнта, Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Π² ΠΊΠΎΠ½Ρ†Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊΠ»ΡŽΡ‡Π΅Π²ΠΎΠ΅ слово inset.

НСсколько Ρ‚Π΅Π½Π΅ΠΉ

Π’ CSS Ρ‚Π΅Π½ΡŒ Π±Π»ΠΎΠΊΠ° ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Π½Π΅ ΠΎΠ΄Π½Π°. Π§Ρ‚ΠΎΠ±Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ нСсколько Ρ‚Π΅Π½Π΅ΠΉ, достаточно Π½Π°ΠΏΠΈΡΠ°Ρ‚ΡŒ ΠΈΡ… Π² ΠΎΠ΄Π½ΠΎΠΌ свойствС Ρ‡Π΅Ρ€Π΅Π· Π·Π°ΠΏΡΡ‚ΡƒΡŽ.

ΠšΡ€ΡƒΠ³Π»Π°Ρ Ρ‚Π΅Π½ΡŒ

ВСнь ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΊΡ€ΡƒΠ³Π»ΠΎΠΉ, для этого достаточно Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ свойство border-radius

Π­Ρ„Ρ„Π΅ΠΊΡ‚ увСличСния с Ρ‚Π΅Π½ΡŒΡŽ

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ свойства box-shadow ΠΈ transform, ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ иллюзию приблиТСния ΠΈ отдалСния элСмСнта ΠΎΡ‚ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ.

Π­Ρ„Ρ„Π΅ΠΊΡ‚ парСния элСмСнта с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ box-shadow

ΠœΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Ρ‚Π΅Π½ΡŒ ΠΊ псСвдоэлСмСнту :after ΠΈ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Ρ‚Π΅Π½ΡŒ Π½ΠΈΠΆΠ΅ элСмСнта. Π’Π΅ΠΌ самым создавая иллюзию, Ρ‡Ρ‚ΠΎ элСмСнт Π±Ρ‹Π» поднят Π²Π²Π΅Ρ€Ρ…, Π° ΠΏΠΎΡ‚ΠΎΠΌ ΡƒΠΏΠ°Π».

ВСнь ΠΈ свойство clip-path

ВСнь Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½Π° элСмСнтах Π² Π²ΠΈΠ΄Π΅ Π±Π»ΠΎΠΊΠ° ΠΈΠ»ΠΈ ΠΊΡ€ΡƒΠ³Π°, Π½ΠΎ ΠΈ Π½Π° Π±ΠΎΠ»Π΅Π΅ слоТных Ρ„ΠΎΡ€ΠΌΠ°Ρ… с использованиСм свойства clip-path . ΠŸΡ€Π°Π²Π΄Π° свойство box-shadow ΠΏΡ€ΠΈ этом Π½Π΅ сработаСт ΠΈ Π½Π°ΠΌ придСтся Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π΅Π³ΠΎ Π΄Ρ€ΡƒΠ³ΠΈΠΌ. ΠŸΡ€ΠΈΡΡ‚ΡƒΠΏΠΈΠΌ, создадим элСмСнт box-1.

Π’ CSS сущСствуСт Ρ„ΠΈΠ»ΡŒΡ‚Ρ€, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Ρ‚ΠΎΠΆΠ΅ Π΄Π΅Π»Π°Π΅Ρ‚ CSS Ρ‚Π΅Π½ΡŒ Π±Π»ΠΎΠΊΠ° β€” drop-shadow() . Но Ρƒ вас Π½Π΅ поучится ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ нСпосрСдствСнно Π½Π° элСмСнтС, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ clip-path просто ΠΎΡ‚Ρ€Π΅ΠΆΠ΅Ρ‚ эту Ρ‚Π΅Π½ΡŒ. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ создаСм Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ Π±Π»ΠΎΠΊ ΠΈ Π½Π°Π»ΠΎΠΆΠΈΠΌ Ρ‚Π΅Π½ΡŒ Π½Π° Π½Π΅Π³ΠΎ.

box-shadow

CSS-свойство box-shadow позволяСт Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ элСмСнту ΠΎΠ΄Π½Ρƒ ΠΈΠ»ΠΈ нСсколько Ρ‚Π΅Π½Π΅ΠΉ, указывая ΠΈΡ… ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ Ρ‡Π΅Ρ€Π΅Π· Π·Π°ΠΏΡΡ‚ΡƒΡŽ. Бвойство Ρ‚Π΅Π½ΠΈ прСдставляСт собой описанныС смСщСния ΠΏΠΎ x ΠΈ y ΠΎΡ‚ элСмСнта, радиус размытия ΠΈ Π΅Π³ΠΎ радиус, Π° Ρ‚Π°ΠΊΠΆΠ΅ Ρ†Π²Π΅Ρ‚.

Бвойство box-shadow позволяСт Π²Π°ΠΌ Π·Π°Π΄Π°Ρ‚ΡŒ Ρ‚Π΅Π½ΡŒ для ΠΏΠΎΡ‡Ρ‚ΠΈ любого элСмСнта. Если элСмСнту Π·Π°Π΄Π°Π½ΠΎ свойство border-radius , Ρ‚ΠΎ Ρ‚Π΅Π½ΡŒ Ρ‚Π°ΠΊΠΆΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ с Π·Π°ΠΊΡ€ΡƒΠ³Π»Ρ‘Π½Π½Ρ‹ΠΌΠΈ ΡƒΠ³Π»Π°ΠΌΠΈ. РасполоТСниС Ρ‚Π΅Π½Π΅ΠΉ ΠΏΠΎ оси z Π±ΡƒΠ΄Π΅Ρ‚ Ρ‚Π°ΠΊΠΎΠ΅ ΠΆΠ΅, ΠΊΠ°ΠΊ ΠΈ ΠΏΡ€ΠΈ ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠΈ свойства text-shadow (пСрвая Ρ‚Π΅Π½ΡŒ Π±ΡƒΠ΄Π΅Ρ‚ Π²ΠΏΠ΅Ρ€Π΅Π΄ΠΈ ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Ρ…).

Π“Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€ box-shadow generator β€” ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΉ инструмСнт, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰ΠΈΠΉ Π²Π°ΠΌ Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ box-shadow .

Бинтаксис

Π§Ρ‚ΠΎΠ±Ρ‹ Π·Π°Π΄Π°Ρ‚ΡŒ ΠΎΠ΄Π½Ρƒ Ρ‚Π΅Π½ΡŒ, ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ:

  • Π”Π²Π°, Ρ‚Ρ€ΠΈ ΠΈ Ρ‡Π΅Ρ‚Ρ‹Ρ€Π΅ значСния <length> .
  • Если Π·Π°Π΄Π°Π½ΠΎ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π΄Π²Π° значСния, ΠΎΠ½ΠΈ интСрпрСтируСтся ΠΊΠ°ΠΊ <offset-x><offset-y> values.
  • Если Π·Π°Π΄Π°Π½ΠΎ Ρ‚Ρ€Π΅Ρ‚ΡŒΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅, ΠΎΠ½ΠΎ понимаСтся ΠΊΠ°ΠΊ <blur-radius> .
  • Если Π·Π°Π΄Π°Π½ΠΎ Ρ‡Π΅Ρ‚Π²Ρ‘Ρ€Ρ‚ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅, ΠΎΠ½ΠΎ интСрпрСтируСтся <spread-radius> .

Π§Ρ‚ΠΎΠ±Ρ‹ Π·Π°Π΄Π°Ρ‚ΡŒ нСсколько Ρ‚Π΅Π½Π΅ΠΉ, пСрСчислитС ΠΈΡ… Ρ‡Π΅Ρ€Π΅Π· Π·Π°ΠΏΡΡ‚ΡƒΡŽ.

ЗначСния
Π˜Π½Ρ‚Π΅Ρ€ΠΏΠΎΠ»ΡΡ†ΠΈΡ

Each shadow in the list (treating none as a 0-length list) is interpolated via the color (as color) component, and x, y, blur, and (when appropriate) spread (as length) components. For each shadow, if both input shadows are or are not inset , then the interpolated shadow must match the input shadows in that regard. If any pair of input shadows has one inset and the other not inset , the entire shadow list is uninterpolable. If the lists of shadows have different lengths, then the shorter list is padded at the end with shadows whose color is transparent , all lengths are 0 , and whose inset (or not) matches the longer list.

2.19. CSS3-Ρ‚Π΅Π½ΡŒ Π±Π»ΠΎΠΊΠ°

Бвойство box-shadow добавляСт элСмСнту ΠΎΠ΄Π½Ρƒ ΠΈΠ»ΠΈ Π±ΠΎΠ»Π΅Π΅ Ρ‚Π΅Π½Π΅ΠΉ. ВСнь прСдставляСт собой копию элСмСнта, ΡΠΌΠ΅Ρ‰Π΅Π½Π½ΡƒΡŽ Π½Π° ΡƒΠΊΠ°Π·Π°Π½Π½ΠΎΠ΅ расстояниС. Π’Π΅Π½ΠΈ Π±Ρ‹Π²Π°ΡŽΡ‚ внСшниС ΠΈΠ»ΠΈ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠ΅, Ρ€Π°Π·ΠΌΡ‹Ρ‚Ρ‹Π΅ ΠΈΠ»ΠΈ плоскиС, ΠΎΠ½ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ ΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠΎΠ½Ρ‚ΡƒΡ€Π°ΠΌ Π±Π»ΠΎΠΊΠΎΠ² со скруглСнными ΡƒΠ³Π»Π°ΠΌΠΈ. Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΊΠ»ΡŽΡ‡Π΅Π²ΠΎΠ³ΠΎ слова inset ΡΠΎΠ·Π΄Π°ΡŽΡ‚ΡΡ Ρ‚Π΅Π½ΠΈ Π²Π½ΡƒΡ‚Ρ€ΠΈ элСмСнта, дСлая элСмСнт Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎ ΠΎΠ±ΡŠΡ‘ΠΌΠ½Ρ‹ΠΌ ΠΈΠ»ΠΈ Π²Π΄Π°Π²Π»Π΅Π½Π½Ρ‹ΠΌ.

Как ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Ρ‚Π΅Π½ΡŒ Π±Π»ΠΎΠΊΠ° с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ свойства box-shadow

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

IE: 9.0
Edge: 12.0
Firefox: 4.0, 3.5 -moz-
Chrome: 10.0, 4.0 -webkit-
Safari: 5.1, 3.1 -webkit-
Opera: 11.5
iOS Safari: 5.1, 3.1 -webkit-
Android Browser: 4.0, 2.1 -webkit-

1. Бинтаксис свойства box-shadow

Бвойство box-shadow прикрСпляСт ΠΎΠ΄Π½Ρƒ ΠΈΠ»ΠΈ нСсколько Ρ‚Π΅Π½Π΅ΠΉ ΠΊ Π±Π»ΠΎΠΊΡƒ. Бвойство ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Π΅Ρ‚ Π»ΠΈΠ±ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ none , ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ Π½Π° отсутствиС Ρ‚Π΅Π½Π΅ΠΉ, Π»ΠΈΠ±ΠΎ список Ρ‚Π΅Π½Π΅ΠΉ Ρ‡Π΅Ρ€Π΅Π· Π·Π°ΠΏΡΡ‚ΡƒΡŽ, упорядочСнный ΠΎΡ‚ Π½Π°Ρ‡Π°Π»Π° ΠΊ ΠΊΠΎΠ½Ρ†Ρƒ.

КаТдая Ρ‚Π΅Π½ΡŒ являСтся ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΠΉ Ρ‚Π΅Π½ΡŒΡŽ, прСдставлСнной ΠΎΡ‚ 2 Π΄ΠΎ 4-Ρ… Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ Π΄Π»ΠΈΠ½Ρ‹, Π½Π΅ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ Ρ†Π²Π΅Ρ‚ΠΎΠΌ ΠΈ Π½Π΅ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹ΠΌ словом inset . ДопустимыС Π΄Π»ΠΈΠ½Ρ‹ 0 ; ΠΎΠΏΡƒΡ‰Π΅Π½Π½Ρ‹Π΅ Ρ†Π²Π΅Ρ‚Π° ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Ρ€Π°Π²Π½Ρ‹ Π·Π½Π°Ρ‡Π΅Π½ΠΈΡŽ свойства color .

Бвойство Π½Π΅ наслСдуСтся.

Рис. 1. Бинтаксис свойства box-shadow

box-shadow
ЗначСния:
x-offsetΠ—Π°Π΄Π°Π΅Ρ‚ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ смСщСниС Ρ‚Π΅Π½ΠΈ. ΠŸΠΎΠ»ΠΎΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ рисуСт Ρ‚Π΅Π½ΡŒ, ΡΠΌΠ΅Ρ‰Π΅Π½Π½ΡƒΡŽ Π²ΠΏΡ€Π°Π²ΠΎ ΠΎΡ‚ тСкста, ΠΎΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½Π°Ρ Π΄Π»ΠΈΠ½Π° β€” Π²Π»Π΅Π²ΠΎ.
y-offsetΠ—Π°Π΄Π°Π΅Ρ‚ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ смСщСниС Ρ‚Π΅Π½ΠΈ. ΠŸΠΎΠ»ΠΎΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ смСщаСт Ρ‚Π΅Π½ΡŒ Π²Π½ΠΈΠ·, ΠΎΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ β€” Π²Π²Π΅Ρ€Ρ….
blurΠ—Π°Π΄Π°Π΅Ρ‚ радиус размытия. ΠžΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ значСния Π½Π΅ Π΄ΠΎΠΏΡƒΡΠΊΠ°ΡŽΡ‚ΡΡ. Если Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ размытия Ρ€Π°Π²Π½ΠΎ Π½ΡƒΠ»ΡŽ, Ρ‚ΠΎ ΠΊΡ€Π°ΠΉ Ρ‚Π΅Π½ΠΈ Ρ‡Π΅Ρ‚ΠΊΠΈΠΉ. Π’ ΠΏΡ€ΠΎΡ‚ΠΈΠ²Π½ΠΎΠΌ случаС, Ρ‡Π΅ΠΌ большС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅, Ρ‚Π΅ΠΌ большС Ρ€Π°Π·ΠΌΡ‹Ρ‚ ΠΊΡ€Π°ΠΉ Ρ‚Π΅Π½ΠΈ.
растяТСниСЗадаСт расстояниС, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Ρ‚Π΅Π½ΡŒ увСличиваСтся. ΠŸΠΎΠ»ΠΎΠΆΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ значСния Π·Π°ΡΡ‚Π°Π²Π»ΡΡŽΡ‚ Ρ‚Π΅Π½ΡŒ Ρ€Π°ΡΡˆΠΈΡ€ΡΡ‚ΡŒΡΡ Π²ΠΎ всСх направлСниях Π½Π° ΡƒΠΊΠ°Π·Π°Π½Π½Ρ‹ΠΉ радиус. ΠžΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ значСния Π·Π°ΡΡ‚Π°Π²Π»ΡΡŽΡ‚ Ρ‚Π΅Π½ΡŒ ΡΠΆΠΈΠΌΠ°Ρ‚ΡŒΡΡ. Для Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΡ… Ρ‚Π΅Π½Π΅ΠΉ Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠ΅ Ρ‚Π΅Π½ΠΈ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚ сТатиС Ρ„ΠΎΡ€ΠΌΡ‹ ΠΏΠ΅Ρ€ΠΈΠΌΠ΅Ρ‚Ρ€Π° Ρ‚Π΅Π½ΠΈ.
Ρ†Π²Π΅Ρ‚Π—Π°Π΄Π°Π΅Ρ‚ Ρ†Π²Π΅Ρ‚ Ρ‚Π΅Π½ΠΈ. Если Ρ†Π²Π΅Ρ‚ отсутствуСт, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹ΠΉ Ρ†Π²Π΅Ρ‚ бСрСтся ΠΈΠ· свойства color. Для Safari Ρ†Π²Π΅Ρ‚ Ρ‚Π΅Π½ΠΈ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ.
insetΠ˜Π·ΠΌΠ΅Π½ΡΠ΅Ρ‚ ΠΎΡ‚Π±Ρ€Π°ΡΡ‹Π²Π°Π΅ΠΌΡƒΡŽ Ρ‚Π΅Π½ΡŒ Π±Π»ΠΎΠΊΠ° с внСшнСй Ρ‚Π΅Π½ΠΈ Π½Π° Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΡŽΡŽ.
noneΠ—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ, ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚ отсутствиС Ρ‚Π΅Π½ΠΈ.
initialУстанавливаСт Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ свойства Π² Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ.
inheritНаслСдуСт Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ свойства ΠΎΡ‚ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ элСмСнта.

Π­Ρ„Ρ„Π΅ΠΊΡ‚Ρ‹ Ρ‚Π΅Π½ΠΈ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ: пСрвая Ρ‚Π΅Π½ΡŒ находится свСрху, Π° ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Π΅ &#8212; сзади. Π’Π΅Π½ΠΈ Π½Π΅ Π²Π»ΠΈΡΡŽΡ‚ Π½Π° ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΡƒ ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ ΠΏΠ΅Ρ€Π΅ΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ элСмСнты ΠΈΠ»ΠΈ ΠΈΡ… Ρ‚Π΅Π½ΠΈ. Π‘ Ρ‚ΠΎΡ‡ΠΊΠΈ зрСния контСкстов ΡƒΠΊΠ»Π°Π΄ΠΊΠΈ ΠΈ порядка рисования внСшниС Ρ‚Π΅Π½ΠΈ элСмСнта Ρ€ΠΈΡΡƒΡŽΡ‚ΡΡ нСпосрСдствСнно ΠΏΠΎΠ΄ Ρ„ΠΎΠ½ΠΎΠΌ этого элСмСнта, Π° Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠ΅ Ρ‚Π΅Π½ΠΈ элСмСнта Ρ€ΠΈΡΡƒΡŽΡ‚ΡΡ нСпосрСдствСнно Π½Π°Π΄ Ρ„ΠΎΠ½ΠΎΠΌ этого элСмСнта (Π½ΠΈΠΆΠ΅ border ΠΈ border-image , Ссли Ρ‚Π°ΠΊΠΎΠ²Ρ‹Π΅ ΠΈΠΌΠ΅ΡŽΡ‚ΡΡ).

Если элСмСнт ΠΈΠΌΠ΅Π΅Ρ‚ нСсколько ящиков, всС ΠΎΠ½ΠΈ ΠΏΠΎΠ»ΡƒΡ‡Π°ΡŽΡ‚ Ρ‚Π΅Π½ΠΈ, Π½ΠΎ Ρ‚Π΅Π½ΠΈ Ρ€ΠΈΡΡƒΡŽΡ‚ΡΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‚Π°ΠΌ, Π³Π΄Π΅ Ρ‚Π°ΠΊΠΆΠ΅ Π±ΡƒΠ΄ΡƒΡ‚ нарисованы Π³Ρ€Π°Π½ΠΈΡ†Ρ‹; см. box-decoration-break.

Π’Π΅Π½ΠΈ Π½Π΅ Π²Ρ‹Π·Ρ‹Π²Π°ΡŽΡ‚ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΡƒ ΠΈΠ»ΠΈ Π½Π΅ ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΠ²Π°ΡŽΡ‚ Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‡ΠΈΠ²Π°Π΅ΠΌΠΎΠΉ области.

Как ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ CSS box-shadow: 13 хитростСй ΠΈ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ²

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ CSS box-shadow?

1 Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ Ρ‚ΡƒΡΠΊΠ»ΡƒΡŽ Ρ‚Π΅Π½ΡŒ Π±Π»ΠΎΠΊΠ° слСва, справа ΠΈ снизу Π±Π»ΠΎΠΊΠ°.

2 Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ Π·Π°Ρ‚Π΅ΠΌΠ½Π΅Π½Π½ΡƒΡŽ Ρ‚Π΅Π½ΡŒ ΠΊΠΎ всСм сторонам.

3 Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ Ρ‚ΠΎΠ½ΠΊΡƒΡŽ Ρ‚Π΅Π½ΡŒ Π±Π»ΠΎΠΊΠ° Π½Π° ниТнюю ΠΈ ΠΏΡ€Π°Π²ΡƒΡŽ стороны.

4 Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ Ρ‚Π΅ΠΌΠ½ΡƒΡŽ Ρ‚Π΅Π½ΡŒ ΠΊΠΎ всСм сторонам.

5 Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ Ρ€Π°ΡΡΠ΅ΡΠ½Π½ΡƒΡŽ Ρ‚Π΅Π½ΡŒ ΠΊΠΎ всСм сторонам.

6 Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ Ρ‚ΠΎΠ½ΠΊΡƒΡŽ Ρ‚Π΅Π½ΡŒ Π½Π° всС стороны.

7 Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ Ρ‚Π΅Π½ΡŒ Π½Π° ниТнюю ΠΈ Π»Π΅Π²ΡƒΡŽ стороны.

8 Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ Ρ‚ΡƒΡΠΊΠ»ΡƒΡŽ Ρ‚Π΅Π½ΡŒ Π±Π»ΠΎΠΊΠ° Π½Π° Π²Π΅Ρ€Ρ…Π½ΡŽΡŽ ΠΈ Π»Π΅Π²ΡƒΡŽ стороны, Ρ‚Π΅ΠΌΠ½ΡƒΡŽ Ρ‚Π΅Π½ΡŒ Π½Π° ниТнюю ΠΈ ΠΏΡ€Π°Π²ΡƒΡŽ стороны.

9 Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ Ρ‚ΠΎΠ½ΠΊΡƒΡŽ Ρ†Π²Π΅Ρ‚Π½ΡƒΡŽ Ρ‚Π΅Π½ΡŒ Π½Π° всС стороны.

10 Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ нСсколько Ρ†Π²Π΅Ρ‚Π½Ρ‹Ρ… Π³Ρ€Π°Π½ΠΈΡ† Ρ‚Π΅Π½Π΅ΠΉ Π½Π° ниТнюю ΠΈ Π»Π΅Π²ΡƒΡŽ стороны Π±Π»ΠΎΠΊΠ°.

11 Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ нСсколько Ρ†Π²Π΅Ρ‚Π½Ρ‹Ρ… Ρ‚Π΅Π½Π΅ΠΉ Π½Π° ниТнюю Ρ‡Π°ΡΡ‚ΡŒ.

12 Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ нСсколько Ρ†Π²Π΅Ρ‚Π½Ρ‹Ρ… Π³Ρ€Π°Π½ΠΈΡ† Ρ‚Π΅Π½Π΅ΠΉ Π½Π° ниТнюю ΠΈ ΠΏΡ€Π°Π²ΡƒΡŽ стороны Π±Π»ΠΎΠΊΠ°.

13 Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ свСтлыС Ρ‚Π΅Π½ΠΈ Π½Π° Π»Π΅Π²ΡƒΡŽ ΠΈ ΠΏΡ€Π°Π²ΡƒΡŽ стороны, распространитС Ρ‚Π΅Π½ΡŒ Π½Π° ниТнюю Ρ‡Π°ΡΡ‚ΡŒ.

Π˜Π½Ρ‚Π΅Π³Ρ€ΠΈΡ€ΡƒΠΉΡ‚Π΅ CSS с HTML-страницСй

Π’Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠΉ CSS

ВстроСнный CSS

Π’Π½Π΅ΡˆΠ½ΠΈΠΉ CSS

Π‘Π΄Π΅Π»Π°ΠΉΡ‚Π΅ свою Π²Π΅Π±-страницу элСгантной с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS

БлСстящиС ΠΊΠΎΡ€ΠΎΠ±ΠΊΠΈ выглядят скучно. Π£ΠΊΡ€Π°ΡΡŒΡ‚Π΅ ΠΈΡ… с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ эффСкта CSS box-shadow!

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

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° элСмСнта, ΡΡ‚ΠΈΠ»ΡŒ ΡˆΡ€ΠΈΡ„Ρ‚Π°, Ρ†Π²Π΅Ρ‚ ΡˆΡ€ΠΈΡ„Ρ‚Π°, Ρ‚Π΅Π½ΡŒ Π±Π»ΠΎΠΊΠ°, поля ΠΈ ΠΌΠ½ΠΎΠ³ΠΈΠ΅ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ свойства с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS. Π’ этом руководствС ΠΌΡ‹ расскаТСм, ΠΊΠ°ΠΊ эффСктивно ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ box-shadow.

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ CSS box-shadow?

Бвойство box-shadow ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для примСнСния Ρ‚Π΅Π½ΠΈ ΠΊ элСмСнтам HTML. Π­Ρ‚ΠΎ ΠΎΠ΄Π½ΠΎ ΠΈΠ· Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ часто ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹Ρ… свойств CSS для стилизации Π±Π»ΠΎΠΊΠΎΠ² ΠΈΠ»ΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ.

Бинтаксис CSS:

box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];
  1. смСщСниС ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ: Ссли смСщСниС ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ ΠΏΠΎΠ»ΠΎΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅, Ρ‚Π΅Π½ΡŒ Π±ΡƒΠ΄Π΅Ρ‚ справа ΠΎΡ‚ поля. А Ссли смСщСниС ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ ΠΎΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠ΅, Ρ‚Π΅Π½ΡŒ Π±ΡƒΠ΄Π΅Ρ‚ слСва ΠΎΡ‚ поля.
  2. Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ смСщСниС: Ссли Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ смСщСниС ΠΏΠΎΠ»ΠΎΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅, Ρ‚Π΅Π½ΡŒ Π±ΡƒΠ΄Π΅Ρ‚ Π½ΠΈΠΆΠ΅ ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊΠ°. И Ссли Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ смСщСниС ΠΎΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠ΅, Ρ‚Π΅Π½ΡŒ Π±ΡƒΠ΄Π΅Ρ‚ Π½Π°Π΄ ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊΠΎΠΌ.
  3. радиус размытия: Ρ‡Π΅ΠΌ Π²Ρ‹ΡˆΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅, Ρ‚Π΅ΠΌ Π±ΠΎΠ»Π΅Π΅ Ρ€Π°Π·ΠΌΡ‹Ρ‚ΠΎΠΉ Π±ΡƒΠ΄Π΅Ρ‚ Ρ‚Π΅Π½ΡŒ.
  4. Радиус распространСния: ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚, насколько Π΄ΠΎΠ»ΠΆΠ½Π° Ρ€Π°ΡΠΏΡ€ΠΎΡΡ‚Ρ€Π°Π½ΡΡ‚ΡŒΡΡ Ρ‚Π΅Π½ΡŒ. ΠŸΠΎΠ»ΠΎΠΆΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ значСния ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΠ²Π°ΡŽΡ‚ разброс Ρ‚Π΅Π½ΠΈ, ΠΎΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ значСния ΡƒΠΌΠ΅Π½ΡŒΡˆΠ°ΡŽΡ‚ разброс.
  5. Π¦Π²Π΅Ρ‚: ΠΎΠ±ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚ Ρ†Π²Π΅Ρ‚ Ρ‚Π΅Π½ΠΈ. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, ΠΎΠ½ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ любой Ρ†Π²Π΅Ρ‚ΠΎΠ²ΠΎΠΉ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚, Ρ‚Π°ΠΊΠΎΠΉ ΠΊΠ°ΠΊ rgba, hex ΠΈΠ»ΠΈ hsla.

ΠŸΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ размытия, распространСния ΠΈ Ρ†Π²Π΅Ρ‚Π° Π½Π΅ ΡΠ²Π»ΡΡŽΡ‚ΡΡ ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌΠΈ. Бамая интСрСсная Ρ‡Π°ΡΡ‚ΡŒ box-shadow Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π·Π°ΠΏΡΡ‚ΡƒΡŽ для раздСлСния Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ box-shadow любоС количСство Ρ€Π°Π·. Π­Ρ‚ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для создания Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… Π³Ρ€Π°Π½ΠΈΡ† ΠΈ Ρ‚Π΅Π½Π΅ΠΉ Π½Π° элСмСнтах.

1 Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ Ρ‚ΡƒΡΠΊΠ»ΡƒΡŽ Ρ‚Π΅Π½ΡŒ Π±Π»ΠΎΠΊΠ° слСва, справа ΠΈ снизу Π±Π»ΠΎΠΊΠ°.

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΎΡ‡Π΅Π½ΡŒ тусклыС Ρ‚Π΅Π½ΠΈ ΠΊ Ρ‚Ρ€Π΅ΠΌ сторонам (Π»Π΅Π²ΠΎΠΉ, ΠΏΡ€Π°Π²ΠΎΠΉ ΠΈ Π½ΠΈΠΆΠ½Π΅ΠΉ) поля, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ CSS-ΠΊΠΎΠ΄ box-shadow с вашим Ρ†Π΅Π»Π΅Π²Ρ‹ΠΌ HTML-элСмСнтом:

box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;

2 Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ Π·Π°Ρ‚Π΅ΠΌΠ½Π΅Π½Π½ΡƒΡŽ Ρ‚Π΅Π½ΡŒ ΠΊΠΎ всСм сторонам.

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π»Π΅Π³ΠΊΠΈΠ΅ Ρ‚Π΅Π½ΠΈ ΠΊΠΎ всСм сторонам поля, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ CSS-ΠΊΠΎΠ΄ box-shadow с вашим Ρ†Π΅Π»Π΅Π²Ρ‹ΠΌ HTML-элСмСнтом:

box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;

3 Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ Ρ‚ΠΎΠ½ΠΊΡƒΡŽ Ρ‚Π΅Π½ΡŒ Π±Π»ΠΎΠΊΠ° Π½Π° ниТнюю ΠΈ ΠΏΡ€Π°Π²ΡƒΡŽ стороны.

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Ρ‚Π΅Π½ΠΈ Π² ниТнюю ΠΈ ΠΏΡ€Π°Π²ΡƒΡŽ Ρ‡Π°ΡΡ‚ΡŒ поля, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ CSS-ΠΊΠΎΠ΄ box-shadow с вашим Ρ†Π΅Π»Π΅Π²Ρ‹ΠΌ HTML-элСмСнтом:

box-shadow: rgba(0, 0, 0, 0. 15) 1.95px 1.95px 2.6px;

4 Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ Ρ‚Π΅ΠΌΠ½ΡƒΡŽ Ρ‚Π΅Π½ΡŒ ΠΊΠΎ всСм сторонам.

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Ρ‚Π΅ΠΌΠ½ΡƒΡŽ Ρ‚Π΅Π½ΡŒ ΠΊΠΎ всСм сторонам поля, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ CSS-ΠΊΠΎΠ΄ box-shadow с вашим Ρ†Π΅Π»Π΅Π²Ρ‹ΠΌ HTML-элСмСнтом:

box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;

5 Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ Ρ€Π°ΡΡΠ΅ΡΠ½Π½ΡƒΡŽ Ρ‚Π΅Π½ΡŒ ΠΊΠΎ всСм сторонам.

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Ρ€Π°ΡΡΠ΅ΡΠ½Π½ΡƒΡŽ Ρ‚Π΅Π½ΡŒ ΠΊΠΎ всСм сторонам поля, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΡƒΡŽ ΠΊΠΎΠΌΠ°Π½Π΄Ρƒ с вашим Ρ†Π΅Π»Π΅Π²Ρ‹ΠΌ HTML-элСмСнтом:

box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;

6 Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ Ρ‚ΠΎΠ½ΠΊΡƒΡŽ Ρ‚Π΅Π½ΡŒ Π½Π° всС стороны.

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΏΡ€ΠΎΡΡ‚ΡƒΡŽ Ρ‚Π΅Π½ΡŒ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ ΠΊΠΎ всСм сторонам поля, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ CSS с вашим Ρ†Π΅Π»Π΅Π²Ρ‹ΠΌ элСмСнтом HTML:

box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;

7 Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ Ρ‚Π΅Π½ΡŒ Π½Π° ниТнюю ΠΈ Π»Π΅Π²ΡƒΡŽ стороны.

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Ρ‚Π΅Π½ΡŒ ΠΊ Π½ΠΈΠΆΠ½Π΅ΠΉ ΠΈ Π»Π΅Π²ΠΎΠΉ сторонам поля, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ CSS-ΠΊΠΎΠ΄ box-shadow с вашим Ρ†Π΅Π»Π΅Π²Ρ‹ΠΌ HTML-элСмСнтом:

box-shadow: rgba(0, 0, 0, 0.1) -4px 9px 25px -6px;

8 Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ Ρ‚ΡƒΡΠΊΠ»ΡƒΡŽ Ρ‚Π΅Π½ΡŒ Π±Π»ΠΎΠΊΠ° Π½Π° Π²Π΅Ρ€Ρ…Π½ΡŽΡŽ ΠΈ Π»Π΅Π²ΡƒΡŽ стороны, Ρ‚Π΅ΠΌΠ½ΡƒΡŽ Ρ‚Π΅Π½ΡŒ Π½Π° ниТнюю ΠΈ ΠΏΡ€Π°Π²ΡƒΡŽ стороны.

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΡΠ²Π΅Ρ‚Π»ΡƒΡŽ Ρ‚Π΅Π½ΡŒ ΠΊ Π²Π΅Ρ€Ρ…Π½Π΅ΠΉ ΠΈ Π»Π΅Π²ΠΎΠΉ сторонС поля, Π° Ρ‚Π°ΠΊΠΆΠ΅ Ρ‚Π΅ΠΌΠ½ΡƒΡŽ Ρ‚Π΅Π½ΡŒ ΠΊ Π½ΠΈΠΆΠ½Π΅ΠΉ ΠΈ ΠΏΡ€Π°Π²ΠΎΠΉ сторонам поля, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ CSS с вашим Ρ†Π΅Π»Π΅Π²Ρ‹ΠΌ элСмСнтом HTML:

box-shadow: rgba(136, 165, 191, 0.48) 6px 2px 16px 0px, rgba(255, 255, 255, 0.8) -6px -2px 16px 0px;

9 Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ Ρ‚ΠΎΠ½ΠΊΡƒΡŽ Ρ†Π²Π΅Ρ‚Π½ΡƒΡŽ Ρ‚Π΅Π½ΡŒ Π½Π° всС стороны.

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΏΡ€ΠΎΡΡ‚ΡƒΡŽ Ρ†Π²Π΅Ρ‚Π½ΡƒΡŽ Ρ‚Π΅Π½ΡŒ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ ΠΊΠΎ всСм сторонам поля, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ CSS-ΠΊΠΎΠ΄ box-shadow с вашим Ρ†Π΅Π»Π΅Π²Ρ‹ΠΌ HTML-элСмСнтом:

box-shadow: rgba(3, 102, 214, 0.3) 0px 0px 0px 3px;

10 Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ нСсколько Ρ†Π²Π΅Ρ‚Π½Ρ‹Ρ… Π³Ρ€Π°Π½ΠΈΡ† Ρ‚Π΅Π½Π΅ΠΉ Π½Π° ниТнюю ΠΈ Π»Π΅Π²ΡƒΡŽ стороны Π±Π»ΠΎΠΊΠ°.

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ нСсколько Ρ†Π²Π΅Ρ‚Π½Ρ‹Ρ… Ρ‚Π΅Π½Π΅ΠΉ ΠΊ Π½ΠΈΠΆΠ½Π΅ΠΉ ΠΈ Π»Π΅Π²ΠΎΠΉ сторонам поля, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ CSS с вашим Ρ†Π΅Π»Π΅Π²Ρ‹ΠΌ элСмСнтом HTML:

box-shadow: rgba(50, 50, 93, 0. 25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;

11 Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ нСсколько Ρ†Π²Π΅Ρ‚Π½Ρ‹Ρ… Ρ‚Π΅Π½Π΅ΠΉ Π½Π° ниТнюю Ρ‡Π°ΡΡ‚ΡŒ.

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ нСсколько Ρ†Π²Π΅Ρ‚Π½Ρ‹Ρ… Ρ‚Π΅Π½Π΅ΠΉ ΠΊ Π½ΠΈΠΆΠ½Π΅ΠΉ части поля, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ CSS-ΠΊΠΎΠ΄ box-shadow с вашим Ρ†Π΅Π»Π΅Π²Ρ‹ΠΌ HTML-элСмСнтом:

box-shadow: rgba(240, 46, 170, 0.4) 0px 5px, rgba(240, 46, 170, 0.3) 0px 10px, rgba(240, 46, 170, 0.2) 0px 15px, rgba(240, 46, 170, 0.1) 0px 20px, rgba(240, 46, 170, 0.05) 0px 25px;

12 Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ нСсколько Ρ†Π²Π΅Ρ‚Π½Ρ‹Ρ… Π³Ρ€Π°Π½ΠΈΡ† Ρ‚Π΅Π½Π΅ΠΉ Π½Π° ниТнюю ΠΈ ΠΏΡ€Π°Π²ΡƒΡŽ стороны Π±Π»ΠΎΠΊΠ°.

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ нСсколько Ρ†Π²Π΅Ρ‚Π½Ρ‹Ρ… Ρ‚Π΅Π½Π΅ΠΉ ΠΊ Π½ΠΈΠΆΠ½Π΅ΠΉ ΠΈ ΠΏΡ€Π°Π²ΠΎΠΉ сторонам поля, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ CSS с вашим Ρ†Π΅Π»Π΅Π²Ρ‹ΠΌ элСмСнтом HTML:

box-shadow: rgba(240, 46, 170, 0.4) 5px 5px, rgba(240, 46, 170, 0.3) 10px 10px, rgba(240, 46, 170, 0.2) 15px 15px, rgba(240, 46, 170, 0.1) 20px 20px, rgba(240, 46, 170, 0.05) 25px 25px;

13 Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ свСтлыС Ρ‚Π΅Π½ΠΈ Π½Π° Π»Π΅Π²ΡƒΡŽ ΠΈ ΠΏΡ€Π°Π²ΡƒΡŽ стороны, распространитС Ρ‚Π΅Π½ΡŒ Π½Π° ниТнюю Ρ‡Π°ΡΡ‚ΡŒ.

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π»Π΅Π³ΠΊΠΈΠ΅ Ρ‚Π΅Π½ΠΈ ΠΊ Π»Π΅Π²ΠΎΠΉ ΠΈ ΠΏΡ€Π°Π²ΠΎΠΉ сторонам ΠΈ Ρ€Π°ΡΠΏΡ€ΠΎΡΡ‚Ρ€Π°Π½ΠΈΡ‚ΡŒ Ρ‚Π΅Π½ΡŒ Π½Π° ниТнюю Ρ‡Π°ΡΡ‚ΡŒ поля, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ CSS-ΠΊΠΎΠ΄ box-shadow с вашим Ρ†Π΅Π»Π΅Π²Ρ‹ΠΌ HTML-элСмСнтом:

box-shadow: rgba(0, 0, 0, 0. 09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;

Π˜Π½Ρ‚Π΅Π³Ρ€ΠΈΡ€ΡƒΠΉΡ‚Π΅ CSS с HTML-страницСй

Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π²Ρ‹ Π·Π½Π°Π΅Ρ‚Π΅, ΠΊΠ°ΠΊ Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ классныС эффСкты Ρ‚Π΅Π½ΠΈ Π±Π»ΠΎΠΊΠ° с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π»Π΅Π³ΠΊΠΎ ΠΈΠ½Ρ‚Π΅Π³Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΡ… с элСмСнтами HTML Ρ€Π°Π·Π½Ρ‹ΠΌΠΈ способами.

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ Π΅Π³ΠΎ Π² саму HTML-страницу ΠΈΠ»ΠΈ ΠΏΡ€ΠΈΠΊΡ€Π΅ΠΏΠΈΡ‚ΡŒ ΠΊΠ°ΠΊ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹ΠΉ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚. Π•ΡΡ‚ΡŒ Ρ‚Ρ€ΠΈ способа Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ CSS Π² HTML-Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚:

Π’Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠΉ CSS

ВстроСнныС ΠΈΠ»ΠΈ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠ΅ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ стилСй Π²ΡΡ‚Π°Π²Π»ΡΡŽΡ‚ΡΡ Π² Ρ€Π°Π·Π΄Π΅Π» HTML-Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ элСмСнта . Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ любоС количСство элСмСнтов Π² Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π΅ HTML, Π½ΠΎ ΠΎΠ½ΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ Π·Π°ΠΊΠ»ΡŽΡ‡Π΅Π½Ρ‹ ΠΌΠ΅ΠΆΠ΄Ρƒ Ρ‚Π΅Π³Π°ΠΌΠΈ ΠΈ . Π’ΠΎΡ‚ ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€ΠΈΡ€ΡƒΡŽΡ‰ΠΈΠΉ, ΠΊΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠΉ CSS с HTML-Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ΠΎΠΌ:

<!DOCTYPE html><html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>CSS box-shadow</title> <style type="text/css"> . heading { text-align: center; } .image-box { display: block; margin-left: auto; margin-right: auto; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; } </style> </head> <body> <div> <h3>Style 4<h3> <img src="MUO.jpg"> </div> </body></html>

ВстроСнный CSS

ВстроСнный CSS ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для добавлСния ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹Ρ… стилСвых ΠΏΡ€Π°Π²ΠΈΠ» ΠΊ элСмСнту HTML. Π•Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ с элСмСнтом HTML Ρ‡Π΅Ρ€Π΅Π· Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ стиля. Атрибут style содСрТит свойства CSS Π² Ρ„ΠΎΡ€ΠΌΠ΅ «свойство: Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅Β», Ρ€Π°Π·Π΄Π΅Π»Π΅Π½Π½Ρ‹Π΅ Ρ‚ΠΎΡ‡ΠΊΠΎΠΉ с запятой (; ).

ВсС свойства CSS Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ Π² ΠΎΠ΄Π½ΠΎΠΉ строкС, Ρ‚.Π΅. ΠΌΠ΅ΠΆΠ΄Ρƒ свойствами CSS Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ Ρ€Π°Π·Ρ€Ρ‹Π²ΠΎΠ² строк. Π’ΠΎΡ‚ ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€ΠΈΡ€ΡƒΡŽΡ‰ΠΈΠΉ, ΠΊΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ встроСнный CSS с HTML-Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ΠΎΠΌ:

<!DOCTYPE html><html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>CSS box-shadow</title> </head> <body> <div> <h3>Style 4<h3> <img src="MUO. jpg"> </div> </body></html>

Π’Π½Π΅ΡˆΠ½ΠΈΠΉ CSS

Π’Π½Π΅ΡˆΠ½ΠΈΠΉ CSS – это Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΠΈΠ΄Π΅Π°Π»ΡŒΠ½Ρ‹ΠΉ способ примСнСния стилСй ΠΊ HTML-Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°ΠΌ. Π’Π½Π΅ΡˆΠ½ΡΡ Ρ‚Π°Π±Π»ΠΈΡ†Π° стилСй содСрТит всС ΠΏΡ€Π°Π²ΠΈΠ»Π° стилСй Π² ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΠΌ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π΅ (Ρ„Π°ΠΉΠ»Π΅ .css), Π·Π°Ρ‚Π΅ΠΌ этот Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ связываСтся с Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ΠΎΠΌ HTML с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ‚Π΅Π³Π° . Π­Ρ‚ΠΎΡ‚ ΠΌΠ΅Ρ‚ΠΎΠ΄ – Π»ΡƒΡ‡ΡˆΠΈΠΉ ΠΌΠ΅Ρ‚ΠΎΠ΄ опрСдСлСния ΠΈ примСнСния стилСй ΠΊ HTML-Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°ΠΌ, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ Π·Π°Ρ‚Ρ€ΠΎΠ½ΡƒΡ‚Ρ‹ΠΉ HTML-Ρ„Π°ΠΉΠ» Ρ‚Ρ€Π΅Π±ΡƒΠ΅Ρ‚ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡŒΠ½Ρ‹Ρ… ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ. Π’ΠΎΡ‚ ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€ΠΈΡ€ΡƒΡŽΡ‰ΠΈΠΉ, ΠΊΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ внСшний CSS с HTML-Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ΠΎΠΌ:

Π‘ΠΎΠ·Π΄Π°ΠΉΡ‚Π΅ Π½ΠΎΠ²Ρ‹ΠΉ Ρ„Π°ΠΉΠ» CSS с Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠ΅ΠΌ .css. Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ Π² этот Ρ„Π°ΠΉΠ» ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ ΠΊΠΎΠ΄ CSS:

.heading { text-align: center;}.image-box { display: block; margin-left: auto; margin-right: auto; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;}

НаконСц, создайтС HTML-Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ ΠΈ Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ Π² Π½Π΅Π³ΠΎ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ ΠΊΠΎΠ΄:

<!DOCTYPE html><html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>CSS box-shadow</title> <link rel="stylesheet" href="styles. css"> </head> <body> <div> <h3>Style 4<h3> <img src="MUO.jpg"> </div> </body></html>

ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ Ρ„Π°ΠΉΠ» CSS связан с Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ΠΎΠΌ HTML Ρ‡Π΅Ρ€Π΅Π· Ρ‚Π΅Π³ ΠΈ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ href.

ВсС Ρ‚Ρ€ΠΈ Π²Ρ‹ΡˆΠ΅ΡƒΠΏΠΎΠΌΡΠ½ΡƒΡ‚Ρ‹Ρ… ΠΌΠ΅Ρ‚ΠΎΠ΄Π° (Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠΉ CSS, встроСнный CSS ΠΈ внСшний CSS) Π±ΡƒΠ΄ΡƒΡ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ ΠΎΠ΄ΠΈΠ½ ΠΈ Ρ‚ΠΎΡ‚ ΠΆΠ΅ Π²Ρ‹Π²ΠΎΠ΄ –

Π‘Π΄Π΅Π»Π°ΠΉΡ‚Π΅ свою Π²Π΅Π±-страницу элСгантной с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS

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

К ΡΡ‡Π°ΡΡ‚ΡŒΡŽ, CSS ΡƒΠ΄ΠΎΠ±Π΅Π½ для Π½ΠΎΠ²ΠΈΡ‡ΠΊΠΎΠ². Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ ΠΎΡ‚Π»ΠΈΡ‡Π½ΡƒΡŽ ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΡƒ, Π½Π°Ρ‡Π°Π² с Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… простых ΠΊΠΎΠΌΠ°Π½Π΄ ΠΈ ΡƒΠ²ΠΈΠ΄Π΅Π², ΠΊΡƒΠ΄Π° вас ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Ρ‚ вашС творчСство.

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ записи: www.makeuseof.com

Π₯итрая Ρ‚Π΅Π½ΡŒ: olmokhov β€” LiveJournal

?
Category:
  • catIsShown({ humanName: β€˜it’ })Β» data-human-name=Β»itΒ»> IT
  • Cancel
Π”Π°Π²Π½ΠΎ ΠΌΡƒΡ‡Π°ΡŽΡΡŒ Π·Π°Π΄Π°Ρ‡ΠΊΠΎΠΉ Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ Ρ…ΠΈΡ‚Ρ€ΠΎΠΉ Ρ‚Π΅Π½ΠΈ. Π”ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρ‹ Π½Π°ΡƒΡ‡ΠΈΠ»ΠΈΡΡŒ Ρ€ΠΈΡΠΎΠ²Π°Ρ‚ΡŒ ΠΎΡ‡Π΅Π½ΡŒ красивыС ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ с Ρ‚Π΅Π½ΡŽΡˆΠΊΠ°ΠΌΠΈ, Π½ΠΎ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ° Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ Ρ‚Π΅Π½ΡŒ Π² Ρ‚Π°ΠΊΠΈΡ… ΠΌΠ°ΠΊΠ΅Ρ‚Π°Ρ… ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΠ΄Ρ‚ΠΈ довольно нСпрСдсказумым ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Π²ΠΎΡ‚ Ρ‚Π°ΠΊ:

ΠžΡ‚Π±Ρ€Π°ΡΡ‹Π²Π°Ρ Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΡŽ Π² ΡƒΠΌΠΈΡ€Π°ΡŽΡ‰ΠΈΡ… ΠΈ Π² ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΠ΅ Ρ‚ΠΎΡ€ΠΌΠΎΠ·Π½Ρ‹Ρ… Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ… Ρ‚ΠΈΠΏΠ° IE сосрСдоточимся Π½Π° Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ Π² Π½ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½Ρ‹Ρ… Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ…. ΠšΠΎΠΌΡƒ хочСтся, Π΅ΡΡ‚ΡŒ ΡΡ‚Π°Ρ‚ΡŒΡ ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Ρ‚Π΅Π½ΡŒ кроссбраузСрной.

Π˜Ρ‚Π°ΠΊ, Ρƒ нас Π΅ΡΡ‚ΡŒ Π·Π°ΠΌΠ΅Ρ‡Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ CSS-свойство box-shadow, Π½ΠΎ с Π½ΠΈΠΌ сущСствуСт ΠΊΠ°ΠΊ ΠΌΠΈΠ½ΠΈΠΌΡƒΠΌ Π΄Π²Π΅ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹: Π²ΠΎ-ΠΏΠ΅Ρ€Π²Ρ‹Ρ… Ρ‚Π΅Π½ΡŒ нСльзя Π·Π°Π΄Π°Ρ‚ΡŒ с ΠΎΠ΄Π½ΠΎΠΉ стороны, Π²ΠΎ-Π²Ρ‚ΠΎΡ€Ρ‹Ρ… Π΄Π²Π° Π±Π»ΠΎΠΊΠ°, ΠΈΠΌΠ΅ΡŽΡ‰ΠΈΠ΅ Ρ‚Π΅Π½ΡŒ ΠΈ находящиСся рядом Π½Π΅ΠΈΠ·ΠΌΠ΅Π½Π½ΠΎ Π±ΡƒΠ΄ΡƒΡ‚ ΠΎΠ΄Π½ΠΎΠΉ ΠΈΠ· Ρ‚Π΅Π½Π΅ΠΉ Π½Π°ΠΏΠΎΠ»Π·Π°Ρ‚ΡŒ Π΄Ρ€ΡƒΠ³ Π½Π° Π΄Ρ€ΡƒΠ³Π°, Ρ‡Ρ‚ΠΎ Ρ…ΠΎΡ€ΠΎΡˆΠΎ Π²ΠΈΠ΄Π½ΠΎ Π² ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅.

Π‘Π½Π°Ρ‡Π°Π»Π° я Π΄ΡƒΠΌΠ°Π» Ρ‡Ρ‚ΠΎ ΠΊΠ°ΠΊ-Ρ‚ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π·Π°ΡŽΠ·Π°Ρ‚ΡŒ clip ΠΈ :after, ΠΏΠΎΡ‚ΠΎΠΌ казалось Ρ‡Ρ‚ΠΎ Π²ΠΎΠΎΠ±Ρ‰Π΅ Π½Π΅ сущСствуСт Π½ΠΈΠΊΠ°ΠΊΠΎΠ³ΠΎ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Π° ΡΠΊΠ°Π·Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊΡƒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ‚Π΅Π½ΡŒ Ρƒ Π½Π΅Π³ΠΎ Π±Ρ‹Π»Π° с ΠΎΠ΄Π½ΠΎΠΉ стороны, Ρ‚. ΠΊ для :after Π½ΡƒΠΆΠ½ΠΎ Π±Ρ‹Π»ΠΎ ΡΠΊΠ°Π·Π°Ρ‚ΡŒ height: 100%, ΠΊ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρƒ, Π° ΡΠΊΠ°Π·Π°Ρ‚ΡŒ Π½Π° 2 пиксСля мСньшС свСрху ΠΈ снизу Ρ‚ΡƒΡ‚ Π½ΠΈΠΊΠ°ΠΊ. Π˜ Π²Π½Π΅Π·Π°ΠΏΠ½ΠΎ я вспомнил ΠΎΠ΄Π½Ρƒ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΡΡ‚ΡŒ Π±Π»ΠΎΠΊΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ ΠΌΡ‹ Π½Π΅ часто ΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡΡ ΠΈΠ·-Π·Π° отсутствия Π΅Π΅ Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ Π² Π˜Π•: Ссли ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊΡƒ ΠΎΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ top ΠΈ bottom, Ρ‚ΠΎ ΠΎΠ½ растянСтся Π΄ΠΎ Π½ΡƒΠΆΠ½Ρ‹Ρ… Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ².

Бказано, сдСлано:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">
<head>
    <title>ВСнь с Π²Ρ‹Π±Ρ€Π°Π½Π½Ρ‹Ρ… сторон</title>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>

    <style type=Β»text/cssΒ»>
        .box
        {
            position: relative;
           
            width: 100px;
            height: 100px;
            margin-right: 10px;

            float: left;

            background: yellow;
        }

        . box:before
        {

            content: «»;

            position: absolute;
            z-index: -1;

            box-shadow: 0 0 4px #999;
            -webkit-box-shadow: 0 0 4px #999; /* Safari (Π½Π΅ ΠΏΠΎΠ½ΠΈΠΌΠ°Π΅Ρ‚ spread-radius β€” 4я Ρ†ΠΈΡ„Ρ€Π°), Chrome */
            -moz-box-shadow: 0 0 4px #999; /* Firefox */
        }
       
        .one-side:before
        {
            top: 2px;
            bottom: 2px;

            width: 3px;
        }

        .two-side:before
        {
            top: 0;
            bottom: 2px;
            right: 2px;
            left: 0;
        }

        .three-side:before
        {

            top: 0;
            bottom: 2px;
            right: 0;
            left: 0;
        }
    </style>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>   
ΠŸΡ€ΠΈΠΌΠ΅Ρ€. ΠšΠ°ΠΆΠ΅Ρ‚ΡΡ, Ρ‡Ρ‚ΠΎ рСализация Ρ‚Π΅Π½ΠΈ с Π΄Π²ΡƒΡ… сторон ΠΈΠ·Π±Ρ‹Ρ‚ΠΎΡ‡Π½Π° Ρ‚.ΠΊ всСгда Π΅ΡΡ‚ΡŒ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΡΠ΄Π²ΠΈΠ³Π°Ρ‚ΡŒ Ρ‚Π΅Π½ΡŒ, Π½ΠΎ это Π½Π΅ Ρ‚Π°ΠΊ, Ссли Π½ΡƒΠΆΠ½ΠΎ ΠΈΠΌΠ΅Ρ‚ΡŒ Ρ‚Π΅Π½ΡŒ с Ρ‚ΠΎΡ‡Π½ΠΎ Π·Π°Π΄Π°Π½Π½Ρ‹ΠΌΠΈ характСристиками, ΠΈ Π½Π΅ хочСтся ΠΌΡƒΡ‡Π°Ρ‚ΡŒΡΡ с ΠΏΠΎΠ΄Π±ΠΎΡ€ΠΎΠΌ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ. ΠŸΡ€ΠΈΠΌΠ΅Π½ΠΈΠΌΠΎΡΡ‚ΡŒ Ρ‚Π°ΠΊΠΎΠΉ Ρ‚Π΅Π½ΠΈ понятна, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ рСализация Ρ‚Π°ΠΊΠΈΡ… Π²Π΅Ρ‰Π΅ΠΉ.

ВСрнСмся ΠΊ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρƒ Π²Ρ‹ΡˆΠ΅ ΠΈ ΠΏΠΎΠ΄ΡƒΠΌΠ°Π΅ΠΌ Π½Π°Π΄ Π½ΠΈΠΌ? ΠšΠ°ΠΆΠ΅Ρ‚ся Ρ‡Ρ‚ΠΎ рСализация Ρ‚Π΅Π½ΠΈ Π²Π²Π΅Ρ€Ρ…Ρƒ такая: Ρ‚Π΅Π½ΡŒ с Ρ‚Ρ€Π΅Ρ… сторон Ρƒ ΠΏΠ΅Ρ€Π²ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°, ΠΈ с Ρ‡Π΅Ρ‚Ρ‹Ρ€Π΅Ρ… Ρƒ Π²Ρ‚ΠΎΡ€ΠΎΠ³ΠΎ. ΠΠΎ Ρ‚ΠΎΠ³Π΄Π° Ρ‚Π΅Π½ΡŒ ΠΎΡ‚ Π²Ρ‚ΠΎΡ€ΠΎΠ³ΠΎ Π½Π°Π»Π΅Π·Π΅Ρ‚ Π½Π° ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ! Π•Ρ‰Ρ‘ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ΄ΡƒΠΌΠ°Π² я написал ΠΎΡ‡Π΅Π½ΡŒ просто:

.four-side:before
{
    width: 100%;
    height: 100%;
}

ИмСя для Π±Π»ΠΎΠΊΠ° с :before z-index: -1 ΠΌΡ‹ Π³Π°Ρ€Π°Π½Ρ‚ΠΈΡ€ΡƒΠ΅ΠΌ Ρ‡Ρ‚ΠΎ любой Π±Π»ΠΎΠΊ Π½Π°ΠΊΡ€ΠΎΠ΅Ρ‚ Π΅Π³ΠΎ свСрху ΠΈ Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΠ³Ρ€Π°Ρ‚ΡŒΡΡ с z-index’ами рядом ΠΈΠ΄ΡƒΡ‰ΠΈΡ… Π±Π»ΠΎΠΊΠΎΠ² ΠΈΠ»ΠΈ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ всякого Ρ€ΠΎΠ΄Π° ΠΏΠ΅Ρ€Π΅ΠΊΡ€Ρ‹Π²Π°ΡˆΠΊΠΈ эти Ρ‚Π΅Π½Π΅ΠΉ. А самоС Π³Π»Π°Π²Π½ΠΎΠ΅ ΠΈ для Π±Π»ΠΎΠΊΠ° свСрху ΠΌΠΎΠΆΠ½ΠΎ Ρ‚Π°ΠΊΠΆΠ΅ ΡΠΊΠ°Π·Π°Ρ‚ΡŒ Ρ‡Ρ‚ΠΎ Ρ‚Π΅Π½ΡŒ Ρƒ Π½Π΅Π³ΠΎ с Ρ‡Π΅Ρ‚Ρ‹Ρ€Π΅Ρ… сторон. Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ Π΄Π΅Π»Π°Ρ‚ΡŒ Π³ΠΎΡ€Π°Π·Π΄ΠΎ Π±ΠΎΠ»Π΅Π΅ ΡΠ»ΠΎΠΆΠ½ΡƒΡŽ Ρ‚Π΅Π½ΡŒ, Ρ‡Π΅ΠΌ Π½Π°ΠΌ позволяСт спСцификация. НапримСр

Subscribe

  • 34-ΠΉ Ρ‚Ρ€Π°ΠΌΠ²Π°ΠΉ

    Π›ΡŽΠ±ΠΎΠ΅ Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΠ΅ Π½Π°Π΄ΠΎ Π½Π°Ρ‡ΠΈΠ½Π°Ρ‚ΡŒ с ΠΌΠ°Π»ΠΎΠ³ΠΎ. НСльзя ΠΏΠ°Ρ€Ρƒ Ρ€Π°Π· ΡΡ…ΠΎΠ΄ΠΈΡ‚ΡŒ Π² спортзал, ΠΏΠΎΡ‚Ρ€Π΅Π½ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ Π½Π° ΡƒΠ±ΠΎΠΉ ΠΈ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ Ρ€Π΅Π»ΡŒΠ΅Ρ„ ΠΈ бицСпсы. НуТно планомСрно…

  • ΠŸΡ€ΠΎ ΠΏΠ»Π°Ρ‚Π½Ρ‹Π΅ ΠΏΠ°Ρ€ΠΊΠΎΠ²ΠΊΠΈ-2

    Π£Π΄ΠΈΠ²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ рядом! БовсСм Π½Π΅Π΄Π°Π²Π½ΠΎ я описал Π² постС ΠΎ ΠΏΠ»Π°Ρ‚Π½Ρ‹Ρ… ΠΏΠ°Ρ€ΠΊΠΎΠ²ΠΊΠ°Ρ… Π² Π•ΠΊΠ°Ρ‚Π΅Ρ€ΠΈΠ½Π±ΡƒΡ€Π³Π΅ свои изыскания Π½Π° ΠΈΡ… счёт. НС особо рассчитывал Π½Π° ΠΎΠ±Ρ€Π°Ρ‚Π½ΡƒΡŽβ€¦

  • ΠŸΡ€ΠΎ Π²ΠΎΠ΄Ρƒ ΠΈΠ·-ΠΏΠΎΠ΄ ΠΊΡ€Π°Π½Π°

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

Photo

Hint http://pics.livejournal.com/igrick/pic/000r1edq

Как ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ CSS box-shadow: 13 ΠΏΡ€ΠΈΠ΅ΠΌΠΎΠ² ΠΈ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ²

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

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

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ Ρ‚Π΅Π½ΡŒ ΠΎΠΊΠ½Π° CSS?

Бвойство box-shadow ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для примСнСния Ρ‚Π΅Π½ΠΈ ΠΊ элСмСнтам HTML. Π­Ρ‚ΠΎ ΠΎΠ΄Π½ΠΎ ΠΈΠ· Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ часто ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹Ρ… свойств CSS для стилизации Π±Π»ΠΎΠΊΠΎΠ² ΠΈΠ»ΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ.

Бинтаксис CSS:

 box-shadow: [смСщСниС ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ] [смСщСниС ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ] [радиус размытия] [Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ радиус распространСния] [Ρ†Π²Π΅Ρ‚]; 
  1. смСщСниС ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ: Если смСщСниС ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ ΠΏΠΎΠ»ΠΎΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅, Ρ‚Π΅Π½ΡŒ Π±ΡƒΠ΄Π΅Ρ‚ справа ΠΎΡ‚ ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊΠ°. А Ссли Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ смСщСниС ΠΎΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠ΅, Ρ‚Π΅Π½ΡŒ Π±ΡƒΠ΄Π΅Ρ‚ слСва ΠΎΡ‚ поля.
  2. Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ смСщСниС:  Π•сли Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ смСщСниС ΠΏΠΎΠ»ΠΎΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅, Ρ‚Π΅Π½ΡŒ Π±ΡƒΠ΄Π΅Ρ‚ Π½ΠΈΠΆΠ΅ поля. И Ссли Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ смСщСниС ΠΎΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠ΅, Ρ‚Π΅Π½ΡŒ Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹ΡˆΠ΅ Π±Π»ΠΎΠΊΠ°.
  3. радиус размытия: Π§Π΅ΠΌ Π²Ρ‹ΡˆΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅, Ρ‚Π΅ΠΌ Π±ΠΎΠ»Π΅Π΅ Ρ€Π°Π·ΠΌΡ‹Ρ‚ΠΎΠΉ Π±ΡƒΠ΄Π΅Ρ‚ Ρ‚Π΅Π½ΡŒ.
  4. радиус распространСния: ΠžΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, насколько Π΄ΠΎΠ»ΠΆΠ½Π° Ρ€Π°ΡΠΏΡ€ΠΎΡΡ‚Ρ€Π°Π½ΡΡ‚ΡŒΡΡ Ρ‚Π΅Π½ΡŒ. ΠŸΠΎΠ»ΠΎΠΆΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ значСния ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΠ²Π°ΡŽΡ‚ распространСниС Ρ‚Π΅Π½ΠΈ, ΠΎΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ значСния ΡƒΠΌΠ΅Π½ΡŒΡˆΠ°ΡŽΡ‚ распространСниС.
  5. Π¦Π²Π΅Ρ‚:  ΠžΠ·Π½Π°Ρ‡Π°Π΅Ρ‚ Ρ†Π²Π΅Ρ‚ Ρ‚Π΅Π½ΠΈ. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, ΠΎΠ½ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ любой Ρ†Π²Π΅Ρ‚ΠΎΠ²ΠΎΠΉ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚, Ρ‚Π°ΠΊΠΎΠΉ ΠΊΠ°ΠΊ rgba, hex ΠΈΠ»ΠΈ hsla.

ΠŸΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ размытия, распространСния ΠΈ Ρ†Π²Π΅Ρ‚Π° ΡΠ²Π»ΡΡŽΡ‚ΡΡ Π½Π΅ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌΠΈ. Бамая интСрСсная Ρ‡Π°ΡΡ‚ΡŒ box-shadow Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π·Π°ΠΏΡΡ‚ΡƒΡŽ для раздСлСния Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ box-shadow любоС количСство Ρ€Π°Π·. Π­Ρ‚ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для создания Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… Π³Ρ€Π°Π½ΠΈΡ† ΠΈ Ρ‚Π΅Π½Π΅ΠΉ Π½Π° элСмСнтах.

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΎΡ‡Π΅Π½ΡŒ тусклыС Ρ‚Π΅Π½ΠΈ ΠΊ Ρ‚Ρ€Π΅ΠΌ сторонам (слСва, справа ΠΈ снизу) Π±Π»ΠΎΠΊΠ°, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ CSS-ΠΊΠΎΠ΄ box-shadow с вашим Ρ†Π΅Π»Π΅Π²Ρ‹ΠΌ элСмСнтом HTML:

 box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; 

Π’Ρ‹Π²ΠΎΠ΄:

2. Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ Ρ‚ΡƒΡΠΊΠ»ΡƒΡŽ Ρ‚Π΅Π½ΡŒ ΠΊΠΎ всСм сторонам

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ свСтлыС Ρ‚Π΅Π½ΠΈ ΠΊΠΎ всСм сторонам Π±Π»ΠΎΠΊΠ°, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ CSS-ΠΊΠΎΠ΄ box-shadow с вашим Ρ†Π΅Π»Π΅Π²Ρ‹ΠΌ элСмСнтом HTML:

 box-shadow: rgba(100, 100, 111, 0. 2) 0px 7px 29px 0px; 

Π’Ρ‹Π²ΠΎΠ΄:

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Ρ‚Π΅Π½ΠΈ ΠΊ Π½ΠΈΠΆΠ½Π΅ΠΉ ΠΈ ΠΏΡ€Π°Π²ΠΎΠΉ сторонам Π±Π»ΠΎΠΊΠ°, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ CSS-ΠΊΠΎΠ΄ box-shadow с вашим Ρ†Π΅Π»Π΅Π²Ρ‹ΠΌ HTML-элСмСнтом:

 box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px; 

Π’Ρ‹Π²ΠΎΠ΄:

4. Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ Ρ‚Π΅ΠΌΠ½ΡƒΡŽ Ρ‚Π΅Π½ΡŒ ΠΊΠΎ всСм сторонам

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Ρ‚Π΅ΠΌΠ½ΡƒΡŽ Ρ‚Π΅Π½ΡŒ ΠΊΠΎ всСм сторонам Π±Π»ΠΎΠΊΠ°, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ CSS-ΠΊΠΎΠ΄ box-shadow с вашим Ρ†Π΅Π»Π΅Π²Ρ‹ΠΌ элСмСнтом HTML:

 box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; 

Π’Ρ‹Π²ΠΎΠ΄:

5. Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ Ρ‚Π΅Π½ΡŒ Π½Π° всС стороны

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Ρ‚Π΅Π½ΡŒ ΠΊΠΎ всСм сторонам Π±Π»ΠΎΠΊΠ°, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΡƒΡŽ ΠΊΠΎΠΌΠ°Π½Π΄Ρƒ с вашим Ρ†Π΅Π»Π΅Π²Ρ‹ΠΌ элСмСнтом HTML:

 box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba( 0, 0, 0, 0,17) 0 пиксСлСй 12 пиксСлСй 13 пиксСлСй, rgba (0, 0, 0, 0,09) 0 пиксСлСй -3 пиксСлСй 5 пиксСлСй; 

Π’Ρ‹Π²ΠΎΠ΄:

6.

Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ Ρ‚ΠΎΠ½ΠΊΡƒΡŽ Ρ‚Π΅Π½ΡŒ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ со всСх сторон

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΏΡ€ΠΎΡΡ‚ΡƒΡŽ Ρ‚Π΅Π½ΡŒ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ ΠΊΠΎ всСм сторонам Π±Π»ΠΎΠΊΠ°, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ CSS с вашим Ρ†Π΅Π»Π΅Π²Ρ‹ΠΌ элСмСнтом HTML:

 box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px вставка ; 

Π’Ρ‹Π²ΠΎΠ΄:

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Ρ‚Π΅Π½ΡŒ ΠΊ Π½ΠΈΠΆΠ½Π΅ΠΉ ΠΈ Π»Π΅Π²ΠΎΠΉ сторонам Π±Π»ΠΎΠΊΠ°, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ CSS-ΠΊΠΎΠ΄ box-shadow с вашим Ρ†Π΅Π»Π΅Π²Ρ‹ΠΌ элСмСнтом HTML:

 box-shadow: rgba(0, 0, 0, 0.1) -4px 9px 25px -6px; 

Π’Ρ‹Π²ΠΎΠ΄:

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΡΠ²Π΅Ρ‚Π»ΡƒΡŽ Ρ‚Π΅Π½ΡŒ ΠΊ Π²Π΅Ρ€Ρ…Π½Π΅ΠΉ ΠΈ Π»Π΅Π²ΠΎΠΉ сторонам поля, Π° Ρ‚Π°ΠΊΠΆΠ΅ Ρ‚Π΅ΠΌΠ½ΡƒΡŽ Ρ‚Π΅Π½ΡŒ ΠΊ Π½ΠΈΠΆΠ½Π΅ΠΉ ΠΈ ΠΏΡ€Π°Π²ΠΎΠΉ сторонам поля, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ CSS с вашим Ρ†Π΅Π»Π΅Π²Ρ‹ΠΌ элСмСнтом HTML:

 box-shadow: rgba(136, 165, 191, 0,48) 6px 2px 16px 0px, rgba(255, 255, 255, 0,8) -6px -2px 16px 0px; 

Π’Ρ‹Π²ΠΎΠ΄:

9. Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ Ρ‚ΠΎΠ½ΠΊΡƒΡŽ Ρ†Π²Π΅Ρ‚Π½ΡƒΡŽ Ρ‚Π΅Π½ΡŒ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ со всСх сторон

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΏΡ€ΠΎΡΡ‚ΡƒΡŽ Ρ†Π²Π΅Ρ‚Π½ΡƒΡŽ Ρ‚Π΅Π½ΡŒ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ ΠΊΠΎ всСм сторонам Π±Π»ΠΎΠΊΠ°, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ CSS-ΠΊΠΎΠ΄ box-shadow с вашим Ρ†Π΅Π»Π΅Π²Ρ‹ΠΌ элСмСнтом HTML:

 box-shadow: rgba(3, 102, 214, 0. 3) 0px 0px 0px 3px; 

Π’Ρ‹Π²ΠΎΠ΄:

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ нСсколько Ρ†Π²Π΅Ρ‚Π½Ρ‹Ρ… Ρ‚Π΅Π½Π΅ΠΉ ΠΊ Π½ΠΈΠΆΠ½Π΅ΠΉ ΠΈ Π»Π΅Π²ΠΎΠΉ сторонам поля, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ CSS с вашим Ρ†Π΅Π»Π΅Π²Ρ‹ΠΌ HTML-элСмСнтом:

 box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px вставка, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px вставка; 

Π’Ρ‹Π²ΠΎΠ΄:

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ нСсколько Ρ†Π²Π΅Ρ‚Π½Ρ‹Ρ… Π±ΠΎΡ€Π΄ΡŽΡ€Π½Ρ‹Ρ… Ρ‚Π΅Π½Π΅ΠΉ Π² ниТнюю Ρ‡Π°ΡΡ‚ΡŒ Π±Π»ΠΎΠΊΠ°, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ CSS-ΠΊΠΎΠ΄ box-shadow с вашим Ρ†Π΅Π»Π΅Π²Ρ‹ΠΌ элСмСнтом HTML:

 box-shadow: rgba(240, 46, 170, 0.4) 0px 5px, rgba(240, 46, 170, 0.3) 0px 10px, rgba(240, 46, 170, 0.2) 0px 15px, rgba(240, 46, 170, 0,1) 0 пиксСлСй 20 пиксСлСй, rgba (240, 46, 170, 0,05) 0 пиксСлСй 25 пиксСлСй; 

Π’Ρ‹Π²ΠΎΠ΄:

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ нСсколько Ρ†Π²Π΅Ρ‚Π½Ρ‹Ρ… Ρ‚Π΅Π½Π΅ΠΉ ΠΊ Π½ΠΈΠΆΠ½Π΅ΠΉ ΠΈ ΠΏΡ€Π°Π²ΠΎΠΉ сторонам поля, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ CSS с вашим Ρ†Π΅Π»Π΅Π²Ρ‹ΠΌ HTML-элСмСнтом:

 box-shadow: rgba(240, 46, 170, 0.4) 5px 5px, rgba(240, 46, 170, 0. 3) 10px 10px, rgba(240, 46, 170, 0.2) 15px 15px, rgba(240, 46, 170, 0,1) 20 пиксСлСй 20 пиксСлСй, rgba (240, 46, 170, 0,05) 25 пиксСлСй 25 пиксСлСй; 

Π’Ρ‹Π²ΠΎΠ΄:

13. Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ свСтлыС Ρ‚Π΅Π½ΠΈ слСва ΠΈ справа, растянитС Ρ‚Π΅Π½ΡŒ снизу

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π»Π΅Π³ΠΊΠΈΠ΅ Ρ‚Π΅Π½ΠΈ ΠΊ Π»Π΅Π²ΠΎΠΉ ΠΈ ΠΏΡ€Π°Π²ΠΎΠΉ сторонам ΠΈ Ρ€Π°ΡΠΏΡ€ΠΎΡΡ‚Ρ€Π°Π½ΠΈΡ‚ΡŒ Ρ‚Π΅Π½ΡŒ Π½Π° ниТнюю Ρ‡Π°ΡΡ‚ΡŒ Π±Π»ΠΎΠΊΠ°, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ CSS-ΠΊΠΎΠ΄ box-shadow с вашим Ρ†Π΅Π»Π΅Π²Ρ‹ΠΌ элСмСнтом HTML:

 box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0) , 0, 0, 0,09) 0 пиксСлСй 16 пиксСлСй 8 пиксСлСй, rgba (0, 0, 0, 0,09) 0 пиксСлСй 32 пиксСлСй 16 пиксСлСй; 

Π’Ρ‹Π²ΠΎΠ΄:

Π˜Π½Ρ‚Π΅Π³Ρ€Π°Ρ†ΠΈΡ CSS с HTML-страницСй

Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π²Ρ‹ Π·Π½Π°Π΅Ρ‚Π΅, ΠΊΠ°ΠΊ Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ классныС эффСкты Ρ‚Π΅Π½Π΅ΠΉ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS, ΠΈ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π»Π΅Π³ΠΊΠΎ ΠΈΠ½Ρ‚Π΅Π³Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΡ… с элСмСнтами HTML нСсколькими способами.

Бвязано: 11 ΠΏΠΎΠ»Π΅Π·Π½Ρ‹Ρ… инструмСнтов для ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΊΠΈ, очистки ΠΈ ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΠΈ Ρ„Π°ΠΉΠ»ΠΎΠ² CSS

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ Π΅Π³ΠΎ Π² HTML-страницу ΠΈΠ»ΠΈ ΠΏΡ€ΠΈΠΊΡ€Π΅ΠΏΠΈΡ‚ΡŒ ΠΊΠ°ΠΊ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹ΠΉ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚. Π•ΡΡ‚ΡŒ Ρ‚Ρ€ΠΈ способа Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ CSS Π² Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ HTML:

Π’Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠΉ CSS

ВстроСнныС ΠΈΠ»ΠΈ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠ΅ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ стилСй Π²ΡΡ‚Π°Π²Π»ΡΡŽΡ‚ΡΡ Π² Ρ€Π°Π·Π΄Π΅Π» HTML-Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° с использованиСм элСмСнта



Π‘Ρ‚ΠΈΠ»ΡŒ 4





ВстроСнный CSS

ВстроСнный CSS ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для добавлСния ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹Ρ… ΠΏΡ€Π°Π²ΠΈΠ» стиля ΠΊ элСмСнту HTML. Π•Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ с элСмСнтом HTML Ρ‡Π΅Ρ€Π΅Π· Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ стиля . Атрибут стиля содСрТит свойства CSS Π² Π²ΠΈΠ΄Π΅ «свойство: Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅Β» , Ρ€Π°Π·Π΄Π΅Π»Π΅Π½Π½Ρ‹Ρ… Ρ‚ΠΎΡ‡ΠΊΠΎΠΉ с запятой ( ; ).

Бвязано: Π£Π·Π½Π°ΠΉΡ‚Π΅, ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Π΄Π²ΡƒΡ…ΠΌΠ΅Ρ€Π½Ρ‹Π΅ Π²Π΅Π±-сайты с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS Grid

ВсС свойства CSS Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ Π² ΠΎΠ΄Π½ΠΎΠΉ строкС, Ρ‚. Π΅. ΠΌΠ΅ΠΆΠ΄Ρƒ свойствами CSS Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ Ρ€Π°Π·Ρ€Ρ‹Π²ΠΎΠ² строк. Π’ΠΎΡ‚ ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€ΠΈΡ€ΡƒΡŽΡ‰ΠΈΠΉ, ΠΊΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ встроСнный CSS с Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ΠΎΠΌ HTML:

  



CSS-Ρ‚Π΅Π½ΡŒ Π±Π»ΠΎΠΊΠ°

<Ρ‚Π΅Π»ΠΎ>

Π‘Ρ‚ΠΈΠ»ΡŒ 4





Π’Π½Π΅ΡˆΠ½ΠΈΠΉ CSS

Π’Π½Π΅ΡˆΠ½ΠΈΠΉ CSS β€” это самый ΠΈΠ΄Π΅Π°Π»ΡŒΠ½Ρ‹ΠΉ способ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ стили ΠΊ HTML-Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°ΠΌ. Π’Π½Π΅ΡˆΠ½ΡΡ Ρ‚Π°Π±Π»ΠΈΡ†Π° стилСй содСрТит всС ΠΏΡ€Π°Π²ΠΈΠ»Π° стиля Π² ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΠΌ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π΅ (Ρ„Π°ΠΉΠ»Π΅ .css), Π·Π°Ρ‚Π΅ΠΌ этот Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ связываСтся с HTML-Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ΠΎΠΌ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ‚Π΅Π³Π° . Π­Ρ‚ΠΎΡ‚ ΠΌΠ΅Ρ‚ΠΎΠ΄ Π»ΡƒΡ‡ΡˆΠ΅ всСго ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для опрСдСлСния ΠΈ примСнСния стилСй ΠΊ HTML-Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°ΠΌ, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ Π·Π°Ρ‚Ρ€ΠΎΠ½ΡƒΡ‚Ρ‹ΠΉ HTML-Ρ„Π°ΠΉΠ» Ρ‚Ρ€Π΅Π±ΡƒΠ΅Ρ‚ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡŒΠ½Ρ‹Ρ… ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ Π² Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ΅. Π’ΠΎΡ‚ ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€ΠΈΡ€ΡƒΡŽΡ‰ΠΈΠΉ, ΠΊΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ внСшний CSS с Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ΠΎΠΌ HTML:

Π‘ΠΎΠ·Π΄Π°ΠΉΡ‚Π΅ Π½ΠΎΠ²Ρ‹ΠΉ Ρ„Π°ΠΉΠ» CSS с Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠ΅ΠΌ .css . Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ Π² этот Ρ„Π°ΠΉΠ» ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ ΠΊΠΎΠ΄ CSS:

.
 .heading { 
text-align: center;
}
.image-box {
display: block;
ΠΏΠΎΠ»Π΅ слСва: Π°Π²Ρ‚ΠΎ;
ΠΏΠΎΠ»Π΅ справа: Π°Π²Ρ‚ΠΎ;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

НаконСц, создайтС HTML-Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ ΠΈ Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ Π² Π½Π΅Π³ΠΎ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ ΠΊΠΎΠ΄:

  



CSS-Ρ‚Π΅Π½ΡŒ


< body>

Π‘Ρ‚ΠΈΠ»ΡŒ 4





ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ Ρ„Π°ΠΉΠ» CSS связан с Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ΠΎΠΌ HTML Ρ‡Π΅Ρ€Π΅Π· Ρ‚Π΅Π³ ΠΈ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ href .

ВсС Ρ‚Ρ€ΠΈ Π²Ρ‹ΡˆΠ΅ΡƒΠΊΠ°Π·Π°Π½Π½Ρ‹Ρ… ΠΌΠ΅Ρ‚ΠΎΠ΄Π° (Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠΉ CSS, встроСнный CSS ΠΈ внСшний CSS) Π±ΡƒΠ΄ΡƒΡ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ ΠΎΠ΄ΠΈΠ½ ΠΈ Ρ‚ΠΎΡ‚ ΠΆΠ΅ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚-

Π‘Π΄Π΅Π»Π°ΠΉΡ‚Π΅ свою Π²Π΅Π±-страницу элСгантной с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS

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

К ΡΡ‡Π°ΡΡ‚ΡŒΡŽ, CSS ΡƒΠ΄ΠΎΠ±Π΅Π½ для Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‰ΠΈΡ…. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ ΠΎΡ‚Π»ΠΈΡ‡Π½ΡƒΡŽ ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΡƒ, Π½Π°Ρ‡Π°Π² с Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… простых ΠΊΠΎΠΌΠ°Π½Π΄ ΠΈ посмотрСв, ΠΊΡƒΠ΄Π° вас ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Ρ‚ вашС творчСство.

ΠžΠ΄Π½ΠΎΡΡ‚ΠΎΡ€ΠΎΠ½Π½ΡΡ ΠΈΠ»ΠΈ двусторонняя Ρ‚Π΅Π½ΡŒ Π² CSS

ΠšΠ°Ρ‚Π΅Π³ΠΎΡ€ΠΈΠΈ HTML - CSS

Автор Amit Sonkhiya ОбновлСно: ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ LinkBe ΠΏΠ΅Ρ€Π²Ρ‹ΠΌ оставит ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

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

БСгодня ΠΌΡ‹ ΡƒΠ·Π½Π°Π΅ΠΌ, ΠΊΠ°ΠΊ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒ Ρ‚Π΅Π½ΠΈ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΊ Π±Π»ΠΎΠΊΡƒ ΠΈΠ»ΠΈ ΠΊ ΠΎΠ΄Π½ΠΎΠΌΡƒ ΠΈΠ»ΠΈ Π΄Π²ΡƒΠΌ краям. ΠŸΡ€Π΅ΠΆΠ΄Π΅ всСго, ΠΌΡ‹ ΡƒΠ·Π½Π°Π΅ΠΌ, Ρ‡Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ Ρ‚Π΅Π½ΡŒ Π±Π»ΠΎΠΊΠ°, Π° Π·Π°Ρ‚Π΅ΠΌ рассмотрим Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΈΡ… ΠΊ Π±Π»ΠΎΠΊΡƒ с ΠΎΠ΄Π½ΠΎΠΉ ΠΈΠ»ΠΈ Π΄Π²ΡƒΡ… сторон. Π’Π°ΠΊΠΆΠ΅ ΠΏΠΎΠΌΠ½ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎ Π² IE8 ΠΈ ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰Π΅ΠΉ вСрсии Π½Π΅Ρ‚ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΈ.

ПониманиС box shadow

CSS Box Shadow Syntex

box-shadow: Ρ†Π²Π΅Ρ‚ распространСния размытия ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ ΠΈ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ;

 

box-shadow: Ρ†Π²Π΅Ρ‚ распространСния размытия со смСщСниСм ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ ΠΈ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ;

 

  1. Π“ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ смСщСниС Ρ‚Π΅Π½ΠΈ. ΠŸΠΎΠ»ΠΎΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ Ρ‚Π΅Π½ΡŒ Π±ΡƒΠ΄Π΅Ρ‚ отрисована справа ΠΎΡ‚ поля, ΠΎΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ смСщСниС помСстит Ρ‚Π΅Π½ΡŒ слСва ΠΎΡ‚ поля.
  2. Π’Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ смСщСниС Ρ‚Π΅Π½ΠΈ, ΠΏΠΎΠ»ΠΎΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ Ρ‚Π΅Π½ΡŒ Π±ΡƒΠ΄Π΅Ρ‚ Π½ΠΈΠΆΠ΅ Π±Π»ΠΎΠΊΠ°, ΠΎΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ Ρ‚Π΅Π½ΡŒ Π±Π»ΠΎΠΊΠ° Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹ΡˆΠ΅ Π±Π»ΠΎΠΊΠ°.
  3. Радиус размытия являСтся Π½Π΅ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ ΠΈ опрСдСляСт, насколько Π²Π΅Π»ΠΈΠΊΠ° ΠΈ насколько Ρ€Π°Π·ΠΌΡ‹Ρ‚Π° Ρ‚Π΅Π½ΡŒ. Если установлСно Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ 0, Ρ‚Π΅Π½ΡŒ Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π΅Π·ΠΊΠΎΠΉ, Ρ‡Π΅ΠΌ Π²Ρ‹ΡˆΠ΅ число, Ρ‚Π΅ΠΌ Π±ΠΎΠ»Π΅Π΅ Ρ€Π°Π·ΠΌΡ‹Ρ‚ΠΎΠΉ ΠΎΠ½Π° Π±ΡƒΠ΄Π΅Ρ‚. Π­Ρ‚ΠΎ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΎΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ.
  4. Радиус распространСния Ρ‚Π°ΠΊΠΆΠ΅ являСтся Π½Π΅ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ, ΠΏΠΎΠ»ΠΎΠΆΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ значСния ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΠ²Π°ΡŽΡ‚ Ρ€Π°Π·ΠΌΠ΅Ρ€ Ρ‚Π΅Π½ΠΈ, ΠΎΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ значСния ΡƒΠΌΠ΅Π½ΡŒΡˆΠ°ΡŽΡ‚ Ρ€Π°Π·ΠΌΠ΅Ρ€. По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ 0 (Ρ‚Π΅Π½ΡŒ ΠΈΠΌΠ΅Π΅Ρ‚ Ρ‚ΠΎΡ‚ ΠΆΠ΅ Ρ€Π°Π·ΠΌΠ΅Ρ€, Ρ‡Ρ‚ΠΎ ΠΈ Ρ€Π°Π·ΠΌΡ‹Ρ‚ΠΈΠ΅).
  5. Π¦Π²Π΅Ρ‚ Ρ‚Π΅Π½ΠΈ, ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ ΠΊΠ°ΠΊ значСния Ρ†Π²Π΅Ρ‚Π° rgba ΠΈΠ»ΠΈ hsla.

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

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ Ρ‚Π΅Π½ΠΈ

.ΠΊΠΎΡ€ΠΎΠ±ΠΊΠ° { ΡˆΠΈΡ€ΠΈΠ½Π°: 150 пиксСлСй; высота: 150 пиксСлСй; Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°: #eee; ΠΏΠΎΠ»Π΅: 50 пиксСлСй; ΠΏΠ»Ρ‹Ρ‚ΡŒ Π½Π°Π»Π΅Π²ΠΎ; } .box h5 { высота: 150 пиксСлСй; ΠΌΠ°Ρ€ΠΆΠ°: 0; Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅: 0; высота строки: 150 пиксСлСй; Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ тСкста: ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ; } .Ρ‚Π΅Π½ΡŒ { -webkit-box-shadow: 0 0 10px 0 #000000; -moz-box-shadow: 0 0 10px 0 #000000; box-shadow: 0 0 10px 0 #000000; } //html

ВСнь

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

. box {

Width: 150px;

высота: 150 пиксСлСй;

Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°: #eee;

поля: 50px;

ΠΏΠΎΠΏΠ»Π°Π²ΠΎΠΊ: Π»Π΅Π²Ρ‹ΠΉ;

}

 

.box h5 {

высота: 150 пиксСлСй;

поля: 0;

Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅: 0;

высота строки: 150 пиксСлСй;

Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ тСкста: ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ;

}

 

.shadow {

-webkit-box-shadow: 0 0 10px 0 #000000;

-moz-box-shadow: 0 0 10px 0 #000000;

box-shadow: 0 0 10px 0 #000000;

}

 

//html

ВСнь

ΠŸΡ€ΠΈ создании элСмСнта с Π½ΡƒΠ»Π΅Π²Ρ‹ΠΌ смСщСниСм ΠΊΠΎ всСм краям ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½Π° Ρ‚Π΅Π½ΡŒ Π±Π»ΠΎΠΊΠ°.

ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ сами

 

ВСнь ΠΊΠΎΡ€ΠΎΠ±ΠΊΠΈ с ΠΎΠ΄Π½ΠΎΠΉ стороны

ΠžΠ΄Π½ΠΎΡΡ‚ΠΎΡ€ΠΎΠ½Π½ΡΡ Ρ‚Π΅Π½ΡŒ ΠΊΠΎΡ€ΠΎΠ±ΠΊΠΈ

.shadow-Π²Π΅Ρ€Ρ… { -webkit-box-shadow: 0 -8px 10px -6px #000000; -moz-box-shadow: 0 -8px 10px -6px #000000; box-shadow: 0-8px 10px-6px #000000; } . shadow-Π΄Π½ΠΎ { -webkit-box-shadow: 0 8px 10px -6px #000000; -moz-box-shadow: 0 8px 10px -6px #000000; box-shadow: 0 8px 10px -6px #000000; } .shadow-Π»Π΅Π²Ρ‹ΠΉ { -webkit-box-shadow: -8px 0 10px -6px #000000; -moz-box-shadow: -8px 0 10px -6px #000000; box-shadow: -8px 0 10px -6px #000000; } .shadow-ΠΏΡ€Π°Π²ΠΎ { -webkit-box-shadow: 8px 0 10px -6px #000000; -moz-box-shadow: 8px 0 10px -6px #000000; box-shadow: 8px 0 10px -6px #000000; } //html

ВСнь свСрху
ВСнь Π²Π½ΠΈΠ·Ρƒ
ВСнь слСва
ВСнь справа

9999

28

29

9999

28

29

9999

29

9999

29

999

29 9

29

27

0003

. shadow-top {

-webkit-box-shadow: 0 -8px 10px -6px #000000;

-moz-box-shadow: 0 -8px 10px -6px #000000;

box-shadow: 0-8px 10px-6px #000000;

}

 

.shadow-bottom {

-webkit-box-shadow: 0 8px 10px -6px #000000;

-moz-box-shadow: 0 8px 10px -6px #000000;

box-shadow: 0 8px 10px -6px #000000;

}

 

.shadow-left {

-webkit-box-shadow: -8px 0 10px -6px #000000;

-moz-box-shadow: -8px 0 10px -6px #000000;

box-shadow: -8px 0 10px -6px #000000;

}

 

.shadow-right {

-webkit-box-shadow: 8px 0 10px -6px #000000;

-moz-box-shadow: 8px 0 10px -6px #000000;

box-shadow: 8px 0 10px -6px #000000;

}

 

//html

ВСнь свСрху

ВСнь снизу

ВСнь слСва

ВСнь справа

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

Как ΠΈ Π² классах Π²Ρ‹ΡˆΠ΅, ΠΌΡ‹ ΠΈΠΌΠ΅Π΅ΠΌ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΠ» радиус размытия Π΄ΠΎ 10 пиксСлСй ΠΈ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ распространСния Π΄ΠΎ ΠΎΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ значСния 6 пиксСлСй, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΊΡ€Ρ‹Ρ‚ΡŒ эффСкт размытия Π½Π° Π΄Ρ€ΡƒΠ³ΠΈΡ… краях ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ΠΎΠ².

Для достиТСния эффСкта ΠΌΡ‹ установили Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ ΠΈ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ смСщСния, ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½ΠΈΠΆΠ΅.

  1. Top Shadow β€” Π½ΡƒΠ»Π΅Π²ΠΎΠ΅ смСщСниС ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ Π½Π°ΠΌ Π½Π΅ Π½ΡƒΠΆΠ½Π° лСвая ΠΈ правая Ρ‚Π΅Π½ΡŒ Π±Π»ΠΎΠΊΠ°. ΠžΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ смСщСниС ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ Π² 8 пиксСлСй, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π°Π΄ ΠΏΠΎΠ»Π΅ΠΌ Π±Ρ‹Π»Π° Ρ‚Π΅Π½ΡŒ.
  2. НиТняя Ρ‚Π΅Π½ΡŒ β€” ΠŸΡ€ΠΎΡΡ‚ΠΎ ΡƒΠ΄Π°Π»ΠΈΡ‚Π΅ Π·Π½Π°ΠΊ минус ΠΏΠ΅Ρ€Π΅Π΄ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΌ смСщСниСм Π² Π²Π΅Ρ€Ρ…Π½Π΅ΠΉ Ρ‚Π΅Π½ΠΈ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ Ρ‚Π΅Π½ΡŒ Π²Π½ΠΈΠ·.
  3. ЛСвая Ρ‚Π΅Π½ΡŒ  β€“ ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΎΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ смСщСниС ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ ΠΏΠΎΠΌΠ΅Ρ‰Π°Π΅Ρ‚ Ρ‚Π΅Π½ΡŒ Π²Π»Π΅Π²ΠΎ, ΠΌΡ‹ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΠ»ΠΈ CSS Ρ‚Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ вмСстС с Π½ΡƒΠ»Π΅Π²Ρ‹ΠΌ смСщСниСм ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ.
  4. ΠŸΡ€Π°Π²Π°Ρ Ρ‚Π΅Π½ΡŒ β€” Π£Π΄Π°Π»Π΅Π½ΠΈΠ΅ Π·Π½Π°ΠΊΠ° (-) ΠΈΠ· Π»Π΅Π²ΠΎΠΉ Ρ‚Π΅Π½ΠΈ CSS сдвинСт Ρ‚Π΅Π½ΡŒ Π²ΠΏΡ€Π°Π²ΠΎ.

 Π’Снь с Π΄Π²ΡƒΡ… сторон

Установка смСщСния ΠΊΠ°ΠΊ ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ, Ρ‚Π°ΠΊ ΠΈ ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ создаст Ρ‚Π΅Π½ΡŒ ΠΊΠΎΡ€ΠΎΠ±ΠΊΠΈ с Π΄Π²ΡƒΡ… сторон.

Двусторонняя Ρ‚Π΅Π½ΡŒ

.shadow-Π»Π΅Π²Ρ‹ΠΉ-Π²Π΅Ρ€Ρ… { -webkit-box-shadow: -8px -8px 10px -6px #000000; -moz-box-shadow: -8px -8px 10px -6px #000000; box-shadow: -8px -8px 10px -6px #000000; } . shadow-Π²Π²Π΅Ρ€Ρ…Ρƒ справа { -webkit-box-shadow: 8px -8px 10px -6px #000000; -moz-box-shadow: 8px -8px 10px -6px #000000; box-shadow: 8px -8px 10px -6px #000000; } .shadow-справа-снизу { -webkit-box-shadow: 8px 8px 10px -6px #000000; -moz-box-shadow: 8px 8px 10px -6px #000000; box-shadow: 8px 8px 10px -6px #000000; } .shadow-Π½ΠΈΠΆΠ½ΠΈΠΉ-Π»Π΅Π²Ρ‹ΠΉ { -webkit-box-shadow: -8px 8px 10px -6px #000000; -moz-box-shadow: -8px 8px 10px -6px #000000; box-shadow: -8px 8px 10px -6px #000000; } //html

ВСнь слСва Π²Π²Π΅Ρ€Ρ…Ρƒ
ВСнь Π²Π²Π΅Ρ€Ρ…Ρƒ справа
ВСнь справа Π²Π½ΠΈΠ·Ρƒ
ВСнь Π²Π½ΠΈΠ·Ρƒ слСва

9999

28

29

9999

28

29

9999

29

9999

29

999

29 9

29

27

0003

. shadow-left-top {

-webkit-box-shadow: -8px -8px 10px -6px #000000;

-moz-box-shadow: -8px -8px 10px -6px #000000;

box-shadow: -8px -8px 10px -6px #000000;

}

 

.shadow-top-right {

-webkit-box-shadow: 8px -8px 10px -6px #000000;

-moz-box-shadow: 8px -8px 10px -6px #000000;

box-shadow: 8px -8px 10px -6px #000000;

}

 

.shadow-right-bottom {

-webkit-box-shadow: 8px 8px 10px -6px #000000;

-moz-box-shadow: 8px 8px 10px -6px #000000;

box-shadow: 8px 8px 10px -6px #000000;

}

 

.shadow-bottom-left {

-webkit-box-shadow: -8px 8px 10px -6px #000000;

-moz-box-shadow: -8px 8px 10px -6px #000000;

box-shadow: -8px 8px 10px -6px #000000;

}

 

//html

ВСнь слСва Π²Π²Π΅Ρ€Ρ…Ρƒ

ВСнь Π²Π²Π΅Ρ€Ρ…Ρƒ справа

ВСнь справа Π²Π½ΠΈΠ·Ρƒ

ВСнь Π²Π½ΠΈΠ·Ρƒ слСва
< /h5>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

ΠŸΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²Π»Π΅Π½ΠΈΠ΅ смСщСния ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ ΠΈ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ ΠΈ ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ ΠΈΡ… ΠΎΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… ΠΈ ΠΏΠΎΠ»ΠΎΠΆΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ создаст Ρ‚Π΅Π½ΠΈ с Π΄Π²ΡƒΡ… сторон элСмСнта, ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½Π° рисункС.

ΠœΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΠΏΡ€ΠΈΡΠ²ΠΎΠΈΡ‚ΡŒ значСния, Ρ€Π°Π·Π΄Π΅Π»Π΅Π½Π½Ρ‹Π΅ запятыми, ΠΎΠ΄Π½ΠΎΠΌΡƒ ΠΈ Ρ‚ΠΎΠΌΡƒ ΠΆΠ΅ свойству, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠΌΠ΅Ρ‚ΡŒ Ρ‚Π΅Π½ΠΈ слСва-справа ΠΈΠ»ΠΈ свСрху-снизу ΠΈΠ»ΠΈ с 3-Ρ… сторон ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°. ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ эти CSS ΠΈ Π΄Π°ΠΉΡ‚Π΅ ΠΌΠ½Π΅ Π·Π½Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚Π΅.

Π‘ΠΎΠ»ΡŒΡˆΠ΅ Ρ‚Π΅Π½ΠΈ CSS

.shadow-Π»Π΅Π²Ρ‹ΠΉ-ΠΏΡ€Π°Π²Ρ‹ΠΉ { -webkit-box-shadow: -8px 0 10px -6px #000000, 8px 0 10px -6px #000000; -moz-box-shadow: -8px 0 10px -6px #000000, 8px 0 10px -6px #000000; box-shadow: -8px 0 10px -6px #000000, 8px 0 10px -6px #000000; } .shadow-Π²Π΅Ρ€Ρ…Π½ΠΈΠΉ-Π½ΠΈΠ· { -webkit-box-shadow: 0-8px 10px-6px #000000, 0 8px 10px-6px #000000; -moz-box-shadow: 0 -8px 10px -6px #000000, 0 8px 10px -6px #000000; box-shadow: 0-8px 10px-6px #000000, 0 8px 10px-6px #000000; }

1

2

3

4

5

6

7

8

10

.Shadow-r-rath. -webkit-box-shadow: -8px 0 10px -6px #000000, 8px 0 10px -6px #000000;

-moz-box-shadow: -8px 0 10px -6px #000000, 8px 0 10px -6px #000000;

box-shadow: -8px 0 10px -6px #000000, 8px 0 10px -6px #000000;

}

 

. shadow-top-bottom {

-webkit-box-shadow: 0 -8px 10px -6px #000000, 0 8px 10px -6px #000000;

-moz-box-shadow: 0 -8px 10px -6px #000000, 0 8px 10px -6px #000000;

box-shadow: 0-8px 10px-6px #000000, 0 8px 10px-6px #000000;

}

ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ эти ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ сами

Π’ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π²Π°ΠΌ Π±ΡƒΠ΄Π΅Ρ‚ интСрСсно

Как Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Ρ‚Π΅Π½ΡŒ Π½Π° ΠΎΠ΄Π½Ρƒ сторону элСмСнта с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS?

ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ обсуТдСниС

Π£Π»ΡƒΡ‡ΡˆΠΈΡ‚ΡŒ ΡΡ‚Π°Ρ‚ΡŒΡŽ

Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ ΡΡ‚Π°Ρ‚ΡŒΡŽ

  • ПослСднСС ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠ΅: 19 Ρ„Π΅Π², 2019

  • Π§ΠΈΡ‚Π°Ρ‚ΡŒ
  • ΠžΠ±ΡΡƒΠ΄ΠΈΡ‚ΡŒ
  • ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ обсуТдСниС

    Π£Π»ΡƒΡ‡ΡˆΠΈΡ‚ΡŒ ΡΡ‚Π°Ρ‚ΡŒΡŽ

    Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ ΡΡ‚Π°Ρ‚ΡŒΡŽ

    Бвойство box-shadow ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для установки Ρ‚Π΅Π½ΠΈ Π±Π»ΠΎΠΊΠ° Π½Π° ΠΎΠ΄Π½ΠΎΠΉ сторонС элСмСнта.

    Бинтаксис:

     box-shadow: h-смСщСниС v-смСщСниС Ρ†Π²Π΅Ρ‚ размытия; 

    значСния box-shadow:

    • h-offset: ВрСбуСтся ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для установки полоТСния Ρ‚Π΅Π½ΠΈ ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ. ΠŸΠΎΠ»ΠΎΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для установки Ρ‚Π΅Π½ΠΈ Π½Π° ΠΏΡ€Π°Π²ΠΎΠΉ сторонС поля, Π° ΠΎΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для установки Ρ‚Π΅Π½ΠΈ Π½Π° Π»Π΅Π²ΠΎΠΉ сторонС поля.
    • v-offset: ВрСбуСтся ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для установки полоТСния Ρ‚Π΅Π½ΠΈ ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ. ΠŸΠΎΠ»ΠΎΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для установки Ρ‚Π΅Π½ΠΈ Π½ΠΈΠΆΠ΅ поля, Π° ΠΎΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для установки Ρ‚Π΅Π½ΠΈ Π½Π°Π΄ ΠΏΠΎΠ»Π΅ΠΌ.
    • blur: Π­Ρ‚ΠΎ Π½Π΅ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚, Ρ€Π°Π±ΠΎΡ‚Π° этого Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² Ρ€Π°Π·ΠΌΡ‹Ρ‚ΠΈΠΈ Ρ‚Π΅Π½ΠΈ ΠΊΠΎΡ€ΠΎΠ±ΠΊΠΈ.
    • разброс: Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для установки Ρ€Π°Π·ΠΌΠ΅Ρ€Π° Ρ‚Π΅Π½ΠΈ. Π Π°Π·ΠΌΠ΅Ρ€ спрСда зависит ΠΎΡ‚ Π²Π΅Π»ΠΈΡ‡ΠΈΠ½Ρ‹ спрСда.
    • Ρ†Π²Π΅Ρ‚: Π­Ρ‚ΠΎ Π½Π΅ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹ΠΉ для установки Ρ†Π²Π΅Ρ‚Π° Ρ‚Π΅Π½ΠΈ.

    ΠŸΡ€ΠΈΠΌΠ΅Ρ€ 1: Π’ этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ устанавливаСтся Ρ‚Π΅Π½ΡŒ Π±Π»ΠΎΠΊΠ° Π² Π½ΠΈΠΆΠ½Π΅ΠΉ части Π±Π»ΠΎΠΊΠ°.

    < html > 9 09 8

    02 < head

         < title

             Box-shadow Property

         title

    < Π‘Ρ‚ΠΈΠ»ΡŒ >

    H2 {

    0887

                 text-align: center;

                 Ρ„ΠΎΠ½: Π·Π΅Π»Π΅Π½Ρ‹ΠΉ;

                 padding-top: 60px;

                 Ρ†Π²Π΅Ρ‚: Π±Π΅Π»Ρ‹ΠΉ;

                 ΡˆΠΈΡ€ΠΈΠ½Π°: 500 пиксСлСй;

                 высота: 130 пиксСлСй;

                 box-shadow: 0 10px 10px синий;

             }

         style >

    head >

       

    < body

         < h2 >GeeksForGeeks h2

    7 9 корпус0886>

    HTML >

    . .

    < HTML >

    986>

    9086

    .0887 head

         < title

             Box-shadow Property

         title

           

        

         < ΡΡ‚ΠΈΠ»ΡŒ >

           

    7

    h20302              text-align: center;

                 Ρ„ΠΎΠ½: Π·Π΅Π»Π΅Π½Ρ‹ΠΉ;

                 padding-top: 60px;

                 Ρ†Π²Π΅Ρ‚: Π±Π΅Π»Ρ‹ΠΉ;

                 ΡˆΠΈΡ€ΠΈΠ½Π°: 500 пиксСлСй;

                 высота: 130 пиксСлСй;

                 box-shadow: -10px 0px 10px синий;

             }

         style >

    head >

       

    < body

    < h2 >GeeksForGeeks h2

    >7 корпус 870003

    HTML >

    Π’Π«Π‘ΠžΠ’ΠΠ― Π”Π•Π’ΠžΠ§ΠšΠ:
    9 . Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΊΠΎΡ€ΠΎΠ±ΠΊΠΈ.

    ΠŸΡ€ΠΈΠΌΠ΅Ρ€ 3: Π’ этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ создаСтся Ρ‚Π΅Π½ΡŒ Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΊΠΎΡ€ΠΎΠ±ΠΊΠΈ.

     

    < html

       

    < head

         < title

             Box-shadow Property

    Ρ‚ΠΈΡ‚ΡƒΠ»

           

        

    8 0 89 8 0 8 8 ΡΡ‚ΠΈΠ»ΡŒ >

             h2 {

                 text-align: center;

                 Ρ„ΠΎΠ½: Π·Π΅Π»Π΅Π½Ρ‹ΠΉ;

                 padding-top: 60px;

                 Ρ†Π²Π΅Ρ‚: Π±Π΅Π»Ρ‹ΠΉ;

                 ΡˆΠΈΡ€ΠΈΠ½Π°: 500 пиксСлСй;

                 высота: 130 пиксСлСй;

                 box-shadow: 0px 10px 20px синяя вставка;

             }

         style >

    head >

       

    < body

         < h2 >GeeksForGeeks h2

    body

       

    html >                    

    Output:


    CSS ВСнь | Π£Π·Π½Π°ΠΉΡ‚Π΅, ΠΊΠ°ΠΊ свойство Drop Shadow Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π² CSS?

    CSS рассматриваСт ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ элСмСнт ΠΊΠ°ΠΊ Π±Π»ΠΎΠΊ. Он прСдоставляСт Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ для стилизации ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ элСмСнта. Но Ρ‡Ρ‚ΠΎ касаСтся Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³Π° элСмСнтов Π½Π° страницС ΠΈ ΠΎΠ±Ρ‰Π΅Π³ΠΎ ΠΌΠ°ΠΊΠ΅Ρ‚Π°, блочная модСль являСтся Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ Π²Π°ΠΆΠ½ΠΎΠΉ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠ΅ΠΉ, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ CSS. Π’ Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΊ этому CSS ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ Π΅Ρ‰Π΅ ΠΎΠ΄Π½Ρƒ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ, ΠΊΠΎΠ³Π΄Π°, рассматривая элСмСнт ΠΊΠ°ΠΊ ΠΊΠΎΡ€ΠΎΠ±ΠΊΡƒ, ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΠΏΡ€ΠΈΠ΄Π°Ρ‚ΡŒ Π΅ΠΌΡƒ эффСкт Ρ‚Π΅Π½ΠΈ. Π­Ρ‚Π° функция ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ называСтся box-shadow, Π½ΠΎ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ Π½Π°Π·Ρ‹Π²Π°Ρ‚ΡŒΡΡ drop-shadow.

    Как ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Ρ‚Π΅Π½ΡŒ?

    Бинтаксис:

    Бинтаксис для ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅ΠΉ Ρ‚Π΅Π½ΠΈ ΠΈΠ»ΠΈ box-shadow ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ:

     box-shadow: Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ смСщСниС Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ смСщСниС радиус размытия радиус распространСния (опция) Ρ†Π²Π΅Ρ‚ 

    Π—Π΄Π΅ΡΡŒ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ смСщСниС относится ΠΊ Ρ‚Π΅Π½ΠΈ слСва ΠΈΠ»ΠΈ справа. Если Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅, Ρ‚ΠΎ Ρ‚Π΅Π½ΡŒ Π±ΡƒΠ΄Π΅Ρ‚ Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½Π° ​​вправо, Π° Ρ‚Π΅Π½ΡŒ Π±ΡƒΠ΄Π΅Ρ‚ Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½Π° ​​влСво для ΠΎΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ значСния. Π‘ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅ ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ относится ΠΊ Π²Π΅Ρ€Ρ…Π½Π΅ΠΉ ΠΈΠ»ΠΈ Π½ΠΈΠΆΠ½Π΅ΠΉ Ρ‚Π΅Π½ΠΈ. Если Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅, Ρ‚Π΅Π½ΡŒ Π±ΡƒΠ΄Π΅Ρ‚ Π²Π½ΠΈΠ·Ρƒ ΠΈΠ»ΠΈ ΠΏΠΎΠ΄ ΠΏΠΎΠ»Π΅ΠΌ, Π° Π² случаС ΠΎΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ значСния Ρ‚Π΅Π½ΡŒ Π±ΡƒΠ΄Π΅Ρ‚ свСрху ΠΈΠ»ΠΈ Π½Π°Π΄ ΠΏΠΎΠ»Π΅ΠΌ. Π Π°Π·ΠΌΡ‹Ρ‚ΠΈΠ΅ опрСдСляСт Ρ€Π΅Π·ΠΊΠΎΡΡ‚ΡŒ Ρ‚Π΅Π½ΠΈ. Π§Π΅ΠΌ большС радиус размытия, Ρ‚Π΅ΠΌ ΠΌΠ΅Π½Π΅Π΅ Ρ€Π΅Π·ΠΊΠΎΠΉ Π±ΡƒΠ΄Π΅Ρ‚ ΠΊΠ°Π·Π°Ρ‚ΡŒΡΡ Ρ‚Π΅Π½ΡŒ. Радиус распространСния β€” Π½Π΅ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€, ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‰ΠΈΠΉ Ρ€Π°Π·ΠΌΠ΅Ρ€ Ρ‚Π΅Π½ΠΈ. Π’ Ρ‚ΠΎ врСмя ΠΊΠ°ΠΊ ΠΏΠΎΠ»ΠΎΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚ больший Ρ€Π°Π·ΠΌΠ΅Ρ€, ΠΎΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚ Π½Π°ΠΎΠ±ΠΎΡ€ΠΎΡ‚. Π¦Π²Π΅Ρ‚ β€” это ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ опрСдСляСт Ρ†Π²Π΅Ρ‚ Ρ‚Π΅Π½ΠΈ.

     box-shadow: none|inset|initial|inherit 

    Π’Ρ‹ΡˆΠ΅ ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Ρ‹ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ значСния, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ со свойством box-shadow. Никто Π½Π΅ даст Ρ‚Π΅Π½ΠΈ для ящика. Вставка даст Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΡŽΡŽ Ρ‚Π΅Π½ΡŒ вмСсто внСшнСй Ρ‚Π΅Π½ΠΈ. Π­Ρ‚ΠΎ свойство являСтся Π½Π΅ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ. Initial установит всС значСния свойства box-shadow Π² Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠ΅ состояниС. И, Π½Π°ΠΊΠΎΠ½Π΅Ρ†, наслСдованиС Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Ρ‚ΡŒ значСния свойств Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ элСмСнта ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΡ… для стилизации Ρ‚Π΅ΠΊΡƒΡ‰Π΅Π³ΠΎ элСмСнта.

    ΠŸΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ CSS Drop Shadow

    Π”Π°Π²Π°ΠΉΡ‚Π΅ рассмотрим нСсколько ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ², Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ½ΡΡ‚ΡŒ, ΠΊΠ°ΠΊ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ свойство drop-shadow Π² CSS:

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

    ДСмонстрация Π±Π°Π·ΠΎΠ²ΠΎΠ³ΠΎ свойства box-shadow с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ внСшнСго CSS.

    • ΠœΡ‹ Π±ΡƒΠ΄Π΅ΠΌ Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Ρ‹Π²Π°Ρ‚ΡŒ этот ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Ρ‡Π΅Ρ€Π΅Π· внСшний CSS. Π˜Ρ‚Π°ΠΊ, ΠΏΡ€Π΅ΠΆΠ΄Π΅ всСго, ΠΌΡ‹ создадим Ρ„Π°ΠΉΠ» CSS.
    • Π’Π°ΠΊ ΠΊΠ°ΠΊ box-shadow ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΈ ΠΊΠ°ΠΊ Ρ‡Π°ΡΡ‚ΡŒ box-model, ΠΌΡ‹ создадим ΡΡ‚ΠΈΠ»ΡŒ box-model для элСмСнта Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°

      .

    Код:

     h3{
    ΡˆΠΈΡ€ΠΈΠ½Π°: 500 пиксСлСй;
    Ρ€Π°Π·ΠΌΠ΅Ρ€ ΡˆΡ€ΠΈΡ„Ρ‚Π°: 18px;
    отступ: 20 пиксСлСй 50 пиксСлСй;
    Π³Ρ€Π°Π½ΠΈΡ†Π°: 10px пунктирная розовая;
    поля: 10px 50px;
    box-shadow: 5px 5px 10px Ρ„ΠΈΠΎΠ»Π΅Ρ‚ΠΎΠ²Ρ‹ΠΉ;
    Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°: свСтло-ΠΊΠΎΡ€Π°Π»Π»ΠΎΠ²Ρ‹ΠΉ;
    Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ тСкста: ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ;
    } 
    • Аналогичным ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ ΠΌΡ‹ создадим Π΅Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ ΡΡ‚ΠΈΠ»ΡŒ для элСмСнта Π°Π±Π·Π°Ρ†Π°

      .

    Код:

     Ρ€{
    высота: 50 пиксСлСй;
    ΡˆΠΈΡ€ΠΈΠ½Π°: 300 пиксСлСй;
    отступ: 10 пиксСлСй;
    Π³Ρ€Π°Π½ΠΈΡ†Π°: 15px Π΄Π²ΠΎΠΉΠ½ΠΎΠΉ свСтло-Π³ΠΎΠ»ΡƒΠ±ΠΎΠΉ;
    поля: 10px 60px;
    box-shadow: -10px 10px 15px 15px сСрый;
    Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°: свСтло-сСрый;
    Π±Π΅Π»Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚;
    сСмСйство ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ²: Arial, Helvetica, Π±Π΅Π· засСчСк;
    Ρ€Π°Π·ΠΌΠ΅Ρ€ ΡˆΡ€ΠΈΡ„Ρ‚Π°: 20px;
    } 
    • Π€Π°ΠΉΠ» CSS послС объСдинСния Π΄Π²ΡƒΡ… ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½Ρ‹Ρ… Π²Ρ‹ΡˆΠ΅ Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚ΠΎΠ² Π΄ΠΎΠ»ΠΆΠ΅Π½ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ.

    Код:

     h3{
    ΡˆΠΈΡ€ΠΈΠ½Π°: 500 пиксСлСй;
    Ρ€Π°Π·ΠΌΠ΅Ρ€ ΡˆΡ€ΠΈΡ„Ρ‚Π°: 18px;
    отступ: 20 пиксСлСй 50 пиксСлСй;
    Π³Ρ€Π°Π½ΠΈΡ†Π°: 10px пунктирная розовая;
    поля: 10px 50px;
    box-shadow: 5px 5px 10px Ρ„ΠΈΠΎΠ»Π΅Ρ‚ΠΎΠ²Ρ‹ΠΉ;
    Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°: свСтло-ΠΊΠΎΡ€Π°Π»Π»ΠΎΠ²Ρ‹ΠΉ;
    Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ тСкста: ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ;
    }
    ΠΏ{
    высота: 50 пиксСлСй;
    ΡˆΠΈΡ€ΠΈΠ½Π°: 300 пиксСлСй;
    отступ: 10 пиксСлСй;
    Π³Ρ€Π°Π½ΠΈΡ†Π°: 15px Π΄Π²ΠΎΠΉΠ½ΠΎΠΉ свСтло-Π³ΠΎΠ»ΡƒΠ±ΠΎΠΉ;
    поля: 10px 60px;
    box-shadow: -10px 10px 15px 15px сСрый;
    Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°: свСтло-сСрый;
    Π±Π΅Π»Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚;
    сСмСйство ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ²: Arial, Helvetica, Π±Π΅Π· засСчСк;
    Ρ€Π°Π·ΠΌΠ΅Ρ€ ΡˆΡ€ΠΈΡ„Ρ‚Π°: 20px;
    } 
    • Π”Π°Π»Π΅Π΅ ΠΌΡ‹ создадим HTML-страницу. ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ это внСшний CSS, ΠΌΡ‹ Π±ΡƒΠ΄Π΅ΠΌ Π²Ρ‹Π·Ρ‹Π²Π°Ρ‚ΡŒ Ρ„Π°ΠΉΠ» CSS Π² Ρ€Π°Π·Π΄Π΅Π»Π΅ head.
    • ΠœΡ‹ Π±ΡƒΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΠ±Π° элСмСнта

      ΠΈ

      , Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΌΡ‹ ΠΌΠΎΠ³Π»ΠΈ Π²ΠΈΠ΄Π΅Ρ‚ΡŒ ΠΎΠΊΠΎΠ½Ρ‡Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Ρ‹ стилСй.

    • ΠžΠΊΠΎΠ½Ρ‡Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ ΠΊΠΎΠ΄ HTML Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ ΠΏΠΎΡ…ΠΎΠΆ Π½Π° этот.

    Код:

     
    <Π³ΠΎΠ»ΠΎΠ²Π°>
    ВСнь ΠΎΠΊΠ½Π° тСстирования
     css">
    
    <Ρ‚Π΅Π»ΠΎ>
     

    Π­Ρ‚ΠΎ тСст для box-shadow ΠΈΠ»ΠΈ drop-shadow

    Π­Ρ‚ΠΎ тСстированиС стиля Π±Π»ΠΎΡ‡Π½ΠΎΠΉ ΠΌΠΎΠ΄Π΅Π»ΠΈ для элСмСнта Π°Π±Π·Π°Ρ†Π°

    • ПослС сохранСния Ρ„Π°ΠΉΠ»Π° Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅.
    • ΠšΠΎΠ½Π΅Ρ‡Π½Ρ‹ΠΉ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ ΠΏΠΎΡ…ΠΎΠΆ Π½Π° ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π½ΠΈΠΆΠ΅:

    Π’Ρ‹Π²ΠΎΠ΄:

    ΠŸΡ€ΠΈΠΌΠ΅Ρ€ #2

    ДСмонстрация Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ «вставки» с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ внСшнСго CSS.

    • По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ box-shadow создаст внСшнюю Ρ‚Π΅Π½ΡŒ для элСмСнта. Однако, Ссли ΠΊΡ‚ΠΎ-Ρ‚ΠΎ Ρ…ΠΎΡ‡Π΅Ρ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°Π·ΠΈΡ‚ΡŒ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΡŽΡŽ Ρ‚Π΅Π½ΡŒ, ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΡƒΡŽ вставку Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ.
    • Как ΠΈ Π² ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰Π΅ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅, сначала ΠΌΡ‹ создадим Ρ„Π°ΠΉΠ» CSS.
    • ΠœΡ‹ стилизуСм элСмСнт Π°Π±Π·Π°Ρ†Π° ΠΈ Π²ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡΡ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠ΅ΠΉ вставки для отобраТСния Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½Π΅ΠΉ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹.
    • ΠžΠΊΠΎΠ½Ρ‡Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ ΠΊΠΎΠ΄ CSS Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ ΠΏΠΎΡ…ΠΎΠΆ Π½Π° этот Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚.

    Код:

     Ρ€{
    высота: 100 пиксСлСй;
    ΡˆΠΈΡ€ΠΈΠ½Π°: 400 пиксСлСй;
    отступ: 15 пиксСлСй;
    Π³Ρ€Π°Π½ΠΈΡ†Π°: 5px пунктирная свСтло-голубая;
    поля: 20px 60px;
    box-shadow: вставка 10px 10px 15px 15px сСрый;
    Ρ†Π²Π΅Ρ‚ синий;
    Ρ€Π°Π·ΠΌΠ΅Ρ€ ΡˆΡ€ΠΈΡ„Ρ‚Π°: 20px;
    сСмСйство ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ²: фэнтСзи;
    } 
    • Π’Π΅ΠΏΠ΅Ρ€ΡŒ, ΠΊΠΎΠ³Π΄Π° Ρ„Π°ΠΉΠ» CSS Π·Π°Π²Π΅Ρ€ΡˆΠ΅Π½, ΠΌΡ‹ ΠΏΠ΅Ρ€Π΅ΠΉΠ΄Π΅ΠΌ ΠΊ ΠΊΠΎΠ΄ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΡŽ HTML-страницы. ΠœΡ‹ Π±ΡƒΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ элСмСнт Π°Π±Π·Π°Ρ†Π°

      , Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ, ΠΊΠ°ΠΊ функция вставки Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ для box-shadow.

    Код:

     
    <Π³ΠΎΠ»ΠΎΠ²Π°>
    ВСнь ΠΎΠΊΠ½Π° тСстирования
    
    
    <Ρ‚Π΅Π»ΠΎ>
    

    Π­Ρ‚ΠΎ тСстированиС стиля вставки Ρ‚Π΅Π½ΠΈ Π±Π»ΠΎΠΊΠ° для элСмСнта Π°Π±Π·Π°Ρ†Π°

    Π­Ρ‚ΠΎ Π²Ρ‚ΠΎΡ€ΠΎΠΉ тСст для вставки box-shadow

    • Π‘ΠΎΡ…Ρ€Π°Π½Π΅Π½ΠΈΠ΅ этого HTML-Ρ„Π°ΠΉΠ»Π° ΠΈ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΠΈΠ΅ Π΅Π³ΠΎ Π² любом Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π΄Π°Ρ‚ΡŒ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π½ΠΎ Ρ‚Π°ΠΊΠΎΠΉ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚.

    Π’Ρ‹Π²ΠΎΠ΄:

    ΠŸΡ€ΠΈΠΌΠ΅Ρ€ #3

    ДСмонстрация Ρ‚Π΅Π½ΠΈ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ встроСнного CSS.

    • ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ Π² этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΌΡ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ встроСнный CSS, ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ Π½Π°ΠΏΡ€ΡΠΌΡƒΡŽ ΠΊΠΎΠ΄ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ HTML-страницу.
    • ΠœΡ‹ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ ΡΡ‚ΠΈΠ»ΡŒ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ стиля для элСмСнта Π°Π±Π·Π°Ρ†Π°

      .

    Код:

     
    <Π³ΠΎΠ»ΠΎΠ²Π°>
    ВСстированиС Ρ‚Π΅Π½ΠΈ
    
    <Ρ‚Π΅Π»ΠΎ>
    

    ВСстированиС Ρ‚Π΅Π½ΠΈ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ встроСнного CSS

    • Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚Π΅ эту HTML-страницу ΠΈ ΠΎΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ Π²Ρ‹Π²ΠΎΠ΄.

    Π’Ρ‹Π²ΠΎΠ΄:

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

    Π Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΠ΅ΠΌΡ‹Π΅ ΡΡ‚Π°Ρ‚ΡŒΠΈ

    Π­Ρ‚ΠΎ руководство ΠΏΠΎ CSS Drop Shadow. Π—Π΄Π΅ΡΡŒ ΠΌΡ‹ обсудим ΠΊΡ€Π°Ρ‚ΠΊΠΈΠΉ ΠΎΠ±Π·ΠΎΡ€ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Ρ‚Π΅Π½ΡŒ с Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹ΠΌΠΈ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°ΠΌΠΈ, Π° Ρ‚Π°ΠΊΠΆΠ΅ Π΅Π΅ Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΡŽ Π² ΠΊΠΎΠ΄Π΅. Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΡ€ΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅ΠΌΡ‹Π΅ Π½Π°ΠΌΠΈ ΡΡ‚Π°Ρ‚ΡŒΠΈ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ·Π½Π°Ρ‚ΡŒ большС –

    1. ΠšΠΎΠΌΠ°Π½Π΄Ρ‹ CSS
    2. Вопросы для ΠΈΠ½Ρ‚Π΅Ρ€Π²ΡŒΡŽ ΠΏΠΎ CSS
    3. ВнутрСнняя Π³Ρ€Π°Π½ΠΈΡ†Π° CSS
    4. Бписки CSS

    ВСнь Π² SwiftUI β€” SerialCoder.dev

    ⏱ ВрСмя чтСния: 4 ΠΌΠΈΠ½ΡƒΡ‚Ρ‹

    Π’Π΅Π½ΠΈ довольно часто ΡΠ²Π»ΡΡŽΡ‚ΡΡ Π½Π΅Π΄ΠΎΡΡ‚Π°ΡŽΡ‰ΠΈΠΌ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π²ΠΈΠ΄ Π±ΠΎΠ»Π΅Π΅ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ для ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ, устраняя ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ плоский Π²ΠΈΠ΄ ΠΈ придавая Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΎΡ‰ΡƒΡ‰Π΅Π½ΠΈΠ΅ Π³Π»ΡƒΠ±ΠΈΠ½Ρ‹. Π‘Π΄Π΅Π»Π°Ρ‚ΡŒ это Π² SwiftUI Π»Π΅Π³ΠΊΠΎ; всС, Ρ‡Ρ‚ΠΎ Π½ΡƒΠΆΠ½ΠΎ, это Π²Ρ‹Π·Π²Π°Ρ‚ΡŒ ΠΌΠΎΠ΄ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ прСдставлСния ΠΈ ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‚ΡŒ нСсколько Π°Ρ€Π³ΡƒΠΌΠ΅Π½Ρ‚ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½Π°ΡΡ‚Ρ€Π°ΠΈΠ²Π°ΡŽΡ‚ Ρ‚Π΅Π½ΡŒ.

    ВСнь ΠΌΠΎΠΆΠ΅Ρ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ Π½Π° любом Π²ΠΈΠ΄Π΅ ΠΈ Π΄Π°ΠΆΠ΅ Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ. Π₯отя Π² Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²Π΅ случаСв ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Ρ‚Π΅Π½ΠΈ Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ‚ ΠΏΠΎΠ±ΠΎΡ‡Π½Ρ‹Ρ… эффСктов, ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΡ‚Ρ€Π΅Π±ΠΎΠ²Π°Ρ‚ΡŒΡΡ особый ΡƒΡ…ΠΎΠ΄. Π’ΠΎΡ‚ ΠΏΠΎΡ‡Π΅ΠΌΡƒ я расскаТу ΠΎΠ± этом случаС ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎ ΠΏΠΎΠ·ΠΆΠ΅ Π² этом постС. Π’ΠΎ-ΠΏΠ΅Ρ€Π²Ρ‹Ρ…, Π΄Π°Π²Π°ΠΉΡ‚Π΅ ΠΏΠΎΠΏΡ€ΠΎΠ±ΡƒΠ΅ΠΌ Ρ‚Π΅Π½ΠΈ Π² SwiftUI.

    Π‘Π»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ строки ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‚ тСкст Π² SwiftUI с Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌΠΈ отступами Π²ΠΎΠΊΡ€ΡƒΠ³ Π½Π΅Π³ΠΎ ΠΈ ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠΌ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°:

     

    ВСкст ("ВСнь Π² SwiftUI!")

        .padding()

        .font(.title)

     

    Π§Ρ‚ΠΎΠ±Ρ‹ ΠΎΡ‚Π±Ρ€ΠΎΡΠΈΡ‚ΡŒ Π½Π° Π½Π΅Π³ΠΎ Ρ‚Π΅Π½ΡŒ, ΠΌΠΎΠ΄ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ Π²ΠΈΠ΄Π° shadow Π½ΡƒΠΆΠ½ΠΎ Π²Ρ‹Π·Π²Π°Ρ‚ΡŒ Ρ‚Π°ΠΊ:

    1

    2

    3

    4

    5

    6

     

    Text("ВСнь в SwiftUI!")

        .padding()

        .font(.title)

        .shadow(color: .blue, radius: 5, x: 0, 9y: 5)0003

     

    ΠŸΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²Π»Π΅Π½Π½Ρ‹Π΅ Π°Ρ€Π³ΡƒΠΌΠ΅Π½Ρ‚Ρ‹ Π² порядкС появлСния:

    • Π¦Π²Π΅Ρ‚ Ρ‚Π΅Π½ΠΈ
    • Π‘Ρ‚Π΅ΠΏΠ΅Π½ΡŒ размытия Ρ‚Π΅Π½ΠΈ. Π§Π΅ΠΌ Π²Ρ‹ΡˆΠ΅ это Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅, Ρ‚Π΅ΠΌ Π±ΠΎΠ»Π΅Π΅ Ρ€Π°Π·ΠΌΡ‹Ρ‚ΠΎΠΉ становится Ρ‚Π΅Π½ΡŒ.
    • Π‘ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅ Ρ‚Π΅Π½ΠΈ ΠΏΠΎ оси X.
    • Π‘ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅ Ρ‚Π΅Π½ΠΈ ΠΏΠΎ оси Y.

    Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ Π²Ρ‹ΡˆΠ΅ΠΈΠ·Π»ΠΎΠΆΠ΅Π½Π½ΠΎΠ³ΠΎ Ρ‚Π°ΠΊΠΎΠ²:

    Как Π±Ρ‹Π»ΠΎ сказано Π² Π½Π°Ρ‡Π°Π»Π΅, Ρ‚Π΅Π½ΡŒ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΊ Π»ΡŽΠ±ΠΎΠΌΡƒ Π²ΠΈΠ΄Ρƒ. НапримСр, Π½ΠΈΠΆΠ΅ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ, ΠΊΠ°ΠΊ ΠΎΡ‚Π±Ρ€Π°ΡΡ‹Π²Π°Ρ‚ΡŒ Ρ‚Π΅Π½ΡŒ Π½Π° Ρ„ΠΈΠ³ΡƒΡ€Ρƒ:

    1

    2

    3

    4

    5

    6

     

    RoundedRectangle(cornerRadius: 15)

        .frame(width: 250, height: 100)

        .foregroundColor(Color(UIColor.systemIndigo))

    , xcolor: 3 radius.pink(     .pink(     . : -2, Ρƒ: 2)

     

    ΠœΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ Π½Π°ΠΏΡ€ΡΠΌΡƒΡŽ ΠΎΡ‚Π±Ρ€Π°ΡΡ‹Π²Π°Ρ‚ΡŒ Ρ‚Π΅Π½ΠΈ Π² Ρ†Π²Π΅Ρ‚Π°Ρ…; Π½Π΅ Π·Π°Π±Ρ‹Π²Π°ΠΉΡ‚Π΅, Ρ‡Ρ‚ΠΎ Color β€” это Π²ΠΈΠ΄ Π² SwiftUI:

    1

    2

    3

    4

    5

    6

     

    Color(.darkGray)

        .frame(width: 100, height: 100)

        .clipShape(Circle())

        . shadow(color: .green, x: radius: 4 Π³: 1)

     

    Анимация Ρ‚Π΅Π½ΠΈ

    ЗначСния Ρ‚Π΅Π½ΠΈ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ. Π§Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ это, Π΄Π°Π²Π°ΠΉΡ‚Π΅ ΠΏΡ€Π΅Π΄ΠΏΠΎΠ»ΠΎΠΆΠΈΠΌ, Ρ‡Ρ‚ΠΎ ΠΌΡ‹ Ρ…ΠΎΡ‚ΠΈΠΌ ΠΎΠ±Π½ΠΎΠ²ΠΈΡ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ Ρ†Π²Π΅Ρ‚ Ρ‚Π΅Π½ΠΈ, радиус ΠΈ смСщСниС Π² послСднСм ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ Π²Ρ‹ΡˆΠ΅.

    Для этого Π½Π°ΠΌ Π½ΡƒΠΆΠ½Ρ‹ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ Ρ‡Π΅Ρ‚Ρ‹Ρ€Π΅ свойства, ΠΏΠΎΠΌΠ΅Ρ‡Π΅Π½Π½Ρ‹Π΅ ΠΎΠ±ΠΎΠ»ΠΎΡ‡ΠΊΠΎΠΉ свойства @State; ΠΎΠ½ΠΈ Π±ΡƒΠ΄ΡƒΡ‚ ΠΎΠ±Π½ΠΎΠ²Π»ΡΡ‚ΡŒ прСдставлСниС ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ Ρ€Π°Π·, ΠΊΠΎΠ³Π΄Π° ΠΈΡ… Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ измСняСтся:

    1

    2

    3

    4

    5

    6

     

    @State private var shadowColor: Color = .green

    @State private var shadowRadius: CGFloat = 8

    @State private var shadowX: CGFloat = 20

    @State private var shadowY: CGFloat = 0

     

    Π”Π°Π»Π΅Π΅ ΠΌΡ‹ Π±ΡƒΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ значСния Π²Ρ‹ΡˆΠ΅ΡƒΠΊΠ°Π·Π°Π½Π½Ρ‹Ρ… свойств вмСсто фиксированных Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ для Π°Ρ€Π³ΡƒΠΌΠ΅Π½Ρ‚ΠΎΠ² Ρ‚Π΅Π½ΠΈ:

     

    . shadow(Ρ†Π²Π΅Ρ‚: shadowColor, радиус: shadowRadius, x: shadowX, y: shadowY)

     

    НаконСц, Π΄Π°Π²Π°ΠΉΡ‚Π΅ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΠΌ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΡƒΡŽ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ ΠΏΡ€ΠΈ появлСнии Π²ΠΈΠ΄Π°:

    1

    2

    3

    4

    5

    6

    7

    8

    10

    11

    12

    Color (.darkgray)

    ...

    .Onappear () {

    withanimation (.linear (ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ: 2,5)) {

    ShadowColor = .blue

    ShadeRadius = 2

    Shadowx = -. 5

                shadowY = 5

            }

        }

     

    Π’ΠΎΡ‚ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΉ Π²Ρ‹ΡˆΠ΅ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ:

    Кнопки ΠΈ Ρ‚Π΅Π½ΡŒ

    Кнопка β€” это Π²ΠΈΠ΄ прСдставлСния Π² SwiftUI, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠΎΠΆΠ΅Ρ‚ Π½Π΅ Π΄Π°Ρ‚ΡŒ ΠΆΠ΅Π»Π°Π΅ΠΌΠΎΠ³ΠΎ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π° ΠΏΡ€ΠΈ ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠΈ ΠΊ Π½Π΅ΠΌΡƒ Ρ‚Π΅Π½ΠΈ. Π›ΡƒΡ‡ΡˆΠΈΠΉ способ ΠΏΡ€ΠΎΡΡΠ½ΠΈΡ‚ΡŒ этот ΠΌΠΎΠΌΠ΅Π½Ρ‚ β€” ΠΏΡ€ΠΎΠ΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ Π½Π° ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅.

    НачнСм со ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    Кнопка (ДСйствиС: {}, ΠΌΠ΅Ρ‚ΠΊΠ°: {

    ВСкст («НаТмитС мСня!Β»)

    . font (font.largetitle.lowercasasasmallcaps ())

    .ForegroundColor (Ρ†Π²Π΅Ρ‚ (.darktext))

    . })

    .padding(12)

    .background(Color(.darkGray))

     

    Π—Π΄Π΅ΡΡŒ Π½Π΅Ρ‚ Π½ΠΈΡ‡Π΅Π³ΠΎ слоТного; ΠœΠ΅Ρ‚ΠΊΠ° ΠΊΠ½ΠΎΠΏΠΊΠΈ состоит ΠΈΠ· тСкста, Π° Π΄Π²Π° ΠΌΠΎΠ΄ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€Π° прСдставлСния ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡŽΡ‚ ΠΊ ΠΊΠ½ΠΎΠΏΠΊΠ΅ отступы ΠΈ Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°.

    Π’Π΅ΠΏΠ΅Ρ€ΡŒ установим ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΡƒΡŽ Ρ‚Π΅Π½ΡŒ:

     

    .shadow(Ρ†Π²Π΅Ρ‚: .ΠΆΠ΅Π»Ρ‚Ρ‹ΠΉ, радиус: 8, x: 0, y: 5)

     

    Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ Ρ‚Π°ΠΊΠΎΠΉ:

    Π’ΠΈΠ΄ΠΈΠΌ, Ρ‡Ρ‚ΠΎ Ρ‚Π΅Π½ΡŒ ΠΏΠ°Π΄Π°Π΅Ρ‚ Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½Π° Ρ„ΠΎΡ€ΠΌΡƒ ΠΊΠ½ΠΎΠΏΠΊΠΈ, Π½ΠΎ ΠΈ Π½Π° ΠΌΠ΅Ρ‚ΠΊΡƒ ΠΊΠ½ΠΎΠΏΠΊΠΈ; ВСкстовоС прСдставлСниС Π² этом случаС. Π­Ρ‚ΠΎΡ‚ эффСкт ΠΌΠΎΠΆΠ΅Ρ‚ Π²Π°ΠΌ ΠΏΠΎΠ΄ΠΎΠΉΡ‚ΠΈ, Π½ΠΎ ΠΈΠ½ΠΎΠ³Π΄Π° ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈ Π½Π΅ ΠΏΠΎΠ΄ΠΎΠΉΡ‚ΠΈ.

    Π•ΡΡ‚ΡŒ Π΄Π²Π° способа ΠΏΡ€Π΅Π΄ΠΎΡ‚Π²Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Ρ‚Π΅Π½ΠΈ ΠΊ ΠΌΠ΅Ρ‚ΠΊΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ. ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ β€” Π·Π°ΠΊΡ€ΡƒΠ³Π»ΠΈΡ‚ΡŒ ΡƒΠ³Π»Ρ‹:

    1

    2

    3

    4

    5

    6

    7

    8

     

    Button(action: {}, label: {

        . ..

    })

    ...

    .cornerRadius(8)

    .shadow(color: .yellow, radius: .yellow, radius: .yellow : 0, Ρƒ: 5)

     

    ΠŸΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠ΅ Π²Ρ‹ΡˆΠ΅ дСйствиС ΡƒΠ΄Π°Π»ΠΈΡ‚ Ρ‚Π΅Π½ΡŒ с этикСтки:

    Однако Π±ΡƒΠ΄ΡŒΡ‚Π΅ ΠΎΡ‡Π΅Π½ΡŒ остороТны здСсь ; ΠΌΠΎΠ΄ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ angleRadius Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ ΠΏΠ΅Ρ€Π΅Π΄ ΠΌΠΎΠ΄ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ΠΎΠΌ shadow ! ΠŸΠΎΡ€ΡΠ΄ΠΎΠΊ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΈΠΌΠ΅Π΅Ρ‚ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅! Если Π²Ρ‹ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚Π΅ этот порядок, Ρ‚ΠΎ Π²Ρ‹ ΠΎΠ±Ρ€Π΅ΠΆΠ΅Ρ‚Π΅ Ρ‚Π΅Π½ΡŒ ΠΎΡ‚ Ρ„ΠΎΡ€ΠΌΡ‹ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΈ Ρ€Π°Π·Ρ€Π΅ΡˆΠΈΡ‚Π΅ Π΅Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½Π° этикСткС:

    1

    2

    3

    4

    5

    6

    7

    8

     

    Кнопка (дСйствиС: {}, ΠΌΠ΅Ρ‚ΠΊΠ°: {

        ...

    })

    ...

    .shadow(Ρ†Π²Π΅Ρ‚: .ΠΆΠ΅Π»Ρ‚Ρ‹ΠΉ, радиус: 8, x: 0, y: 5)

    .cornerRadius(8)

     

    Π’Ρ‚ΠΎΡ€ΠΎΠΉ способ ΠΏΡ€Π΅Π΄ΠΎΡ‚Π²Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ ΠΏΠΎΠΏΠ°Π΄Π°Π½ΠΈΠ΅ Ρ‚Π΅Π½ΠΈ Π½Π° ΠΌΠ΅Ρ‚ΠΊΡƒ ΠΊΠ½ΠΎΠΏΠΊΠΈ β€” ΠΈΠ·Π±Π΅Π³Π°Ρ‚ΡŒ использования Ρ†Π²Π΅Ρ‚Π° Ρ„ΠΎΠ½Π° ΠΈ Π·Π°ΠΊΡ€ΡƒΠ³Π»Π΅Π½Π½Ρ‹Ρ… ΡƒΠ³Π»ΠΎΠ². ВмСсто этого ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ Ρ„ΠΈΠ³ΡƒΡ€Ρƒ с Ρ†Π²Π΅Ρ‚ΠΎΠΌ Π·Π°Π»ΠΈΠ²ΠΊΠΈ ΠΈ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚Π΅ Ρ‚Π΅Π½ΡŒ ΠΊ Ρ„ΠΈΠ³ΡƒΡ€Π΅ :

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    Кнопка (ДСйствиС: {}, ΠΌΠ΅Ρ‚ΠΊΠ°: {

    ...

    })

    . ΠŸΠ°Ρ€Π΄ΠΈΠ½Π³ (12)

    . ))

                   .shadow(Ρ†Π²Π΅Ρ‚: .ΠΆΠ΅Π»Ρ‚Ρ‹ΠΉ, радиус: 8, x: 0, y: 5)

    )

     

    Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ Π±ΡƒΠ΄Π΅Ρ‚ Π°Π½Π°Π»ΠΎΠ³ΠΈΡ‡Π΅Π½ ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌΡƒ Π²Ρ‹ΡˆΠ΅:

    РСзюмС

    ΠžΡ‚Π±Ρ€Π°ΡΡ‹Π²Π°Π½ΠΈΠ΅ Ρ‚Π΅Π½ΠΈ Π² прСдставлСниях SwiftUI довольно просто, ΠΊΠ°ΠΊ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²ΠΈΠ΄Π΅Ρ‚ΡŒ Π² этом постС, ΠΈ, Ссли Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅, Ρ‚Π΅Π½ΡŒ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, каТСтся, Ρ‡Ρ‚ΠΎ ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΈ Ρ‚Π΅Π½ΡŒ β€” интСрСсноС сочСтаниС; Π΄Π΅Ρ€ΠΆΠΈΡ‚Π΅ ΠΏΡ€ΠΈΠ΅ΠΌΡ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ я продСмонстрировал Π²Ρ‹ΡˆΠ΅, ΠΏΠΎΠ΄ Ρ€ΡƒΠΊΠ°Π²Π°ΠΌΠΈ, ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ ΠΈΡ…, ΠΊΠΎΠ³Π΄Π° Ρ‚Π΅Π½ΡŒ Π½Π° ΠΏΡƒΠ³ΠΎΠ²ΠΈΡ†Π°Ρ… выглядит Π½Π΅ Ρ‚Π°ΠΊ, ΠΊΠ°ΠΊ Π½Π°Π΄ΠΎ. Бпасибо, Ρ‡Ρ‚ΠΎ Π²Ρ‹ рядом!

    Если Π²Ρ‹ нашли этот пост ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ΠΌ, ΠΏΠΎΠ΄Π΅Π»ΠΈΡ‚Π΅ΡΡŒ ΠΈΠΌ! ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, ΠΏΠΎΠ΄ΠΏΠΈΡˆΠΈΡ‚Π΅ΡΡŒ Π½Π° мою рассылку, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡Π°Ρ‚ΡŒ увСдомлСния ΠΎΠ±ΠΎ всСм Π½ΠΎΠ²ΠΎΠΌ, ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½Π½ΠΎΠΌ здСсь, прямо Π² свой ΠΏΠΎΡ‡Ρ‚ΠΎΠ²Ρ‹ΠΉ ящик, ΠΈ слСдитС Π·Π° ΠΌΠ½ΠΎΠΉ Π² Twitter, YouTube, Medium ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΡ… ΡΠΎΡ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Ρ… сСтях.

      Π― даю согласиС Π½Π° пСриодичСскоС ΠΏΠΎΠ»ΡƒΡ‡Π΅Π½ΠΈΠ΅ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΎΠ½Π½Ρ‹Ρ… Π±ΡŽΠ»Π»Π΅Ρ‚Π΅Π½Π΅ΠΉ ΠΎΡ‚ SerialCoder.dev ΠΎ Π½ΠΎΠ²ΠΎΠΌ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎΠΌ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π΅ ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΡ… ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»Π°Ρ… ΠΈΠ»ΠΈ прСдлоТСниях.

      ΠœΡ‹ ΡƒΠ²Π°ΠΆΠ°Π΅ΠΌ Π²Π°ΡˆΡƒ ΠΊΠΎΠ½Ρ„ΠΈΠ΄Π΅Π½Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ. ΠžΡ‚ΠΏΠΈΡΠ°Ρ‚ΡŒΡΡ Π² любоС врСмя.

      Π‘ΠΎΠ·Π΄Π°Π½ΠΎ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ConvertKit

      ΠΠ°ΡƒΡ‡ΠΈΡ‚Π΅ΡΡŒ ΡƒΡΡ‚Π°Π½Π°Π²Π»ΠΈΠ²Π°Ρ‚ΡŒ ΠΎΠ±Π²ΠΎΠ΄ΠΊΡƒ, Π·Π°Π»ΠΈΠ²ΠΊΡƒ, Ρ‚Π΅Π½ΡŒ ΠΈ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΡŽΡŽ Ρ‚Π΅Π½ΡŒ, Π° Ρ‚Π°ΠΊΠΆΠ΅ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ эффСкты налоТСния для ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΎΠ² Π² Adobe XD.

      1. Руководство ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ Adobe XD
      2. Π’Π²Π΅Π΄Π΅Π½ΠΈΠ΅
        1. Π§Ρ‚ΠΎ Π½ΠΎΠ²ΠΎΠ³ΠΎ Π² Adobe XD
        2. ΠžΠ±Ρ‰ΠΈΠ΅ вопросы
        3. Π”ΠΈΠ·Π°ΠΉΠ½, ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏ ΠΈ публикация с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Adobe XD
        4. БистСмныС трСбования
          1. ВрСбования ΠΊ Π°ΠΏΠΏΠ°Ρ€Π°Ρ‚Π½ΠΎΠΌΡƒ ΠΈ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎΠΌΡƒ ΠΎΠ±Π΅ΡΠΏΠ΅Ρ‡Π΅Π½ΠΈΡŽ
          2. Adobe XD, Big Sur ΠΈ Apple Silicon | macOS 11
        5. ΠžΡΠ½ΠΎΠ²Ρ‹ Ρ€Π°Π±ΠΎΡ‡Π΅Π³ΠΎ пространства
        6. Π˜Π·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ язык прилоТСния Π² Adobe XD
        7. ΠšΠΎΠΌΠΏΠ»Π΅ΠΊΡ‚Ρ‹ для Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса Access
        8. Π‘ΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Π΅ возмоТности Π² Adobe XD
        9. БочСтания клавиш
        10. Π‘ΠΎΠ²Π΅Ρ‚Ρ‹ ΠΈ Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°Ρ†ΠΈΠΈ
        11. Π’Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹ подписки Π½Π° Adobe XD
        12. ИзмСнСния Π² Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠΌ ΠΏΠ»Π°Π½Π΅ XD
      3. Π”ΠΈΠ·Π°ΠΉΠ½
        1. ΠœΠΎΠ½Ρ‚Π°ΠΆΠ½Ρ‹Π΅ области, Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅ ΠΈ слои
          1. Начало Ρ€Π°Π±ΠΎΡ‚Ρ‹ с ΠΌΠΎΠ½Ρ‚Π°ΠΆΠ½Ρ‹ΠΌΠΈ областями
          2. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅ ΠΈ сСтки
          3. Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‡ΠΈΠ²Π°Π΅ΠΌΡ‹Ρ… ΠΌΠΎΠ½Ρ‚Π°ΠΆΠ½Ρ‹Ρ… областСй
          4. Π Π°Π±ΠΎΡ‚Π° со слоями
          5. Π‘ΠΎΠ·Π΄Π°Ρ‚ΡŒ Π³Ρ€ΡƒΠΏΠΏΡ‹ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ
        2. Π€ΠΈΠ³ΡƒΡ€Ρ‹, ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Ρ‹ ΠΈ ΠΏΡƒΡ‚ΠΈ
          1. Π’Ρ‹Π±ΠΎΡ€, ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° ΠΈ ΠΏΠΎΠ²ΠΎΡ€ΠΎΡ‚ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΎΠ²
          2. ΠŸΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°ΠΉΡ‚Π΅, Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°ΠΉΡ‚Π΅, распрСдСляйтС ΠΈ упорядочивайтС ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Ρ‹
          3. Π“Ρ€ΡƒΠΏΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ, Π±Π»ΠΎΠΊΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ, Π΄ΡƒΠ±Π»ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ, ΠΊΠΎΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈ ΠΎΡ‚Ρ€Π°ΠΆΠ°Ρ‚ΡŒ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Ρ‹
          4. Установка ΠΎΠ±Π²ΠΎΠ΄ΠΊΠΈ, Π·Π°Π»ΠΈΠ²ΠΊΠΈ ΠΈ Ρ‚Π΅Π½ΠΈ для ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΎΠ²
          5. Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡŽΡ‰ΠΈΡ…ΡΡ элСмСнтов
          6. Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ пСрспСктивных ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ² с 3D-прСобразованиями
          7. Π Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Ρ‹ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ логичСских ΠΎΠΏΠ΅Ρ€Π°Ρ†ΠΈΠΉ
        3. ВСкст ΠΈ ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹
          1. Π Π°Π±ΠΎΡ‚Π° с инструмСнтами рисования ΠΈ тСкста
          2. Π¨Ρ€ΠΈΡ„Ρ‚Ρ‹ Π² Adobe XD
        4. ΠšΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ ΠΈ состояния
          1. Π Π°Π±ΠΎΡ‚Π° с ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°ΠΌΠΈ
          2. Π Π°Π±ΠΎΡ‚Π° с Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΌΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°ΠΌΠΈ
          3. Π”ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… состояний ΠΊ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°ΠΌ
        5. ΠœΠ°ΡΠΊΠΈΡ€ΠΎΠ²ΠΊΠ° ΠΈ эффСкты
          1. Π‘ΠΎΠ·Π΄Π°Ρ‚ΡŒ маску с Ρ„ΠΈΠ³ΡƒΡ€Π°ΠΌΠΈ
          2. Π Π°Π±ΠΎΡ‚Π° с эффСктами размытия
          3. Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ΠΎΠ²
          4. ΠŸΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ эффСктов налоТСния
        6. ΠœΠ°ΠΊΠ΅Ρ‚
          1. АдаптивноС ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° ΠΈ ограничСния
          2. Π£ΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ фиксированноС Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ для ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² ΠΈ Π³Ρ€ΡƒΠΏΠΏ
          3. Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ динамичСских Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠ² с использованиСм стСков
        7. Π’ΠΈΠ΄Π΅ΠΎ ΠΈ анимация Lottie
          1. Π Π°Π±ΠΎΡ‚Π° с Π²ΠΈΠ΄Π΅ΠΎ
          2. Π‘ΠΎΠ·Π΄Π°Π²Π°ΠΉΡ‚Π΅ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΡ‹ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π²ΠΈΠ΄Π΅ΠΎ
          3. Π Π°Π±ΠΎΡ‚Π° с Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠ΅ΠΉ Lottie
      4. ΠŸΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏ
        1. Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Ρ… ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΎΠ²
        2. АнимированныС ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΡ‹
        3. Бвойства ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π° ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ΡΡ для автоматичСской Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ
        4. Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΎΠ² с ΠΊΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€ΠΎΠΉ ΠΈ Π³Π΅ΠΉΠΌΠΏΠ°Π΄ΠΎΠΌ
        5. Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΎΠ² с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ голосовых ΠΊΠΎΠΌΠ°Π½Π΄ ΠΈ воспроизвСдСния
        6. Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Π²Ρ€Π΅ΠΌΠ΅Π½Π½Ρ‹Ρ… ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΎΠ²
        7. Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π½Π°ΠΊΠ»Π°Π΄ΠΊΠΈ
        8. Π Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° голосовых ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΎΠ²
        9. Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ якорных ссылок
        10. Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ гипСрссылок
        11. ΠŸΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ просмотр ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ² ΠΈ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΎΠ²
      5. ΠžΠ±Ρ‰ΠΈΠΉ доступ, экспорт ΠΈ просмотр
        1. ΠžΠ±Ρ‰ΠΈΠΉ доступ ΠΊ Π²Ρ‹Π±Ρ€Π°Π½Π½Ρ‹ΠΌ ΠΌΠΎΠ½Ρ‚Π°ΠΆΠ½Ρ‹ΠΌ областям
        2. ОбмСн ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°ΠΌΠΈ ΠΈ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠ°ΠΌΠΈ
        3. Π£ΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ ΠΏΡ€Π°Π²Π° доступа для ссылок
        4. Π Π°Π±ΠΎΡ‚Π° с ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠ°ΠΌΠΈ
        5. ΠžΠ±Π·ΠΎΡ€ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΎΠ²
        6. Π Π°Π±ΠΎΡ‚Π° со спСцификациями Π΄ΠΈΠ·Π°ΠΉΠ½Π°
        7. БовмСстноС использованиС спСцификаций Π΄ΠΈΠ·Π°ΠΉΠ½Π°
        8. ΠŸΡ€ΠΎΠ²Π΅Ρ€ΠΊΠ° спСцификаций конструкции
        9. Навигация ΠΏΠΎ спСцификациям Π΄ΠΈΠ·Π°ΠΉΠ½Π°
        10. ΠŸΡ€ΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΈ ΠΏΡ€ΠΎΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ спСцификации ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°
        11. Экспорт рСсурсов Π΄ΠΈΠ·Π°ΠΉΠ½Π°
        12. Экспорт ΠΈ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ° рСсурсов ΠΈΠ· спСцификаций Π΄ΠΈΠ·Π°ΠΉΠ½Π°
        13. ΠžΠ±Ρ‰ΠΈΠΉ доступ ΠΊ Π³Ρ€ΡƒΠΏΠΏΠ΅ для прСдприятия
      6. БистСмы проСктирования
        1. БистСмы проСктирования с Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ°ΠΌΠΈ Creative Cloud
        2. Π Π°Π±ΠΎΡ‚Π° с Π°ΠΊΡ‚ΠΈΠ²Π°ΠΌΠΈ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° Π² Adobe XD
        3. Π Π°Π±ΠΎΡ‚Π° с Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ°ΠΌΠΈ Creative Cloud Π² Adobe XD
        4. ΠœΠΈΠ³Ρ€Π°Ρ†ΠΈΡ со связанных рСсурсов Π² Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ Creative Cloud
        5. Π Π°Π±ΠΎΡ‚Π° с Ρ‚ΠΎΠΊΠ΅Π½Π°ΠΌΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½Π°
        6. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ рСсурсы ΠΈΠ· Creative Cloud Libraries
      7. ΠžΠ±Π»Π°Ρ‡Π½Ρ‹Π΅ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Ρ‹
        1. ΠžΠ±Π»Π°Ρ‡Π½Ρ‹Π΅ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Ρ‹ Π² Adobe XD
        2. БовмСстная Ρ€Π°Π±ΠΎΡ‚Π° ΠΈ совмСстноС Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ²
        3. БовмСстноС Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌΠΈ с Π²Π°ΠΌΠΈ подСлились
      8. Π˜Π½Ρ‚Π΅Π³Ρ€Π°Ρ†ΠΈΠΈ ΠΈ ΠΏΠ»Π°Π³ΠΈΠ½Ρ‹
        1. Π Π°Π±ΠΎΡ‚Π° с внСшними Π°ΠΊΡ‚ΠΈΠ²Π°ΠΌΠΈ
        2. Π Π°Π±ΠΎΡ‚Π° с дизайнСрскими рСсурсами ΠΈΠ· Photoshop
        3. ΠšΠΎΠΏΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈ вставка рСсурсов ΠΈΠ· Photoshop
        4. Π˜ΠΌΠΏΠΎΡ€Ρ‚ ΠΈΠ»ΠΈ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΠΈΠ΅ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠ² Photoshop
        5. Π Π°Π±ΠΎΡ‚Π° с рСсурсами Illustrator Π² Adobe XD
        6. ΠžΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ ΠΈΠ»ΠΈ ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Ρ‹ Illustrator
        7. ΠšΠΎΠΏΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π²Π΅ΠΊΡ‚ΠΎΡ€ΠΎΠ² ΠΈΠ· Illustrator Π² XD
        8. ΠŸΠ»Π°Π³ΠΈΠ½Ρ‹ для Adobe XD
        9. Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² ΠΈ ΡƒΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΈΠΌΠΈ
        10. Π˜Π½Ρ‚Π΅Π³Ρ€Π°Ρ†ΠΈΡ Jira для XD
        11. Плагин Slack для XD
        12. Плагин Zoom для XD
        13. ΠŸΡƒΠ±Π»ΠΈΠΊΠ°Ρ†ΠΈΡ Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΈΠ· XD Π½Π° Behance
      9. XD для iOS и Android
        1. ΠŸΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½Π°Ρ вСрсия Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройствах
        2. Adobe XD для ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройств: часто Π·Π°Π΄Π°Π²Π°Π΅ΠΌΡ‹Π΅ вопросы
      10. УстранСниС Π½Π΅ΠΏΠΎΠ»Π°Π΄ΠΎΠΊ
        1. Π˜Π·Π²Π΅ΡΡ‚Π½Ρ‹Π΅ ΠΈ устранСнныС ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹
          1. Π˜Π·Π²Π΅ΡΡ‚Π½Ρ‹Π΅ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹
          2. Π˜ΡΠΏΡ€Π°Π²Π»Π΅Π½Ρ‹ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹
        2. Установка ΠΈ обновлСния
          1. XD отобраТаСтся ΠΊΠ°ΠΊ нСсовмСстимый с Windows
          2. Код ошибки 191
          3. Код ошибки 183
          4. ΠŸΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ ΠΏΡ€ΠΈ установкС ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌΡ‹Ρ… ΠΌΠΎΠ΄ΡƒΠ»Π΅ΠΉ XD
          5.  Π—апрос Π½Π° ΡƒΠ΄Π°Π»Π΅Π½ΠΈΠ΅ ΠΈ пСрСустановку XD Π² Windows 10
          6. ΠŸΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ с пСрСносом настроСк
        3. Запуск ΠΈ сбой
          1.  XD Π°Π²Π°Ρ€ΠΈΠΉΠ½ΠΎ Π·Π°Π²Π΅Ρ€ΡˆΠ°Π΅Ρ‚ Ρ€Π°Π±ΠΎΡ‚Ρƒ ΠΏΡ€ΠΈ запускС Π² Windows 10
          2.  XD Π·Π°Π²Π΅Ρ€ΡˆΠ°Π΅Ρ‚ Ρ€Π°Π±ΠΎΡ‚Ρƒ ΠΏΡ€ΠΈ Π²Ρ‹Ρ…ΠΎΠ΄Π΅ ΠΈΠ· Creative Cloud
          3. ΠŸΡ€ΠΎΠ±Π»Π΅ΠΌΠ° со статусом подписки Π² Windows
          4. ΠŸΡ€Π΅Π΄ΡƒΠΏΡ€Π΅ΠΆΠ΄Π΅Π½ΠΈΠ΅ ΠΎ Π·Π°Π±Π»ΠΎΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠΌ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ ΠΏΡ€ΠΈ запускС XD Π² Windows
          5. Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Π°Π²Π°Ρ€ΠΈΠΉΠ½ΠΎΠ³ΠΎ Π΄Π°ΠΌΠΏΠ° Π² Windows
          6. Π‘Π±ΠΎΡ€ ΠΈ совмСстноС использованиС ΠΆΡƒΡ€Π½Π°Π»Π° сбоСв
        4. ΠžΠ±Π»Π°Ρ‡Π½Ρ‹Π΅ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Ρ‹ ΠΈ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ Creative Cloud Libraries
          1. ΠŸΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ с ΠΎΠ±Π»Π°Ρ‡Π½Ρ‹ΠΌΠΈ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°ΠΌΠΈ XD
          2. ΠŸΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ со связанными ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°ΠΌΠΈ
          3. ΠŸΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ с Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ°ΠΌΠΈ ΠΈ ссылками
        5. Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠ°, публикация ΠΈ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΊΠ°
          1. НСвозмоТно Π·Π°ΠΏΠΈΡΠ°Ρ‚ΡŒ взаимодСйствиС с ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΎΠΌ Π² macOS Catalina
          2. ΠŸΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ с Ρ€Π°Π±ΠΎΡ‡ΠΈΠΌΠΈ процСссами ΠΏΡƒΠ±Π»ΠΈΠΊΠ°Ρ†ΠΈΠΈ
          3. ΠžΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½Π½Ρ‹Π΅ ссылки Π½Π΅ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‚ΡΡ Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ…
          4. ΠŸΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΡ‹ Π½Π΅ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‚ΡΡ Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ…
          5. ПанСль ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠ΅Π² Π²Π½Π΅Π·Π°ΠΏΠ½ΠΎ появляСтся Π½Π° ΠΎΠ±Ρ‰ΠΈΡ… ссылках
          6. НСвозмоТно ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Ρ‚ΡŒ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ
        6. Π˜ΠΌΠΏΠΎΡ€Ρ‚, экспорт ΠΈ Ρ€Π°Π±ΠΎΡ‚Π° с Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ прилоТСниями
          1. Π˜ΠΌΠΏΠΎΡ€Ρ‚ ΠΈ экспорт Π² XD
          2. Ρ„Π°ΠΉΠ»ΠΎΠ² Photoshop Π² XD
          3. Π€Π°ΠΉΠ»Ρ‹ Illustrator Π² XD
          4. Экспорт Π² After Effects ΠΈΠ· XD
          5. Π€Π°ΠΉΠ»Ρ‹ эскизов Π² XD
          6. Π‘Ρ‚ΠΎΡ€ΠΎΠ½Π½ΠΈΠ΅ прилоТСния Π½Π΅ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‚ΡΡ ΠΏΡ€ΠΈ экспортС

      ΠΠ°ΡƒΡ‡ΠΈΡ‚Π΅ΡΡŒ Π·Π°Π΄Π°Π²Π°Ρ‚ΡŒ ΠΎΠ±Π²ΠΎΠ΄ΠΊΡƒ, Π·Π°Π»ΠΈΠ²ΠΊΡƒ, Ρ‚Π΅Π½ΡŒ ΠΈ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΡŽΡŽ Ρ‚Π΅Π½ΡŒ, Π° Ρ‚Π°ΠΊΠΆΠ΅ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ эффСкты налоТСния для ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΎΠ² Π² Adobe XD.

      1. Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚.

      2. Π©Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊ рядом с элСмСнтом Β«Π—Π°Π»ΠΈΠ²ΠΊΠ°Β». ΠŸΠΎΡΠ²ΠΈΡ‚ΡΡ ΠΏΠ°Π»ΠΈΡ‚Ρ€Π° Ρ†Π²Π΅Ρ‚ΠΎΠ².

        ΠŸΠ°Π»ΠΈΡ‚Ρ€Π° Ρ†Π²Π΅Ρ‚ΠΎΠ²

        Для Π·Π°Π»ΠΈΠ²ΠΊΠΈ Ρ†Π²Π΅Ρ‚ΠΎΠ² ΠΌΠΎΠΆΠ½ΠΎ Ρ‚Π°ΠΊΠΆΠ΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ инструмСнт Β«ΠŸΠΈΠΏΠ΅Ρ‚ΠΊΠ°Β». Клавиша [i] Π°ΠΊΡ‚ΠΈΠ²ΠΈΡ€ΡƒΠ΅Ρ‚ ΠΏΠΈΠΏΠ΅Ρ‚ΠΊΡƒ Β«Π—Π°ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒΒ».

        • ΠžΠ΄Π½ΠΎΠΊΡ€Π°Ρ‚Π½ΠΎΠ΅ Π½Π°ΠΆΠ°Ρ‚ΠΈΠ΅ Π½Π° ΠΊΠ»Π°Π²ΠΈΡˆΡƒ ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Π΅Ρ‚ ΠΏΠΈΠΏΠ΅Ρ‚ΠΊΡƒ Β«Π—Π°ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒΒ».
        • ΠŸΡ€ΠΈ ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π½ΠΎΠΌ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ клавиши ΠΏΠΈΠΏΠ΅Ρ‚ΠΊΠ° "Π—Π°Π»ΠΈΠ²ΠΊΠ°" закрываСтся.
      3. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ:

        • Π£ΠΊΠ°ΠΆΠΈΡ‚Π΅ HSBA, RGB ΠΈΠ»ΠΈ ΡˆΠ΅ΡΡ‚Π½Π°Π΄Ρ†Π°Ρ‚Π΅Ρ€ΠΈΡ‡Π½Ρ‹Π΅ значСния, Ссли Π²Ρ‹ Π·Π½Π°Π΅Ρ‚Π΅ Ρ‚ΠΎΡ‡Π½Ρ‹Π΅ значСния Ρ†Π²Π΅Ρ‚Π°. Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒΡΡ ΠΌΠ΅ΠΆΠ΄Ρƒ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹ΠΌΠΈ Ρ†Π²Π΅Ρ‚ΠΎΠ²Ρ‹ΠΌΠΈ Ρ€Π΅ΠΆΠΈΠΌΠ°ΠΌΠΈ.
        • НастройтС Ρ†Π²Π΅Ρ‚ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ†Π²Π΅Ρ‚ΠΎΠ²ΠΎΠ³ΠΎ поля ΠΈ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠ° Ρ†Π²Π΅Ρ‚Π°. ΠŸΡ€ΠΈ этом числовыС значСния HSBA, RGB ΠΈ ΡˆΠ΅ΡΡ‚Π½Π°Π΄Ρ†Π°Ρ‚Π΅Ρ€ΠΈΡ‡Π½Ρ‹Π΅ значСния ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚ΠΈΡ€ΡƒΡŽΡ‚ΡΡ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ.
        • Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Π·Π°Π»ΠΈΠ²ΠΊΡƒ ΠΈ Π½Π΅ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΡΡ‚ΡŒ Π·Π°Π»ΠΈΠ²ΠΊΠΈ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ Ρ†Π²Π΅Ρ‚Π° ΠΈΠ»ΠΈ ΡƒΠΊΠ°Π·Π°Π² Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π² ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚Π°Ρ….
        • Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ инструмСнт Β«ΠŸΠΈΠΏΠ΅Ρ‚ΠΊΠ°Β», Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ Ρ†Π²Π΅Ρ‚ Π½Π° ΠΌΠΎΠ½Ρ‚Π°ΠΆΠ½ΠΎΠΉ области.
        • Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π½ΡƒΡŽ Π·Π°Π»ΠΈΠ²ΠΊΡƒ ΠΊ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Ρƒ. Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ свСдСния ΠΎ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π°Ρ… см. Π² Ρ€Π°Π·Π΄Π΅Π»Π΅ Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ΠΎΠ².

        ΠŸΡ€ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ΠΎΠ² Π² ΠΏΠ°Π»ΠΈΡ‚Ρ€Π΅ Ρ†Π²Π΅Ρ‚ΠΎΠ² Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΡ€ΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ измСнСния Π½Π° ΠΌΠΎΠ½Ρ‚Π°ΠΆΠ½ΠΎΠΉ области.

        Adobe XD Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ сокращСниС для ΡˆΠ΅ΡΡ‚Π½Π°Π΄Ρ†Π°Ρ‚Π΅Ρ€ΠΈΡ‡Π½Ρ‹Ρ… ΠΊΠΎΠ΄ΠΎΠ². НапримСр, Ссли ввСсти 0 ΠΈ Π½Π°ΠΆΠ°Ρ‚ΡŒ ΠΊΠ»Π°Π²ΠΈΡˆΡƒ Β«Π’Π²ΠΎΠ΄Β», XD автоматичСски ΠΎΡ‚ΠΎΠ±Ρ€Π°Π·ΠΈΡ‚ Ρ†Π²Π΅Ρ‚ с ΠΊΠΎΠ΄ΠΎΠΌ #000000.

      4. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ Ρ†Π²Π΅Ρ‚ ΠΊΠ°ΠΊ ΠΎΠ±Ρ€Π°Π·Π΅Ρ† для использования Π² Π±ΡƒΠ΄ΡƒΡ‰Π΅ΠΌ. Π§Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ Ρ†Π²Π΅Ρ‚ ΠΊΠ°ΠΊ ΠΎΠ±Ρ€Π°Π·Π΅Ρ†, Ρ‰Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ Π·Π½Π°Ρ‡ΠΎΠΊ + Π² Π½ΠΈΠΆΠ½Π΅ΠΉ части ΠΏΠ°Π»ΠΈΡ‚Ρ€Ρ‹ Ρ†Π²Π΅Ρ‚ΠΎΠ².

        Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΎΠ±Ρ€Π°Π·Ρ†Ρ‹

        Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ порядок ΠΎΠ±Ρ€Π°Π·Ρ†ΠΎΠ² Π² ΠΏΠ°Π»ΠΈΡ‚Ρ€Π΅ Ρ†Π²Π΅Ρ‚ΠΎΠ², ΠΏΠ΅Ρ€Π΅Ρ‚Π°Ρ‰ΠΈΠ² ΠΎΠ±Ρ€Π°Π·Π΅Ρ† Π² Π½ΠΎΠ²ΠΎΠ΅ мСсто. Π§Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ ΠΎΠ±Ρ€Π°Π·Π΅Ρ†, ΠΏΠ΅Ρ€Π΅Ρ‚Π°Ρ‰ΠΈΡ‚Π΅ Π΅Π³ΠΎ Π·Π° ΠΏΡ€Π΅Π΄Π΅Π»Ρ‹ ΠΏΠ°Π»ΠΈΡ‚Ρ€Ρ‹ Ρ†Π²Π΅Ρ‚ΠΎΠ².

      ΠŸΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Π·Π°Π»ΠΈΠ²ΠΊΠΈ изобраТСния ΠΊ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π°ΠΌ

      Π‘Π½Π°Ρ‡Π°Π»Π° Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚Π΅ Π·Π°Π»ΠΈΠ²ΠΊΡƒ, Ссли ΠΎΠ½Π° Π΅Ρ‰Π΅ Π½Π΅ Π²ΠΊΠ»ΡŽΡ‡Π΅Π½Π° (ΠΊΠ°ΠΊ описано Π² Ρ€Π°Π·Π΄Π΅Π»Π΅ ΠŸΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Ρ†Π²Π΅Ρ‚Π° Π·Π°Π»ΠΈΠ²ΠΊΠΈ ΠΊ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Ρƒ). Π—Π°Ρ‚Π΅ΠΌ ΠΏΠ΅Ρ€Π΅Ρ‚Π°Ρ‰ΠΈΡ‚Π΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π° ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ ΠΈΠ· Ρ‚ΠΎΠ³ΠΎ мСста, Π³Π΄Π΅ Π²Ρ‹ Π΅Π³ΠΎ сохранили (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Finder ΠΈΠ»ΠΈ ΠΏΡ€ΠΎΠ²ΠΎΠ΄Π½ΠΈΠΊ Windows).

      ΠžΠ±Ρ€Π΅Π·ΠΊΠ° ΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅ Π·Π°Π»ΠΈΠ²ΠΎΠΊ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ

      Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄Π²Π°ΠΆΠ΄Ρ‹ Ρ‰Π΅Π»ΠΊΠ½ΡƒΡ‚ΡŒ изобраТСния, ΠΏΠΎΠΌΠ΅Ρ‰Π΅Π½Π½Ρ‹Π΅ Π² ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Ρ‹ (ΠžΠ±ΡŠΠ΅ΠΊΡ‚ > Маска с Ρ„ΠΎΡ€ΠΌΠΎΠΉ), Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ±Ρ€Π΅Π·Π°Ρ‚ΡŒ ΠΈ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ (ΠΏΡ€ΠΈ пСрСтаскивании с Ρ€Π°Π±ΠΎΡ‡Π΅Π³ΠΎ стола) Π²Π½ΡƒΡ‚Ρ€ΠΈ Π·Π°Π»ΠΈΠ²ΠΎΠΊ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ Ρ€Π΅ΠΆΠΈΠΌ ΠΎΠ±Ρ€Π΅Π·ΠΊΠΈ Π² Π·Π°Π»ΠΈΠ²ΠΊΠ΅ изобраТСния для:

      •      Π”Π²Π°ΠΆΠ΄Ρ‹ Ρ‰Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ ΠΈ Π²Π²Π΅Π΄ΠΈΡ‚Π΅ Ρ€Π΅ΠΆΠΈΠΌ ΠΎΠ±Ρ€Π΅Π·ΠΊΠΈ для Π·Π°Π»ΠΈΠ²ΠΊΠΈ изобраТСния
      •      Π˜Π·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ изобраТСния Π² Ρ€Π΅ΠΆΠΈΠΌΠ΅ ΠΎΠ±Ρ€Π΅Π·ΠΊΠΈ ΠΈΠ»ΠΈ
      •      ΠŸΠ΅Ρ€Π΅ΠΌΠ΅ΡΡ‚ΠΈΡ‚Π΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π² любоС мСсто Π² Ρ€Π΅ΠΆΠΈΠΌΠ΅ ΠΎΠ±Ρ€Π΅Π·ΠΊΠΈ

      Π­Ρ‚ΠΎ ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½ΠΈΠ΅ Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΠΌΠΎ ΠΊ Ρ„Π°ΠΉΠ»Π°ΠΌ, ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΌ ΠΈΠ· Photoshop ΠΈ Sketch. Π˜ΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ Ρ„Π°ΠΉΠ»Ρ‹ ΡΠΎΡ…Ρ€Π°Π½ΡΡŽΡ‚ Π·Π°Π»ΠΈΠ²ΠΊΡƒ изобраТСния ΠΈ ΠΊΠ°Π΄Ρ€ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅, Π²Ρ‹ΠΏΠΎΠ»Π½Π΅Π½Π½ΠΎΠ΅ Π² исходном ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ.

      Вставка изобраТСния ΠΈΠ· Π±ΡƒΡ„Π΅Ρ€Π° ΠΎΠ±ΠΌΠ΅Π½Π°

      Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΊΠΎΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π²Π½Π΅ Adobe XD Π² Π±ΡƒΡ„Π΅Ρ€ ΠΎΠ±ΠΌΠ΅Π½Π° ΠΎΠΏΠ΅Ρ€Π°Ρ†ΠΈΠΎΠ½Π½ΠΎΠΉ систСмы, Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ Ρ„ΠΈΠ³ΡƒΡ€Ρƒ ΠΈ Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π² качСствС Π·Π°Π»ΠΈΠ²ΠΊΠΈ изобраТСния ΠΈΠ· Π±ΡƒΡ„Π΅Ρ€Π° ΠΎΠ±ΠΌΠ΅Π½Π° ΠΎΠΏΠ΅Ρ€Π°Ρ†ΠΈΠΎΠ½Π½ΠΎΠΉ систСмы. Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡ Ρ‚Π°ΠΊΠΆΠ΅ Π±ΡƒΠ΄ΡƒΡ‚ Π·Π°ΠΏΠΎΠ»Π½ΡΡ‚ΡŒ Ρ„ΠΈΠ³ΡƒΡ€Ρƒ, Ссли Ρ„ΠΈΠ³ΡƒΡ€Π° Π²Ρ‹Π±Ρ€Π°Π½Π° ΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π²Ρ‹Π±ΠΈΡ€Π°Π΅Ρ‚ Β«Π€Π°ΠΉΠ»Β» > Β«Π˜ΠΌΠΏΠΎΡ€Ρ‚Β».

      1. Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚.

      2. Π¨ΠΈΡ€ΠΈΠ½Π° ΠΎΠ±Π²ΠΎΠ΄ΠΊΠΈ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Ρ€Π°Π²Π½Π° 1. Π§Ρ‚ΠΎΠ±Ρ‹ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ Π΄Ρ€ΡƒΠ³ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅, ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚Π΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π“Ρ€Π°Π½ΠΈΡ†Π°.

      3. Π©Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΡƒΡŽ Ρ†Π²Π΅Ρ‚ΠΎΠ²ΡƒΡŽ ΠΌΠ΅Ρ‚ΠΊΡƒ рядом с Π³Ρ€Π°Π½ΠΈΡ†Π΅ΠΉ. ΠŸΠΎΡΠ²ΠΈΡ‚ΡΡ ΠΏΠ°Π»ΠΈΡ‚Ρ€Π° Ρ†Π²Π΅Ρ‚ΠΎΠ².

        Π’Ρ‹Π±ΠΎΡ€ Ρ†Π²Π΅Ρ‚Π°
      4. МоТно Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ:

        • Π£ΠΊΠ°ΠΆΠΈΡ‚Π΅ HSBA, RGB ΠΈΠ»ΠΈ ΡˆΠ΅ΡΡ‚Π½Π°Π΄Ρ†Π°Ρ‚Π΅Ρ€ΠΈΡ‡Π½Ρ‹Π΅ значСния, Ссли Π²Ρ‹ Π·Π½Π°Π΅Ρ‚Π΅ Ρ‚ΠΎΡ‡Π½Ρ‹Π΅ значСния.
        • НастройтС Ρ†Π²Π΅Ρ‚ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ†Π²Π΅Ρ‚ΠΎΠ²ΠΎΠ³ΠΎ поля ΠΈ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠ° Ρ†Π²Π΅Ρ‚Π°. ΠŸΡ€ΠΈ этом числовыС значСния HSBA, RGB ΠΈ ΡˆΠ΅ΡΡ‚Π½Π°Π΄Ρ†Π°Ρ‚Π΅Ρ€ΠΈΡ‡Π½Ρ‹Π΅ значСния ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚ΠΈΡ€ΡƒΡŽΡ‚ΡΡ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ.
        • Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ инструмСнт Β«ΠŸΠΈΠΏΠ΅Ρ‚ΠΊΠ°Β», Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ Ρ†Π²Π΅Ρ‚ Π½Π° ΠΌΠΎΠ½Ρ‚Π°ΠΆΠ½ΠΎΠΉ области.
        • УстановитС ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΡΡ‚ΡŒ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠ° Ρ†Π²Π΅Ρ‚Π° ΠΈΠ»ΠΈ Π²Π²Π΅Π΄ΠΈΡ‚Π΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π² ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚Π°Ρ….
        • ΠžΡ‚Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΡƒΠΉΡ‚Π΅ Ρ€Π°Π·ΠΌΠ΅Ρ€ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ ΠΈ создайтС ΠΏΡƒΠ½ΠΊΡ‚ΠΈΡ€Π½Ρ‹Π΅ Π»ΠΈΠ½ΠΈΠΈ
        • Π£ΠΊΠ°ΠΆΠΈΡ‚Π΅ Ρ‚ΠΎΡ€Ρ†Π΅Π²Ρ‹Π΅ Π·Π°Π³Π»ΡƒΡˆΠΊΠΈ (стык, скруглСниС, выступ) ΠΈ соСдинСния (ΠΏΠΎΠ΄ ΡƒΠ³Π»ΠΎΠΌ, скруглСниС, скос), Π° Ρ‚Π°ΠΊΠΆΠ΅ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠ΅ ΠΈ внСшниС ΡˆΡ‚Ρ€ΠΈΡ…ΠΈ.

        ΠŸΡ€ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ΠΎΠ² Π² ΠΏΠ°Π»ΠΈΡ‚Ρ€Π΅ Ρ†Π²Π΅Ρ‚ΠΎΠ² ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ†Π²Π΅Ρ‚ ΠΎΠ±Π²ΠΎΠ΄ΠΊΠΈ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π°.

      5. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ Ρ†Π²Π΅Ρ‚ ΠΊΠ°ΠΊ ΠΎΠ±Ρ€Π°Π·Π΅Ρ† для использования Π² Π±ΡƒΠ΄ΡƒΡ‰Π΅ΠΌ. Π§Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ Ρ†Π²Π΅Ρ‚ ΠΊΠ°ΠΊ ΠΎΠ±Ρ€Π°Π·Π΅Ρ†, Ρ‰Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ Π·Π½Π°Ρ‡ΠΎΠΊ + Π² Π½ΠΈΠΆΠ½Π΅ΠΉ части ΠΏΠ°Π»ΠΈΡ‚Ρ€Ρ‹ Ρ†Π²Π΅Ρ‚ΠΎΠ².

        Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΎΠ±Ρ€Π°Π·Ρ†Ρ‹

        Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ порядок ΠΎΠ±Ρ€Π°Π·Ρ†ΠΎΠ² Π² ΠΏΠ°Π»ΠΈΡ‚Ρ€Π΅ Ρ†Π²Π΅Ρ‚ΠΎΠ², ΠΏΠ΅Ρ€Π΅Ρ‚Π°Ρ‰ΠΈΠ² ΠΎΠ±Ρ€Π°Π·Π΅Ρ† Π² Π½ΠΎΠ²ΠΎΠ΅ мСсто. Π§Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ ΠΎΠ±Ρ€Π°Π·Π΅Ρ†, ΠΏΠ΅Ρ€Π΅Ρ‚Π°Ρ‰ΠΈΡ‚Π΅ Π΅Π³ΠΎ Π·Π° ΠΏΡ€Π΅Π΄Π΅Π»Ρ‹ ΠΏΠ°Π»ΠΈΡ‚Ρ€Ρ‹ Ρ†Π²Π΅Ρ‚ΠΎΠ².

      6. Если ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ прСдставляСт собой Π·Π°ΠΌΠΊΠ½ΡƒΡ‚Ρ‹ΠΉ ΠΏΡƒΡ‚ΡŒ, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ ΡˆΠΈΡ€ΠΈΠ½Ρƒ ΠΎΠ±Π²ΠΎΠ΄ΠΊΠΈ. Π§Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ ΠΎΠ±Π²ΠΎΠ΄ΠΊΡƒ вдоль ΠΊΠΎΠ½Ρ‚ΡƒΡ€Π°, Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΡ… ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ΠΎΠ², пСрСчислСнных Π½Π° ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ рисункС.

        По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ XD Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π΅Ρ‚ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠΉ ΡˆΡ‚Ρ€ΠΈΡ… ΠΏΠΎ Π·Π°ΠΌΠΊΠ½ΡƒΡ‚ΠΎΠΌΡƒ ΠΊΠΎΠ½Ρ‚ΡƒΡ€Ρƒ.

        Π‘Ρ‚ΠΈΠ»ΠΈ ΠΎΠ±Π²ΠΎΠ΄ΠΊΠΈ

        A. Π’Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠΉ Ρ…ΠΎΠ΄  B. Π’Π½Π΅ΡˆΠ½ΠΈΠΉ Ρ…ΠΎΠ΄  C. Π¦Π΅Π½Ρ‚Ρ€Π°Π»ΡŒΠ½Ρ‹ΠΉ Ρ…ΠΎΠ΄  D. ВорцСвая ΠΊΡ€Ρ‹ΡˆΠΊΠ°  E. ΠšΡ€ΡƒΠ³Π»Π°Ρ ΠΊΡ€Ρ‹ΡˆΠΊΠ°  F. Π’Ρ‹ΡΡ‚ΡƒΠΏΠ°ΡŽΡ‰Π°Ρ ΠΊΡ€Ρ‹ΡˆΠΊΠ°  G. Π‘ΠΎΠ΅Π΄ΠΈΠ½Π΅Π½ΠΈΠ΅ ΠΏΠΎΠ΄ ΡƒΠ³Π»ΠΎΠΌ1 ΠšΡ€ΡƒΠ³Π»ΠΎΠ΅ соСдинСниС11 92 Π‘ΠΎΠ΅Π΄ΠΈΠ½Π΅Π½ΠΈΠ΅ со скосом

        ИзмСнСниС ΡˆΠΈΡ€ΠΈΠ½Ρ‹ ΠΎΠ±Π²ΠΎΠ΄ΠΊΠΈ ΠΈΠ»ΠΈ выравнивания ΠΎΠ±Π²ΠΎΠ΄ΠΊΠΈ Π½Π΅ мСняСт фактичСский Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π° (с Ρ‚ΠΎΡ‡ΠΊΠΈ зрСния ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡ΠΈΠ²Π°ΡŽΡ‰Π΅ΠΉ Ρ€Π°ΠΌΠΊΠΈ). Однако ΠΏΡ€ΠΈ экспортС ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π° Π΅ΡΡ‚ΡŒ Π²Π΅Ρ€ΠΎΡΡ‚Π½ΠΎΡΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π° измСнятся Π² зависимости ΠΎΡ‚ Ρ‚ΠΈΠΏΠ° ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΠΎΠΉ ΠΎΠ±Π²ΠΎΠ΄ΠΊΠΈ.

        SVG ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΡˆΡ‚Ρ€ΠΈΡ…ΠΈ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ. Если Π²Ρ‹ экспортируСтС ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ с Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½Π΅ΠΉ ΠΈΠ»ΠΈ внСшнСй ΠΎΠ±Π²ΠΎΠ΄ΠΊΠΎΠΉ Π² ​​форматС SVG, Ρ€Π°Π·ΠΌΠ΅Ρ€ экспортируСмого изобраТСния Π±ΡƒΠ΄Π΅Ρ‚ Ρ‚Π°ΠΊΠΈΠΌ, ΠΊΠ°ΠΊ Ссли Π±Ρ‹ Ρƒ Π½Π΅Π³ΠΎ Π±Ρ‹Π»Π° ΠΎΠ±Π²ΠΎΠ΄ΠΊΠ° ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ.

      Π‘ΠΎΠ·Π΄Π°Π²Π°ΠΉΡ‚Π΅ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΡƒΠ΅ΠΌΡ‹Π΅ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹Π΅ Ρ„ΠΈΠ³ΡƒΡ€Ρ‹ ΠΈΠ· Π»ΠΈΠ½ΠΈΠΉ, ΠΊΠΎΠ½Ρ‚ΡƒΡ€ΠΎΠ², Ρ„ΠΎΡ€ΠΌ, тСкста, ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ ΠΈ логичСских Π³Ρ€ΡƒΠΏΠΏ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Outline Stroke. ПослС создания Ρ„ΠΎΡ€ΠΌΡ‹ Π΅Π΅ ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ элСмСнтов управлСния ΠΈΠ»ΠΈ ΠΏΡƒΡ‚Π΅ΠΌ измСнСния Π΅Π΅ свойств Π½Π° ΠΏΠ°Π½Π΅Π»ΠΈ свойств .

      Π’Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚Π΅ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ дСйствия, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π·Π½Π°Ρ‡ΠΎΠΊ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Обводка ΠΊΠΎΠ½Ρ‚ΡƒΡ€Π° .

      1. Π’Π²Π΅Π΄ΠΈΡ‚Π΅ Π»ΡŽΠ±ΡƒΡŽ Π±ΡƒΠΊΠ²Ρƒ, скаТСм, S , ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ инструмСнт Text Π½Π° холстС.

      2. Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Π±ΡƒΠΊΠ²Ρƒ S ΠΈ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Object > Path > Outline Stroke.
        На ΠΏΠ°Π½Π΅Π»ΠΈ Β«Π‘Π»ΠΎΠΈΒ» ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Π΄Π²Π° слоя: 1. S β€” ΠšΠΎΠ½Ρ‚ΡƒΡ€ ΠΈ 2. S .

        Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΠ±Π²ΠΎΠ΄ΠΊΡƒ ΠΊΠΎΠ½Ρ‚ΡƒΡ€Π° Π½Π° тСкстовой Π±ΡƒΠΊΠ²Π΅.
      3. Π”Π²Π°ΠΆΠ΄Ρ‹ Ρ‰Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΎΠΏΠΎΡ€Π½Ρ‹Π΅ Ρ‚ΠΎΡ‡ΠΊΠΈ.

      4. НаТмитС ΠΈ ΠΏΠ΅Ρ€Π΅Ρ‚Π°Ρ‰ΠΈΡ‚Π΅ ΠΎΠΏΠΎΡ€Π½Ρ‹Π΅ Ρ‚ΠΎΡ‡ΠΊΠΈ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΡƒΡŽ Ρ„ΠΎΡ€ΠΌΡƒ.

      5. ПослС Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π²Ρ‹ создали Ρ„ΠΈΠ³ΡƒΡ€Ρƒ, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π΅Π΅ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΏΠ°Π½Π΅Π»ΠΈ Бвойства  , Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π΅Π΅ Ρ†Π²Π΅Ρ‚ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π—Π°Π»ΠΈΠ²ΠΊΠΈ ΠΈ Π“Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ΠΎΠ² .

        Π”ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ Ρ†Π²Π΅Ρ‚ΠΎΠ² ΠΈ стилСй для ΠΈΠ½Π΄ΠΈΠ²ΠΈΠ΄ΡƒΠ°Π»ΡŒΠ½ΠΎΠΉ настройки Ρ„ΠΎΡ€ΠΌΡ‹

      Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ Outline Stroke Π² Adobe XD Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π»Π΅Π³ΠΊΠΎ Π½Π°ΡΡ‚Ρ€Π°ΠΈΠ²Π°Ρ‚ΡŒ ΠΊΠΎΠ½Ρ‚ΡƒΡ€Ρ‹, Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ ΠΈ Ρ„ΠΎΡ€ΠΌΡ‹, ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΡ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Ρ‹ ΠΈ экспортируя ΠΈΡ… Π² SVG для Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π° Π±Π΅Π· ΠΊΠ°ΠΊΠΈΡ…-Π»ΠΈΠ±ΠΎ усилий. ΠŸΠΎΡΠΌΠΎΡ‚Ρ€ΠΈΡ‚Π΅ это руководство ΠΎΡ‚ Дэни Π‘ΠΎΠΌΠΎΠ½Ρ‚ β€” Π³Π»Π°Π²Π½ΠΎΠ³ΠΎ ΠΌΠ΅Π½Π΅Π΄ΠΆΠ΅Ρ€Π° ΠΏΠΎ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Π°ΠΌ Adobe XD β€” Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ·Π½Π°Ρ‚ΡŒ, ΠΊΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Outline Stroke.

      ВрСмя просмотра: 2 ΠΌΠΈΠ½ΡƒΡ‚Ρ‹ 50 сСкунд.

      Π’Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠ΅ Ρ‚Π΅Π½ΠΈ ΠΈ Ρ‚Π΅Π½ΠΈ Π΄Π΅Π»Π°ΡŽΡ‚ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Ρ‹ Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π±ΠΎΠ»Π΅Π΅ рСалистичными Π·Π° счСт ΠΈΠΌΠΈΡ‚Π°Ρ†ΠΈΠΈ свСтовых эффСктов.

      ВнутрСнняя Ρ‚Π΅Π½ΡŒ

      Π’Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠ΅ Ρ‚Π΅Π½ΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для модСлирования Ρ‚Ρ€Π΅Ρ…ΠΌΠ΅Ρ€Π½ΠΎΠΉ Π³Π»ΡƒΠ±ΠΈΠ½Ρ‹ Π² Π΄Π²ΡƒΡ…ΠΌΠ΅Ρ€Π½ΠΎΠΌ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΈ. НапримСр, Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠ΅ Ρ‚Π΅Π½ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ ΠΏΠΎΠΌΠΎΡ‡ΡŒ ΠΈΠΌΠΈΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π½Π°ΠΆΠ°Ρ‚ΠΎΠ΅ состояниС ΠΊΠ½ΠΎΠΏΠΊΠΈ.

      ΠŸΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½Π΅ΠΉ Ρ‚Π΅Π½ΠΈ ΠΊ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Ρƒ

      ВСнь

      Π’Π΅Π½ΠΈ, ΠΏΠΎΠΌΠΈΠΌΠΎ создания Ρ‚Ρ€Π΅Ρ…ΠΌΠ΅Ρ€Π½ΠΎΠ³ΠΎ эффСкта для ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΎΠ², Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠ³ΡƒΡ‚ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΎΡ‰ΡƒΡ‰Π΅Π½ΠΈΠ΅ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ Π±Π΅Π· примСнСния ΠΎΠ±Π²ΠΎΠ΄ΠΊΠΈ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹.

      ΠŸΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Ρ‚Π΅Π½ΠΈ ΠΊ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Ρƒ

      Π’Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚Π΅ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ дСйствия, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΡŽΡŽ Ρ‚Π΅Π½ΡŒ ΠΈΠ»ΠΈ Ρ‚Π΅Π½ΡŒ ΠΊ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Ρƒ Π΄ΠΈΠ·Π°ΠΉΠ½Π°:

      1. Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ Π½Π° ΠΌΠΎΠ½Ρ‚Π°ΠΆΠ½ΡƒΡŽ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ.

      2. Π©Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚, Π° Π·Π°Ρ‚Π΅ΠΌ Ρ‰Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ ВСнь ΠΈΠ»ΠΈ ВнутрСнняя Ρ‚Π΅Π½ΡŒ Π² инспСкторС свойств.

      3. Π’ ΠΏΠ°Π»ΠΈΡ‚Ρ€Π΅ Ρ†Π²Π΅Ρ‚ΠΎΠ² Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ Ρ†Π²Π΅Ρ‚ ΠΈ установитС ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΡΡ‚ΡŒ Ρ‚Π΅Π½ΠΈ:

        a. Π§Ρ‚ΠΎΠ±Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Ρ†Π²Π΅Ρ‚ Ρ‚Π΅Π½ΠΈ, Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚Π΅ ΠΎΠ΄Π½ΠΎ ΠΈΠ· ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΡ… дСйствий:

        • Π£ΠΊΠ°ΠΆΠΈΡ‚Π΅ HSB, RGB ΠΈΠ»ΠΈ ΡˆΠ΅ΡΡ‚Π½Π°Π΄Ρ†Π°Ρ‚Π΅Ρ€ΠΈΡ‡Π½ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Ρ†Π²Π΅Ρ‚Π°. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π»Π΅Π³ΠΊΠΎ ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒΡΡ ΠΌΠ΅ΠΆΠ΄Ρƒ этими Ρ†Π²Π΅Ρ‚ΠΎΠ²Ρ‹ΠΌΠΈ Ρ€Π΅ΠΆΠΈΠΌΠ°ΠΌΠΈ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ мСню.
        • НастройтС Ρ†Π²Π΅Ρ‚ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ†Π²Π΅Ρ‚ΠΎΠ²ΠΎΠ³ΠΎ поля ΠΈ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠ° Ρ†Π²Π΅Ρ‚Π°. ΠŸΡ€ΠΈ этом HSB, RGB ΠΈΠ»ΠΈ ΡˆΠ΅ΡΡ‚Π½Π°Π΄Ρ†Π°Ρ‚Π΅Ρ€ΠΈΡ‡Π½ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π½Π°ΡΡ‚Ρ€Π°ΠΈΠ²Π°ΡŽΡ‚ΡΡ автоматичСски.
        • Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ инструмСнт Β«ΠŸΠΈΠΏΠ΅Ρ‚ΠΊΠ°Β», Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ Ρ†Π²Π΅Ρ‚ Π½Π° ΠΌΠΎΠ½Ρ‚Π°ΠΆΠ½ΠΎΠΉ области.

        Π±. Π§Ρ‚ΠΎΠ±Ρ‹ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Π½Π΅ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΡΡ‚ΡŒ Ρ‚Π΅Π½ΠΈ: Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ нСпрозрачности ΠΈΠ»ΠΈ Π²Π²Π΅Π΄ΠΈΡ‚Π΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ нСпрозрачности Π² ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚Π°Ρ….

        Π§Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ Π²Ρ‹Π±Ρ€Π°Π½Π½Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚ ΠΈ Π½Π΅ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΡΡ‚ΡŒ Π² качСствС ΠΎΠ±Ρ€Π°Π·Ρ†Π° Ρ†Π²Π΅Ρ‚Π°, Ρ‰Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ Π·Π½Π°Ρ‡ΠΎΠΊ + Π² Π½ΠΈΠΆΠ½Π΅ΠΉ части ΠΏΠ°Π»ΠΈΡ‚Ρ€Ρ‹ Ρ†Π²Π΅Ρ‚ΠΎΠ². Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ порядок ΠΎΠ±Ρ€Π°Π·Ρ†ΠΎΠ² Π² ΠΏΠ°Π»ΠΈΡ‚Ρ€Π΅ Ρ†Π²Π΅Ρ‚ΠΎΠ², пСрСтаскивая ΠΈΡ…. Π§Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ ΠΎΠ±Ρ€Π°Π·Π΅Ρ†, ΠΏΠ΅Ρ€Π΅Ρ‚Π°Ρ‰ΠΈΡ‚Π΅ Π΅Π³ΠΎ Π·Π° ΠΏΡ€Π΅Π΄Π΅Π»Ρ‹ ΠΏΠ°Π»ΠΈΡ‚Ρ€Ρ‹ Ρ†Π²Π΅Ρ‚ΠΎΠ².

      4. Π£ΠΊΠ°ΠΆΠΈΡ‚Π΅ Π² инспСкторС свойств ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π΅:

        • X ΠΈ Y смСщСниС: ΡƒΠΊΠ°ΠΆΠΈΡ‚Π΅ расстояниС ΠΎΡ‚ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π° Π΄ΠΎ Ρ‚ΠΎΠ³ΠΎ мСста, Π³Π΄Π΅ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΡΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ Ρ‚Π΅Π½ΡŒ.
        • (Π Π°Π·ΠΌΡ‹Ρ‚ΠΈΠ΅):  Π£ΠΊΠ°ΠΆΠΈΡ‚Π΅ расстояниС ΠΎΡ‚ края Ρ‚Π΅Π½ΠΈ Π΄ΠΎ Ρ‚ΠΎΠ³ΠΎ мСста, Π³Π΄Π΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΏΡ€ΠΎΠΈΠ·ΠΎΠΉΡ‚ΠΈ Ρ€Π°Π·ΠΌΡ‹Ρ‚ΠΈΠ΅.

        Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π»Π΅Π³ΠΊΠΎ ΠΊΠΎΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Ρ‚Π΅Π½ΠΈ, ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½Π½Ρ‹Π΅ ΠΊ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Ρƒ, Π½Π° Π΄Ρ€ΡƒΠ³ΠΈΠ΅ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Ρ‹ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Β«Π’ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ внСшний Π²ΠΈΠ΄Β». НаТмитС Ctrl+C Π½Π° ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π΅, ΠΊ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌΡƒ ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½Π° Ρ‚Π΅Π½ΡŒ, Π° Π·Π°Ρ‚Π΅ΠΌ Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Ctrl+Alt+V (Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ внСшний Π²ΠΈΠ΄) Π½Π° Ρ†Π΅Π»Π΅Π²ΠΎΠΌ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π΅.

      ΠŸΡ€ΠΈ создании спСцификаций Π΄ΠΈΠ·Π°ΠΉΠ½Π° Ρ‚Π΅Π½ΠΈ Π² Π½ΠΈΡ… ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΡƒΡŽΡ‚ΡΡ Π² CSS, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Π»Π΅Π³ΠΊΠΎ использован Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌΠΈ.

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

      НСоморфизмы

      ΠšΠΎΠ»Π»Π΅ΠΊΡ†ΠΈΡ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΎΠ² с нанСсСнными тСнями

      Когда Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π³Π»ΡƒΠ±ΠΈΠ½Ρƒ своСму Π΄ΠΈΠ·Π°ΠΉΠ½Ρƒ, функция «ВнутрСнняя Ρ‚Π΅Π½ΡŒΒ» Π² Adobe XD ΠΌΠΎΠΆΠ΅Ρ‚ ΡΡ‚Π°Ρ‚ΡŒ настоящим ΠΏΠ΅Ρ€Π΅Π²ΠΎΡ€ΠΎΡ‚ΠΎΠΌ Π² ΠΈΠ³Ρ€Π΅. ΠŸΠΎΡΠΌΠΎΡ‚Ρ€ΠΈΡ‚Π΅ это руководство ΠΎΡ‚ Дэни Π‘ΠΎΠΌΠΎΠ½Ρ‚ β€” Π³Π»Π°Π²Π½ΠΎΠ³ΠΎ ΠΌΠ΅Π½Π΅Π΄ΠΆΠ΅Ρ€Π° ΠΏΠΎ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Π°ΠΌ Adobe XD β€” Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ·Π½Π°Ρ‚ΡŒ, ΠΊΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠ΅ Ρ‚Π΅Π½ΠΈ.

      ВрСмя просмотра: 3 ΠΌΠΈΠ½ΡƒΡ‚Ρ‹.

      Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠ»ΠΈ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ (Π²ΠΊΠ»ΡŽΡ‡Π°Ρ Ρ„ΠΈΠ³ΡƒΡ€Ρ‹, тСкстовыС слои, Π³Ρ€ΡƒΠΏΠΏΡ‹, маски ΠΈΠ»ΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹) Π½Π° холстС Π΄ΠΈΠ·Π°ΠΉΠ½Π°. Π’ Property Inspector Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅   ΠΈ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚Π΅ Π½ΡƒΠΆΠ½Ρ‹ΠΉ Ρ€Π΅ΠΆΠΈΠΌ налоТСния. Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ свСдСния см. Π² Ρ€Π°Π·Π΄Π΅Π»Π΅ ΠŸΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ эффСктов налоТСния.

      Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚.

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

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