ΠΡΡΠ΅ΠΊΡΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ
5 Π½ΠΎΡΠ±ΡΡ 2015 ΠΠ½ΡΠΎΠ½ ΠΡΠ»Π΅ΡΠΎΠ² 4732 0
ΠΠ΄ΡΠ°Π²ΡΡΠ²ΡΠΉΡΠ΅ Π΄ΠΎΡΠΎΠ³ΠΈΠ΅ ΡΠΈΡΠ°ΡΠ΅Π»ΠΈ! ΠΠ°ΡΡΡΠΏΠΈΠ»ΠΎ Π²ΡΠ΅ΠΌΡ ΠΏΠΎΠΏΠΎΠ»Π½ΠΈΡΡ ΠΊΠΎΠ»Π»Π΅ΠΊΡΠΈΡ ΡΠ°ΠΉΡΠ° Π΅ΡΡ 30-ΡΡΡ ΠΊΡΠ°ΡΠΈΠ²ΡΠΌΠΈ CSS ΡΡΡΠ΅ΠΊΡΠ°ΠΌΠΈ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° Π½Π° ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ. ΠΠ°Π½Π½Π°Ρ ΡΠ΅ΠΌΠ° ΠΏΠΎΠΈΡΡΠΈΠ½Π΅ ΠΎΡΠ΅Π½Ρ ΠΎΠ±ΡΠΈΡΠ½Π° ΠΈ ΠΌΡ Π½Π΅ ΡΡΡΠ°Π΅ΠΌ ΠΏΠΎΠΏΠΎΠ»Π½ΡΡΡ Π½Π°ΡΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΡ Π²ΡΠ΅ Π½ΠΎΠ²ΡΠΌΠΈ ΠΈ Π½ΠΎΠ²ΡΠΌΠΈ ΡΡΡΠ΅ΠΊΡΠ°ΠΌΠΈ.
ΠΡΠΎΠ΄ΠΎΠ»ΠΆΠΈΡΡ ΡΠΈΡΠ°ΡΡ3 Π°Π²Π³ΡΡΡΠ° 2015 ΠΠ½ΡΠΎΠ½ ΠΡΠ»Π΅ΡΠΎΠ² 7254 0
ΠΠ°ΠΊ ΠΎΡΠΎΡΠΌΠΈΡΡ ΡΡΡΠ»ΠΊΡ Π½Π° ΡΠ°ΠΉΡΠ΅? ΠΡΠΎΡ Π²ΠΎΠΏΡΠΎΡ Π½Π°Π²Π΅ΡΠ½ΠΎ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· ΡΠ°ΠΌΡΡ
ΠΏΡΠΎΡΡΡΡ
, Π²ΠΎΠ·Π½ΠΈΠΊΠ°ΡΡΠΈΡ
Ρ Π²Π΅Π±-ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ°, ΡΠ΅ΠΌ Π±ΠΎΠ»Π΅Π΅ ΡΡΠΎ Π΄ΠΎ Π½Π΅Π΄Π°Π²Π½Π΅Π³ΠΎ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ ΠΈ Π²ΠΎΠΏΡΠΎΡΠ°, ΠΊΠ°ΠΊ ΡΠ°ΠΊΠΎΠ²ΠΎΠ³ΠΎ ΠΈ Π½Π΅ Π±ΡΠ»ΠΎ β ΡΠ΅Π΄ΠΊΠΎ ΠΊΡΠΎ ΠΌΠ΅Π½ΡΠ» Π΄Π°ΠΆΠ΅ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΠΉ Π½Π°Π±ΠΎΡ ΡΠ²Π΅ΡΠΎΠ². ΠΠΎΡΠ²Π»Π΅Π½ΠΈΠ΅ CSS3 Π²Π½Π΅ΡΠ»ΠΎ Π·Π½Π°ΡΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ Π² Β«ΡΠ΅ΡΡΠ΅ Π±ΡΠ΄Π½ΠΈΒ» ΠΈ ΡΡΡΠ°Π½ΠΈΡΡ Β«ΡΠ°ΡΡΠ²Π΅Π»ΠΈΒ». ΠΡ ΡΠΆΠ΅ ΡΠ°ΡΡΠΌΠ°ΡΡΠΈΠ²Π°Π»ΠΈ ΡΠ°Π½Π΅Π΅ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ
Ρ
ΠΎΠ²Π΅Ρ ΡΡΡΠ΅ΠΊΡΠΎΠ², ΡΠ΅Π³ΠΎΠ΄Π½ΡΡΠ½ΡΡ ΠΆΠ΅ CSS Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΡΠΊΠ° β Π·Π°ΡΠΎΡΠ΅Π½Π° ΠΏΠΎΠ΄ ΡΡΡΠ»ΠΊΠΈ, Ρ
ΠΎΡΡ, ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΡΠ΅ Π² Π½Π΅ΠΉ ΡΡΡΠ΅ΠΊΡΡ Π»Π΅Π³ΠΊΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ ΠΈ Π΄Π»Ρ Π΄ΡΡΠ³ΠΈΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΡΡΡΠ°Π½ΠΈΡΡ. ΠΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΡΡΡΠ΅ΠΊΡΡ: ΡΡΡΠ»ΠΊΠΈ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π²ΡΠ°ΡΠ°ΡΡΡΡ, ΠΌΠ΅Π½ΡΡΡ ΠΏΠ΅ΡΡΠΏΠ΅ΠΊΡΠΈΠ²Ρ, ΠΏΠ΅ΡΠ΅ΡΡΡΠ°ΠΈΠ²Π°ΡΡ Π±ΠΎΡΠ΄Π΅ΡΡ, ΡΠΈΠΊΡΠΈΡΡΡΡ Π²Π·Π³Π»ΡΠ΄, ΡΠΎΠ·Π΄Π°ΡΡ ΡΡΡΠ΅ΠΊΡ ΠΊΡΠ±Π°, Π²ΡΠ·ΡΠ²Π°ΡΡ Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΡΡ ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΊΡ, Π·Π°ΠΊΠ»ΡΡΠ°ΡΡΡΡ Π² ΡΠΊΠΎΠ±ΠΊΠΈ ΠΈ ΠΌΠ½ΠΎΠ³ΠΎ Π΄ΡΡΠ³ΠΈΡ
ΠΏΡΠΈΡΡΠ΄Π»ΠΈΠ²ΡΡ
Π²ΡΠ΄Π΅Π»Π΅Π½ΠΈΠΉ.
24 ΠΈΡΠ½Ρ 2015 ΠΠ½ΡΠΎΠ½ ΠΡΠ»Π΅ΡΠΎΠ² 3645 0
ΠΡΠΎΠ΄ΠΎΠ»ΠΆΠ°Π΅ΠΌ ΠΏΡΠΎΠΊΠ°ΡΠΈΠ²Π°ΡΡ Π΄ΠΈΠ·Π°ΠΉΠ½ Π½Π°ΡΠΈΡ ΡΡΡΠ°Π½ΠΈΡ, ΠΈ ΡΠ΅Π³ΠΎΠ΄Π½Ρ Ρ Ρ ΠΎΡΡ ΠΎΠ±ΡΠ°ΡΠΈΡΡ Π²Π°ΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° ΡΠ΅Π»ΡΡ ΠΏΠ°Π»ΠΈΡΡΡ ΠΊΡΠ°ΡΠΈΠ²ΡΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ Π΄Π»Ρ ΡΠ°ΠΉΡΠ°. Β«ΠΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎΒ» ΡΠ°ΡΡΡΠ°Π²Π»Π΅Π½Π½ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ β ΡΡΠΎ Π΄ΡΡΠ° ΠΏΡΠΎΠ΄Π°ΡΡΠ΅Π³ΠΎ ΡΠ°ΠΉΡΠ°, ΠΎΠ½ΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°ΡΡ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ, ΡΡΠΎΠ±Ρ ΠΎΠ½ Π½Π΅ ΡΠΌΠΎΠ³ ΠΏΠΎΠΊΠΈΠ½ΡΡΡ ΡΡΡΠ°Π½ΠΈΡΡ Π½Π΅ Π½Π°ΠΆΠ°Π² ΠΏΠ°ΡΠΎΡΠΊΡ ΠΈΠ· Π½ΠΈΡ . ΠΠ°ΡΠΊΠ΅ΡΠΈΠ½Π³ ΠΏΡΠΎΡΠ½ΠΎ Π²ΠΏΠΈΠ»ΡΡ Π² Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ΡΡΠΊΡΡ ΡΠ°ΡΡΡ ΠΈ Π΅Π³ΠΎ Π½Π΅ ΠΎΠ±ΠΎΠΉΠ΄Π΅ΡΡ ΡΡΠΎΡΠΎΠ½ΠΎΠΉ, Π΅ΡΠ»ΠΈ ΠΊΠΎΠ½Π΅ΡΠ½ΠΎ Π²Ρ Π½Π΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡΠ΅ Π·Π°Ρ ΡΠ΄Π°Π»ΡΠΉ ΡΠ°ΠΉΡ Ρ ΠΏΠ°ΡΠΎΠΉ-ΡΡΠΎΠΉΠΊΠΎΠΉ ΠΏΠΎΡΠ΅ΡΠΈΡΠ΅Π»Π΅ΠΉ. ΠΡΠ°ΡΠΈΠ²Π°Ρ ΠΈ ΠΏΡΠΈΠ·ΡΠ²Π½Π°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° Π΄Π»Ρ ΠΏΠΎΡΠ΅ΡΠΈΡΠ΅Π»Ρ β ΠΊΠ°ΠΊ ΠΊΡΠ°ΡΠ½Π°Ρ ΡΡΡΠΏΠΊΠ° Π΄Π»Ρ Π±ΡΠΊΠ°, ΠΎΠ½ΠΎ Π²ΡΠΎΠ΄Π΅ Π΅ΠΌΡ ΠΈ Π½Π΅ Π½Π°Π΄ΠΎ, Π½ΠΎ ΠΌΠ°Π½ΠΈΡ ΡΠ΅ΡΡΠΎΠ²ΠΊΠ°.
ΠΡΠΎΠ΄ΠΎΠ»ΠΆΠΈΡΡ ΡΠΈΡΠ°ΡΡ21 ΠΌΠ°Ρ 2015 ΠΠ½ΡΠΎΠ½ ΠΡΠ»Π΅ΡΠΎΠ² 7892 0
ΠΡΡΠ΅ΠΊΡΡ ΠΏΡΠΈ ΠΊΠ»ΠΈΠΊΠ΅ Π½Π΅ ΡΡΠΎΠ»Ρ ΠΏΠΎΠΏΡΠ»ΡΡΠ½Ρ ΠΊΠ°ΠΊ hover effects, ΠΎΠ΄Π½Π°ΠΊΠΎ, ΡΠ΅Π³ΠΎΠ΄Π½Ρ ΠΌΠΎΠΉ Π²Π·ΠΎΡ ΡΠΏΠ°Π» Π½Π° ΠΏΠ»Π°Π³ΠΈΠ½ ΠΏΠΎΠ΄ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ΠΌ waves.
1 Π°ΠΏΡΠ΅Π»Ρ 2015 ΠΠ½ΡΠΎΠ½ ΠΡΠ»Π΅ΡΠΎΠ² 4507 0
ΠΡΠΎΠ΄ΠΎΠ»ΠΆΠ°Π΅ΠΌ Β«Π½Π°Π²ΠΎΠ΄ΠΈΡΡ ΠΊΡΠ°ΡΠΎΡΡΒ» Π½Π° Π½Π°ΡΠΈΡ ΡΠ°ΠΉΡΠ°Ρ , ΠΈ ΡΠ΅Π³ΠΎΠ΄Π½Ρ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡΠΈΠΌ ΠΎ ΠΏΠ»Π°Π³ΠΈΠ½Π΅ ΠΏΠΎΠ΄ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ΠΌ adipoli, ΠΏΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΊΡΠ°ΡΠΈΠ²ΡΠ΅ hover effects.
ΠΡΠΎΠ΄ΠΎΠ»ΠΆΠΈΡΡ ΡΠΈΡΠ°ΡΡ21 ΡΠ΅Π²ΡΠ°Π»Ρ 2015 ΠΠ½ΡΠΎΠ½ ΠΡΠ»Π΅ΡΠΎΠ² 3178 0
ΠΡΠΎΠ΄ΠΎΠ»ΠΆΠ°Π΅ΠΌ ΡΠ°Π·Π²ΠΈΠ²Π°ΡΡ ΡΠ΅ΠΌΡ hover effects ΠΈ ΠΎΠ±ΡΠ°ΡΠΈΠΌ Π½Π°ΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° Π²Π΅ΡΡΠΌΠ° ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΠΉ ΠΏΠ»Π°Π³ΠΈΠ½ Π½Π° jQuery, ΠΏΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°ΡΡ ΠΊΡΡΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΡΡΡΠ΅ΠΊΡΠΎΠ² Ρ ΠΎΠ²Π΅ΡΠ°.
ΠΡΠΎΠ΄ΠΎΠ»ΠΆΠΈΡΡ ΡΠΈΡΠ°ΡΡ13 ΡΠ΅Π²ΡΠ°Π»Ρ 2015 ΠΠ½ΡΠΎΠ½ ΠΡΠ»Π΅ΡΠΎΠ² 3814 0
Π‘Π΅Π³ΠΎΠ΄Π½Ρ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡΠΈΠΌ ΠΎΠ± Β«ΡΠΊΡΠ°ΡΠ°ΡΠ΅Π»ΡΡΡΠ²Π°Ρ Β» ΠΈ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ (ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ Π±Π΅ΡΡ ΠΊΠ°ΠΊ ΠΏΡΠΈΠΌΠ΅Ρ, Π² ΡΠ΅Π°Π»ΡΠ½ΠΎΡΡΠΈ ΡΡΡΠ΅ΠΊΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π½Π° ΡΠ΅ΠΌ ΡΠ³ΠΎΠ΄Π½ΠΎ), Π° ΡΠ°ΠΊΠΆΠ΅ ΠΏΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΠΌΡΡ Ρ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΎΠΉ MooTools.
ΠΡΠΎΠ΄ΠΎΠ»ΠΆΠΈΡΡ ΡΠΈΡΠ°ΡΡ13 hover ΡΡΡΠ΅ΠΊΡΠΎΠ² ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° jquery
1.

2. jQuery ΡΡΡΠ΅ΠΊΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ
ΠΠ»Π°Π²Π½ΡΠΉ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ ΠΎΡ ΠΌΠΎΠ½ΠΎΡ ΡΠΎΠΌΠ½ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΊ ΡΠ²Π΅ΡΠ½ΠΎΠΌΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ jQuery.
3. Hover-ΡΡΡΠ΅ΠΊΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS ΠΈ jQuery
ΠΡΡΠ΅ΠΊΡ Π·Π°ΠΌΠ΅Π½Ρ ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΠΉ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° ΠΌΡΡΠΊΠΈ. Π€ΠΎΡΠΎΠ³ΡΠ°ΡΠΈΠΈ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½Ρ Π² Π²ΠΈΠ΄Π΅ ΡΠΏΡΠ°ΠΉΡΠΎΠ² (Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠΎΡΠΎ, ΠΎΠ±ΡΠ΅Π΄Π΅Π½Π΅Π½Π½ΡΡ Π² ΠΎΠ΄Π½Ρ).
4. ΠΠ½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΡΡΠ΅ΠΊΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ
jQuery ΡΡΡΠ΅ΠΊΡ: ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π·Π°ΡΠ΅ΠΌΠ½Π΅Π½ Π΄ΠΎ ΡΠ΅Ρ ΠΏΠΎΡ ΠΏΠΎΠΊΠ° Π½Π° Π½Π΅Π³ΠΎ Π½Π΅ Π±ΡΠ΄Π΅Ρ Π½Π°Π²Π΅Π΄Π΅Π½ ΠΊΡΡΡΠΎΡ ΠΌΡΡΠΈ. ΠΡΠ»ΠΈΡΠ½ΡΠΉ ΡΠΏΠΎΡΠΎΠ± Π·Π°ΠΎΡΡΡΠΈΡΡ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΏΠΎΡΠ΅ΡΠΈΡΠ΅Π»Ρ Π½Π° ΠΊΠ°ΠΊΠΎΠΌ-Π½ΠΈΠ±ΡΠ΄Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ΅ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅.
5. Π‘ΠΌΠ΅Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΈ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° ΠΌΡΡΠΈ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ jQuery
ΠΡΠ΅Π½Ρ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΠΉ ΡΡΡΠ΅ΠΊΡ. ΠΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° ΠΌΡΡΠΈ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ ΡΠΌΠ΅Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ. ΠΡΠΈ ΠΊΠ»ΠΈΠΊΠ΅ ΠΌΡΡΠΊΠΎΠΉ Π²ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠΌΠ΅Π½ΡΡΡΡ ΠΎΠ΄Π½ΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎ.
6. CSS Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΡΡΠ΅ΠΊΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ
Π‘ΠΌΠ΅Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ. ΠΡΡΠ΅ΠΊΡ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ IE.
7. ΠΡΡΠ΅ΠΊΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ CSS ΡΠΏΡΠ°ΠΉΡΠΎΠ² ΠΈ jQuery
ΠΡΡΠ΅ΠΊΡ Π·Π°ΡΠ΅ΠΌΠ½Π΅Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° Π½Π΅Π³ΠΎ ΠΊΡΡΡΠΎΡΠ° ΠΌΡΡΠΈ. ΠΠ»Ρ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ ΡΡΡΠ΅ΠΊΡΠ° ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ CSS ΡΠΏΡΠ°ΠΉΡΡ.
8. jQuery ΠΏΠ»Π°Π³ΠΈΠ½ Β«jQueryZoomΒ»
Π‘ ΠΏΠΎΠΌΠΎΡΡΡ ΡΡΠΎΠ³ΠΎ ΠΏΠ»Π°Π³ΠΈΠ½Π° Π²Ρ ΡΠΌΠΎΠΆΠ΅ΡΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΡΡΠ΅ΠΊΡ ΡΠ²Π΅Π»ΠΈΡΠ΅Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΈΠ»ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π½Π° Π½Π΅Π³ΠΎ. ΠΠ»Π°Π³ΠΈΠ½ Π»Π΅Π³ΠΊΠΎ Π½Π°ΡΡΡΠΎΠΈΡΡ Π΄Π»Ρ Π²Π°ΡΠΈΡ Π½ΡΠΆΠ΄.
9. Π‘ΠΌΠ΅Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ
Π‘ΠΌΠ΅Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° ΠΌΡΡΠΊΠΈ. ΠΡ Π»Π΅Π³ΠΊΠΎ ΡΠΌΠΎΠΆΠ΅ΡΠ΅ Π½Π°ΠΉΡΠΈ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΡΠΎΠΌΡ jQuery ΠΏΠ»Π°Π³ΠΈΠ½Ρ Π² ΠΈΠ½ΡΠ΅ΡΠ½Π΅Ρ-ΠΌΠ°Π³Π°Π·ΠΈΠ½Π°Ρ ΠΈ ΠΊΠ°ΡΠ°Π»ΠΎΠ³Π°Ρ .
10. jQuery ΡΡΡΠ΅ΠΊΡ ΠΏΠ»Π°Π²Π½ΠΎΠ³ΠΎ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠ²Π΅ΡΠ° ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ
ΠΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° ΠΌΡΡΠΈ Π½Π° ΠΎΠ±ΡΠ΅ΠΊΡ, ΠΌΠΎΠΆΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ²Π΅ΡΠ° ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΉ ΡΠ°ΡΡΠΈ ΡΡΡΠ°Π½ΠΈΡΡ.
11. ΠΠ»Π°Π³ΠΈΠ½ jQuery Β«Hover Image ZoomΒ»
Π£Π²Π΅Π»ΠΈΡΠ΅Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ°. ΠΡΡΠ΅ΠΊΡ ΠΏΡΠΈΠ±Π»ΠΈΠΆΠ΅Π½ΠΈΡ.
12. jQuery Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ
ΠΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π»Ρ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ.
13. jQuery ΡΡΡΠ΅ΠΊΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Β«Images Hover Cycle effectΒ»
hover Β» Π‘ΠΊΡΠΈΠΏΡΡ Π΄Π»Ρ ΡΠ°ΠΉΡΠΎΠ²
3 674 Text / CodepenΠ‘ΠΊΠΎΠ»ΡΠ·ΡΡΠΈΠΉ ΡΠ΅ΠΊΡΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ
ΠΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° Π½Π° ΡΠ΅ΠΊΡΡ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ Π²ΠΎΠ»Π½ΠΎΠΎΠ±ΡΠ°Π·Π½ΠΎΠ΅ ΡΠΊΠΎΠ»ΡΠΆΠ΅Π½ΠΈΠ΅ Π²Π²Π΅ΡΡ / Π²Π½ΠΈΠ· Ρ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ΠΌ ΡΠ²Π΅ΡΠ° ΡΠ΅ΠΊΡΡΠ°
3 970 Animation / CodepenHover ΡΡΡΠ΅ΠΊΡΡ Π½Π°Π΄ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌΠΈ Π½Π° CSS
ΠΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Π½Π° Π±Π»ΠΎΠΊΠΈ Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌΠΈ ΠΈ ΡΠ΅ΠΊΡΡΠΎΠΌ.
2 322 CodepenΠΡΡΠ΅ΠΊΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅
ΠΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ-ΡΠ°ΠΊΠΈ ΡΠΌΠ΅Π»ΡΠΉ hover ΡΡΡΠ΅ΠΊΡ Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΈ. ΠΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ ΡΠ°Π·Π΄Π΅Π»Π΅Π½ΠΈΠ΅ Π±Π»ΠΎΠΊΠ° Π½Π° ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΠ΅ ΠΊΡΡΠΎΡΠΊΠΈ Ρ ΠΎΠ±ΡΠΈΠΌ ΡΠΎΠ½ΠΎΠΌ β ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΎΠΉ.
ΠΡΡΠ΅ΠΊΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ clip-path
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° clip-path ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π΄Π»Ρ ΠΏΡΠΈΠ΄Π°Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠΎΡΠΌΡ ΡΡΡΠ΅Π»ΠΊΠΈ Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΠ΅ΠΉ.
ΠΡΡΠ΅ΠΊΡ fill Π΄Π»Ρ ΡΠ΅ΠΊΡΡΠ° ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ
ΠΡΡΠ΅ΠΊΡ Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ ΡΠ΅ΠΊΡΡΠ° ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ. Π Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½ΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS.
1 666 CodepenΠΠΎΡΡ Π² ΠΌΡΠ·Π΅Π΅
ΠΡΠΈ Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° ΡΠ°Π·Π³ΠΎΡΠ°Π΅ΡΡΡ ΡΠΎΠ½Π°ΡΡ ΠΈ ΠΎΡΠ²Π΅ΡΠ°Π΅Ρ ΠΊΠ°ΡΡΠΈΠ½Ρ Π² ΠΌΡΠ·Π΅Π΅. ΠΡΠΈ ΠΊΠ»ΠΈΠΊΠ΅ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ ΠΏΡΠΈΠ±Π»ΠΈΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.
ΠΠΈΠ΄ΠΊΠΈΠΉ ΡΠ΅ΠΊΡΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ
ΠΡΠΈ hover Π½Π° ΡΠ΅ΠΊΡΡ Π΅Π³ΠΎ ΡΠΎΠ½ ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ ΡΠ΅ΠΊΡΡΠΈΠΌ, ΠΊΠ°ΠΊ ΠΆΠΈΠ΄ΠΊΠΎΡΡΡ.
2 186 CodepenΠ’Π΅ΠΊΡΡΡΡΠ½ΡΠΉ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ ΠΌΠ΅ΠΆΠ΄Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌΠΈ Π½Π° three.js
ΠΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ ΠΏΠ»Π°Π²Π½ΡΠΉ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ ΡΠΊΠ²ΠΎΠ·Ρ ΡΠ΅ΠΊΡΡΡΡΡ Π΄Π»Ρ ΠΏΠΎΠΊΠ°Π·Π° Π΄ΡΡΠ³ΠΎΠΉ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ. ΠΡΠΈ Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° ΠΌΡΡΠΈ ΡΠ°ΠΊ ΠΆΠ΅ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ Π½Π°ΠΊΠ»ΠΎΠ½ Π² 3d ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²Π΅. Π Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½ΠΎ Π½Π° three.js
3 141 CodepenCSS ΡΠΈΠ»ΡΡΡΡ Π΄Π»Ρ hover ΡΡΡΠ΅ΠΊΡΠ° ΠΊΠ°ΡΡΠΎΡΠ΅ΠΊ
Hover ΡΡΡΠ΅ΠΊΡ Π½Π° CSS ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΠΈΠΉ ΡΠΈΠ»ΡΡΡΡ Π΄Π»Ρ Π·Π°Π±Π»ΡΡΠΈΠ²Π°Π½ΠΈΡ Π½Π΅Π°ΠΊΡΠΈΠ²Π½ΡΡ ΠΊΠ°ΡΡΠΎΡΠ΅ΠΊ
ΠΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΡΠ»Π΅Π΄ΡΡΠΈΠΉ Π·Π° ΠΊΡΡΡΠΎΡΠΎΠΌ
ΠΠΎΠ΄ΡΠ΅ΡΠΊΠΈΠ²Π°Π½ΠΈΠ΅ ΡΡΡΠ»ΠΊΠΈ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΠΏΡΠ½ΠΊΡ ΠΌΠ΅Π½Ρ
2 537 CodepenΠΠ»ΠΈΡΡ ΡΡΡΠ΅ΠΊΡ Π½Π° CSS ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ
ΠΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π²ΠΎΡΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΡΡ Π³Π»ΠΈΡΡ ΡΡΡΠ΅ΠΊΡ. Π‘Π΄Π΅Π»Π°Π½ΠΎ Π½Π° CSS Π·Π° ΡΡΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈ ΡΠΎΠ³ΠΎ ΠΆΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ°Π·.
1 806 CodepenΠΡΡΠ΅ΠΊΡ ΡΠ΅ΡΡΠ΅Π»ΡΡΠΈΠΈ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΡΡΠ΅ΠΉΠΊΡ Π² grid css
ΠΡΡΠ΅ΠΊΡ ΡΠ΅ΡΡΠ΅Π»ΡΡΠΈΠΈ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΡΡΠ΅ΠΉΠΊΠΈ Π² ΡΠ΅ΡΠΊΠ΅. Π‘Π΅ΡΠΊΠ° grid ΠΏΠΎΡΡΡΠΎΠ΅Π½Π° Π½Π° Π±Π°Π·Π΅ 200 Π±Π»ΠΎΠΊΠΎΠ². Π‘Π΄Π΅Π»Π°Π½ ΡΡΡΠ΅ΠΊΡ Π½Π° ΡΠΈΡΡΠΎΠΌ CSS
CSS ΡΡΡΠ΅ΠΊΡΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ
CSS Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° imagehover β ΡΡΠΎ ΠΊΠΎΠ»Π»Π΅ΠΊΡΠΈΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ
CSS ΡΡΡΠ΅ΠΊΡΠΎΠ² ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ (hover effects), ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ ΠΊΠ°ΠΊ ΠΊ ΠΎΠ΄ΠΈΠ½ΠΎΡΠ½ΡΠΌ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ°ΠΌ, ΡΠ°ΠΊ ΠΈ ΠΊ Π³Π°Π»Π΅ΡΠ΅ΡΠΌ.
Π‘ΡΡΠ»ΠΊΠ° Π½Π° ΡΠ°ΠΉΡ: http://imagehover.io/
ΠΠ°ΠΈΠ»ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, Π΄Π°Π½Π½ΡΠ΅ ΡΡΡΠ΅ΠΊΡΡ Ρ ΠΎΡΠΎΡΠΎ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΡΡ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ ΠΊ ΠΏΡΠ΅Π²ΡΡ-ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌ, ΡΡΡΠ»Π°ΡΡΠΈΠ΅ΡΡ Π½Π° ΠΏΠΎΠ»Π½ΡΡ ΡΡΠ°ΡΡΡ Π² Π±Π»ΠΎΠ³Π΅ ΠΈΠ»ΠΈ Π½Π° URL ΡΠ΅Π°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠ°ΠΉΡΠ° ΠΈΠ· Π²Π°ΡΠ΅Π³ΠΎ ΠΏΠΎΡΡΡΠΎΠ»ΠΈΠΎ.
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ ΠΏΡΠΈΠΌΠ΅ΡΠ°
4 ΡΠ°Π³Π° Π΄Π»Ρ Π·Π°ΠΏΡΡΠΊΠ° hover ΡΡΡΠ΅ΠΊΡΠ°:
1) Π‘ΠΊΠ°ΡΠ°ΡΡ ΠΈ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠΈΡΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΡ
Π‘ΠΊΠ°ΡΠ°ΠΉΡΠ΅ Π°ΡΡ ΠΈΠ² ΠΈ Π²ΡΡΠ°ΡΠΈΡΠ΅ ΠΎΡΡΡΠ΄Π° Π²ΡΠ΅Π³ΠΎ ΠΎΠ΄ΠΈΠ½ CSS ΡΠ°ΠΉΠ» imagehover.min (ΡΠΆΠ°ΡΠ°Ρ Π²Π΅ΡΡΠΈΡ) ΠΈ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠΈΡΠ΅ ΠΊ Π²Π°ΡΠ΅ΠΌΡ ΠΏΡΠΎΠ΅ΠΊΡΡ.
<head>
<link rel="stylesheet" href="css/imagehover.min.css">
</head>
2) ΠΡΠ±Π΅ΡΠΈΡΠ΅ ΡΡΡΠ΅ΠΊΡ
ΠΠ° Π³Π»Π°Π²Π½ΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅ imagehover.
3) Π‘ΠΎΠ·Π΄Π°ΠΉΡΠ΅ Π³Π°Π»Π΅ΡΠ΅Ρ Π½Π° HTML
Π‘ΠΎΠ·Π΄Π°Π΄ΠΈΠΌ ΡΡΠ΄ row Ρ ΡΡΠ΅ΠΌΡ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°ΠΌΠΈ column, Π² ΠΊΠ°ΠΆΠ΄ΡΡ ΠΈΠ· ΠΊΠΎΡΠΎΡΡΡ ΠΏΠΎΠΌΠ΅ΡΡΠΈΠΌ ΠΏΡΠ΅Π²ΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ, ΡΠ΅ΠΊΡΡ-ΠΎΠΏΠΈΡΠ°Π½ΠΈΠ΅ ΠΈ ΡΡΡΠ»ΠΊΡ. ΠΡΡΠ°Π²ΡΡΠ΅ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ ΠΊΠ»Π°ΡΡΠ° imghvr-slide-up Π² ΡΠ΅Π³ figure. ΠΠ°ΠΌΠ΅Π½ΠΈΡΠ΅ ΡΠ²Π΅Ρ ΠΏΠΎΠ΄Π»ΠΎΠΆΠΊΠΈ Ρ ΡΠ΅Π³Π° figcaption, Π½Π° Π±ΠΎΠ»Π΅Π΅ Π³Π°ΡΠΌΠΎΠ½ΠΈΡΡΡΡΠΈΠΉ Ρ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ ΡΠ°ΠΉΡΠ°, ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΡΠΎΠ½ ΠΏΠΎΠ΄ ΡΠ΅ΠΊΡΡΠΎΠΌ β ΡΠΈΠ½ΠΈΠΉ. Π£ ΡΠ΅Π³Π° a, Π²ΠΌΠ΅ΡΡΠΎ ΡΠ΅ΡΠ΅ΡΠΊΠΈ ΠΏΠΎΡΡΠ°Π²ΡΡΠ΅ URL.
<div>
<div>
<figure>
<img src="cat.jpg" alt="cat">
<figcaption>
<h3>ΠΠ°Π²Π΅Π΄Π΅Π½ΠΈΠ΅ Π½Π° ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ</h3>
<p>imghvr-slide-up</p>
</figcaption>
<a href="#"></a>
</figure>
</div>
<div>
<figure>
<img src="dog.
jpg" alt="dog">
<figcaption>
<h3> ΠΠ°Π²Π΅Π΄Π΅Π½ΠΈΠ΅ Π½Π° ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ</h3>
<p>imghvr-slide-up</p>
</figcaption>
<a href="#"></a>
</figure>
</div>
<div>
<figure>
<img src="zebra.jpg" alt="zebra">
<figcaption>
<h3> ΠΠ°Π²Π΅Π΄Π΅Π½ΠΈΠ΅ Π½Π° ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ</h3>
<p>imghvr-slide-up</p>
</figcaption>
<a href="#"></a>
</figure>
</div>
</div>
4) CSS ΡΡΠΈΠ»ΠΈ
ΠΠ°ΠΌ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠΈΡΡ ΠΊ ΠΏΡΠΎΠ΅ΠΊΡΡ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠΉ ΡΠ°ΠΉΠ» ΡΡΠΈΠ»Π΅ΠΉ Π΄Π»Ρ ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΠΈ Π²Π°ΡΠΈΡ ΠΊΠ»Π°ΡΡΠΎΠ², ΠΏΡΠΎΠΏΠΈΡΠ°Π½Π½ΡΡ Π² HTML ΠΊΠΎΠ΄Π΅.
<head>
// ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠΈΡΡ Π½ΠΈΠΆΠ΅ ΡΠ°ΠΉΠ»Π° imagehover.min.css
<link rel="stylesheet" href="css/style.
css">
</head>
ΠΠ»Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ ΠΏΠΎΡΡΠ°Π²ΠΈΡΡ ΡΡΠΈ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ Π² ΡΡΠ΄, ΠΏΡΠΈΠΌΠ΅Π½ΠΈΠΌ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΡ flexbox, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΏΡΠΈΠ½ΡΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ Π±Π»ΠΎΠΊΠΈ Π² ΡΡΠ΄Ρ, Π½Π΅ Π΄Π°Π²Π°Ρ ΠΈΠΌ Π²ΡΡΠ°ΡΡ Π΄ΡΡΠ³ ΠΏΠΎΠ΄ Π΄ΡΡΠ³ΠΎΠΌ.
.row {
display: flex;
margin: 20px;
}
ΠΠΎΠ΄Π΅Π»ΠΈΠΌ ΡΡΠ΄ Π½Π° ΡΡΠΈ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΡΡ ΠΏΠΎ ΡΠΈΡΠΈΠ½Π΅ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ ΠΈ ΠΏΠΎΡΡΠ°Π²ΠΈΠΌ ΠΏΠΎ ΡΠ΅Π½ΡΡΡ, ΠΊΠΎΠ½ΡΠ΅Π½Ρ (ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ) Π²Π½ΡΡΡΠΈ Π±Π»ΠΎΠΊΠΎΠ².
.column {
flex: 33.33%;
padding: 5px;
text-align: center;
}
ΠΡΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ ΡΠΈΡΠΈΠ½Ρ ΡΠΊΡΠ°Π½Π°, ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ Π±ΡΠ΄ΡΡ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°ΡΡΡΡ, Π½Π΅ Π»ΠΎΠΌΠ°Ρ ΡΠΎΠ·Π΄Π°Π½Π½ΡΡ ΡΡΡΡΠΊΡΡΡΡ.
img {
width: 100%;
border: 1px solid #ddd; /* ΡΠ΅ΡΠ°Ρ ΡΠ°ΠΌΠΊΠ° */
}
ΠΡΠΈΠ±ΠΊΠ° Π² Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ Π½Π° ΡΠ°ΠΉΡΠ΅ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ Π² Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ ΡΠ°Π·Π΄Π΅Π»Π° Background Color, Π΅ΡΡΡ ΠΎΡΠΈΠ±ΠΊΠ°. ΠΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ Π±ΡΠ΄Π΅Ρ ΠΏΠΎΠΌΠ΅Π½ΡΡΡ ΡΠ²Π΅Ρ ΡΠΎΠ½Π° Ρ Π΄Π΅ΡΠΎΠ»ΡΠ½ΠΎΠ³ΠΎ Π½Π° Π²Π°Ρ, Π΄ΠΎΠ±Π°Π²ΠΈΠ² ΡΡΡΠΎΡΠΊΡ ΠΊΠΎΠ΄Π° ΠΊ ΡΠ΅Π³Ρ figcaption, Π²ΠΌΠ΅ΡΡΠΎ figure.
style="background-color: #ΠΊΠΎΠ΄_Π²Π°ΡΠ΅Π³ΠΎ_ΡΠ²Π΅ΡΠ°;
ΠΡΠ»ΠΈ Π²Ρ Π²ΡΠ΅ Π΅ΡΡ ΡΠ°Π·ΠΌΡΡΠ»ΡΠ΅ΡΠ΅ ΠΎ ΡΠΎΠ·Π΄Π°Π½ΠΈΠΈ ΠΏΠΎΡΡΡΠΎΠ»ΠΈΠΎ Ρ Π²Π°ΡΠΈΠΌΠΈ ΡΠ°Π±ΠΎΡΠ°ΠΌΠΈ ΠΏΠΎ Π²Π΅Π±-ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠ΅, ΠΎΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° Π²ΠΈΠ΄Π΅ΠΎ-ΠΊΡΡΡ Β«Π ΡΠΎΠ·Π΄Π°Π½ΠΈΠΈ Π»Π΅Π½Π΄ΠΈΠ½Π³Π° ΠΏΠΎΠ΄ ΠΊΠ»ΡΡΒ».
- Π‘ΠΎΠ·Π΄Π°Π½ΠΎ 05.04.2019 10:39:42
- ΠΠΈΡ Π°ΠΈΠ» Π ΡΡΠ°ΠΊΠΎΠ²
ΠΠΎΠΏΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»ΠΎΠ² ΡΠ°Π·ΡΠ΅ΡΠ°Π΅ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ Ρ ΡΠΊΠ°Π·Π°Π½ΠΈΠ΅ΠΌ Π°Π²ΡΠΎΡΠ° (ΠΠΈΡ Π°ΠΈΠ» Π ΡΡΠ°ΠΊΠΎΠ²) ΠΈ ΠΈΠ½Π΄Π΅ΠΊΡΠΈΡΡΠ΅ΠΌΠΎΠΉ ΠΏΡΡΠΌΠΎΠΉ ΡΡΡΠ»ΠΊΠΎΠΉ Π½Π° ΡΠ°ΠΉΡ (http://myrusakov.ru)!
ΠΠΎΠ±Π°Π²Π»ΡΠΉΡΠ΅ΡΡ ΠΊΠΎ ΠΌΠ½Π΅ Π² Π΄ΡΡΠ·ΡΡ ΠΠΠΎΠ½ΡΠ°ΠΊΡΠ΅: http://vk.com/myrusakov.
ΠΡΠ»ΠΈ ΠΡ Ρ
ΠΎΡΠΈΡΠ΅ Π΄Π°ΡΡ ΠΎΡΠ΅Π½ΠΊΡ ΠΌΠ½Π΅ ΠΈ ΠΌΠΎΠ΅ΠΉ ΡΠ°Π±ΠΎΡΠ΅, ΡΠΎ Π½Π°ΠΏΠΈΡΠΈΡΠ΅ Π΅Ρ Π² ΠΌΠΎΠ΅ΠΉ Π³ΡΡΠΏΠΏΠ΅: http://vk.com/rusakovmy.
ΠΡΠ»ΠΈ ΠΡ Π½Π΅ Ρ
ΠΎΡΠΈΡΠ΅ ΠΏΡΠΎΠΏΡΡΡΠΈΡΡ Π½ΠΎΠ²ΡΠ΅ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»Ρ Π½Π° ΡΠ°ΠΉΡΠ΅,
ΡΠΎ ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΠ΄ΠΏΠΈΡΠ°ΡΡΡΡ Π½Π° ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΡ: ΠΠΎΠ΄ΠΏΠΈΡΠ°ΡΡΡΡ Π½Π° ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΡ
ΠΡΠ»ΠΈ Ρ ΠΠ°Ρ ΠΎΡΡΠ°Π»ΠΈΡΡ ΠΊΠ°ΠΊΠΈΠ΅-Π»ΠΈΠ±ΠΎ Π²ΠΎΠΏΡΠΎΡΡ, Π»ΠΈΠ±ΠΎ Ρ ΠΠ°Ρ Π΅ΡΡΡ ΠΆΠ΅Π»Π°Π½ΠΈΠ΅ Π²ΡΡΠΊΠ°Π·Π°ΡΡΡΡ ΠΏΠΎ ΠΏΠΎΠ²ΠΎΠ΄Ρ ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠΈ, ΡΠΎ ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΎΡΡΠ°Π²ΠΈΡΡ ΡΠ²ΠΎΠΉ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΉ Π²Π½ΠΈΠ·Ρ ΡΡΡΠ°Π½ΠΈΡΡ.
ΠΠΎΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠΉΡΠ΅ ΡΡΡ ΡΡΠ°ΡΡΡ Π΄ΡΡΠ·ΡΡΠΌ:
ΠΡΠ»ΠΈ ΠΠ°ΠΌ ΠΏΠΎΠ½ΡΠ°Π²ΠΈΠ»ΡΡ ΡΠ°ΠΉΡ, ΡΠΎ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΡΠ΅ ΡΡΡΠ»ΠΊΡ Π½Π° Π½Π΅Π³ΠΎ (Ρ ΡΠ΅Π±Ρ Π½Π° ΡΠ°ΠΉΡΠ΅, Π½Π° ΡΠΎΡΡΠΌΠ΅, Π² ΠΊΠΎΠ½ΡΠ°ΠΊΡΠ΅):
-
ΠΠ½ΠΎΠΏΠΊΠ°:
<a href=Β»https://myrusakov.ruΒ» target=Β»_blankΒ»><img src=Β»https://myrusakov.ru/images/button.gifΒ» alt=Β»ΠΠ°ΠΊ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠ²ΠΎΠΉ ΡΠ°ΠΉΡΒ» /></a>ΠΠ½Π° Π²ΡΠ³Π»ΡΠ΄ΠΈΡ Π²ΠΎΡ ΡΠ°ΠΊ:
-
Π’Π΅ΠΊΡΡΠΎΠ²Π°Ρ ΡΡΡΠ»ΠΊΠ°:
<a href=Β»https://myrusakov.ruΒ» target=Β»_blankΒ»>ΠΠ°ΠΊ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠ²ΠΎΠΉ ΡΠ°ΠΉΡ</a>ΠΠ½Π° Π²ΡΠ³Π»ΡΠ΄ΠΈΡ Π²ΠΎΡ ΡΠ°ΠΊ: ΠΠ°ΠΊ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠ²ΠΎΠΉ ΡΠ°ΠΉΡ
- BB-ΠΊΠΎΠ΄ ΡΡΡΠ»ΠΊΠΈ Π΄Π»Ρ ΡΠΎΡΡΠΌΠΎΠ² (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΡΡΠ°Π²ΠΈΡΡ Π΅Ρ Π² ΠΏΠΎΠ΄ΠΏΠΈΡΠΈ):
[URL=Β»https://myrusakov.ruΒ»]ΠΠ°ΠΊ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠ²ΠΎΠΉ ΡΠ°ΠΉΡ[/URL]
ΠΡΠ°ΡΠΈΠ²ΡΠΉ ΡΡΡΠ΅ΠΊΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ
ΠΡΠ°ΡΠΈΠ²ΡΠΉ ΡΡΡΠ΅ΠΊΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ. Π₯ΠΎΠ²Π΅Ρ ΡΡΡΠ΅ΠΊΡΡ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ ΠΎΡΠΎΠ±ΡΠ°Π·ΠΈΡΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΡ
ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π½Π°Π²ΠΎΠ΄ΠΈΡ ΠΊΡΡΡΠΎΡ ΠΌΡΡΠΈ. ΠΡΠΎ ΡΠ΄ΠΎΠ±Π½ΠΎ ΠΈ ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°ΡΠ΅Π»ΡΠ½ΠΎ, ΡΠ°ΠΊΠΆΠ΅ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΠΎ ΡΠ°Π·Π³ΡΡΠ·ΠΈΡΡ ΡΠ°ΠΉΡ. Π‘Π΅Π³ΠΎΠ΄Π½Ρ ΠΌΡ Ρ
ΠΎΡΠΈΠΌ ΠΏΠΎΠΊΠ°Π·Π°ΡΡ ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°ΡΡ ΠΊΡΠ°ΡΠΈΠ²ΡΠΉ hover-ΡΡΡΠ΅ΠΊΡ Π΄Π»Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° ΠΌΡΡΠΈ Ρ ΠΏΠΎΠΌΠΎΡΠΈ CSS3. ΠΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° ΠΌΡΡΠΈ Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π±ΡΠ΄Π΅Ρ ΠΏΡΠΎΠΈΡΡ
ΠΎΠ΄ΠΈΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΠΈ ΠΏΠ»Π°Π²Π½ΠΎΠ΅ ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΠ΅ ΡΠ°ΠΌΠΊΠΈ Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΡ
Ρ ΡΠ΅ΠΊΡΡΠΎΠ²ΡΠΌΠΈ ΠΏΠΎΠ»ΡΠΌΠΈ.
ΠΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π³ΠΎΡΠΎΠ²ΡΠ΅ ΡΠ°Π±Π»ΠΎΠ½Ρ Ρ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΡΡΡΡ ΠΈ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΎΠΉ ΡΡΡΡΠΊΠΎΠ³ΠΎ ΡΠ·ΡΠΊΠ°, ΠΎΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° ΠΏΡΠ΅Π΄Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π² Π½Π°ΡΠ΅ΠΌ ΠΈΠ½ΡΠ΅ΡΠ½Π΅Ρ-ΠΌΠ°Π³Π°Π·ΠΈΠ½Π΅.
ΠΡΠ°ΡΠΈΠ²ΡΠΉ ΡΡΡΠ΅ΠΊΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ. ΠΡΠΎΡΠ΅ΡΡ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π½Π° ΡΠ°ΠΉΡΠ΅.
Π¨Π°Π³ 1. HTML
ΠΠΎΡΠ»Π΅ ΡΠΎΠ³ΠΎ ΠΊΠ°ΠΊ Π²Ρ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠΈΠ»ΠΈ ΡΡΠΈΠ»ΠΈ ΠΊ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΡ, Π½Π°ΠΌ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠΊΡ, Ρ Π½Π°Ρ Π±ΡΠ΄Π΅Ρ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π»ΠΈ Π΄Π»Ρ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΈ, ΡΠ°ΠΊΠΆΠ΅ ΠΌΡ Π΄ΠΎΠ±Π°Π²ΠΈΠ»ΠΈ Π±Π»ΠΎΠΊΠΈ Ρ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Π½ΡΠΌ ΠΊΠ»Π°ΡΡΠΎΠΌ:
<div> <div> <img src=Β»img/6.jpgΒ» alt=»»> </div> <!β ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ β> <div> <h*>Hover-ΡΡΡΠ΅ΠΊΡ</h*> <p>ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅ Π΄Π»Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° ΠΌΡΡΠΈ. </div> </div> |
ΠΠ»Ρ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΈ ΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π»ΠΈ ΡΠ΅ΡΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, Ρ Π½Π°Ρ Π±ΡΠ΄Π΅Ρ ΠΎΠ΄ΠΈΠ½ ΠΊΠ»Π°ΡΡ image, ΠΈ ΠΊΠ»Π°ΡΡ Π΄Π»Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ° content, Π΄Π²ΠΈΠ³Π°Π΅ΠΌΡΡ Π΄Π°Π»Π΅Π΅.
Π¨Π°Π³ 2. CSS
Π’Π΅ΠΏΠ΅ΡΡ Π·Π°ΠΉΠΌΠ΅ΠΌΡΡ ΡΡΠΈΠ»ΡΠΌΠΈ, Π΄Π»Ρ Π½Π°ΡΠ°Π»Π° ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΠΌ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ Π΄Π»Ρ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°, ΡΡΠΎΠ±Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π±ΡΠ»ΠΈ Π²ΡΡΡΡΠΎΠ΅Π½Ρ Π² ΡΡΠ΄ ΠΈ ΠΈΠΌΠ΅Π»ΠΈ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅.
.container { width: 80%; margin: 40px auto; display: grid; grid-gap: 20px; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); font-family: Β«Indie FlowerΒ», cursive; } |
ΠΠ»Ρ ΡΠ°ΠΌΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΠΌ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΠΏΡΠΎΡΡΠΎΠΉ ΠΊΠ»Π°ΡΡ:
.box img { width: 100%; height: 100%; border-radius: 10px; } |
ΠΠ°ΡΠ΅ΠΌ ΡΠ°ΠΌΡΠΉ Π²Π°ΠΆΠ½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΠΌ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ Π΄Π»Ρ Π½Π°ΡΠΈΡ Ρ ΠΎΠ²Π΅Ρ ΡΡΡΠ΅ΠΊΡΠΎΠ², Π° ΡΠ°ΠΊΠΆΠ΅ ΠΈΡ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎΠΌ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΈ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° ΠΌΡΡΠΈ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ:
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 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | . position: relative; } .box::after, .box::before { content: «»; position: absolute; opacity: 1; transition: all 0.4s ease-out; top: 1rem; bottom: 1rem; left: 1rem; right: 1rem; } .box::before { border-top: 2px solid white; border-bottom: 2px solid white; transform: scale(0, 1); } .box::after { border-left: 2px solid white; border-right: 2px solid white; transform: scale(1, 0); } .box:hover::before { background: rgba(0, 0, 0, 1); transform: scale(1.05, 1); } .box:hover::after { transform: scale(1, 1.05); } .box .content { position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 15px; color: white; opacity: 0; } . opacity: 1; } .box .content h*, .box .content p { padding: 10px; font-size: 1.3rem; } .box:hover img { opacity: 0.4; } |
Π’Π°ΠΊΠΎΠΉ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΠΏΡΠΎΡΡΠΎΠΉ ΠΏΡΠΈΠ΅ΠΌ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ Π²Π°ΠΌ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°ΡΡ ΠΊΡΠ°ΡΠΈΠ²ΡΠ΅ Ρ ΠΎΠ²Π΅Ρ ΡΡΡΠ΅ΠΊΡΡ Π΄Π»Ρ Π²Π°ΡΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ². ΠΠ°ΡΠ΅ΡΠΈΠ°Π» Π²Π·ΡΡ ΠΈΠ· Π·Π°ΡΡΠ±Π΅ΠΆΠ½ΠΎΠ³ΠΎ ΠΈΡΡΠΎΡΠ½ΠΈΠΊΠ° ΠΈ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ ΠΈΡΠΊΠ»ΡΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π² ΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΡΠ΅Π»ΡΠ½ΡΡ ΡΠ΅Π»ΡΡ .
ΠΠΎΡ ΠΈ Π²ΡΠ΅. ΠΠΎΡΠΎΠ²ΠΎ!
Π§ΠΈΡΠ°ΠΉΡΠ΅ ΡΠ°ΠΊΠΆΠ΅:
15 ΡΡΡΠ΅ΠΊΡΠΎΠ² Π΄Π»Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ (ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ ΡΠΎΠ»ΡΠΊΠΎ CSS3) | XoZblog
ΠΠ΄ΡΠ°Π²ΡΡΠ²ΡΠΉΡΠ΅, ΡΠ²Π°ΠΆΠ°Π΅ΠΌΡΠ΅ ΡΠΈΡΠ°ΡΠ΅Π»ΠΈ XoZbloga! Π ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅ ΠΏΠΎΠ΄Π³ΠΎΡΠΎΠ²Π»Π΅Π½Ρ 15 ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΡ
ΡΡΡΠ΅ΠΊΡΠΎΠ² Π΄Π»Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ Π½Π° ΡΠ²ΠΎΠ΅ΠΌ ΡΠ°ΠΉΡΠ΅. ΠΠ°ΠΆΠ΄ΡΠΉ ΡΡΡΠ΅ΠΊΡ ΡΠΎΡΡΠΎΠΈΡ ΠΈΠ· HTML ΡΠ°Π·ΠΌΠ΅ΡΠΊΠΈ ΠΈ ΡΡΠΈΠ»Π΅ΠΉ CSS. ΠΠ°ΠΌ ΠΎΡΡΠ°Π΅ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΡΠΊΠΎΠΏΠΈΡΠΎΠ²Π°ΡΡ ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π² ΡΠ²ΠΎΠΉ ΠΈΡΡ
ΠΎΠ΄Π½ΡΠΉ ΠΊΠΎΠ΄. Π§ΡΠΎΠ±Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ ΠΈΡ
Π² Π΄Π΅ΠΉΡΡΠ²ΠΈΠΈ ΠΏΠΎΡΠ΅ΡΠΈΡΠ΅ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ.
ΠΡΠΎΡΠΌΠΎΡΡ Π΄Π΅ΠΌΠΎ ΡΡΡΠ°Π½ΠΈΡΡ ΠΈ ΡΠΊΠ°ΡΠΈΠ²Π°Π½ΠΈΠ΅ ΠΈΡΡ ΠΎΠ΄Π½ΠΈΠΊΠΎΠ² Π½Π΅ Π΄ΠΎΡΡΡΠΏΠ½ΠΎ
Π£Π²Π°ΠΆΠ°Π΅ΠΌΡΠΉ ΡΠΈΡΠ°ΡΠ΅Π»Ρ, XoZblog ΡΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ ΠΈ ΡΠ°Π·Π²ΠΈΠ²Π°Π΅ΡΡΡ Π·Π° ΡΡΡΡ Π΄ΠΎΡ
ΠΎΠ΄ΠΎΠ² ΠΎΡ Π½Π΅Π½Π°Π²ΡΠ·ΡΠΈΠ²ΠΎΠΉ ΡΠ΅ΠΊΠ»Π°ΠΌΡ. ΠΡΠ»ΠΈ Π½Π΅ Π·Π°ΡΡΡΠ΄Π½ΠΈΡ, Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ ΡΡΠΎΡ ΡΠ°ΠΉΡ Π² ΠΈΡΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ AdBlock. Π‘ΠΏΠ°ΡΠΈΠ±ΠΎ Π·Π° ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΠ΅!
Π£ΡΡΠ°Π½ΠΎΠ²ΠΊΠ°
ΠΠ΅ΡΠ΅Π΄ ΡΠ΅ΠΌ, ΠΊΠ°ΠΊ ΠΏΡΠΈΡΡΡΠΏΠΈΡΡ ΠΊ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΡ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΉ, Π²ΠΎΡ ΠΊΡΡΠΎΡΠ΅ΠΊ CSS, ΠΊΠΎΡΠΎΡΡΠΉ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ Π±Π°Π·ΠΎΠ²ΡΠ΅ ΠΏΡΠ°Π²ΠΈΠ»Π° Π΄Π»Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ.
1 | * { |
border-box ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ Π²ΡΡΠΎΡΠ° ΠΈ ΡΠΈΡΠΈΠ½Π° Π±Π»ΠΎΠΊΠΎΠ² Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌΠΈ Π±ΡΠ΄ΡΡ Π²ΠΊΠ»ΡΡΠ°ΡΡ Π² ΡΠ΅Π±Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΏΠΎΠ»Π΅ΠΉ ΠΈ Π³ΡΠ°Π½ΠΈΡ, Π° ΠΊΠ»Π°ΡΡ pic ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΎΠ±ΡΠΈΠΌ Π΄Π»Ρ Π²ΡΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ. ΠΠ³ΡΠ°Π½ΠΈΡΠΈΠ²Π°Π΅Ρ Π²ΡΡΠΎΡΡ, ΡΠΈΡΠΈΠ½Ρ, Π·Π°Π΄Π°Π΅Ρ Π³ΡΠ°Π½ΠΈΡΡ ΠΈ ΡΠ΅Π½Ρ. Π ΡΡΠΎ ΡΠ°ΠΌΠΎΠ΅ Π²Π°ΠΆΠ½ΠΎΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ (Ρ.Π΅. ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ) ΡΡΠΎΠ³ΠΎ Π±Π»ΠΎΡΠ½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, Π±ΡΠ΄Π΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π²Π½ΡΡΡΠΈ, Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Ρ Π½Π΅ Π²ΡΠΉΠ΄Π΅Ρ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ overflow : hidden.
ΠΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈ ΠΏΠ°Π½ΠΎΡΠ°ΠΌΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅
ΠΠ°ΡΠ° ΠΏΠ΅ΡΠ²Π°Ρ Π³ΡΡΠΏΠΏΠ° ΡΡΡΠ΅ΠΊΡΠΎΠ² Π²ΠΊΠ»ΡΡΠ°Π΅Ρ Π² ΡΠ΅Π±Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ ΡΡΡΠΊΠΎΠ² Ρ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΈ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.
Π£Π²Π΅Π»ΠΈΡΠ΅Π½ΠΈΠ΅
ΠΠ»Ρ Π½Π°ΡΠ°Π»Π° ΠΌΡ ΡΠ΄Π΅Π»Π°Π΅ΠΌ ΡΠ°ΠΊ, ΡΡΠΎ ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π½Π°Π²ΠΎΠ΄ΠΈΡ ΠΊΡΡΡΠΎΡ Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΡ ΡΠ²Π΅Π»ΠΈΡΠΈΠ²Π°Π΅ΡΡΡ, ΠΎΡΡΠ°Π²Π°ΡΡΡ Π² ΠΏΡΠ΅Π΄Π΅Π»Π°Ρ ΡΠ²ΠΎΠΈΡ Π³ΡΠ°Π½ΠΈΡ. ΠΠΎΡ HTML:
1 | <div> |
ΠΠ°ΠΊ ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΠΈΠ΄Π΅ΡΡ Π·Π΄Π΅ΡΡ ΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ Π΄Π²Π° ΠΊΠ»Π°ΡΡΠ° pic ΠΈ grow. ΠΠ°Π·ΠΎΠ²ΡΠΉ pic ΠΊΠΎΡΠΎΡΡΠΉ Π·Π°Π΄Π°Π΅Ρ ΡΠ°Π·ΠΌΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈ Π³ΡΠ°Π½ΠΈΡΡ. Π’Π΅ΠΏΠ΅ΡΡ Π΄Π°Π²Π°ΠΉΡΠ΅ ΠΏΠΎΡΠΌΠΎΡΡΠΈΠΌ, CSS.
1 | /*GROW*/ |
Π‘Π°ΠΌΠΎ ΠΏΠΎ ΡΠ΅Π±Π΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ 400Ρ 400px, Π½ΠΎ ΠΌΡ Π΅Π³ΠΎ ΠΏΠΎΠ΄Π³ΠΎΠ½ΡΠ΅ΠΌ ΠΏΠΎΠ΄ ΡΠ°Π·ΠΌΠ΅ΡΡ Π±Π»ΠΎΠΊΠ° 300x300px ΠΈ ΡΠΊΠ°Π·ΡΠ²Π°Π΅ΠΌ transition ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ, ΠΎΠ·Π½Π°ΡΠ°ΡΡΠ΅Π΅ ΡΡΠΎ Π΄ΡΡΠ³ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° Π±ΡΠ΄ΡΡ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡΡΡ ΠΏΠ»Π°Π²Π½ΠΎ Π² ΡΠ΅ΡΠ΅Π½ΠΈΠΈ ΠΎΠ΄Π½ΠΎΠΉ ΡΠ΅ΠΊΡΠ½Π΄Ρ, ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎ ΠΏΡΠΎ transition. Π’Π°ΠΊ ΠΊΠ°ΠΊ Π½Π°ΠΌ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΡΠ²Π΅Π»ΠΈΡΠ΅Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠΎ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΎΠ½ΠΎ Π²ΠΎΠ·Π²ΡΠ°ΡΠ°Π΅ΡΡΡ ΠΊ ΠΈΡΡ ΠΎΠ΄Π½ΡΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΠΌ.
Π£ΠΌΠ΅Π½ΡΡΠ΅Π½ΠΈΠ΅
ΠΡΠΎ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΡΠΎΡΠΈΠ²ΠΎΠΏΠΎΠ»ΠΎΠΆΠ½ΡΠΉ ΡΡΡΠ΅ΠΊΡ. ΠΠ·Π½Π°ΡΠ°Π»ΡΠ½ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π² ΠΏΠΎΠ»Π½ΠΎΡΠ΅Π½Π½ΠΎΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠ΅, Π° ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΡΠΌΠ΅Π½ΡΡΠ°Π΅ΡΡΡ Π΄ΠΎ 300Ρ 300px. ΡΠ°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ ΡΠΎΠ·Π΄Π°Π΅ΡΡΡ ΡΡΡΠ΅ΠΊΡ ΡΠΆΠ°ΡΠΈΡ.
1 | <div> |
1 | /*SHRINK*/ |
ΠΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅
ΠΠ°Π½Π½ΡΠΉ ΡΡΡΠ΅ΠΊΡ Π½Π΅ ΠΌΠ°Π½ΠΈΠΏΡΠ»ΠΈΡΡΠ΅Ρ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΠΌΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, Π½ΠΎ Π·Π°ΡΠΎ ΠΌΠ΅Π½ΡΠ΅Ρ ΠΏΠΎΠ·ΠΈΡΠΈΡ Π² Π±Π»ΠΎΠΊΠ΅. ΠΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ° ΡΠΌΠ΅ΡΠ°Π΅ΡΡΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎ Π² ΡΡΠΎΡΠΎΠ½Ρ.
1 | <div> |
ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠΌΠ΅Π΅Ρ ΡΠ°Π·ΠΌΠ΅Ρ 600Ρ 300px.
1 | /*SIDEPAN*/ |
ΠΡΠ΅ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠΎΠ³ΠΎ ΠΆΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° transition ΠΌΡ ΠΏΠ»Π°Π²Π½ΠΎ ΠΌΠ΅Π½ΡΠ΅ΠΌ, Π½ΠΎ ΡΠΆΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ margin. ΠΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΡΠΌΠ΅ΡΠ°Π΅ΠΌ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ Π²Π»Π΅Π²ΠΎ Π½Π° 200px.
ΠΠ΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ΅ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅
ΠΠ½Π°Π»ΠΎΠ³ΠΈΡΠ΅Π½ ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠ΅ΠΌΡ ΠΈ Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π±ΡΠ»ΠΎ Π±Ρ Π½Π΅ ΠΏΡΠΈΠ²ΠΎΠ΄ΠΈΡΡ. ΠΠΎ Π²ΡΠ΅ ΡΠ°ΠΊΠΈ ΡΠ»Π΅Π΄ΡΡΡ ΠΏΡΠΎΠ΄Π΅ΠΌΠΎΠ½ΡΡΡΠΈΡΠΎΠ²Π°ΡΡ ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ ΡΠ°ΠΊΠΎΠΉ ΡΡΡΠ΅ΠΊΡ, ΡΠΎΡΠ½Π΅Π΅ Ρ ΠΊΠ°ΠΊΠΈΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ.
1 | <div> |
ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠΌΠ΅Π΅Ρ ΡΠ°Π·ΠΌΠ΅Ρ 300Ρ 600px.
1 | /*VERTPAN*/ |
Π’Π΅ΠΏΠ΅ΡΡ ΡΠΌΠ΅ΡΠ°Π΅ΠΌ Π²Π²Π΅ΡΡ Π½Π° 200px.
Π’ΡΠ°Π½ΡΡΠΎΡΠΌΠ°ΡΠΈΡ
ΠΠΎΠ²ΡΡΠ°Π΅ΠΌ ΡΠ»ΠΎΠΆΠ½ΠΎΡΡΡ ΡΠΎΠ·Π΄Π°Π²Π°Π΅ΠΌΡΡ ΡΡΡΠ΅ΠΊΡΠΎΠ². ΠΠ°ΡΠ½Π΅ΠΌ Ρ ΠΏΡΠΎΡΡΠΎΠ³ΠΎ Π½Π°ΠΊΠ»ΠΎΠ½Π°, Π° Π΄Π°Π»ΡΡΠ΅ Π±ΠΎΠ»ΡΡΠ΅. ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ Π±ΡΠ΄Π΅Ρ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ transform β Π΅ΡΠ΅ ΡΡΡΠ΅ΠΊΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ transform.
ΠΠ°ΠΊΠ»ΠΎΠ½
ΠΠ°ΠΌΠ΅ΡΠ°ΡΠ΅Π»ΡΠ½ΡΠΉ ΡΡΡΠ΅ΠΊΡ. ΠΠ΅Π±ΠΎΠ»ΡΡΠΎΠΉ ΠΏΠΎΠ²ΠΎΡΠΎΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ΅ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΊΡΡΡΠΎΡΠ° ΠΌΡΡΠΈ.
1 | <div> |
1 | /*TILT*/ |
ΠΡΠ΅ ΡΡΠΎ Π½ΡΠΆΠ½ΠΎ Π±ΡΠ»ΠΎ, ΡΠ°ΠΊ ΡΡΠΎ ΠΏΠΎΠ²Π΅ΡΠ½ΡΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π° Π΄Π΅ΡΡΡΡ Π³ΡΠ°Π΄ΡΡΠΎΠ². ΠΡΠΎΡΡΠΎ ΠΈ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΠΎ! ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ ΡΡΡΠ΅ΠΊΡ Π½Π°ΡΠ΅Π»Π΅Π½ Π½Π° ΡΠ°ΠΌ ΠΊΠ»Π°ΡΡ, Π° Π½Π΅ Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅.
ΠΠΎΠ²ΠΎΡΠΎΡ
ΠΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π½Π°Π²ΠΎΠ΄ΠΈΡ Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅Π΅ Π½Π°ΡΠΈΠ½Π°Π΅Ρ Π²ΡΠ°ΡΠ°ΡΡΡΡ. ΠΠΎΠΊΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π²ΡΠ°ΡΠ°Π΅ΡΡΡ, Π±Π»ΠΎΠΊ Π΄ΠΈΠ² ΡΡΠ°Π½ΡΡΠΎΡΠΌΠΈΡΡΠ΅ΡΡΡ Π² ΠΊΡΡΠ³. Π ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ΅ Π²ΡΡ ΠΎΠ΄ΠΈΡ ΡΡΠΏΠ΅Ρ ΡΡΡΠ΅ΠΊΡ.
1 | <div> |
1 | /*MORPH*/ |
Π‘ΡΡΡ Π·Π°ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ Π² ΡΠΎΠΌ, ΡΡΠΎ Π΄Π»Ρ ΠΊΠ»Π°ΡΡΡ morph Π²ΡΠ°ΡΠ°Π΅ΡΡΡ Π½Π° 360 Π³ΡΠ°Π΄ΡΡΠΎΠ² ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° ΠΌΡΡΠΈ. Π ΡΡΠΎ ΠΆΠ΅ Π²ΡΠ΅ΠΌΡ, border-radius ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ 50%, Π² ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ΅ ΡΠ΅Π³ΠΎ ΠΏΠΎΠ»ΡΡΠ°Π΅ΡΡΡ ΠΊΡΡΠ³.
Π€ΠΎΠΊΡΡΠΈΡΠΎΠ²ΠΊΠ°
ΠΠΎΡ Π΅ΡΠ΅ ΠΎΠ΄ΠΈΠ½ ΠΏΠΎΠ΄ΠΎΠ±Π½ΡΠΉ ΡΡΡΠ΅ΠΊΡ. ΠΠ΄Π½Π°ΠΊΠΎ Π²ΡΠ°ΡΠ΅Π½ΠΈΡ Π½Π΅ Π±ΡΠ΄Π΅Ρ ΠΏΡΠΎΡΡΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π·Π°ΠΊΡΡΠ³Π»ΠΈΠΌ ΠΈ ΡΠ²Π΅Π»ΠΈΡΠΈΠΌ ΡΠΎΠ»ΡΠΈΠ½Ρ Π³ΡΠ°Π½ΠΈΡΡ.
1 | <div> |
1 | /*FOCUS*/ |
ΠΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ°, ΡΠ²Π΅Π»ΠΈΡΠΈΠ²Π°Π΅ΠΌ ΡΠΎΠ»ΡΠΈΠ½Ρ Π³ΡΠ°Π½ΠΈΡΡ Ρ 10 Π΄ΠΎ 70px, ΠΈ ΠΊΠ°ΠΊ Π² ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ border-radius Π² 50%.
Π€ΠΈΠ»ΡΡΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ
ΠΠ° ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠΊ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠΈΠ»ΡΡΡΠΎΠ² ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ. Π ΠΎΡΠ»ΠΈΡΠΈΠ΅ ΠΎΡ ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΡΡ Π²ΡΡΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ², ΠΊΠ°ΠΆΠ΄ΡΠΉ ΠΈΠ· ΠΊΠΎΡΠΎΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΏΡΠ΅ΡΠΈΠΊΡΠΎΠ², ΡΡΠΎΠ±Ρ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΡΡ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΡΡ ΡΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΠΎΡΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°, Π² ΡΠΈΠ»ΡΡΠ°Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π±ΡΠ΄Π΅ΠΌ ΠΏΡΠ΅ΡΠΈΠΊΡ-WebKit (Π΄Π»Ρ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ² Chrome ΠΈ Safari), ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ Π΄ΡΡΠ³ΠΈΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ, ΠΊ ΡΠΎΠΆΠ°Π»Π΅Π½ΠΈΡ ΠΈΡ (ΡΠΈΠ»ΡΡΡΡ) Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ.
Π Π°Π·ΠΌΡΡΠΈΠ΅
ΠΠ΅ΡΠ²ΡΠΉ ΡΡΡΠ΅ΠΊΡ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΡ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΡΡΠΎ ΡΠ°Π·ΠΌΡΡΠΈΠ΅. ΠΠ΄Π΅ΡΡ Ρ ΠΊΠΎΠ΄ΠΎΠΌ Π²ΡΠ΅ Π΅ΡΠ΅ ΠΏΡΠΎΡΠ΅, ΠΎΠ΄Π½Π° ΡΡΡΠΎΠΊΠ°.
1 | <div> |
1 | /*BLUR*/ |
ΠΠ°ΠΊ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΠΈΠ΄Π΅ΡΡ, ΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ -webKit-filter, Ρ ΡΠ°Π·ΠΌΡΡΠΈΠ΅ΠΌ 5px.
Π§Π΅ΡΠ½ΠΎ-Π±Π΅Π»ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅
Π‘ ΠΏΠΎΠΌΠΎΡΡΡ ΡΡΠΎΠ³ΠΎ ΡΠΈΠ»ΡΡΡΠ°, Π΄ΠΎΠ±ΡΠ΅ΠΌΡΡ ΡΡΡΠ΅ΠΊΡΠ° ΡΠ΅ΡΠ½ΠΎ-Π±Π΅Π»ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.
1 | <div> |
1 | /*B&W*/ |
ΠΠ΄Π΅ΡΡ Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠ» ΠΎΡΡΠ΅Π½ΠΊΠΈ ΡΠ΅ΡΠΎΠ³ΠΎ (grayscale) ΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ 100%. ΠΡΠΎΡΠ΅Π½Ρ ΠΎΡΡΠ΅Π½ΠΊΠΎΠ² ΡΠ΅ΡΠΎΠ³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ½ΠΈΠ·ΠΈΡΡ.
ΠΡΠ²Π΅ΡΠ»Π΅Π½ΠΈΠ΅
Π’Π΅ΠΏΠ΅ΡΡ ΠΏΠΎΠΈΠ³ΡΠ°Π΅ΠΌ ΡΡΠΊΠΎΡΡΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. Π‘Π½Π°ΡΠ°Π»Π° Π·Π°ΡΠ΅ΠΌΠ½ΠΈΠΌ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ, Π° ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π²Π΅ΡΠ½Π΅ΠΌ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ ΡΡΠΊΠΎΡΡΠΈ.
1 | <div> |
1 | /*DARKEN*/ .brighten img { -webkit-filter: brightness(65%); -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; } .brighten img:hover { |
ΠΠ·Π½Π°ΡΠ°Π»ΡΠ½ΠΎ ΡΡΠΊΠΎΡΡΡ Π΄Π΅Π»Π°Π΅ΠΌ 65%, Π° ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΠΌ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ 145% Ρ.Π΅. ΡΡΡΠ΅ Π½Π° 45% ΠΎΡ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ.
Π‘Π΅ΠΏΠΈΡ
ΠΡΠ΅ ΠΎΠ΄ΠΈΠ½ ΡΠ΅ΡΡΠΎ ΡΡΡΠ΅ΠΊΡ) ΠΏΠ΅ΡΠ΅Π²ΠΎΠ΄ ΡΠ²Π΅ΡΠ½ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² ΡΠΎΠ½Π°Π»ΡΠ½ΠΎΡΡΡ ΡΠ΅ΠΏΠΈΡ.
1 | <div> |
1 | /*SEPIA*/ .sepia img { -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; } .sepia img:hover { |
ΠΠ½Π°ΡΠ΅Π½ΠΈΡ ΡΠΈΠ»ΡΡΡΠΎΠ² ΡΠ΅ΠΏΠΈΡ ΠΈ ΠΎΡΡΠ΅Π½ΠΊΠΈ ΡΠ΅ΡΠΎΠ³ΠΎ ΡΠΊΠ°Π·Π°Π½Ρ Π² ΠΏΡΠΎΡΠ΅Π½ΡΠ°Ρ , Π³Π΄Π΅ 100% ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΡΠΌ. ΠΡΠ»ΠΈ Π½Π΅ ΡΠΊΠ°Π·ΡΠ²Π°ΡΡ ΡΠΈΡΠ»ΠΎ ΡΠΎ 100% Π±ΡΠ΄ΡΡ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½Ρ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ.
ΠΠΎΠ½ΡΡΠ°ΡΡΠ½ΠΎΡΡΡ
Π’Π΅ΠΏΠ΅ΡΡ ΠΊΠΎΠ½ΡΡΠ°ΡΡΠ½ΠΎΡΡΡ. ΠΠ° ΠΌΠΎΠΉ Π²Π·Π³Π»ΡΠ΄ ΡΠ°ΠΌΡΠΉ ΠΊΠ»Π°ΡΡΠ½ΡΠΉ ΡΠΈΠ»ΡΡΡ, ΠΌΠΎΠΆΠ½ΠΎ ΡΠΏΡΠ°Π²Π»ΡΡΡ Π½Π°ΡΡΡΠ΅Π½Π½ΠΎΡΡΡΡ ΡΠ²Π΅ΡΠΎΠ² Π² ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΈ.
1 | <div> |
1 | /*CONTRAST*/ .contrast img { -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; } .contrast img:hover { |
Π‘ΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ Π½Π΅Π±ΠΎΠ»ΡΡΠ°Ρ ΡΠ°Π·Π½ΠΈΡΠ° Π² ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΡΡΠΎΠ³ΠΎ ΡΠΈΠ»ΡΡΡΠ°. ΠΠ±ΡΡΠ½ΡΠΌ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΊΠΎΠ½ΡΡΠ°ΡΡΠ½ΠΎΡΡΠΈ ΡΠ²Π»ΡΠ΅ΡΡΡ 100%. ΠΠΎΠ»ΡΡΠ΅ 100% ΡΠ²Π΅ΡΠ° Π½Π°ΡΡΡΠ΅Π½Π½Π΅ΠΉ, ΠΌΠ΅Π½ΡΡΠ΅ ΡΠ²Π΅ΡΠ° ΡΡΡΠΊΠ½Π΅ΡΡ.
ΠΡΡΠ΅Π½ΠΎΠΊ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
ΠΠ°Π½Π½ΡΠΉ ΡΠΈΠ»ΡΡΡ ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅Ρ ΡΠ²Π΅ΡΠ° ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ Π·Π°Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ³Π»Π°.
1 | <div> |
1 | /*HUE_ROTATE*/ .hue-rotate img { -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; } .hue-rotate img:hover { |
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΎΡΡΠ΅Π½ΠΊΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π·Π°Π΄Π°Π΅ΡΡΡ Π² Π³ΡΠ°Π΄ΡΡΠ°Ρ ΠΎΡ 0-360, Π³Π΄Π΅ 0 ΡΡΠΎ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅.
ΠΠ½Π²Π΅ΡΡΠΈΡ
ΠΡΠ΅ ΠΎΠ΄ΠΈΠ½ Webkit ΡΠΈΠ»ΡΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ β ΡΡΠΎ ΠΈΠ½Π²Π΅ΡΡΠΈΡ.
1 | <div> |
1 | /*INVERT*/ .invert img { -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; } .invert img:hover { |
ΠΠ°Π½Π½ΡΠΉ ΡΠΈΠ»ΡΡΡ ΠΈΠ½Π²Π΅ΡΡΠΈΡΡΠ΅Ρ ΡΠ²Π΅ΡΠ°. ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ Π·Π°Π΄Π°Π΅ΡΡΡ Π² % ΠΎΡ 0-100.
Π’Π°ΠΊΠΆΠ΅ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½ΠΈΡΡ ΡΠΈΠ»ΡΡΡΡ Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΏΡΠ°Π²ΠΈΠ»Π΅. ΠΠΎΠ»ΡΡΠ°Π΅ΡΡΡ Π±ΠΎΠ»Π΅Π΅ ΠΊΠΎΠΌΠΏΠ»Π΅ΠΊΡΠ½ΡΠΉ ΡΡΡΠ΅ΠΊΡ Π΄Π»Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ ΡΠ΄Π΅Π»Π°ΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ ΡΠ΅ΡΠ½ΠΎ-Π±Π΅Π»ΠΎΠΉ ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΊΠΎΠ½ΡΡΠ°ΡΡΠ½ΠΎΡΡΠΈ:
1 | img { |
ΠΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΡΡΡ
ΠΠ°Π²Π΅ΡΠ½ΠΎΠ΅ ΡΠ°ΠΌΡΠΉ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½Π½ΡΠΉ ΡΠΏΠΎΡΠΎΠ± ΠΌΠ°Π½ΠΈΠΏΡΠ»ΡΡΠΈΠΈ Ρ ΡΠ²Π΅ΡΠ°ΠΌΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΡΠ°ΠΊ ΡΡΠΎ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΡΡΠΈ. Π’Π΅ΠΏΠ΅ΡΡ ΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS3. ΠΡΠ½Π΅Ρ Π΅Π³ΠΎ Π² ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΠΉ ΡΠ°Π·Π΄Π΅Π» Π² ΡΠ²ΡΠ·ΠΈ Ρ ΠΎΠ΄Π½ΠΎΠΉ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΡΡΡΡ, ΠΎ Π½Π΅ΠΉ Π½ΠΈΠΆΠ΅.
1 | <div> |
1 | /*OPACITY*/ .opacity img { -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; } .opacity img:hover { |
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΡΡΠΈ Π² ΡΠΈΠ»ΡΡΡΠ΅ Π·Π°Π΄Π°Π΅ΡΡΡ ΠΎΠΏΡΡΡ ΡΠ°ΠΊΠΈ ΠΏΡΠΎΡΠ΅Π½ΡΠ°ΠΌΠΈ, Π³Π΄Π΅ 100% ΡΡΠΎ Π½Π΅ ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎ, Π° 0% ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎ. ΠΡΠΎΠ±Π΅Π½Π½ΠΎΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΡΡΠΈ Π·Π°ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ Π² ΡΠΎΠΌ, ΡΡΠΎ Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΊΠ°ΠΊ ΠΎΠ±ΡΡΠ½ΠΎΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ CSS, Π° Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ ΠΊΠ°ΠΊ ΡΠΈΠ»ΡΡΡ. Π‘ΠΎΠΎΡΠ²Π΅ΡΡΡΠ²Π΅Π½Π½ΠΎ ΠΈ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΡΠ°ΠΊΠΎΠΉ ΡΡΡΠ΅ΠΊΡ Π²ΠΎ Π²ΡΠ΅Ρ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ , Π΄Π°ΠΆΠ΅ Π² IE9+.
1 | img { |
ΠΡΠΈ ΡΠ°ΠΊΠΎΠΌ Π²Π°ΡΠΈΠ°Π½ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π±Π΅ΡΠ΅ΡΡΡ ΠΈΠ· ΠΈΠ½ΡΠ΅ΡΠ²Π°Π»Π° ΠΎΡ 1 Π΄ΠΎ 0.
ΠΡΠΎΡΠΌΠΎΡΡ Π΄Π΅ΠΌΠΎ ΡΡΡΠ°Π½ΠΈΡΡ ΠΈ ΡΠΊΠ°ΡΠΈΠ²Π°Π½ΠΈΠ΅ ΠΈΡΡ ΠΎΠ΄Π½ΠΈΠΊΠΎΠ² Π½Π΅ Π΄ΠΎΡΡΡΠΏΠ½ΠΎ
Π£Π²Π°ΠΆΠ°Π΅ΠΌΡΠΉ ΡΠΈΡΠ°ΡΠ΅Π»Ρ, XoZblog ΡΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ ΠΈ ΡΠ°Π·Π²ΠΈΠ²Π°Π΅ΡΡΡ Π·Π° ΡΡΡΡ Π΄ΠΎΡ ΠΎΠ΄ΠΎΠ² ΠΎΡ Π½Π΅Π½Π°Π²ΡΠ·ΡΠΈΠ²ΠΎΠΉ ΡΠ΅ΠΊΠ»Π°ΠΌΡ. ΠΡΠ»ΠΈ Π½Π΅ Π·Π°ΡΡΡΠ΄Π½ΠΈΡ, Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ ΡΡΠΎΡ ΡΠ°ΠΉΡ Π² ΠΈΡΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ AdBlock. Π‘ΠΏΠ°ΡΠΈΠ±ΠΎ Π·Π° ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΠ΅!
Π§ΡΠΎΠ±Ρ ΠΎΡΡΠ°Π²Π°ΡΡΡΡ Π² ΠΊΡΡΡΠ΅ ΡΠ²Π΅ΠΆΠΈΡ ΡΡΠ°ΡΠ΅ΠΉ ΠΈ ΡΡΠΎΠΊΠΎΠ² ΠΏΠΎΠ΄ΠΏΠΈΡΡΠ²Π°ΠΉΡΠ΅ΡΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΡ ΠΠΠΎΠ½ΡΠ°ΠΊΡΠ΅ ΠΈΠ»ΠΈ Π΄ΠΎΠ±Π°Π²Π»ΡΠΉΡΠ΅ Π² ΠΊΡΡΠ³ΠΈ Π½Π° Google+. ΠΠ΅ Π·Π°Π±ΡΠ²Π°ΠΉΡΠ΅ ΠΎΡΡΠ°Π²Π»ΡΡΡ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ, ΡΠΏΠ°ΡΠΈΠ±ΠΎ!
Π§ΡΠΎΠ±Ρ ΠΎΡΡΠ°Π²Π°ΡΡΡΡ Π² ΠΊΡΡΡΠ΅ ΡΠ²Π΅ΠΆΠΈΡ ΡΡΠ°ΡΠ΅ΠΉ ΠΈ ΡΡΠΎΠΊΠΎΠ² ΠΏΠΎΠ΄ΠΏΠΈΡΡΠ²Π°ΠΉΡΠ΅ΡΡ Π½Π° Π΅ΠΆΠ΅Π½Π΅Π΄Π΅Π»ΡΠ½ΡΡ ΠΏΠΎΡΡΠΎΠ²ΡΡ ΡΠ°ΡΡΡΠ»ΠΊΡ ΠΈΠ»ΠΈ Π½Π° Π½ΠΎΠ²ΠΎΡΡΠ½ΡΡ Π»Π΅Π½ΡΡ RSS. Π‘ΠΏΠ°ΡΠΈΠ±ΠΎ!
ΠΠΎΡΡΡΡΠ°ΡΡΠΈΠ΅ ΡΡΡΠ΅ΠΊΡΡ CSS3 ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ
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 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 | .ch-item { width: 100%; height: 100%; border-radius: 50%; position: relative; cursor: default; box-shadow: 0 1px 3px rgba(0,0,0,0.2); } .ch-thumb { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; position: absolute; box-shadow: inset 0 0 0 15px rgba(255,255,255, 0.5); -webkit-transform-origin: 95% 40%; -moz-transform-origin: 95% 40%; -o-transform-origin: 95% 40%; -ms-transform-origin: 95% 40%; transform-origin: 95% 40%; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .ch-thumb:after { content: ''; width: 8px; height: 8px; position: absolute; border-radius: 50%; top: 40%; left: 95%; margin: -4px 0 0 -4px; background: rgb(14,14,14); background: -moz-radial-gradient(center, ellipse cover, rgba(14,14,14,1) 0%, rgba(125,126,125,1) 100%); background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(14,14,14,1)), color-stop(100%,rgba(125,126,125,1))); background: -webkit-radial-gradient(center, ellipse cover, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%); background: -o-radial-gradient(center, ellipse cover, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%); background: -ms-radial-gradient(center, ellipse cover, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%); background: radial-gradient(ellipse at center, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%); box-shadow: 0 0 1px rgba(255,255,255,0.9); } .ch-info { position: absolute; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; background: #c9512e url(../images/noise.png); box-shadow: inset 0 0 0 5px rgba(0,0,0,0.05); } .ch-item:hover .ch-thumb { box-shadow: inset 0 0 0 15px rgba(255,255,255, 0.5), 0 1px 3px rgba(0,0,0,0.2); -webkit-transform: rotate(-110deg); -moz-transform: rotate(-110deg); -o-transform: rotate(-110deg); -ms-transform: rotate(-110deg); transform: rotate(-110deg); } |
ΠΏΠΎΡΡΡΡΠ°ΡΡΠΈΡ CSS-ΡΡΡΠ΅ΠΊΡΠΎΠ² ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠ΅ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π½Π° ΡΠ²ΠΎΠ΅ΠΌ Π²Π΅Π±-ΡΠ°ΠΉΡΠ΅
ΠΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΡΡΠ΅ΠΊΡΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ CSS, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π΄ΠΎΠ±ΠΈΡΡΡΡ ΠΏΡΠ΅ΠΊΡΠ°ΡΠ½ΡΡ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠΎΠ² Π½Π° Π»ΡΠ±ΠΎΠΌ Π²Π΅Π±-ΡΠ°ΠΉΡΠ΅ Π±Π΅Π· ΠΎΡΠΎΠ±ΡΡ ΡΡΠΈΠ»ΠΈΠΉ. ΠΡΡΠ΅ΠΊΡΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ, Π²Π΅ΡΠΎΡΡΠ½ΠΎ, ΡΠ²Π»ΡΡΡΡΡ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΡΠ°ΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ Π² Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅, Π² ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΌ ΠΈΠ·-Π·Π° ΠΏΡΠΎΡΡΠΎΡΡ ΠΈΡ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π² ΡΠΎΡΠ΅ΡΠ°Π½ΠΈΠΈ Ρ Π·Π½Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ»ΡΡΡΠ΅Π½Π½ΡΠΌ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΌ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠΎΠΌ.
Π‘Π»ΠΎΠΆΠ½Π°Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ Π±Π΅Π· ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ CSS ΠΌΠΎΠΆΠ΅Ρ ΠΏΠ΅ΡΠ΅ΡΠ°ΡΠΈΡΡ Π²Π΅Π±-ΡΠ°ΠΉΡ Π²Π½ΠΈΠ·, Π΅ΡΠ»ΠΈ Π²Ρ Π½Π΅ Π±ΡΠ΄Π΅ΡΠ΅ ΠΎΡΡΠΎΡΠΎΠΆΠ½Ρ, ΠΈ ΠΏΠΎΡΡΠΎΠΌΡ ΡΡΡΠ΅ΠΊΡΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ CSS ΠΏΡΠ΅Π΄ΠΏΠΎΡΡΠΈΡΠ΅Π»ΡΠ½Π΅Π΅ ΠΏΠΎΡΡΠΈ Π²ΠΎ Π²ΡΠ΅Ρ ΡΠ»ΡΡΠ°ΡΡ .ΠΠ½ΠΈ Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ Π±ΡΡΡΡΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ ΠΊ Π²Π°ΡΠ΅ΠΌΡ ΡΠ°ΠΉΡΡ, Π½ΠΎ ΡΠ°ΠΊΠΆΠ΅ Π±ΡΡΡΡΠΎ Π·Π°Π³ΡΡΠΆΠ°ΡΡΡΡ ΠΈ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΠ΅ Π½Π°ΠΊΠ»Π°Π΄Π½ΡΠ΅ ΡΠ°ΡΡ ΠΎΠ΄Ρ Π½Π° Π²Π°ΡΠΈ ΡΡΡΠ°Π½ΠΈΡΡ.
Π ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅, ΡΠΎΠ·Π΄Π°Π½Π½ΠΎΠΉ Π½Π°ΡΠΈΠΌΠΈ ΡΠΎΡΡΡΠ΄Π½ΠΈΠΊΠ°ΠΌΠΈ wpDataTables (ΠΏΠ»Π°Π³ΠΈΠ½ β1 Π΄Π»Ρ ΡΠ°Π±Π»ΠΈΡ WordPress), ΠΌΡ ΡΠΎΠ±ΡΠ°Π»ΠΈ ΡΠΏΠΈΡΠΎΠΊ CSS-ΡΡΡΠ΅ΠΊΡΠΎΠ² Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠ΅ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π½Π° ΡΠ²ΠΎΠ΅ΠΌ ΡΠ°ΠΉΡΠ΅, Π° ΡΠ°ΠΊΠΆΠ΅ Π½Π΅ΠΊΠΎΡΠΎΡΡΡ Π²Π°ΠΆΠ½ΡΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ ΠΏΠΎ ΡΡΠΎΠΉ ΡΠ΅ΠΌΠ΅.
Π ΠΎΠ»Ρ CSS-ΡΡΡΠ΅ΠΊΡΠΎΠ² ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
ΠΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΠΎΡΡΡ β Π²Π°ΠΆΠ½Π°Ρ ΡΠ°ΡΡΡ Π»ΡΠ±ΠΎΠ³ΠΎ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎΠ³ΠΎ Π²Π΅Π±-ΡΠ°ΠΉΡΠ°, ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΠΎΠ½Π° ΡΠ΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ ΠΈ ΠΏΠΎΠ±ΡΠΆΠ΄Π°Π΅Ρ ΠΈΡ ΠΏΡΠΎΠ²ΠΎΠ΄ΠΈΡΡ Π±ΠΎΠ»ΡΡΠ΅ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ Π·Π° ΠΏΡΠΎΡΠΌΠΎΡΡΠΎΠΌ.ΠΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π½Π° Π²Π΅Π±-ΡΠ°ΠΉΡ ΡΠ°ΠΊΠΆΠ΅ Π΄Π΅Π»Π°Π΅Ρ ΡΠ°Π±ΠΎΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π±ΠΎΠ»Π΅Π΅ ΠΈΠ½ΡΡΠΈΡΠΈΠ²Π½ΠΎ ΠΏΠΎΠ½ΡΡΠ½ΠΎΠΉ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΎΠ½ΠΈ Π½Π°ΠΌΠ΅ΠΊΠ°ΡΡ Π½Π° ΡΠΎ, ΡΡΠΎ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΌΠΎΠΆΠ΅Ρ Π΄Π΅Π»Π°ΡΡ.
ΠΡΠ½ΠΎΠ²Π½Π°Ρ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ° Π·Π°ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ Π² ΡΠΎΠΌ, ΡΡΠΎ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΠΌΠΎΠΆΠ΅Ρ Π·Π°ΠΌΠ΅Π΄Π»ΠΈΡΡ ΡΠ°Π±ΠΎΡΡ Π²Π΅Π±-ΡΠ°ΠΉΡΠ°, Π΅ΡΠ»ΠΈ Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄ΠΎΠ»ΠΆΠ½ΡΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ. ΠΠΌΠ΅Π½Π½ΠΎ Π·Π΄Π΅ΡΡ ΠΏΠΎΡΠ²Π»ΡΡΡΡΡ ΡΡΡΠ΅ΠΊΡΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ CSS ΠΈ ΡΠΏΠ°ΡΠ°ΡΡ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅.
ΠΡΡΠ΅ΠΊΡΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π΄Π°ΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΠΎΡΡΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ Π½Π° Π²Π΅Π±-ΡΠ°ΠΉΡΠ΅, Π½Π΅ Π·Π°ΠΌΠ΅Π΄Π»ΡΡ Π΅Π³ΠΎ. ΠΡΡΠ΅ΠΊΡΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΡΠ»Π΅Π³Π°Π½ΡΠ½Ρ, ΠΎΠ½ΠΈ Π½Π΅ Π·Π°Π³ΡΠΎΠΌΠΎΠΆΠ΄Π°ΡΡ Π΄ΠΈΠ·Π°ΠΉΠ½, Π° Π²Π΅Π±-ΡΠ°ΠΉΡΡ ΡΠ°Π±ΠΎΡΠ°ΡΡ ΠΏΠ»Π°Π²Π½ΠΎ, Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ ΡΠΎΠ³ΠΎ, ΡΠΊΠΎΠ»ΡΠΊΠΎ Π²Ρ Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΡΠ΅.
ΠΡ ΡΠΎΠ±ΡΠ°Π»ΠΈ Π»ΡΡΡΠΈΠ΅ CSS-ΡΡΡΠ΅ΠΊΡΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈ ΠΎΠΏΠΈΡΠ°Π»ΠΈ ΠΈΡ Π² Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ ΡΠ»ΠΎΠ²Π°Ρ , ΡΡΠΎΠ±Ρ ΠΏΠΎΠΌΠΎΡΡ Π²Π°ΠΌ Π²ΡΠ±ΡΠ°ΡΡ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΡΡΠΈΠΉ Π΄Π»Ρ Π²Π°ΡΠ΅Π³ΠΎ ΡΠ»ΡΡΠ°Ρ. ΠΡΡΡ Π΅ΡΠ΅ ΠΌΠ½ΠΎΠ³ΠΎ Π²ΡΠ΅Π³ΠΎ, ΡΡΠΎ Π½ΡΠΆΠ½ΠΎ ΠΈΡΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΡ, Π½ΠΎ ΡΠΏΠΈΡΠΎΠΊ Π½ΠΈΠΆΠ΅ β ΠΎΡΠ»ΠΈΡΠ½Π°Ρ ΠΎΡΠΏΡΠ°Π²Π½Π°Ρ ΡΠΎΡΠΊΠ°.
CSS ΠΡΡΠ΅ΠΊΡΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΠ½ΠΈΠΌΠ°ΡΠΈΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡΠΡ Π½Π°ΡΠ½Π΅ΠΌ ΡΠΏΠΈΡΠΎΠΊ ΡΡΡΠ΅ΠΊΡΠΎΠ² Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ CSS Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΠΊΠΎΡΠΎΡΠ°Ρ ΡΠΎΠ·Π΄Π°Π΅Ρ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΠΊΠΎΠ½ΡΡΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ°.ΠΡΡΠ΅ΠΊΡ Π±ΡΠ» ΡΠ°Π·ΡΠ°Π±ΠΎΡΠ°Π½ ΠΡ Π°ΡΡΠΈΠΊΠΎΠΌ ΠΡ Π°ΡΠ°Π΄Π°Π²Π°ΡΠΎ, ΡΡΠΎΠ±Ρ Π²ΡΠ΄Π΅Π»ΠΈΡΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ Ρ ΠΏΡΠΈΠ·ΡΠ²ΠΎΠΌ ΠΊ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ.
ΠΠ½ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΠΏΠ»Π°Π²Π½ΠΎ, Π° ΠΊΠΎΠ΄ ΠΎΡΠ΅Π½Ρ ΡΠΈΡΡΡΠΉ, ΡΡΠΎ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°Π΅Ρ Π±ΡΡΡΡΡΡ Π·Π°Π³ΡΡΠ·ΠΊΡ ΠΈ Π»Π΅Π³ΠΊΡΡ Π½Π°ΡΡΡΠΎΠΉΠΊΡ.
ΠΠΎΠ»Π»Π΅ΠΊΡΠΈΡ ΡΡΡΠ΅ΠΊΡΠΎΠ² ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠΈΠΡΠ²ΠΈΠ΄ ΠΠΎΠ½Π½Π΅Ρ ΡΠΎΠ±ΡΠ°Π» ΡΠ΅Π»ΡΡ ΠΊΠΎΠ»Π»Π΅ΠΊΡΠΈΡ CSS-ΡΡΡΠ΅ΠΊΡΠΎΠ² Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅. ΠΠ΅Π³ΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΡΡΠ΅ΠΊΡΠΎΠ² Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΌΠ΅ΡΡΠ΅ ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΈΡ ΠΏΠΎ ΠΌΠ΅ΡΠ΅ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ. ΠΡΡΠ΅ΠΊΡΡ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΠΎΡΠ½ΠΎΠ²Π°Π½Ρ Π½Π° CSS3 ΠΈ HTML5.
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π½Π°ΡΡΡΠΎΠΈΡΡ ΡΡΡΠ΅ΠΊΡΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ Π²Π°ΡΠ΅Π³ΠΎ Π²Π΅Π±-ΡΠ°ΠΉΡΠ°, ΡΡΠΎΠ±Ρ ΠΎΠ½ΠΈ Π³Π°ΡΠΌΠΎΠ½ΠΈΡΠ½ΠΎ ΡΠΎΡΠ΅ΡΠ°Π»ΠΈΡΡ Π΄ΡΡΠ³ Ρ Π΄ΡΡΠ³ΠΎΠΌ. ΠΡΡΠ΅ΠΊΡΡ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΡΠ΅ΠΌΡ ΠΈ ΠΎΡΠ»ΠΈΡΠ½ΠΎ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ . ΠΡΠ²ΠΈΠ΄ ΠΠΎΠ½Π½Π΅Ρ ΡΠ΄Π΅Π»Π°Π» ΠΊΠΎΠ΄ ΡΡΡΠ΅ΠΊΡΠΎΠ² Π΄ΠΎΡΡΡΠΏΠ½ΡΠΌ Π΄Π»Ρ Π½Π΅ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²Π΅Π½Π½ΠΎΠ³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ.
3D-ΡΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Ρ ΡΡΠ΅ΡΠΎΠΌ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ (ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΡ)ΠΠΎΡΠ»Ρ ΠΠ΅Π»ΡΠ³Π°Π΄ΠΎ ΠΏΡΠΈΠ΄ΡΠΌΠ°Π» ΡΡΠΎΡ ΡΡΡΠ΅ΠΊΡ Π·Π°Π²ΠΈΡΠ°Π½ΠΈΡ Ρ ΡΠΊΠ°Π·Π°Π½ΠΈΠ΅ΠΌ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠΉ Π½Π°Π²Π΅ΡΠ½ΡΠΊΠ° Π²ΡΡΡΠ΅ΡΠ°Π΅ΡΡΡ Π½Π΅ΡΠ°ΡΡΠΎ. ΠΡΠΎ ΡΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ ΠΏΡΠ΅Π΄ΠΏΠΎΡΠΈΡΠ°ΡΡ Π΄Π»Ρ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΈ ΠΏΡΠΎΠ΄ΡΠΊΡΠΎΠ² ΠΈΠ»ΠΈ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ².
Π’Π°ΠΊΠΈΠ΅ ΡΡΡΠ΅ΠΊΡΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΎΡΠ»ΠΈΡΠ½ΠΎ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΡΡ Π΄Π»Ρ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΠΉ Π³Π°Π»Π΅ΡΠ΅ΠΉ. Π‘Π°ΠΌ ΠΠΎΡΠ»Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π» ΡΠ°Π±Π»ΠΎΠ½ Π³Π°Π»Π΅ΡΠ΅ΠΈ, ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Ρ, ΠΊΠ°ΠΊ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π΅Π³ΠΎ ΡΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ.
CSS-ΡΡΡΠ΅ΠΊΡΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡNaoya Π²ΠΊΠ»ΡΡΠΈΠ» ΠΏΡΡΠ½Π°Π΄ΡΠ°ΡΡ CSS-ΡΡΡΠ΅ΠΊΡΠΎΠ² Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² ΠΎΠ΄ΠΈΠ½ Π½Π°Π±ΠΎΡ. ΠΠ°ΠΆΠ΄ΡΠΉ ΡΡΡΠ΅ΠΊΡ ΠΈΠΌΠ΅Π΅Ρ ΡΠ°Π·Π½ΠΎΠ΅ ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅, ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΡ Π²Π°ΠΌ Π²ΡΠ΅ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΌΠ΅ΡΡΠ΅.
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΡΠ΄Π΅Π»ΠΈΡΡ ΠΊΠ°ΠΊ ΡΠ΅ΠΊΡΡΠΎΠ²ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΡΠ°ΠΊ ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΡΡΠΎ Π΄Π΅Π»Π°Π΅Ρ ΡΡΠΎΡ Π½Π°Π±ΠΎΡ ΠΈΠ΄Π΅Π°Π»ΡΠ½ΡΠΌ Π΄Π»Ρ Π²Π΅Π±-ΡΠ°ΠΉΡΠΎΠ² Ρ ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΡΠΌΠΈ ΠΈΠ»ΠΈ Π»ΡΠ±ΠΎΠ³ΠΎ ΠΏΡΠΎΠ΅ΠΊΡΠ°, ΠΎΡΠ½ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ Π½Π° Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΡΡ ΡΡΡΠ΅ΠΊΡΠ°Ρ .
World Places (CSS 3D Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠ΅)ΠΡΠΎΡ ΡΡΡΠ΅ΠΊΡ ΠΎΡΠ½ΠΎΠ²Π°Π½ Π½Π° ΠΏΠ΅ΡΠ΅Π²ΠΎΡΠ°ΡΠΈΠ²Π°Π½ΠΈΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π½Π°Π²ΠΎΠ΄ΠΈΡ Π½Π° Π½Π΅Π³ΠΎ ΠΊΡΡΡΠΎΡ. ΠΡΠΎΡ ΠΏΡΠΎΡΠ΅ΡΡ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½ ΠΈ ΠΏΠΎΡΡΠΎΡΠ½Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π² ΠΏΡΠ΅Π·Π΅Π½ΡΠ°ΡΠΈΡΡ ΠΈ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΎΠ½Π½ΡΡ Π²ΠΈΠ΄Π΅ΠΎΡΠΎΠ»ΠΈΠΊΠ°Ρ . ΠΡΠΎΡΡΠΎΡΠ° ΡΡΠΎΠ³ΠΎ ΡΡΡΠ΅ΠΊΡΠ° Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π΄Π΅Π»Π°Π΅Ρ Π΅Π³ΠΎ ΡΠ°ΠΊΠΈΠΌ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΠΌ ΡΡΠ΅Π΄ΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ.
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π»ΠΈΠ±ΠΎ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°ΡΡ ΠΊΠ°ΠΆΠ΄ΡΡ ΡΠ°ΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, Π»ΠΈΠ±ΠΎ ΡΠΎΡ ΡΠ°Π½ΠΈΡΡ ΠΏΡΠΎΡΡΠΎΡΡ Π² ΠΎΠ΄Π½ΠΎΠΌ Π±Π»ΠΎΠΊΠ΅. ΠΠ΅ΡΠ΅Ρ ΠΎΠ΄ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ ΠΏΠ»Π°Π²Π½ΠΎ, ΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΠΌ ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π΅ΡΡΡ Π±ΠΎΠ»ΡΡΠ΅ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΎΠ²Π°ΡΡ Ρ Π²Π΅Π±-ΡΠ°ΠΉΡΠΎΠΌ.
ΠΡΠΎΡΡΠΎΠΉ ΡΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΏΠ»ΠΈΡΠΊΠΈΠΡΠΈΡ ΠΠΈΡΠΈ (Chris Deacy) Π·Π°Π΄ΡΠΌΠ°Π»ΡΡ Π½Π°Π΄ ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅ΠΌ CSS-ΡΡΡΠ΅ΠΊΡΠΎΠ² Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π±ΡΠ»ΠΎ Π±Ρ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°ΡΡ. ΠΡΠ»ΠΈ Π²Ρ ΡΡΡΠ°Π»ΠΈ ΠΎΡ Π΄ΡΡΠ³ΠΈΡ ΡΠ΅ΡΠ΅Π½ΠΈΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΉΡΠΈ Π½Π° ΡΡΠ½ΠΊΠ΅, ΠΈ Ρ ΠΎΡΠΈΡΠ΅ ΠΏΠΎΠΏΡΠΎΠ±ΠΎΠ²Π°ΡΡ ΡΡΠΎ-ΡΠΎ, ΡΡΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°ΡΡ Π»ΡΠ±ΠΎΠΉ ΠΊΠΎΠ½ΡΠ΅Π½Ρ, ΡΡΠΎΡ ΡΡΡΠ΅ΠΊΡ Π΄Π»Ρ Π²Π°Ρ.
ΠΡΡΠ΅ΠΊΡΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° Π½Π° ΠΊΡΠ΅Π°ΡΠΈΠ²Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ #ΠΠ΅Π½Ρ β ΠΎΠ΄Π½Π° ΠΈΠ· ΡΠ°ΠΌΡΡ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΡ ΡΠ°ΡΡΠ΅ΠΉ Π²Π΅Π±-ΡΠ°ΠΉΡΠ°, ΠΏΠΎΡΡΠΎΠΌΡ ΠΎΠ½ΠΎ Π·Π°ΡΠ»ΡΠΆΠΈΠ²Π°Π΅Ρ ΠΏΡΠΈΡΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ Π²Π½ΠΈΠΌΠ°Π½ΠΈΡ ΡΠΎ ΡΡΠΎΡΠΎΠ½Ρ Π²Π΅Π±-ΠΌΠ°ΡΡΠ΅ΡΠΎΠ².Π§ΡΠΎΠ±Ρ ΡΠ΄Π΅Π»Π°ΡΡ Π΅Π³ΠΎ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎ ΠΏΡΠΎΡΡΡΠΌ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΡΡΠ΅ΠΊΡΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ CSS, ΠΏΠΎΠ΄ΠΎΠ±Π½ΡΠ΅ ΡΡΠΎΠΌΡ, ΡΠΎΠ·Π΄Π°Π½Π½ΠΎΠΌΡ ΠΠ±Π΄Π΅Π»Π΅ΠΌ Π ΠΌΠ°Π½ΠΎΠΌ. ΠΡΡΠ΅ΠΊΡ ΠΎΡΠ½ΠΎΠ²Π°Π½ Π½Π° CSS3 ΠΈ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΡΠΎ Π²ΡΠ΅ΠΌΠΈ ΡΠΈΠΏΠ°ΠΌΠΈ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠΎΠ².
ΠΡΡΠ΅ΠΊΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈΠΡΠΎΡ ΡΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ CSS Ρ ΠΎΡΠΎΡΠΎ ΡΠΎΡΠ΅ΡΠ°Π΅ΡΡΡ Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠΌΠΈ ΡΠΈΠΏΠ°ΠΌΠΈ ΡΡΡΠ°Π½ΠΈΡ ΠΈ Π²Π΅Π±-ΡΠ°ΠΉΡΠΎΠ². ΠΡΠ»ΠΈ Π½Π° Π²Π°ΡΠ΅ΠΌ ΡΠ°ΠΉΡΠ΅ Π΅ΡΡΡ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΠΉ ΡΠ°Π·Π΄Π΅Π», Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½Π° ββΠ²Π°ΡΠ° ΠΊΠΎΠΌΠ°Π½Π΄Π°, Π²Ρ ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎ Π·Π°Ρ ΠΎΡΠΈΡΠ΅ ΠΏΠΎΠΏΡΠΎΠ±ΠΎΠ²Π°ΡΡ ΡΡΠΎΡ ΡΡΡΠ΅ΠΊΡ.
Π’Π°ΠΊ ΠΆΠ΅ ΠΏΡΠ΅ΠΊΡΠ°ΡΠ½ΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΡΠΎ ΡΠ»ΡΠΆΠ΅Π±Π½ΡΠΌΠΈ ΡΠ΅ΠΊΡΠΈΡΠΌΠΈ, ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΏΡΠΈΠ΄Π°Π΅ΡΡΡ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈΠΉ ΡΡΡΠ΅ΠΊΡ.ΠΡΠΈ Π₯ΠΎΠ±ΡΠ΅Π³ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π» ΡΠΎΠ»ΡΠΊΠΎ HTML5 ΠΈ CSS3 Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΡΠΎΠ³ΠΎ, ΡΠ°ΠΊ ΡΡΠΎ Π½Π΅ Π±Π΅ΡΠΏΠΎΠΊΠΎΠΉΡΠ΅ΡΡ ΠΎ Π±ΡΡΡΡΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΠΈ.
ΠΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈΠΠΈΠΊΠΎΠ»Π° ΠΡΠ΅ΡΡΠΈ ΠΈΠΌΠ΅Π» Π² Π²ΠΈΠ΄Ρ ΠΊΠΎΠ΅-ΡΡΠΎ ΠΎΡΠ»ΠΈΡΠ½ΠΎΠ΅, ΡΠΎΠ·Π΄Π°Π²Π°Ρ ΡΡΠΎΡ ΡΡΡΠ΅ΠΊΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ. ΠΠ½ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΈΡ Π΄Π»Ρ ΡΡΠΈΠ»Π°Π½ΡΠ΅ΡΠΎΠ² ΠΈΠ»ΠΈ Π΄ΡΡΠ³ΠΈΡ Π»ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠΎΡΡΠ΅Π΄ΠΎΡΠΎΡΠ΅Π½Ρ Π½Π° Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΈ ΡΠ²ΠΎΠ΅ΠΉ ΠΏΡΠΎΡΠ»ΠΎΠΉ ΡΠ°Π±ΠΎΡΡ.
ΠΡΠΎΡ ΡΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ CSS ΠΎΡΠ»ΠΈΡΠ½ΠΎ ΠΏΠΎΠ΄ΠΎΠΉΠ΄Π΅Ρ Π΄Π»Ρ ΠΏΡΠΈΠ²Π΅ΡΡΡΠ²Π΅Π½Π½ΠΎΠ³ΠΎ ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΡ Π½Π° ΠΏΠ΅ΡΠ²ΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅ ΠΈΠ»ΠΈ Π΄Π»Ρ ΡΠ°Π·Π΄Π΅Π»Π° Π²Ρ ΠΎΠ΄Π° Π² ΡΠΈΡΡΠ΅ΠΌΡ, ΡΡΠΎΠ±Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΊ Π½Π΅ΠΌΡ ΠΈΠ½Π΄ΠΈΠ²ΠΈΠ΄ΡΠ°Π»ΡΠ½ΠΎΡΡΡ.ΠΠ»Ρ ΠΈΠ½ΡΠ΅ΡΠ½Π΅Ρ-ΠΌΠ°Π³Π°Π·ΠΈΠ½ΠΎΠ² ΡΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠ΄ΡΠ΅ΡΠΊΠ½ΡΡΡ ΠΏΡΠ΅Π΄Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠ»ΠΈ ΠΏΠ»Π°Π½ Ρ ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½Π½ΡΠΌ ΠΏΠ΅ΡΠΈΠΎΠ΄ΠΎΠΌ.
Π‘Π²Π΅ΡΡΡΠΈΠΉΡΡ Π·Π½Π°ΡΠΎΠΊ, ΡΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡGlowing Icon β ΠΏΡΠΎΡΡΠΎΠΉ ΡΡΡΠ΅ΠΊΡ Π·Π°Π²ΠΈΡΠ°Π½ΠΈΡ, ΡΠΎΠ·Π΄Π°Π½Π½ΡΠΉ ΠΠΈΠ΅Π³ΠΎ ΠΠΎΠΏΠ΅ΡΠΎΠΌ. ΠΡΡΠ΅ΠΊΡ Π»ΡΡΡΠ΅ Π²ΡΠ΅Π³ΠΎ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΈΡ Π΄Π»Ρ Π²Π΅Π±-ΡΠ°ΠΉΡΠΎΠ² Ρ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΠΈΡΡΠΈΡΠ½ΡΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ ΠΈ ΡΠ΅ΠΌΠ½ΠΎΠΉ ΡΠ²Π΅ΡΠΎΠ²ΠΎΠΉ ΠΏΠ°Π»ΠΈΡΡΠΎΠΉ. ΠΡΠΈ ΡΡΡΠ΅ΠΊΡΡ ΠΌΠΎΠ³ΡΡ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠΉ ΡΡΠΎΠ²Π΅Π½Ρ ΠΈΠ½Π΄ΠΈΠ²ΠΈΠ΄ΡΠ°Π»ΡΠ½ΠΎΡΡΠΈ Π²Π°ΡΠ΅ΠΌΡ ΡΠ°ΠΉΡΡ, Π½Π΅ Π½Π°ΡΡΡΠ°Ρ ΠΏΡΠΎΡΡΠΎΡΡ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ° ΠΈΠ»ΠΈ Π²ΡΠ΅ΠΌΡ Π·Π°Π³ΡΡΠ·ΠΊΠΈ.
ΠΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Π·Π½Π°ΡΠΊΠΎΠ² ΡΠΎΡΠΈΠ°Π»ΡΠ½ΡΡ ΡΠ΅ΡΠ΅ΠΉΠ ΠΎΠ½Π»Π°ΠΉΠ½-ΠΌΠ°ΡΠΊΠ΅ΡΠΈΠ½Π³Π΅ ΠΏΡΠΎΠ΄Π²ΠΈΠΆΠ΅Π½ΠΈΠ΅ Π²Π°ΡΠ΅Π³ΠΎ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ° Π² ΡΠΎΡΠΈΠ°Π»ΡΠ½ΡΡ ΡΠ΅ΡΡΡ ΡΠ²Π»ΡΠ΅ΡΡΡ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠΉ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΡΡΡΡ.Π’Π΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅, Π»ΡΠ΄ΠΈ ΡΠΊΠ»ΠΎΠ½Π½Ρ ΠΈΠ³Π½ΠΎΡΠΈΡΠΎΠ²Π°ΡΡ ΡΠΈΠΌΠ²ΠΎΠ»Ρ ΡΠΎΡΠΈΠ°Π»ΡΠ½ΡΡ ΡΠ΅ΡΠ΅ΠΉ ΠΏΡΠΈ ΠΏΠΎΡΠ΅ΡΠ΅Π½ΠΈΠΈ Π²Π΅Π±-ΡΠ°ΠΉΡΠ°, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΠΎΠ½ΠΈ Π½Π΅ Π²ΡΠ΄Π΅Π»Π΅Π½Ρ Π΄ΠΎΠ»ΠΆΠ½ΡΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ.
ΠΠΎΡ ΠΏΠΎΡΠ΅ΠΌΡ Π²Ρ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ, ΡΡΠΎΠ±Ρ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΡΠΈΡΡ ΠΈΡ Π²ΠΏΠ΅ΡΠ΅Π΄. ΠΡΠΎΡ ΠΎΡ EphraimSangma Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΈΠ΄Π΅Π°Π»ΡΠ½ΠΎ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΎΠ²Π°ΡΡ Π²Π°ΡΠΈΠΌ ΠΏΠΎΡΡΠ΅Π±Π½ΠΎΡΡΡΠΌ, ΠΏΠΎΡΡΠΎΠΌΡ ΠΏΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅.
CSS3 ΠΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ: ΠΏΠΎΡΠ»Π΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° PsuedoΠ‘ΡΠ΅Π΄ΠΈ ΡΡΡΠ΅ΠΊΡΠΎΠ² Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΊΡΡΡΠΎΡΠ° Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ CSS, ΠΊΠΎΡΠΎΡΡΠ΅ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ, Π²Ρ Π½Π°ΠΉΠ΄Π΅ΡΠ΅ ΡΠ°ΠΊΠΈΠ΅, ΠΊΠ°ΠΊ Larry Geams, ΠΊΠΎΡΠΎΡΡΠ΅ Π»ΡΡΡΠ΅ Π²ΡΠ΅Π³ΠΎ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΡΡ Π΄Π»Ρ ΠΎΡΠ³Π°Π½ΠΈΠ·Π°ΡΠΈΠΈ ΠΏΡΠ½ΠΊΡΠΎΠ² ΠΌΠ΅Π½Ρ.Π Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊΠΎΠΉ ΡΠΈΠΏ ΠΌΠ΅Π½Ρ Π²Ρ Π²ΡΠ±ΡΠ°Π»ΠΈ, ΡΠΈΡΡΠ΅ΠΌΠ°ΡΠΈΠ·ΠΈΡΠΎΠ²Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΡΠ»ΠΎΠΆΠ½ΠΎ. ΠΡΠΎΡ ΡΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡ ΡΠ°Π·Π΄Π΅Π»Ρ ΠΌΠ΅Π½Ρ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ²Π΅ΡΠΎΠ²ΡΡ ΠΊΠΎΠ΄ΠΎΠ².
Twisty thing β IE10 + iPad + cross browser β ΠΏΠ΅ΡΠ΅ΡΠ°ΡΠΈΡΠ΅, ΡΡΠΎΠ±Ρ ΠΏΠΎΠ²Π΅ΡΠ½ΡΡΡ ΠΊΡΠ±ΠΡΠΎΡ ΡΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΈΠΌΠ΅Π΅Ρ ΠΎΡΠ»ΠΈΡΠ½ΡΡ ΠΊΡΠΎΡΡΠ±ΡΠ°ΡΠ·Π΅ΡΠ½ΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΡ, ΠΈ ΠΎΠ½ Π±ΡΠ΄Π΅Ρ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π½Π° iPad ΠΈ ΠΏΠΎΡΡΠΈ Π²ΠΎ Π²ΡΠ΅Ρ ΡΠΈΡΠΎΠΊΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ . ΠΡΠΎ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠ΅ ΡΡΠΎΠΉ Π²Π΅ΡΡΠΈΠΈ: https://codepen.io/dehash/pen/mBnsG.
ΠΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Π½Π° 3D-ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π±ΠΎΠ»ΡΡΠΎΠ³ΠΎ ΠΏΠ°Π»ΡΡΠ°ΠΠ± ΡΡΠΎΠΌ ΡΡΡΠ΅ΠΊΡΠ΅ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΎΡΠΎΠ±ΠΎ Π½Π΅ΡΠ΅Π³ΠΎ ΡΠΊΠ°Π·Π°ΡΡ, ΠΊΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, ΡΡΠΎ ΠΎΠ½ ΠΎΡΠ½ΠΎΠ²Π°Π½ Π½Π° ΡΡΡΠ΅ΠΊΡΠ΅ ΠΏΡΠ΅Π²Π΄ΠΎΡΠ΅Π½ΠΈ ΠΈ ΠΎΡΠ½ΠΎΠ²Π°Π½ Π½Π° CSS3.ΠΡΡΡΠ΅ Π²ΡΠ΅Π³ΠΎ Π΄Π»Ρ ΠΏΡΠΎΡΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ Π΄ΠΎΠ»ΠΆΠ½Ρ Π±ΡΡΡ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΠΌΠΈ.
ΠΠ΅ΡΠ΄ΠΎΠ±Π½ΠΎ: ΠΌΠΎΠ΄Π°Π»ΡΠ½ΠΎΠ΅ ΡΠΎΡΠΎ (ΡΠΎΠ»ΡΠΊΠΎ CSS)ΠΡΠΎΡ ΡΡΡΠ΅ΠΊΡ Π²ΡΠ΄Π΅Π»ΡΠ΅ΡΡΡ ΡΡΠ΅Π΄ΠΈ Π΄ΡΡΠ³ΠΈΡ CSS-ΡΡΡΠ΅ΠΊΡΠΎΠ² Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΊΡΡΡΠΎΡΠ° Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΎΠ½ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈΠΌ Π°ΠΊΡΠΈΠ²ΠΎΠΌ, Π²Π·ΡΡΡΠΌ ΠΈΠ· Π²ΡΡΡΡΠΏΠ»Π΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΡΠΎΡΡΠΎΡΠ»ΠΎΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΠΎΠ΅ Π²ΡΠ΅ΠΌΡ Π½Π°Π·Π°Π΄ Π½Π° CodePen Houston. ΠΠ½ Π°Π΄Π°ΠΏΡΠΈΡΠΎΠ²Π°Π½ ΠΈΠ· ΡΠ²ΠΎΠ΅ΠΉ ΠΏΠ΅ΡΠ²ΠΎΠ½Π°ΡΠ°Π»ΡΠ½ΠΎΠΉ Π²Π΅ΡΡΠΈΠΈ ΠΈ ΡΠ΅ΠΏΠ΅ΡΡ ΠΎΡΠΊΡΡΡ Π΄Π»Ρ ΡΠΈΡΠΎΠΊΠΎΠΉ ΠΏΡΠ±Π»ΠΈΠΊΠΈ.
ΠΠΎΡΡΡΠ°! (ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ)ΠΠ²ΡΠΎΡ ΡΡΠΎΠ³ΠΎ ΡΡΡΠ΅ΠΊΡΠ° Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΡΠ΄Π΅Π»Π°Π»Π° Π½Π΅ΡΡΠΎ ΡΠ΄ΠΈΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅: ΠΠ½Π° Π’ΡΠ΄ΠΎΡ Π·Π°ΠΏΠΈΡΠ°Π»Π° ΡΠ΅Π±Ρ, ΡΠΎΡΡΠ°Π²Π»ΡΡ ΠΊΠΎΠ΄ Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ ΡΡΡΠ΅ΠΊΡΠ° Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ, Π²Π΄ΠΎΡ Π½ΠΎΠ²Π»ΡΡ Π»ΡΠ΄Π΅ΠΉ Π½Π° ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΡΠ²ΠΎΠ΅Π³ΠΎ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎΠ³ΠΎ.ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ²ΠΈΠ΄Π΅ΡΡ ΠΏΡΠΎΡΠ΅ΡΡ Π·Π΄Π΅ΡΡ.
ΠΠ΄ΠΎΡ Π½ΠΎΠ²Π»ΡΡΡΠ΅Π΅ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠ΅ Π½Π° ΠΏΠΎΡΡΡΠ΅ΡΠ½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅Lab21 ΡΠ°Π·ΡΠ°Π±ΠΎΡΠ°Π» ΡΡΠΎΡ ΡΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΈΡ Π΄Π»Ρ ΠΏΠΎΡΡΡΠ΅ΡΠ½ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ. ΠΡΡΠ΅ΠΊΡ Π±ΡΠ» ΠΏΠΎΡΡΡΠΎΠ΅Π½ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΡ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ CSS.
ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² ΠΏΠ΅ΡΡΠΏΠ΅ΠΊΡΠΈΠ²Π΅ΠΠ΅Π½ΡΠΈ ΠΠ΅ΡΠΎΡ ΡΠΎΠ·Π΄Π°Π» ΡΡΠΎΡ ΡΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ, Π½Π΅ Π½Π°ΠΌΠ΅ΡΠ΅Π²Π°ΡΡΡ Π·Π°ΠΏΡΡΠΊΠ°ΡΡ Π΅Π³ΠΎ ΠΊΠ°ΠΊ ΠΏΡΠΎΠ΄ΡΠΊΡ. ΠΠ° ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅ ΡΡΠΎ Π±ΡΠ» ΡΠΊΡΠΏΠ΅ΡΠΈΠΌΠ΅Π½Ρ ΠΏΠΎ ΠΏΡΠΈΠ²ΡΠΊΠ°Π½ΠΈΡ ΠΊ ΡΡΠ½ΠΊΡΠΈΠΈ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π½ΠΈΡ Π² CSS, Π½ΠΎ Π² ΠΈΡΠΎΠ³Π΅ ΠΎΠ½Π° ΠΎΠΊΠ°Π·Π°Π»Π°ΡΡ Π½Π°ΡΡΠΎΠ»ΡΠΊΠΎ Ρ ΠΎΡΠΎΡΠ°, ΡΡΠΎ Π»ΡΠ΄ΠΈ Π½Π°ΡΠ°Π»ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΅Π΅ Π½Π° ΡΠ²ΠΎΠΈΡ Π²Π΅Π±-ΡΠ°ΠΉΡΠ°Ρ .
ΠΠ°Π»ΡΠ·ΠΈΠΠ°Π»ΡΠ·ΠΈ ΡΠ°ΠΊ ΠΈΠ»ΠΈ ΠΈΠ½Π°ΡΠ΅ ΠΎΡΠ°ΡΠΎΠ²ΡΠ²Π°ΡΡ Π²ΡΠ΅Ρ , ΡΠ°ΠΊ ΠΏΠΎΡΠ΅ΠΌΡ Π±Ρ Π½Π΅ ΠΏΡΠ΅Π²ΡΠ°ΡΠΈΡΡ ΠΈΡ Π² ΡΡΡΠ΅ΠΊΡ ΠΏΠ°ΡΠ΅Π½ΠΈΡ? Dimitra ΡΠ΄Π΅Π»Π°Π»Π° ΠΈΠΌΠ΅Π½Π½ΠΎ ΡΡΠΎ ΠΏΡΠΈ ΡΠΎΠ·Π΄Π°Π½ΠΈΠΈ ΡΡΠΎΠ³ΠΎ ΡΡΡΠ΅ΠΊΡΠ° Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ CSS, Π³Π΄Π΅ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΡΡΠΎΠ»Π±ΡΠΎΠ² ΠΈ Π½Π°ΡΡΡΠΎΠΈΡΡ Π΅Π³ΠΎ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ Π²Π°ΡΠΈΠΌΠΈ ΠΏΠΎΡΡΠ΅Π±Π½ΠΎΡΡΡΠΌΠΈ.
ΠΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΠ΄Π΅ΡΡ DimitraVasilopoulou Π²ΡΡΠ»Π° Π·Π° ΡΠ°ΠΌΠΊΠΈ Π±Π°Π·ΠΎΠ²ΡΡ ΡΡΡΠ΅ΠΊΡΠΎΠ² Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈ ΡΠΎΠ·Π΄Π°Π»Π° ΡΡΠΎΡ ΡΡΡΠ΅ΠΊΡ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΎΠΉ ΡΠ΅ΡΠΊΠΈ.ΠΡΠΎ ΠΈΠ΄Π΅Π°Π»ΡΠ½ΡΠΉ ΡΡΡΠ΅ΠΊΡ Π·Π°Π²ΠΈΡΠ°Π½ΠΈΡ, Π΅ΡΠ»ΠΈ Π²Ρ ΠΏΠΎΠΊΠ»ΠΎΠ½Π½ΠΈΠΊ Greensock.
CSS ΠΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠ°Π’Π΅ΠΌ, ΠΊΡΠΎ ΡΡΠ²Π΅ΡΠΆΠ΄Π°Π΅Ρ, ΡΡΠΎ ΡΡΡΠ΅ΠΊΡΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Π² ΡΠ΅ΠΆΠΈΠΌΠ΅ ΡΠΌΠ΅ΡΠ°Π½Π½ΠΎΠ³ΠΎ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ Π½Π΅ ΡΠ°Π±ΠΎΡΠ°ΡΡ Ρ CSS, ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΎΠ±ΡΠ°ΡΠΈΡΡ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° ΡΡΠΎΡ ΡΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ, ΡΠΎΠ·Π΄Π°Π½Π½ΡΠΉ ΠΠΆΠΎΠ½ΠΎΠΌ ΠΠ°ΠΉΠ΅Π»Π»ΠΎ. ΠΡΠΎ Π΅Π΄ΠΈΠ½ΡΡΠ²Π΅Π½Π½ΠΎΠ΅ Π΄ΠΎΠΊΠ°Π·Π°ΡΠ΅Π»ΡΡΡΠ²ΠΎ ΡΠΎΠ³ΠΎ, ΡΡΠΎ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΡΠ±Π΅Π΄ΠΈΡΡΡΡ, ΡΡΠΎ ΡΡΠ° ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΡ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ.
SVG clip-path ΠΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡΠΠΎΡΠ»Ρ ΠΠ΅Π»ΡΠ³Π°Π΄ΠΎ Π²ΠΎΡΡΠΎΠ·Π΄Π°Π» ΡΡΡΠ΅ΠΊΡ Π·Π°Π²ΠΈΡΠ°Π½ΠΈΡ ΡΠ΅ΡΠΊΠΈ, ΠΊΠΎΡΠΎΡΡΠΉ Π»ΡΠ΄ΠΈ Π²ΠΈΠ΄Π΅Π»ΠΈ Π² ΠΏΠΎΡΡΡΠΎΠ»ΠΈΠΎ CJ Gammon, Π½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΠ» ΠΊ Π½Π΅ΠΌΡ ΠΏΡΡΡ ΠΊΠ»ΠΈΠΏΠ° SVG ΠΈ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Ρ CSS.
ΠΠ½ΠΈΠΌΠ°ΡΠΈΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° Π½Π° ΠΎΠ΄ΠΈΠ½ divΠΠ΅ΠΊΠΎΡΠΎΡΡΠ΅ ΡΡΡΠ΅ΠΊΡΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Ρ ΠΎΡΠΎΡΠΎ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π½Π° ΠΌΠ΅Π½Π΅Π΅ Π·Π°Π³ΡΠΎΠΌΠΎΠΆΠ΄Π΅Π½Π½ΡΡ Π²Π΅Π±-ΡΠ°ΠΉΡΠ°Ρ . ΠΡΡΡΠΈΠ΄ΠΈ Π£ΠΈΠ»ΡΡΠΌΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠ°Π»Π° ΡΠ²ΠΎΠΈ CSS-ΡΡΡΠ΅ΠΊΡΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΡΡΠΎΠ±Ρ ΠΎΠ½ΠΈ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΎΠ²Π°Π»ΠΈ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΠΈΡΡΠΈΡΠ½ΡΠΌ Π²Π΅Π±-ΡΠ°ΠΉΡΠ°ΠΌ, Π·Π°ΠΏΠΎΠ»Π½Π΅Π½Π½ΡΠΌ Π±ΠΎΠ»ΡΡΠΈΠΌ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎΠΌ Π±Π΅Π»ΠΎΠ³ΠΎ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²Π°. ΠΠΎΠ½Π΅ΡΠ½ΠΎ, Π»ΡΠ±ΠΎΠΉ ΠΌΠΎΠΆΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΅Π³ΠΎ Π΄Π»Ρ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ Π½Π° ΡΠ²ΠΎΠΈ ΡΠ°ΠΉΡΡ ΡΠΎΠ½ΠΊΠΈΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΎΠ½Π½ΡΡ ΡΡΡΠ΅ΠΊΡΠΎΠ².
ΠΠ°Π²Π΅Π΄ΠΈΡΠ΅ ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ ΠΌΡΡΠΈ, ΡΡΠΎΠ±Ρ ΠΎΡΠΊΡΡΡΡ ΡΠ°ΡΡΡ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΡΠΎ Π²ΡΠ΅Π³ΠΎ Π»ΠΈΡΡ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ, Π½ΠΎ Π²Ρ ΡΠ·Π½Π°Π΅ΡΠ΅, ΠΊΠ°ΠΊ Π΄ΠΎΠ±ΠΈΡΡΡΡ ΡΡΠΎΠ³ΠΎ ΡΡΡΠ΅ΠΊΡΠ°, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΡΠ½ΠΊΡΠΈΡ div Ρ ΠΏΡΠΈΠΊΡΠ΅ΠΏΠ»Π΅Π½ΠΈΠ΅ΠΌ ΡΠΎΠ½Π°.ΠΡ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ΄Π΅Π»Π°ΡΡ Π΅Π³ΠΎ ΡΡΠ°ΡΠΈΠΎΠ½Π°ΡΠ½ΡΠΌ ΠΈΠ»ΠΈ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΠΌ.
CSS ΠΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΠ²ΡΠΎΡ ΠΠΆΠ΅ΡΠ΅ΠΌΠΈ ΠΡΠ»Π΅ΠΡΠ»ΠΈ Π²Ρ ΡΡΡΠ°Π»ΠΈ ΠΎΡ ΡΡΡΠ΅ΠΊΡΠΎΠ² Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΊΡΡΡΠΎΡΠ° Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ CSS, ΠΊΠΎΡΠΎΡΡΠ΅ Π²ΡΠ΅ Π»ΡΠ΄ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ Π½Π° ΡΠ²ΠΎΠΈΡ Π²Π΅Π±-ΡΠ°ΠΉΡΠ°Ρ , ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΠΆΠ΅ΡΠ΅ΠΌΠΈ ΠΡΠ»Π΅ ΡΠΏΠ°ΡΠ΅Ρ Π²Π°Ρ. ΠΡΠΎΡ ΡΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΈΠΌΠ΅Π΅Ρ Π±ΠΎΠ»Π΅Π΅ ΡΡΡΡΡΠΈΡΡΠΈΡΠ΅ΡΠΊΠΈΠΉ Ρ Π°ΡΠ°ΠΊΡΠ΅Ρ, Π²ΠΊΠ»ΡΡΠ°Ρ ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΠ΅ Π²ΡΠ°ΡΠ°ΡΡΠ΅Π³ΠΎΡΡ ΡΡΠ΅Ρ ΠΌΠ΅ΡΠ½ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ°.
ΠΡΠ΅Π°ΡΠΈΠ²Π½ΠΎΡΡΡ, ΡΡΠΎΡΡΠ°Ρ Π·Π° ΡΡΠΈΠΌ ΡΡΡΠ΅ΠΊΡΠΎΠΌ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ, ΠΎΡΠ΅Π½Ρ ΡΠ΅Π½ΠΈΡΡΡ Π² ΡΠ΅Π³ΠΎΠ΄Π½ΡΡΠ½Π΅ΠΌ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ΅, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΠΊΠ°ΠΆΠ΄ΡΠΉ ΠΈΡΠ΅Ρ Π½ΠΎΠ²ΡΠ΅ ΡΠΏΠΎΡΠΎΠ±Ρ Π²ΡΠ΄Π΅Π»ΠΈΡΡΡΡ.
ΠΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Π³ΡΠ°Π½ΠΈΡΡΠΡΠΎ ΡΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠΉ Π»ΡΡΡΠ΅ Π²ΡΠ΅Π³ΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Ρ ΠΌΠ΅Π½Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ, ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌΠΈ Ρ ΠΏΡΠΈΠ·ΡΠ²ΠΎΠΌ ΠΊ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ ΠΈ ΠΏΠΎΠ΄ΠΎΠ±Π½ΡΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π½Π°ΡΡΡΠΎΠΈΡΡ ΡΡΡΠ΅ΠΊΡ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ Π²Π°ΡΠΈΠΌΠΈ ΠΏΠΎΡΡΠ΅Π±Π½ΠΎΡΡΡΠΌΠΈ.
ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Ρ ΠΎΡΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ ΠΈ ΡΡΡΠ΅ΠΊΡΠΎΠΌ ΠΏΡΠΈΠ±Π»ΠΈΠΆΠ΅Π½ΠΈΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈΠΡΠΎ ΡΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡΠΈΠΉ ΡΠ»ΡΡΡΠΈΡΡ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΡ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ° Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ ΡΠΈΠΏΠ° Π²Π΅Π±-ΡΠ°ΠΉΡΠ°. ΠΠ½ ΠΏΡΠ΅ΠΊΡΠ°ΡΠ½ΠΎ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½ΠΈΡΡΠ΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΡΡΠΎΠ±Ρ ΡΡΡΠ΅ΠΊΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π±ΡΠ» Π°ΠΊΠΊΡΡΠ°ΡΠ½ΡΠΌ ΠΈ Π°ΠΊΠΊΡΡΠ°ΡΠ½ΡΠΌ.Π ΡΠ΅Π»ΠΎΠΌ ΡΡΡΠ΅ΠΊΡ ΠΏΠΎΠ»ΡΡΠ°Π΅ΡΡΡ ΠΎΡΠ΅Π½Ρ ΠΏΠ»Π°Π²Π½ΡΠΌ ΠΈ Π±ΡΡΡΡΡΠΌ, ΡΡΠΎ ΠΏΡΠΈΠ΄Π°Π΅Ρ Π²Π΅Π±-ΡΠ°ΠΉΡΡ ΠΏΡΠΎΡΠ΅ΡΡΠΈΠΎΠ½Π°Π»ΡΠ½ΡΠΉ Π²ΠΈΠ΄.
ΠΡΠΎΡ ΠΎΡ Π½Π° Π·Π°Π²ΠΈΡΠ°Π½ΠΈΠΈΠΠ°ΠΉΠ» Π€ΠΎΡΡΠ΅Ρ ΡΠΊΡΠΏΠ΅ΡΠΈΠΌΠ΅Π½ΡΠΈΡΠΎΠ²Π°Π» Ρ Ρ ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΌΠΈ ΡΠΈΠΏΠ°ΠΌΠΈ ΠΈ ΠΏΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ ΠΏΡΠΈ ΡΠΎΠ·Π΄Π°Π½ΠΈΠΈ Rumble on Hover. ΠΡΡΠ΅ΠΊΡ ΠΎΡΠ½ΠΎΠ²Π°Π½ Π½Π° Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° ΠΈ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΏΠ΅ΡΠ²ΡΠΌ ΠΈΠ· ΠΌΠ½ΠΎΠ³ΠΎΠΎΠ±Π΅ΡΠ°ΡΡΠ΅ΠΉ ΡΠ΅ΡΠΈΠΈ ΠΏΠΎΠ΄ΠΎΠ±Π½ΡΡ ΡΡΡΠ΅ΠΊΡΠΎΠ² Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΎΡ ΡΡΠΎΠ³ΠΎ ΡΠΎΠ·Π΄Π°ΡΠ΅Π»Ρ.
ΠΡΡΡΡΡ ΠΈΠ²Π°ΡΡΠΈΠ΅ ΡΠΎΡΠΌΡΠΠ°ΡΡΠ° ΠΠΎΠ½ΡΠ³ΠΎΠΌΠ΅ΡΠΈ ΡΠΎΠ·Π΄Π°Π»Π° ΡΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Β«Shaking ShapesΒ», ΠΏΠΎΠΏΡΠΎΠ±ΠΎΠ²Π°Π² Π±Π°Π·ΠΎΠ²ΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ CSS ΠΈ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Β«Π²ΡΡΡΡΡ ΠΈΠ²Π°Π½ΠΈΠΉΒ».Π¦Π΅Π»Ρ Π·Π°ΠΊΠ»ΡΡΠ°Π»Π°ΡΡ Π² ΡΠΎΠΌ, ΡΡΠΎΠ±Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΡΡΡΡΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ, ΠΈ ΡΡΠΎ ΠΎΡΠ»ΠΈΡΠ½ΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ.
CSS Grow Hover EffectΠΠ΄Π°ΠΌ ΠΠΎΡΠ³Π°Π½ ΡΠΎΠ·Π΄Π°Π» ΡΡΠΎΡ ΡΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ, ΠΎΡΠ½ΠΎΠ²Π°Π½Π½ΡΠΉ Π½Π° ΠΎΡΠ΅Π½Ρ ΠΏΡΠΎΡΡΠΎΠΌ ΠΏΡΠΈΠ½ΡΠΈΠΏΠ΅: ΡΠ²Π΅Π»ΠΈΡΠ΅Π½ΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° Π½Π΅Π³ΠΎ ΠΊΡΡΡΠΎΡΠ°.
ΠΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ CSS Π΄Π»Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ°Π§ΡΠΎΠ±Ρ ΡΠΎΠ·Π΄Π°ΡΡ ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π½Π° ΡΠ²ΠΎΠΉ Π²Π΅Π±-ΡΠ°ΠΉΡ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠ΅ ΡΡΡΠ΅ΠΊΡΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ CSS, Π²Ρ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΠΈ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ CSS, ΠΏΠΎΡΡΠΎΠΌΡ ΠΌΡ ΠΏΠΎΠ΄ΡΠΌΠ°Π»ΠΈ, ΡΡΠΎ ΠΏΡΠΎΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΡΡ ΠΈΡ Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΌΠ΅ΡΡΠ΅.
ΠΠ°Π²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΡΠΎ ΠΏΠΎΠ»Π½Π°Ρ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ CSS, ΡΠΎΡΡΠΎΡΡΠ°Ρ ΠΈΠ· 44 ΡΡΡΠ΅ΠΊΡΠΎΠ². ΠΡΡΠ΅ΠΊΡΡ ΡΠ²Π»ΡΡΡΡΡ Π±Π°Π·ΠΎΠ²ΡΠΌΠΈ: ΠΎΡ Π²ΡΡΠ²Π΅ΡΠ°Π½ΠΈΡ, ΡΠΎΠ»ΡΠΊΠΎΠ² ΠΈ ΡΠ°ΡΠΊΡΡΡΠΈΠΉ Π΄ΠΎ ΡΠ°Π·ΠΌΡΡΠΈΡ, ΡΠΊΠ»Π°Π΄ΠΎΠΊ ΠΈΠ»ΠΈ ΡΡΠ°Π²Π΅Π½. ΠΡΡΡ Π΅ΡΠ΅ ΠΌΠ½ΠΎΠ³ΠΎ Π²ΡΠ΅Π³ΠΎ, ΡΡΠΎ Π½ΡΠΆΠ½ΠΎ ΠΎΡΠΊΡΡΡΡ, ΠΈ Π²Ρ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ΅ΡΠΈΡΡ, Π² ΠΊΠ°ΠΊΠΎΠΌ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠΈ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π΄Π²ΠΈΠ³Π°ΡΡΡΡ Π²Π°Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ.
ΠΠΎΠ΄ΠΏΠΈΡΡ ΠΊ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΠ½ΠΈΠΌΠ°ΡΠΈΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡΠΡΠ° Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° Π²ΠΊΠ»ΡΡΠ°Π΅Ρ 4 Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΠΏΠΎΠ΄ΠΏΠΈΡΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ Π°ΠΊΡΠΈΠ²ΠΈΡΡΡΡΡΡ, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π½Π°Π²ΠΎΠ΄ΠΈΡ ΠΊΡΡΡΠΎΡ Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ.ΠΡΠ΅ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΠΎΡΠ½ΠΎΠ²Π°Π½Ρ Π½Π° CSS3 ΠΈ ΡΠ°Π±ΠΎΡΠ°ΡΡ Ρ Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²ΠΎΠΌ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ².
iHoveriHover ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ CSS3 ΡΡΡΠ΅ΠΊΡΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ β 20 ΠΊΡΡΠ³ΠΎΠ²ΡΡ ΠΈ 15 ΠΊΠ²Π°Π΄ΡΠ°ΡΠ½ΡΡ . Π§ΡΠΎΠ±Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΡΠ΅ΠΊΡΡ, Π²ΠΊΠ»ΡΡΠ΅Π½Π½ΡΠ΅ Π² ΡΡΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΡ CSS, Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π±ΡΠ΄Π΅Ρ Π½Π°ΠΏΠΈΡΠ°ΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΡΡΠΎΠΊ ΡΠ°Π·ΠΌΠ΅ΡΠΊΠΈ HTML ΠΈ Π²ΠΊΠ»ΡΡΠΈΡΡ ΠΈΡ Π² ΡΠ°ΠΉΠ»Ρ.
Aero β CSS3 Hover EffectsΠ Aero Π½Π΅Ρ Π½ΠΈΡΠ΅Π³ΠΎ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΠ³ΠΎ. ΠΠ½ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ Π±Π°Π·ΠΎΠ²ΡΠ΅ ΡΡΡΠ΅ΠΊΡΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ, ΠΎΡΠ½ΠΎΠ²Π°Π½Π½ΡΠ΅ Π½Π° CSS3 ΠΈ Ρ ΠΎΡΠΎΡΠΎ ΡΠ°Π±ΠΎΡΠ°ΡΡΠΈΠ΅ Π½Π° Π²ΡΠ΅Ρ ΡΠΈΠΏΠ°Ρ Π²Π΅Π±-ΡΠ°ΠΉΡΠΎΠ².
imagehover.cssΠΡΠ»ΠΈ Π²Π°ΠΌ Π½ΡΠΆΠ½Ρ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΡΠ΅ΠΌΡΠ΅ ΡΡΡΠ΅ΠΊΡΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ, ΡΡΠ° Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° ΡΠΎΠ·Π΄Π°Π½Π° ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΠΎ Π΄Π»Ρ Π²Π°Ρ. ΠΠ° Π²ΡΠ±ΠΎΡ ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π΅ΡΡΡ Π±ΠΎΠ»Π΅Π΅ 40 ΡΡΡΠ΅ΠΊΡΠΎΠ² Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ CSS, Π²ΡΠ΅ Π² ΠΎΠ΄Π½ΠΎΠΉ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ Π²ΡΠ΅Π³ΠΎ 19 ΠΠ.
Hov e r.cssHover.css ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ ΡΡΡΠ΅ΠΊΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ ΠΊ ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌ, ΡΡΡΠ»ΠΊΠ°ΠΌ, Π»ΠΎΠ³ΠΎΡΠΈΠΏΠ°ΠΌ, ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌ ΠΈ Π΄ΡΡΠ³ΠΈΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ Π½Π° Π²Π°ΡΠ΅ΠΌ Π²Π΅Π±-ΡΠ°ΠΉΡΠ΅. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΡΠ°Π·Ρ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ ΠΈΡ ΠΊ ΡΠ²ΠΎΠΈΠΌ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ, ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΠΈΡ ΠΈΠ»ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΎΡΠΏΡΠ°Π²Π½ΡΡ ΡΠΎΡΠ΅ΠΊ Π΄Π»Ρ Π½ΠΎΠ²ΡΡ .
ΠΠ°Π²Π΅ΡΡΠ΅Π½ΠΈΠ΅ ΠΌΡΡΠ»Π΅ΠΉ ΠΎΠ± ΡΡΠΈΡ ΡΡΡΠ΅ΠΊΡΠ°Ρ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ CSS
ΠΡΠ΅ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ΡΡ Π΄ΠΎΠ»ΠΆΠ½Ρ Π²Π»Π°Π΄Π΅ΡΡ ΠΏΠΎΠ»Π½ΠΎΠΉ ΠΊΠΎΠ»Π»Π΅ΠΊΡΠΈΠ΅ΠΉ CSS-ΡΡΡΠ΅ΠΊΡΠΎΠ² Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΡΡΠΎΠ±Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΈΡ ΠΏΡΠΈ ΡΠΎΠ·Π΄Π°Π½ΠΈΠΈ Π½ΠΎΠ²ΠΎΠ³ΠΎ ΠΏΡΠΎΠ΅ΠΊΡΠ°. ΠΠ½ΠΈ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ Π³Π»ΡΠ±ΠΈΠ½Ρ Π΄ΠΈΠ·Π°ΠΉΠ½Ρ Π·Π° ΡΡΠ΅Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΈ ΠΏΠΎΠΎΡΡΡΡΡ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΌ.
Π§ΡΠΎ Π·Π°ΠΌΠ΅ΡΠ°ΡΠ΅Π»ΡΠ½ΠΎ Π²ΠΎ ΠΌΠ½ΠΎΠ³ΠΈΡ ΠΈΠ· ΡΡΠΈΡ ΡΡΡΠ΅ΠΊΡΠΎΠ², ΡΠ°ΠΊ ΡΡΠΎ ΡΠΎ, ΡΡΠΎ ΠΈΡ ΠΎΡΠ΅Π½Ρ Π»Π΅Π³ΠΊΠΎ Π½Π°ΡΡΡΠΎΠΈΡΡ ΠΈ Π°Π΄Π°ΠΏΡΠΈΡΠΎΠ²Π°ΡΡ ΠΊ Π²Π°ΡΠΈΠΌ ΠΏΠΎΡΡΠ΅Π±Π½ΠΎΡΡΡΠΌ. ΠΠ΅ Π·Π°Π±ΡΠ΄ΡΡΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠ²ΠΎΠΉ ΠΈΠ½Π΄ΠΈΠ²ΠΈΠ΄ΡΠ°Π»ΡΠ½ΡΠΉ ΠΏΠΎΠ΄Ρ ΠΎΠ΄, Π΄Π°ΠΆΠ΅ Π΅ΡΠ»ΠΈ ΡΡΠΎ Π²ΡΠ΅Π³ΠΎ Π»ΠΈΡΡ Π½Π΅Π±ΠΎΠ»ΡΡΠ°Ρ ΠΊΠΎΡΡΠ΅ΠΊΡΠΈΡΠΎΠ²ΠΊΠ° Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π·Π΄Π΅ΡΡ ΠΈΠ»ΠΈ ΡΠ°ΠΌ, ΡΡΠΎΠ±Ρ ΠΏΠΎΡΠ΅ΡΠΈΡΠ΅Π»ΠΈ ΡΠ²ΠΈΠ΄Π΅Π»ΠΈ ΡΡΠΎ-ΡΠΎ ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ΅ ΠΈ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΠ΅.
ΠΡΠ»ΠΈ Π²Π°ΠΌ ΠΏΠΎΠ½ΡΠ°Π²ΠΈΠ»ΠΎΡΡ ΡΠΈΡΠ°ΡΡ ΡΡΡ ΡΡΠ°ΡΡΡ ΠΎΠ± ΡΡΡΠ΅ΠΊΡΠ°Ρ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ CSS, Π²Ρ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΏΡΠΎΠ²Π΅ΡΠΈΡΡ ΡΡΡ ΡΡΠ°ΡΡΡ ΠΎΠ± ΡΡΡΠ΅ΠΊΡΠ°Ρ ΡΠ²Π΅ΡΠ΅Π½ΠΈΡ ΡΠ΅ΠΊΡΡΠ° CSS.
ΠΡ ΡΠ°ΠΊΠΆΠ΅ ΠΏΠΈΡΠ°Π»ΠΈ ΠΎ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ ΡΠ²ΡΠ·Π°Π½Π½ΡΡ ΡΠ΅ΠΌΠ°Ρ , ΡΠ°ΠΊΠΈΡ ΠΊΠ°ΠΊ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Ρ ΠΌΠ΅ΠΆΠ΄Ρ ΡΡΡΠ°Π½ΠΈΡΠ°ΠΌΠΈ CSS, ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ CSS, ΠΏΠΎΠ»Π΅ ΠΏΠΎΠΈΡΠΊΠ° HTML, Π³Π°Π»Π΅ΡΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ CSS, ΡΠ΅Π΄Π°ΠΊΡΠΎΡ CSS.
10 ΡΠ°ΡΡΠΈΡΠ΅Π½Π½ΡΡ ΡΡΡΠ΅ΠΊΡΠΎΠ² ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS ΠΈ JavaScript
ΠΡΡΠ΅ΠΊΡΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Π΄ΠΎΠ»Π³ΠΎΠ΅ Π²ΡΠ΅ΠΌΡ Π±ΡΠ»ΠΈ ΠΎΠ΄Π½ΠΈΠΌ ΠΈΠ· ΡΠ°ΠΌΡΡ ΠΏΡΠΎΡΡΡΡ ΡΠΏΠΎΡΠΎΠ±ΠΎΠ² Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΠΎΡΡΠΈ Π½Π° Π²Π΅Π±-ΡΠ°ΠΉΡ. Π§Π°ΡΠ΅ Π²ΡΠ΅Π³ΠΎ ΠΎΠ½ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ Π΄Π»Ρ Π²ΡΠ΄Π΅Π»Π΅Π½ΠΈΡ ΡΠ΅ΠΊΡΡΠΎΠ²ΡΡ ΡΡΡΠ»ΠΎΠΊ ΠΈΠ»ΠΈ ΠΊΠ½ΠΎΠΏΠΎΠΊ.ΠΠΎ ΠΈΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ΅Ρ Π²ΡΡ ΠΎΠ΄ΠΈΡΡ Π΄Π°Π»Π΅ΠΊΠΎ Π·Π° ΡΠ°ΠΌΠΊΠΈ ΠΎΡΠ½ΠΎΠ².
ΠΠ΄Π½Π° ΠΎΠ±Π»Π°ΡΡΡ, Π³Π΄Π΅ ΡΡΡΠ΅ΠΊΡΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΡΠΌΠΈ, β ΡΡΠΎ ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ΠΈ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ ΠΊ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌ. ΠΡΠ΄Ρ ΡΠΎ Π½Π΅Π±ΠΎΠ»ΡΡΠΎΠΉ ΠΌΠ°ΠΊΠ΅Ρ ΠΊΠ°ΡΡΡ ΠΈΠ»ΠΈ ΠΌΠ°ΡΡΠΈΠ²Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π³Π΅ΡΠΎΡ, ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΡΠΉ ΡΡΡΠ΅ΠΊΡ ΠΌΠΎΠΆΠ΅Ρ ΠΈΠΌΠ΅ΡΡ ΠΎΠ³ΡΠΎΠΌΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅.
Π‘Π΅Π³ΠΎΠ΄Π½Ρ ΠΌΡ ΠΏΠΎΠΊΠ°ΠΆΠ΅ΠΌ Π²Π°ΠΌ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ²ΠΎΡΡΠ΅ΡΠΊΠΈΡ ΡΠΏΠΎΡΠΎΠ±ΠΎΠ², Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠΎΡΠΎΡΡΡ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ΡΡ ΠΈΠ½ΡΠ΅Π³ΡΠΈΡΡΡΡ ΡΡΡΠ΅ΠΊΡΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Π² ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. ΠΠ½ΠΈ ΠΏΡΠΎΠ΄Π΅ΠΌΠΎΠ½ΡΡΡΠΈΡΡΡΡ, ΠΊΠ°ΠΊ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ Π΄ΡΠ°ΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΠΎΠΆΠΈΠ²ΠΈΡΡ Π½Π°ΡΠΈ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠ΅ ΠΏΡΠΎΠ΅ΠΊΡΡ.
ΠΠ°Π½Π΅Π»Ρ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ² Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ΡΠ°
ΠΠ΅ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½Π½ΠΎΠ΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ Π·Π°Π³ΡΡΠ·ΠΎΠΊ: Π±ΠΎΠ»Π΅Π΅ 1 000 000 Π²Π΅Π±-ΡΠ°Π±Π»ΠΎΠ½ΠΎΠ², ΡΠ΅ΠΌ, ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ², ΡΠ΅ΡΡΡΡΠΎΠ² Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π΄ΡΡΠ³ΠΎΠ΅!
ΠΡΠ°ΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΡΠ»ΠΎΠΈ
ΠΡΠΎ ΡΠΌΠ½ΠΎΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ CSS ΠΈ JS Π΄ΡΠ±Π»ΠΈΡΡΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈ Π½Π°ΠΊΠ»Π°Π΄ΡΠ²Π°Π΅Ρ ΠΈΡ Π΄ΡΡΠ³ Π½Π° Π΄ΡΡΠ³Π°.ΠΡΡΡΠ΄Π° ΡΠΈΠ»ΡΡΡΡ CSS ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡΡΡ ΠΊ ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. ΠΡΠΎΡ ΠΌΠ΅ΡΠΎΠ΄ ΠΏΡΠΈΠ²ΠΎΠ΄ΠΈΡ ΠΊ ΡΡΡΠ΅ΠΊΡΠ°ΠΌ ΠΊΠΈΠ½Π΅ΠΌΠ°ΡΠΎΠ³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ ΠΊΠ°ΡΠ΅ΡΡΠ²Π°, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΠ½Π°ΡΠ΅ Π±ΡΠ»ΠΎ Π±Ρ ΡΡΡΠ΄Π½ΠΎ Π΄ΠΎΡΡΠΈΡΡ.
ΠΡΡΡΡΡΠΉ ΠΈ ΠΌΠΎΡΠ½ΡΠΉ
Π ΡΡΠΎΠΉ ΠΊΠΎΠ»Π»Π΅ΠΊΡΠΈΠΈ ΡΡΡΠ΅ΠΊΡΠΎΠ² Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Π·Π°ΠΌΠ΅ΡΠ°ΡΠ΅Π»ΡΠ½ΠΎ ΡΠΎ, ΡΡΠΎ ΠΎΠ½ΠΈ Π΄ΠΎΡΡΠ°Π²Π»ΡΡΡ ΠΌΠ³Π½ΠΎΠ²Π΅Π½Π½ΠΎΠ΅ ΡΠ΄ΠΎΠ²ΠΎΠ»ΡΡΡΠ²ΠΈΠ΅. ΠΠΎ ΡΡΠ° ΡΠΊΠΎΡΠΎΡΡΡ Π½Π΅ Π»ΠΈΡΠ°Π΅Ρ ΠΈΡ ΡΠΈΠ»Ρ. ΠΡΠΎΠ±ΠΎ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΎΡΠΌΠ΅ΡΠΈΡΡ ΡΡΡΠ΅ΠΊΡΡ ΡΠΈΠ»ΡΡΡΠ° CSS3, ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΠΎΠ½ΠΈ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° ΠΏΠ΅ΡΠ΅Π²ΠΎΠ΄ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² ΠΎΡΡΠ΅Π½ΠΊΠ°Ρ ΡΠ΅ΡΠΎΠ³ΠΎ ΠΈ ΡΠ΅ΠΏΠΈΡ Π² ΠΏΠΎΠ»Π½ΠΎΡΠ²Π΅ΡΠ½ΡΠ΅.
ΠΡΠ°ΡΠΈΠΊΠ° Π² Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ΅
ΠΡΠ° ΠΊΠΎΠΌΠ±ΠΈΠ½Π°ΡΠΈΡ ΠΏΠ΅ΡΠ΅ΠΊΠΎΡΠ΅Π½Π½ΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠΎΠ² Ρ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°ΠΌΠΈ, ΡΠ΅ΡΠΊΠΎΠΉ ΡΠΈΠΏΠΎΠ³ΡΠ°ΡΠΈΠΊΠΈ ΠΈ Π±ΡΡΡΡΠΎΠΉ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΠΎΡΠ΅Π½Ρ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½Π°.ΠΡΠΎ ΡΠ°ΠΊΠΆΠ΅ Π½Π°ΠΏΠΎΠΌΠΈΠ½Π°Π΅Ρ Π²ΡΡΡΠΏΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΡΠΈΡΡΡ ΠΊ ΡΠ΅Π»Π΅ΡΠΎΡ. Π£Π΄ΠΈΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ, Π½ΠΎ Π±ΠΎΠ»ΡΡΠ°Ρ ΡΠ°ΡΡΡ ΡΠ°Π±ΠΎΡΡ Π²ΡΠΏΠΎΠ»Π½ΡΠ΅ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS.
ΠΠΎΠΊΠ°ΠΆΠΈ ΡΠ²ΠΎΠΈ ΠΊΠ°ΡΡΡ
ΠΠΎΡ ΠΎΡΡΡΠ²ΠΎΠΊ, ΠΊΠΎΡΠΎΡΡΠΉ Π½Π°ΠΏΠΎΠΌΠΈΠ½Π°Π΅Ρ ΠΎ ΡΠΎΠΌ, ΠΊΠ°ΠΊ ΠΊΡΠΎ-ΡΠΎ ΡΠ°Π·Π²ΠΎΡΠ°ΡΠΈΠ²Π°Π΅Ρ ΡΡΠΊΡ Ρ ΠΈΠ³ΡΠ°Π»ΡΠ½ΡΠΌΠΈ ΠΊΠ°ΡΡΠ°ΠΌΠΈ Π½Π° Π²ΡΠ΅ΠΎΠ±ΡΠ΅Π΅ ΠΎΠ±ΠΎΠ·ΡΠ΅Π½ΠΈΠ΅. ΠΠΎ Π² ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅, ΠΏΠΎΡ ΠΎΠΆΠ΅, ΡΡΠΎ Π±ΡΠ΄Π΅Ρ ΠΈΠ΄Π΅Π°Π»ΡΠ½ΡΠΉ ΡΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Π΄Π»Ρ ΡΠΎΡΠΎΠ³Π°Π»Π΅ΡΠ΅ΠΈ. ΠΡΠΎ Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ ΠΊΡΡΡΠΎ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ, Π½ΠΎ ΠΈ Π΄Π°Π΅Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΠΌ Π½Π΅ΠΊΠΎΡΠΎΡΡΠΉ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡ.
ΠΠ·ΠΌΠ΅Π½ΡΡΡΠ°ΡΡΡ ΡΠ΅Π°Π»ΡΠ½ΠΎΡΡΡ
ΠΠ°Π²Π°ΠΉΡΠ΅, ΠΏΠΎΡΠΊΡΠΏΠ΅ΡΠΈΠΌΠ΅Π½ΡΠΈΡΡΠΉΡΠ΅ Ρ ΡΡΠΈΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠΌ ΠΈ ΠΏΠΎΡΠΌΠΎΡΡΠΈΡΠ΅, ΡΠΌΠΎΠΆΠ΅ΡΠ΅ Π»ΠΈ Π²Ρ ΡΠΎΡ ΡΠ°Π½ΠΈΡΡ ΡΠ΅ΡΠΊΠΎΠ΅ Π·ΡΠ΅Π½ΠΈΠ΅.ΠΠΎΠ³Π΄Π° Π²Ρ Π½Π°Π²ΠΎΠ΄ΠΈΡΠ΅ ΠΊΡΡΡΠΎΡ Π½Π° ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ ΡΠ°ΡΡΠΈ ΡΡΠΎΠ³ΠΎ Π·Π΄Π°Π½ΠΈΡ, Π±Π»ΠΎΠΊΠΈ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΡΡΡΡ ΠΈ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°ΡΡΡΡ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ Π²Π°ΡΠ΅Π³ΠΎ ΠΊΡΡΡΠΎΡΠ°. ΠΠ½ ΠΎΡΠ΅Π½Ρ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΡΠΉ, Π·Π°ΠΏΡΡΠ°Π½Π½ΡΠΉ ΠΈ ΡΠΌΠΎΠΏΠΎΠΌΡΠ°ΡΠΈΡΠ΅Π»ΡΠ½ΡΠΉ ΠΎΠ΄Π½ΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎ. ΠΠΎΠΆΠ΅ΠΌ Π»ΠΈ ΠΌΡ ΡΠ΄Π΅Π»Π°ΡΡ ΡΡΠΎ ΡΠ½ΠΎΠ²Π°?
Π‘ΠΎΠ±Π΅ΡΠΈΡΡ Π²ΠΌΠ΅ΡΡΠ΅
Π₯ΠΎΡΠΈΡΠ΅ Π±ΠΎΠ»ΡΡΠ΅ ΡΠΌΠΎΠΏΠΎΠΌΡΠ°ΡΠΈΡΠ΅Π»ΡΠ½ΡΡ ΡΠ°Π·Π²Π»Π΅ΡΠ΅Π½ΠΈΠΉ? ΠΠΎΡ Π΅ΡΠ΅ ΠΎΠ΄ΠΈΠ½ ΠΏΡΠΈΠΌΠ΅Ρ ΠΎΡ ΠΠΈΠΌΠΈΡΡΡ ΠΠ°ΡΠΈΠ»ΠΎΠΏΡΠ»Ρ, ΠΊΠΎΡΠΎΡΠ°Ρ ΡΠ°ΠΊΠΆΠ΅ ΡΠΎΠ·Π΄Π°Π»Π° ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΡΠ΅Π°Π»ΡΠ½ΠΎΡΡΠΈ, ΠΎΠΏΠΈΡΠ°Π½Π½ΡΠΉ Π²ΡΡΠ΅. ΠΠ΄Π΅ΡΡ ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΡ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΠΊΠ°ΠΊ ΡΠ°Π·Π΄Π΅Π»Π΅Π½Π½Π°Ρ Π½Π° ΡΠ΅ΡΠΊΡ. ΠΠ°ΡΠ΅Π½ΠΈΠ΅ Π±ΡΡΡΡΠΎ ΡΠΎΠ±ΠΈΡΠ°Π΅Ρ Π²ΡΠ΅ Π²ΠΎΠ΅Π΄ΠΈΠ½ΠΎ. Π₯ΠΎΡΡ ΠΎΠ½ Π½Π΅ ΡΠ°ΠΊΠΎΠΉ ΠΏΡΠΈΡ ΠΎΠ΄Π΅Π»ΠΈΡΠ΅ΡΠΊΠΈΠΉ, ΠΎΠ½ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅ Π²ΠΏΠ΅ΡΠ°ΡΠ»ΡΠ΅Ρ.
Π§ΠΈΡΡΡΠΉ ΠΊΠ»Π°ΡΡ Ρ ΡΠΈΡΡΡΠΌ CSS
ΠΡΠ° ΠΊΠΎΠ»Π»Π΅ΠΊΡΠΈΡ ΡΡΡΠ΅ΠΊΡΠΎΠ² Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΡΠ²Π»ΡΠ΅ΡΡΡ Π΄ΠΎΠΊΠ°Π·Π°ΡΠ΅Π»ΡΡΡΠ²ΠΎΠΌ ΡΠΎΠ³ΠΎ, ΡΡΠΎ Π²Π°ΠΌ Π½Π΅ Π½ΡΠΆΠ½ΠΎ Π±ΡΡΡ ΡΡΠ΅Π·ΠΌΠ΅ΡΠ½ΡΠΌ, ΡΡΠΎΠ±Ρ ΠΏΡΠΎΠΈΠ·Π²Π΅ΡΡΠΈ ΡΠΈΠ»ΡΠ½ΠΎΠ΅ Π²ΠΏΠ΅ΡΠ°ΡΠ»Π΅Π½ΠΈΠ΅. ΠΠ΄Π΅ΡΡ Π΅ΡΡΡ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ Π²Π°ΡΠΈΠ°Π½ΡΠΎΠ² ΡΡΠΈΠ»Π΅ΠΉ, Π½ΠΎ ΠΊΠ°ΠΆΠ΄ΡΠΉ ΠΈΠ· Π½ΠΈΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅Ρ ΡΠ΅ΠΊΡΡΠΎΠ²ΠΎΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΈ ΡΠΈΠ»ΡΡΡΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ°. Π Π½Π΅ Π±ΡΠ»ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΎ Π½ΠΈ ΠΎΠ΄Π½ΠΎΠΉ ΡΡΡΠΎΡΠΊΠΈ JavaScript.
ΠΠ»ΡΡ (ΡΠ°ΠΌΠΊΠΈ) ΠΊ Wild
ΠΡ ΠΏΠΎΠ΄ΠΎΡΠ»ΠΈ ΠΊ ΠΏΠ΅ΡΠ΅ΡΠ΅ΡΠ΅Π½ΠΈΡ Π΄ΡΠ°ΠΌΠ°ΡΠΈΠ·ΠΌΠ° ΠΈ ΠΊΡΠ°ΡΠΎΡΡ Ρ ΡΡΠΈΠΌ Π½Π΅Π²Π΅ΡΠΎΡΡΠ½ΡΠΌ CSS-ΡΡΡΠ΅ΠΊΡΠΎΠΌ Β«Π·Π°ΡΠ²ΠΎΡΠ°Β». ΠΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° Π½Π° ΡΡΠΈ ΠΈΠ»Π»ΡΡΡΡΠ°ΡΠΈΠΈ ΠΆΠΈΠ²ΠΎΡΠ½ΡΡ Π² ΠΎΡΡΠ΅Π½ΠΊΠ°Ρ ΡΠ΅ΠΏΠΈΠΈ ΡΠΎΠ·Π΄Π°Π΅ΡΡΡ ΡΠ²Π΅ΡΡ Π³Π»Π°Π΄ΠΊΠΈΠΉ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ ΠΊ ΠΏΠΎΠ»Π½ΠΎΡΠ²Π΅ΡΠ½ΠΎΠΌΡ.ΠΡΠΎ Π±ΡΠ»ΠΎ Π΄ΠΎΡΡΠΈΠ³Π½ΡΡΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠΈΠ»ΡΡΡΠΎΠ² CSS, ΠΊΠ»ΡΡΠ΅Π²ΡΡ ΠΊΠ°Π΄ΡΠΎΠ², ΠΏΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΡΡΠΈ.
ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π±ΠΎΠ»ΡΡΠ΅Π³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°
Π€ΠΎΡΠΎΠ³Π°Π»Π΅ΡΠ΅ΠΈ Π½Π°ΡΡΠΎΠ»ΡΠΊΠΎ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½Ρ, Π½ΠΎ Π²Ρ Π½Π΅ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅ ΠΌΠ½ΠΎΠ³ΠΎ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΡΡ . ΠΠΎΡ ΠΏΠΎΡΡΡΡΠ°ΡΡΠ΅Π΅ ΠΈΡΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅. ΠΠ°Π²Π΅Π΄ΠΈΡΠ΅ ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ ΠΌΡΡΠΈ Π½Π° ΠΌΠΈΠ½ΠΈΠ°ΡΡΡΡ Π² ΡΠ΅ΡΠΊΠ΅, ΠΈ ΠΏΠΎΠ»Π½ΠΎΡΠ°Π·ΠΌΠ΅ΡΠ½Π°Ρ Π²Π΅ΡΡΠΈΡ Π·Π°ΠΉΠΌΠ΅Ρ Π²Π΅ΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ. ΠΠΎ ΡΡΠΎ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΠΎΠ»ΠΎΠ²ΠΈΠ½Π° Π΄Π΅Π»Π°. ΠΠ°ΡΡΠΎΡΡΠ°Ρ ΠΊΡΡΡΠΈΠ·Π½Π° Π²ΠΎΠ·Π½ΠΈΠΊΠ°Π΅Ρ ΠΈΠ·-Π·Π° ΡΠΎΠ³ΠΎ, ΡΡΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Β«ΡΠ°Π·Π±ΠΈΠ²Π°Π΅ΡΡΡΒ» ΠΈ ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½ΡΠ΅ΡΡΡ Π²ΠΎΠ΅Π΄ΠΈΠ½ΠΎ ΠΏΡΠΈ Π·Π°Π³ΡΡΠ·ΠΊΠ΅.
Π Π°ΡΠΊΡΡΡΠΈΠ΅ ΡΠ°ΡΠΊΠΎΠ»Π°
ΠΠ΄Π΅ΡΡ Ρ Π½Π°Ρ Π΅ΡΡΡ Π·Π°Π±Π°Π²Π½Π°Ρ ΡΠ΅Ρ Π½ΠΈΠΊΠ° Π΄Π»Ρ Π²ΡΡΠ²Π»Π΅Π½ΠΈΡ ΡΠ΅ΠΊΡΡΠ° Π·Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ.Π ΡΡΠΎΠΌ ΡΡΠ°Π³ΠΌΠ΅Π½ΡΠ΅ ΠΏΠΎΠΊΠ°Π·Π°Π½Ρ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ ΡΠΏΠΎΡΠΎΠ±Ρ Β«ΡΠ°Π·Π±ΠΈΡΡΒ» ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π° ΠΏΠΎΠ»ΠΎΡΡ, ΡΠ΅ΠΌ ΡΠ°ΠΌΡΠΌ ΡΠ°ΡΡΠΈΡΠ°Ρ ΠΏΡΡΡ Π΄Π»Ρ ΡΠ΅ΠΊΡΠ΅ΡΠ½ΠΎΠ³ΠΎ ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΡ. ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΡΠΎ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΡΠ»ΠΎΠΆΠ½ΠΎ, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π²Ρ Π½Π΅ Π·Π°Ρ ΠΎΡΠΈΡΠ΅ ΠΏΠΎΠ²ΡΠΎΡΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΅Π³ΠΎ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅. ΠΠΎ ΠΏΡΠΈ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎΠΉ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π²Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΠ΅ ΡΠ²ΠΎΠ΅ΠΌΡ ΠΏΡΠΎΠ΅ΠΊΡΡ ΡΠ²ΠΎΡΡΠ΅ΡΠΊΠΎΠ³ΠΎ ΡΡΡΡΡ.
Π£ Π½Π°Ρ Π΅ΡΡΡ Π΄ΡΠ°ΠΌΠ°
ΠΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΡΡΠΊΠΈΡ ΡΡΡΠ΅ΠΊΡΠΎΠ² Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Π½Π° Π²Π°Ρ ΡΠ°ΠΉΡ β ΠΎΡΠ»ΠΈΡΠ½ΡΠΉ ΡΠΏΠΎΡΠΎΠ± ΠΏΡΠΈΠ²Π»Π΅ΡΡ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ. ΠΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΡΠ΅ Π²ΡΡΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΡ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°ΡΡ, ΡΡΠΎ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ Π΄ΠΎΡΡΠΈΡΡ ΠΆΠ΅Π»Π°Π΅ΠΌΡΡ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠΎΠ², Π½Π΅ ΠΏΠ΅ΡΠ΅ΡΡΠ΅ΡΠ΄ΡΡΠ²ΡΡ.ΠΠΈ Π² ΠΊΠΎΠ΅ΠΌ ΡΠ»ΡΡΠ°Π΅ Π½Π΅ Π½ΡΠΆΠ½ΠΎ ΡΡΠΎ-ΡΠΎ Π³ΡΠΎΠΌΠΊΠΎΠ΅ ΠΈ Π½Π΅ΠΏΡΠΈΡΡΠ½ΠΎΠ΅. Π‘ΠΊΠΎΡΠ΅Π΅, Π²ΡΠ΅ Π΄Π΅Π»ΠΎ Π² ΠΏΠ»Π°Π²Π½ΡΡ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Π°Ρ ΠΈ ΡΠ±Π΅Π΄ΠΈΡΠ΅Π»ΡΠ½ΡΡ ΡΠΏΠ΅ΡΡΡΡΠ΅ΠΊΡΠ°Ρ .
ΠΡΡΡΡ ΡΡΠΈ ΠΏΡΠΈΠΌΠ΅ΡΡ Π²Π°Ρ Π²Π΄ΠΎΡ Π½ΠΎΠ²ΡΡ. ΠΠ°ΡΠ΅ΠΌ ΠΏΠΎΡΠΊΡΠΏΠ΅ΡΠΈΠΌΠ΅Π½ΡΠΈΡΡΠΉΡΠ΅, ΡΡΠΎΠ±Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π΄ΡΠ°ΠΌΠ°ΡΠΈΠ·ΠΌΠ° Π²Π°ΡΠΈΠΌ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌ.
CSS-ΡΡΡΠ΅ΠΊΡΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΡΡΡΠ΅ΠΊΡΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, Π½Π΅ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΡΡΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ, Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ
CSS-ΡΡΡΠ΅ΠΊΡΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
CSS-ΡΡΡΠ΅ΠΊΡΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Π΄Π°ΡΡ Π½Π°ΠΌ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°ΡΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° CSS. Π ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌ ΡΡΠΎΠΊΠ΅ ΠΌΡ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΡΡΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ Π²ΠΈΠ΄ΠΎΠ² ΡΡΡΠ΅ΠΊΡΠΎΠ², ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΠΎ ΡΠΎΠ·Π΄Π°Π½Π½ΡΡ Π΄Π»Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌΠΈ.ΠΠ΄Π½Π°ΠΊΠΎ ΡΡΠΈ ΡΡΡΠ΅ΠΊΡΡ ΠΌΠΎΠ³ΡΡ ΡΠ΄Π΅Π»Π°ΡΡ Π²Π°Ρ ΡΠ°ΠΉΡ Π±ΠΎΠ»Π΅Π΅ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ½ΡΠΌ ΠΈ ΠΆΠΈΠ²ΡΠΌ. ΠΡΠ΅ ΡΡΡΠ΅ΠΊΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΡ Π±ΡΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ΅Π³ΠΎΠ΄Π½Ρ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ ΠΊΠΎΠ΄, ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΠΌΡΠΉ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠΌΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌΠΈ.
Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΡΡΡΠ΅ΠΊΡΠ° Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ (ΡΡΡΠ΅ΠΊΡΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ)
Π‘Π»Π΅Π΄ΡΡΡΠΈΠΉ ΠΊΠΎΠ΄ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ, ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°ΡΡ ΡΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Π½Π° Box Shadow.
ΠΡΡ ΠΎΠ΄Π½ΡΠΉ ΠΊΠΎΠ΄
ΠΠ°Π²Π΅Π΄ΠΈΡΠ΅ ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ ΠΌΡΡΠΈ ΡΡΠ΄Π°
ΠΡΡΠ΅ΠΊΡΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ (ΠΏΠ΅ΡΠ΅Π²ΠΎΡΠ°ΡΠΈΠ²Π°Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ)
Π‘Π»Π΅Π΄ΡΡΡΠΈΠΉ ΠΊΠΎΠ΄ CSS ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ, ΠΊΠ°ΠΊ ΠΏΡΠ΅Π΄ΡΡΠ°Π²ΠΈΡΡ ΡΡΡΠ΅ΠΊΡΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΊΡΡΡΠΎΡΠ° Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅.
ΠΠ°Π²Π΅Π΄ΠΈΡΠ΅ ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ ΠΌΡΡΠΈ Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅.ΠΡΡ ΠΎΠ΄Π½ΡΠΉ ΠΊΠΎΠ΄
ΠΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅ ΠΎ CSS Shadow β¦. ΠΡΠΈΠΌΠ΅ΡΡ CSS Shadow
CSS ΠΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΡΡΡ / ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΡΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
ΠΠ΅ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΡΡΡ β ΠΏΡΠΎΡΠΈΠ²ΠΎΠΏΠΎΠ»ΠΎΠΆΠ½ΠΎΡΡΡ ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΡΡΠΈ, Π½Π΅ ΠΏΡΠΎΠΏΡΡΠΊΠ°ΡΡΠ°Ρ ΡΠ²Π΅Ρ. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² CSS Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° opacity.
CSS ΠΡΡΠ΅ΠΊΡ Π·Π°ΡΡΡ Π°Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
ΠΡΡΠ΅ΠΊΡ ΡΠ°Π·ΠΌΡΡΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
img { Π½Π΅ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΡΡΡ: 0.3; }ΠΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅ ΠΎ β¦. ΠΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΡΠ΅ ΡΠΎΠ½ΠΎΠ²ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΡΡ / Π½Π΅ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ β ΡΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΊΡΡΡΠΎΡΠ°
Π‘Π»Π΅Π΄ΡΡΡΠ°Ρ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ° CSS ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ, ΠΊΠ°ΠΊ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ Π½Π΅ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΡΡΡ ΠΊ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° ΠΌΡΡΠΈ. ΠΠΎΠ³Π΄Π° Π²Ρ Π½Π°Π²ΠΎΠ΄ΠΈΡΠ΅ ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ ΠΌΡΡΠΈ Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, Π²Ρ Π²ΠΈΠ΄ΠΈΡΠ΅, ΡΡΠΎ ΠΎΠ½ΠΎ ΡΡΡΠΊΠ½Π΅Π΅Ρ.
ΠΠ΅ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΡΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ
ΠΠ°Π²Π΅Π΄ΠΈΡΠ΅ ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ ΠΌΡΡΠΈ Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅.ΠΡΡ ΠΎΠ΄Π½ΡΠΉ ΠΊΠΎΠ΄
ΠΠ°Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ° ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅
ΠΠ°Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π΄ΡΡΠ³ Π½Π° Π΄ΡΡΠ³Π° β ΠΎΡΠ»ΠΈΡΠ½ΡΠΉ ΡΠΏΠΎΡΠΎΠ± ΠΏΡΠΈΠ΄Π°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π½ΠΎΠ²ΡΠΉ Π²ΠΈΠ΄.ΠΠ΄Π΅ΡΡ ΠΊΠΎΠ΄ CSS, ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΠΈΠΉ ΡΠ΅ΠΊΡΡ Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΈ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° ΠΌΡΡΠΈ
ΠΠ°Π²Π΅Π΄ΠΈΡΠ΅ ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ ΠΌΡΡΠΈ Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅.Π’ΠΈΠ³Ρ β ΡΠ°ΠΌΡΠΉ ΠΊΡΡΠΏΠ½ΡΠΉ Π²ΠΈΠ΄ ΠΊΠΎΡΠ΅ΠΊ, Π΄ΠΎΡΡΠΈΠ³Π°ΡΡΠΈΠΉ ΠΎΠ±ΡΠ°Ρ Π΄Π»ΠΈΠ½Π° ΡΠ΅Π»Π° Π΄ΠΎ 3,3 ΠΌ ΠΈ Π²Π΅ΡΠΎΠΌ Π΄ΠΎ Π΄ΠΎ 306 ΠΊΠ³. ΠΠ³ΠΎ ΡΠ°ΠΌΠ°Ρ ΡΠ·Π½Π°Π²Π°Π΅ΠΌΠ°Ρ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΡΡΡ β ΡΠ·ΠΎΡ ΡΠ΅ΠΌΠ½ΡΡ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΡΡ ΠΏΠΎΠ»ΠΎΡ Π½Π° ΡΡΠΆΠ΅Π²Π°ΡΠΎ-ΠΎΡΠ°Π½ΠΆΠ΅Π²ΠΎΠΌ ΠΌΠ΅Ρ Π΅ Ρ Π±ΠΎΠ»Π΅Π΅ ΡΠ²Π΅ΡΠ»ΠΎΠΉ Π½ΠΈΠΆΠ½Π΅ΠΉ ΡΡΠΎΡΠΎΠ½ΠΎΠΉ.
ΠΡΡ ΠΎΠ΄Π½ΡΠΉ ΠΊΠΎΠ΄
ΠΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅ ΠΎ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΠΈ CSS β¦. ΠΠ΅ΡΠΎΠ΄Ρ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ CSS
Π’ΠΈΠ³Ρ β ΡΠ°ΠΌΡΠΉ ΠΊΡΡΠΏΠ½ΡΠΉ Π²ΠΈΠ΄ ΠΊΠΎΡΠ΅ΠΊ, Π΄ΠΎΡΡΠΈΠ³Π°ΡΡΠΈΠΉ ΠΎΠ±ΡΠ°Ρ Π΄Π»ΠΈΠ½Π° ΡΠ΅Π»Π° Π΄ΠΎ 3-Ρ .3 ΠΌ ΠΈ Π²Π·Π²Π΅ΡΠΈΠ²Π°Π½ΠΈΠ΅ Π΄ΠΎ 306 ΠΊΠ³. ΠΠ³ΠΎ ΡΠ°ΠΌΠ°Ρ ΡΠ·Π½Π°Π²Π°Π΅ΠΌΠ°Ρ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΡΡΡ β ΡΠ·ΠΎΡ ΡΠ΅ΠΌΠ½ΡΡ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΡΡ ΠΏΠΎΠ»ΠΎΡ Π½Π° ΡΡΠΆΠ΅Π²Π°ΡΠΎ-ΠΎΡΠ°Π½ΠΆΠ΅Π²ΠΎΠΌ ΠΌΠ΅Ρ Π΅ Ρ Π±ΠΎΠ»Π΅Π΅ ΡΠ²Π΅ΡΠ»ΠΎΠΉ Π½ΠΈΠΆΠ½Π΅ΠΉ ΡΡΠΎΡΠΎΠ½ΠΎΠΉ.
CSS Π·Π°ΠΌΠ΅Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° β ΡΠΎΠ±ΡΡΠΈΠ΅ onmouseover
Π‘Π»Π΅Π΄ΡΡΡΠΈΠΉ ΠΊΠΎΠ΄ CSS ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ, ΠΊΠ°ΠΊ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° ΠΌΡΡΠΈ. ΠΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° ΠΌΡΡΠΈ ΠΎΠ΄Π½ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π΅ div, ΠΏΠΎΠΌΠ΅ΡΠ°Π΅ΡΡΡ ΠΏΠΎΠ²Π΅ΡΡ Π΄ΡΡΠ³ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.
ΠΠ°Π²Π΅Π΄ΠΈΡΠ΅ ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ ΠΌΡΡΠΈ Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅.ΠΡΡ ΠΎΠ΄Π½ΡΠΉ ΠΊΠΎΠ΄
ΠΠ°ΠΊ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ Π·Π°ΠΊΡΡΡΡ ΠΎΠΊΠ½ΠΎ ΡΡΡΠ°Π½ΠΈΡΡβ¦. CSS ΠΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½ΡΠΉ ΠΎΠ²Π΅ΡΠ»Π΅ΠΉ
ΠΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΡΡΠ»ΠΊΠΈ Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° (ΠΡΡΠ΅ΠΊΡ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠΎΠ»Π»ΠΎΠ²Π΅ΡΠ°)
Π ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌ ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠΌ ΠΊΠΎΠ΄Π΅ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ, ΠΊΠ°ΠΊ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΡΡΠ»ΠΊΡ Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° ΠΌΡΡΠΈ.
ΠΠ°Π²Π΅Π΄ΠΈΡΠ΅ ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ ΠΌΡΡΠΈ Π½Π° ΡΡΡΠ»ΠΊΡ Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅.ΠΡΡ ΠΎΠ΄Π½ΡΠΉ ΠΊΠΎΠ΄
CSS Div Hover
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ²Π΅Ρ ΡΠΎΠ½Π° Div ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ°. Π‘Π»Π΅Π΄ΡΡΡΠΈΠΉ ΠΊΠΎΠ΄ CSS ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ, ΠΊΠ°ΠΊ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ²Π΅Ρ ΡΠΎΠ½Π° div ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ°.
ΠΠ°Π²Π΅Π΄ΠΈΡΠ΅ ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ ΠΌΡΡΠΈ Π½Π° Div.CSS Div ΡΡΡΠ΅ΠΊΡΡ Π·Π°Π²ΠΈΡΠ°Π½ΠΈΡ
ΠΡΡ ΠΎΠ΄Π½ΡΠΉ ΠΊΠΎΠ΄
ΠΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS
Π§ΡΠΎΠ±Ρ ΠΏΠΎΠΌΠ΅Π½ΡΡΡ ΠΌΠ΅ΡΡΠ°ΠΌΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π½Π°Π²ΠΎΠ΄ΠΈΡ Π½Π° Π½Π΅Π³ΠΎ ΠΊΡΡΡΠΎΡ, Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½Π½ΡΠΉ ΠΈ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΡΠΉ ΠΌΠ΅ΡΠΎΠ΄ β ΠΏΠΎΠΌΠ΅ΡΡΠΈΡΡ Π΄Π²Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² ΠΎΠ΄ΠΈΠ½ ΠΈ ΡΠΎΡ ΠΆΠ΅ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ, ΡΠ΄Π΅Π»Π°Π² ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Β«ΡΠΎΠ»Π»ΠΎΠ²Π΅ΡΠ°Β» ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΡΠΌ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. ΠΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π½Π°Π²ΠΎΠ΄ΠΈΡ ΠΊΡΡΡΠΎΡ Π½Π° ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ, ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Β«Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΊΡΡΡΠΎΡΠ°Β» ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ Π½Π΅ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΡΠΌ.
ΠΠ°Π²Π΅Π΄ΠΈΡΠ΅ ΠΊΡΡΡΠΎΡ Π½Π° ΡΡΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΡΡΠΎΠ±Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ ΡΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² Π΄Π΅ΠΉΡΡΠ²ΠΈΠΈ:
ΠΡΠΎΡ ΡΡΡΠ΅ΠΊΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° Π±ΡΠ» Π΄ΠΎΡΡΠΈΠ³Π½ΡΡ ΠΈΡΠΊΠ»ΡΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS ΠΈ HTML.
ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ CSS Π΄Π»Ρ ΠΎΠ±ΠΌΠ΅Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌΠΈ
Π‘Π»Π΅Π΄ΡΡΡΠΈΠ΅ ΡΡΠΈΠ»ΠΈ CSS ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°ΡΡ, ΠΊΠ°ΠΊ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ°:
<ΡΡΠΈΠ»Ρ> / * Π ΠΎΠ»Π»ΠΎΠ²Π΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ * / .ΡΠΈΠ³ΡΡΠ° { ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅; ΡΠΈΡΠΈΠ½Π°: 360 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; / * ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΎΠΏΡΡΠ΅Π½ΠΎ Π΄Π»Ρ ΠΎΠ±ΡΡΠ½ΠΎΠ³ΠΎ Π½Π΅Π»Π΅Π½ΠΈΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ * / ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π°: 100%; } .figure img.image-hover { ΠΏΠΎΠ·ΠΈΡΠΈΡ: Π°Π±ΡΠΎΠ»ΡΡΠ½Π°Ρ; Π²Π΅ΡΡ : 0; ΡΠΏΡΠ°Π²Π°: 0; ΡΠ»Π΅Π²Π°: 0; Π²Π½ΠΈΠ·Ρ: 0; ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠ΅ ΠΎΠ±ΡΠ΅ΠΊΡΠ°: ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΡ; Π½Π΅ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΡΡΡ: 0; ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄: Π½Π΅ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΡΡΡ.2Ρ; } .figure: hover img.image-hover { Π½Π΅ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΡΡΡ: 1; }
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ HTML Π΄Π»Ρ Π²ΡΠ±ΠΎΡΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ
ΠΠΈΠΆΠ΅ ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½ HTML-ΠΊΠΎΠ΄, ΠΊΠΎΡΠΎΡΡΠΉ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ 2 ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠ΅ Π² ΡΡΡΠ΅ΠΊΡΠ΅ ΡΠΎΠ»Π»ΠΎΠ²Π΅ΡΠ°. Π‘ΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ Π΄Π²Π° ΠΌΠ΅ΡΠΎΠ΄Π°: Π»ΠΈΠ±ΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΎΡΠ»ΠΎΠΆΠ΅Π½Π½ΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠΈ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Ρ Β«ΠΈΠ΄Π΅Π°Π»ΡΠ½ΡΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ ΠΏΠΈΠΊΡΠ΅Π»ΡΒ», Π»ΠΈΠ±ΠΎ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΡΡΡΡΡ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅.
Π Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΠΌΡΠΉ ΠΌΠ΅ΡΠΎΠ΄ β Ρ ΠΎΡΠ»ΠΎΠΆΠ΅Π½Π½ΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠΎΠΉ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Ρ ΠΎΠΏΡΠΈΠΌΠ°Π»ΡΠ½ΡΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ ΠΏΠΈΠΊΡΠ΅Π»Ρ (Π±Π΅Π· ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅):
ΠΠ»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π½ΡΠΉ ΠΌΠ΅ΡΠΎΠ΄ β Π±Π΅Π· Π»Π΅Π½ΠΈΠ²ΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° (ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°ΡΡ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠΌΠ΅ΡΡΠΈΡΡΡΡ Π½Π° ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ Ρ ΠΌΠ°Π»Π΅Π½ΡΠΊΠΈΠΌ ΡΠΊΡΠ°Π½ΠΎΠΌ):
Π Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΠΌΡΠΉ ΠΌΠ΅ΡΠΎΠ΄ β ΡΠΎ ΡΡΡΠ»ΠΊΠΎΠΉ:
ΠΠΎΠΌΠΎΠ³Π»ΠΎ Π»ΠΈ ΡΡΠΎ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²ΠΎ ΠΏΠΎΠ½ΡΡΡ, ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ CSS Π΄Π»Ρ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ (ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ) ΠΈ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΡΡΠ΅ΠΊΡΠ° Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Sirv? ΠΠΎΠΆΠ°Π»ΡΠΉΡΡΠ°, Π΄Π°ΠΉΡΠ΅ Π½Π°ΠΌ Π·Π½Π°ΡΡ Π½ΠΈΠΆΠ΅.
12 Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊ CSS Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΊΡΠ°ΡΠΈΠ²ΡΡ ΡΡΡΠ΅ΠΊΡΠΎΠ² ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
ΠΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΠΌ ΠΏΡΠΎΡΡΠΎΠΉ ΠΈ ΡΠ΅ΡΠΊΠΎΠΉ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ ΠΎ ΡΠΎΠΌ, ΠΊΠ°ΠΊΠ°Ρ ΡΠ°ΡΡΡ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΠΎΠΉ. β Π²Π°ΠΆΠ½Π°Ρ ΡΠ°ΡΡΡ UX-Π΄ΠΈΠ·Π°ΠΉΠ½Π°.Π‘ΡΠ°ΡΡΠΉ, Π½ΠΎ Π·ΠΎΠ»ΠΎΡΠΎΠΉ ΡΠΏΠΎΡΠΎΠ± ΡΠ΄Π΅Π»Π°ΡΡ ΡΡΠΎ β ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ²Π΅Ρ ΡΠ΅ΠΊΡΡΠ° ΠΈ ΠΏΠΎΠ΄ΡΠ΅ΡΠΊΠ½ΡΡΡ Π΅Π³ΠΎ. Π Π½Π°ΡΡΠΎΡΡΠ΅Π΅ Π²ΡΠ΅ΠΌΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS ΡΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ Π³ΠΎΡΠ°Π·Π΄ΠΎ Π±ΠΎΠ»ΡΡΠ΅ ΡΠΏΠΎΡΠΎΠ±ΠΎΠ² ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΡΡΠ΅ΠΊΡΠΎΠ² Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ, ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎ Π΄Π»Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ.
Π’Π΅ΠΏΠ΅ΡΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ ΠΌΠΎΠ³ΡΡ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ ΡΡΡΠ΅ΠΊΡΡ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Π° ΠΈΠ»ΠΈ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΠΏΡΠΈ ΡΡΠ°Π±Π°ΡΡΠ²Π°Π½ΠΈΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΊΡΡΡΠΎΡΠ°. . ΠΡ ΡΠ°ΡΡΠΌΠ°ΡΡΠΈΠ²Π°Π΅ΠΌ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½Π½ΡΠ΅ ΡΠ»Π°ΠΉΠ΄Ρ, ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Ρ ΡΠ°Π·Π½ΠΎΠΉ ΡΠΊΠΎΡΠΎΡΡΡΡ, ΠΏΠΎΡΡΠ΅ΠΏΠ΅Π½Π½ΠΎΠ΅ ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΠ΅ ΠΈ ΠΈΡΡΠ΅Π·Π½ΠΎΠ²Π΅Π½ΠΈΠ΅, ΡΡΡΠ΅ΠΊΡΡ ΡΠ°ΡΠ½ΠΈΡΠ°, ΡΠ²Π΅ΡΠΎΠ²ΡΠ΅ ΡΡΡΠ΅ΠΊΡΡ, ΠΊΠΎΠ»Π΅Π±Π°Π½ΠΈΡ, ΠΎΡΡΠΊΠΎΠΊΠΈ ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π΄ΡΡΠ³ΠΎΠ΅.
Π ΡΡΠΎΠΉ ΠΏΠΎΠ΄Π±ΠΎΡΠΊΠ΅ Π±ΠΎΠ»Π΅Π΅ 250 ΡΡΡΠ΅ΠΊΡΠΎΠ² Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ, Π²Π΄ΠΎΡ Π½ΠΎΠ²ΡΡ Π²Π°Ρ.ΠΡ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΠ»ΡΡΠΈΡΡ ΠΊΠΎΠ΄ Ρ ΠΈΡΡΠΎΡΠ½ΠΈΠΊΠ°.
ΠΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Ρ ΠΈ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ CSS3 Π΄Π»Ρ Π²ΡΠ΄Π΅Π»Π΅Π½ΠΈΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ°ΠΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Ρ ΠΈ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ CSS3 Π΄Π»Ρ Π²ΡΠ΄Π΅Π»Π΅Π½ΠΈΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ°
ΠΠΈΠ·Π°ΠΉΠ½Π΅ΡΡ ΠΈ Ρ ΡΠ΄ΠΎΠΆΠ½ΠΈΠΊΠΈ ΠΈΠΌΠ΅ΡΡ Π΄ΠΎΠ»Π³ΡΡ ΠΈΡΡΠΎΡΠΈΡ ΡΠΊΡΠΏΠ΅ΡΠΈΠΌΠ΅Π½ΡΠΎΠ² Ρ Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΠ΅ΠΌ, ΡΡΡΠ΅ΠΊΡΠ°ΠΌΠΈ ΠΈ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠΌΠΈ Π²ΠΈΠ΄Π°ΠΌΠΈ ΠΈΠ»Π»ΡΠ·ΠΈΠΉ Ρ ΠΏΠΎΠΌΠΎΡΡΡ β¦ ΠΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅
ΠΡΡΠ΅ΠΊΡΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅
(16 ΡΡΡΠ΅ΠΊΡΠΎΠ²)ΠΠ° ΡΡΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅ Π²Ρ Π½Π°ΠΉΠ΄Π΅ΡΠ΅ ΠΊΡΠ°ΡΠΈΠ²ΡΡ ΠΊΠΎΠ»Π»Π΅ΠΊΡΠΈΡ ΠΈΠ· 16 ΡΡΡΠ΅ΠΊΡΠΎΠ² Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Ρ ΠΏΠΎΠ΄ΠΏΠΈΡΡΠΌΠΈ.ΠΠΎΠ·ΡΠΌΠΈΡΠ΅ ΠΊΠΎΠ΄ HTML ΠΈ CSS Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΡΡΡΠ΅ΠΊΡΠ°, Π½Π°Π²Π΅Π΄Ρ ΠΊΡΡΡΠΎΡ Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈ Π½Π°ΠΆΠ°Π² ΠΠΎΠΊΠ°Π·Π°ΡΡ ΠΊΠΎΠ΄ .
ΠΠΎΠ΄ΠΏΠΈΡΡ ΠΊ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΠ½ΠΈΠΌΠ°ΡΠΈΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ
(4 ΡΡΡΠ΅ΠΊΡΠ°)ΠΠΎΡ 4 ΠΊΠ»Π°ΡΡΠ½ΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ Ρ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°ΠΌΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ Π·Π°ΠΏΡΡΠΊΠ°ΡΡΡΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅. ΠΡΡΠ΅ΠΊΡΡ ΡΠΎΠ·Π΄Π°Π½Ρ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ΠΎΠ² ΠΈ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π½ΠΈΠΉ Π½Π° ΡΠΈΡΡΠΎΠΌ CSS3, Π° Π½Π΅ JavaScript, ΡΡΠΎΠ±Ρ ΠΏΠΎΠ²ΡΡΠΈΡΡ ΡΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΠΎΡΡΡ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅.
iHover
(35 ΡΡΡΠ΅ΠΊΡΠΎΠ²)iHover β ΡΡΠΎ ΠΊΠΎΠ»Π»Π΅ΠΊΡΠΈΡ ΡΡΡΠ΅ΠΊΡΠΎΠ² Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ CSS3.ΠΡΡΡ 20 ΡΡΡΠ΅ΠΊΡΠΎΠ² Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΊΡΡΠΆΠΊΠΎΠ² ΠΈ 15 ΡΡΡΠ΅ΠΊΡΠΎΠ² Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΊΠ²Π°Π΄ΡΠ°ΡΠΎΠ². Π§ΡΠΎΠ±Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΡΠ΅ΠΊΡΡ, Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π±ΡΠ΄Π΅Ρ Π½Π°ΠΏΠΈΡΠ°ΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠΊΡ HTML ΠΈ Π²ΠΊΠ»ΡΡΠΈΡΡ ΡΠ°ΠΉΠ»Ρ CSS.
Image Hover
(44 ΡΡΡΠ΅ΠΊΡΠ°)ΠΡΠ° Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ 44 ΡΡΡΠ΅ΠΊΡΠ°, ΡΠΎΠ·Π΄Π°Π½Π½ΡΡ Π½Π° ΡΠΈΡΡΠΎΠΌ CSS. ΠΠ΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΠ· ΡΡΡΠ΅ΠΊΡΠΎΠ² Π²ΠΊΠ»ΡΡΠ°ΡΡ Π·Π°ΡΡΡ Π°Π½ΠΈΠ΅, ΡΠΎΠ»ΡΠΊΠΈ, ΡΠΊΠΎΠ»ΡΠΆΠ΅Π½ΠΈΠ΅, ΠΏΠ΅ΡΠ»ΠΈ, ΡΠ°ΡΠΊΡΡΡΠΈΠ΅, ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅, ΡΠ°Π·ΠΌΡΡΠΈΠ΅, ΠΏΠ΅ΡΠ΅Π²ΠΎΡΠ°ΡΠΈΠ²Π°Π½ΠΈΠ΅, ΡΠΊΠ»Π°Π΄ΠΊΠΈ ΠΈ ΡΡΠ°Π²Π½ΠΈ Π² Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡΡ . Π‘ΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ ΡΠ°ΡΡΠΈΡΠ΅Π½Π½Π°Ρ Π²Π΅ΡΡΠΈΡ ΠΈΠ· 216 ΡΡΡΠ΅ΠΊΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΊΡΠΏΠΈΡΡ Π·Π° 14 Π΅Π²ΡΠΎ.
ΠΠ΄Π΅ΠΈ ΡΡΡΠ΅ΠΊΡΠΎΠ² Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ
(30 ΡΡΡΠ΅ΠΊΡΠΎΠ²)ΠΡΠ° Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΡΠΎΠ·Π΄Π°Π½Π½Π°Ρ Codrop, Π΄Π°Π΅Ρ Π²Π°ΠΌ Π²Π΄ΠΎΡ Π½ΠΎΠ²Π΅Π½ΠΈΠ΅ ΠΏΡΠΈ ΡΠΎΠ·Π΄Π°Π½ΠΈΠΈ ΠΏΠ»Π°Π²Π½ΡΡ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ΠΎΠ² ΠΌΠ΅ΠΆΠ΄Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌΠΈ ΠΈ ΠΈΡ ΠΏΠΎΠ΄ΠΏΠΈΡΡΠΌΠΈ.ΠΡΠ΅Π³ΠΎ 30 ΡΡΡΠ΅ΠΊΡΠΎΠ² Π½Π° Π΄Π²ΡΡ Π½Π°Π±ΠΎΡΠ°Ρ Ρ ΡΡΠ΅Π±Π½ΡΠΌΠΈ ΠΏΠΎΡΠΎΠ±ΠΈΡΠΌΠΈ ΠΈ ΠΈΡΡ ΠΎΠ΄Π½ΡΠΌ ΠΊΠΎΠ΄ΠΎΠΌ.
Hover CSS
(108 ΡΡΡΠ΅ΠΊΡΠΎΠ²)Hover CSS ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ ΡΡΡΠ΅ΠΊΡΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΊ Π»ΡΠ±ΠΎΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ ΠΊΠ½ΠΎΠΏΠΊΠ΅, ΡΡΡΠ»ΠΊΠ΅ ΠΈΠ»ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. ΠΡΡΠ΅ΠΊΡΡ Π²ΠΊΠ»ΡΡΠ°ΡΡ 2D-ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Ρ, ΡΠΎΠ½ΠΎΠ²ΡΠ΅ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Ρ, Π³ΡΠ°Π½ΠΈΡΡ, ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Ρ ΡΠ΅Π½ΠΈ ΠΈ ΡΠ²Π΅ΡΠ΅Π½ΠΈΡ ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π΄ΡΡΠ³ΠΎΠ΅. ΠΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° Π΄ΠΎΡΡΡΠΏΠ½Π° Π½Π° CSS, Sass ΠΈ LESS.
ΠΠ½ΠΈΠΌΠ°ΡΠΈΠ·ΠΌ
(100+ ΡΡΡΠ΅ΠΊΡΠΎΠ²)ΠΠΌΠ΅Π΅ΡΡΡ Π±ΠΎΠ»Π΅Π΅ 100 Π°Π½ΠΈΠΌΠ°ΡΠΈΠΉ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠΈ, Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ, Π΄Π΅ΡΠ°Π»ΠΈ, ΠΏΠΎΠ΄ΠΏΠΈΡΠΈ, ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΡΠΎΡΠΈΠ°Π»ΡΠ½ΡΡ ΡΠ΅ΡΠ΅ΠΉ.ΠΡΠ΅ ΡΡΡΠ΅ΠΊΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ CSS3.
ΠΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Π½Π°Π΄ΠΏΠΈΡΠΈ
(7 ΡΡΡΠ΅ΠΊΡΠΎΠ²)Π ΠΊΠΎΠ»Π»Π΅ΠΊΡΠΈΠΈ 7 ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΡΡΡΠ΅ΠΊΡΠΎΠ². ΠΡΠ΅ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Ρ Π²ΡΠ³Π»ΡΠ΄ΡΡ ΠΎΡΠ΅Π½Ρ ΠΊΡΠ°ΡΠΈΠ²ΠΎ ΠΈ ΠΏΠ»Π°Π²Π½ΠΎ. ΠΠ΅ΡΠ΅ΠΉΠ΄ΠΈΡΠ΅ Π² ΡΠ°Π·Π΄Π΅Π» ΡΡΠ΅Π±Π½ΠΈΠΊΠ°, ΡΡΠΎΠ±Ρ ΡΠ·Π½Π°ΡΡ, ΠΊΠ°ΠΊ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ ΡΡΠΈ ΡΡΡΠ΅ΠΊΡΡ Π² ΡΠ²ΠΎΠ΅ΠΌ ΠΏΡΠΎΠ΅ΠΊΡΠ΅.
CSS Image Hover Effects
(15 ΡΡΡΠ΅ΠΊΡΠΎΠ²) ΠΠΎΠ»Π»Π΅ΠΊΡΠΈΡ ΠΏΡΠΎΡΡΡΡ
ΡΡΡΠ΅ΠΊΡΠΎΠ² Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ, ΡΠ°ΠΊΠΈΡ
ΠΊΠ°ΠΊ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅, ΡΠΊΠΎΠ»ΡΠΆΠ΅Π½ΠΈΠ΅, ΠΏΠΎΠ²ΠΎΡΠΎΡ, ΡΠΊΠ°Π»Π° ΡΠ΅ΡΠΎΠ³ΠΎ, ΡΠ°Π·ΠΌΡΡΠΈΠ΅, Π½Π΅ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΡΡΡ ΠΈ Π΄ΡΡΠ³ΠΈΠ΅ Π±Π°Π·ΠΎΠ²ΡΠ΅ ΡΡΡΠ΅ΠΊΡΡ. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΠΈ ΡΡΡΠ΅ΠΊΡΡ, Π΄ΠΎΠ±Π°Π²ΠΈΠ² ΠΊΠ»Π°ΡΡ CSS ΠΏΠ΅ΡΠ΅Π΄ ΡΠ΅Π³ΠΎΠΌ figure
.
3D-ΡΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Ρ ΡΡΠ΅ΡΠΎΠΌ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ
ΠΡΠΎ ΡΡΠΏΠ΅Ρ ΠΊΡΡΡΠΎΠΉ ΡΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΎΠ±Π½Π°ΡΡΠΆΠΈΡ Π²Π°ΡΠ΅ ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅Π΅ Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΠ΅ ΠΌΡΡΠΈ. ΠΠΎΠ΄ΠΏΠΈΡΠΈ ΠΊ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌ Π±ΡΠ΄ΡΡ ΠΎΡΠΊΡΡΠ²Π°ΡΡΡΡ Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΈΠ· ΡΠ΅ΡΡΡΠ΅Ρ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠΉ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅Π³ΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΊΡΡΡΠΎΡΠ°.
ΠΠ»ΠΈΡΠΊΠΈ Ρ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠ΅ΠΌ
ΠΠ΄ΠΈΠ½ Π΄Π»Ρ ΠΌΠΎΠ·Π°ΠΈΡΠ½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π° Ρ ΠΌΠ΅Π΄Π»Π΅Π½Π½ΡΠΌ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ, ΡΠ»Π°ΠΉΠ΄Π°ΠΌΠΈ, Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΠΈΠΌΠΈ ΠΎΠΊΠ½Π°ΠΌΠΈ, Π·Π°ΡΠ΅ΠΌΠ½Π΅Π½Π½ΡΠΌ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ ΠΈ ΠΏΡΠΎΡΠΈΠΌ.
SVG clip-Path Hover Effect
ΠΠΎΡΡΡΡΠ°ΡΡΠΈΠΉ ΡΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠ΅Π½ΡΠ³Π΅Π½ΠΎΠ²ΡΠΊΠΎΠ³ΠΎ ΠΏΡΠΎΠΆΠ΅ΠΊΡΠΎΡΠ° Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ SVG clip-path
ΠΈ CSS-ΠΏΠ΅ΡΠ΅Ρ
ΠΎΠ΄ΠΎΠ².ΠΡΠ΅ΠΊΡΠ°ΡΠ½ΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π² Chrome, Opera ΠΈ Safari.
ΠΠ°ΡΠ°Π»ΠΎ ΡΠ°Π±ΠΎΡΡ Ρ ΡΡΡΠ΅ΠΊΡΠ°ΠΌΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
ΠΡΡΠ΅ΠΊΡΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΡΠ²Π»ΡΡΡΡΡ ΡΠ°ΡΡΡΡ Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²Π° Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠ² ΡΠ°ΠΉΡΠΎΠ². ΠΠ½ΠΈ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΠΏΡΠΎΡΡΡΠΌΠΈ β Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠ²Π΅Π»ΠΈΡΠ΅Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ β ΠΈΠ»ΠΈ Π·Π°ΠΏΡΡΠΊΠ°ΡΡ ΠΌΠ½ΠΎΠ³ΠΎΡΡΡΠΏΠ΅Π½ΡΠ°ΡΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ. Π ΡΡΠΎΠΌ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²Π΅ ΠΌΡ ΠΏΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΠΌ Π²Π°Ρ Ρ Π½Π΅ΠΊΠΎΡΠΎΡΡΠΌΠΈ ΠΎΡΠ½ΠΎΠ²Π°ΠΌΠΈ ΠΈ ΠΏΠ°ΡΠΎΠΉ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Π±ΠΎΠ»Π΅Π΅ ΠΏΡΠΎΠ΄Π²ΠΈΠ½ΡΡΡΡ ΠΏΡΠΈΠ΅ΠΌΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎΠΌΠΎΠ³ΡΡ Π²Π°ΠΌ Π½Π°ΡΠ°ΡΡ ΠΈΠ½ΡΠ΅Π³ΡΠΈΡΠΎΠ²Π°ΡΡ ΡΡΡΠ΅ΠΊΡΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Π² ΡΠ²ΠΎΠΈ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠ΅ ΠΏΡΠΎΠ΅ΠΊΡΡ.
ΠΡΡΠ΅ΠΊΡΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΏΡΠΈΠ΄Π°ΡΡ Π΄ΠΈΠ·Π°ΠΉΠ½Ρ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΠΎΡΡΡ ΠΈ Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΠ΅, Π΄Π΅Π»Π°Ρ ΡΠ°Π±ΠΎΡΡ Π² ΡΠ΅ΡΠΈ Π±ΠΎΠ»Π΅Π΅ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ½ΠΎΠΉ.ΠΠ΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ ΡΠΎΠ³ΠΎ, ΡΠΊΠ°Π·ΡΠ²Π°ΡΡ Π»ΠΈ ΠΎΠ½ΠΈ Π½Π° Π°ΠΊΡΠΈΠ²Π½ΡΡ ΡΡΡΠ»ΠΊΡ ΠΈΠ»ΠΈ Π²ΡΠ·ΡΠ²Π°ΡΡ Π²ΡΠΏΠ»Π΅ΡΠΊ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ, ΡΡΡΠ΅ΠΊΡΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Π΄Π°ΡΡ Π²Π°ΠΌ Π½Π΅ΠΌΠ΅Π΄Π»Π΅Π½Π½ΡΡ ΠΎΠ±ΡΠ°ΡΠ½ΡΡ ΡΠ²ΡΠ·Ρ. ΠΠ½ΠΈ ΠΌΠΎΠ³ΡΡ Π½Π°ΠΏΡΠ°Π²Π»ΡΡΡ ΠΏΠΎΡΠ΅ΡΠΈΡΠ΅Π»Π΅ΠΉ ΠΊ ΠΆΠ΅Π»Π°Π΅ΠΌΠΎΠΌΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ ΠΈΠ»ΠΈ Π²ΡΡΡΡΠΏΠ°ΡΡ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ Ρ
ΡΠ΄ΠΎΠΆΠ΅ΡΡΠ²Π΅Π½Π½ΠΎΠ³ΠΎ ΡΠΊΡΠ°ΡΠ΅Π½ΠΈΡ, ΠΎΠΆΠΈΠ²Π»ΡΡΡΠ΅Π³ΠΎ ΡΠΈΡΡΠΎΠ²ΠΎΠ΅ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ.
ΠΡΡΠ΅ΠΊΡΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΡΠ°Π·Π»ΠΈΡΠ°ΡΡΡΡ ΠΏΠΎ ΡΠ»ΠΎΠΆΠ½ΠΎΡΡΠΈ, Π½ΠΎ ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΏΡΠΎΡΡΡΡ
Π² Webflow Π²ΠΊΠ»ΡΡΠ°Π΅Ρ Π² ΡΠ΅Π±Ρ:
- ΠΡΠ±ΠΎΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΠΊ ΠΊΠΎΡΠΎΡΠΎΠΌΡ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ ΡΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ
- ΠΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ ΠΌΠ΅Π½Ρ ΡΠΎΡΡΠΎΡΠ½ΠΈΠΉ Π² ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΈ Π½Π°ΡΡΡΠΎΠΉΠΊΠ° ΡΡΠΈΠ»Ρ
- ΠΠΎΠ·Π²ΡΠ°ΡΠ΅Π½ΠΈΠ΅ ΠΊ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ none ΠΈ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΏΠ΅ΡΠ΅Ρ
ΠΎΠ΄Π°
ΠΠ°Π²Π°ΠΉΡΠ΅ Π½Π°ΡΠ½Π΅ΠΌ Ρ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅Π½ΠΈΡ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΡΡΠΈ 3 ΡΠ°Π³Π° ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈΠ· ΡΠ°ΠΌΡΡ ΠΏΡΠΎΡΡΡΡ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΠΉ β Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΈ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΡ.
Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Π±Π°Π·ΠΎΠ²ΠΎΠ³ΠΎ ΡΡΡΠ΅ΠΊΡΠ° Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΈ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΡ
Π’Π°-Π΄Π°! ΠΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° Π½Π° ΡΡΡ ΠΏΡΠΈΡΡΠ΄Π»ΠΈΠ²ΡΡ ΡΡΡΡΠΊΡΡΡΡ ΠΎΠ½Π° ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ Π±ΠΎΠ»ΡΡΠ΅. Π§ΡΠΎΠ±Ρ ΠΏΠΎΠΊΠ°Π·Π°ΡΡ Π²Π°ΠΌ, ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠ²ΠΎΠΉ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠΉ ΡΡΡΠ΅ΠΊΡ ΡΠ²Π΅Π»ΠΈΡΠ΅Π½ΠΈΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ, ΠΌΡ ΡΠ°ΡΡΠΊΠ°ΠΆΠ΅ΠΌ, ΠΊΠ°ΠΊ ΠΌΡ Π΅Π³ΠΎ ΡΠΎΠ·Π΄Π°Π»ΠΈ. Π₯ΠΎΡΠΈΡΠ΅ ΡΠ»Π΅Π΄ΠΈΡΡ Π·Π° ΠΌΠ½ΠΎΠΉ? ΠΡΠΊΡΠΎΠΉΡΠ΅ ΠΏΡΠΎΠ΅ΠΊΡ Π² Webflow.
Π©Π΅Π»ΡΠΎΠΊ ΠΏΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π²ΡΠ±ΠΈΡΠ°Π΅Ρ Π΅Π³ΠΎ Π² Π½Π°Π²ΠΈΠ³Π°ΡΠΎΡΠ΅ ΠΈ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ Π΅Π³ΠΎ ΠΈΠΌΡ: image-bg. ΠΠ°Π²ΠΈΠ³Π°ΡΠΎΡ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ ΠΈΠ΅ΡΠ°ΡΡ
ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², ΠΈ ΠΌΡ Π²ΠΈΠ΄ΠΈΠΌ, ΡΡΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡΡΡ Π² Π±Π»ΠΎΠΊΠ΅ div Ρ ΠΈΠΌΠ΅Π½Π΅ΠΌ: divZoomImage.
Π§ΡΠΎΠ±Ρ ΡΠ·Π½Π°ΡΡ, ΡΡΠΎ ΠΏΡΠΎΠΈΡΡ
ΠΎΠ΄ΠΈΡ Ρ ΡΡΠΈΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ, ΠΊΠΎΠ³Π΄Π° ΠΌΡ Π½Π°Π²ΠΎΠ΄ΠΈΠΌ Π½Π° Π½Π΅Π³ΠΎ ΠΊΡΡΡΠΎΡ, ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ Π²ΡΠ±ΡΠ°ΡΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠ΅ Π² ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠ΅ΠΌΡΡ ΠΌΠ΅Π½Ρ ΡΠΎΡΡΠΎΡΠ½ΠΈΠΉ Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΡ Π²ΠΈΠ΄ΠΈΠΌ ΡΡΡΠ΅ΠΊΡ ΡΡΠ°Π½ΡΡΠΎΡΠΌΠ°ΡΠΈΠΈ, ΡΠ²Π΅Π»ΠΈΡΠΈΠ²Π°ΡΡΠΈΠΉ Π΅Π³ΠΎ Π² 1,2 ΡΠ°Π·Π° ΠΏΠΎ ΠΎΡΡΠΌ X ΠΈ Y.
ΠΡΡΠ΅ΠΊΡ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π½ΠΈΡ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠ°ΡΡΡΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ. Π‘ΠΊΠΎΡΠΎΡΡΡ ΡΠΎΡΡΠ° Π΄ΠΎΠΌΠ° β ΡΡΠΎ ΠΏΠ΅ΡΠ΅Ρ
ΠΎΠ΄, ΠΊΠΎΡΠΎΡΡΠΉ Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΡΡΡ ΠΊ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ Β«Π½Π΅ΡΒ» (ΠΈΠ»ΠΈ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ). ΠΠ΅ΡΠ΅Ρ
ΠΎΠ΄ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ Π½Π° Π²ΡΠ΅ΠΌΡ Π±ΠΎΠ»Π΅Π΅ 500 ΠΌΠΈΠ»Π»ΠΈΡΠ΅ΠΊΡΠ½Π΄ ΠΈ ΠΈΠΌΠ΅Π΅Ρ ΠΏΡΠΎΡΡΠΎΠΉ ΡΠ΅ΠΆΠΈΠΌβ¦ Π½Ρ, Π»Π΅Π³ΠΊΠΎΡΡΡ.
ΠΡΠΎ ΠΏΡΠΈΠΌΠ΅Ρ ΡΡΡΠ΅ΠΊΡΠ° Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ, ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΠΌΠΎΠ³ΠΎ ΠΊ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ β Π½ΠΎ ΡΡΠΎ, Π΅ΡΠ»ΠΈ ΠΌΡ Ρ
ΠΎΡΠΈΠΌ ΠΏΠΎΠΈΠ³ΡΠ°ΡΡ Ρ ΡΠΈΠ³ΡΡΠ°ΠΌΠΈ? ΠΡΠΎΡ ΡΡΡΠ΅ΠΊΡ ΠΏΠ΅ΡΠ΅Ρ
ΠΎΠ΄Π° ΠΎΡ ΠΊΡΡΠ³Π° ΠΊ ΠΊΠ²Π°Π΄ΡΠ°ΡΡ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΡΠΎΠΌΡ ΠΆΠ΅ ΠΏΡΠΎΡΠ΅ΡΡΡ, Ρ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ΠΌ none, ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΌ ΠΏΠ΅ΡΠ΅Ρ
ΠΎΠ΄ ΠΌΠ΅ΠΆΠ΄Ρ ΡΠΎΡΡΠΎΡΠ½ΠΈΡΠΌΠΈ, ΠΈ Π·Π°Π²ΠΈΡΠ°Π½ΠΈΠ΅ΠΌ, ΡΠΏΡΠ°Π²Π»ΡΡΡΠΈΠΌ ΡΠ΅ΠΌ, ΡΡΠΎ ΠΏΡΠΎΠΈΡΡ
ΠΎΠ΄ΠΈΡ Π² ΡΠΎΡΡΠΎΡΠ½ΠΈΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ.
Π ΡΠΎΡΡΠΎΡΠ½ΠΈΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΡΡΠΎ ΠΏΡΠΎΡΡΠΎ Π±Π»ΠΎΠΊ div Ρ ΡΠΈΠ½ΠΈΠΌ ΡΠΎΠ½ΠΎΠΌ.
ΠΠ΅ΡΠ΅Ρ
ΠΎΠ΄ Π² ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ none ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ, ΡΡΠΎ ΠΊ ΡΠ³Π»Π°ΠΌ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ ΡΠ°Π΄ΠΈΡΡ 50%, ΡΡΠΎ ΡΠΎΠ·Π΄Π°Π΅Ρ ΠΊΡΡΠ³. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, ΠΎΠ½ ΠΏΡΠ΅Π²ΡΠ°ΡΠ°Π΅ΡΡΡ ΠΈΠ· ΠΊΡΡΠ³Π° (Ρ ΡΠ³Π»Π°ΠΌΠΈ, ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Π½ΡΠΌΠΈ Ρ ΡΠ°Π΄ΠΈΡΡΠΎΠΌ 50%) Π² ΠΊΠ²Π°Π΄ΡΠ°Ρ (Ρ ΡΠ°Π΄ΠΈΡΡΠΎΠΌ ΡΠ³Π»ΠΎΠ², ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Π½ΡΠΌ Π½Π° 0%).
ΠΡΠ΅ΠΌΡ ΠΏΠ΅ΡΠ΅Ρ
ΠΎΠ΄Π° 350 ΠΌΡ ΡΠΏΡΠ°Π²Π»ΡΠ΅Ρ ΡΠΊΠΎΡΠΎΡΡΡΡ ΡΡΠΎΠ³ΠΎ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π½ΠΈΡ ΠΈΠ· ΠΊΡΡΠ³Π° Π² ΠΊΠ²Π°Π΄ΡΠ°Ρ. ΠΡΠΎ ΠΌΠΎΠΆΠ΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ ΠΊΠ°ΠΊ ΡΠ»ΠΎΠΆΠ½Π°Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ, Π½ΠΎ ΡΡΠΎ ΠΏΡΠΎΡΡΠΎ Π²ΠΎΠΏΡΠΎΡ ΡΠΌΠ΅Π½ΡΡΠ΅Π½ΠΈΡ ΠΎΠΊΡΡΠ³Π»ΠΎΡΡΠΈ ΠΊΡΡΠ³Π° Π΄ΠΎ ΡΠ΅Ρ
ΠΏΠΎΡ, ΠΏΠΎΠΊΠ° Ρ Π½Π΅Π³ΠΎ Π½Π΅ ΠΏΠΎΡΠ²ΡΡΡΡ ΡΠ³Π»Ρ, Π² ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ΅ ΡΠ΅Π³ΠΎ ΠΏΠΎΠ»ΡΡΠΈΡΡΡ ΠΏΡΠΎΡΡΠΎΠΉ ΡΠΈΠ½ΠΈΠΉ Π±Π»ΠΎΠΊ div.
Π Π°Π·Π»ΠΈΡΠ½ΡΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ ΠΎΡΡΡΡΡΡΠ²ΠΈΡ, Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ, Π½Π°ΠΆΠ°ΡΠΈΡ ΠΈ ΡΠΎΠΊΡΡΠΈΡΠΎΠ²ΠΊΠΈ Π² ΠΌΠ΅Π½Ρ ΡΠΎΡΡΠΎΡΠ½ΠΈΠΉ ΠΈΠ·Π²Π΅ΡΡΠ½Ρ ΠΊΠ°ΠΊ ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡΡ. ΠΡ Π½Π΅ Π±ΡΠ΄Π΅ΠΌ Π²Π΄Π°Π²Π°ΡΡΡΡ Π² ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎΡΡΠΈ ΠΎ ΡΠ°Π·Π»ΠΈΡΠΈΡΡ
ΠΌΠ΅ΠΆΠ΄Ρ Π½ΠΈΠΌΠΈ Π·Π΄Π΅ΡΡ, Π½ΠΎ ΠΎΠ·Π½Π°ΠΊΠΎΠΌΡΡΠ΅ΡΡ Ρ ΡΡΠΈΠΌ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²ΠΎΠΌ Π² Webflow University, ΡΡΠΎΠ±Ρ ΡΠ·Π½Π°ΡΡ Π±ΠΎΠ»ΡΡΠ΅.
ΠΡ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠ΅ΡΠ΅ΠΉΡΠΈ Π½Π° ΡΡΡ ΡΡΡΠ°Π½ΠΈΡΡ ΠΏΠΎΠ»ΠΈΠ³ΠΎΠ½Π° Π² Webflow. Π Π½Π΅ΠΌ Π΅ΡΡΡ ΡΡΠΈ ΡΡΡΠ΅ΠΊΡΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π΄ΡΡΠ³ΠΎΠ΅ Π΄Π»Ρ ΠΈΠ·ΡΡΠ΅Π½ΠΈΡ β ΠΏΡΠΎΡΡΠΎ ΡΠ΅Π»ΠΊΠ½ΠΈΡΠ΅ Π·Π½Π°ΡΠΎΠΊ Pages Π½Π° Π»Π΅Π²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ².
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠΈΠ»ΡΡΡΠΎΠ² Π΄Π»Ρ Π²ΡΡ ΠΎΠ΄Π° Π·Π° ΡΠ°ΠΌΠΊΠΈ ΠΎΡΠ½ΠΎΠ²
ΠΡ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅Π»ΠΈ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΡΡΡΠ΅ΠΊΡΠΎΠ² ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° ΠΈ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΡ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ ΠΏΠ΅ΡΠ΅Ρ
ΠΎΠ΄Π° ΠΏΡΠΈ ΠΎΡΡΡΡΡΡΠ²ΠΈΠΈ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ.Π§ΡΠΎΠ±Ρ ΡΠΎΠ·Π΄Π°ΡΡ Π±ΠΎΠ»Π΅Π΅ ΡΠ»ΠΎΠΆΠ½ΡΠ΅ ΡΡΡΠ΅ΠΊΡΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ, ΡΠ°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ ΠΏΠΎΡΡΠ΅ΠΏΠ΅Π½Π½ΠΎΠ΅ ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΠ΅ ΠΈΠ»ΠΈ ΠΈΡΡΠ΅Π·Π½ΠΎΠ²Π΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΈΠ»ΠΈ ΡΠ°ΡΠΊΡΠ°ΡΠΈΠ²Π°Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² Π³ΡΠ°Π΄Π°ΡΠΈΡΡ
ΡΠ΅ΡΠΎΠ³ΠΎ, Π½Π°ΠΌ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ ΡΠΈΠ»ΡΡΡΡ.
Latinxs Who Design β ΡΡΠΎ Π²ΡΡΡΠ°Π²ΠΊΠ° Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ΡΠΎΠ², ΠΎΡΠ³Π°Π½ΠΈΠ·ΠΎΠ²Π°Π½Π½ΡΡ
Π² Π²ΠΈΠ΄Π΅ ΡΠ΅ΡΠΊΠΈ. ΠΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° Π½Π° ΠΊΠ°ΠΆΠ΄ΡΠΉ ΡΠ΅ΡΠ½ΠΎ-Π±Π΅Π»ΡΠΉ ΡΠ½ΠΈΠΌΠΎΠΊ Π² Π³ΠΎΠ»ΠΎΠ²Ρ ΠΎΠ½ ΠΎΠΊΡΠ°ΡΠΈΠ²Π°Π΅ΡΡΡ ΠΈ ΡΠ²Π΅Π»ΠΈΡΠΈΠ²Π°Π΅ΡΡΡ.
ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΏΠΎΡΠΌΠΎΡΡΠΈΠΌ, ΡΡΠΎ ΠΏΡΠΎΠΈΡΡ
ΠΎΠ΄ΠΈΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ°.
ΠΠ΄Π΅ΡΡ ΠΌΡ Π²ΠΈΠ΄ΠΈΠΌ ΡΡΡΠ΅ΠΊΡ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π½ΠΈΡ (ΡΠΎΡΠ½ΠΎ ΡΠ°ΠΊΠΎΠΉ ΠΆΠ΅, ΠΊΠ°ΠΊ ΠΏΡΠΈ ΡΠ²Π΅Π»ΠΈΡΠ΅Π½ΠΈΠΈ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΡ ΡΠ°ΡΡΠΌΠ°ΡΡΠΈΠ²Π°Π»ΠΈ ΡΠ°Π½Π΅Π΅), ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΡΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π²Π²Π΅ΡΡ
Π½Π° 1.2 ΡΠ°Π·Π° ΠΏΠΎ ΠΎΡΡΠΌ X ΠΈ Y.
Π’Π°ΠΊΠΆΠ΅ Π΅ΡΡΡ Π΄Π²Π° ΡΠΈΠ»ΡΡΡΠ°: Π΄Π»Ρ Π½Π°ΡΡΡΠ΅Π½Π½ΠΎΡΡΠΈ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ 110%, Π° Π΄Π»Ρ ΠΊΠΎΠ½ΡΡΠ°ΡΡΠ° β 120%.
ΠΠ°Π²Π°ΠΉΡΠ΅ Π²Π΅ΡΠ½Π΅ΠΌΡΡ ΠΊ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ none ΠΈ ΠΏΠΎΡΠΌΠΎΡΡΠΈΠΌ, Ρ ΡΠ΅Π³ΠΎ Π½Π°ΡΠΈΠ½Π°ΡΡΡΡ ΡΡΠΈ ΡΠΈΠ»ΡΡΡΡ.
ΠΡ Π²ΠΈΠ΄ΠΈΠΌ, ΡΡΠΎ Π½Π°ΡΡΡΠ΅Π½Π½ΠΎΡΡΡ Π½Π°ΡΠΈΠ½Π°Π΅ΡΡΡ Ρ 0%, ΡΡΠΎ ΡΠ΄Π°Π»ΡΠ΅Ρ Π²Π΅ΡΡ ΡΠ²Π΅Ρ, ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²ΡΠ²Π°Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² ΡΠ΅ΡΠ½ΠΎ-Π±Π΅Π»ΡΠ΅. ΠΠΎΠ½ΡΡΠ°ΡΡΠ½ΠΎΡΡΡ Π½Π°ΡΠΈΠ½Π°Π΅ΡΡΡ ΡΠΎ 109% ΠΈ ΡΠ²Π΅Π»ΠΈΡΠΈΠ²Π°Π΅ΡΡΡ Π΄ΠΎ 120% ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ°, Π΄Π΅Π»Π°Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π±ΠΎΠ»Π΅Π΅ Π²ΡΡΠ°ΠΆΠ΅Π½Π½ΡΠΌ, Π° ΡΡΠΎΡ ΡΡΡΠ΅ΠΊΡ β Π±ΠΎΠ»Π΅Π΅ Π΄ΡΠ°ΠΌΠ°ΡΠΈΡΠ½ΡΠΌ.Π ΠΎΠ±ΠΎΠΈΠΌ ΡΡΡΠ΅ΠΊΡΠ°ΠΌ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ Π²ΡΠ΅ΠΌΡ ΠΏΠ΅ΡΠ΅Ρ
ΠΎΠ΄Π° 800 ΠΌΠΈΠ»Π»ΠΈΡΠ΅ΠΊΡΠ½Π΄.
ΠΠ°ΡΡΠ΄Ρ Ρ Π½Π°ΡΡΡΠ΅Π½Π½ΠΎΡΡΡΡ ΠΈ ΠΊΠΎΠ½ΡΡΠ°ΡΡΠΎΠΌ, Π΅ΡΡΡ ΠΈ Π΄ΡΡΠ³ΠΈΠ΅ ΡΠΈΠ»ΡΡΡΡ Π½Π° Π²ΡΠ±ΠΎΡ, ΡΠ°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ ΠΏΠΎΠ²ΠΎΡΠΎΡ ΠΎΡΡΠ΅Π½ΠΊΠ° ΠΈ ΡΠ°Π·ΠΌΡΡΠΈΠ΅. Π Π°Π΄ΠΈ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ° Π΄Π°Π²Π°ΠΉΡΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ ΡΠΈΠ»ΡΡΡ ΡΠ°Π·ΠΌΡΡΠΈΡ Ρ ΡΠ°Π΄ΠΈΡΡΠΎΠΌ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ 5 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΈ ΠΏΠΎΡΠΌΠΎΡΡΠΈΠΌ, ΠΊΠ°ΠΊ ΡΡΠΎ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ.
ΠΠ°, ΡΡΠΎ ΠΌΠ½ΠΎΠ³ΠΎΠ²Π°ΡΠΎ, Π΅ΡΠ»ΠΈ Π½Π΅ ΡΡΠΈΡΡΠ²Π°ΡΡ Π²Π»ΠΈΡΠ½ΠΈΠ΅ ΠΎΡΠΈΠ³ΠΈΠ½Π°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΡΡΠ΅ΠΊΡΠ°. ΠΡΠΎΡΠ²Π»Π΅Π½ΠΈΠ΅ ΡΠ΄Π΅ΡΠΆΠ°Π½Π½ΠΎΡΡΠΈ ΠΈ ΠΎΡΡΡΡΡΡΠ²ΠΈΠ΅ Π½Π°Π³ΡΠΎΠΌΠΎΠΆΠ΄Π΅Π½ΠΈΡ ΡΡΡΠ΅ΠΊΡΠΎΠ² Π΄Π΅Π»Π°Π΅Ρ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΠΌΠΈ, Π° Π½Π΅ ΡΠ°Π·Π΄ΡΠ°ΠΆΠ°ΡΡΠΈΠΌΠΈ.
ΠΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΠΊΠ»ΠΎΠ½ΠΈΡΠΎΠ²Π°ΡΡ ΠΈΠ»ΠΈ ΠΈΠ·ΡΡΠΈΡΡ ΡΡΠΎΡ Π΄ΠΈΠ·Π°ΠΉΠ½ Π΄Π°Π»ΡΡΠ΅, ΠΏΡΠΎΠ²Π΅ΡΡΡΠ΅ Π΅Π³ΠΎ Π½Π° Webflow.
ΠΠ°ΡΠ°Π»ΠΎ ΡΠ°Π±ΠΎΡΡ Ρ ΡΠΈΠ½Ρ ΡΠΎΠ½ΠΈΠ·ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌΠΈ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠΌΠΈ
Π§ΡΠΎ Π΄Π΅Π»Π°ΡΡ, Π΅ΡΠ»ΠΈ Π²Ρ Ρ
ΠΎΡΠΈΡΠ΅ ΡΠΎΠ·Π΄Π°ΡΡ Π±ΠΎΠ»Π΅Π΅ ΡΠ»ΠΎΠΆΠ½ΡΠ΅ ΡΡΡΠ΅ΠΊΡΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ, ΡΠ°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ Π·Π°ΠΏΡΡΠΊΠ°Π΅ΠΌΠ°Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΠΌΠΈ ΡΠΈΠ½Ρ
ΡΠΎΠ½ΠΈΠ·ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌΠΈ ΡΠ°Π³Π°ΠΌΠΈ? ΠΠ° ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΠΎΠΉ ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΠΈ Π²ΡΡΠ΅, ΡΠ΄Π΅Π»Π°Π½Π½ΠΎΠΉ Digital Bake, Π½Π° Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π²Π»ΠΈΡΠ΅Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ, Π·Π°ΠΏΡΡΠΊΠ°Π΅ΠΌΠ°Ρ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° ΠΌΡΡΠΈ Π½Π° Π½ΠΈΡ
.
Π‘ΡΡΠ°Π½ΠΈΡΠ° Π³ΡΡΠΏΠΏΡ β ΠΎΡΠ»ΠΈΡΠ½ΡΠΉ ΡΠΏΠΎΡΠΎΠ± ΠΏΠ΅ΡΡΠΎΠ½Π°Π»ΠΈΠ·ΠΈΡΠΎΠ²Π°ΡΡ Π²Π°Ρ Π±ΠΈΠ·Π½Π΅Ρ, Π½ΠΎ ΡΡΠΈ ΡΡΡΠ°Π½ΠΈΡΡ, ΠΊΠ°ΠΊ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ, ΡΡΠ°ΡΠΈΡΠ½Ρ ΠΈ Π½Π΅ Π²ΡΠ·ΡΠ²Π°ΡΡ ΠΎΡΠΎΠ±ΠΎΠ³ΠΎ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ°, ΡΡΠΎΠ±Ρ ΡΠ΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ Π²Π°ΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅. Digital Bake ΠΏΡΠΈΠ²Π½ΠΎΡΠΈΡ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΠΎΡΡΡ Π² ΡΠΎ, ΡΡΠΎ ΡΠ°ΡΡΠΎ ΡΠΏΡΡΠΊΠ°Π΅ΡΡΡ ΠΈΠ· Π²ΠΈΠ΄Ρ.
ΠΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΡΡ Π² Π±Π»ΠΎΠΊΠ΅ div Β«Team Member WrapperΒ». Π‘ΠΈΠΌΠ²ΠΎΠ» Π±ΠΎΠ»ΡΠ° ΡΡΠ΄ΠΎΠΌ Ρ Π½ΠΈΠΌ Π² Π½Π°Π²ΠΈΠ³Π°ΡΠΎΡΠ΅ Π³ΠΎΠ²ΠΎΡΠΈΡ Π½Π°ΠΌ, ΡΡΠΎ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ Π±ΡΠ»ΠΎ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΎ.
ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΏΠΎΡΠΌΠΎΡΡΠΈΠΌ Π½Π° ΡΡΠΎ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΠ΅:
ΠΠ½ ΠΈΠΌΠ΅Π΅Ρ ΡΡΠΈΠ³Π³Π΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΡΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° Π½Π° Π±Π»ΠΎΠΊ div Β«Team Member WrapperΒ» Π·Π°ΠΏΡΡΠΊΠ°Π΅ΡΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ.
ΠΡΠΈ Π½Π°ΠΆΠ°ΡΠΈΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ Β«ΠΠ°Π²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΌΡΡΠΈΒ» ΠΎΡΠΊΡΡΠ²Π°Π΅ΡΡΡ ΠΏΠΎΠ΄ΡΠΎΠ±Π½Π°Ρ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ ΠΎΠ± ΡΡΠΎΠΉ Π·Π°ΠΏΡΡΠ΅Π½Π½ΠΎΠΉ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ.
ΠΠΎΡ Π·Π°ΠΏΡΡΠΊΠ°Π΅ΠΌΡΠ΅ ΠΏΠΎ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ.ΠΡ ΠΏΡΠΎΠΈΠ³Π½ΠΎΡΠΈΡΡΠ΅ΠΌ ΡΠ΅, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΎΠ·Π°Π³Π»Π°Π²Π»Π΅Π½Ρ Β«Π‘ΠΠ‘Π’ΠΠΠΒ», ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΡΠΎΡΡΠ΅Π΄ΠΎΡΠΎΡΠΈΠΌΡΡ Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΈ ΡΠ»Π΅Π½Π° ΠΊΠΎΠΌΠ°Π½Π΄Ρ.
ΠΡΠ΅Π΄Π²Π°ΡΠΈΡΠ΅Π»ΡΠ½ΡΠΉ ΠΏΡΠΎΡΠΌΠΎΡΡ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ Π½Π°ΠΌ ΡΡΡ Π·Π°ΠΏΡΡΠΊΠ°Π΅ΠΌΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ Π² Π΄Π΅ΠΉΡΡΠ²ΠΈΠΈ.
ΠΠΎΡ ΡΠΈΠ½Ρ
ΡΠΎΠ½ΠΈΠ·ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ, ΡΠΎΡΡΠ°Π²Π»ΡΡΡΠΈΠ΅ ΡΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ.
Β«Π§Π»Π΅Π½ ΠΊΠΎΠΌΠ°Π½Π΄Ρ Π§ΠΈΡΠ°ΡΡ Π΄Π°Π»ΡΡΠ΅Β» Π½Π°ΡΠΈΠ½Π°Π΅ΡΡΡ Ρ Π½Π΅ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΡΡΠΈ 0%, ΠΊΠΎΡΠΎΡΠ°Ρ ΡΠ²Π΅Π»ΠΈΡΠΈΠ²Π°Π΅ΡΡΡ Π΄ΠΎ 100% Π² ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ 20 ΡΠ΅ΠΊΡΠ½Π΄ ΠΈ Π²ΡΠ·ΡΠ²Π°Π΅Ρ ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ Β«Π§ΠΈΡΠ°ΡΡ Π΄Π°Π»ΡΡΠ΅Β».
ΠΠΎΡ ΡΡΠΎ Π½Π°ΡΠ°Π»ΠΎ:
Π ΡΠ΅ΡΠ΅Π· 20 ΡΠ΅ΠΊΡΠ½Π΄:
Β«ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅Π½Π° ΠΊΠΎΠΌΠ°Π½Π΄ΡΒ» ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΡΠ΅ΡΡΡ Π΄ΠΎ 1.05 ΠΏΠΎ ΠΎΡΡΠΌ X ΠΈ Y, Π½Π°ΡΠΈΠ½Π°Ρ Ρ 0 ΡΠ΅ΠΊΡΠ½Π΄:
Β«Team Member Hover OutΒ» ΠΏΡΠΎΡΡΠΎ ΠΌΠ΅Π½ΡΠ΅Ρ ΡΡΠΎΡ ΡΡΡΠ΅ΠΊΡ, Π²ΠΎΠ·Π²ΡΠ°ΡΠ°Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΎΠ±ΡΠ°ΡΠ½ΠΎ Π² ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΠΈ Π·Π°ΡΡΠ°Π²Π»ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ Β«Π§ΠΈΡΠ°ΡΡ Π΄Π°Π»ΡΡΠ΅Β» ΠΈΡΡΠ΅Π·Π½ΡΡΡ.
Π£Π·Π½Π°ΠΉΡΠ΅ ΠΏΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅, ΠΊΠ°ΠΊ ΡΡΠΎ Π±ΡΠ»ΠΎ ΡΠ΄Π΅Π»Π°Π½ΠΎ, ΠΎΡΠΊΡΡΠ² Π΅Π³ΠΎ Π² Webflow. ΠΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π΅ ΠΈΠΌΠ΅ΡΡ Π½ΠΈΡΠ΅Π³ΠΎ ΠΎΠ±ΡΠ΅Π³ΠΎ Ρ ΡΠ΅ΠΌ, ΡΡΠΎ ΠΌΡ ΡΡΠΎΠΊΡΡΠΈΡΠΎΠ²Π°Π»ΠΈ Π½Π° ΡΡΠΎΠΌ ΠΏΠΎΡΡΠ΅, Π½ΠΎ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ²ΠΎΠ±ΠΎΠ΄Π½ΠΎ ΠΈΡΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΡ, ΡΡΠΎ Π΅ΡΠ΅ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ Π² ΡΡΠΎΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅. Π ΠΎΠ·Π½Π°ΠΊΠΎΠΌΡΡΠ΅ΡΡ Ρ Π½Π°ΡΠΈΠΌ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²ΠΎΠΌ ΠΏΠΎ ΡΡΠΈΠ³Π³Π΅ΡΠ°ΠΌ ΠΈ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ Π΄Π»Ρ Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎΠ³ΠΎ ΠΎΠ±ΡΡΡΠ½Π΅Π½ΠΈΡ.
ΠΠ΅ΡΠ΅Ρ ΠΎΠ΄ ΠΊ Π±ΠΎΠ»Π΅Π΅ ΠΏΡΠΎΠ΄Π²ΠΈΠ½ΡΡΡΠΌ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΡΠΌ ΠΏΡΡΠ΅ΠΌ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ 3D-ΠΊΠ°ΡΡΡ ΠΊΠΎΠΌΠ°Π½Π΄Ρ
ΠΡΠ° 3D-ΠΊΠ°ΡΡΠ° ΡΠ»Π΅Π½Π° ΠΊΠΎΠΌΠ°Π½Π΄Ρ (ΡΠ°ΠΊΠΆΠ΅ Π»ΡΠ±Π΅Π·Π½ΠΎ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»Π΅Π½Π½Π°Ρ Digital Bake) ΠΎΡΠ½ΠΎΠ²Π°Π½Π° Π½Π° ΠΎΡΠ½ΠΎΠ²Π°Ρ
ΡΡΡΠ΅ΠΊΡΠ° Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΡ ΡΠΆΠ΅ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅Π»ΠΈ.
ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΏΠΎΡΠΌΠΎΡΡΠΈΠΌ, ΠΊΠ°ΠΊ ΡΡΠΎ Π±ΡΠ»ΠΎ ΡΠ΄Π΅Π»Π°Π½ΠΎ.
ΠΠ°ΠΆΠ΄Π°Ρ ΡΠ°ΡΡΡ ΡΡΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° ΡΠΎΠ΄Π΅ΡΠΆΠΈΡΡΡ Π² Π±Π»ΠΎΠΊΠ΅ ΡΠ²ΡΠ·ΠΈ Ρ ΠΈΠΌΠ΅Π½Π΅ΠΌ Β«Card WrapperΒ». ΠΠΎΡ Π΅Π³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ:
ΠΠ°ΠΊ ΠΈ Π² ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅, ΠΌΡ Π²ΠΈΠ΄ΠΈΠΌ, ΡΡΠΎ Π½Π° ΡΡΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π²Π»ΠΈΡΠ΅Ρ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΠ΅.
Π©Π΅Π»ΡΠΎΠΊ ΠΏΠΎ Π·Π½Π°ΡΠΊΡ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΡ ΡΠΎΠΎΠ±ΡΠ°Π΅Ρ Π½Π°ΠΌ, ΡΡΠΎ ΡΡΠΎ ΠΈΠ½ΠΈΡΠΈΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΠ΅, ΠΈΠ½ΠΈΡΠΈΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠ΅ΠΌ ΠΊΡΡΡΠΎΡΠ° ΠΌΡΡΠΈ Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ. Π Π΄Π°Π½Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ Β«Card WrapperΒ».
ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΈΡΡΠ»Π΅Π΄ΡΠ΅ΠΌ ΡΡΠΎ, ΡΠ΅Π»ΠΊΠ½ΡΠ² ΠΌΡΡΡΡ Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ΅ Team Hover ΠΈ ΠΏΠΎΡΠΌΠΎΡΡΠ΅Π² Π½Π° Π΄Π΅ΠΉΡΡΠ²ΠΈΡ Mouse X.
ΠΠΌΠ΅ΡΡΠΎ Π²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎΠΉ ΡΠΊΠ°Π»Ρ ΠΌΡ ΠΏΠΎΠ»ΡΡΠ°Π΅ΠΌ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½ ΠΎΡ 0% Π΄ΠΎ 100%, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΠ΅ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° ΠΏΠΎ ΠΎΡΠΈ X, ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΡΡΠ΅Π΅ΡΡ Π²ΠΏΠ΅ΡΠ΅Π΄ ΠΈ Π½Π°Π·Π°Π΄ Π² ΡΡΠΎΠΉ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠΉ ΠΏΠ»ΠΎΡΠΊΠΎΡΡΠΈ, ΠΏΡΠΈ ΡΡΠΎΠΌ 0% ΡΠ²Π»ΡΠ΅ΡΡΡ Π»Π΅Π²ΠΎΠΉ ΡΡΠΎΡΠΎΠ½ΠΎΠΉ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈ 100% ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΡΠΉ.
ΠΠΎ Π²ΡΠ΅ΠΉ Β«ΠΎΠ±ΠΎΠ»ΠΎΡΠΊΠ΅ ΠΊΠ°ΡΡΡΒ» ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ ΡΡΡΠ΅ΠΊΡ ΠΏΠΎΠ²ΠΎΡΠΎΡΠ°, Π² ΡΠΎ Π²ΡΠ΅ΠΌΡ ΠΊΠ°ΠΊ Π΄ΡΡΠ³ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΏΡΠΎΡΡΠΎ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΡΡΡΡ Π² Π±ΠΎΠΊΠΎΠ²ΠΎΠΌ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠΈ ΠΏΠΎ ΠΎΡΠΈ X.
Π₯ΠΎΡΠΎΡΠΎ, Π΄Π°Π²Π°ΠΉΡΠ΅ ΠΏΠΎΡΠΌΠΎΡΡΠΈΠΌ, ΡΡΠΎ ΠΏΡΠΎΠΈΡΡ
ΠΎΠ΄ΠΈΡ Ρ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠΌΠΈ ΠΌΡΡΠΈ Y.
Π ΡΠ½ΠΎΠ²Π° ΠΌΡ ΠΏΠΎΠ»ΡΡΠ°Π΅ΠΌ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½ 0β100%, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠΎΠ±ΠΎΠΉ Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΠΎΡΠΈ Y, Π·Π°ΠΏΡΡΠΊΠ°ΡΡΠ΅Π΅ ΠΊΠ°ΠΆΠ΄ΠΎΠ΅ ΡΠΎΠ±ΡΡΠΈΠ΅ ΡΡΠΎΠΉ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ. 0% Π½Π°Ρ
ΠΎΠ΄ΠΈΡΡΡ Π²Π²Π΅ΡΡ
Ρ ΡΡΡΠ°Π½ΠΈΡΡ, Π° 100% β Π²Π½ΠΈΠ·Ρ.
ΠΡ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΊΠ»ΠΎΠ½ΠΈΡΠΎΠ²Π°ΡΡ Π΅Π³ΠΎ Π΄Π»Ρ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎΠ³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΈ ΠΏΠΎΡΠΌΠΎΡΡΠ΅ΡΡ, ΠΊΠ°ΠΊ ΠΎΠ½ Π±ΡΠ» ΠΏΠΎΡΡΡΠΎΠ΅Π½ Π² Webflow.
ΠΠ°Π»ΡΡΠ΅ Ρ ΡΡΡΠ΅ΠΊΡΠ°ΠΌΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ
ΠΡΡΠ΅ΠΊΡΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎ Π΄Π΅Π»Π°ΡΡ Π΄ΠΈΠ·Π°ΠΉΠ½ Π±ΠΎΠ»Π΅Π΅ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΠΌ. Π‘ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ Π·Π°ΡΡΠ°Π²Π»ΡΡΡ ΡΠΊΡΡΠ°ΡΡ ΡΡΠ°ΡΠΈΡΠ½ΡΠΉ ΠΌΠΎΠ·Π³.
ΠΡΡΡ ΠΌΠ½ΠΎΠ³ΠΎ Π΄ΡΡΠ³ΠΈΡ ΡΡΡΠ΅ΠΊΡΠΎΠ² Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠ΅ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΠΏΡΠΎΠ±ΠΎΠ²Π°ΡΡ, Π½ΠΎ, Π½Π°Π΄Π΅ΡΡΡ, ΡΡΠΎΠ³ΠΎ Π²ΡΡΡΠΏΠ»Π΅Π½ΠΈΡ Π±ΡΠ΄Π΅Ρ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ, ΡΡΠΎΠ±Ρ Π²Ρ Π½Π°ΡΠ°Π»ΠΈ. ΠΠ΅ΡΠ΅ΠΉΠ΄ΠΈΡΠ΅ Π½Π° Π½Π°Ρ ΠΊΡΡΡ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΡ ΠΈ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ, ΡΡΠΎΠ±Ρ ΡΠ·Π½Π°ΡΡ Π±ΠΎΠ»ΡΡΠ΅ ΠΈ ΡΠ²ΠΈΠ΄Π΅ΡΡ, ΡΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ Π΄Π»Ρ Π²Π°ΡΠΈΡ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΡ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠ².
ΠΠ°ΠΊ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ div ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS / HTML + ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ΠΎΠ²?
ΠΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ
Π½Π΅ ΠΏΠΎΠ΄Ρ
ΠΎΠ΄ΠΈΡ Π΄Π»Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ
ΡΡΡΡΠΎΠΉΡΡΠ² (Ρ
ΠΎΡΡ ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ Π²ΡΠ΅ Π±ΠΎΠ»ΡΡΠ΅ ΠΈ Π±ΠΎΠ»ΡΡΠ΅ ΡΡΡΡΠΎΠΉΡΡΠ², Β«ΡΡΠ²ΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΡΡ
ΠΊ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡΒ»).ΠΠ»Ρ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²Π° ΡΡΡΡΠΎΠΉΡΡΠ² Ρ ΡΠ°ΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΠΊΠ°ΠΊ : hover
, ΡΠ°ΠΊ ΠΈ : focus
Π΄Π»Ρ Β«Π²ΡΠΏΠ°Π΄Π°ΡΡΠΈΡ
Β» Π²Π΅ΡΠ΅ΠΉ. ΠΠ΄Π½Π°ΠΊΠΎ ΡΡΠΎ
ΡΡΠ΅Π±ΡΠ΅Ρ Β«ΡΠΎΠΊΡΡΠΈΡΡΠ΅ΠΌΡΡ
Β» ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², Π΄Π»Ρ ΠΊΠΎΡΠΎΡΡΡ
Ρ ΠΎΠ±ΡΡΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠ΅Π³ nchor
.
ΠΡΠ²Π΅ΡΠ°Ρ Π½Π° Π²Π°ΡΠΈ Π²ΠΎΠΏΡΠΎΡΡ:
1) ΡΠΎΠ³Π»Π°ΡΠΎΠ²Π°ΡΡ Π²Π΅ΡΡ Π½ΠΈΠΉ ΠΈ Π½ΠΈΠΆΠ½ΠΈΠΉ ΡΠ΅Π³ΠΈΡΡΡ!
ΠΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ / ΡΠ΅Π»ΡΠΊΠ΅ Π²Π½Π΅ΡΠ½ΠΈΠΉ Π²ΠΈΠ΄
ΠΎΡΡΠ°Π΅ΡΡΡ Π² ΡΠΎΠΊΡΡΠ΅ ΠΈ, ΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎ, Π΅Π³ΠΎ ΡΠΎΠ΄ΡΡΠ²Π΅Π½Π½ΡΠΉ ΠΎΠ±ΡΠ΅ΠΊΡ #content
ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ Π²ΠΈΠ΄ΠΈΠΌΡΠΌ.ΠΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° .shorttext
Π±ΡΠ΄Π΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Π΅Π³ΠΎ Π±ΡΠ°Ρ .longtext
.
ΠΡΠΈ Π½Π°ΠΆΠ°ΡΠΈΠΈ .shorttext
(ΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ Π³Π΄Π΅-Π½ΠΈΠ±ΡΠ΄Ρ Π² #content
) ΠΏΠΎΠ»Π΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΡΠ½ΠΎΠ²Π° Π·Π°ΠΊΡΠΎΠ΅ΡΡΡ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ Π²Π½Π΅ΡΠ½ΠΈΠΉ
ΡΠ½ΠΎΠ²Π° ΡΠ΅ΡΡΠ΅Ρ ΡΠΎΠΊΡΡ.
a {
ΡΠ²Π΅Ρ: currentColor;
ΡΠ΅ΠΊΡΡ-ΡΠΊΡΠ°ΡΠ΅Π½ΠΈΠ΅: Π½Π΅Ρ
}
.ΠΊΠ°ΡΡΠΈΠ½Π° {
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅;
ΡΠ»Π΅Π²Π°: 0px;
Π²ΠΏΡΠ°Π²ΠΎ: 0 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Π²Π΅ΡΡ
: 0px;
Π²Π½ΠΈΠ·Ρ: 0px;
ΠΌΠ°ΡΠΆΠ°: Π°Π²ΡΠΎ;
ΡΠΈΡΠΈΠ½Π°: 375 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Π²ΡΡΠΎΡΠ°: 375 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
.ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅ {
/ * ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: Π½Π΅Ρ; Π£Π΄Π°Π»ΠΈΡΡ */
Π½Π΅ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΡΡΡ: 0; /* ΠΠΎΠ±Π°Π²Π»ΡΡΡ */
ΠΏΠ΅ΡΠ΅Ρ
ΠΎΠ΄: Π²ΡΠ΅ 150 ΠΌΡ Π»Π΅Π³ΠΊΠΎΡΡΡ Π²Ρ
ΠΎΠ΄Π°-Π²ΡΡ
ΠΎΠ΄Π°; /* ΠΠΎΠ±Π°Π²Π»ΡΡΡ */
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅;
ΡΠ»Π΅Π²Π°: -800px;
Π²ΠΏΡΠ°Π²ΠΎ: 0 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Π²Π΅ΡΡ
: 0px;
Π²Π½ΠΈΠ·Ρ: 0px;
ΠΌΠ°ΡΠΆΠ°: Π°Π²ΡΠΎ;
ΡΠΈΡΠΈΠ½Π°: 0; / * [ΠΠΠΠΠ―ΠΠΠ’ΠΠΠ¬ΠΠ] ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ Ρ 300 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ * /
Π²ΡΡΠΎΡΠ°: 0; / * ΡΠΎ ΠΆΠ΅ ΡΠ°ΠΌΠΎΠ΅ * /
ΡΠ²Π΅Ρ ΡΠΎΠ½Π°: # 7377a8;
}
.ΡΡΠΈΠ³Π³Π΅Ρ: hover + .content,
.trigger: focus + .content {
/ * Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΠΌ Π΄Π»Ρ ΠΏΠΎΡΡΠΎΡΠ½Π½ΠΎΠ³ΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ. ΡΠ΅Π»ΠΊΠ½ΠΈΡΠ΅ Π² Π΄ΡΡΠ³ΠΎΠΌ ΠΌΠ΅ΡΡΠ΅, ΡΡΠΎΠ±Ρ ΡΠ½ΠΎΠ²Π° Π·Π°ΠΊΡΡΡΡ * /
/ * display: block; Π£Π΄Π°Π»ΠΈΡΡ */
Π½Π΅ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΡΡΡ: 1; /* ΠΠΎΠ±Π°Π²Π»ΡΡΡ */
ΡΠΈΡΠΈΠ½Π°: 300 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; / * [ΠΠΠΠΠ―ΠΠΠ’ΠΠΠ¬ΠΠ] Π΄ΠΎΠ±Π°Π²ΠΈΡΡ, ΡΠΌ. ΠΡΡΠ΅ * /
Π²ΡΡΠΎΡΠ°: 300 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
.shorttext {/ * ΡΠΎΠ»ΡΠΊΠΎ ΠΏΡΠΈΡΡΠ½ΡΠΉ Π³Π»Π°Π·Ρ * /
ΡΠΈΡΠΈΠ½Π°: 100%;
Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ°: ΡΠ΅Π½ΡΡ
}
.longtext {
Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: Π½Π΅Ρ
}
.shorttext: hover + .longtext {
Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: Π±Π»ΠΎΠΊ;
}
/ * ΠΌΠ°Π»Π΅Π½ΡΠΊΠΈΠΉ ΠΏΠΎΠΌΠΎΡΠ½ΠΈΠΊ ΠΏΠΎ ΠΎΡΠ»Π°Π΄ΠΊΠ΅ * /
[outlines = "1"] * {
ΠΠΎΠ½ΡΡΡ: ΠΏΡΠ½ΠΊΡΠΈΡΠ½ΡΠΉ ΡΠΈΠΎΠ»Π΅ΡΠΎΠ²ΡΠΉ 1px
}
![]()
ΠΊΠΎΡΠΎΡΠΊΠΈΠΉ Π²ΡΡΡΠΏΠΈΡΠ΅Π»ΡΠ½ΡΠΉ ΡΠ΅ΠΊΡΡ, Π½Π°Π²Π΅Π΄ΠΈΡΠ΅ Π½Π° ΠΌΠ΅Π½Ρ
Lorem ipsum dolor sit amet, exci dolorem est ad. Sumo rebum prompta vim ad. Legendos expetendis id sed. Ex ius quem accusamus, pri et al.