ΠΠΎΠ»ΡΡΠ°Ρ ΠΏΠΎΠ΄Π±ΠΎΡΠΊΠ° ΡΡΠΎΠΊΠΎΠ² ΠΏΠΎ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ CSS-ΠΊΠ½ΠΎΠΏΠΎΠΊ / Habr
Π ΡΡΠΎΠΉ ΠΏΠΎΠ΄Π±ΠΎΡΠΊΠ΅ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½Ρ ΡΡΠΎΠΊΠΈ Ρ Π½Π°Π³Π»ΡΠ΄Π½ΡΠΌΠΈ ΠΏΡΠΈΠΌΠ΅ΡΠ°ΠΌΠΈ ΠΏΠΎ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ CSS-ΠΊΠ½ΠΎΠΏΠΎΠΊ Π½Π° Π»ΡΠ±ΠΎΠΉ Π²ΠΊΡΡ.Fancy 3D Button with CSS3 [ΠΠ΅ΠΌΠΎ | ΠΠΎΠ΄ΡΠΎΠ±Π½ΠΎΡΡΠΈ]
CSS3 Social Buttons [ΠΠ΅ΠΌΠΎ | ΠΠΎΠ΄ΡΠΎΠ±Π½ΠΎΡΡΠΈ]
Pretty CSS3 Buttons [ΠΠ΅ΠΌΠΎ | ΠΠΎΠ΄ΡΠΎΠ±Π½ΠΎΡΡΠΈ]
Download Me! CSS3 Download Button [ΠΠ΅ΠΌΠΎ | ΠΠΎΠ΄ΡΠΎΠ±Π½ΠΎΡΡΠΈ]
Add to Cart Button in CSS3 [ΠΠ΅ΠΌΠΎ | ΠΠΎΠ΄ΡΠΎΠ±Π½ΠΎΡΡΠΈ]
CSS3 Github Buttons [ΠΠ΅ΠΌΠΎ | ΠΠΎΠ΄ΡΠΎΠ±Π½ΠΎΡΡΠΈ]
CSS3 Animated Bubble Buttons [ΠΠ΅ΠΌΠΎ | ΠΠΎΠ΄ΡΠΎΠ±Π½ΠΎΡΡΠΈ]
A Set of Simple CSS3 Buttons [ΠΠ΅ΠΌΠΎ | ΠΠΎΠ΄ΡΠΎΠ±Π½ΠΎΡΡΠΈ]
CSS3 Buttons with Pseudo-Elements [ΠΠ΅ΠΌΠΎ | ΠΠΎΠ΄ΡΠΎΠ±Π½ΠΎΡΡΠΈ]
Pure CSS3 Social Media Icons [ΠΠ΅ΠΌΠΎ | ΠΠΎΠ΄ΡΠΎΠ±Π½ΠΎΡΡΠΈ]
Orman Clarkβs Chunky 3D CSS3 Buttons [ΠΠ΅ΠΌΠΎ | ΠΠΎΠ΄ΡΠΎΠ±Π½ΠΎΡΡΠΈ]
Create a Slick CSS3 Button [ΠΠ΅ΠΌΠΎ | ΠΠΎΠ΄ΡΠΎΠ±Π½ΠΎΡΡΠΈ]
Make Aristoβs Buttons in CSS3 [ΠΠ΅ΠΌΠΎ | ΠΠΎΠ΄ΡΠΎΠ±Π½ΠΎΡΡΠΈ]
Super Awesome Buttons in CSS3 [ΠΠ΅ΠΌΠΎ | ΠΠΎΠ΄ΡΠΎΠ±Π½ΠΎΡΡΠΈ]
CSS3 Gradient Buttons with Pattern [ΠΠ΅ΠΌΠΎ | ΠΠΎΠ΄ΡΠΎΠ±Π½ΠΎΡΡΠΈ]
CSS3 Buttons with Icons [ΠΠ΅ΠΌΠΎ | ΠΠΎΠ΄ΡΠΎΠ±Π½ΠΎΡΡΠΈ]
Animated CSS3 Buy Now Buttons [ΠΠ΅ΠΌΠΎ | ΠΠΎΠ΄ΡΠΎΠ±Π½ΠΎΡΡΠΈ]
CSS3 Gradient Buttons [ΠΠ΅ΠΌΠΎ | ΠΠΎΠ΄ΡΠΎΠ±Π½ΠΎΡΡΠΈ]
BonBon Sweet CSS3 Buttons [Demo | ΠΠΎΠ΄ΡΠΎΠ±Π½ΠΎΡΡΠΈ]
Create a Multicolour and Size CSS3 Button [ΠΠ΅ΠΌΠΎ | ΠΠΎΠ΄ΡΠΎΠ±Π½ΠΎΡΡΠΈ]
Multi-Line Buttons with CSS3 [ΠΠ΅ΠΌΠΎ | ΠΠΎΠ΄ΡΠΎΠ±Π½ΠΎΡΡΠΈ]
How to Make a Cool Pure CSS3 Button [ΠΠ΅ΠΌΠΎ | ΠΠΎΠ΄ΡΠΎΠ±Π½ΠΎΡΡΠΈ]
Create an Awesome Blue Pill with Icon Button in CSS3 [ΠΠ΅ΠΌΠΎ | ΠΠΎΠ΄ΡΠΎΠ±Π½ΠΎΡΡΠΈ]
Create a Circle Social Button in CSS3 [ΠΠ΅ΠΌΠΎ | ΠΠΎΠ΄ΡΠΎΠ±Π½ΠΎΡΡΠΈ]
Create an Awesome Animated CSS3 Download Button [ΠΠ΅ΠΌΠΎ | ΠΠΎΠ΄ΡΠΎΠ±Π½ΠΎΡΡΠΈ]
Make CSS3 Buttons like a Boss [ΠΠ΅ΠΌΠΎ | ΠΠΎΠ΄ΡΠΎΠ±Π½ΠΎΡΡΠΈ]
Create Some Awesome CSS3 Buttons [ΠΠ΅ΠΌΠΎ | ΠΠΎΠ΄ΡΠΎΠ±Π½ΠΎΡΡΠΈ]
How to Create Social Media Icons using CSS3 [ΠΠ΅ΠΌΠΎ | ΠΠΎΠ΄ΡΠΎΠ±Π½ΠΎΡΡΠΈ]
Slicker Buttons with CSS3 [ΠΠ΅ΠΌΠΎ | ΠΠΎΠ΄ΡΠΎΠ±Π½ΠΎΡΡΠΈ]
Build Kick-Ass Practical CSS3 Buttons [ΠΠ΅ΠΌΠΎ | ΠΠΎΠ΄ΡΠΎΠ±Π½ΠΎΡΡΠΈ]
How to Design a Sexy Button using CSS3 [ΠΠ΅ΠΌΠΎ | ΠΠΎΠ΄ΡΠΎΠ±Π½ΠΎΡΡΠΈ]
Creating CSS3 Buttons in Easy Way [ΠΠ΅ΠΌΠΎ | ΠΠΎΠ΄ΡΠΎΠ±Π½ΠΎΡΡΠΈ]
Create a CSS3 Circle Button [ΠΠ΅ΠΌΠΎ | ΠΠΎΠ΄ΡΠΎΠ±Π½ΠΎΡΡΠΈ]
Make CSS3 Buttons that are Extremely Fancy [ΠΠ΅ΠΌΠΎ | ΠΠΎΠ΄ΡΠΎΠ±Π½ΠΎΡΡΠΈ]
Fading Button Background Images with CSS3 [ΠΠ΅ΠΌΠΎ | ΠΠΎΠ΄ΡΠΎΠ±Π½ΠΎΡΡΠΈ]
CSS3 Buttons with Glass Edge [ΠΠ΅ΠΌΠΎ | ΠΠΎΠ΄ΡΠΎΠ±Π½ΠΎΡΡΠΈ]
CSS3 Push-Down Buttons [ΠΠ΅ΠΌΠΎ | ΠΠΎΠ΄ΡΠΎΠ±Π½ΠΎΡΡΠΈ]
Pure CSS3 Web Button [ΠΠ΅ΠΌΠΎ | ΠΠΎΠ΄ΡΠΎΠ±Π½ΠΎΡΡΠΈ]
ΠΠ±ΡΠ΅ΠΌΠ½Π°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° Π² ΡΠΎΡΠΎΡΠΎΠΏΠ΅, ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΠΉ ΡΡΠΎΠΊ
ΠΡΠ΅ΠΌ Π΄ΠΎΠ±ΡΠΎΠ³ΠΎ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ ΡΡΡΠΎΠΊ, ΡΠ°Π΄ Π²ΠΈΠ΄Π΅ΡΡ Π½Π° fotodizart.ru. Π‘Π΅Π³ΠΎΠ΄Π½Ρ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡΠΈΠΌ ΠΎ ΡΠ°ΠΊΠΎΠΉ Π²Π°ΠΆΠ½ΠΎΠΉ ΠΌΠ΅Π»ΠΎΡΠΈ ΠΊΠ°ΠΊ ΠΊΠ½ΠΎΠΏΠΊΠ°, Π° ΡΠΎΡΠ½Π΅Π΅ ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°Π΅ΡΡΡ ΠΊΠ½ΠΎΠΏΠΊΠ° Π² ΡΠΎΡΠΎΡΠΎΠΏΠ΅.
ΠΠ½ΠΎΠΏΠΊΠ° ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΡΠ°Π·Π½ΠΎΠ³ΠΎ Π½Π°Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΈ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΡ ΠΊ ΠΏΡΠΈΠΌΠ΅ΡΡ Π΄Π»Ρ ΡΠ°ΠΉΡΠ°, ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ½ΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ°. ΠΠ½ΠΎΠΏΠΊΠ° Π΄Π»Ρ ΡΠ°ΠΉΡΠ° ΠΈΠ»ΠΈ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ°, Π΅ΡΠ»ΠΈ ΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΡ Π²ΡΠ΅ΠΌ ΠΏΡΠ°Π²ΠΈΠ»Π°ΠΌ Π΄ΠΎΠ»ΠΆΠ½Π° ΠΈΠΌΠ΅ΡΡ 3 β 4 ΡΠΎΡΡΠΎΡΠ½ΠΈΡ. ΠΠΎΡΠ΅ΠΌΡ ΡΠΏΡΠΎΡΠΈΡΠ΅ ΡΡΠΈ ΠΈΠ»ΠΈ ΡΠ΅ΡΡΡΠ΅ ΡΡΠΎ Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡ ΡΠΎΠ³ΠΎ Π±ΡΠ΄ΡΡ Π»ΠΈ ΠΊΠ°ΠΊΠΈΠ΅-ΡΠΎ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΡΠΎΠ²ΠΏΠ°Π΄Π°ΡΡ, Π° ΡΠ°ΠΊΠΆΠ΅ ΠΈΠΌΠ΅Π΅ΡΡΡ Π»ΠΈ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΡΡΡ Π² ΡΠ΅ΡΠ²Π΅ΡΡΠΎΠΌ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅.
ΠΠ° ΡΠ΅Π³ΠΎΠ΄Π½ΡΡΠ½ΠΈΠΉ Π΄Π΅Π½Ρ Π½Π΅ Π²Π΅Π·Π΄Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ Π²ΡΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ, Π° Π²Π΅Π΄Ρ ΡΡΠΎ Π½Π΅ ΡΠΎΠ²ΡΠ΅ΠΌ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ. ΠΡΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ Π΄Π΅Π»Π°ΡΡΡΡ Π΄Π»Ρ ΡΠΎΠ³ΠΎ ΡΡΠΎΠ±Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π±ΡΠ»ΠΎ Π»Π΅Π³ΠΊΠΎ ΠΎΡΠΈΠ΅Π½ΡΠΈΡΠΎΠ²Π°ΡΡΡΡ Π² ΡΠ°Π±ΠΎΡΠ΅ Ρ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠΎΠΌ. ΠΠΎΠ²ΠΎΡΡ ΠΏΡΠΎΡΡΡΠΌ ΡΠ·ΡΠΊΠΎΠΌ, ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΏΡΠΈ ΠΊΠ°ΠΊΠΎΠΌ Π»ΠΈΠ±ΠΎ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ, ΡΡΠΎ ΠΏΡΠΎΠΈΡΡ
ΠΎΠ΄ΠΈΡ ΠΈ ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ Π½Π° ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠ΅Π΅ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅.
ΠΠ½ΠΎΠΏΠΊΠ° Π² ΡΠΎΡΠΎΡΠΎΠΏΠ΅ ΡΠ°Π·ΡΠ°Π±Π°ΡΡΠ²Π°Π΅ΡΡΡ Π½Π΅ ΡΠ»ΠΎΠΆΠ½ΠΎ,Β Π΄Π°Π²Π°ΠΉΡΠ΅ Π²ΡΠ΅ ΠΆΠ΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΠΌΡΡ, ΡΡΠΎ ΠΆΠ΅ ΡΠ°ΠΊΠΎΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠ°.
ΠΠ½ΠΎΠΏΠΊΠ° β ΡΡΠΎ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠ΅Π°Π³ΠΈΡΡΠ΅Ρ Π½Π° ΡΠΎ ΠΈΠ»ΠΈ ΠΈΠ½ΠΎΠ΅ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ.
ΠΠ°Π²Π°ΠΉΡΠ΅ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΡΡΠΈ ΡΠ΅ΡΡΡΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ:
- Π‘ΡΠ°ΡΠΈΡΠ½ΠΎΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ β ΡΡΠΎ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΠΏΡΠΈ ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π½Π΅ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ Π½ΠΈΠΊΠ°ΠΊΠΎΠ³ΠΎ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ Ρ Π½Π΅ΠΉ.
- ΠΠ°Π²Π΅Π΄Π΅Π½ΠΈΠ΅ β ΡΡΠΎ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΠΏΡΠΈ ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π½Π°Π²Π΅Π» Π½Π° Π½Π΅Π΅ ΠΊΡΡΡΠΎΡ ΠΌΡΡΠΈ.
- ΠΠ°ΠΆΠ°ΡΠΈΠ΅ β ΡΡΠΎ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΠΏΡΠΈ ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π½Π°ΠΆΠ°Π» Π½Π° Π½Π΅Π΅.
- ΠΠΊΡΠΈΠ²Π½Π°Ρ β ΡΡΠΎ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΏΡΠΈ ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΎΠ½Π° ΡΠ²Π»ΡΠ΅ΡΡΡ Π²ΡΠ΄Π΅Π»Π΅Π½Π½ΠΎΠΉ ΠΈ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π³Π΄Π΅ ΠΎΠ½ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ (ΠΎΠ±ΡΡΠ½ΠΎ ΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ ΡΠΎΠ³ΠΎ ΡΡΠΎΠ±Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΏΠΎΠ½ΠΈΠΌΠ°Π» ΡΠ²ΠΎΠ΅ ΠΌΠ΅ΡΡΠΎ Π½Π°Ρ ΠΎΠΆΠ΄Π΅Π½ΠΈΡ ΠΊ ΠΏΡΠΈΠΌΠ΅ΡΡ Π½Π° ΠΊΠ°ΠΊΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅ ΡΠ°ΠΉΡΠ° ΠΎΠ½ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ).
Π§ΡΠΎ ΡΠ°ΠΊΠΎΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΈ ΠΊΠ°ΠΊΠΈΠ΅ Ρ Π½Π΅Π΅ Π±ΡΠ²Π°ΡΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ ΠΌΡ ΡΠ°Π·ΠΎΠ±ΡΠ°Π»ΠΈΡΡ. ΠΡΠΈΡΡΡΠΏΠΈΠΌ ΠΊ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π² ΡΠΎΡΠΎΡΠΎΠΏΠ΅, Π° ΡΠΎΡΠ½Π΅Π΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΈ Π΅Π΅ ΡΠ΅ΡΡΡΠ΅Ρ ΡΠΎΡΡΠΎΡΠ½ΠΈΠΉ.
ΠΡΠΊΡΡΠ²Π°Π΅ΠΌ ΡΠΎΡΠΎΡΠΎΠΏ, ΡΠΎΠ·Π΄Π°Π΄ΠΈΠΌ Π½ΠΎΠ²ΡΠΉ Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ Ρ Π½ΡΠΆΠ½ΡΠΌΠΈ Π½Π°ΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΠΌΠΈ, ΡΠΎΠ½ ΠΆΠ΅Π»Π°ΡΠ΅Π»ΡΠ½ΠΎ Π·Π°Π»ΠΈΡΡ ΡΠ²Π΅ΡΠΎΠΌ Π½Π°ΡΠ΅Π³ΠΎ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ°, Π΄Π»Ρ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΠΌΡ Π΅Π΅ ΡΠΎΠ·Π΄Π°Π΅ΠΌ, ΡΡΠΎ Π΄Π΅Π»Π°Π΅ΡΡΡ Π΄Π»Ρ ΡΠΎΠ³ΠΎ ΡΡΠΎΠ±Ρ Π½Π°Π³Π»ΡΠ΄Π½ΠΎ Π²ΠΈΠ΄Π΅ΡΡ ΠΊΠ°ΠΊ ΠΎΠ½Π° Π±ΡΠ΄Π΅Ρ ΡΠΌΠΎΡΡΠ΅ΡΡΡΡ Π² ΡΠ°Π±ΠΎΡΠ΅. Π Π½Π°ΡΠΈΠ½Π°Π΅ΠΌ ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π² ΡΠΎΡΠΎΡΠΎΠΏΠ΅. ΠΠΎΠ·ΡΠΌΠ΅ΠΌ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½Ρ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊ ΡΠΎ ΡΠΊΡΡΠ³Π»Π΅Π½Π½ΡΠΌΠΈ ΠΊΡΠ°ΡΠΌΠΈ, ΠΈ ΡΠΎΠ·Π΄Π°Π΄ΠΈΠΌ ΡΠΎΡΠΌΡ Π½Π°ΡΠ΅ΠΉ Π±ΡΠ΄ΡΡΠ΅ΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ.
ΠΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ ΡΡΠΈΠ»Ρ ΡΠ»ΠΎΡ Π·Π°Π»ΡΠ΅ΠΌ ΡΠΎΡΠΌΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π»ΠΈΠ½Π΅ΠΉΠ½ΡΠΌ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠΎΠΌ Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ ΠΈΠ΄Π΅ΠΌ ΡΠ»ΠΎΠΈ > ΡΡΠΈΠ»Ρ ΡΠ»ΠΎΡ > Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠ° Π»ΠΈΠ±ΠΎ Π΄Π²Π°ΠΆΠ΄Ρ ΠΊΠ»ΠΈΠΊΠ½Π΅ΠΌ ΠΏΠΎ ΡΠ»ΠΎΡ Ρ ΡΠΎΡΠΌΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ.
Π‘ΠΎΠ·Π΄Π°Π΄ΠΈΠΌ ΠΎΠ±ΡΠ΅ΠΌ ΠΈ ΡΠ΅Π½Ρ Π΄Π»Ρ Π½Π°ΡΠ΅ΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΏΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ ΠΊΠΎΠΏΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π½Π°ΡΠ΅Π³ΠΎ ΡΠ»ΠΎΡ.Β ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ, ΠΏΠ΅ΡΠ΅ΡΠ°ΡΠΈΡΠ΅ Π½Π°Ρ ΡΠ»ΠΎΠΉ Ρ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ Π½Π° ΠΏΠΈΠΊΡΠΎΠ³ΡΠ°ΠΌΠΌΡ (ΠΈΠΊΠΎΠ½ΠΊΡ)
Π§ΡΠΎΠ±Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° Π±ΡΠ»Π° Π±ΠΎΠ»Π΅Π΅ ΠΎΠ±ΡΠ΅ΠΌΠ½Π°, ΡΠΎΠ·Π΄Π°Π΄ΠΈΠΌ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΡΠ²Π΅ΡΠ΅Π½ΠΈΡ ΠΈ ΠΊΠΎΠ½ΡΡΡ, ΡΠ΄Π΅Π»Π°Π΅ΠΌ ΠΌΡ ΡΡΠΎ ΡΠ΅ΡΠ΅Π· Π²Π½ΡΡΡΠ΅Π½Π½Π΅Π΅ ΡΠ²Π΅ΡΠ΅Π½ΠΈΠ΅ Π² ΡΡΠΈΠ»Π΅ ΡΠ»ΠΎΡ. ΠΠ°Π΄Π°Π΄ΠΈΠΌ ΡΠ²Π΅Ρ Π΄Π»Ρ ΡΠ²Π΅ΡΠ΅Π½ΠΈΡ.
Π’Π΅ΠΏΠ΅ΡΡ Π΄ΠΎΡΠ°Π±ΠΎΡΠ°Π΅ΠΌ ΡΠ»ΠΎΠΉ Ρ ΡΠ΅Π½ΡΡ. ΠΠ΄Π΅ΠΌ ΡΠ»ΠΎΠΉ > ΡΠ°ΡΡΡΠΈΡΠΎΠ²Π°ΡΡ. Π£ΠΌΠ΅Π½ΡΡΠ°Π΅ΠΌ Π½Π΅ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΡΡΡ Π΄ΠΎ 13% . ΠΠ°Π»Π΅Π΅ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΠΌ ΡΠΈΠ»ΡΡΡ ΡΠ°Π·ΠΌΡΡΠΈΠ΅ ΠΏΠΎ Π³Π°ΡΡΡΡ, Ρ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠ°ΠΌΠΈ ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½Π° ΡΠΊΡΠΈΠ½Π΅ Π½ΠΈΠΆΠ΅.
ΠΠ½ΠΎΠΏΠΊΠ° Π² ΡΠΎΡΠΎΡΠΎΠΏΠ΅ ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ Π³ΠΎΡΠΎΠ²Π°, ΠΎΡΡΠ°Π»ΠΎΡΡ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π½Π°Π΄ΠΏΠΈΡΡ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡ, ΠΏΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅ ΠΎ ΡΠ°Π±ΠΎΡΠ΅ Ρ ΡΠ΅ΠΊΡΡΠΎΠΌ ΡΠΈΡΠ°ΠΉΡΠ΅ Π² ΡΡΠ°ΡΡΠ΅ ΡΠ°Π±ΠΎΡΠ° Ρ ΡΠ΅ΠΊΡΡΠΎΠΌ photoshop. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ Π²ΠΎΠ·ΡΠΌΠ΅ΠΌ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½Ρ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΠΉ ΡΠ΅ΠΊΡΡ Π²ΡΠ±Π΅ΡΠ΅ΠΌ Π½ΡΠΆΠ½ΡΠΉ ΡΡΠΈΡΡ ΠΈ Π½Π°ΠΏΠΈΡΠ΅ΠΌ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΡΡ Π½Π°ΠΌ Π½Π°Π΄ΠΏΠΈΡΡ.
Π’Π΅ΠΏΠ΅ΡΡ ΡΠ΄Π΅Π»Π°Π΅ΠΌ ΡΠ΅ΠΊΡΡ Π²Π΄Π°Π²Π»Π΅Π½Π½ΡΠΌ, Π° ΡΠ°ΠΊΠΆΠ΅ ΡΠΎΠ·Π΄Π°Π΄ΠΈΠΌ Π±Π»ΠΈΠΊ ΠΈ ΠΊΠΎΠ½ΡΡΡ Π½Π° ΠΊΡΠ°ΡΡ Π½Π°Π΄ΠΏΠΈΡΠΈ, Π²ΡΠ΅ ΡΡΠΎ ΠΌΡ ΡΠ΄Π΅Π»Π°Π΅ΠΌ ΡΠ΅ΡΠ΅Π· ΡΡΠΈΠ»ΠΈ ΡΠ»ΠΎΡ.
ΠΠ½ΠΎΠΏΠΊΠ° Π² ΡΠΎΡΠΎΡΠΎΠΏΠ΅ Π½Π°ΡΠΈΡΠΎΠ²Π°Π½Π°. ΠΡΠΎΠ³ΠΎΠ²ΡΠΉ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ²ΠΈΠ΄Π΅ΡΡ Π²ΡΡΠ΅, ΡΠ΅ΠΏΠ΅ΡΡ ΡΠ΄Π΅Π»Π°Π΅ΠΌ ΠΎΡΡΠ°Π»ΡΠ½ΡΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ Π΄Π»Ρ Π½Π°ΡΠ΅ΠΉ ΠΊΠ½ΠΎΠΏΠΎΡΠΊΠΈ.
ΠΠ΅ΡΠ²ΡΠΌ Π΄Π΅Π»ΠΎΠΌ Π·Π°ΠΊΠ»ΡΡΠΈΠΌ ΡΠΎΠ·Π΄Π°Π½Π½ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ Π² Π³ΡΡΠΏΠΏΡ ΡΠ»ΠΎΠ΅Π² ΠΈ Π½Π°Π·ΠΎΠ²Π΅ΠΌ Π³ΡΡΠΏΠΏΡ ΡΡΠ°ΡΠΈΡΠ½ΠΎΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ Π·Π°ΠΆΠΌΠ΅ΠΌ ΠΊΠ½ΠΎΠΏΠΊΡ Shift ΠΈ Π²ΡΠ΄Π΅Π»ΠΈΠΌ Π²ΡΠ΅ ΡΠ»ΠΎΠΈ ΠΊΡΠΎΠΌΠ΅ ΡΠΎΠ½Π°, Π·Π°ΡΠ΅ΠΌ Π½Π°ΠΆΠΌΠ΅ΠΌ Ctrl+G ΠΈ ΠΏΠ΅ΡΠ΅ΠΈΠΌΠ΅Π½ΡΠ΅ΠΌ Π³ΡΡΠΏΠΏΡ. ΠΡΠΎΠ΄ΡΠ±Π»ΠΈΡΡΠ΅ΠΌ Π³ΡΡΠΏΠΏΡ Π΄Π»Ρ ΠΎΡΡΠ°Π»ΡΠ½ΡΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ, Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ ΠΈΠ΄Π΅ΠΌ ΡΠ»ΠΎΠΈ > Π΄ΡΠ±Π»ΠΈΠΊΠ°Ρ Π³ΡΡΠΏΠΏΡ ΠΈ Π΄Π°Π΅ΠΌ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ. Π Π°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΠΌ Π³ΡΡΠΏΠΏΡ Π½ΠΈΠΆΠ΅ ΠΏΠΎ ΠΏΠΎΡΡΠ΄ΠΊΡ, Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ Π²ΡΠ΄Π΅Π»ΠΈΠΌ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½Ρ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ (V) Π²ΡΠ΄Π΅Π»ΡΠ΅ΠΌ Π³ΡΡΠΏΠΏΡ ΠΈ Π½Π°ΠΆΠΈΠΌΠ°Π΅ΠΌ Π½Π° ΡΡΡΠ΅Π»ΠΊΡ Π²Π½ΠΈΠ· Π½Π° ΠΊΠ»Π°Π²ΠΈΠ°ΡΡΡΠ΅.
Π’Π΅ΠΏΠ΅ΡΡ ΠΈΠ·ΠΌΠ΅Π½ΠΈΠΌ ΠΊΠ°ΠΆΠ΄ΡΡ Π³ΡΡΠΏΠΏΡ ΠΏΠΎΠ΄ Π½ΡΠΆΠ½ΠΎΠ΅ Π½Π°ΠΌ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅. ΠΠ΅ΡΠ²ΠΎΠΉ Π±ΡΠ΄Π΅ΠΌ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡ Π³ΡΡΠΏΠΏΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠ΅. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ Π² Π³ΡΡΠΏΠΏΠ΅ ΡΠ»ΠΎΠ΅Π² Ρ ΠΈΠΌΠ΅Π½Π΅ΠΌ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠ΅ Π²ΡΠ΄Π΅Π»ΠΈΠΌ ΡΠ»ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΈ ΠΎΡΡΠ΅Π΄Π°ΠΊΡΠΈΡΡΠ΅ΠΌ ΡΡΠΈΠ»Ρ ΡΠ»ΠΎΡ. Π Π½Π΅ΠΌ ΠΌΡ ΠΎΡΡΠ΅Π΄Π°ΠΊΡΠΈΡΡΠ΅ΠΌ ΡΠΎΠ»ΡΠΊΠΎ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠ°, ΡΠ΄Π΅Π»Π°Π΅ΠΌ Π΅Π³ΠΎ ΡΠ²Π΅ΡΠ»Π΅Π΅.
ΠΠ°Π»Π΅Π΅ ΠΎΡΡΠ΅Π΄Π°ΠΊΡΠΈΡΡΠ΅ΠΌ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΏΡΠΈ Π½Π°ΠΆΠ°ΡΠΈΠ΅. Π£ ΡΡΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΎΡΡΠ΅Π΄Π°ΠΊΡΠΈΡΡΠ΅ΠΌ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠ° ΠΊΠ°ΠΊ ΠΈ Π² ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠ΅ΠΌ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅, ΡΠ°ΠΊΠΆΠ΅ Π½ΡΠΆΠ½ΠΎ ΠΏΠΎΡΡΠ°Π²ΠΈΡΡ Π³Π°Π»ΠΎΡΠΊΡ Π½Π° ΠΈΠ½Π²Π΅ΡΡΠΈΡ ΠΏΠ»ΡΡ ΡΠΌΠ΅Π½ΡΡΠΈΠΌ ΠΎΠ±ΡΠ΅ΠΌ Π·Π° ΡΡΠ΅Ρ ΡΠ΅Π³ΠΎ Ρ Π½Π°Ρ ΡΠΎΠ·Π΄Π°ΡΡΡΡ Π²ΠΏΠ΅ΡΠ°ΡΠ»Π΅Π½ΠΈΠ΅ ΡΡΠΎ ΠΏΡΠΈ Π½Π°ΠΆΠ°ΡΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠ° Π²Π΄Π°Π²Π»ΠΈΠ²Π°Π΅ΡΡΡ.Β Π§ΡΠΎΠ±Ρ ΡΠΌΠ΅Π½ΡΡΠΈΡΡ ΠΎΠ±ΡΠ΅ΠΌ Π½Π°ΠΌ ΠΏΡΠΈΠ΄Π΅ΡΡΡ Π²ΡΠ΄Π΅Π»ΠΈΡΡ ΡΠ»ΠΎΠΈ ΠΎΠ±ΡΠ΅ΠΌ ΠΈ ΡΠ΅Π½Ρ, ΡΠ°ΠΊ ΠΊΠ°ΠΊ Π½Π°ΡΠ° ΡΠ΅Π½Ρ ΡΠ°ΠΊΠΆΠ΅ ΡΡΠ°Π½Π΅Ρ ΠΌΠ΅Π½ΡΡΠ΅, ΠΈ ΠΏΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠ°
Π Π½Π°ΠΊΠΎΠ½Π΅Ρ, ΡΠ΄Π΅Π»Π°Π΅ΠΌ ΠΊΠ½ΠΎΠΏΠΊΡ Π² Π°ΠΊΡΠΈΠ²Π½ΠΎΠΌ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ²Π΅Ρ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠ° ΠΊΠ°ΠΊ Ρ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠ΅, Π° ΡΠ°ΠΊΠΆΠ΅ ΡΠ±ΡΠ°ΡΡ ΡΠ΅Π½Ρ ΠΈ ΠΎΠ±ΡΠ΅ΠΌ ΠΊΠ°ΠΊ Ρ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π½Π°ΠΆΠ°ΡΠΈΠ΅. ΠΠ°ΠΊ ΡΡΠΎ ΡΠ΄Π΅Π»Π°ΡΡ ΠΌΡ ΡΠΆΠ΅ Π·Π½Π°Π΅ΠΌ, ΡΠΊΠ°ΠΆΡ ΡΠΎΠ»ΡΠΊΠΎ, ΡΡΠΎ Π°ΠΊΡΠΈΠ²Π½ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠ΅ Π³ΡΠ°Π΄ΠΈΠ΅Π½Ρ Π½ΡΠΆΠ½ΠΎ Π·Π°Π΄Π°ΡΡ Π΄ΡΡΠ³ΠΎΠ³ΠΎ ΡΠ²Π΅ΡΠ°, ΡΡΠΎΠ±Ρ ΠΎΠ½Π° Π±ΡΠ»Π° Π·Π°ΠΌΠ΅ΡΠ½Π° Π½Π° ΡΠΎΠ½Π΅ ΠΎΡΡΠ°Π»ΡΠ½ΡΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ. ΠΠΎΠΆΠ½ΠΎ ΠΊΠΎΠ½Π΅ΡΠ½ΠΎ ΠΏΠΎΠΌΠ΅Π½ΡΡΡ Π΅ΡΠ΅ ΠΈ ΡΠ²Π΅Ρ Ρ Π½Π°ΡΠ΅ΠΉ Π½Π°Π΄ΠΏΠΈΡΠΈ, Π½ΠΎ Ρ ΡΡΠΎΠ³ΠΎ Π΄Π΅Π»Π°ΡΡ Π½Π΅ Π±ΡΠ΄Ρ.
ΠΠΎΡ ΠΈ Π²ΡΠ΅ Π½Π°ΡΠ° ΠΊΠ½ΠΎΠΏΠΊΠ° Π² ΡΠΎΡΠΎΡΠΎΠΏΠ΅ ΡΠΎΠ·Π΄Π°Π½Π°, Ρ Π΄ΡΠΌΠ°Ρ ΡΡΠΎΠΊ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΠΏΠΎΠ½ΡΡΠ½ΡΠΉ, Π΅ΡΠ»ΠΈ Β Ρ Π²Π°Ρ Π²ΠΎΠ·Π½ΠΈΠΊΠ½ΡΡ Π²ΠΎΠΏΡΠΎΡΡ ΠΏΠΈΡΠΈΡΠ΅ Π² ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΡΡ , ΠΏΠΎ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ ΠΏΠΎΡΡΠ°ΡΠ°ΡΡΡ ΠΎΡΠ²Π΅ΡΠΈΡΡ. ΠΠ΅ Π·Π°Π±ΡΠ΄ΡΡΠ΅ ΠΏΠΎΠ΄ΠΏΠΈΡΠ°ΡΡΡΡ Π½Π° ΡΠ°ΡΡΡΠ»ΠΊΡ, ΡΡΠΎΠ±Ρ ΡΠ·Π½Π°Π²Π°ΡΡ ΠΎ Π½ΠΎΠ²ΡΡ ΡΡΠ°ΡΡΡΡ ΠΏΠ΅ΡΠ²ΡΠΌΠΈ. Π Π΅ΡΠ΅ ΠΡ ΠΌΠΎΠΆΠΈΡΠ΅ ΠΏΠΎΡΠΈΡΠ°ΡΡ ΡΡΠΎΠΊ ΠΏΠΎ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΊΠ½ΠΎΠΏΠΊΠΈ ΡΠΎΡΠΈΠ°Π»ΡΠ½ΡΡ ΡΠ΅ΡΠ΅ΠΉ.
Π‘ΠΎΠ·Π΄Π°ΡΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ 3D Ρ ΡΡΡΠ΅ΠΊΡΠΎΠΌ Π½Π° ΡΠΈΡΡΠΎΠΌ CSS
ΠΡΠ΅ Π±ΠΎΠ»ΡΡΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π·Π°ΠΌΠ΅ΡΠΈΡΡ Π½Π° ΡΠ°ΠΉΡΠ°Ρ ΠΊΡΠ°ΡΠΈΠ²ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΡΡΠΎ Π²ΡΠΏΠΎΠ»Π½Π΅Π½Ρ Π² 3D, Π³Π΄Π΅ Π² ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅ ΡΠ°Π·Π±Π΅ΡΠ΅ΠΌΡΡ ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠ°ΠΊΠΎΠΉ ΡΠΎΡΠΌΠ°Ρ. Π’Π°ΠΊΠΆΠ΅ Π±ΡΠ΄Π΅Ρ ΠΈΠ΄ΡΠΈ ΡΡΡΠ΅ΠΊΡ ΠΊΠ»ΠΈΠΊΠ°, ΡΡΠΎ ΠΏΡΠΈ Π½Π°ΠΆΠ°ΡΠΈΠ΅ ΠΏΡΠ°Π²ΠΎΠΉ ΡΡΠΎΡΠΎΠ½Ρ ΠΌΡΡΠΈ, ΡΠ²ΠΈΠ΄ΠΈΡΠ΅ ΠΊΠ°ΠΊ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΡΡ ΠΎΠ΄ΠΈΡ Π²Π½ΠΈΠ· ΠΈ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΠΎΡΠ»Π΅ ΡΡΠΎΠ³ΠΎ Π½Π°ΡΠΈΠ½Π°Π΅ΡΡΡ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ ΠΈΠ»ΠΈ ΡΠ° ΡΡΠ½ΠΊΡΠΈΡ, ΡΡΠΎ ΠΏΠΎΠ΄ Π½Π΅Π΅ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Π°. ΠΠ½Π° ΠΌΠΎΠΆΠ΅Ρ ΠΈΠ΄ΡΠΈ ΠΏΠΎΠ΄ ΡΠ°Π·Π½ΡΠΌ ΠΎΡΡΠ΅Π½ΠΊΠΎΠΌ ΡΠ²Π΅ΡΠ°, ΡΡΠΎ Π½ΡΠΆΠ½ΠΎ Π² ΡΡΠΈΠ»ΠΈΡΡΠΈΠΊΠ΅ ΡΠ°ΠΌΠΎΠΌΡ Π²Π΅Π± ΠΌΠ°ΡΡΠ΅ΡΡ ΠΏΠ΅ΡΠ΅Π½Π°ΡΡΡΠΎΠΈΡΡ ΠΏΠΎΠ΄ ΡΠ²ΠΎΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΈΠ»ΠΈ ΠΊΠ°ΠΊ ΠΎΠ½ Π²ΠΈΠ΄ΠΈΡ Π½Π° ΡΠ²ΠΎΠ΅ΠΌ ΡΠ΅ΡΡΡΡΠ΅.ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΠΈΠ΄Π΅Ρ Π² ΡΠ²Π΅ΡΠ»ΠΎ ΠΆΠ΅Π»ΡΠΎΠΌ ΠΎΡΡΠ΅Π½ΠΊΠ΅, ΡΡΠΎ ΠΎΡΠ»ΠΈΡΠ½ΠΎΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠ΄ ΡΠ²Π΅ΡΠ»ΡΠΉ ΠΈ ΡΠ΅ΠΌΠ½ΡΠΉ ΠΏΠΎΡΡΠ°Π», ΡΠ°ΠΊ ΠΊΠ°ΠΊ Π½Π° ΡΡΠΎΠΉ Π³Π°ΠΌΠΌΠ΅ ΠΎΡΠ»ΠΈΡΠ½ΠΎ ΡΠΌΠΎΡΡΠΈΡΡΡ. Π₯ΠΎΡΡ ΠΏΠΎ ΠΌΠ΅Π½Π΅ Π±ΠΎΠ»ΡΡΠ΅ Π½ΡΠ°Π²ΠΈΡΡΡ ΠΏΠ»ΠΎΡΠΊΠΈΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½, Π½ΠΎ ΠΈΠ½ΠΎΠ³Π΄Π° ΡΠ°ΠΊΠΈΠ΅ ΠΌΠ΅Π»ΠΎΡΠΈ, ΠΊΠ°ΠΊ 3D-ΠΊΠ½ΠΎΠΏΠΊΠΈ CSS, ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ΠΈ ΡΠΎΡΠ΅ΡΠ°ΡΡΡΡ Ρ Π΄ΡΡΠ³ΠΈΠΌ ΠΏΠ»ΠΎΡΠΊΠΈΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ, Π²ΡΠ³Π»ΡΠ΄ΡΡ Π³ΠΎΡΠ°Π·Π΄ΠΎ ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°ΡΠ΅Π»ΡΠ½Π΅Π΅ Π΄Π»Ρ Π³Π»Π°Π·. ΠΠ΄Π΅Ρ ΡΠΎΡΡΠΎΠΈΡ Π² ΡΠΎΠΌ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠ΄ΡΠ΅ΡΠΊΠ½ΡΡΡ ΠΏΡΠΈΠ·ΡΠ² ΠΊ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ Ρ 3D-ΡΡΡΠ΅ΠΊΡΠΎΠΌ Π½Π° ΡΡΠΈΡ ΠΊΠ½ΠΎΠΏΠΊΠ°Ρ . Π ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ, ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠ°ΠΊΠΈΠ΅ 3D ΠΊΠ½ΠΎΠΏΠΊΠΈ ΡΠ°ΠΌΠΎΡΡΠΎΡΡΠ΅Π»ΡΠ½ΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS Π΄Π»Ρ ΡΠ°Π·Π½ΡΡ ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎΡΡΡ Π½Π° ΡΠ°ΠΉΡΠ΅.
Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ 3D-ΠΊΠ½ΠΎΠΏΠΊΠΈ CSS
ΠΠ΄Π΅ΡΡ HTML Π±ΡΠ΄Π΅Ρ ΠΈΠΌΠ΅Π΅Ρ ΡΡΡΠ»ΠΊΡ Π½Π° ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄, ΡΡΠΎ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΡΠ΅ΠΌ Π² 3D-ΠΊΠ½ΠΎΠΏΠΊΡ, ΡΡΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΠΌ ΠΊ Π½ΠΈΠΌ ΠΊΠ»Π°ΡΡ zornet_ru_3d, ΠΊΠΎΡΠΎΡΡΠΉ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΠΌ Π² CSS.
HTML
ΠΠΎΠ΄
<a href=»http://zornet.ru»>ZORNET.RU</a>
CSS
Π CSS ΡΠ°ΠΊΠΆΠ΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΠΌ ΡΠ²Π΅Ρ ΡΠΎΠ½Π° ΠΈ ΡΠ²Π΅Ρ Π³ΡΠ°Π½ΠΈΡΡ, ΡΡΠΎΠ±Ρ Π΄Π°ΡΡ ΡΠ΅Π°Π»ΡΠ½ΡΠΉ 3D-Π²ΠΈΠ΄, ΠΌΡ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΠΌ ΡΠ΅Π½Ρ ΠΎΠΊΠ½Π° Ρ ΡΠ²Π΅ΡΠΎΠΌ Π±ΠΎΠ»Π΅Π΅ ΡΠ΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΎΡΡΠ΅Π½ΠΊΠ°.
ΠΠΎΠ΄
.zornet_ru_3d {Β Β position: relative;
Β Β width: auto;
Β Β display: inline-block;
Β Β color: #f9fafb;
Β Β text-decoration: none;
Β Β border-radius: 5px;
Β Β border: solid 1px #dc911a;
Β Β background: #d67a29;
Β Β text-align: center;
Β Β padding: 17px 21px 14px;
Β Β margin: 15px;
Β Β -webkit-transition: all 0.1s;
Β Β -moz-transition: all 0.1s;
Β Β transition: all 0.1s;
Β Β -webkit-box-shadow: 0px 7px 0px #a94808;
Β Β -moz-box-shadow: 0px 6px 0px #d35400;
Β Β box-shadow: 0px 7px 0px #c15107;
}
.zornet_ru_3d:active{
Β Β -webkit-box-shadow: 0px 2px 0px #d35400;
Β Β -moz-box-shadow: 0px 2px 0px #d35400;
Β Β box-shadow: 0px 2px 0px #d35400;
Β Β position:relative;
Β Β top:4px;
}
Π ΡΠ»ΡΡΠ°Π΅ Π΅ΡΠ»ΠΈ Π²Ρ ΡΠΎΠ·Π΄Π°Π΅ΡΠ΅ 3D-ΠΊΠ½ΠΎΠΏΠΊΠΈ ΡΠ°Π·Π½ΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΠΈΠ»ΠΈ Ρ ΡΠ°Π·Π½ΠΎΠΉ Π²ΡΡΠΎΡΠΎΠΉ ΡΠ΅Π½ΠΈ, ΡΠΎ ΡΠ±Π΅Π΄ΠΈΡΠ΅ΡΡ, ΡΡΠΎ Π² Π°ΠΊΡΠΈΠ²Π½ΠΎΠΌ ΡΠΎΡΡΠΎΡΠ½ΠΈΠΈ ΡΠΎΡ ΡΠ°Π½ΡΡΡΡΡ Π·Π°Π΄Π°Π½Π½Π°Ρ Π²ΡΡΠΎΡΠ° ΡΠ΅Π½ΠΈ ΠΈ Π²Π΅ΡΡ Π½Π΅Π³ΠΎ Π°ΡΡΠΈΠ±ΡΡΠ°, ΡΠ°ΠΊΠΈΠ΅ ΠΆΠ΅ ΠΊΠ°ΠΊ Π²ΡΡΠΎΡΠ° ΡΠ΅Π½ΠΈ Π² Π·Π°Π΄Π°Π½Π½ΠΎΠΌ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ.
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ:
Π‘ΠΎΠ·Π΄Π°Π΅ΠΌ ΠΎΠ±ΡΠ΅ΠΌΠ½ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ Π΄Π»Ρ ΡΠ°ΠΉΡΠ° Π½Π° CSS3
Π ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅Π΅ Π²ΡΠ΅ΠΌΡ Π»ΡΠ΄ΠΈ ΠΏΡΠΎΡΡΠΎ ΠΏΠΎΠΌΠ΅ΡΠ°Π»ΠΈΡΡ Π½Π° 3d, Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π²ΡΡΡΠ΅ΡΠΈΡΡ Π²Π΅Π·Π΄Π΅: Π² ΠΊΠΈΠ½ΠΎ, ΠΏΠΎΡΡΠ΅ΡΠ°Ρ , Π²ΡΠ²Π΅ΡΠΊΠ°Ρ ΠΈ ΡΠ°ΠΊ Π΄Π°Π»Π΅Π΅. ΠΠΎ Π½Π΅ ΠΏΡΠΎΡΠ»Π° Π½ΠΎΠ²Π°Ρ ΡΠ΅Π½Π΄Π΅Π½ΡΠΈΡ ΠΈ ΠΌΠΈΠΌΠΎ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π°, ΡΠ΅ΠΉΡΠ°Ρ ΠΌΠ°Π»ΠΎ ΠΊΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΡΠ΅Ρ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΠΈΠ·ΠΌ, Π²ΡΠ΅ Ρ ΠΎΡΡΡ ΠΏΠ°ΡΠΎΡΠ°, ΠΎΠ±ΡΠ΅ΠΌΠ½ΠΎΡΡΠΈ ΠΈ ΡΡΠ°Π½ΡΡΠΎΡΠΌΠ°ΡΠΈΠΈ. ΠΠΎΠ½Π΅ΡΠ½ΠΎ Ρ ΠΏΠΎΠΊΠ»ΠΎΠ½Π½ΠΈΠΊ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΠΈΠ·ΠΌΠ°, Π½ΠΎ Π½Π΅ ΡΡΠΎΠΈΡ ΠΎΠ±Ρ ΠΎΠ΄ΠΈΡΡ ΡΡΠΎΡΠΎΠ½ΠΎΠΉ Π½ΠΎΠ²ΡΠ΅ ΡΠ΅Π½Π΄Π΅Π½ΡΠΈΠΈ. Π ΡΠ΅Π³ΠΎΠ΄Π½ΡΡΠ½Π΅ΠΌ ΡΡΠΎΠΊΠ΅ ΠΌΡ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠ°ΠΊΠΎΠΉ ΠΌΠ°Π»Π΅Π½ΡΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π΄Π»Ρ ΡΠ°ΠΉΡΠ°, Π° ΠΈΠΌΠ΅Π½Π½ΠΎ ΠΎΠ±ΡΠ΅ΠΌΠ½ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ Π΄Π»Ρ ΡΠ°ΠΉΡΠ° Ρ ΠΏΠΎΠΌΠΎΡΡΡ css. ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΏΠΎΡΠΌΠΎΡΡΠΈΠΌ, ΡΡΠΎ Ρ Π½Π°Ρ Ρ ΡΡΠΎΠ³ΠΎ ΠΏΠΎΠ»ΡΡΠΈΠ»ΠΎΡΡ..
ΠΠ½ΠΎΠΏΠΊΠ° Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΠΏΡΠΎΡΡΠ°Ρ ΠΈ ΠΏΡΠ°ΠΊΡΠΈΡΠ½Π°Ρ, ΠΎΠ½Π° ΡΠΎΠ·Π΄Π°Π΅Ρ ΡΡΡΠ΅ΠΊΡ ΠΎΠ±ΡΠ΅ΠΌΠ½ΠΎΡΡΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΡΠ°Π½ΡΡΠΎΡΠΌΠ°ΡΠΈΠΉ css. Π ΡΠ°ΠΊ, ΠΏΡΠΈΡΡΡΠΏΠΈΠΌ.
Π¨Π°Π³ 1. HTML
Π Π°Π·ΠΌΠ΅ΡΠΊΠ° Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΠΏΡΠΎΡΡΠ°, Π½Π°ΠΌ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΡΠΎΠ·Π΄Π°ΡΡ ΠΊΠ»Π°ΡΡ Ρ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠΎΠΌΒ βbuttonβ.
<a href=β#β class=βbuttonβ>ΠΠ°ΠΆΠΌΠΈ!</a> |
ΠΠ΄Π΅ΡΡ Π²ΡΠ΅ ΠΏΠΎΠ½ΡΡΠ½ΠΎ, ΠΏΠ΅ΡΠ΅ΠΉΠ΄Π΅ΠΌ ΠΊ ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌΡ ΡΠ°Π³Ρ.
Π¨Π°Π³ 2. CSS
ΠΡ Π½Π°ΡΠ½Π΅ΠΌ Ρ Π½Π΅ΠΊΠΎΡΠΎΡΡΡ ΠΎΡΠ½ΠΎΠ²Π½ΡΡ ΡΡΠΈΠ»Π΅ΠΉ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠ»ΡΡΠΈΡΡ ΠΎΡΠ½ΠΎΠ²Π½ΡΠ΅ ΡΠΎΡΠΌΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΈ ΡΠ²Π΅Ρ.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | body { font-family: Helvetica, Arial, sans-serif; background: #d6d6d6; text-align: center; padding: 50px 0px; } Β .button { display: inline-block; text-decoration: none; color: #fff; font-weight: bold; background-color: #538fbe; padding: 20px 70px; font-size: 24px; border: 1px solid #2d6898; } |
Π’Π΅ΠΏΠ΅ΡΡ Π΄Π°Π²Π°ΠΉΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ CSS3, ΡΡΠΎΠ±Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π½ΠΎΠ²ΡΡ ΡΡΠΈΠ»Π΅ΠΉ, Π½Π°ΡΠ½Π΅ΠΌ Ρ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠΎΠ².Β ΠΠ½ΠΈ Π±ΡΠ΄ΡΡ Π²ΠΊΠ»ΡΡΠ°ΡΡ ΡΡΠΈΠ»ΠΈ Π΄Π»Ρ Π²ΡΠ΅Ρ Π±ΡΠ°ΡΠ·Π΅ΡΡ, Ρ ΠΏΡΠ΅ΡΠΈΠΊΡΠ°ΠΌΠΈ.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | .button { display: inline-block; text-decoration: none; color: #fff; font-weight: bold; background-color: #538fbe; padding: 20px 70px; font-size: 24px; border: 1px solid #2d6898; background-image: linear-gradient(bottom, rgb(73,132,180) 0%, rgb(97,155,203) 100%); background-image: -o-linear-gradient(bottom, rgb(73,132,180) 0%, rgb(97,155,203) 100%); background-image: -moz-linear-gradient(bottom, rgb(73,132,180) 0%, rgb(97,155,203) 100%); background-image: -webkit-linear-gradient(bottom, rgb(73,132,180) 0%, rgb(97,155,203) 100%); background-image: -ms-linear-gradient(bottom, rgb(73,132,180) 0%, rgb(97,155,203) 100%); Β background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(73,132,180)), color-stop(1, rgb(97,155,203)) ); } |
ΠΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ²Π΅ΡΠΎΠ²ΡΡ Π³Π°ΠΌΠΌΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΠΌΡ ΡΠ°ΠΊΠΆΠ΅ Π±ΡΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΡ.
.button:hover { background-image: linear-gradient(bottom, rgb(79,142,191) 0%, rgb(102,166,214) 100%); background-image: -o-linear-gradient(bottom, rgb(79,142,191) 0%, rgb(102,166,214) 100%); background-image: -moz-linear-gradient(bottom, rgb(79,142,191) 0%, rgb(102,166,214) 100%); background-image: -webkit-linear-gradient(bottom, rgb(79,142,191) 0%, rgb(102,166,214) 100%); background-image: -ms-linear-gradient(bottom, rgb(79,142,191) 0%, rgb(102,166,214) 100%); Β background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(79,142,191)), color-stop(1, rgb(102,166,214)) ); } |
Π’Π΅ΠΏΠ΅ΡΡ ΠΌΡ Π΄ΠΎΠ»ΠΆΠ½Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΡΠ΅Π½Π΅ΠΉ, Π΄Π»Ρ ΡΠ΅Π°Π»ΠΈΠ·ΠΌΠ°.
text-shadow: 0px Β -1px 0px rgba(0,0,0,.5); |
ΠΠ°Π»Π΅Π΅ Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΠΌ 3D ΡΡΡΠ΅ΠΊΡ Π΄Π»Ρ ΡΠ΅Π½Π΅ΠΉ.
-webkit-box-shadow: 0px 6px 0px #2b638f; -moz-box-shadow: 0px 6px 0px #2b638f; box-shadow: 0px 6px 0px #2b638f; |
ΠΡ Π½Π΅ Π±ΡΠ΄Π΅ΠΌ Π΄Π°Π»Π΅Π΅ Π΄Π΅ΡΠ°Π»ΡΠ½ΠΎ ΠΎΠΏΠΈΡΡΠ²Π°ΡΡ Π²ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠ΅Π½Π΅ΠΉ, ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡ ΠΏΡΠΎΡΠΌΠΎΡΡΠ΅ΡΡ Π² ΠΈΡΡ ΠΎΠ΄Π½ΠΈΠΊΠ°Ρ . Π Π°ΡΡΠΌΠΎΡΡΠΈΠΌ ΡΡΠ°Π½ΡΡΠΎΡΠΌΠ°ΡΠΈΠΈ, ΠΌΡ Π±ΡΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΒ 3D-ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π½ΠΈΡ. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ Π½Π°ΠΌ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠ³ΠΎΠ» Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ Π½Π°ΠΊΠ»ΠΎΠ½Π°.
body { β¦ -webkit-perspective: 400; } |
Π£Π³ΠΎΠ» Π½Π°ΠΊΠ»ΠΎΠ½Π° ΠΊΠ½ΠΎΠΏΠΊΠΈ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΈΠΌΠ΅ΡΡΒ otateX (20deg), Π² ΠΈΡΠΎΠ³Π΅ ΠΌΡ ΠΏΠΎΠ»ΡΡΠ°Π΅ΠΌ.
.button { β¦ -webkit-transform: rotateX(20deg); } |
ΠΠ°Π½Π½ΡΠΉ ΠΏΡΠΈΠ΅ΠΌΒ ΡΠΊΡΠΏΠ΅ΡΠΈΠΌΠ΅Π½ΡΠ°Π»ΡΠ½ΡΠΉ, ΠΏΠΎ ΡΡΠΎΠΌΡ Π±ΡΠ΄Π΅Ρ ΡΠ°Π±ΠΎΡΠ°ΡΡ ΠΏΠΎΠ»Π½ΠΎΡΠ΅Π½Π½ΠΎ ΡΠΎΠ»ΡΠΊΠΎ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ Webkit! ΠΠΊΠΎΠ½ΡΠ°ΡΠ΅Π»ΡΠ½ΡΠΉ ΠΊΠΎΠ΄ Π΄Π»Ρ Π½Π°ΠΊΠ»ΠΎΠ½Π° ΠΊΠ½ΠΎΠΏΠΊΠΈ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ.
-webkit-transform: translate(0, 4px) rotateX(20deg); -moz-transform: translate(0, 4px); transform: translate(0, 4px); |
ΠΠΎΡ ΠΈ Π²ΡΠ΅. ΠΠΎΡΠΎΠ²ΠΎ!
ΠΠ°ΡΠ΅ΡΠΈΠ°Π» Π²Π·ΡΡ ΠΈΠ· Π·Π°ΡΡΠ±Π΅ΠΆΠ½ΠΎΠ³ΠΎ ΠΈΡΡΠΎΡΠ½ΠΈΠΊΠ°. Π ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ ΠΈΡΠΊΠ»ΡΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π² ΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΡΠ΅Π»ΡΠ½ΡΡ ΡΠ΅Π»ΡΡ .
Π§ΠΈΡΠ°ΠΉΡΠ΅ ΡΠ°ΠΊΠΆΠ΅:
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 30 | .button{color:#fff;padding: 8px 14px 10px;background-color:#bc1815; border:none;margin-right:25px;position:relative;webkit-user-select:none; -webkit-box-shadow:inset 0px -3px 1px rgba(0, 0, 0, 0.45), 0px 2px 2px rgba(0, 0, 0, 0.25); -moz-box-shadow:inset 0px -3px 1px rgba(0, 0, 0, 0.45), 0px 2px 2px rgba(0, 0, 0, 0.25); box-shadow:inset 0px -3px 1px rgba(0, 0, 0, 0.45), 0px 2px 2px rgba(0, 0, 0, 0.25); -webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px; -webkit-text-shadow:1px 1px 0px rgba(0, 0, 0, 0.5); -moz-text-shadow:1px 1px 0px rgba(0, 0, 0, 0.5); text-shadow:1px 1px 0px rgba(0, 0, 0, 0.5);} .button:active { position:relative;top:3px; -webkit-box-shadow: inset 0px -3px 1px rgba(255, 255, 255, 1), inset 0 0px 3px rgba(0, 0, 0, 0.9); -moz-box-shadow: inset 0px -3px 1px rgba(255, 255, 255, 1), inset 0 0px 3px rgba(0, 0, 0, 0.9); box-shadow: inset 0px -3px 1px rgba(255, 255, 255, 1), inset 0 0px 3px rgba(0, 0, 0, 0.9);} .button:active:after { content: ""; width: 100%; height: 3px; background: #fff; position: absolute; bottom: -1px; left: 0; } .button.blue { background: #22C3EB; } .button.green { background: #67b600; } .button.orange { background: #da8a00; } .button.yellow { background: #b3a400; } .button.turquoise { background: #00b1af; } .button:last-of-type { margin: 0; } .button.gradient {background-image: -webkit-gradient( linear,left bottom,left top,color-stop(0.1, rgba(0,0,0,0.3)),color-stop(1, rgba(255,255,255,0.2))); background-image: -moz-linear-gradient( center bottom,rgba(0,0,0,0.3) 1%,rgba(255,255,255,0.2) 100%); background-image: gradient(center bottom,rgba(0,0,0,0.3) 1%,rgba(255,255,255,0.2) 100%);} .button.gradient:hover { background-image: -webkit-gradient(linear,left bottom, left top,color-stop(0.1, rgba(0,0,0,0.45)),color-stop(1, rgba(255,255,255,0.3)));background-image: -moz-linear-gradient(center bottom, rgba(0,0,0,0.45) 1%,rgba(255,255,255,0.3) 100%);background-image: gradient(center bottom,rgba(0,0,0,0.45) 1%, rgba(255,255,255,0.3) 100%);} |
ΠΠΎΡΡΡΡΠ°ΡΡΠ°Ρ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½Π°Ρ 3D ΠΊΠ½ΠΎΠΏΠΊΠ° Π½Π° CSS3
Π‘Π΅Π³ΠΎΠ΄Π½Ρ Ρ Ρ ΠΎΡΡ ΠΏΠΎΠΊΠ°Π·Π°ΡΡ Π²Π°ΠΌ, ΠΊΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΠ· ΡΠ΄ΠΈΠ²ΠΈΡΠ΅Π»ΡΠ½ΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠ΅ΠΉ CSS3 Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΉ ΡΡΠ΅Ρ ΠΌΠ΅ΡΠ½ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ.
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ²ΠΈΠ΄Π΅ΡΡ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎΠ΅ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅ Chrome. Π ΡΠΎΠΆΠ°Π»Π΅Π½ΠΈΡ Firefox, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π½Π΅ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅Π΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ(3D ΠΈΡΠΊΠ°ΠΆΠ΅Π½ΠΈΠ΅).
ΠΡΠΈΠΌΠ΅Ρ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ²ΠΈΠ΄Π΅ΡΡ Π·Π΄Π΅ΡΡ:
ΠΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΠΏΡΠΈΠΌΠ΅ΡΠ‘ΠΊΠ°ΡΠ°ΡΡ
HTML ΡΠ°ΡΡΡ
Π ΠΊΠΎΠ΄Π΅ HTML Ρ Π½Π°Ρ Π±ΡΠ΄Π΅Ρ ΡΠΎΠ»ΡΠΊΠΎ ΡΡΡΠ»ΠΊΠ° ΠΈ Π½ΠΈΡΠ΅Π³ΠΎ Π±ΠΎΠ»Π΅Π΅, Π²ΡΡ ΠΎΡΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΌΡ Π΄ΠΎΠΏΠΈΡΠ΅ΠΌ Π² CSS:
1 | <a href="#">ΠΠ»ΠΈΠΊ</a> |
CSS ΡΠ°ΡΡΡ
ΠΠ»Ρ Π½Π°ΡΠ°Π»Π° Π·Π°Π΄Π°Π΄ΠΈΠΌ ΡΠΎΠ½ ΡΡΡΠ°Π½ΠΈΡΡ, ΡΡΠΎΠ±Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° Π½Π° Π½Π΅ΠΉ ΡΠΌΠΎΡΡΠ΅Π»Π°ΡΡ Π±ΠΎΠ»Π΅Π΅ ΠΈΠ·ΡΡΠ½ΠΎ. Π Π΄Π°Π΄ΠΈΠΌ ΠΎΡΠ½ΠΎΠ²Π½ΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° Π΄Π»Ρ ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΡΡΠΎΠ±Ρ ΠΎΠ½Π° ΠΏΡΠΈΠ½ΡΠ»Π° ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΡ ΡΠΎΡΠΌΡ ΠΈ ΡΠ²Π΅Ρ.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | body { font-family: Helvetica, Arial, sans-serif; background: #d6d6d6; text-align: center; padding: 50px 0px; } Β .button { display: inline-block; text-decoration: none; color: #fff; font-weight: bold; background-color: #538fbe; padding: 20px 70px; font-size: 24px; border: 1px solid #2d6898; } |
ΠΠ΄Π΅ΡΡ Π½Π΅Ρ ΠΏΠΎΠΊΠ° ΡΡΠΎ Π½ΠΈΡΠ΅Π³ΠΎ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΠ³ΠΎ. ΠΡΠΎΡΡΠΎ ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΈ ΠΎΡΠ½ΠΎΠ²Π½ΡΠ΅ ΡΡΠΈΠ»ΠΈ. Π Π²ΠΎΡ Π΄Π°Π»ΡΡΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ Π³ΡΠ°Π΄ΠΈΠ΅Π½Ρβ¦
CSS3 Π³ΡΠ°Π΄ΠΈΠ΅Π½Ρ
ΠΠ»Ρ ΡΠΎΠ³ΠΎ ΡΡΠΎΠ±Ρ Π³ΡΠ°Π΄ΠΈΠ΅Π½Ρ ΠΌΡ Ρ Π½Π΅ Π±ΡΠ΄Ρ ΠΏΠΈΡΠ°ΡΡ Ρ Π½ΡΠ»Ρ, Π° Π»ΠΈΡΡ ΡΠ³Π΅Π½Π΅ΡΠΈΡΡΡ ΡΠ΅ΡΠ΅Π· Gradient Generator ΡΡΠΎΠ±Ρ ΡΠΎΠΊΡΠ°ΡΠΈΡΡ Π²ΡΠ΅ΠΌΡ. ΠΡ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΠΎΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ ΡΠ°ΠΊΠΈΠΌ ΠΆΠ΅ ΡΠ΅ΡΠ²ΠΈΡΠΎΠΌ(ΠΏΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅ ΠΊΠ°ΠΊΠΈΠ΅ ΡΠ΅ΡΠ²ΠΈΡΡ Π±ΡΠ²Π°ΡΡ Π²Ρ Π½Π°ΠΉΠ΄Π΅ΡΠ΅ Π² ΠΌΠΎΠ΅ΠΉ ΡΡΠ°ΡΡΠ΅ Π·Π΄Π΅ΡΡ).
ΠΠ°ΡΠ΅ΠΌ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΡΠΈΡ ΡΠ²Π΅ΡΠΎΠ² Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠ°: #609bcb(
) ΠΈ #4a85b5(). ΠΠΎΠ»ΡΡΠ°Ρ ΠΎΡΠΈΠ±ΠΊΠ° Π½Π°ΡΠΈΠ½Π°ΡΡΠΈΡ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ΡΠΎΠ² Π΄Π΅Π»Π°ΡΡ Π³ΡΠ°Π΄ΠΈΠ΅Π½Ρ ΠΎΡΠ΅Π½Ρ ΡΠ΅Π·ΠΊΠΈΠΌ. ΠΡ ΠΆΠ΅ ΠΏΡΠΎΡΡΠΎ Ρ ΠΎΡΠΈΠΌ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π»Π΅Π³ΠΊΠΈΠΉ ΡΡΡΠ΅ΠΊΡ ΠΎΠ±ΡΠ΅ΠΌΠ°.1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | .button { display: inline-block; text-decoration: none; color: #fff; font-weight: bold; background-color: #538fbe; padding: 20px 70px; font-size: 24px; border: 1px solid #2d6898; background-image: linear-gradient(bottom, rgb(73,132,180) 0%, rgb(97,155,203) 100%); background-image: -o-linear-gradient(bottom, rgb(73,132,180) 0%, rgb(97,155,203) 100%); background-image: -moz-linear-gradient(bottom, rgb(73,132,180) 0%, rgb(97,155,203) 100%); background-image: -webkit-linear-gradient(bottom, rgb(73,132,180) 0%, rgb(97,155,203) 100%); background-image: -ms-linear-gradient(bottom, rgb(73,132,180) 0%, rgb(97,155,203) 100%); Β background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(73,132,180)), color-stop(1, rgb(97,155,203)) ); } |
ΠΠ°ΡΠ΅ΠΌ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΡΠΈΠ»Ρ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡ. Π‘Π΄Π΅Π»Π°Π΅ΠΌ ΠΊΠ½ΠΎΠΏΠΊΡ Π±ΠΎΠ»Π΅Π΅ ΡΠ²Π΅ΡΠ»ΠΎΠΉ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ Π΅ΡΠ΅ ΡΠ°Π· Π³ΡΠ°Π΄ΠΈΠ΅Π½Ρ:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | .button:hover { background-image: linear-gradient(bottom, rgb(79,142,191) 0%, rgb(102,166,214) 100%); background-image: -o-linear-gradient(bottom, rgb(79,142,191) 0%, rgb(102,166,214) 100%); background-image: -moz-linear-gradient(bottom, rgb(79,142,191) 0%, rgb(102,166,214) 100%); background-image: -webkit-linear-gradient(bottom, rgb(79,142,191) 0%, rgb(102,166,214) 100%); background-image: -ms-linear-gradient(bottom, rgb(79,142,191) 0%, rgb(102,166,214) 100%); Β background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(79,142,191)), color-stop(1, rgb(102,166,214)) ); } |
ΠΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΈ Π²ΡΡΠ΅ Π²ΠΈΠ΄Π½ΠΎ Π»Π΅Π³ΠΊΠΈΠΉ Π³ΡΠ°Π΄ΠΈΠ΅Π½Ρ ΠΈ ΡΡΡΠ΅ΠΊΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡ.
ΠΡΡΡΡΠ΅ ΠΊΡΠ°Ρ Π²ΡΠ³Π»ΡΠ΄ΡΡ Π½Π΅ ΠΎΡΠ΅Π½Ρ ΠΊΡΠ°ΡΠΈΠ²ΠΎ. ΠΠ°Π²Π°ΠΉΡΠ΅ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Π·Π°ΠΊΡΡΠ³Π»ΠΈΠΌ ΠΈΡ :
1 2 3 | -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; |
ΠΡΠΈ ΡΡΠΈ ΡΡΡΠΎΠΊΠΈ Π΄Π΅Π»Π°ΡΡ Π·Π°ΠΊΡΡΠ³Π»Π΅Π½ΠΈΠ΅ Π² 5 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ(px) Π² ΡΠ°Π·Π½ΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ (ΠΏΡΠΈ ΡΡΠΎΠΌ ΠΈ ΡΡΠ°ΡΡΡ ΡΠ°ΠΊΠΆΠ΅). ΠΠ΅ Π΄Π΅Π»Π°ΠΉΡΠ΅ ΡΠ°Π΄ΠΈΡΡ ΡΠ»ΠΈΡΠΊΠΎΠΌ Π±ΠΎΠ»ΡΡΠΈΠΌ, ΠΏΠΎΡΠΎΠΌΡ ΠΊΠ½ΠΎΠΏΠΊΠ° Π±ΡΠ΄Π΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΡΡΡΠ°Π½Π½ΠΎ.
ΠΠΎΡ ΠΊΠ°ΠΊ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ Π½Π°ΡΠ° ΠΊΠ½ΠΎΠΏΠΊΠ° Π½Π° Π΄Π°Π½Π½ΡΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ.
ΠΠΎΠ±Π°Π²ΠΈΠΌ ΡΠ΅Π½ΠΈ
Π‘Π΅ΠΉΡΠ°Ρ, ΡΡΠΎΠ±Ρ ΡΠ΅ΠΊΡΡ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ°ΡΡΡΡ ΡΡΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΠΏΡΠΈΠΌΠ΅Π½ΠΈΠΌ Π΄Π»Ρ ΡΠ΅ΠΊΡΡΠ° ΡΠ΅Π½Ρ:
1 | text-shadow: 0px -1px 0px rgba(0,0,0,.5); |
ΠΠ°Π»Π΅Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ ΡΠ΅Π½Ρ Π½Π°ΡΠ΅ΠΉ ΠΊΠ½ΠΎΠΏΠΊΠ΅:
1 2 3 | -webkit-box-shadow: 0px 6px 0px #2b638f; -moz-box-shadow: 0px 6px 0px #2b638f; box-shadow: 0px 6px 0px #2b638f; |
Π Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΡΡΠΎΠ²Π΅ΡΡΠ΅Π½ΡΡΠ²ΡΠ΅ΠΌ Π½Π°Ρ ΠΊΠΎΠ΄, Π΄ΠΎΠ±Π°Π²ΠΈΠ² ΡΠ΅Π½ΠΈ Π² ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠ΅ ΠΌΠ΅ΡΡΠ°, Π΄Π»Ρ ΡΠΎΠ³ΠΎ ΡΡΠΎΠ±Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° ΡΡΠ°Π»Π° ΠΎΠ±ΡΠ΅ΠΌΠ½ΠΎΠΉ:
1 2 3 | -webkit-box-shadow: 0px 6px 0px #2b638f, 0px 3px 15px rgba(0,0,0,.4); -moz-box-shadow: 0px 6px 0px #2b638f, 0px 3px 15px rgba(0,0,0,.4); box-shadow: 0px 6px 0px #2b638f, 0px 3px 15px rgba(0,0,0,.4); |
Π‘Π΅ΠΉΡΠ°Ρ Ρ Π½Π°ΡΠ΅ΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΏΡΠΈΡΡΡΡΡΠ²ΡΠ΅Ρ ΡΡΡΠ΅ΠΊΡ ΠΎΠ±ΡΠ΅ΠΌΠ°. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ±Π΅Π΄ΠΈΡΡΡΡ Π² ΡΡΠΎΠΌ Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΈ Π½ΠΈΠΆΠ΅:
ΠΡΠ΅ Π±ΠΎΠ»ΡΡΠ΅ ΡΠ΅Π½Π΅ΠΉ
ΠΠΎΠ±Π°Π²ΠΈΠΌ Π΅ΡΠ΅ ΡΠ΅Π½Π΅ΠΉ Π΄Π»Ρ Π±ΠΎΠ»Π΅Π΅ ΡΠ΅Π°Π»ΠΈΡΡΠΈΡΠ½ΠΎΠ³ΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ:
1 2 3 | -webkit-box-shadow: 0px 6px 0px #2b638f, 0px 3px 15px rgba(0,0,0,.4), inset 0px 1px 0px rgba(255,255,255,.3), inset 0px 0px 3px rgba(255,255,255,.5); -moz-box-shadow: 0px 6px 0px #2b638f, 0px 3px 15px rgba(0,0,0,.4), inset 0px 1px 0px rgba(255,255,255,.3), inset 0px 0px 3px rgba(255,255,255,.5); box-shadow: 0px 6px 0px #2b638f, 0px 3px 15px rgba(0,0,0,.4), inset 0px 1px 0px rgba(255,255,255,.3), inset 0px 0px 3px rgba(255,255,255,.5); |
Π ΠΈΡΠΎΠ³Π΅ ΠΏΠΎΠ»ΡΡΠΈΠ»ΠΈ:
ΠΠ½ΠΈΠΌΠ°ΡΠΈΡ ΠΏΡΠΈ ΠΊΠ»ΠΈΠΊΠ΅
Π‘Π΅ΠΉΡΠ°Ρ ΠΏΡΠΈ Π½Π°ΠΆΠ°ΡΠΈΠΈ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡ Π½ΠΈΡΠ΅Π³ΠΎ Π½Π΅ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ. ΠΠΎΡΡΠΎΠΌΡ Π΅ΠΉ Π½ΡΠΆΠ½ΠΎ Π½Π°ΠΏΠΈΡΠ°ΡΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π°, ΡΡΠΎΠ±Ρ ΠΏΡΠΈ Π½Π°ΠΆΠ°ΡΠΈΠΈ ΡΠΎΠ·Π΄Π°Π²Π°Π»ΡΡ ΡΡΡΠ΅ΠΊΡ ΠΎΠ±ΡΠ΅ΠΌΠ°:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | .button:active { background-image: linear-gradient(bottom, rgb(88,154,204) 0%, rgb(90,150,199) 100%); background-image: -o-linear-gradient(bottom, rgb(88,154,204) 0%, rgb(90,150,199) 100%); background-image: -moz-linear-gradient(bottom, rgb(88,154,204) 0%, rgb(90,150,199) 100%); background-image: -webkit-linear-gradient(bottom, rgb(88,154,204) 0%, rgb(90,150,199) 100%); background-image: -ms-linear-gradient(bottom, rgb(88,154,204) 0%, rgb(90,150,199) 100%); Β background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(88,154,204)), color-stop(1, rgb(90,150,199)) ); } |
ΠΠΎΠ±Π°Π²ΠΈΠΌ ΡΠ΅Π½ΠΈ, Π΄Π»Ρ Π±ΠΎΠ»ΡΡΠ΅ΠΉ ΡΠ΅Π°Π»ΠΈΡΡΠΈΡΠ½ΠΎΡΡΠΈ:
1 2 3 | -webkit-box-shadow: 0px 2px 0px #2b638f, 0px 1px 6px rgba(0,0,0,.4), inset 0px 1px 0px rgba(255,255,255,.3), inset 0px 0px 3px rgba(255,255,255,.5); -moz-box-shadow: 0px 2px 0px #2b638f, 0px 1px 6px rgba(0,0,0,.4), inset 0px 1px 0px rgba(255,255,255,.3), inset 0px 0px 3px rgba(255,255,255,.5); box-shadow: 0px 2px 0px #2b638f, 0px 1px 6px rgba(0,0,0,.4), inset 0px 1px 0px rgba(255,255,255,.3), inset 0px 0px 3px rgba(255,255,255,.5); |
ΠΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΠΎΡΠΌΡ ΠΏΡΠΈ Π½Π°ΠΆΠ°ΡΠΈΠΈ
ΠΡΠΈ Π½Π°ΠΆΠ°ΡΠΈΠΈ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡ, ΡΡΠΎΠ±Ρ ΡΠΎΡ ΡΠ°Π½ΠΈΡΡ ΡΡΡΠ΅ΠΊΡ ΠΎΠ±ΡΠ΅ΠΌΠ°, Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΡΠΌΠ΅Π½ΡΡΠΈΡΡ ΡΠ΅Π½Ρ:
1 2 3 | -webkit-transform: translate(0, 4px); -moz-transform: translate(0, 4px); transform: translate(0, 4px); |
ΠΠΎΠ±Π°Π²Π»ΡΠ΅ΠΌ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΠΏΡΠΈ Π½Π°ΠΆΠ°ΡΠΈΠΈ
Π‘Π΅ΠΉΡΠ°Ρ ΠΏΠΎΡΠ»Π΅ Π½Π°ΠΆΠ°ΡΠΈΡ, ΠΊΠ½ΠΎΠΏΠΊΠ° Π²ΠΎΠ·Π²ΡΠ°ΡΠ°Π΅ΡΡΡ Π² ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΎΡΠ΅Π½Ρ Π±ΡΡΡΡΠΎ. ΠΠ°ΠΌΠ΅Π΄Π»ΠΈΠΌ ΡΡΠΎ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅, Π΄Π»Ρ ΡΠΎΠ³ΠΎ ΡΡΠΎΠ±Ρ ΡΠ΄Π΅Π»Π°ΡΡ Π±ΠΎΠ»Π΅Π΅ ΠΊΡΠ°ΡΠΈΠ²ΡΠΉ ΡΡΡΠ΅ΠΊΡ:
1 2 3 | -webkit-transition: all .1s ease-in-out; -moz-transition: all .2s ease-in-out; transition: all .2s ease-in-out; |
Π‘Π΅ΠΉΡΠ°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΏΡΠΈΡ ΠΎΠ΄ΠΈΡ Π² ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ ΠΊΠ°ΠΊ ΠΌΡ ΠΈ Ρ ΠΎΡΠ΅Π»ΠΈ.
ΠΠ΅ΠΌΠ½ΠΎΠ³ΠΎ 3D
ΠΡ ΠΌΠΎΠΆΠ΅ΠΌ ΡΠ΄Π΅Π»Π°ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ Π΅ΡΠ΅ Π±ΠΎΠ»Π΅Π΅ Π½Π΅ΠΎΠ±ΡΡΠ½ΠΎΠΉ, Π΄ΠΎΠ±Π°Π²ΠΈΠ² Π΅ΠΉ ΡΠ²ΠΎΠΉΡΡΠ²Π° 3D ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π½ΠΈΡ:
1 2 3 4 | body { β¦ -webkit-perspective: 400; } |
ΠΠ°Π»Ρ ΡΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ Π½Π΅ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π²ΠΎ Π²ΡΠ΅Ρ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ ΠΊΠ°ΠΊ Π½Π°Π΄ΠΎ.
Π ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅Π΅ ΡΡΠΎ ΠΌΡ ΡΠ΄Π΅Π»Π°Π΅ΠΌ, ΡΡΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ ΡΡΡΠ΅ΠΊΡ Π΄Π»Ρ ΠΊΠ½ΠΎΠΏΠΊΠΈ:
1 2 3 4 | .button { β¦ -webkit-transform: rotateX(20deg); } |
Π‘Π΅ΠΉΡΠ°Ρ ΡΠΎΠ·Π΄Π°Π΅ΡΡΡ Π²ΠΏΠ΅ΡΠ°ΡΠ»Π΅Π½ΠΈΠ΅ ΡΡΠΎ ΠΊΠ½ΠΎΠΏΠΊΠ° Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π² ΡΡΠ΅Ρ ΠΌΠ΅ΡΠ½ΠΎΠΌ ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΠΈ(ΡΠ΅ΡΡΠΈΡΡΠΉΡΠ΅ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅ Chrome):
ΠΡΠ²ΠΎΠ΄Ρ
Π ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ Π΄Π°Π½Π½ΠΎΠΉ ΡΡΠ°ΡΡΠΈ ΠΌΡ ΡΠΎΠ·Π΄Π°Π»ΠΈ ΠΎΡΠ΅Π½Ρ ΠΊΡΠ°ΡΠΈΠ²ΡΡ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΡ 3D ΠΊΠ½ΠΎΠΏΠΊΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠΈΡΡΠΎΠ³ΠΎ CSS3 Π±Π΅Π· ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΡ Javascript. ΠΠ΅Π·ΡΡΠ»ΠΎΠ²Π½ΠΎ ΡΠ°ΠΊΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΏΠΎΠ²ΡΡΠ°ΡΡ ΠΊΠ°ΡΠ΅ΡΡΠ²ΠΎ ΡΠ°ΠΉΡΠ°. ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ Π΅Π΅ π
Π£ΡΠΏΠ΅Ρ ΠΎΠ²!
ΠΡΡΠΎΡΠ½ΠΈΠΊ: designmodo.com
ΠΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΠΎΠ±ΡΡΠΌΠ½ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ π© ΠΎΠ±ΡΠ΅ΠΌΠ½ΡΠ΅ ΠΌΠ΅Π½Ρ π© ΠΡΠΎΠ³ΡΠ°ΠΌΠΌΠ½ΠΎΠ΅ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠ΅Π½ΠΈΠ΅
ΠΠ°ΠΌ ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΠΈΡΡΡ
- — ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ° Photoshop.
ΠΠ½ΡΡΡΡΠΊΡΠΈΡ
Π‘ΠΎΠ·Π΄Π°ΠΉΡΠ΅ Π² Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠΌ ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠ΅ Π½ΠΎΠ²ΡΠΉ Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ ΠΏΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ ΠΎΠΏΡΠΈΠΈ New ΠΈΠ· ΠΌΠ΅Π½Ρ File. Π Π°Π·ΠΌΠ΅Ρ Π½ΠΎΠ²ΠΎΠ³ΠΎ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ° Π²ΡΠ±Π΅ΡΠΈΡΠ΅ ΡΠ°ΠΊΠΎΠΉ, ΡΡΠΎΠ±Ρ Π² Π½Π΅Π³ΠΎ ΠΏΠΎΠΌΠ΅ΡΡΠΈΠ»Π°ΡΡ ΠΊΠ½ΠΎΠΏΠΊΠ°, Π° ΡΠΎΠ½ ΡΠ΄Π΅Π»Π°ΠΉΡΠ΅ ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΡΠΌ.
ΠΠΊΡΠΈΠ²ΠΈΠ·ΠΈΡΡΠΉΡΠ΅ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½Ρ Rounded Rectangle Tool. ΠΡΠ»ΠΈ Π²Π°ΠΌ Π½ΡΠΆΠ½Π° Π½Π΅ ΠΎΡΠ΅Π½Ρ ΡΠΈΠ»ΡΠ½ΠΎ ΡΠΊΡΡΠ³Π»Π΅Π½Π½Π°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ°, Π² ΠΏΠ°Π½Π΅Π»ΠΈ Π½Π°ΡΡΡΠΎΠ΅ΠΊ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠ° ΡΠΊΠ°ΠΆΠΈΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠ° Radius, ΡΠ°Π²Π½ΠΎΠ΅ ΠΎΠ΄Π½ΠΎΠΌΡ ΠΌΠΈΠ»Π»ΠΈΠΌΠ΅ΡΡΡ. ΠΠ°ΡΠΈΡΡΠΉΡΠ΅ ΡΠΊΡΡΠ³Π»Π΅Π½Π½ΡΠΉ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊ ΠΏΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ Π²ΡΠ±ΡΠ°Π½Π½ΠΎΠ³ΠΎ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠ°. ΠΠΎΠ»ΡΡΠ΅Π½Π½Π°Ρ ΡΠΈΠ³ΡΡΠ° Π±ΡΠ΄Π΅Ρ ΠΎΡΠ½ΠΎΠ²ΠΎΠΉ Π΄Π»Ρ ΠΊΠ½ΠΎΠΏΠΊΠΈ.
Π©Π΅Π»ΠΊΠ½ΠΈΡΠ΅ ΠΏΡΠ°Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ ΠΌΡΡΠΊΠΈ ΠΏΠΎ ΡΠ»ΠΎΡ ΠΈ Π²ΡΠ±Π΅ΡΠΈΡΠ΅ ΠΎΠΏΡΠΈΡ Rasterize Layer. ΠΠ°Π³ΡΡΠ·ΠΈΡΠ΅ Π²ΡΠ΄Π΅Π»Π΅Π½ΠΈΠ΅ ΠΎΠΏΡΠΈΠ΅ΠΉ Load Selection ΠΈΠ· ΠΌΠ΅Π½Ρ Select.
ΠΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠ° Gradient Tool Π·Π°Π»Π΅ΠΉΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΡ Π΄Π²ΡΡ ΡΠ²Π΅ΡΠ½ΡΠΌ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠΎΠΌ, Π²ΡΠ±ΡΠ°Π² ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΡΡΠ΅Π΅ ΡΠΎΡΠ΅ΡΠ°Π½ΠΈΠ΅ ΡΠ²Π΅ΡΠΎΠ² ΠΈΠ· ΠΏΡΠ΅ΡΠ΅ΡΠΎΠ² Π² ΠΏΠ°Π»ΠΈΡΡΠ΅ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠΎΠ². Π‘ΡΠΈΠ»Ρ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠ° Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±ΡΡΡ Π»ΠΈΠ½Π΅ΠΉΠ½ΡΠΌ, Π²ΡΠ±Π΅ΡΠΈΡΠ΅ Π΅Π³ΠΎ, ΠΊΠ»ΠΈΠΊΠ½ΡΠ² ΠΏΠΎ ΠΊΠ½ΠΎΠΏΠΊΠ΅ Linear Gradient ΠΏΠΎΠ΄ Π³Π»Π°Π²Π½ΡΠΌ ΠΌΠ΅Π½Ρ. ΠΠ΅ΡΡ Π½ΡΡ ΡΠ°ΡΡΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΏΠΎΡΠ»Π΅ Π·Π°Π»ΠΈΠ²ΠΊΠΈ Π΄ΠΎΠ»ΠΆΠ½Π° ΠΎΠΊΠ°Π·Π°ΡΡΡΡ ΡΠ²Π΅ΡΠ»Π΅Π΅ Π½ΠΈΠΆΠ½Π΅ΠΉ.
ΠΡΠΈΠΌΠ΅Π½ΠΈΡΠ΅ ΠΊ ΡΠ»ΠΎΡ ΡΡΠΈΠ»Ρ. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ Π²ΠΎΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ΡΡ ΠΎΠΏΡΠΈΠ΅ΠΉ Blending Options ΠΈΠ· ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ½ΠΎΠ³ΠΎ ΠΌΠ΅Π½Ρ. ΠΡΠ±Π΅ΡΠΈΡΠ΅ Π²ΠΊΠ»Π°Π΄ΠΊΡ Drop Shadow ΠΈ Π²Π²Π΅Π΄ΠΈΡΠ΅ Π΄Π»Ρ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠ° Angle Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΡΠΎ Π΄Π²Π°Π΄ΡΠ°ΡΡ Π³ΡΠ°Π΄ΡΡΠΎΠ². ΠΠ°ΡΠ°ΠΌΠ΅ΡΡ Size Π²ΡΡΡΠ°Π²ΡΡΠ΅ Π½Π° ΡΡΠΈ ΠΏΠΈΠΊΡΠ΅Π»Ρ.
ΠΠΎ Π²ΠΊΠ»Π°Π΄ΠΊΠ΅ Inner Shadow ΠΏΠΎΡΡΠ°Π²ΡΡΠ΅ ΡΠ°ΠΊΠΎΠ΅ ΠΆΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠ° Angle, Π° Π΄Π»Ρ Size ΠΏΠΎΡΡΠ°Π²ΡΡΠ΅ Π²Π΅Π»ΠΈΡΠΈΠ½Ρ Π² ΠΏΡΡΡ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ. ΠΡΠΈΠΌΠ΅Π½ΠΈΡΠ΅ ΡΡΠΈΠ»Ρ, Π½Π°ΠΆΠ°Π² Π½Π° ΠΊΠ»Π°Π²ΠΈΡΡ Enter.Π‘Π΄Π΅Π»Π°ΠΉΡΠ΅ ΡΠ΅Π½Ρ ΠΎΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ ΠΊΠ»ΠΈΠΊΠ½ΠΈΡΠ΅ ΠΏΠΎ ΠΊΠ½ΠΎΠΏΠΊΠ΅ Create a new layer ΠΈ Π·Π°Π»Π΅ΠΉΡΠ΅ Π²ΡΠ΄Π΅Π»Π΅Π½Π½ΡΡ ΠΎΠ±Π»Π°ΡΡΡ Π½ΠΎΠ²ΠΎΠ³ΠΎ ΡΠ»ΠΎΡ ΡΠ΅ΡΠ½ΡΠΌ ΡΠ²Π΅ΡΠΎΠΌ. ΠΡΠ±Π΅ΡΠΈΡΠ΅ Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½Ρ Paint Bucket Tool. ΠΡΠΌΠ΅Π½ΠΈΡΠ΅ Π²ΡΠ΄Π΅Π»Π΅Π½ΠΈΠ΅ ΠΊΠ»Π°Π²ΠΈΡΠ°ΠΌΠΈ Ctrl+D.
ΠΡΠΈΠΌΠ΅Π½ΠΈΡΠ΅ ΠΊ ΡΠ΅ΡΠ½ΠΎΠΌΡ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊΡ ΡΠΈΠ»ΡΡΡ Gaussian Blur ΠΈΠ· Π³ΡΡΠΏΠΏΡ Blur ΠΌΠ΅Π½Ρ Filter. ΠΠ°ΡΠ°ΠΌΠ΅ΡΡ Radius ΠΏΠΎΡΡΠ°Π²ΡΡΠ΅ Π½Π° ΡΠ΅ΡΡΡΠ΅ ΠΏΠΈΠΊΡΠ΅Π»Ρ. ΠΠ΅ΡΠ΅ΡΠ°ΡΠΈΡΠ΅ ΠΌΡΡΠΊΠΎΠΉ ΡΠ»ΠΎΠΉ Ρ ΡΠ΅Π½ΡΡ ΠΏΠΎΠ΄ ΡΠ»ΠΎΠΉ Ρ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ ΠΈ ΠΏΠΎΠ΄Π½ΠΈΠΌΠΈΡΠ΅ ΡΠ΅Π½Ρ Π½Π° ΡΡΠΈ-ΡΠ΅ΡΡΡΠ΅ ΠΏΠΈΠΊΡΠ΅Π»Ρ Π²Π²Π΅ΡΡ . ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ Π°ΠΊΡΠΈΠ²ΠΈΠ·ΠΈΡΡΠΉΡΠ΅ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½Ρ Move Tool ΠΈ ΡΠ΄Π²ΠΈΠ½ΡΡΠ΅ ΡΠ΅Π½Ρ ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌΠΈ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ ΠΊΡΡΡΠΎΡΠΎΠΌ. Π‘Π½ΠΈΠ·ΡΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠ° Opacity Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ ΡΠ»ΠΎΡ Π΄ΠΎ ΡΠ΅ΡΡΠΈΠ΄Π΅ΡΡΡΠΈ ΠΏΡΠΎΡΠ΅Π½ΡΠΎΠ².
Π‘Π΄Π΅Π»Π°ΠΉΡΠ΅ Π°ΠΊΡΠΈΠ²Π½ΡΠΌ ΡΠ»ΠΎΠΉ Ρ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ ΠΈ Π·Π°Π³ΡΡΠ·ΠΈΡΠ΅ ΠΈΠ· Π½Π΅Π³ΠΎ Π²ΡΠ΄Π΅Π»Π΅Π½ΠΈΠ΅. Π‘ΠΎΠΊΡΠ°ΡΠΈΡΠ΅ Π²ΡΠ΄Π΅Π»Π΅Π½ΠΈΠ΅ Π½Π° Π΄Π²Π° ΠΏΠΈΠΊΡΠ΅Π»Ρ ΠΎΠΏΡΠΈΠ΅ΠΉ Contract ΠΈΠ· Π³ΡΡΠΏΠΏΡ Modify ΠΌΠ΅Π½Ρ Selection.
Π‘ΠΎΠ·Π΄Π°ΠΉΡΠ΅ Π½ΠΎΠ²ΡΠΉ ΡΠ»ΠΎΠΉ ΠΈ Π·Π°Π»Π΅ΠΉΡΠ΅ Π½Π° Π½Π΅ΠΌ ΠΏΠΎΠ»ΡΡΠ΅Π½Π½ΠΎΠ΅ Π²ΡΠ΄Π΅Π»Π΅Π½ΠΈΠ΅ Π»ΠΈΠ½Π΅ΠΉΠ½ΡΠΌ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠΎΠΌ ΠΎΡ Π±Π΅Π»ΠΎΠ³ΠΎ ΠΊ ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΠΌΡ ΡΠ°ΠΊ, ΡΡΠΎΠ±Ρ Π±Π΅Π»Π°Ρ ΡΠ°ΡΡΡ ΠΎΠΊΠ°Π·Π°Π»Π°ΡΡ Π² Π½ΠΈΠΆΠ½Π΅ΠΉ ΡΠ°ΡΡΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ. ΠΡΠΌΠ΅Π½ΠΈΡΠ΅ Π²ΡΠ΄Π΅Π»Π΅Π½ΠΈΠ΅. ΠΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ ΠΎΠΏΡΠΈΠΈ Free Transform ΠΈΠ· ΠΌΠ΅Π½Ρ Edit ΡΠΌΠ΅Π½ΡΡΠΈΡΠ΅ ΠΎΠ±Π»Π°ΡΡΡ, Π·Π°ΠΊΡΡΡΡΡ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠΎΠΌ, ΠΏΠΎ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΠΈ. ΠΡΠΈΠΌΠ΅Π½ΠΈΡΠ΅ ΡΡΠ°Π½ΡΡΠΎΡΠΌΠ°ΡΠΈΡ ΠΊΠ»Π°Π²ΠΈΡΠ΅ΠΉ Enter.ΠΠ·ΠΌΠ΅Π½ΠΈΡΠ΅ ΡΠ΅ΠΆΠΈΠΌ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ ΡΠ»ΠΎΡ Ρ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠΎΠΌ Π½Π° Overlay. ΠΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ, Π²ΡΠ±ΡΠ°Π² ΡΠ΅ΠΆΠΈΠΌ ΠΈΠ· ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠ΅Π³ΠΎΡΡ ΡΠΏΠΈΡΠΊΠ° Π² Π»Π΅Π²ΠΎΠΉ ΡΠ°ΡΡΠΈ ΠΏΠ°Π»ΠΈΡΡΡ ΡΡΠΈΠ»Π΅ΠΉ. Π£ΠΌΠ΅Π½ΡΡΠΈΡΠ΅ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡ Opacity ΡΠ»ΠΎΡ Π΄ΠΎ ΡΠ΅ΡΡΠΈΠ΄Π΅ΡΡΡΠΈ ΠΏΡΠΎΡΠ΅Π½ΡΠΎΠ².
ΠΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠ° Horizontal Type Tool Π½Π°ΠΏΠΈΡΠΈΡΠ΅ ΡΠ΅ΠΊΡΡ, ΠΊΠΎΡΠΎΡΡΠΉ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±ΡΡΡ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠ΅.
Π‘ΠΎΠ±Π΅ΡΠΈΡΠ΅ Π²ΡΠ΅ ΡΠ»ΠΎΠΈ Π² ΠΏΠ°ΠΏΠΊΡ ΠΎΠΏΡΠΈΠ΅ΠΉ Group Layers ΠΈΠ· ΠΌΠ΅Π½Ρ Layer, Π²ΡΠ΄Π΅Π»ΠΈΠ² ΠΈΡ ΠΏΡΠΈ Π·Π°ΠΆΠ°ΡΠΎΠΉ ΠΊΠ»Π°Π²ΠΈΡΠ΅ Ctrl. Π‘ΠΎΡ ΡΠ°Π½ΠΈΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΡ Π² ΡΠ°ΠΉΠ» psd ΠΎΠΏΡΠΈΠ΅ΠΉ Save ΠΈΠ· ΠΌΠ΅Π½Ρ File.