ΠΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ΅Π½Ρ ΡΠΎΠ»ΡΠΊΠΎ Ρ ΠΎΠ΄Π½ΠΎΠΉ ΡΡΠΎΡΠΎΠ½Ρ 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 | ΠΠ°ΡΠ»Π΅Π΄ΡΠ΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΎΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. |
ΠΡΡΠ΅ΠΊΡΡ ΡΠ΅Π½ΠΈ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ: ΠΏΠ΅ΡΠ²Π°Ρ ΡΠ΅Π½Ρ Π½Π°Ρ
ΠΎΠ΄ΠΈΡΡΡ ΡΠ²Π΅ΡΡ
Ρ, Π° ΠΎΡΡΠ°Π»ΡΠ½ΡΠ΅ — ΡΠ·Π°Π΄ΠΈ. Π’Π΅Π½ΠΈ Π½Π΅ Π²Π»ΠΈΡΡΡ Π½Π° ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΡ ΠΈ ΠΌΠΎΠ³ΡΡ ΠΏΠ΅ΡΠ΅ΠΊΡΡΠ²Π°ΡΡ Π΄ΡΡΠ³ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΈΠ»ΠΈ ΠΈΡ
ΡΠ΅Π½ΠΈ. Π‘ ΡΠΎΡΠΊΠΈ Π·ΡΠ΅Π½ΠΈΡ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠΎΠ² ΡΠΊΠ»Π°Π΄ΠΊΠΈ ΠΈ ΠΏΠΎΡΡΠ΄ΠΊΠ° ΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π²Π½Π΅ΡΠ½ΠΈΠ΅ ΡΠ΅Π½ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΡΠΈΡΡΡΡΡΡ Π½Π΅ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²Π΅Π½Π½ΠΎ ΠΏΠΎΠ΄ ΡΠΎΠ½ΠΎΠΌ ΡΡΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, Π° Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠ΅ ΡΠ΅Π½ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΡΠΈΡΡΡΡΡΡ Π½Π΅ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²Π΅Π½Π½ΠΎ Π½Π°Π΄ ΡΠΎΠ½ΠΎΠΌ ΡΡΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° (Π½ΠΈΠΆΠ΅ 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];
- ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ: Π΅ΡΠ»ΠΈ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ ΠΏΠΎΠ»ΠΎΠΆΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅, ΡΠ΅Π½Ρ Π±ΡΠ΄Π΅Ρ ΡΠΏΡΠ°Π²Π° ΠΎΡ ΠΏΠΎΠ»Ρ. Π Π΅ΡΠ»ΠΈ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΠΎΠ΅, ΡΠ΅Π½Ρ Π±ΡΠ΄Π΅Ρ ΡΠ»Π΅Π²Π° ΠΎΡ ΠΏΠΎΠ»Ρ.
- Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ΅ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅: Π΅ΡΠ»ΠΈ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ΅ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅, ΡΠ΅Π½Ρ Π±ΡΠ΄Π΅Ρ Π½ΠΈΠΆΠ΅ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊΠ°. Π Π΅ΡΠ»ΠΈ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ΅ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΠΎΠ΅, ΡΠ΅Π½Ρ Π±ΡΠ΄Π΅Ρ Π½Π°Π΄ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊΠΎΠΌ.
- ΡΠ°Π΄ΠΈΡΡ ΡΠ°Π·ΠΌΡΡΠΈΡ: ΡΠ΅ΠΌ Π²ΡΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅, ΡΠ΅ΠΌ Π±ΠΎΠ»Π΅Π΅ ΡΠ°Π·ΠΌΡΡΠΎΠΉ Π±ΡΠ΄Π΅Ρ ΡΠ΅Π½Ρ.
- Π Π°Π΄ΠΈΡΡ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½ΠΈΡ: ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ, Π½Π°ΡΠΊΠΎΠ»ΡΠΊΠΎ Π΄ΠΎΠ»ΠΆΠ½Π° ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½ΡΡΡΡΡ ΡΠ΅Π½Ρ. ΠΠΎΠ»ΠΎΠΆΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΡΠ²Π΅Π»ΠΈΡΠΈΠ²Π°ΡΡ ΡΠ°Π·Π±ΡΠΎΡ ΡΠ΅Π½ΠΈ, ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΡΠΌΠ΅Π½ΡΡΠ°ΡΡ ΡΠ°Π·Π±ΡΠΎΡ.
- Π¦Π²Π΅Ρ: ΠΎΠ±ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ ΡΠ²Π΅Ρ ΡΠ΅Π½ΠΈ. ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, ΠΎΠ½ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ Π»ΡΠ±ΠΎΠΉ ΡΠ²Π΅ΡΠΎΠ²ΠΎΠΉ ΡΠΎΡΠΌΠ°Ρ, ΡΠ°ΠΊΠΎΠΉ ΠΊΠ°ΠΊ 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
?- catIsShown({ humanName: βitβ })Β» data-human-name=Β»itΒ»> IT
ΠΡΠ±ΡΠ°ΡΡΠ²Π°Ρ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΡ Π² ΡΠΌΠΈΡΠ°ΡΡΠΈΡ ΠΈ Π² ΠΏΡΠΈΠ½ΡΠΈΠΏΠ΅ ΡΠΎΡΠΌΠΎΠ·Π½ΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ ΡΠΈΠΏΠ° 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
{
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
{
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: [ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ] [ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΠΈ] [ΡΠ°Π΄ΠΈΡΡ ΡΠ°Π·ΠΌΡΡΠΈΡ] [Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠΉ ΡΠ°Π΄ΠΈΡΡ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½ΠΈΡ] [ΡΠ²Π΅Ρ];
- ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ: ΠΡΠ»ΠΈ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ ΠΏΠΎΠ»ΠΎΠΆΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅, ΡΠ΅Π½Ρ Π±ΡΠ΄Π΅Ρ ΡΠΏΡΠ°Π²Π° ΠΎΡ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊΠ°. Π Π΅ΡΠ»ΠΈ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΠΎΠ΅, ΡΠ΅Π½Ρ Π±ΡΠ΄Π΅Ρ ΡΠ»Π΅Π²Π° ΠΎΡ ΠΏΠΎΠ»Ρ.
- Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ΅ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅: ΠΡΠ»ΠΈ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ΅ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅, ΡΠ΅Π½Ρ Π±ΡΠ΄Π΅Ρ Π½ΠΈΠΆΠ΅ ΠΏΠΎΠ»Ρ. Π Π΅ΡΠ»ΠΈ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ΅ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΠΎΠ΅, ΡΠ΅Π½Ρ Π±ΡΠ΄Π΅Ρ Π²ΡΡΠ΅ Π±Π»ΠΎΠΊΠ°.
- ΡΠ°Π΄ΠΈΡΡ ΡΠ°Π·ΠΌΡΡΠΈΡ: Π§Π΅ΠΌ Π²ΡΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅, ΡΠ΅ΠΌ Π±ΠΎΠ»Π΅Π΅ ΡΠ°Π·ΠΌΡΡΠΎΠΉ Π±ΡΠ΄Π΅Ρ ΡΠ΅Π½Ρ.
- ΡΠ°Π΄ΠΈΡΡ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½ΠΈΡ: ΠΠ·Π½Π°ΡΠ°Π΅Ρ, Π½Π°ΡΠΊΠΎΠ»ΡΠΊΠΎ Π΄ΠΎΠ»ΠΆΠ½Π° ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½ΡΡΡΡΡ ΡΠ΅Π½Ρ. ΠΠΎΠ»ΠΎΠΆΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΡΠ²Π΅Π»ΠΈΡΠΈΠ²Π°ΡΡ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½ΠΈΠ΅ ΡΠ΅Π½ΠΈ, ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΡΠΌΠ΅Π½ΡΡΠ°ΡΡ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½ΠΈΠ΅.
- Π¦Π²Π΅Ρ: ΠΠ·Π½Π°ΡΠ°Π΅Ρ ΡΠ²Π΅Ρ ΡΠ΅Π½ΠΈ. ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, ΠΎΠ½ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ Π»ΡΠ±ΠΎΠΉ ΡΠ²Π΅ΡΠΎΠ²ΠΎΠΉ ΡΠΎΡΠΌΠ°Ρ, ΡΠ°ΠΊΠΎΠΉ ΠΊΠ°ΠΊ 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: ΡΠ²Π΅Ρ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½ΠΈΡ ΡΠ°Π·ΠΌΡΡΠΈΡ ΡΠΎ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ ΠΈ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΠΈ; |
- ΠΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΡΠ΅Π½ΠΈ. ΠΠΎΠ»ΠΎΠΆΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ ΡΠ΅Π½Ρ Π±ΡΠ΄Π΅Ρ ΠΎΡΡΠΈΡΠΎΠ²Π°Π½Π° ΡΠΏΡΠ°Π²Π° ΠΎΡ ΠΏΠΎΠ»Ρ, ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠΌΠ΅ΡΡΠΈΡ ΡΠ΅Π½Ρ ΡΠ»Π΅Π²Π° ΠΎΡ ΠΏΠΎΠ»Ρ.
- ΠΠ΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ΅ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΡΠ΅Π½ΠΈ, ΠΏΠΎΠ»ΠΎΠΆΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ ΡΠ΅Π½Ρ Π±ΡΠ΄Π΅Ρ Π½ΠΈΠΆΠ΅ Π±Π»ΠΎΠΊΠ°, ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ ΡΠ΅Π½Ρ Π±Π»ΠΎΠΊΠ° Π±ΡΠ΄Π΅Ρ Π²ΡΡΠ΅ Π±Π»ΠΎΠΊΠ°.
- Π Π°Π΄ΠΈΡΡ ΡΠ°Π·ΠΌΡΡΠΈΡ ΡΠ²Π»ΡΠ΅ΡΡΡ Π½Π΅ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΡΠΌ ΠΈ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ, Π½Π°ΡΠΊΠΎΠ»ΡΠΊΠΎ Π²Π΅Π»ΠΈΠΊΠ° ΠΈ Π½Π°ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ°Π·ΠΌΡΡΠ° ΡΠ΅Π½Ρ. ΠΡΠ»ΠΈ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ 0, ΡΠ΅Π½Ρ Π±ΡΠ΄Π΅Ρ ΡΠ΅Π·ΠΊΠΎΠΉ, ΡΠ΅ΠΌ Π²ΡΡΠ΅ ΡΠΈΡΠ»ΠΎ, ΡΠ΅ΠΌ Π±ΠΎΠ»Π΅Π΅ ΡΠ°Π·ΠΌΡΡΠΎΠΉ ΠΎΠ½Π° Π±ΡΠ΄Π΅Ρ. ΠΡΠΎ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠΌ.
- Π Π°Π΄ΠΈΡΡ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½ΠΈΡ ΡΠ°ΠΊΠΆΠ΅ ΡΠ²Π»ΡΠ΅ΡΡΡ Π½Π΅ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΡΠΌ, ΠΏΠΎΠ»ΠΎΠΆΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΡΠ²Π΅Π»ΠΈΡΠΈΠ²Π°ΡΡ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠ΅Π½ΠΈ, ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΡΠΌΠ΅Π½ΡΡΠ°ΡΡ ΡΠ°Π·ΠΌΠ΅Ρ. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ 0 (ΡΠ΅Π½Ρ ΠΈΠΌΠ΅Π΅Ρ ΡΠΎΡ ΠΆΠ΅ ΡΠ°Π·ΠΌΠ΅Ρ, ΡΡΠΎ ΠΈ ΡΠ°Π·ΠΌΡΡΠΈΠ΅).
- Π¦Π²Π΅Ρ ΡΠ΅Π½ΠΈ, ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ ΠΊΠ°ΠΊ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΡΠ²Π΅ΡΠ° 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 | . 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
Π’Π΅Π½Ρ ΡΠ²Π΅ΡΡ Ρ
Π’Π΅Π½Ρ Π²Π½ΠΈΠ·Ρ
Π’Π΅Π½Ρ ΡΠ»Π΅Π²Π°
Π’Π΅Π½Ρ ΡΠΏΡΠ°Π²Π°
28
29
999928
29
999929
999929
99929 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 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, ΡΡΠΎΠ±Ρ ΡΠΊΡΡΡΡ ΡΡΡΠ΅ΠΊΡ ΡΠ°Π·ΠΌΡΡΠΈΡ Π½Π° Π΄ΡΡΠ³ΠΈΡ
ΠΊΡΠ°ΡΡ
ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠΎΠ².
ΠΠ»Ρ Π΄ΠΎΡΡΠΈΠΆΠ΅Π½ΠΈΡ ΡΡΡΠ΅ΠΊΡΠ° ΠΌΡ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠ»ΠΈ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΈ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ΅ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ, ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½ΠΈΠΆΠ΅.
- Top Shadow β Π½ΡΠ»Π΅Π²ΠΎΠ΅ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ, ΡΠ°ΠΊ ΠΊΠ°ΠΊ Π½Π°ΠΌ Π½Π΅ Π½ΡΠΆΠ½Π° Π»Π΅Π²Π°Ρ ΠΈ ΠΏΡΠ°Π²Π°Ρ ΡΠ΅Π½Ρ Π±Π»ΠΎΠΊΠ°. ΠΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΠΈ Π² 8 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, ΡΡΠΎΠ±Ρ Π½Π°Π΄ ΠΏΠΎΠ»Π΅ΠΌ Π±ΡΠ»Π° ΡΠ΅Π½Ρ.
- ΠΠΈΠΆΠ½ΡΡ ΡΠ΅Π½Ρ β ΠΡΠΎΡΡΠΎ ΡΠ΄Π°Π»ΠΈΡΠ΅ Π·Π½Π°ΠΊ ΠΌΠΈΠ½ΡΡ ΠΏΠ΅ΡΠ΅Π΄ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΡΠΌ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ Π² Π²Π΅ΡΡ Π½Π΅ΠΉ ΡΠ΅Π½ΠΈ, ΡΡΠΎΠ±Ρ ΡΠΌΠ΅ΡΡΠΈΡΡ ΡΠ΅Π½Ρ Π²Π½ΠΈΠ·.
- ΠΠ΅Π²Π°Ρ ΡΠ΅Π½Ρ β ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ ΠΏΠΎΠΌΠ΅ΡΠ°Π΅Ρ ΡΠ΅Π½Ρ Π²Π»Π΅Π²ΠΎ, ΠΌΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΠ»ΠΈ CSS ΡΠ°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ Π²ΠΌΠ΅ΡΡΠ΅ Ρ Π½ΡΠ»Π΅Π²ΡΠΌ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ ΠΏΠΎ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΠΈ.
- ΠΡΠ°Π²Π°Ρ ΡΠ΅Π½Ρ β Π£Π΄Π°Π»Π΅Π½ΠΈΠ΅ Π·Π½Π°ΠΊΠ° (-) ΠΈΠ· Π»Π΅Π²ΠΎΠΉ ΡΠ΅Π½ΠΈ 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
Π’Π΅Π½Ρ ΡΠ»Π΅Π²Π° Π²Π²Π΅ΡΡ Ρ
Π’Π΅Π½Ρ Π²Π²Π΅ΡΡ Ρ ΡΠΏΡΠ°Π²Π°
Π’Π΅Π½Ρ ΡΠΏΡΠ°Π²Π° Π²Π½ΠΈΠ·Ρ
Π’Π΅Π½Ρ Π²Π½ΠΈΠ·Ρ ΡΠ»Π΅Π²Π°
28
29
999928
29
999929
999929
99929 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; }
. -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: Π ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΡΡΡ ΡΠ΅Π½Ρ Π±Π»ΠΎΠΊΠ° Π² Π½ΠΈΠΆΠ½Π΅ΠΉ ΡΠ°ΡΡΠΈ Π±Π»ΠΎΠΊΠ°.
< head >
|
. .
9086
|
ΠΠ«Π‘ΠΠΠΠ― ΠΠΠΠΠ§ΠΠ:
9 . Π²Π½ΡΡΡΠΈ ΠΊΠΎΡΠΎΠ±ΠΊΠΈ.
ΠΡΠΈΠΌΠ΅Ρ 3: Π ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΡΠΎΠ·Π΄Π°Π΅ΡΡΡ ΡΠ΅Π½Ρ Π²Π½ΡΡΡΠΈ ΠΊΠΎΡΠΎΠ±ΠΊΠΈ.
|
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. ΠΠ΄Π΅ΡΡ ΠΌΡ ΠΎΠ±ΡΡΠ΄ΠΈΠΌ ΠΊΡΠ°ΡΠΊΠΈΠΉ ΠΎΠ±Π·ΠΎΡ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠ΅Π½Ρ Ρ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠΌΠΈ ΠΏΡΠΈΠΌΠ΅ΡΠ°ΠΌΠΈ, Π° ΡΠ°ΠΊΠΆΠ΅ Π΅Π΅ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΡ Π² ΠΊΠΎΠ΄Π΅. ΠΡ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠΎΡΠΌΠΎΡΡΠ΅ΡΡ Π΄ΡΡΠ³ΠΈΠ΅ ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π΅ΠΌΡΠ΅ Π½Π°ΠΌΠΈ ΡΡΠ°ΡΡΠΈ, ΡΡΠΎΠ±Ρ ΡΠ·Π½Π°ΡΡ Π±ΠΎΠ»ΡΡΠ΅ β
- ΠΠΎΠΌΠ°Π½Π΄Ρ CSS
- ΠΠΎΠΏΡΠΎΡΡ Π΄Π»Ρ ΠΈΠ½ΡΠ΅ΡΠ²ΡΡ ΠΏΠΎ CSS
- ΠΠ½ΡΡΡΠ΅Π½Π½ΡΡ Π³ΡΠ°Π½ΠΈΡΠ° CSS
- Π‘ΠΏΠΈΡΠΊΠΈ 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()) .
|
ΠΠ½ΠΈΠΌΠ°ΡΠΈΡ ΡΠ΅Π½ΠΈ
ΠΠ½Π°ΡΠ΅Π½ΠΈΡ ΡΠ΅Π½ΠΈ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°ΡΡ. Π§ΡΠΎΠ±Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ ΡΡΠΎ, Π΄Π°Π²Π°ΠΉΡΠ΅ ΠΏΡΠ΅Π΄ΠΏΠΎΠ»ΠΎΠΆΠΈΠΌ, ΡΡΠΎ ΠΌΡ Ρ ΠΎΡΠΈΠΌ ΠΎΠ±Π½ΠΎΠ²ΠΈΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΡΠ²Π΅Ρ ΡΠ΅Π½ΠΈ, ΡΠ°Π΄ΠΈΡΡ ΠΈ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ Π² ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Π²ΡΡΠ΅.
ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ Π½Π°ΠΌ Π½ΡΠΆΠ½Ρ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΡΠ΅ΡΡΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π°, ΠΏΠΎΠΌΠ΅ΡΠ΅Π½Π½ΡΠ΅ ΠΎΠ±ΠΎΠ»ΠΎΡΠΊΠΎΠΉ ΡΠ²ΠΎΠΉΡΡΠ²Π° @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
|
ΠΠ°Π»Π΅Π΅ ΠΌΡ Π±ΡΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π²ΡΡΠ΅ΡΠΊΠ°Π·Π°Π½Π½ΡΡ ΡΠ²ΠΎΠΉΡΡΠ² Π²ΠΌΠ΅ΡΡΠΎ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ Π΄Π»Ρ Π°ΡΠ³ΡΠΌΠ΅Π½ΡΠΎΠ² ΡΠ΅Π½ΠΈ:
.
|
ΠΠ°ΠΊΠΎΠ½Π΅Ρ, Π΄Π°Π²Π°ΠΉΡΠ΅ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΠΌ ΡΠ»Π΅Π΄ΡΡΡΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΠΏΡΠΈ ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΠΈ Π²ΠΈΠ΄Π°:
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 | ΠΠ½ΠΎΠΏΠΊΠ° (ΠΠ΅ΠΉΡΡΠ²ΠΈΠ΅: {}, ΠΌΠ΅ΡΠΊΠ°: { Π’Π΅ΠΊΡΡ (Β«ΠΠ°ΠΆΠΌΠΈΡΠ΅ ΠΌΠ΅Π½Ρ!Β») . .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 ΠΈ Π΄ΡΡΠ³ΠΈΡ
ΡΠΎΡΠΈΠ°Π»ΡΠ½ΡΡ
ΡΠ΅ΡΡΡ
.
- Π ΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²ΠΎ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Adobe XD
- ΠΠ²Π΅Π΄Π΅Π½ΠΈΠ΅
- Π§ΡΠΎ Π½ΠΎΠ²ΠΎΠ³ΠΎ Π² Adobe XD
- ΠΠ±ΡΠΈΠ΅ Π²ΠΎΠΏΡΠΎΡΡ
- ΠΠΈΠ·Π°ΠΉΠ½, ΠΏΡΠΎΡΠΎΡΠΈΠΏ ΠΈ ΠΏΡΠ±Π»ΠΈΠΊΠ°ΡΠΈΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Adobe XD
- Π‘ΠΈΡΡΠ΅ΠΌΠ½ΡΠ΅ ΡΡΠ΅Π±ΠΎΠ²Π°Π½ΠΈΡ
- Π’ΡΠ΅Π±ΠΎΠ²Π°Π½ΠΈΡ ΠΊ Π°ΠΏΠΏΠ°ΡΠ°ΡΠ½ΠΎΠΌΡ ΠΈ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ½ΠΎΠΌΡ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠ΅Π½ΠΈΡ
- Adobe XD, Big Sur ΠΈ Apple Silicon | macOS 11
- ΠΡΠ½ΠΎΠ²Ρ ΡΠ°Π±ΠΎΡΠ΅Π³ΠΎ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²Π°
- ΠΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ·ΡΠΊ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Π² Adobe XD
- ΠΠΎΠΌΠΏΠ»Π΅ΠΊΡΡ Π΄Π»Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ° Access
- Π‘ΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΡΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ Π² Adobe XD
- Π‘ΠΎΡΠ΅ΡΠ°Π½ΠΈΡ ΠΊΠ»Π°Π²ΠΈΡ
- Π‘ΠΎΠ²Π΅ΡΡ ΠΈ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°ΡΠΈΠΈ
- ΠΠ°ΡΠΈΠ°Π½ΡΡ ΠΏΠΎΠ΄ΠΏΠΈΡΠΊΠΈ Π½Π° Adobe XD
- ΠΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ Π² Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠΌ ΠΏΠ»Π°Π½Π΅ XD
- ΠΠΈΠ·Π°ΠΉΠ½
- ΠΠΎΠ½ΡΠ°ΠΆΠ½ΡΠ΅ ΠΎΠ±Π»Π°ΡΡΠΈ, Π½Π°ΠΏΡΠ°Π²Π»ΡΡΡΠΈΠ΅ ΠΈ ΡΠ»ΠΎΠΈ
- ΠΠ°ΡΠ°Π»ΠΎ ΡΠ°Π±ΠΎΡΡ Ρ ΠΌΠΎΠ½ΡΠ°ΠΆΠ½ΡΠΌΠΈ ΠΎΠ±Π»Π°ΡΡΡΠΌΠΈ
- ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ Π½Π°ΠΏΡΠ°Π²Π»ΡΡΡΠΈΠ΅ ΠΈ ΡΠ΅ΡΠΊΠΈ
- Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΠΌΡΡ ΠΌΠΎΠ½ΡΠ°ΠΆΠ½ΡΡ ΠΎΠ±Π»Π°ΡΡΠ΅ΠΉ
- Π Π°Π±ΠΎΡΠ° ΡΠΎ ΡΠ»ΠΎΡΠΌΠΈ
- Π‘ΠΎΠ·Π΄Π°ΡΡ Π³ΡΡΠΏΠΏΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ
- Π€ΠΈΠ³ΡΡΡ, ΠΎΠ±ΡΠ΅ΠΊΡΡ ΠΈ ΠΏΡΡΠΈ
- ΠΡΠ±ΠΎΡ, ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΠΈ ΠΏΠΎΠ²ΠΎΡΠΎΡ ΠΎΠ±ΡΠ΅ΠΊΡΠΎΠ²
- ΠΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΠΉΡΠ΅, Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°ΠΉΡΠ΅, ΡΠ°ΡΠΏΡΠ΅Π΄Π΅Π»ΡΠΉΡΠ΅ ΠΈ ΡΠΏΠΎΡΡΠ΄ΠΎΡΠΈΠ²Π°ΠΉΡΠ΅ ΠΎΠ±ΡΠ΅ΠΊΡΡ
- ΠΡΡΠΏΠΏΠΈΡΠΎΠ²Π°ΡΡ, Π±Π»ΠΎΠΊΠΈΡΠΎΠ²Π°ΡΡ, Π΄ΡΠ±Π»ΠΈΡΠΎΠ²Π°ΡΡ, ΠΊΠΎΠΏΠΈΡΠΎΠ²Π°ΡΡ ΠΈ ΠΎΡΡΠ°ΠΆΠ°ΡΡ ΠΎΠ±ΡΠ΅ΠΊΡΡ
- Π£ΡΡΠ°Π½ΠΎΠ²ΠΊΠ° ΠΎΠ±Π²ΠΎΠ΄ΠΊΠΈ, Π·Π°Π»ΠΈΠ²ΠΊΠΈ ΠΈ ΡΠ΅Π½ΠΈ Π΄Π»Ρ ΠΎΠ±ΡΠ΅ΠΊΡΠΎΠ²
- Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΏΠΎΠ²ΡΠΎΡΡΡΡΠΈΡ ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ²
- Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΏΠ΅ΡΡΠΏΠ΅ΠΊΡΠΈΠ²Π½ΡΡ ΠΏΡΠΎΠ΅ΠΊΡΠΎΠ² Ρ 3D-ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π½ΠΈΡΠΌΠΈ
- Π Π΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°ΡΡ ΠΎΠ±ΡΠ΅ΠΊΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π»ΠΎΠ³ΠΈΡΠ΅ΡΠΊΠΈΡ ΠΎΠΏΠ΅ΡΠ°ΡΠΈΠΉ
- Π’Π΅ΠΊΡΡ ΠΈ ΡΡΠΈΡΡΡ
- Π Π°Π±ΠΎΡΠ° Ρ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠ°ΠΌΠΈ ΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΈ ΡΠ΅ΠΊΡΡΠ°
- Π¨ΡΠΈΡΡΡ Π² Adobe XD
- ΠΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ ΠΈ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ
- Π Π°Π±ΠΎΡΠ° Ρ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ°ΠΌΠΈ
- Π Π°Π±ΠΎΡΠ° Ρ Π²Π»ΠΎΠΆΠ΅Π½Π½ΡΠΌΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ°ΠΌΠΈ
- ΠΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΠΉ ΠΊ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ°ΠΌ
- ΠΠ°ΡΠΊΠΈΡΠΎΠ²ΠΊΠ° ΠΈ ΡΡΡΠ΅ΠΊΡΡ
- Π‘ΠΎΠ·Π΄Π°ΡΡ ΠΌΠ°ΡΠΊΡ Ρ ΡΠΈΠ³ΡΡΠ°ΠΌΠΈ
- Π Π°Π±ΠΎΡΠ° Ρ ΡΡΡΠ΅ΠΊΡΠ°ΠΌΠΈ ΡΠ°Π·ΠΌΡΡΠΈΡ
- Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠΎΠ²
- ΠΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΡΡΠ΅ΠΊΡΠΎΠ² Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ
- ΠΠ°ΠΊΠ΅Ρ
- ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΠΈ ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½ΠΈΡ
- Π£ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ Π΄Π»Ρ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ² ΠΈ Π³ΡΡΠΏΠΏ
- Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈΡ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠ² Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΡΠ΅ΠΊΠΎΠ²
- ΠΠΈΠ΄Π΅ΠΎ ΠΈ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ Lottie
- Π Π°Π±ΠΎΡΠ° Ρ Π²ΠΈΠ΄Π΅ΠΎ
- Π‘ΠΎΠ·Π΄Π°Π²Π°ΠΉΡΠ΅ ΠΏΡΠΎΡΠΎΡΠΈΠΏΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π²ΠΈΠ΄Π΅ΠΎ
- Π Π°Π±ΠΎΡΠ° Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΠ΅ΠΉ Lottie
- ΠΠΎΠ½ΡΠ°ΠΆΠ½ΡΠ΅ ΠΎΠ±Π»Π°ΡΡΠΈ, Π½Π°ΠΏΡΠ°Π²Π»ΡΡΡΠΈΠ΅ ΠΈ ΡΠ»ΠΎΠΈ
- ΠΡΠΎΡΠΎΡΠΈΠΏ
- Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΡ ΠΏΡΠΎΡΠΎΡΠΈΠΏΠΎΠ²
- ΠΠ½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΠΏΡΠΎΡΠΎΡΠΈΠΏΡ
- Π‘Π²ΠΎΠΉΡΡΠ²Π° ΠΎΠ±ΡΠ΅ΠΊΡΠ° ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ Π΄Π»Ρ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠΉ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ
- Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΏΡΠΎΡΠΎΡΠΈΠΏΠΎΠ² Ρ ΠΊΠ»Π°Π²ΠΈΠ°ΡΡΡΠΎΠΉ ΠΈ Π³Π΅ΠΉΠΌΠΏΠ°Π΄ΠΎΠΌ
- Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΏΡΠΎΡΠΎΡΠΈΠΏΠΎΠ² Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π³ΠΎΠ»ΠΎΡΠΎΠ²ΡΡ ΠΊΠΎΠΌΠ°Π½Π΄ ΠΈ Π²ΠΎΡΠΏΡΠΎΠΈΠ·Π²Π΅Π΄Π΅Π½ΠΈΡ
- Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Π²ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ΠΎΠ²
- ΠΠΎΠ±Π°Π²ΠΈΡΡ Π½Π°ΠΊΠ»Π°Π΄ΠΊΠΈ
- Π Π°Π·ΡΠ°Π±ΠΎΡΠΊΠ° Π³ΠΎΠ»ΠΎΡΠΎΠ²ΡΡ ΠΏΡΠΎΡΠΎΡΠΈΠΏΠΎΠ²
- Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΡΠΊΠΎΡΠ½ΡΡ ΡΡΡΠ»ΠΎΠΊ
- Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Π³ΠΈΠΏΠ΅ΡΡΡΡΠ»ΠΎΠΊ
- ΠΡΠ΅Π΄Π²Π°ΡΠΈΡΠ΅Π»ΡΠ½ΡΠΉ ΠΏΡΠΎΡΠΌΠΎΡΡ ΠΏΡΠΎΠ΅ΠΊΡΠΎΠ² ΠΈ ΠΏΡΠΎΡΠΎΡΠΈΠΏΠΎΠ²
- ΠΠ±ΡΠΈΠΉ Π΄ΠΎΡΡΡΠΏ, ΡΠΊΡΠΏΠΎΡΡ ΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡ
- ΠΠ±ΡΠΈΠΉ Π΄ΠΎΡΡΡΠΏ ΠΊ Π²ΡΠ±ΡΠ°Π½Π½ΡΠΌ ΠΌΠΎΠ½ΡΠ°ΠΆΠ½ΡΠΌ ΠΎΠ±Π»Π°ΡΡΡΠΌ
- ΠΠ±ΠΌΠ΅Π½ ΠΏΡΠΎΠ΅ΠΊΡΠ°ΠΌΠΈ ΠΈ ΠΏΡΠΎΡΠΎΡΠΈΠΏΠ°ΠΌΠΈ
- Π£ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΠΏΡΠ°Π²Π° Π΄ΠΎΡΡΡΠΏΠ° Π΄Π»Ρ ΡΡΡΠ»ΠΎΠΊ
- Π Π°Π±ΠΎΡΠ° Ρ ΠΏΡΠΎΡΠΎΡΠΈΠΏΠ°ΠΌΠΈ
- ΠΠ±Π·ΠΎΡ ΠΏΡΠΎΡΠΎΡΠΈΠΏΠΎΠ²
- Π Π°Π±ΠΎΡΠ° ΡΠΎ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡΠΌΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½Π°
- Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠ½ΠΎΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½Π°
- ΠΡΠΎΠ²Π΅ΡΠΊΠ° ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΉ ΠΊΠΎΠ½ΡΡΡΡΠΊΡΠΈΠΈ
- ΠΠ°Π²ΠΈΠ³Π°ΡΠΈΡ ΠΏΠΎ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½Π°
- ΠΡΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΠΈ ΠΏΡΠΎΠΊΠΎΠΌΠΌΠ΅Π½ΡΠΈΡΠΎΠ²Π°ΡΡ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ ΠΏΡΠΎΠ΅ΠΊΡΠ°
- ΠΠΊΡΠΏΠΎΡΡ ΡΠ΅ΡΡΡΡΠΎΠ² Π΄ΠΈΠ·Π°ΠΉΠ½Π°
- ΠΠΊΡΠΏΠΎΡΡ ΠΈ Π·Π°Π³ΡΡΠ·ΠΊΠ° ΡΠ΅ΡΡΡΡΠΎΠ² ΠΈΠ· ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½Π°
- ΠΠ±ΡΠΈΠΉ Π΄ΠΎΡΡΡΠΏ ΠΊ Π³ΡΡΠΏΠΏΠ΅ Π΄Π»Ρ ΠΏΡΠ΅Π΄ΠΏΡΠΈΡΡΠΈΡ
- Π‘ΠΈΡΡΠ΅ΠΌΡ ΠΏΡΠΎΠ΅ΠΊΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ
- Π‘ΠΈΡΡΠ΅ΠΌΡ ΠΏΡΠΎΠ΅ΠΊΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ Ρ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ°ΠΌΠΈ Creative Cloud
- Π Π°Π±ΠΎΡΠ° Ρ Π°ΠΊΡΠΈΠ²Π°ΠΌΠΈ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ° Π² Adobe XD
- Π Π°Π±ΠΎΡΠ° Ρ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ°ΠΌΠΈ Creative Cloud Π² Adobe XD
- ΠΠΈΠ³ΡΠ°ΡΠΈΡ ΡΠΎ ΡΠ²ΡΠ·Π°Π½Π½ΡΡ ΡΠ΅ΡΡΡΡΠΎΠ² Π² Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ Creative Cloud
- Π Π°Π±ΠΎΡΠ° Ρ ΡΠΎΠΊΠ΅Π½Π°ΠΌΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½Π°
- ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΠ΅ΡΡΡΡΡ ΠΈΠ· Creative Cloud Libraries
- ΠΠ±Π»Π°ΡΠ½ΡΠ΅ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΡ
- ΠΠ±Π»Π°ΡΠ½ΡΠ΅ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΡ Π² Adobe XD
- Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠ½Π°Ρ ΡΠ°Π±ΠΎΡΠ° ΠΈ ΡΠΎΠ²ΠΌΠ΅ΡΡΠ½ΠΎΠ΅ ΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΏΡΠΎΠ΅ΠΊΡΠΎΠ²
- Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠ½ΠΎΠ΅ ΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠΌΠΈ Ρ Π²Π°ΠΌΠΈ ΠΏΠΎΠ΄Π΅Π»ΠΈΠ»ΠΈΡΡ
- ΠΠ½ΡΠ΅Π³ΡΠ°ΡΠΈΠΈ ΠΈ ΠΏΠ»Π°Π³ΠΈΠ½Ρ
- Π Π°Π±ΠΎΡΠ° Ρ Π²Π½Π΅ΡΠ½ΠΈΠΌΠΈ Π°ΠΊΡΠΈΠ²Π°ΠΌΠΈ
- Π Π°Π±ΠΎΡΠ° Ρ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ΡΡΠΊΠΈΠΌΠΈ ΡΠ΅ΡΡΡΡΠ°ΠΌΠΈ ΠΈΠ· Photoshop
- ΠΠΎΠΏΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈ Π²ΡΡΠ°Π²ΠΊΠ° ΡΠ΅ΡΡΡΡΠΎΠ² ΠΈΠ· Photoshop
- ΠΠΌΠΏΠΎΡΡ ΠΈΠ»ΠΈ ΠΎΡΠΊΡΡΡΠΈΠ΅ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠ² Photoshop
- Π Π°Π±ΠΎΡΠ° Ρ ΡΠ΅ΡΡΡΡΠ°ΠΌΠΈ Illustrator Π² Adobe XD
- ΠΡΠΊΡΡΡΡ ΠΈΠ»ΠΈ ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ ΠΏΡΠΎΠ΅ΠΊΡΡ Illustrator
- ΠΠΎΠΏΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π²Π΅ΠΊΡΠΎΡΠΎΠ² ΠΈΠ· Illustrator Π² XD
- ΠΠ»Π°Π³ΠΈΠ½Ρ Π΄Π»Ρ Adobe XD
- Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² ΠΈ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ ΠΈΠΌΠΈ
- ΠΠ½ΡΠ΅Π³ΡΠ°ΡΠΈΡ Jira Π΄Π»Ρ XD
- ΠΠ»Π°Π³ΠΈΠ½ Slack Π΄Π»Ρ XD
- ΠΠ»Π°Π³ΠΈΠ½ Zoom Π΄Π»Ρ XD
- ΠΡΠ±Π»ΠΈΠΊΠ°ΡΠΈΡ Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΈΠ· XD Π½Π° Behance
- XD Π΄Π»Ρ iOS ΠΈ Android
- ΠΡΠ΅Π΄Π²Π°ΡΠΈΡΠ΅Π»ΡΠ½Π°Ρ Π²Π΅ΡΡΠΈΡ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ
- Adobe XD Π΄Π»Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²: ΡΠ°ΡΡΠΎ Π·Π°Π΄Π°Π²Π°Π΅ΠΌΡΠ΅ Π²ΠΎΠΏΡΠΎΡΡ
- Π£ΡΡΡΠ°Π½Π΅Π½ΠΈΠ΅ Π½Π΅ΠΏΠΎΠ»Π°Π΄ΠΎΠΊ
- ΠΠ·Π²Π΅ΡΡΠ½ΡΠ΅ ΠΈ ΡΡΡΡΠ°Π½Π΅Π½Π½ΡΠ΅ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ
- ΠΠ·Π²Π΅ΡΡΠ½ΡΠ΅ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ
- ΠΡΠΏΡΠ°Π²Π»Π΅Π½Ρ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ
- Π£ΡΡΠ°Π½ΠΎΠ²ΠΊΠ° ΠΈ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΡ
- XD ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ ΠΊΠ°ΠΊ Π½Π΅ΡΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠΉ Ρ Windows
- ΠΠΎΠ΄ ΠΎΡΠΈΠ±ΠΊΠΈ 191
- ΠΠΎΠ΄ ΠΎΡΠΈΠ±ΠΊΠΈ 183
- ΠΡΠΎΠ±Π»Π΅ΠΌΡ ΠΏΡΠΈ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠ΅ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°Π΅ΠΌΡΡ ΠΌΠΎΠ΄ΡΠ»Π΅ΠΉ XD
- ΠΠ°ΠΏΡΠΎΡ Π½Π° ΡΠ΄Π°Π»Π΅Π½ΠΈΠ΅ ΠΈ ΠΏΠ΅ΡΠ΅ΡΡΡΠ°Π½ΠΎΠ²ΠΊΡ XD Π² Windows 10
- ΠΡΠΎΠ±Π»Π΅ΠΌΡ Ρ ΠΏΠ΅ΡΠ΅Π½ΠΎΡΠΎΠΌ Π½Π°ΡΡΡΠΎΠ΅ΠΊ
- ΠΠ°ΠΏΡΡΠΊ ΠΈ ΡΠ±ΠΎΠΉ
- XD Π°Π²Π°ΡΠΈΠΉΠ½ΠΎ Π·Π°Π²Π΅ΡΡΠ°Π΅Ρ ΡΠ°Π±ΠΎΡΡ ΠΏΡΠΈ Π·Π°ΠΏΡΡΠΊΠ΅ Π² Windows 10
- XD Π·Π°Π²Π΅ΡΡΠ°Π΅Ρ ΡΠ°Π±ΠΎΡΡ ΠΏΡΠΈ Π²ΡΡ ΠΎΠ΄Π΅ ΠΈΠ· Creative Cloud
- ΠΡΠΎΠ±Π»Π΅ΠΌΠ° ΡΠΎ ΡΡΠ°ΡΡΡΠΎΠΌ ΠΏΠΎΠ΄ΠΏΠΈΡΠΊΠΈ Π² Windows
- ΠΡΠ΅Π΄ΡΠΏΡΠ΅ΠΆΠ΄Π΅Π½ΠΈΠ΅ ΠΎ Π·Π°Π±Π»ΠΎΠΊΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΌ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ ΠΏΡΠΈ Π·Π°ΠΏΡΡΠΊΠ΅ XD Π² Windows
- Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Π°Π²Π°ΡΠΈΠΉΠ½ΠΎΠ³ΠΎ Π΄Π°ΠΌΠΏΠ° Π² Windows
- Π‘Π±ΠΎΡ ΠΈ ΡΠΎΠ²ΠΌΠ΅ΡΡΠ½ΠΎΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΆΡΡΠ½Π°Π»Π° ΡΠ±ΠΎΠ΅Π²
- ΠΠ±Π»Π°ΡΠ½ΡΠ΅ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΡ ΠΈ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ Creative Cloud Libraries
- ΠΡΠΎΠ±Π»Π΅ΠΌΡ Ρ ΠΎΠ±Π»Π°ΡΠ½ΡΠΌΠΈ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΠΌΠΈ XD
- ΠΡΠΎΠ±Π»Π΅ΠΌΡ ΡΠΎ ΡΠ²ΡΠ·Π°Π½Π½ΡΠΌΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ°ΠΌΠΈ
- ΠΡΠΎΠ±Π»Π΅ΠΌΡ Ρ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ°ΠΌΠΈ ΠΈ ΡΡΡΠ»ΠΊΠ°ΠΌΠΈ
- Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΏΡΠΎΡΠΎΡΠΈΠΏΠ°, ΠΏΡΠ±Π»ΠΈΠΊΠ°ΡΠΈΡ ΠΈ ΠΏΡΠΎΠ²Π΅ΡΠΊΠ°
- ΠΠ΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ Π·Π°ΠΏΠΈΡΠ°ΡΡ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ Ρ ΠΏΡΠΎΡΠΎΡΠΈΠΏΠΎΠΌ Π² macOS Catalina
- ΠΡΠΎΠ±Π»Π΅ΠΌΡ Ρ ΡΠ°Π±ΠΎΡΠΈΠΌΠΈ ΠΏΡΠΎΡΠ΅ΡΡΠ°ΠΌΠΈ ΠΏΡΠ±Π»ΠΈΠΊΠ°ΡΠΈΠΈ
- ΠΠΏΡΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΡΡΠ»ΠΊΠΈ Π½Π΅ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ
- ΠΡΠΎΡΠΎΡΠΈΠΏΡ Π½Π΅ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ
- ΠΠ°Π½Π΅Π»Ρ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠ΅Π² Π²Π½Π΅Π·Π°ΠΏΠ½ΠΎ ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ Π½Π° ΠΎΠ±ΡΠΈΡ ΡΡΡΠ»ΠΊΠ°Ρ
- ΠΠ΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ ΠΎΠΏΡΠ±Π»ΠΈΠΊΠΎΠ²Π°ΡΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ
- ΠΠΌΠΏΠΎΡΡ, ΡΠΊΡΠΏΠΎΡΡ ΠΈ ΡΠ°Π±ΠΎΡΠ° Ρ Π΄ΡΡΠ³ΠΈΠΌΠΈ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡΠΌΠΈ
- ΠΠΌΠΏΠΎΡΡ ΠΈ ΡΠΊΡΠΏΠΎΡΡ Π² XD
- ΡΠ°ΠΉΠ»ΠΎΠ² Photoshop Π² XD
- Π€Π°ΠΉΠ»Ρ Illustrator Π² XD
- ΠΠΊΡΠΏΠΎΡΡ Π² After Effects ΠΈΠ· XD
- Π€Π°ΠΉΠ»Ρ ΡΡΠΊΠΈΠ·ΠΎΠ² Π² XD
- Π‘ΡΠΎΡΠΎΠ½Π½ΠΈΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Π½Π΅ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ ΠΏΡΠΈ ΡΠΊΡΠΏΠΎΡΡΠ΅
- ΠΠ·Π²Π΅ΡΡΠ½ΡΠ΅ ΠΈ ΡΡΡΡΠ°Π½Π΅Π½Π½ΡΠ΅ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ
ΠΡΠ±Π΅ΡΠΈΡΠ΅ ΠΎΠ±ΡΠ΅ΠΊΡ.
Π©Π΅Π»ΠΊΠ½ΠΈΡΠ΅ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊ ΡΡΠ΄ΠΎΠΌ Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ Β«ΠΠ°Π»ΠΈΠ²ΠΊΠ°Β». ΠΠΎΡΠ²ΠΈΡΡΡ ΠΏΠ°Π»ΠΈΡΡΠ° ΡΠ²Π΅ΡΠΎΠ².
ΠΠ°Π»ΠΈΡΡΠ° ΡΠ²Π΅ΡΠΎΠ²ΠΠ»Ρ Π·Π°Π»ΠΈΠ²ΠΊΠΈ ΡΠ²Π΅ΡΠΎΠ² ΠΌΠΎΠΆΠ½ΠΎ ΡΠ°ΠΊΠΆΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½Ρ Β«ΠΠΈΠΏΠ΅ΡΠΊΠ°Β». ΠΠ»Π°Π²ΠΈΡΠ° [i] Π°ΠΊΡΠΈΠ²ΠΈΡΡΠ΅Ρ ΠΏΠΈΠΏΠ΅ΡΠΊΡ Β«ΠΠ°ΠΏΠΎΠ»Π½ΠΈΡΡΒ».
- ΠΠ΄Π½ΠΎΠΊΡΠ°ΡΠ½ΠΎΠ΅ Π½Π°ΠΆΠ°ΡΠΈΠ΅ Π½Π° ΠΊΠ»Π°Π²ΠΈΡΡ ΠΎΡΠΊΡΡΠ²Π°Π΅Ρ ΠΏΠΈΠΏΠ΅ΡΠΊΡ Β«ΠΠ°ΠΏΠΎΠ»Π½ΠΈΡΡΒ».
- ΠΡΠΈ ΠΏΠΎΠ²ΡΠΎΡΠ½ΠΎΠΌ Π½Π°ΠΆΠ°ΡΠΈΠΈ ΠΊΠ»Π°Π²ΠΈΡΠΈ ΠΏΠΈΠΏΠ΅ΡΠΊΠ° "ΠΠ°Π»ΠΈΠ²ΠΊΠ°" Π·Π°ΠΊΡΡΠ²Π°Π΅ΡΡΡ.
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΡΠ±ΡΠ°ΡΡ:
- Π£ΠΊΠ°ΠΆΠΈΡΠ΅ HSBA, RGB ΠΈΠ»ΠΈ ΡΠ΅ΡΡΠ½Π°Π΄ΡΠ°ΡΠ΅ΡΠΈΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ, Π΅ΡΠ»ΠΈ Π²Ρ Π·Π½Π°Π΅ΡΠ΅ ΡΠΎΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΡΠ²Π΅ΡΠ°. ΠΡ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΡΡΡ ΠΌΠ΅ΠΆΠ΄Ρ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠΌΠΈ ΡΠ²Π΅ΡΠΎΠ²ΡΠΌΠΈ ΡΠ΅ΠΆΠΈΠΌΠ°ΠΌΠΈ.
- ΠΠ°ΡΡΡΠΎΠΉΡΠ΅ ΡΠ²Π΅Ρ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ²Π΅ΡΠΎΠ²ΠΎΠ³ΠΎ ΠΏΠΎΠ»Ρ ΠΈ ΠΏΠΎΠ»Π·ΡΠ½ΠΊΠ° ΡΠ²Π΅ΡΠ°. ΠΡΠΈ ΡΡΠΎΠΌ ΡΠΈΡΠ»ΠΎΠ²ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ HSBA, RGB ΠΈ ΡΠ΅ΡΡΠ½Π°Π΄ΡΠ°ΡΠ΅ΡΠΈΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΊΠΎΡΡΠ΅ΠΊΡΠΈΡΡΡΡΡΡ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ.
- ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ Π·Π°Π»ΠΈΠ²ΠΊΡ ΠΈ Π½Π΅ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΡΡΡ Π·Π°Π»ΠΈΠ²ΠΊΠΈ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΠΏΠΎΠ»Π·ΡΠ½ΠΎΠΊ ΡΠ²Π΅ΡΠ° ΠΈΠ»ΠΈ ΡΠΊΠ°Π·Π°Π² Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π² ΠΏΡΠΎΡΠ΅Π½ΡΠ°Ρ .
- ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½Ρ Β«ΠΠΈΠΏΠ΅ΡΠΊΠ°Β», ΡΡΠΎΠ±Ρ Π²ΡΠ±ΡΠ°ΡΡ ΡΠ²Π΅Ρ Π½Π° ΠΌΠΎΠ½ΡΠ°ΠΆΠ½ΠΎΠΉ ΠΎΠ±Π»Π°ΡΡΠΈ.
- ΠΡ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠ½ΡΡ Π·Π°Π»ΠΈΠ²ΠΊΡ ΠΊ ΠΎΠ±ΡΠ΅ΠΊΡΡ. ΠΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΡΠ²Π΅Π΄Π΅Π½ΠΈΡ ΠΎ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠ°Ρ ΡΠΌ. Π² ΡΠ°Π·Π΄Π΅Π»Π΅ Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠΎΠ².
ΠΡΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠΎΠ² Π² ΠΏΠ°Π»ΠΈΡΡΠ΅ ΡΠ²Π΅ΡΠΎΠ² Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ Π½Π° ΠΌΠΎΠ½ΡΠ°ΠΆΠ½ΠΎΠΉ ΠΎΠ±Π»Π°ΡΡΠΈ.
Adobe XD ΡΠ°ΠΊΠΆΠ΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ ΡΠΎΠΊΡΠ°ΡΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ ΡΠ΅ΡΡΠ½Π°Π΄ΡΠ°ΡΠ΅ΡΠΈΡΠ½ΡΡ ΠΊΠΎΠ΄ΠΎΠ². ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π΅ΡΠ»ΠΈ Π²Π²Π΅ΡΡΠΈ 0 ΠΈ Π½Π°ΠΆΠ°ΡΡ ΠΊΠ»Π°Π²ΠΈΡΡ Β«ΠΠ²ΠΎΠ΄Β», XD Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΠΎΡΠΎΠ±ΡΠ°Π·ΠΈΡ ΡΠ²Π΅Ρ Ρ ΠΊΠΎΠ΄ΠΎΠΌ #000000.
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΎΡ ΡΠ°Π½ΠΈΡΡ ΡΠ²Π΅Ρ ΠΊΠ°ΠΊ ΠΎΠ±ΡΠ°Π·Π΅Ρ Π΄Π»Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Π² Π±ΡΠ΄ΡΡΠ΅ΠΌ. Π§ΡΠΎΠ±Ρ ΡΠΎΡ ΡΠ°Π½ΠΈΡΡ ΡΠ²Π΅Ρ ΠΊΠ°ΠΊ ΠΎΠ±ΡΠ°Π·Π΅Ρ, ΡΠ΅Π»ΠΊΠ½ΠΈΡΠ΅ Π·Π½Π°ΡΠΎΠΊ + Π² Π½ΠΈΠΆΠ½Π΅ΠΉ ΡΠ°ΡΡΠΈ ΠΏΠ°Π»ΠΈΡΡΡ ΡΠ²Π΅ΡΠΎΠ².
ΠΠΎΠ±Π°Π²ΠΈΡΡ ΠΎΠ±ΡΠ°Π·ΡΡΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΠΏΠΎΡΡΠ΄ΠΎΠΊ ΠΎΠ±ΡΠ°Π·ΡΠΎΠ² Π² ΠΏΠ°Π»ΠΈΡΡΠ΅ ΡΠ²Π΅ΡΠΎΠ², ΠΏΠ΅ΡΠ΅ΡΠ°ΡΠΈΠ² ΠΎΠ±ΡΠ°Π·Π΅Ρ Π² Π½ΠΎΠ²ΠΎΠ΅ ΠΌΠ΅ΡΡΠΎ. Π§ΡΠΎΠ±Ρ ΡΠ΄Π°Π»ΠΈΡΡ ΠΎΠ±ΡΠ°Π·Π΅Ρ, ΠΏΠ΅ΡΠ΅ΡΠ°ΡΠΈΡΠ΅ Π΅Π³ΠΎ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Ρ ΠΏΠ°Π»ΠΈΡΡΡ ΡΠ²Π΅ΡΠΎΠ².
- ΠΠ²Π°ΠΆΠ΄Ρ ΡΠ΅Π»ΠΊΠ½ΠΈΡΠ΅ ΠΈ Π²Π²Π΅Π΄ΠΈΡΠ΅ ΡΠ΅ΠΆΠΈΠΌ ΠΎΠ±ΡΠ΅Π·ΠΊΠΈ Π΄Π»Ρ Π·Π°Π»ΠΈΠ²ΠΊΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
- ΠΠ·ΠΌΠ΅Π½ΠΈΡΡ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² ΡΠ΅ΠΆΠΈΠΌΠ΅ ΠΎΠ±ΡΠ΅Π·ΠΊΠΈ ΠΈΠ»ΠΈ
- ΠΠ΅ΡΠ΅ΠΌΠ΅ΡΡΠΈΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π² Π»ΡΠ±ΠΎΠ΅ ΠΌΠ΅ΡΡΠΎ Π² ΡΠ΅ΠΆΠΈΠΌΠ΅ ΠΎΠ±ΡΠ΅Π·ΠΊΠΈ
ΠΡΠ±Π΅ΡΠΈΡΠ΅ ΠΎΠ±ΡΠ΅ΠΊΡ.
Π¨ΠΈΡΠΈΠ½Π° ΠΎΠ±Π²ΠΎΠ΄ΠΊΠΈ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΡΠ°Π²Π½Π° 1. Π§ΡΠΎΠ±Ρ ΡΠΊΠ°Π·Π°ΡΡ Π΄ΡΡΠ³ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅, ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΡΠ°Π½ΠΈΡΠ°.
Π©Π΅Π»ΠΊΠ½ΠΈΡΠ΅ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΡΡ ΡΠ²Π΅ΡΠΎΠ²ΡΡ ΠΌΠ΅ΡΠΊΡ ΡΡΠ΄ΠΎΠΌ Ρ Π³ΡΠ°Π½ΠΈΡΠ΅ΠΉ. ΠΠΎΡΠ²ΠΈΡΡΡ ΠΏΠ°Π»ΠΈΡΡΠ° ΡΠ²Π΅ΡΠΎΠ².
ΠΡΠ±ΠΎΡ ΡΠ²Π΅ΡΠ°ΠΠΎΠΆΠ½ΠΎ Π²ΡΠ±ΡΠ°ΡΡ:
- Π£ΠΊΠ°ΠΆΠΈΡΠ΅ HSBA, RGB ΠΈΠ»ΠΈ ΡΠ΅ΡΡΠ½Π°Π΄ΡΠ°ΡΠ΅ΡΠΈΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ, Π΅ΡΠ»ΠΈ Π²Ρ Π·Π½Π°Π΅ΡΠ΅ ΡΠΎΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ.
- ΠΠ°ΡΡΡΠΎΠΉΡΠ΅ ΡΠ²Π΅Ρ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ²Π΅ΡΠΎΠ²ΠΎΠ³ΠΎ ΠΏΠΎΠ»Ρ ΠΈ ΠΏΠΎΠ»Π·ΡΠ½ΠΊΠ° ΡΠ²Π΅ΡΠ°. ΠΡΠΈ ΡΡΠΎΠΌ ΡΠΈΡΠ»ΠΎΠ²ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ HSBA, RGB ΠΈ ΡΠ΅ΡΡΠ½Π°Π΄ΡΠ°ΡΠ΅ΡΠΈΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΊΠΎΡΡΠ΅ΠΊΡΠΈΡΡΡΡΡΡ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ.
- ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½Ρ Β«ΠΠΈΠΏΠ΅ΡΠΊΠ°Β», ΡΡΠΎΠ±Ρ Π²ΡΠ±ΡΠ°ΡΡ ΡΠ²Π΅Ρ Π½Π° ΠΌΠΎΠ½ΡΠ°ΠΆΠ½ΠΎΠΉ ΠΎΠ±Π»Π°ΡΡΠΈ.
- Π£ΡΡΠ°Π½ΠΎΠ²ΠΈΡΠ΅ ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΡΡΡ Π³ΡΠ°Π½ΠΈΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΏΠΎΠ»Π·ΡΠ½ΠΊΠ° ΡΠ²Π΅ΡΠ° ΠΈΠ»ΠΈ Π²Π²Π΅Π΄ΠΈΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π² ΠΏΡΠΎΡΠ΅Π½ΡΠ°Ρ .
- ΠΡΡΠ΅Π΄Π°ΠΊΡΠΈΡΡΠΉΡΠ΅ ΡΠ°Π·ΠΌΠ΅Ρ Π³ΡΠ°Π½ΠΈΡΡ ΠΈ ΡΠΎΠ·Π΄Π°ΠΉΡΠ΅ ΠΏΡΠ½ΠΊΡΠΈΡΠ½ΡΠ΅ Π»ΠΈΠ½ΠΈΠΈ
- Π£ΠΊΠ°ΠΆΠΈΡΠ΅ ΡΠΎΡΡΠ΅Π²ΡΠ΅ Π·Π°Π³Π»ΡΡΠΊΠΈ (ΡΡΡΠΊ, ΡΠΊΡΡΠ³Π»Π΅Π½ΠΈΠ΅, Π²ΡΡΡΡΠΏ) ΠΈ ΡΠΎΠ΅Π΄ΠΈΠ½Π΅Π½ΠΈΡ (ΠΏΠΎΠ΄ ΡΠ³Π»ΠΎΠΌ, ΡΠΊΡΡΠ³Π»Π΅Π½ΠΈΠ΅, ΡΠΊΠΎΡ), Π° ΡΠ°ΠΊΠΆΠ΅ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠ΅ ΠΈ Π²Π½Π΅ΡΠ½ΠΈΠ΅ ΡΡΡΠΈΡ
ΠΈ.
ΠΡΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠΎΠ² Π² ΠΏΠ°Π»ΠΈΡΡΠ΅ ΡΠ²Π΅ΡΠΎΠ² ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΡΠ²Π΅Ρ ΠΎΠ±Π²ΠΎΠ΄ΠΊΠΈ ΠΎΠ±ΡΠ΅ΠΊΡΠ°.
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΎΡ ΡΠ°Π½ΠΈΡΡ ΡΠ²Π΅Ρ ΠΊΠ°ΠΊ ΠΎΠ±ΡΠ°Π·Π΅Ρ Π΄Π»Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Π² Π±ΡΠ΄ΡΡΠ΅ΠΌ. Π§ΡΠΎΠ±Ρ ΡΠΎΡ ΡΠ°Π½ΠΈΡΡ ΡΠ²Π΅Ρ ΠΊΠ°ΠΊ ΠΎΠ±ΡΠ°Π·Π΅Ρ, ΡΠ΅Π»ΠΊΠ½ΠΈΡΠ΅ Π·Π½Π°ΡΠΎΠΊ + Π² Π½ΠΈΠΆΠ½Π΅ΠΉ ΡΠ°ΡΡΠΈ ΠΏΠ°Π»ΠΈΡΡΡ ΡΠ²Π΅ΡΠΎΠ².
ΠΠΎΠ±Π°Π²ΠΈΡΡ ΠΎΠ±ΡΠ°Π·ΡΡΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΠΏΠΎΡΡΠ΄ΠΎΠΊ ΠΎΠ±ΡΠ°Π·ΡΠΎΠ² Π² ΠΏΠ°Π»ΠΈΡΡΠ΅ ΡΠ²Π΅ΡΠΎΠ², ΠΏΠ΅ΡΠ΅ΡΠ°ΡΠΈΠ² ΠΎΠ±ΡΠ°Π·Π΅Ρ Π² Π½ΠΎΠ²ΠΎΠ΅ ΠΌΠ΅ΡΡΠΎ. Π§ΡΠΎΠ±Ρ ΡΠ΄Π°Π»ΠΈΡΡ ΠΎΠ±ΡΠ°Π·Π΅Ρ, ΠΏΠ΅ΡΠ΅ΡΠ°ΡΠΈΡΠ΅ Π΅Π³ΠΎ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Ρ ΠΏΠ°Π»ΠΈΡΡΡ ΡΠ²Π΅ΡΠΎΠ².
ΠΡΠ»ΠΈ ΠΎΠ±ΡΠ΅ΠΊΡ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠΎΠ±ΠΎΠΉ Π·Π°ΠΌΠΊΠ½ΡΡΡΠΉ ΠΏΡΡΡ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΊΠ°Π·Π°ΡΡ ΡΠΈΡΠΈΠ½Ρ ΠΎΠ±Π²ΠΎΠ΄ΠΊΠΈ. Π§ΡΠΎΠ±Ρ Π²ΡΡΠΎΠ²Π½ΡΡΡ ΠΎΠ±Π²ΠΎΠ΄ΠΊΡ Π²Π΄ΠΎΠ»Ρ ΠΊΠΎΠ½ΡΡΡΠ°, Π²ΡΠ±Π΅ΡΠΈΡΠ΅ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· ΡΠ»Π΅Π΄ΡΡΡΠΈΡ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠΎΠ², ΠΏΠ΅ΡΠ΅ΡΠΈΡΠ»Π΅Π½Π½ΡΡ Π½Π° ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌ ΡΠΈΡΡΠ½ΠΊΠ΅.
ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ XD Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π΅Ρ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠΉ ΡΡΡΠΈΡ ΠΏΠΎ Π·Π°ΠΌΠΊΠ½ΡΡΠΎΠΌΡ ΠΊΠΎΠ½ΡΡΡΡ.
Π‘ΡΠΈΠ»ΠΈ ΠΎΠ±Π²ΠΎΠ΄ΠΊΠΈA. ΠΠ½ΡΡΡΠ΅Π½Π½ΠΈΠΉ Ρ ΠΎΠ΄ B. ΠΠ½Π΅ΡΠ½ΠΈΠΉ Ρ ΠΎΠ΄ C. Π¦Π΅Π½ΡΡΠ°Π»ΡΠ½ΡΠΉ Ρ ΠΎΠ΄ D. Π’ΠΎΡΡΠ΅Π²Π°Ρ ΠΊΡΡΡΠΊΠ° E. ΠΡΡΠ³Π»Π°Ρ ΠΊΡΡΡΠΊΠ° F. ΠΡΡΡΡΠΏΠ°ΡΡΠ°Ρ ΠΊΡΡΡΠΊΠ° G. Π‘ΠΎΠ΅Π΄ΠΈΠ½Π΅Π½ΠΈΠ΅ ΠΏΠΎΠ΄ ΡΠ³Π»ΠΎΠΌ1 ΠΡΡΠ³Π»ΠΎΠ΅ ΡΠΎΠ΅Π΄ΠΈΠ½Π΅Π½ΠΈΠ΅11 92 Π‘ΠΎΠ΅Π΄ΠΈΠ½Π΅Π½ΠΈΠ΅ ΡΠΎ ΡΠΊΠΎΡΠΎΠΌ
ΠΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠΈΡΠΈΠ½Ρ ΠΎΠ±Π²ΠΎΠ΄ΠΊΠΈ ΠΈΠ»ΠΈ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΡ ΠΎΠ±Π²ΠΎΠ΄ΠΊΠΈ Π½Π΅ ΠΌΠ΅Π½ΡΠ΅Ρ ΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΠΎΠ±ΡΠ΅ΠΊΡΠ° (Ρ ΡΠΎΡΠΊΠΈ Π·ΡΠ΅Π½ΠΈΡ ΠΎΠ³ΡΠ°Π½ΠΈΡΠΈΠ²Π°ΡΡΠ΅ΠΉ ΡΠ°ΠΌΠΊΠΈ).
ΠΠ΄Π½Π°ΠΊΠΎ ΠΏΡΠΈ ΡΠΊΡΠΏΠΎΡΡΠ΅ ΠΎΠ±ΡΠ΅ΠΊΡΠ° Π΅ΡΡΡ Π²Π΅ΡΠΎΡΡΠ½ΠΎΡΡΡ, ΡΡΠΎ ΡΠ°Π·ΠΌΠ΅ΡΡ ΠΎΠ±ΡΠ΅ΠΊΡΠ° ΠΈΠ·ΠΌΠ΅Π½ΡΡΡΡ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΠΈΠΏΠ° ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΠΎΠΉ ΠΎΠ±Π²ΠΎΠ΄ΠΊΠΈ.
SVG ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ ΡΠΎΠ»ΡΠΊΠΎ ΡΡΡΠΈΡ ΠΈ ΠΏΠΎ ΡΠ΅Π½ΡΡΡ. ΠΡΠ»ΠΈ Π²Ρ ΡΠΊΡΠΏΠΎΡΡΠΈΡΡΠ΅ΡΠ΅ ΠΎΠ±ΡΠ΅ΠΊΡ Ρ Π²Π½ΡΡΡΠ΅Π½Π½Π΅ΠΉ ΠΈΠ»ΠΈ Π²Π½Π΅ΡΠ½Π΅ΠΉ ΠΎΠ±Π²ΠΎΠ΄ΠΊΠΎΠΉ Π² ββΡΠΎΡΠΌΠ°ΡΠ΅ SVG, ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΊΡΠΏΠΎΡΡΠΈΡΡΠ΅ΠΌΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π±ΡΠ΄Π΅Ρ ΡΠ°ΠΊΠΈΠΌ, ΠΊΠ°ΠΊ Π΅ΡΠ»ΠΈ Π±Ρ Ρ Π½Π΅Π³ΠΎ Π±ΡΠ»Π° ΠΎΠ±Π²ΠΎΠ΄ΠΊΠ° ΠΏΠΎ ΡΠ΅Π½ΡΡΡ.
ΠΠ²Π΅Π΄ΠΈΡΠ΅ Π»ΡΠ±ΡΡ Π±ΡΠΊΠ²Ρ, ΡΠΊΠ°ΠΆΠ΅ΠΌ, S , ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½Ρ Text Π½Π° Ρ ΠΎΠ»ΡΡΠ΅.
ΠΡΠ±Π΅ΡΠΈΡΠ΅ Π±ΡΠΊΠ²Ρ S ΠΈ Π²ΡΠ±Π΅ΡΠΈΡΠ΅ Object > Path > Outline Stroke.
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΎΠ±Π²ΠΎΠ΄ΠΊΡ ΠΊΠΎΠ½ΡΡΡΠ° Π½Π° ΡΠ΅ΠΊΡΡΠΎΠ²ΠΎΠΉ Π±ΡΠΊΠ²Π΅.
ΠΠ° ΠΏΠ°Π½Π΅Π»ΠΈ Β«Π‘Π»ΠΎΠΈΒ» ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠΎΡΠΌΠΎΡΡΠ΅ΡΡ Π΄Π²Π° ΡΠ»ΠΎΡ: 1.S β ΠΠΎΠ½ΡΡΡ ΠΈ 2. S .
ΠΠ²Π°ΠΆΠ΄Ρ ΡΠ΅Π»ΠΊΠ½ΠΈΡΠ΅ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊ, ΡΡΠΎΠ±Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΎΠΏΠΎΡΠ½ΡΠ΅ ΡΠΎΡΠΊΠΈ.
ΠΠ°ΠΆΠΌΠΈΡΠ΅ ΠΈ ΠΏΠ΅ΡΠ΅ΡΠ°ΡΠΈΡΠ΅ ΠΎΠΏΠΎΡΠ½ΡΠ΅ ΡΠΎΡΠΊΠΈ, ΡΡΠΎΠ±Ρ ΡΠΎΠ·Π΄Π°ΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΡΡ ΡΠΎΡΠΌΡ.
ΠΠΎΡΠ»Π΅ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π²Ρ ΡΠΎΠ·Π΄Π°Π»ΠΈ ΡΠΈΠ³ΡΡΡ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ Π΅Π΅ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΏΠ°Π½Π΅Π»ΠΈ Π‘Π²ΠΎΠΉΡΡΠ²Π° , Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ Π΅Π΅ ΡΠ²Π΅Ρ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΠ°Π»ΠΈΠ²ΠΊΠΈ ΠΈ ΠΡΠ°Π΄ΠΈΠ΅Π½ΡΠΎΠ² .
ΠΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΡΠ²Π΅ΡΠΎΠ² ΠΈ ΡΡΠΈΠ»Π΅ΠΉ Π΄Π»Ρ ΠΈΠ½Π΄ΠΈΠ²ΠΈΠ΄ΡΠ°Π»ΡΠ½ΠΎΠΉ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ ΡΠΎΡΠΌΡΠΠΎΠ±Π°Π²ΡΡΠ΅ ΠΎΠ±ΡΠ΅ΠΊΡ Π½Π° ΠΌΠΎΠ½ΡΠ°ΠΆΠ½ΡΡ ΠΎΠ±Π»Π°ΡΡΡ.
Π©Π΅Π»ΠΊΠ½ΠΈΡΠ΅ ΠΎΠ±ΡΠ΅ΠΊΡ, Π° Π·Π°ΡΠ΅ΠΌ ΡΠ΅Π»ΠΊΠ½ΠΈΡΠ΅ Π’Π΅Π½Ρ ΠΈΠ»ΠΈ ΠΠ½ΡΡΡΠ΅Π½Π½ΡΡ ΡΠ΅Π½Ρ Π² ΠΈΠ½ΡΠΏΠ΅ΠΊΡΠΎΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ².
Π ΠΏΠ°Π»ΠΈΡΡΠ΅ ΡΠ²Π΅ΡΠΎΠ² Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ ΡΠ²Π΅Ρ ΠΈ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΠ΅ ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΡΡΡ ΡΠ΅Π½ΠΈ:
a. Π§ΡΠΎΠ±Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠ²Π΅Ρ ΡΠ΅Π½ΠΈ, Π²ΡΠΏΠΎΠ»Π½ΠΈΡΠ΅ ΠΎΠ΄Π½ΠΎ ΠΈΠ· ΡΠ»Π΅Π΄ΡΡΡΠΈΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΠΉ:
- Π£ΠΊΠ°ΠΆΠΈΡΠ΅ HSB, RGB ΠΈΠ»ΠΈ ΡΠ΅ΡΡΠ½Π°Π΄ΡΠ°ΡΠ΅ΡΠΈΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²Π΅ΡΠ°. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π»Π΅Π³ΠΊΠΎ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΡΡΡ ΠΌΠ΅ΠΆΠ΄Ρ ΡΡΠΈΠΌΠΈ ΡΠ²Π΅ΡΠΎΠ²ΡΠΌΠΈ ΡΠ΅ΠΆΠΈΠΌΠ°ΠΌΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΌΠ΅Π½Ρ.
- ΠΠ°ΡΡΡΠΎΠΉΡΠ΅ ΡΠ²Π΅Ρ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ²Π΅ΡΠΎΠ²ΠΎΠ³ΠΎ ΠΏΠΎΠ»Ρ ΠΈ ΠΏΠΎΠ»Π·ΡΠ½ΠΊΠ° ΡΠ²Π΅ΡΠ°. ΠΡΠΈ ΡΡΠΎΠΌ HSB, RGB ΠΈΠ»ΠΈ ΡΠ΅ΡΡΠ½Π°Π΄ΡΠ°ΡΠ΅ΡΠΈΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°ΡΡΡΡ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ.
- ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½Ρ Β«ΠΠΈΠΏΠ΅ΡΠΊΠ°Β», ΡΡΠΎΠ±Ρ Π²ΡΠ±ΡΠ°ΡΡ ΡΠ²Π΅Ρ Π½Π° ΠΌΠΎΠ½ΡΠ°ΠΆΠ½ΠΎΠΉ ΠΎΠ±Π»Π°ΡΡΠΈ.
Π±. Π§ΡΠΎΠ±Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ Π½Π΅ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΡΡΡ ΡΠ΅Π½ΠΈ: ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΠΏΠΎΠ»Π·ΡΠ½ΠΎΠΊ Π½Π΅ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΡΡΠΈ ΠΈΠ»ΠΈ Π²Π²Π΅Π΄ΠΈΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π½Π΅ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΡΡΠΈ Π² ΠΏΡΠΎΡΠ΅Π½ΡΠ°Ρ .
Π§ΡΠΎΠ±Ρ ΡΠΎΡ ΡΠ°Π½ΠΈΡΡ Π²ΡΠ±ΡΠ°Π½Π½ΡΠΉ ΡΠ²Π΅Ρ ΠΈ Π½Π΅ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΡΡΡ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΎΠ±ΡΠ°Π·ΡΠ° ΡΠ²Π΅ΡΠ°, ΡΠ΅Π»ΠΊΠ½ΠΈΡΠ΅ Π·Π½Π°ΡΠΎΠΊ + Π² Π½ΠΈΠΆΠ½Π΅ΠΉ ΡΠ°ΡΡΠΈ ΠΏΠ°Π»ΠΈΡΡΡ ΡΠ²Π΅ΡΠΎΠ². ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΠΏΠΎΡΡΠ΄ΠΎΠΊ ΠΎΠ±ΡΠ°Π·ΡΠΎΠ² Π² ΠΏΠ°Π»ΠΈΡΡΠ΅ ΡΠ²Π΅ΡΠΎΠ², ΠΏΠ΅ΡΠ΅ΡΠ°ΡΠΊΠΈΠ²Π°Ρ ΠΈΡ . Π§ΡΠΎΠ±Ρ ΡΠ΄Π°Π»ΠΈΡΡ ΠΎΠ±ΡΠ°Π·Π΅Ρ, ΠΏΠ΅ΡΠ΅ΡΠ°ΡΠΈΡΠ΅ Π΅Π³ΠΎ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Ρ ΠΏΠ°Π»ΠΈΡΡΡ ΡΠ²Π΅ΡΠΎΠ².
- Π£ΠΊΠ°ΠΆΠΈΡΠ΅ HSB, RGB ΠΈΠ»ΠΈ ΡΠ΅ΡΡΠ½Π°Π΄ΡΠ°ΡΠ΅ΡΠΈΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²Π΅ΡΠ°. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π»Π΅Π³ΠΊΠΎ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΡΡΡ ΠΌΠ΅ΠΆΠ΄Ρ ΡΡΠΈΠΌΠΈ ΡΠ²Π΅ΡΠΎΠ²ΡΠΌΠΈ ΡΠ΅ΠΆΠΈΠΌΠ°ΠΌΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΌΠ΅Π½Ρ.
Π£ΠΊΠ°ΠΆΠΈΡΠ΅ Π² ΠΈΠ½ΡΠΏΠ΅ΠΊΡΠΎΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ² ΡΠ»Π΅Π΄ΡΡΡΠ΅Π΅:
- X ΠΈ Y ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅: ΡΠΊΠ°ΠΆΠΈΡΠ΅ ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠ΅ ΠΎΡ Π³ΡΠ°Π½ΠΈΡΡ ΠΎΠ±ΡΠ΅ΠΊΡΠ° Π΄ΠΎ ΡΠΎΠ³ΠΎ ΠΌΠ΅ΡΡΠ°, Π³Π΄Π΅ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΡΠΌΠ΅ΡΡΠΈΡΡ ΡΠ΅Π½Ρ.
- B (Π Π°Π·ΠΌΡΡΠΈΠ΅): Π£ΠΊΠ°ΠΆΠΈΡΠ΅ ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠ΅ ΠΎΡ ΠΊΡΠ°Ρ ΡΠ΅Π½ΠΈ Π΄ΠΎ ΡΠΎΠ³ΠΎ ΠΌΠ΅ΡΡΠ°, Π³Π΄Π΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΏΡΠΎΠΈΠ·ΠΎΠΉΡΠΈ ΡΠ°Π·ΠΌΡΡΠΈΠ΅.
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π»Π΅Π³ΠΊΠΎ ΠΊΠΎΠΏΠΈΡΠΎΠ²Π°ΡΡ ΡΠ΅Π½ΠΈ, ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½Π½ΡΠ΅ ΠΊ ΠΎΠ±ΡΠ΅ΠΊΡΡ, Π½Π° Π΄ΡΡΠ³ΠΈΠ΅ ΠΎΠ±ΡΠ΅ΠΊΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Β«ΠΡΡΠ°Π²ΠΈΡΡ Π²Π½Π΅ΡΠ½ΠΈΠΉ Π²ΠΈΠ΄Β».
ΠΠ°ΠΆΠΌΠΈΡΠ΅ Ctrl+C Π½Π° ΠΎΠ±ΡΠ΅ΠΊΡΠ΅, ΠΊ ΠΊΠΎΡΠΎΡΠΎΠΌΡ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½Π° ΡΠ΅Π½Ρ, Π° Π·Π°ΡΠ΅ΠΌ Π½Π°ΠΆΠΌΠΈΡΠ΅ Ctrl+Alt+V (Π²ΡΡΠ°Π²ΠΈΡΡ Π²Π½Π΅ΡΠ½ΠΈΠΉ Π²ΠΈΠ΄) Π½Π° ΡΠ΅Π»Π΅Π²ΠΎΠΌ ΠΎΠ±ΡΠ΅ΠΊΡΠ΅.
Π― Π΄Π°Ρ ΡΠΎΠ³Π»Π°ΡΠΈΠ΅ Π½Π° ΠΏΠ΅ΡΠΈΠΎΠ΄ΠΈΡΠ΅ΡΠΊΠΎΠ΅ ΠΏΠΎΠ»ΡΡΠ΅Π½ΠΈΠ΅ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΎΠ½Π½ΡΡ Π±ΡΠ»Π»Π΅ΡΠ΅Π½Π΅ΠΉ ΠΎΡ SerialCoder.dev ΠΎ Π½ΠΎΠ²ΠΎΠΌ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ½ΠΎΠΌ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ΅ ΠΈ Π΄ΡΡΠ³ΠΈΡ ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΡΡ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»Π°Ρ ΠΈΠ»ΠΈ ΠΏΡΠ΅Π΄Π»ΠΎΠΆΠ΅Π½ΠΈΡΡ .
ΠΡ ΡΠ²Π°ΠΆΠ°Π΅ΠΌ Π²Π°ΡΡ ΠΊΠΎΠ½ΡΠΈΠ΄Π΅Π½ΡΠΈΠ°Π»ΡΠ½ΠΎΡΡΡ. ΠΡΠΏΠΈΡΠ°ΡΡΡΡ Π² Π»ΡΠ±ΠΎΠ΅ Π²ΡΠ΅ΠΌΡ.
Π‘ΠΎΠ·Π΄Π°Π½ΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ConvertKit
ΠΠ°ΡΡΠΈΡΠ΅ΡΡ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°ΡΡ ΠΎΠ±Π²ΠΎΠ΄ΠΊΡ, Π·Π°Π»ΠΈΠ²ΠΊΡ, ΡΠ΅Π½Ρ ΠΈ Π²Π½ΡΡΡΠ΅Π½Π½ΡΡ ΡΠ΅Π½Ρ, Π° ΡΠ°ΠΊΠΆΠ΅ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΡΡΡΠ΅ΠΊΡΡ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ Π΄Π»Ρ ΠΎΠ±ΡΠ΅ΠΊΡΠΎΠ² Π² Adobe XD.
ΠΠ°ΡΡΠΈΡΠ΅ΡΡ Π·Π°Π΄Π°Π²Π°ΡΡ ΠΎΠ±Π²ΠΎΠ΄ΠΊΡ, Π·Π°Π»ΠΈΠ²ΠΊΡ, ΡΠ΅Π½Ρ ΠΈ Π²Π½ΡΡΡΠ΅Π½Π½ΡΡ ΡΠ΅Π½Ρ, Π° ΡΠ°ΠΊΠΆΠ΅ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΡΡΡΠ΅ΠΊΡΡ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ Π΄Π»Ρ ΠΎΠ±ΡΠ΅ΠΊΡΠΎΠ² Π² Adobe XD.
ΠΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Π·Π°Π»ΠΈΠ²ΠΊΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΊ ΠΎΠ±ΡΠ΅ΠΊΡΠ°ΠΌ
Π‘Π½Π°ΡΠ°Π»Π° Π²ΠΊΠ»ΡΡΠΈΡΠ΅ Π·Π°Π»ΠΈΠ²ΠΊΡ, Π΅ΡΠ»ΠΈ ΠΎΠ½Π° Π΅ΡΠ΅ Π½Π΅ Π²ΠΊΠ»ΡΡΠ΅Π½Π° (ΠΊΠ°ΠΊ ΠΎΠΏΠΈΡΠ°Π½ΠΎ Π² ΡΠ°Π·Π΄Π΅Π»Π΅ ΠΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠ²Π΅ΡΠ° Π·Π°Π»ΠΈΠ²ΠΊΠΈ ΠΊ ΠΎΠ±ΡΠ΅ΠΊΡΡ). ΠΠ°ΡΠ΅ΠΌ ΠΏΠ΅ΡΠ΅ΡΠ°ΡΠΈΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π° ΠΎΠ±ΡΠ΅ΠΊΡ ΠΈΠ· ΡΠΎΠ³ΠΎ ΠΌΠ΅ΡΡΠ°, Π³Π΄Π΅ Π²Ρ Π΅Π³ΠΎ ΡΠΎΡ
ΡΠ°Π½ΠΈΠ»ΠΈ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Finder ΠΈΠ»ΠΈ ΠΏΡΠΎΠ²ΠΎΠ΄Π½ΠΈΠΊ Windows).
ΠΠ±ΡΠ΅Π·ΠΊΠ° ΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ Π·Π°Π»ΠΈΠ²ΠΎΠΊ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ
Π’Π΅ΠΏΠ΅ΡΡ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π΄Π²Π°ΠΆΠ΄Ρ ΡΠ΅Π»ΠΊΠ½ΡΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΏΠΎΠΌΠ΅ΡΠ΅Π½Π½ΡΠ΅ Π² ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΡ (ΠΠ±ΡΠ΅ΠΊΡ > ΠΠ°ΡΠΊΠ° Ρ ΡΠΎΡΠΌΠΎΠΉ), ΡΡΠΎΠ±Ρ ΠΎΠ±ΡΠ΅Π·Π°ΡΡ ΠΈ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ (ΠΏΡΠΈ ΠΏΠ΅ΡΠ΅ΡΠ°ΡΠΊΠΈΠ²Π°Π½ΠΈΠΈ Ρ ΡΠ°Π±ΠΎΡΠ΅Π³ΠΎ ΡΡΠΎΠ»Π°) Π²Π½ΡΡΡΠΈ Π·Π°Π»ΠΈΠ²ΠΎΠΊ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ. ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΠ΅ΠΆΠΈΠΌ ΠΎΠ±ΡΠ΅Π·ΠΊΠΈ Π² Π·Π°Π»ΠΈΠ²ΠΊΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π΄Π»Ρ:
ΠΡΠΎ ΡΠ»ΡΡΡΠ΅Π½ΠΈΠ΅ ΡΠ°ΠΊΠΆΠ΅ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΠΌΠΎ ΠΊ ΡΠ°ΠΉΠ»Π°ΠΌ, ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ ΠΈΠ· Photoshop ΠΈ Sketch. ΠΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΠ°ΠΉΠ»Ρ ΡΠΎΡ ΡΠ°Π½ΡΡΡ Π·Π°Π»ΠΈΠ²ΠΊΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈ ΠΊΠ°Π΄ΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅, Π²ΡΠΏΠΎΠ»Π½Π΅Π½Π½ΠΎΠ΅ Π² ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠΌ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ.
ΠΡΡΠ°Π²ΠΊΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈΠ· Π±ΡΡΠ΅ΡΠ° ΠΎΠ±ΠΌΠ΅Π½Π°
ΠΡ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΊΠΎΠΏΠΈΡΠΎΠ²Π°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π²Π½Π΅ Adobe XD Π² Π±ΡΡΠ΅Ρ ΠΎΠ±ΠΌΠ΅Π½Π° ΠΎΠΏΠ΅ΡΠ°ΡΠΈΠΎΠ½Π½ΠΎΠΉ ΡΠΈΡΡΠ΅ΠΌΡ, Π²ΡΠ±ΡΠ°ΡΡ ΡΠΈΠ³ΡΡΡ ΠΈ Π²ΡΡΠ°Π²ΠΈΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ Π·Π°Π»ΠΈΠ²ΠΊΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈΠ· Π±ΡΡΠ΅ΡΠ° ΠΎΠ±ΠΌΠ΅Π½Π° ΠΎΠΏΠ΅ΡΠ°ΡΠΈΠΎΠ½Π½ΠΎΠΉ ΡΠΈΡΡΠ΅ΠΌΡ. ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠ°ΠΊΠΆΠ΅ Π±ΡΠ΄ΡΡ Π·Π°ΠΏΠΎΠ»Π½ΡΡΡ ΡΠΈΠ³ΡΡΡ, Π΅ΡΠ»ΠΈ ΡΠΈΠ³ΡΡΠ° Π²ΡΠ±ΡΠ°Π½Π° ΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π²ΡΠ±ΠΈΡΠ°Π΅Ρ Β«Π€Π°ΠΉΠ»Β» > Β«ΠΠΌΠΏΠΎΡΡΒ».
Π‘ΠΎΠ·Π΄Π°Π²Π°ΠΉΡΠ΅ ΡΠ΅Π΄Π°ΠΊΡΠΈΡΡΠ΅ΠΌΡΠ΅ Π²Π΅ΠΊΡΠΎΡΠ½ΡΠ΅ ΡΠΈΠ³ΡΡΡ ΠΈΠ· Π»ΠΈΠ½ΠΈΠΉ, ΠΊΠΎΠ½ΡΡΡΠΎΠ², ΡΠΎΡΠΌ, ΡΠ΅ΠΊΡΡΠ°, ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΈ Π»ΠΎΠ³ΠΈΡΠ΅ΡΠΊΠΈΡ
Π³ΡΡΠΏΠΏ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Outline Stroke. ΠΠΎΡΠ»Π΅ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠΎΡΠΌΡ Π΅Π΅ ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ ΠΈΠ»ΠΈ ΠΏΡΡΠ΅ΠΌ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ Π΅Π΅ ΡΠ²ΠΎΠΉΡΡΠ² Π½Π° ΠΏΠ°Π½Π΅Π»ΠΈ ΡΠ²ΠΎΠΉΡΡΠ² .
ΠΡΠΏΠΎΠ»Π½ΠΈΡΠ΅ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ, ΡΡΠΎΠ±Ρ ΡΠΎΠ·Π΄Π°ΡΡ Π·Π½Π°ΡΠΎΠΊ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΠ±Π²ΠΎΠ΄ΠΊΠ° ΠΊΠΎΠ½ΡΡΡΠ° .
Π‘ ΠΏΠΎΠΌΠΎΡΡΡ ΡΡΠ½ΠΊΡΠΈΠΈ Outline Stroke Π² Adobe XD Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π»Π΅Π³ΠΊΠΎ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°ΡΡ ΠΊΠΎΠ½ΡΡΡΡ, Π³ΡΠ°Π½ΠΈΡΡ ΠΈ ΡΠΎΡΠΌΡ, ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΡΡ ΠΎΠ±ΡΠ΅ΠΊΡΡ ΠΈ ΡΠΊΡΠΏΠΎΡΡΠΈΡΡΡ ΠΈΡ Π² SVG Π΄Π»Ρ ΠΠ½ΡΠ΅ΡΠ½Π΅ΡΠ° Π±Π΅Π· ΠΊΠ°ΠΊΠΈΡ -Π»ΠΈΠ±ΠΎ ΡΡΠΈΠ»ΠΈΠΉ. ΠΠΎΡΠΌΠΎΡΡΠΈΡΠ΅ ΡΡΠΎ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²ΠΎ ΠΎΡ ΠΡΠ½ΠΈ ΠΠΎΠΌΠΎΠ½Ρ β Π³Π»Π°Π²Π½ΠΎΠ³ΠΎ ΠΌΠ΅Π½Π΅Π΄ΠΆΠ΅ΡΠ° ΠΏΠΎ ΠΏΡΠΎΠ΄ΡΠΊΡΠ°ΠΌ Adobe XD β ΡΡΠΎΠ±Ρ ΡΠ·Π½Π°ΡΡ, ΠΊΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Outline Stroke.
ΠΡΠ΅ΠΌΡ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°: 2 ΠΌΠΈΠ½ΡΡΡ 50 ΡΠ΅ΠΊΡΠ½Π΄.
ΠΠ½ΡΡΡΠ΅Π½Π½ΠΈΠ΅ ΡΠ΅Π½ΠΈ ΠΈ ΡΠ΅Π½ΠΈ Π΄Π΅Π»Π°ΡΡ ΠΎΠ±ΡΠ΅ΠΊΡΡ Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π±ΠΎΠ»Π΅Π΅ ΡΠ΅Π°Π»ΠΈΡΡΠΈΡΠ½ΡΠΌΠΈ Π·Π° ΡΡΠ΅Ρ ΠΈΠΌΠΈΡΠ°ΡΠΈΠΈ ΡΠ²Π΅ΡΠΎΠ²ΡΡ
ΡΡΡΠ΅ΠΊΡΠΎΠ².
ΠΠ½ΡΡΡΠ΅Π½Π½ΡΡ ΡΠ΅Π½Ρ
ΠΠ½ΡΡΡΠ΅Π½Π½ΠΈΠ΅ ΡΠ΅Π½ΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π»Ρ ΠΌΠΎΠ΄Π΅Π»ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΡΠ΅Ρ ΠΌΠ΅ΡΠ½ΠΎΠΉ Π³Π»ΡΠ±ΠΈΠ½Ρ Π² Π΄Π²ΡΡ ΠΌΠ΅ΡΠ½ΠΎΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΈ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠ΅ ΡΠ΅Π½ΠΈ ΠΌΠΎΠ³ΡΡ ΠΏΠΎΠΌΠΎΡΡ ΠΈΠΌΠΈΡΠΈΡΠΎΠ²Π°ΡΡ Π½Π°ΠΆΠ°ΡΠΎΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ.
ΠΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Π²Π½ΡΡΡΠ΅Π½Π½Π΅ΠΉ ΡΠ΅Π½ΠΈ ΠΊ ΠΎΠ±ΡΠ΅ΠΊΡΡΠ’Π΅Π½Ρ
Π’Π΅Π½ΠΈ, ΠΏΠΎΠΌΠΈΠΌΠΎ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΡΠ΅Ρ
ΠΌΠ΅ΡΠ½ΠΎΠ³ΠΎ ΡΡΡΠ΅ΠΊΡΠ° Π΄Π»Ρ ΠΎΠ±ΡΠ΅ΠΊΡΠΎΠ², ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠ³ΡΡ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΎΡΡΡΠ΅Π½ΠΈΠ΅ Π³ΡΠ°Π½ΠΈΡΡ Π±Π΅Π· ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΡ ΠΎΠ±Π²ΠΎΠ΄ΠΊΠΈ Π³ΡΠ°Π½ΠΈΡΡ.
ΠΡΠΏΠΎΠ»Π½ΠΈΡΠ΅ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ, ΡΡΠΎΠ±Ρ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ Π²Π½ΡΡΡΠ΅Π½Π½ΡΡ ΡΠ΅Π½Ρ ΠΈΠ»ΠΈ ΡΠ΅Π½Ρ ΠΊ ΠΎΠ±ΡΠ΅ΠΊΡΡ Π΄ΠΈΠ·Π°ΠΉΠ½Π°:
ΠΡΠΈ ΡΠΎΠ·Π΄Π°Π½ΠΈΠΈ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΡΠ΅Π½ΠΈ Π² Π½ΠΈΡ
ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΡΡΡΡΡ Π² CSS, ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π»Π΅Π³ΠΊΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ°ΠΌΠΈ.
ΠΡΠΈΠΌΠ΅ΡΡ
ΠΠ΅ΠΎΠΌΠΎΡΡΠΈΠ·ΠΌΡ
ΠΠΎΠ»Π»Π΅ΠΊΡΠΈΡ ΠΎΠ±ΡΠ΅ΠΊΡΠΎΠ² Ρ Π½Π°Π½Π΅ΡΠ΅Π½Π½ΡΠΌΠΈ ΡΠ΅Π½ΡΠΌΠΈ
ΠΠΎΠ³Π΄Π° Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π³Π»ΡΠ±ΠΈΠ½Ρ ΡΠ²ΠΎΠ΅ΠΌΡ Π΄ΠΈΠ·Π°ΠΉΠ½Ρ, ΡΡΠ½ΠΊΡΠΈΡ Β«ΠΠ½ΡΡΡΠ΅Π½Π½ΡΡ ΡΠ΅Π½ΡΒ» Π² Adobe XD ΠΌΠΎΠΆΠ΅Ρ ΡΡΠ°ΡΡ Π½Π°ΡΡΠΎΡΡΠΈΠΌ ΠΏΠ΅ΡΠ΅Π²ΠΎΡΠΎΡΠΎΠΌ Π² ΠΈΠ³ΡΠ΅. ΠΠΎΡΠΌΠΎΡΡΠΈΡΠ΅ ΡΡΠΎ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²ΠΎ ΠΎΡ ΠΡΠ½ΠΈ ΠΠΎΠΌΠΎΠ½Ρ β Π³Π»Π°Π²Π½ΠΎΠ³ΠΎ ΠΌΠ΅Π½Π΅Π΄ΠΆΠ΅ΡΠ° ΠΏΠΎ ΠΏΡΠΎΠ΄ΡΠΊΡΠ°ΠΌ Adobe XD β ΡΡΠΎΠ±Ρ ΡΠ·Π½Π°ΡΡ, ΠΊΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠ΅ ΡΠ΅Π½ΠΈ.
ΠΡΠ΅ΠΌΡ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°: 3 ΠΌΠΈΠ½ΡΡΡ.
ΠΡΠ±Π΅ΡΠΈΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠ»ΠΈ ΠΎΠ±ΡΠ΅ΠΊΡ (Π²ΠΊΠ»ΡΡΠ°Ρ ΡΠΈΠ³ΡΡΡ, ΡΠ΅ΠΊΡΡΠΎΠ²ΡΠ΅ ΡΠ»ΠΎΠΈ, Π³ΡΡΠΏΠΏΡ, ΠΌΠ°ΡΠΊΠΈ ΠΈΠ»ΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ) Π½Π° Ρ ΠΎΠ»ΡΡΠ΅ Π΄ΠΈΠ·Π°ΠΉΠ½Π°. Π Property Inspector Π²ΡΠ±Π΅ΡΠΈΡΠ΅ ΠΈ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΠ΅ Π½ΡΠΆΠ½ΡΠΉ ΡΠ΅ΠΆΠΈΠΌ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ. ΠΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΡΠ²Π΅Π΄Π΅Π½ΠΈΡ ΡΠΌ. Π² ΡΠ°Π·Π΄Π΅Π»Π΅ ΠΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΡΡΠ΅ΠΊΡΠΎΠ² Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ.
ΠΡΠ±Π΅ΡΠΈΡΠ΅ ΠΎΠ±ΡΠ΅ΠΊΡ.