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*/ Β Β Β Β -o-transition: all 1s ease; Β Β Β -ms-transition: all 1s ease; Β Β Β Β Β transition: all 1s ease; } Β .grow img:hover { Β width: 400px; Β height: 400px; } |
Π‘Π°ΠΌΠΎ ΠΏΠΎ ΡΠ΅Π±Π΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ 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*/ } Β .vertpan img:hover { Β margin-top: -200px; } |
Π’Π΅ΠΏΠ΅ΡΡ ΡΠΌΠ΅ΡΠ°Π΅ΠΌ Π²Π²Π΅ΡΡ Π½Π° 200px.
Π’ΡΠ°Π½ΡΡΠΎΡΠΌΠ°ΡΠΈΡ
ΠΠΎΠ²ΡΡΠ°Π΅ΠΌ ΡΠ»ΠΎΠΆΠ½ΠΎΡΡΡ ΡΠΎΠ·Π΄Π°Π²Π°Π΅ΠΌΡΡ ΡΡΡΠ΅ΠΊΡΠΎΠ². ΠΠ°ΡΠ½Π΅ΠΌ Ρ ΠΏΡΠΎΡΡΠΎΠ³ΠΎ Π½Π°ΠΊΠ»ΠΎΠ½Π°, Π° Π΄Π°Π»ΡΡΠ΅ Π±ΠΎΠ»ΡΡΠ΅. ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ Π±ΡΠ΄Π΅Ρ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ transform β Π΅ΡΠ΅ ΡΡΡΠ΅ΠΊΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ transform.
ΠΠ°ΠΊΠ»ΠΎΠ½
ΠΠ°ΠΌΠ΅ΡΠ°ΡΠ΅Π»ΡΠ½ΡΠΉ ΡΡΡΠ΅ΠΊΡ. ΠΠ΅Π±ΠΎΠ»ΡΡΠΎΠΉ ΠΏΠΎΠ²ΠΎΡΠΎΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ΅ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΊΡΡΡΠΎΡΠ° ΠΌΡΡΠΈ.
1 | <div> |
1 | /*TILT*/ |
ΠΡΠ΅ ΡΡΠΎ Π½ΡΠΆΠ½ΠΎ Π±ΡΠ»ΠΎ, ΡΠ°ΠΊ ΡΡΠΎ ΠΏΠΎΠ²Π΅ΡΠ½ΡΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π° Π΄Π΅ΡΡΡΡ Π³ΡΠ°Π΄ΡΡΠΎΠ². ΠΡΠΎΡΡΠΎ ΠΈ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΠΎ! ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ ΡΡΡΠ΅ΠΊΡ Π½Π°ΡΠ΅Π»Π΅Π½ Π½Π° ΡΠ°ΠΌ ΠΊΠ»Π°ΡΡ, Π° Π½Π΅ Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅.
ΠΠΎΠ²ΠΎΡΠΎΡ
ΠΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π½Π°Π²ΠΎΠ΄ΠΈΡ Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅Π΅ Π½Π°ΡΠΈΠ½Π°Π΅Ρ Π²ΡΠ°ΡΠ°ΡΡΡΡ. ΠΠΎΠΊΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π²ΡΠ°ΡΠ°Π΅ΡΡΡ, Π±Π»ΠΎΠΊ Π΄ΠΈΠ² ΡΡΠ°Π½ΡΡΠΎΡΠΌΠΈΡΡΠ΅ΡΡΡ Π² ΠΊΡΡΠ³. Π ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ΅ Π²ΡΡ ΠΎΠ΄ΠΈΡ ΡΡΠΏΠ΅Ρ ΡΡΡΠ΅ΠΊΡ.
1 | <div> |
1 | /*MORPH*/ |
Π‘ΡΡΡ Π·Π°ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ Π² ΡΠΎΠΌ, ΡΡΠΎ Π΄Π»Ρ ΠΊΠ»Π°ΡΡΡ morph Π²ΡΠ°ΡΠ°Π΅ΡΡΡ Π½Π° 360 Π³ΡΠ°Π΄ΡΡΠΎΠ² ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° ΠΌΡΡΠΈ. Π ΡΡΠΎ ΠΆΠ΅ Π²ΡΠ΅ΠΌΡ, border-radius ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ 50%, Π² ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ΅ ΡΠ΅Π³ΠΎ ΠΏΠΎΠ»ΡΡΠ°Π΅ΡΡΡ ΠΊΡΡΠ³.
Π€ΠΎΠΊΡΡΠΈΡΠΎΠ²ΠΊΠ°
ΠΠΎΡ Π΅ΡΠ΅ ΠΎΠ΄ΠΈΠ½ ΠΏΠΎΠ΄ΠΎΠ±Π½ΡΠΉ ΡΡΡΠ΅ΠΊΡ. ΠΠ΄Π½Π°ΠΊΠΎ Π²ΡΠ°ΡΠ΅Π½ΠΈΡ Π½Π΅ Π±ΡΠ΄Π΅Ρ ΠΏΡΠΎΡΡΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π·Π°ΠΊΡΡΠ³Π»ΠΈΠΌ ΠΈ ΡΠ²Π΅Π»ΠΈΡΠΈΠΌ ΡΠΎΠ»ΡΠΈΠ½Ρ Π³ΡΠ°Π½ΠΈΡΡ.
1 | <div> |
1 | /*FOCUS*/ } Β .focus:hover { Β border: 70px solid #000; Β border-radius: 50%; } |
ΠΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ°, ΡΠ²Π΅Π»ΠΈΡΠΈΠ²Π°Π΅ΠΌ ΡΠΎΠ»ΡΠΈΠ½Ρ Π³ΡΠ°Π½ΠΈΡΡ Ρ 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. Π‘ΠΏΠ°ΡΠΈΠ±ΠΎ!
ΠΡΠΈΠ³ΠΈΠ½Π°Π»ΡΠ½ΡΠ΅ hover-ΡΡΡΠ΅ΠΊΡΡ Π΄Π»Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π½Π° ΡΠΈΡΡΠΎΠΌ CSS3
ΠΡΠ΅ΠΆΠ΄Π΅ Π²ΡΠ΅Π³ΠΎ, Π΄Π»Ρ ΡΠ΅Ρ
ΠΊΡΠΎ Π½Π΅ ΡΠΎΠ²ΡΠ΅ΠΌ Π΅ΡΡ Π² ΡΠ΅ΠΌΠ΅ ΠΈΠ»ΠΈ ΡΠΎΠ²ΡΠ΅ΠΌ Π½Π΅ Π² ΡΠ΅ΠΌΠ΅, ΠΏΠΎΡΡΠ½Ρ Π²ΠΊΡΠ°ΡΡΠ΅, ΡΡΠΎ ΡΠ°ΠΊΠΎΠ΅ hover-ΡΡΡΠ΅ΠΊΡΡ. ΠΡΠΎ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ Π²ΠΈΠ΄Ρ ΡΡΡΠ΅ΠΊΡΠΎΠ² (Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΠΈΠ΅ ΠΏΠΎΠ΄ΠΏΠΈΡΠΈ, ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΊΠΈ, ΠΏΠ»Π°Π²Π½ΡΠ΅ ΠΏΠ΅ΡΠ΅Ρ
ΠΎΠ΄Ρ, ΡΡΠ°Π½ΡΡΠΎΡΠΌΠ°ΡΠΈΡ, ΡΠΎΡΠ°ΡΠΈΡ, ΡΠ²Π΅Π»ΠΈΡΠ΅Π½ΠΈΠ΅, ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΈ Ρ.Π΄ ΠΈ Ρ.ΠΏ.) ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΠΌΡΠ΅ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ Π²Π΅Π±-ΡΠ°ΠΉΡΠ° ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° Π½ΠΈΡ
ΠΊΡΡΡΠΎΡΠ° ΠΌΡΡΠΈ. Π Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½Ρ ΡΡΠΈ ΡΡΡΠ΅ΠΊΡΡ ΠΌΠΎΠ³ΡΡ ΠΊΠ°ΠΊ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ
ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² jQuery, ΡΠ°ΠΊ ΠΈ Π½Π° ΡΠΈΡΡΠΎΠΌ CSS3.
Π‘Π΅Π³ΠΎΠ΄Π½Ρ Ρ ΠΏΠΎΠ΄Π³ΠΎΡΠΎΠ²ΠΈΠ» Π±ΠΎΠ»ΡΡΡΡ ΠΏΠΎΠ΄Π±ΠΎΡΠΊΡ ΠΎΡΠΈΠ³ΠΈΠ½Π°Π»ΡΠ½ΡΡ
hover-ΡΡΡΠ΅ΠΊΡΠΎΠ² Π΄Π»Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΡΠΎΠ·Π΄Π°Π½Π½ΡΡ
Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS3, Π±Π΅Π· ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ javascript-Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊ. Π Π΄ΠΎΡΡΠΎΠΈΠ½ΡΡΠ²Π°Ρ
ΠΈ Π½Π΅Π΄ΠΎΡΡΠ°ΡΠΊΠ°Ρ
ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ hover-ΡΡΡΠ΅ΠΊΡΠΎΠ² Π½Π° ΡΠΈΡΡΠΎΠΌ CSS3 Π½Π΅ Π±ΡΠ΄Ρ, ΡΡΠΎ Π΄ΡΡΠ³Π°Ρ ΡΠ΅ΠΌΠ°, ΠΏΡΠΎΡΡΠΎ ΡΠΌΠΎΡΡΠΈΡΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΡ, ΠΈ ΠΏΡΠΈ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΠΏΠΎΠ½ΡΠ°Π²ΠΈΠ²ΡΠΈΠΉΡΡ Ρ ΡΠ΅Π±Ρ Π½Π° ΡΠ°ΠΉΡΠ΅. ΠΡΠ΅ ΡΡΡΠ΅ΠΊΡΡ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½Π½ΡΠ΅ Π² ΠΎΠ±Π·ΠΎΡΠ΅ ΡΠ½Π°Π±ΠΆΠ΅Π½Ρ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΡΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠΌ ΠΈ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎΠΉ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΠ΅ΠΉ Ρ ΠΈΡΡ
ΠΎΠ΄Π½ΠΈΠΊΠ°ΠΌΠΈ. ΠΠ°Π½ΡΠ°Π»Ρ ΠΏΠΎ-Π±ΠΎΠ»ΡΡΠ΅ΠΉ ΡΠ°ΡΡΠΈ Π½Π° Π±ΡΡΠΆΡΠΈΠ½ΡΠΊΠΎΠΌ, Π½ΠΎ Π²ΡΡ Π±ΠΎΠ»Π΅Π΅-ΠΌΠ΅Π½Π΅Π΅ ΠΈΠ½ΡΡΠΈΡΠΈΠ²Π½ΠΎ ΠΏΠΎΠ½ΡΡΠ½ΠΎ.
Π‘ΡΠ°Π·Ρ Ρ ΠΎΡΡ ΠΎΠ±ΡΠ°ΡΠΈΡΡ Π²Π°ΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° ΡΠΎ, ΡΡΠΎ Π²ΡΠ΅ ΡΡΠΈ ΠΏΡΠΈΠΌΠ΅ΡΡ Π±ΡΠ΄ΡΡ ΠΊΠΎΡΡΠ΅ΠΊΡΠ½ΠΎ ΡΠ°Π±ΠΎΡΠ°ΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π² ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ , ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° CSS3.
ΠΠ°Π±Ρ Π½Π΅ Π»ΠΎΠΌΠ°ΡΡ ΠΎΠ±ΡΡΡ ΠΊΠ°ΡΡΠΈΠ½Ρ, Π½Π΅ ΡΡΠ°Π» ΠΊΠΎΠ²Π΅ΡΠΊΠ°ΡΡ ΠΌΠ°ΡΠΈΠ½Π½ΡΠΌ ΠΏΠ΅ΡΠ΅Π²ΠΎΠ΄ΠΎΠΌ Π½Π°Π·Π²Π°Π½ΠΈΡ ΡΡΡΠ΅ΠΊΡΠΎΠ²(Π·Π° ΠΈΡΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ΠΌ Π½Π΅ΠΊΠΎΡΠΎΡΡΡ
), ΠΎΡΡΠ°Π²ΠΈΠ» ΠΎΡΠΈΠ³ΠΈΠ½Π°Π»Ρ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² ΡΠ°ΠΊΠΈΠΌΠΈ, ΠΊΠ°ΠΊ ΠΈΡ
ΠΎΠ±ΠΎΠ·Π²Π°Π» ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊ.
Β
Hover Effect Ideas
ΠΡΠ΅Π½Ρ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΠΉ ΡΡΡΠ΅ΠΊΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΠΌΠΈΠ½ΠΈΠ°ΡΡΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠΎΠ½ΠΊΠΈΡ
Π»ΠΈΠ½ΠΈΠΉ Π² ΠΊΠΎΠ½ΡΡΡΡΠΊΡΠΈΠΈ ΠΈ ΡΠΈΠΏΠΎΠ³ΡΠ°ΡΠΈΠΈ. ΠΠ΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ
Π²ΠΈΠ΄ΠΎΠ² ΡΡΡΠ΅ΠΊΡΠΎΠ² ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΡ ΠΏΠΎΠ΄ΠΏΠΈΡΠ΅ΠΉ ΠΊ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ°ΠΌ, ΠΌΡΠ³ΠΊΠΈΠ΅ ΠΈ Π½Π΅ Π½Π°Π²ΡΠ·ΡΠΈΠ²ΡΠ΅ 3D-ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π½ΠΈΡ, ΠΈ ΠΏΠ»Π°Π²Π½ΡΠ΅ ΠΏΠ΅ΡΠ΅Ρ
ΠΎΠ΄Ρ ΠΏΡΠ΅Π²Π΄ΠΎ-ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ². Π Π°Π±ΠΎΡΠ°Π΅Ρ ΡΠΎΠ»ΡΠΊΠΎ Π² ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ
Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ
.
Β
Β
iHover
iHover ΡΡΠΎ Π²ΠΏΠ΅ΡΠ°ΡΠ»ΡΡΡΠ°Ρ ΠΊΠΎΠ»Π»Π΅ΠΊΡΠΈΡ ΡΡΡΠ΅ΠΊΡΠΎΠ² ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΡΠΈΡΡΠΎΠΌ CSS3, Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΎΠΉ Bootstrap 3. ΠΠΎΡΡΡΠΎΠ΅Π½ Π½Π° Scss CSS (ΡΠ°ΠΉΠ»), Π»Π΅Π³ΠΊΠΎ ΠΌΠΎΠ΄ΠΈΡΠΈΡΠΈΡΡΠ΅ΡΡΡ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΡΠΌΠΈ. ΠΠΎΠ΄ ΠΌΠΎΠ΄ΡΠ»ΡΠ½ΡΠΉ, Π½Π΅Ρ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ Π²ΠΊΠ»ΡΡΠ°ΡΡ Π² ΡΠ°Π±ΠΎΡΡ Π²Π΅ΡΡ ΡΠ°ΠΉΠ». 30+ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ
ΡΡΡΠ΅ΠΊΡΠΎΠ² Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΏΠ°ΠΊΠ΅ΡΠ΅. ΠΡΡ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ Ρ
ΠΎΡΠΎΡΠΎ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠΈΡΠΎΠ²Π°Π½ΠΎ, ΡΡΡΠ΅ΠΊΡΡ ΠΎΡΠ΅Π½Ρ ΠΏΡΠΎΡΡΡ Π² ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ. ΠΡΠ΅, ΡΡΠΎ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ, ΡΡΠΎ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ Π²ΡΡΡΡΠΎΠΈΡΡ HTML-ΡΠ°Π·ΠΌΠ΅ΡΠΊΡ ΠΈ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠΈΡΡ ΡΠ°ΠΉΠ» CSS Π² ΡΠ°Π±ΠΎΡΡ.
Β
Β
Caption Hover Effects
Π‘ΠΎΠ·Π΄Π°ΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΏΡΠΎΡΡΡΡ
, Π½ΠΎ ΡΡΠΈΠ»ΡΠ½ΡΡ
ΡΡΡΠ΅ΠΊΡΠΎΠ² ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π΄Π»Ρ ΠΏΠΎΠ΄ΠΏΠΈΡΠ΅ΠΉ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ. ΠΠ΄Π΅Ρ Π·Π°ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ Π² ΡΠΎΠΌ, ΡΡΠΎΠ±Ρ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΠΌΠΈΠ½ΠΈΠ°ΡΡΡΡ, ΠΏΠΎΠ»ΡΡΠΈΡΡ ΡΡΡΠ΅ΠΊΡΠ½ΠΎΠ΅ ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΠ΅ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°, ΠΈΠΌΡ Π°Π²ΡΠΎΡΠ° ΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΡΠ²ΡΠ·ΠΈ. ΠΠ»Ρ Π½Π΅ΠΊΠΎΡΠΎΡΡΡ
ΡΡΡΠ΅ΠΊΡΠΎΠ² ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½Ρ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΡΠ΅ 3D-ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π½ΠΈΡ.
Β
Β
ΠΡΡΠ΅ΠΊΡ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Π° CSS3
Π‘ΠΎΠ²ΡΠ΅ΠΌ ΡΠΆ ΠΏΡΠΎΡΡΠ΅ΡΠΊΠΈΠΉ ΡΡΡΠ΅ΠΊΡ ΠΏΠ΅ΡΠ΅Ρ
ΠΎΠ΄Π°, Π±Π΅Π· ΠΎΡΠΎΠ±ΡΡ
Π½Π°Π²ΠΎΡΠΎΡΠΎΠ², ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΠΊΡΡΠ³Π»ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π² ΡΠ°ΠΌΠΊΠ΅, ΡΡΠ°Π½ΡΡΠΎΡΠΌΠΈΡΡΠ΅ΡΡΡ ΠΌΠ΅Π½ΡΡ ΡΠΎΠΊΡΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΈ Π²ΡΡ.
Β
Β
Hover-ΡΡΡΠ΅ΠΊΡΡ Π΄Π»Ρ ΠΌΠΈΠ½ΠΈΠ°ΡΡΡ Π½Π° CSS3
Π Π°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅Ρ ΡΠ²ΠΎΡ ΡΠ°Π±ΠΎΡΡ, ΠΊΠ°ΠΊ ΠΏΡΠΈΠΌΠ΅Ρ Π³Π°Π»Π΅ΡΠ΅ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Ρ ΡΡΡΠ΅ΠΊΡΠ°ΠΌΠΈ ΠΏΠ΅ΡΠ΅Ρ
ΠΎΠ΄ΠΎΠ² ΠΏΡΠΈ ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΠΈ Π°Π½Π½ΠΎΡΠ°ΡΠΈΠΉ(ΠΏΠΎΠ΄ΠΏΠΈΡΠ΅ΠΉ) ΠΊ ΠΌΠΈΠ½ΠΈΠ°ΡΡΡΠ°ΠΌ. ΠΠ°ΡΠ²Π»Π΅Π½Π° ΡΠ²Π΅ΡΠ΅Π½Π½Π°Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠΌΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌΠΈ, Π²ΠΊΠ»ΡΡΠ°Ρ IE 9+. ΠΠΎΠ»Π½ΠΎΡΠ΅Π½Π½ΠΎΠΉ Π³Π°Π»Π΅ΡΠ΅Π΅ΠΉ, ΠΊΠΎΠ½Π΅ΡΠ½ΠΎ Π½Π°Π·Π²Π°ΡΡ ΡΡΠΎ ΡΠ»ΠΎΠΆΠ½ΠΎ, Π° Π²ΠΎΡ ΡΡΡΠ΅ΠΊΡ ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΡ ΠΏΠΎΠ΄ΠΏΠΈΡΠ΅ΠΉ, Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΠΉ.
Β
Β
Circle Hover Effects
ΠΡΠ΅ΡΠ΅Π΄Π½ΠΎΠΉ Π½Π°Π±ΠΎΡ ΠΏΡΠ°Π²ΠΈΠ» CSS, Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π²ΠΏΠ΅ΡΠ°ΡΠ»ΡΡΡΠΈΡ
ΡΡΡΠ΅ΠΊΡΠΎΠ² ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π½ΠΈΠΉ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΊΡΡΠ³Π»ΡΠ΅ ΠΌΠΈΠ½ΠΈΠ°ΡΡΡΡ. ΠΠ°ΠΊΠ΅Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ 7 Π²ΠΈΠ΄ΠΎΠ² ΠΏΠ΅ΡΠ΅Ρ
ΠΎΠ΄ΠΎΠ² CSS3, ΠΎΡΠ΅Π½Ρ ΠΏΠΎΠ΄ΡΠΎΠ±Π½Π°Ρ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΡ ΠΏΠΎ Π½Π°ΡΡΡΠΎΠΉΠΊΠ΅ ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ. ΠΡΡΠ΅ΠΊΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ Π²ΡΠ΅ΠΌΠΈ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠΌΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌΠΈ.
Β
Β
ΠΡΠ°ΡΠ΅Π½ΠΈΠ΅ ΠΌΠΈΠ½ΠΈΠ°ΡΡΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ
ΠΡΠΎΡΡΠΎΠΉ ΡΡΡΠ΅ΠΊΡ Π²ΡΠ°ΡΠ΅Π½ΠΈΡ ΠΊΡΡΠ³Π»ΡΡ
ΠΌΠΈΠ½ΠΈΠ°ΡΡΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° Π½ΠΈΡ
ΠΊΡΡΡΠΎΡΠ° ΠΌΡΡΠΈ, ΠΏΡΠΈΠΌΠ΅ΡΠ½ΠΎ ΡΠ°ΠΊΠΎΠΉ ΠΆΠ΅ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΠΈΠ΄Π΅ΡΡ Ρ ΠΌΠ΅Π½Ρ Π½Π° Π±Π»ΠΎΠ³Π΅, Π² Π°Π½ΠΎΠ½ΡΠ°Ρ
Π·Π°ΠΏΠΈΡΠ΅ΠΉ Π½Π° Π³Π»Π°Π²Π½ΠΎΠΉ. Π Π΅Π°Π»ΠΈΠ·ΡΠ΅ΡΡΡ ΠΏΠ°ΡΠΎΠΉ-ΡΡΠΎΠΉΠΊΠΎΠΉ ΡΡΡΠΎΠΊ ΠΊΠΎΠ΄Π° css.
Β
Β
Sexy Image Hover Effects
ΠΡΠ»ΠΈ ΠΏΠ΅ΡΠ΅Π²Π΅ΡΡΠΈ Π΄ΠΎΡΠ»ΠΎΠ²Π½ΠΎ:»Π‘Π΅ΠΊΡΡΠ°Π»ΡΠ½ΡΠΉ ΡΡΡΠ΅ΠΊΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ». Π§ΡΠΎ-ΡΠΎ ΡΠ°ΠΊΠΎΠ³ΠΎ ΡΠ΅ΠΊΡΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ, Π² ΡΡΠΎΠΌ ΡΡΡΠ΅ΠΊΡΠ΅ Π²Ρ ΠΊΠΎΠ½Π΅ΡΠ½ΠΎ ΠΆΠ΅ Π²ΡΡΠ΄ Π»ΠΈ Π·Π°ΠΌΠ΅ΡΠΈΡΠ΅, Π΅ΡΠ»ΠΈ ΡΠΎΠ»ΡΠΊΠΎ Ρ Π²Π°Ρ Π½Π΅ Π±ΡΠΉΠ½Π°Ρ ΡΠ°Π½ΡΠ°Π·ΠΈΡ, Π½ΠΎ ΡΡΡΠ΅ΠΊΡ ΠΏΠΎ ΡΠ²ΠΎΠ΅ΠΌΡ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ΅Π½ ΠΈ ΠΎΠ±ΡΠ°ΡΠΈΡΡ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° Π½Π΅Π³ΠΎ ΡΡΠΎΠΈΡ.
Β
Β
5 Hover-ΡΡΡΠ΅ΠΊΡΠΎΠ² Π½Π° CSS3
ΠΡΡΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ
ΡΡΡΠ΅ΠΊΡΠΎΠ² Π΄Π»Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° Π½ΠΈΡ
. ΠΡΠΏΠ»ΡΠ²Π°ΡΡΠΈΠ΅ ΠΏΠΎΠ΄ΠΏΠΈΡΠΈ Π² ΡΡΡΡ
Π²Π°ΡΠΈΠ°ΡΠΈΡΡ
, ΡΡΠΎΡΠΊΠΈ Π² Π²ΠΈΠ΄Π΅ ΡΠΌΠ΅Π½Ρ ΡΡΠ΅ΠΏΠ΅Π½ΠΈ ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΡΡΠΈ ΠΈ Π²ΡΠ°ΡΠ΅Π½ΠΈΠ΅ Ρ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ.
Β
Β
ΠΠ½ΠΈΠΌΠ°ΡΠΈΡ ΠΏΠΎΠ΄ΠΏΠΈΡΠ΅ΠΉ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ
4 ΠΠΈΠ΄Π° ΡΡΡΠ΅ΠΊΡΠΎΠ² Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΠΏΠΎΠ΄ΠΏΠΈΡΠ΅ΠΉ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½Π½ΡΡ
ΠΈΡΠΊΠ»ΡΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΡΠ΅Π΄ΡΡΠ²Π°ΠΌΠΈ CSS3. Π Π°Π·Π½ΡΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ ΠΏΡΠΈ ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΠΈ ΠΈ ΡΡΡΠ΅ΠΊΡΡ ΠΏΠ΅ΡΠ΅Ρ
ΠΎΠ΄ΠΎΠ², Π²ΠΏΠΎΠ»Π½Π΅ ΡΠ΅Π±Π΅ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΠΎΠ΅ ΠΈΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅. Π§ΡΠΎΠ±Ρ ΠΏΠΎΠ½ΡΡΡ, ΠΊΠ°ΠΊ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ, Π·Π°Π³Π»ΡΠ½ΠΈΡΠ΅ Π² ΠΈΡΡ
ΠΎΠ΄Π½ΡΠΉ ΠΊΠΎΠ΄ Π΄Π΅ΠΌΠΎ-ΡΡΡΠ°Π½ΠΈΡΡ, ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎΠΉ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ Π½Π΅ ΠΎΠ±Π½Π°ΡΡΠΆΠΈΠ».
Β
Β
Hover-ΡΡΡΠ΅ΠΊΡΡ Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ
ΠΡΡΡΡΠΎΠ΅Π½Π½ΡΠ΅ Π² ΡΠ΅ΡΠΊΡ Π³Π°Π»Π΅ΡΠ΅ΠΈ ΠΌΠΈΠ½ΠΈΠ°ΡΡΡΡ Ρ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠΌΠΈ ΡΡΡΠ΅ΠΊΡΠ°ΠΌΠΈ ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΡ ΠΏΠΎΠ΄ΠΏΠΈΡΠ΅ΠΉ, Π²ΡΠ°ΡΠ΅Π½ΠΈΠ΅, ΠΏΡΠΎΡΠ²Π»Π΅Π½ΠΈΠ΅, Π²ΡΠΏΠ»ΡΡΠΈΠ΅ ΠΈ Ρ.Π΄. ΠΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΡ ΠΏΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΈ Π½Π°ΡΡΡΠΎΠΉΠΊΠ΅ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΡΠΊΡΠ΄Π½Π°, Π½ΠΎ ΠΏΡΠΈ ΠΎΡΠΎΠ±ΠΎΠΌ ΠΆΠ΅Π»Π°Π½ΠΈΠΈ ΡΠ°Π·ΠΎΠ±ΡΠ°ΡΡΡΡ ΠΌΠΎΠΆΠ½ΠΎ.
Β
Β
ΠΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΡΠΊΠΎΡΡΠΈ ΠΊΠ°ΡΡΠΈΠ½ΠΎΠΊ
ΠΠ°Π½Π½ΡΠΉ ΡΡΡΠ΅ΠΊΡ ΠΎΡΠΎΠ±ΠΎΠ³ΠΎ Π½ΠΈΡΠ΅Π³ΠΎ ΠΈΠ· ΡΠ΅Π±Ρ Π½Π΅ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ, Π±Π°Π½Π°Π»ΡΠ½Π°Ρ ΡΠΌΠ΅Π½Π° ΡΡΠΊΠΎΡΡΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ, ΡΠ°Π·Π²Π΅ ΡΡΠΎ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ. Π Π°Π·Π±ΠΈΡΠ°ΡΡΡΡ Ρ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎΡΡΡΠΌΠΈ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ ΠΏΡΠΈΠ΄ΡΡΡΡ ΡΠ°ΠΌΠΎΡΡΠΎΡΡΠ΅Π»ΡΠ½ΠΎ, ΡΠ°Π·Π»ΠΎΠΆΠΈΠ² ΠΈΡΡ
ΠΎΠ΄Π½ΠΈΠΊΠΈ Π΄Π΅ΠΌΠΎ.
Β
Β
10 Image Hover Effects
ΠΡΡ ΠΎΠ΄ΠΈΠ½ Π½Π°Π±ΠΎΡ ΠΈΠ· 10 hover-ΡΡΡΠ΅ΠΊΡΠΎΠ² Π΄Π»Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ Π²ΠΈΠ΄ΠΎΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΠΌΠΈΠ½ΠΈΠ°ΡΡΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ, ΡΠ²Π΅Π»ΠΈΡΠ΅Π½ΠΈΠ΅, ΡΠΎΡΠ°ΡΠΈΡ, ΠΏΠΎΠ²ΠΎΡΠΎΡ, Π·Π°ΡΠ΅ΠΌΠ½Π΅Π½ΠΈΠ΅ ΠΈ Ρ.Π΄.
Β
Β
Border Animation Effect
Π Π°Π·Π»ΠΈΡΠ½ΡΠ΅ ΡΡΡΠ΅ΠΊΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΡΠ°ΠΌΠΊΠΈ Π²ΠΎΠΊΡΡΠ³ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, ΡΠΌΠΎΡΡΠΈΡΡΡ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°ΡΠ΅Π»ΡΠ½ΠΎ, ΠΈΠΌΠ΅Π΅ΡΡΡ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎΠ΅ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²ΠΎ ΠΏΠΎ Π½Π°ΡΡΡΠΎΠΉΠΊΠ΅ ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ.
Β
Β
Original Hover Effects With CSS3
ΠΡΠΈΠ³ΠΈΠ½Π°Π»ΡΠ½ΡΠ΅ hover-ΡΡΡΠ΅ΠΊΡΡ Π½Π° CSS3 ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΠΌΡΠ΅ Π΄Π»Ρ ΡΡΡΠ΅ΠΊΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΡ ΠΏΠΎΠ΄ΠΏΠΈΡΠ΅ΠΉ ΠΌΠΈΠ½ΠΈΠ°ΡΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ. Π Π½Π°Π±ΠΎΡ ΠΏΡΠ°Π²ΠΈΠ» CSS Π²Ρ
ΠΎΠ΄ΡΡ 10 ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ
ΡΡΡΠ΅ΠΊΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎ Π΄Π»Ρ ΡΠ°Π·Π½ΡΡ
ΠΊΠ°ΡΡΠΈΠ½ΠΎΠΊ. ΠΡΡΠ΅ΠΊΡΡ ΠΏΠΎ-Π½Π°ΡΡΠΎΡΡΠ΅ΠΌΡ Π²ΠΏΠ΅ΡΠ°ΡΠ»ΡΡΡ, ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎ ΠΏΠΎΠ½ΠΈΠΌΠ°Ρ ΡΠΎ, ΡΡΠΎ Π²ΡΡ ΡΡΠΎ ΡΠ΄Π΅Π»Π°Π½ΠΎ Π»ΠΈΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS3. ΠΠΎΠ΄ΡΠΎΠ±Π½ΠΎΠ΅ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²ΠΎ, ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ Π²Π°ΠΌ ΡΠ°Π·ΠΎΠ±ΡΠ°ΡΡΡΡ ΡΡΠΎ ΠΊ ΡΠ΅ΠΌΡ.
Β
Β
Shape Hover Effect
ΠΠ΄Π΅Ρ ΡΠΎΡΡΠΎΠΈΡ Π² ΡΠΎΠΌ, ΡΡΠΎΠ±Ρ ΡΠΎΠ·Π΄Π°ΡΡ SVG, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠΎΠ±ΠΎΠΉ ΡΠΎΡΠΌΡ-ΡΠΎΠ½ Π΄Π»Ρ ΠΊΠ°ΠΊΠΎΠΉ-ΡΠΎ Π½Π°Π΄ΠΏΠΈΡΠΈ ΠΈ ΠΏΡΠ΅Π²ΡΠ°ΡΠ°Π΅ΡΡΡ Π² Π΄ΡΡΠ³ΡΡ ΡΠΎΡΠΌΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° ΠΌΡΡΠΈ. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ ΡΠ°Π·Π½ΡΡ
Π²Π°ΡΠΈΠ°Π½ΡΠΎΠ², Π² ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΆΠ΅, ΠΏΠΎΠΊΠ°Π·Π°Π½Ρ ΡΡΠΈ Π²ΠΈΠ΄Π° ΡΡΡΠ΅ΠΊΡΠΎΠ² ΠΏΠ΅ΡΠ΅Ρ
ΠΎΠ΄ΠΎΠ². ΠΠΎΡΡΠΎΠΈΠ½ΡΡΠ²ΠΎΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ SVG ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠΎ, ΡΡΠΎ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΎΡΠΌΡ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°.
Β
Β
Π Π°Π·Π΄Π²ΠΈΠΆΠ½ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
Π‘ΡΡΡ Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΡΡΡΠ΅ΠΊΡΠ° Π² ΡΠΎΠΌ, ΡΡΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠ°Π·Π΄Π²ΠΈΠ³Π°Π΅ΡΡΡ Π²Π²Π΅ΡΡ
ΠΈ Π²Π½ΠΈΠ· Π΄Π»Ρ ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΡ ΠΏΠΎΠ΄ΠΏΠΈΡΠΈ. ΠΡΠ»ΠΈ ΠΏΠΎΡΠ°Π±ΠΎΡΠ°ΡΡ Ρ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠ°ΠΌΠΈ ΡΡΠΈΠ»Π΅ΠΉ, Π΄ΡΠΌΠ°Ρ ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ±ΠΈΡΡΡΡ Π²ΠΏΠΎΠ»Π½Π΅-ΡΠ΅Π±Π΅ ΡΠΈΠΌΠΏΠ°ΡΠΈΡΠ½ΡΡ
ΡΡΡΠ΅ΠΊΡΠΎΠ², Π° ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ, Π²ΡΠ³Π»ΡΠ΄ΠΈΡ Π²ΡΡ ΡΠΎΠ²ΡΠ΅ΠΌ ΡΠΆ ΠΏΡΠΎΡΡΠΎ.
Β
Β
Slick CSS3 Animated Image
Π‘ ΡΡΠΈΠΌ ΡΡΡΠ΅ΠΊΡΠΎΠΌ Π²ΡΡ ΠΏΡΠΎΡΡΠΎ, ΠΏΠΎΠ΄ΠΏΠΈΡΠΈ ΠΊ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ°ΠΌ Π²ΡΡΠΊΠ°Π»ΡΠ·ΡΠ²Π°ΡΡ Π² Π²Π΅ΡΡ
Ρ ΡΠΏΡΠ°Π²Π° ΠΈΠ»ΠΈ ΡΠ»Π΅Π²Π° Π² Π½ΠΈΠ·Ρ, Π² Π²ΠΈΠ΄Π΅ Π»Π΅Π½ΡΡ Ρ ΠΏΠΎΠ»ΡΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΡΠΌ ΡΡΠΌΠ½ΡΠΌ ΡΠΎΠ½ΠΎΠΌ, Π²ΡΡ ΠΎΡΠ΅Π½Ρ ΠΏΡΠΎΡΡΠΎ ΠΏΠ΅ΡΠ΅ΡΠΎΡΠΌΠΈΡΡΠ΅ΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ² css.
Β
Β
ΠΡΠΏΠ»ΡΠ²Π°ΡΡΠ°Ρ ΠΏΠΎΠ΄ΠΏΠΈΡΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ
ΠΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅, ΠΌΠΈΠ½ΠΈΠ°ΡΡΡΡ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½Ρ Π² Π·Π°ΡΠ΅ΠΌΠ½ΡΠ½Π½ΠΎΠΌ Π²ΠΈΠ΄Π΅, ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° Π½ΠΈΡ
ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΡΠΎΡΠ²Π»ΡΡΡΡΡ ΠΈ Π²ΡΠΏΠ»ΡΠ²Π°Π΅Ρ ΠΏΠΎΠ΄ΠΏΠΈΡΡ Π½Π° ΡΠ²Π΅ΡΠ»ΠΎΠΌ ΡΠΎΠ½Π΅.
Β
Β
ΠΠΈΠ°Π³ΠΎΠ½Π°Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΠ΅ ΠΏΠΎΠ΄ΠΏΠΈΡΠΈ
ΠΠΎΠ΄ΠΏΠΈΡΡ ΠΊ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ ΠΈΠ· ΡΠ³Π»Π° ΠΈ ΡΠ°ΡΡΠΈΡΡΠ΅ΡΡΡ Π½Π° Π²ΡΡ ΠΏΠ»ΠΎΡΠ°Π΄Ρ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ ΠΏΠΎ Π΄ΠΈΠ°Π³ΠΎΠ½Π°Π»ΠΈ.
Β
Β
ΠΠ½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ ΠΌΠΈΠ½ΠΈΠ°ΡΡΡ
ΠΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΡ
ΡΠ΅ΡΠ΅Π½ΠΈΠΉ Π΄Π»Ρ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΠΈΡ
ΠΏΠΎΠ΄ΠΏΠΈΡΠ΅ΠΉ ΠΊ ΠΌΠΈΠ½ΠΈΠ°ΡΡΡΠ°ΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ. Π ΠΎΠ½Π»Π°ΠΉΠ½-ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠ΅ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΡΠΊΡΠΏΠ΅ΡΠΈΠΌΠ΅Π½ΡΠΈΡΠΎΠ²Π°ΡΡ Ρ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠ°ΠΌΠΈ ΠΈ Π΄ΠΎΠ±ΠΈΡΡΡΡ Π±ΠΎΠ»Π΅Π΅ Π²ΠΏΠ΅ΡΠ°ΡΠ»ΡΡΡΠΈΡ
ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠΎΠ².
Β
Β
ΠΠΎΠ΄ΡΡΡΠΊΠ½ΡΡΡΠ΅ ΠΈΠ»ΠΈ ΠΎΡΠ΅ΡΡΠ΅Π½Π½ΡΠ΅ ΠΏΠΎΠ΄ΠΏΠΈΡΠΈ ΠΊ ΠΌΠΈΠ½ΠΈΠ°ΡΡΡΠ°ΠΌ
ΠΠ°Π±ΠΎΡ ΠΊΡΠ°ΡΠΈΠ²ΡΡ
ΡΡΡΠ΅ΠΊΡΠΎΠ² ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΠΌΠΈΠ½ΠΈΠ°ΡΡΡΡ, ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ Π²ΠΈΠ΄Ρ ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΡ ΠΈ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΡ ΠΏΠΎΠ΄ΠΏΠΈΡΠ΅ΠΉ ΠΊ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ°ΠΌ. Π’ΠΎΠ½ΠΊΠΈΠ΅ Π»ΠΈΠ½ΠΈΠΈ Π² ΠΊΠΎΠ½ΡΡΠ°ΡΡΠ΅ Ρ ΡΠ»Π΅Π³ΠΊΠ° Π·Π°ΡΠ΅ΠΌΠ½ΡΠ½Π½ΡΠΌ ΡΠΎΠ½ΠΎΠΌ ΡΠΎΠ·Π΄Π°ΡΡ Π»ΡΠ³ΠΊΠΈΠ΅ Π΄Π»Ρ Π²ΠΎΡΠΏΡΠΈΡΡΠΈΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΎΠ½Π½ΡΠ΅ Π±Π»ΠΎΠΊΠΈ.
Β
Β
ΠΡΠΈΡΡΠ΄Π»ΠΈΠ²ΡΠ΅ ΡΠΎΡΠΌΡ ΠΈ zoom-ΡΡΡΠ΅ΠΊΡ
ΠΡΠΈΡΡΠ΄Π»ΠΈΠ²ΡΠ΅ ΡΠΎΡΠΌΡ ΠΈ ΡΡΡΠ΅ΠΊΡ ΡΠ²Π΅Π»ΠΈΡΠ΅Π½ΠΈΡ Π² ΡΠ²ΡΠ·ΠΊΠ΅ Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΎΠ½Π½ΡΠΌ ΡΡΡΠ΅ΠΊΡΠΎΠΌ ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΡ ΠΏΠΎΠ΄ΠΏΠΈΡΠ΅ΠΉ ΠΊ ΠΌΠΈΠ½ΠΈΠ°ΡΡΡΠ°ΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ.
Β
Β
Π‘Π»Π°ΠΉΠ΄-ΡΡΡΠ΅ΠΊΡ Π΄Π»Ρ ΠΏΠΎΠ΄ΠΏΠΈΡΠ΅ΠΉ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ
ΠΡΠΈΠΌΠ΅Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠ»Π°ΠΉΠ΄-ΡΡΡΠ΅ΠΊΡΠ° Π΄Π»Ρ Π²ΡΠ²ΠΎΠ΄Π° ΠΎΠ±ΡΡΠΌΠ½ΡΡ
ΠΏΠΎΠ΄ΠΏΠΈΡΠ΅ΠΉ ΠΊ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠΎΠ»ΡΠΊΠΎ CSS3 ΠΈ HTML5.
Β
Β
6 ΠΠΎΠ΄ΠΏΠΈΡΠ΅ΠΉ ΠΊ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ°ΠΌ
6 ΠΠ°ΡΠΈΠ°Π½ΡΠΎΠ² ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΡ Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΠΈΡ
ΠΏΠΎΠ΄ΠΏΠΈΡΠ΅ΠΉ ΠΊ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ°ΠΌ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS3. ΠΠΎΠ΄ΡΠΎΠ±Π½Π΅ΠΉΡΠΈΠΉ ΡΡΠΎΠΊ ΠΏΠΎ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ ΠΈ Π½Π°ΡΡΡΠΎΠΉΠΊΠ΅, Π΄ΠΎΡΡΡΠΏΠ½ΡΠ΅ Π΄Π»Ρ ΡΠΊΠ°ΡΠΈΠ²Π°Π½ΠΈΡ ΠΈΡΡ
ΠΎΠ΄Π½ΠΈΠΊΠΈ.
Β
Β
ΠΡ ΠΈ Π½Π°ΠΊΠΎΠ½Π΅Ρ, Π½Π°ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠΊ ΡΠ°ΠΊ ΡΠΊΠ°Π·Π°ΡΡ, Π½Π΅ ΠΌΠΎΠ³Ρ Π½Π΅ ΡΠΏΠΎΠΌΡΠ½ΡΡΡ ΠΎ ΡΠ°ΠΌΠΎΠΌ ΠΏΡΠΎΡΡΠ΅ΠΉΡΠ΅ΠΌ ΡΠΏΠΎΡΠΎΠ±Π΅ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΠ΅ΠΉ ΠΏΠΎΠ΄ΠΏΠΈΡΠΈ ΠΊ ΠΌΠΈΠ½ΠΈΠ°ΡΡΡΠ΅ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS3.
Β
Β
ΠΠ± ΡΡΠΎΠΌ ΡΠΏΠΎΡΠΎΠ±Π΅ Ρ ΡΠ°ΡΡΠΊΠ°Π·ΡΠ²Π°Π» Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΈΠ· ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠΈΡ
ΡΠ²ΠΎΠΈΡ
ΡΡΠΎΠΊΠΎΠ²: Π’ΡΠ½Ρ.
Β
Β
Π₯ΠΎΡΠΈΡΠ΅ ΠΏΡΠΈΡΡΡΠΏΠΈΡΡ ΠΊ ΡΠ°Π±ΠΎΡΠ΅ Π½Π°Π΄ ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅ΠΌ ΡΠ°ΠΉΡΠ° ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ Π±ΡΡΡΡΠ΅Π΅? Π’Π΅ΠΏΠ΅ΡΡ ΡΡΠΎ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ! ΠΠΎ ΡΠΎΠΉ ΠΏΡΠΎΡΡΠΎΠΉ ΠΏΡΠΈΡΠΈΠ½Π΅, ΡΡΠΎ Π½Π° ΠΌΠ°ΡΠΊΠ΅ΡΠΏΠ»Π΅ΠΉΡΠ΅ TemplateMonster ΠΏΠΎΡΠ²ΠΈΠ»ΡΡ Π½ΠΎΠ²ΡΠΉ ΡΠ°Π·Π΄Π΅Π» Ρ HTML ΡΠ°Π±Π»ΠΎΠ½Π°ΠΌΠΈ Π½Π° ΡΡΡΡΠΊΠΎΠΌ ΡΠ·ΡΠΊΠ΅. ΠΠΎΠ»Π»Π΅ΠΊΡΠΈΡ Π±ΡΠ΄Π΅Ρ ΠΏΠΎΠΏΠΎΠ»Π½ΡΡΡΡΡ, Π½ΠΎ ΠΈ ΡΠ΅ΠΉΡΠ°Ρ ΡΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠΈΡΠΌΠΎΡΡΠ΅ΡΡ ΡΡΠΎ-ΡΠΎ ΠΏΠΎΠ΄Ρ
ΠΎΠ΄ΡΡΠ΅Π΅ Π΄Π»Ρ Π²Π°ΡΠ΅Π³ΠΎ ΠΎΠ½Π»Π°ΠΉΠ½-ΠΏΡΠΎΠ΅ΠΊΡΠ°. ΠΡΠ΅, ΡΡΠΎ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡΒ β ΡΡΠΎ Π²ΡΠ±ΡΠ°ΡΡ ΡΠ²ΠΎΠ΅ ΠΈΠ΄Π΅Π°Π»ΡΠ½ΠΎΠ΅ Π³ΠΎΡΠΎΠ²ΠΎΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΈ ΠΏΠΎΡΠ°Π±ΠΎΡΠ°ΡΡ Ρ ΠΏΡΠ΅Π·Π΅Π½ΡΠ°ΡΠΈΠ΅ΠΉ Π½ΡΠΆΠ½ΠΎΠΉ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ. Π Π½Π΅ Π·Π°Π±ΡΠ²Π°ΠΉΡΠ΅, ΡΡΠΎ ΡΠ΅ΠΊΡΡ Π΄Π»Ρ ΡΠ°Π±Π»ΠΎΠ½Π° Π±ΡΠ» Π½Π°ΠΏΠΈΡΠ°Π½ Π²ΡΡΡΠ½ΡΡ.
Π‘ Π£Π²Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ, ΠΠ½Π΄ΡΠ΅ΠΉ .
ΠΡΠ΄Ρ Π²ΡΠ΅ΠΌ ΠΏΡΠΈΠ·Π½Π°ΡΠ΅Π»Π΅Π½, Π΅ΡΠ»ΠΈ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΡΠ΅ ΠΏΡΠΎΠ΅ΠΊΡΒ β Π΄ΠΎΠ±Π°Π²ΠΈΠ² Π±Π»ΠΎΠ³ Π² ΠΈΡΠΊΠ»ΡΡΠ΅Π½ΠΈΡ AdBlock ΠΈ ΠΏΠΎΠ΄Π΅Π»ΠΈΡΠ΅ΡΡ ΡΡΡΠ»ΠΊΠΎΠΉ Π½Π° Π·Π°ΠΏΠΈΡΡ Π² ΡΠ²ΠΎΠΈΡ ΡΠΎΡ-ΡΠ΅ΡΡΡ :
ΠΠ΅ΡΠΏΠ»Π°ΡΠ½Π°Ρ ΠΏΠΎΠ΄Π±ΠΎΡΠΊΠ° ΠΈΠ· 40 ΡΡΡΠ΅ΠΊΡΠΎΠ² CSS / ua-hosting.company corporate blog / Habr
Π ΠΏΠΎΡΡΠ΅ ΡΠΎΠ±ΡΠ°Π½Π° ΠΏΠΎΠ΄Π±ΠΎΡΠΊΠ° ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΡΡΡΠ΅ΠΊΡΠΎΠ² ΠΈ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ CSS, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠ³ΡΡ ΠΏΡΠΈΠ³ΠΎΠ΄ΠΈΡΡΡΡ Π² ΡΠ°Π±ΠΎΡΠ΅, Π° ΠΊΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ ΠΈΠ·Π±Π°Π²ΡΡ ΠΎΡ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ ΠΏΠΎΡΡΠΎΡΠ½Π½ΠΎ ΠΏΡΠΈΠ±Π΅Π³Π°ΡΡ ΠΊ JavaScript. ΠΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠΈΠΌΠ΅ΡΡ Π½Π΅ ΡΠ°ΠΌΡΠ΅ Π½ΠΎΠ²ΡΠ΅ ΠΈ Π½Π΅ΠΎΠ±ΡΡΠ½ΡΠ΅, Π½ΠΎ Π½Π° ΠΌΠΎΠΉ Π²Π·Π³Π»ΡΠ΄, ΠΏΠΎΠ»Π΅Π·Π½ΡΠ΅.1. Π§Π°ΡΡ CSS3 Ρ jQuery
ΠΡΠΈ ΡΠ°ΡΡ ΡΠΎΠ·Π΄Π°Π½Ρ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈΠ· ΠΎΡΠ½ΠΎΠ²Π½ΡΡ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ² CSS3 β rotate ΠΈ Ρ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ΠΌ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ JQuery.
2. ΠΠ½Π°Π»ΠΎΠ³ΠΎΠ²ΡΠ΅ ΡΠ°ΡΡ CSS
ΠΠΎΠ»Π΅Π΅ ΠΊΠ»Π°ΡΡΠΈΡΠ΅ΡΠΊΠΈΠ΅, Π°Π½Π°Π»ΠΎΠ³ΠΎΠ²ΡΠ΅ ΡΠ°ΡΡ. ΠΠ½ΠΈ ΡΠΎΠ·Π΄Π°Π½Ρ Ρ ΠΏΠΎΠΌΠΎΡΡΡ webkit transition ΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π° transform CSS. Π Π²ΠΎΡ Π΄Π»Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ Π²ΡΠ΅ΠΌΡ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΎΠ²Π°Π»ΠΎ ΡΠ΅ΠΊΡΡΠ΅ΠΌΡ, ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΠΈΡΡΡΡ JavaScript.
3. ΠΡΠ°ΡΠ°ΡΡΠΈΠΉΡΡ 3D-ΠΊΡΠ±
ΠΡΠ°ΡΠ΅Π½ΠΈΠ΅ ΠΈ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΡΠΎΡΠΎΠ½Π°ΠΌ ΠΊΡΠ±Π° Π±ΡΠ΄Π΅Ρ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΡΡΡ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΠΌΠΈ ΠΊΠ»Π°Π²ΠΈΡΠ°ΠΌΠΈ Β«Π²Π²Π΅ΡΡ Β», Β«Π²Π½ΠΈΠ·Β», Β«Π²Π»Π΅Π²ΠΎΒ» ΠΈ Β«Π²ΠΏΡΠ°Π²ΠΎΒ». Π‘Π°ΠΌΠ° 3D-ΡΠΈΠ³ΡΡΠ° ΠΏΠΎΡΡΡΠΎΠ΅Π½Π° Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ webkit-perspective, -webkit-transform ΠΈ -webkit-transition.
4. ΠΠ΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π²ΡΠ΄Π²ΠΈΠ³Π°ΡΡΠΈΡ ΡΡ 3D-ΠΊΡΠ±ΠΎΠ²
ΠΠ΄Π΅ΡΡ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΎ ΡΠΆΠ΅ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ 3D-ΠΊΡΠ±ΠΎΠ², ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΠΈΡ CSS3 ΠΈ Π½Π΅ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²Π΅Π½Π½ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π° transform ΠΈ transition. ΠΠ°Π²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΊΡΡΡΠΎΡΠ° Π½Π° ΠΊΡΠ± Π·Π°ΡΡΠ°Π²Π»ΡΠ΅Ρ Π΅Π³ΠΎ ΠΎΡΡΠ΅Ρ Π°ΡΡ Π² ΡΡΠΎΡΠΎΠ½Ρ, ΠΎΡΠΊΡΡΠ²Π°Ρ ΡΠ΅ΠΊΡΡ, ΠΊΠΎΡΠΎΡΡΠΉ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡΡ Π½Π° Π΄ΡΡΠ³ΠΎΠΉ ΡΡΠΎΡΠΎΠ½Π΅ ΡΠΈΠ³ΡΡΡ.
5. Accordion ΠΌΠ΅Π½Ρ
ΠΡΡΠ΅ΠΊΡ Β«ΠΌΠ΅Π½Ρ-Π³Π°ΡΠΌΠΎΡΠΊΠΈΒ» Π½Π° ΡΠΈΡΡΠΎΠΌ CSS, Π³Π΄Π΅ ΠΊΠ»ΠΈΠΊ ΠΏΠΎ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΈΠ· ΡΡΡΠΎΠΊ ΠΎΡΠΊΡΡΠ²Π°Π΅Ρ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΎΠΊΠ½ΠΎ Π² ΡΠ΅Π»Π΅ ΡΠ°ΠΌΠΎΠ³ΠΎ ΡΠΏΠΈΡΠΊΠ°. Π‘ΠΎΠ±ΡΡΠ²Π΅Π½Π½Π°Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ Π½Π° Π±Π°Π·Π΅ WebKit.
6. ΠΠ°ΡΠ°Π»Π»Π°ΠΊΡ-ΡΠΊΡΠΎΠ»Π»ΠΈΠ½Π³ Π½Π° CSS
ΠΡΠΎ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΉ ΠΏΠ°ΡΠ°Π»Π»Π°ΠΊΡ-ΡΠΊΡΠΎΠ»Π»ΠΈΠ½Π³ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ CSS ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ΠΎΠ² Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ WebKit. ΠΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΡΠ΅ΠΊΡΡΠΎΠ²ΠΎΠ΅ ΠΎΠΊΠ½ΠΎ, Π·Π²Π΅Π·Π΄Ρ Π½Π° ΡΠΎΠ½Π΅ Π½Π°ΡΠΈΠ½Π°ΡΡ ΠΏΠ»Π°Π²Π½ΠΎ Π΄Π²ΠΈΠ³Π°ΡΡΡΡ Π² ΡΡΠΎΡΠΎΠ½Ρ. Π‘ΠΎΠ·Π΄Π°Π΅ΡΡΡ ΡΡΡΠ΅ΠΊΡ ΠΏΠΎΠ»Π΅ΡΠ°.
7. ΠΠ°ΡΡΠΈΡΠ°
ΠΡΠ»ΡΡΠΎΠ²ΡΠΉ ΡΠΈΠ»ΡΠΌ Β«ΠΠ°ΡΡΠΈΡΠ°Β» β ΠΎΠ΄Π½Π° ΠΈΠ· Π»ΡΡΡΠΈΡ ΡΠ°Π½ΡΠ°ΡΡΠΈΡΠ΅ΡΠΊΠΈΡ ΠΊΠΈΠ½ΠΎΠΊΠ°ΡΡΠΈΠ½. ΠΠ° ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ, ΠΊΠ°ΠΊ Π²ΠΎΡΡΠΎΠ·Π΄Π°ΡΡ ΠΏΡΠΈΠΌΠ΅ΡΠ½ΠΎ ΡΠ°ΠΊΡΡ ΠΆΠ΅ ΡΠ΄ΠΈΠ²ΠΈΡΠ΅Π»ΡΠ½ΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ (ΡΠ΅ΡΠ½ΡΠΉ ΡΠΊΡΠ°Π½ Ρ Π±Π΅Π³ΡΡΠΈΠΌΠΈ ΡΠΈΡΡΠ°ΠΌΠΈ) Π² CSS3.
8. ΠΠΈΠ½Π°ΠΌΠΈΡΠ½ΡΠ΅ ΠΠ°Π»Π°ΡΠΎΠΈΠ΄Ρ
Π ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΏΡΠΎΠ²ΠΎΠ΄ΠΈΡΡΡ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎΠ΅ ΠΎΠΏΠΈΡΠ°Π½ΠΈΠ΅ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΡ ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΠΉ, ΠΎΡΠ½ΠΎΠ²Π°Π½Π½ΠΎΠΉ Π½Π° ΠΊΠΎΠΌΠ°Π½Π΄Π°Ρ CSS3. ΠΡΠΈ ΠΊΠ»ΠΈΠΊΠ΅ Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΠΎΠ½ΠΎ ΡΠ²Π΅Π»ΠΈΡΠΈΠ²Π°Π΅ΡΡΡ ΠΈ Π²ΡΠ΄Π²ΠΈΠ³Π°Π΅ΡΡΡ Π½Π° ΠΏΠ΅ΡΠ΅Π΄Π½ΠΈΠΉ ΠΏΠ»Π°Π½.
9. ΠΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ
Π ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ ΠΏΡΠΎΡΡΠΎ ΡΠ²Π΅Π»ΠΈΡΠΈΠ²Π°ΡΡΡΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ. ΠΠ΅Π·Π°ΠΌΡΡΠ»ΠΎΠ²Π°ΡΡΠΉ, Π½ΠΎ ΠΏΠΎΡΠΎΠΉ Π²Π΅ΡΡΠΌΠ° ΠΏΠΎΠ»Π΅Π·Π½ΡΠΉ ΡΡΡΠ΅ΠΊΡ.
10. ΠΡΡΠ΅ΠΊΡΡ JavaScript Π½Π° CSS3
Π ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Ρ JavaScript, Π² ΠΏΠΎΡΡΠ΅ ΠΏΡΠ΅Π΄Π»ΠΎΠΆΠ΅Π½ΠΎ ΡΠ΅ΠΌΡ ΡΡΡΠ΅ΠΊΡΠΎΠ² Π½Π° CSS3: ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ Π±Π»ΠΎΠΊΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ Π²ΡΠ°ΡΠ°ΡΡΡΡ, ΠΈΡΡΠ΅Π·Π°ΡΡ, Π²ΡΠ΅Π·ΠΆΠ°ΡΡ, ΡΠ²Π΅Π»ΠΈΡΠΈΠ²Π°ΡΡΡΡ ΠΈ Ρ.Π΄.
11. ΠΠΈΡΡΡΠ°Π»ΡΠ½ΡΠ΅ ΠΏΠ»Π°ΡΡΠΈΠ½ΠΊΠΈ DJ Hero
Π ΠΏΠΎΡΡΠ΅ ΡΠ°ΡΡΠΊΠ°Π·ΡΠ²Π°Π΅ΡΡΡ, ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°ΡΡ ΠΊΡΡΡΡΡΠΈΠ΅ΡΡ ΠΏΠ»Π°ΡΡΠΈΠ½ΠΊΠΈ. Π‘ΠΊΠΎΡΠΎΡΡΡ Π²ΡΠ°ΡΠ΅Π½ΠΈΡ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΅Π³ΡΠ»ΠΈΡΠΎΠ²Π°ΡΡ ΠΏΡΡΠΌΠΎ Π½Π° ΡΠΊΡΠ°Π½Π΅.
12. Π‘ΠΊΠΎΠ»ΡΠ·ΡΡΠΈΠΉ Π²ΠΈΠ½ΠΈΠ»
ΠΡΡΠ΅ΠΊΡ ΡΠΊΠΎΠ»ΡΠΆΠ΅Π½ΠΈΡ Π²ΠΈΠ½ΠΈΠ»ΠΎΠ²ΡΡ ΠΏΠ»Π°ΡΡΠΈΠ½ΠΎΠΊ ΡΠΎΠ·Π΄Π°Π΅ΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ΠΎΠ² CSS3 ΠΈ HTML. ΠΠΎΠ΄ΠΎΠ±Π½Π°Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΠΎΠΆΠΈΠ²Π»ΡΠ΅Ρ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ, Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅Ρ ΠΎΡΠΈΠ³ΠΈΠ½Π°Π»ΡΠ½ΠΎΡΡΠΈ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΠΎΠΉ ΠΎΠ±Π»ΠΎΠΆΠΊΠ΅ Π°Π»ΡΠ±ΠΎΠΌΠ° ΠΈ Ρ.Π΄.
13. ΠΡΡΠ΅ΠΊΡΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ
ΠΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΠΎΠ½ΠΎ ΠΌΠΎΠΆΠ΅Ρ ΡΠΌΠ΅ΡΡΠΈΡΡΡΡ Π² ΡΡΠΎΡΠΎΠ½Ρ, Π·Π°Π²Π΅ΡΡΠ΅ΡΡΡΡ, ΡΠΌΠ΅Π½ΡΡΠΈΡΡΡΡ, ΠΈΠ· ΠΊΠ²Π°Π΄ΡΠ°ΡΠ½ΠΎΠ³ΠΎ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°ΡΡΡΡ Π² ΠΊΡΡΠ³Π»ΠΎΠ΅, ΡΡΠ°ΡΡ ΡΠ°Π·ΠΌΡΡΡΠΌβ¦ Π‘Π»ΠΎΠ²ΠΎΠΌ, ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ Π±ΡΠ΄ΡΡ Π²ΡΡΡΠ΅ΡΠΊΠΈ ΠΌΠ΅Π½ΡΡΡ ΡΠ²ΠΎΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π°.
14. ΠΡΠ°ΡΠ°ΡΡΠΈΠΉΡΡ ΡΡΠ΅ΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊ
ΠΡΠΈ Π½Π°ΠΆΠ°ΡΠΈΠΈ Π½Π° ΡΡΠ΅ΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊ, ΠΎΠ½ Π½Π°ΡΠΈΠ½Π°Π΅Ρ Π²ΡΠ°ΡΠ°ΡΡΡΡ.
15. ΠΠΎΡΠΌΠΎΡ
Π¦Π΅Π»ΠΎΠ΅ ΠΊΠΎΡΠΌΠΈΡΠ΅ΡΠΊΠΎΠ΅ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ, ΡΠΌΠ΅ΡΠ΅Π½Π½ΠΎΠ΅ Π² CSS. ΠΡΡΡΡΠΏΠ°Π΅Ρ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠΌ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ Π²ΡΠ°ΡΠ°ΡΡΠΈΡ ΡΡ ΡΠ»ΠΎΠ΅Π² (Π±ΠΎΠ»Π΅Π΅ Π·Π°ΠΌΠ΅ΡΠ½ΠΎ ΠΏΡΠΈ ΡΠΌΠ΅Π½ΡΡΠ΅Π½ΠΈΠΈ ΠΌΠ°ΡΡΡΠ°Π±Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅).
16. Β«ΠΠ΅Π½ΠΈΠ½ΡΒ» Π² 3D
ΠΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΠΉ ΡΡΡΠ΅ΠΊΡ CSS, Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΠΈΠ·Π²Π΅ΡΡΠ½Π°Ρ ΠΊΠ°ΡΡΠΈΠ½Π° ΠΠΈΠ΅Π³ΠΎ ΠΠ΅Π»Π°ΡΠΊΠ΅ΡΠ° Β«ΠΠ΅Π½ΠΈΠ½ΡΒ» Π½Π°ΡΠΈΠ½Π°Π΅Ρ ΠΊΠ°Π·Π°ΡΡΡΡ ΡΡΠ΅Ρ ΠΌΠ΅ΡΠ½ΠΎΠΉ.
17. CSS Π΄Π»Ρ Mac OS Π₯
Π Π½ΠΈΠΆΠ½Π΅ΠΉ ΡΠ°ΡΡΠΈ ΡΠΊΡΠ°Π½Π° ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ Π½Π°Π±ΠΎΡ ΠΎΡΠ½ΠΎΠ²Π½ΡΡ ΠΈΠΊΠΎΠ½ΠΎΠΊ Mac OS Π₯, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΡΠ²Π΅Π»ΠΈΡΠΈΠ²Π°ΡΡΡΡ. ΠΡΡΠ΅ΠΊΡ ΠΏΡΠΈΠ΄Π°Π΅Ρ Π΄ΠΈΠ½Π°ΠΌΠΈΠΊΠΈ ΡΠ°ΠΉΡΡ.
18. Drop-In Modals
CSS3 ΡΡΡΠ΅ΠΊΡΡ ΠΈ ΡΠ²ΠΎΠΉΡΡΠ² Drop-In Modals ΠΏΠΎΠΌΠΎΠ³ΡΡ Π² ΡΠΎΠ·Π΄Π°Π½ΠΈΠΈ Π±ΡΡΡΡΠΎΠ³ΠΎ, Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΠΈ ΠΏΡΠΎΡΡΠΎΠ³ΠΎ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΠΌΠΎΠ΄Π°Π»ΡΠ½ΡΡ ΠΎΠΊΠΎΠ½.
19. ΠΠ½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΎΠ±ΡΠ΅ΠΊΡΠΎΠ²
Π’ΡΠ°Π½ΡΡΠΎΡΠΌΠ°ΡΠΈΡ ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅Ρ Π²Π½Π΅ΡΠ½ΠΈΠΉ Π²ΠΈΠ΄ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅. ΠΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½Π° ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΡΠ°ΠΊΠ΅ΡΡ, ΠΊΠΎΡΠΎΡΠ°Ρ Β«Π»Π΅ΡΠΈΡΒ» ΠΈΠ· ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΊΠΎΠ½ΡΠ° ΡΠΊΡΠ°Π½Π° Π² Π΄ΡΡΠ³ΠΎΠΉ. ΠΠΎΠ³ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΡ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ΅Π½ΠΈΡ, Π²ΡΠ°ΡΠ΅Π½ΠΈΡ ΠΈ Ρ.Π΄.
20. Π¦Π²Π΅ΡΠ½ΡΠ΅ ΡΠ°ΡΡ
Π¦Π²Π΅ΡΠ½ΡΠ΅ ΡΠ°ΡΡ ΡΠΎΠ·Π΄Π°Π½Ρ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ jQuery ΠΈ CSS3. ΠΠΎΠ΄ΠΎΠ±Π½ΡΠΉ ΡΡΡΠ΅ΠΊΡ ΠΏΡΠΈΠ΄Π΅ΡΡΡ ΠΊΡΡΠ°ΡΠΈ Π² ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ΅ ΠΎΠΆΠΈΠ΄Π°Π½ΠΈΡ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ Π·Π°Π²Π΅ΡΡΠ΅Π½ΠΈΡ ΠΊΠ°ΠΊΠΎΠ³ΠΎ-Π½ΠΈΠ±ΡΠ΄Ρ ΠΊΠΎΠ½ΠΊΡΡΡΠ°, Π³ΠΎΠ»ΠΎΡΠΎΠ²Π°Π½ΠΈΡ ΠΈ ΡΠΎΠΌΡ ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎΠ³ΠΎ.
21. ΠΠ΅Π»Π΅ΡΠ΅Ρ Lightbox Π½Π° jQuery ΠΈ CSS3
ΠΡΠΎ Π·Π°ΠΌΠ΅ΡΠ°ΡΠ΅Π»ΡΠ½Π°Ρ Π³Π°Π»Π΅ΡΠ΅Ρ, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ ΠΈ ΡΠ°ΡΠΊΠ»Π°Π΄ΡΠ²Π°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² Π²ΡΠ±ΠΎΡΠΎΡΠ½ΠΎΠΌ ΠΏΠΎΡΡΠ΄ΠΊΠ΅. ΠΠ»Ρ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΠΎΡΡΠΈ Π³Π°Π»Π΅ΡΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ JQuery, JQuery UI ΠΈ JQuery ΠΏΠ»Π°Π³ΠΈΠ½ FancyBox. Lightbox ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ ΠΈ ΠΎΠΏΠΈΡΠ°Π½ΠΈΠ΅ ΠΊΠ°ΡΡΠΈΠ½ΠΎΠΊ, Π³ΡΡΠΏΠΏΠΈΡΡΠ΅Ρ ΠΈΡ ΠΈ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ Π²ΡΡΡΡΠ°ΠΈΠ²Π°Π΅Ρ ΡΠ»Π°ΠΉΠ΄Ρ Π² ΡΡΠ΄.
22. Β«ΠΠ»Π°ΡΡΠΈΡΠ½ΡΠ΅Β» ΠΏΡΠ΅Π²ΡΡ
Π£Π²Π΅Π»ΠΈΡΠ΅Π½ΠΈΠ΅ ΠΏΡΠ΅Π²ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ ΠΏΡΠΈ ΠΊΠ»ΠΈΠΊΠ΅ ΠΌΠ΅Π½Ρ ΠΏΡΠΎΠΏΠΎΡΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎ ΡΠ²Π΅Π»ΠΈΡΠΈΠ²Π°Π΅ΡΡΡ.
23. ΠΠΈΠ½Π°ΠΌΠΈΡΠ½ΡΠ΅ ΠΊΠ°ΡΡΠΎΡΠΊΠΈ
ΠΡΠΎΡ ΠΏΡΠΈΠΌΠ΅Ρ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠΎΠ±ΠΎΠΉ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈΠΉ Π½Π°Π±ΠΎΡ ΠΊΠ°ΡΡΠΎΡΠ΅ΠΊ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΡΠ½ΠΊΡΠΈΠΉ HTML ΠΈ CSS3.
24. ΠΡΠ΄Π²ΠΈΠΆΠ½ΠΎΠ΅ JQuery ΠΌΠ΅Π½Ρ
ΠΡΠ΄Π²ΠΈΠΆΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ ΠΈΠ· ΠΏΡΠΈΠΌΠ΅ΡΠ° ΡΠΎΠ·Π΄Π°Π½ΠΎ ΠΊΠΎΠΌΠ±ΠΈΠ½Π°ΡΠΈΠ΅ΠΉ CSS3 ΠΈ JQuery. ΠΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΠ΅Π΅ ΠΎΠΊΠ½ΠΎ Ρ ΡΠ΅ΠΊΡΡΠΎΠΌ.
25. Π’Π°Π±Ρ CSS
Π ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΊΡΡΡΠΎΡΠ° ΠΌΡΡΠΈ Π½Π° Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ ΡΠ°Π±ΠΎΠ² ΡΠΎΠΏΡΠΎΠ²ΠΎΠΆΠ΄Π°Π΅ΡΡΡ ΡΠΌΠ΅Π½ΠΎΠΉ ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠ³ΠΎ Π½ΠΈΠΆΠ΅ ΡΠΏΠΈΡΠΊΠ°.
26. Fisheye ΠΌΠ΅Π½Ρ
ΠΠ° ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΏΡΠΎΠ΄Π΅ΠΌΠΎΠ½ΡΡΡΠΈΡΠΎΠ²Π°Π½ΠΎ, ΠΊΠ°ΠΊ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ CSS ΠΈ SVG ΡΠΎΠ·Π΄Π°ΡΡ Fisheye ΠΌΠ΅Π½Ρ. Π ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ Π±ΠΎΠ½ΡΡΠ° ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π΅ΠΌΠΎ-SVG Π² ΡΡΠ³Π΅ IMG.
27. ΠΡΠΏΠ°Π΄Π°ΡΡΠ΅Π΅ ΠΌΠ΅Π½Ρ
Π’Π°ΠΊΠΎΠΉ ΡΠΈΠΏ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°Π΅Ρ ΠΎΡΠ΅Π½Ρ ΡΠ΄ΠΎΠ±Π½ΡΡ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ ΠΏΠΎ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΌΡ ΠΌΠ΅Π½Ρ, Π±Π»Π°Π³ΠΎΠ΄Π°ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ΠΎΠ² CSS3.
28. Π’ΠΈΡΡΡ ΠΈΠ· Β«ΠΠ²Π΅Π·Π΄Π½ΡΡ Π²ΠΎΠΉΠ½Β»
ΠΠ½Π°ΠΌΠ΅Π½ΠΈΡΡΠ΅ ΡΠΈΡΡΡ ΠΈΠ· Β«ΠΠ²Π΅Π·Π΄Π½ΡΡ Π²ΠΎΠΉΠ½Β». ΠΠ»Ρ ΠΈΡ Π·Π°ΠΏΡΡΠΊΠ° Π±ΡΠ΄Π΅Ρ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ HTML ΠΈ CSS.
29. ΠΡΠ΅ ΡΡΡΠ΅ΠΊΡΡ Fisheye Π½Π° CSS
ΠΠΏΡΡΡ ΡΠ°ΠΊΠΈ, ΡΠ²Π΅Π»ΠΈΡΠΈΠ²Π°ΡΡΠΈΠ΅ΡΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π·Π½Π°ΡΠΊΠΈ.
30. ΠΠ½ΠΈΠΌΠ°ΡΠΈΡ ΠΏΠΎ ΡΠΈΠΏΡ Β«ΠΊΠ°Π΄Ρ Π·Π° ΠΊΠ°Π΄ΡΠΎΠΌΒ»
ΠΠΎΠ·ΠΌΠΎΠΆΠ½Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π²Π°ΡΠΈΠ°Π½ΡΠΎΠ² Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΈ.
Π ΠΏΠ΅ΡΠ²ΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Π΄Π»Ρ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠ΅Π½ΠΈΡ ΡΠΌΠ΅Π½Ρ ΠΊΠ°Π΄ΡΠΎΠ² Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΠΊΠ»ΠΈΠΊΠ°ΡΡ Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅. ΠΠ°ΠΆΠ΄ΡΠΉ ΠΊΠ»ΠΈΠΊ β ΠΎΠ΄Π½ΠΎ Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΠ΅. ΠΠ°Π΄ΡΡ ΠΏΠΎΠ²ΡΠΎΡΡΡΡΡΡ, ΡΠΎΠ·Π΄Π°Π΅ΡΡΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½Π°Ρ Π·Π°ΡΠΈΠΊΠ»Π΅Π½Π½ΠΎΡΡΡ.
ΠΠΎ Π²ΡΠΎΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Π΄Π»Ρ ΡΠΌΠ΅Π½Ρ ΠΊΠ°Π΄ΡΠΎΠ² Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΠΏΡΠΎΠ²Π΅ΡΡΠΈ ΠΊΡΡΡΠΎΡΠΎΠΌ ΠΏΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. Π‘ΠΎΠΎΡΠ²Π΅ΡΡΡΠ²Π΅Π½Π½ΠΎ ΠΈ ΡΠΊΠΎΡΠΎΡΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ Π±ΡΠ΄Π΅Ρ Π·Π°Π²ΠΈΡΠ΅ΡΡ ΠΎΡ Π±ΡΡΡΡΠΎΡΡ Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΡ ΠΌΡΡΠΈ.
31. ΠΠΌΠΏΠ΅ΡΡΠΊΠΈΠΉ ΡΠ°Π³ΠΎΡ ΠΎΠ΄ AT-AT
Π ΡΠ½ΠΎΠ²Π° Β«ΠΠ²Π΅Π·Π΄Π½ΡΠ΅ Π²ΠΎΠΉΠ½ΡΒ» β ΡΡΠΎΡ Π΄Π²ΠΈΠΆΡΡΠΈΠΉΡΡ ΡΠ°Π³ΠΎΡ ΠΎΠ΄ AT-AT ΡΠ΄Π΅Π»Π°Π½ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS3.
32. ΠΡΠ΅ ΠΎΠ΄Π½Π° Β«Π³Π°ΡΠΌΠΎΡΠΊΠ°Β» CSS
ΠΡΠΈ ΠΊΠ»ΠΈΠΊΠ΅ Π½Π° ΡΡΡΠΎΠΊΡ, ΡΠ°Π±Π»ΠΈΡΠ° ΡΠ°ΡΠΊΠ»Π°Π΄ΡΠ²Π°Π΅ΡΡΡ.
33. ΠΡΠΎΡΡΠΎΠ΅ Π²ΡΠ΄Π²ΠΈΠΆΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ
ΠΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΡΠ΅ΠΊΡΠΈΠΈ ΠΌΠ΅Π½ΡΡΡ ΡΠ²Π΅Ρ ΠΈ Π²ΡΠ΄Π²ΠΈΠ³Π°ΡΡΡΡ.
34. ΠΠ°Π³ΠΈΡΠ΅ΡΠΊΠΈΠ΅ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΎΠ½Π½ΡΠ΅ ΡΡΡΠ΅ΠΊΡΡ Π² CSS
ΠΠΎΠΊΠ°Π·Π°ΡΠ΅Π»ΡΠ½Π°Ρ ΠΏΠΎΠ΄Π±ΠΎΡΠΊΠ° ΡΠ°Π·Π½ΠΎΠΎΠ±ΡΠ°Π·Π½ΡΡ ΡΠΎΡΠΌΠ°ΡΠΈΠΉ ΡΡΡΠ΅ΠΊΡΠΎΠ². ΠΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΠΊΠ»ΠΈΠΊΠ½ΡΡΡ ΠΏΠΎ ΠΊΠ»Π°Π²ΠΈΡΠ°ΠΌ Β«magicΒ», Β«swapΒ» ΠΈ Ρ.Π΄. Π΄Π»Ρ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΈ ΡΡΡΠ΅ΠΊΡΠ°.
35. ΠΠ΅Π½Ρ ΠΈΠ· Π·Π°ΠΊΠ»Π°Π΄ΠΎΠΊ
36. ΠΡΠΎΠ³ΡΠ΅ΡΡ Π±Π°Ρ
ΠΠ½ΠΈΠΌΠ°ΡΠΈΠΎΠ½Π½ΡΠΉ ΠΏΡΠΎΠ³ΡΠ΅ΡΡ Π±Π°Ρ Π½Π° CSS.
37. Π‘Π°Π»ΡΡ CSS
Π ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ, ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠ°Π»ΡΡ ΠΈΠ· ΠΊΡΡΠ³ΠΎΠ² Π½Π° JQuery ΠΈ CSS.
38. ΠΠΊΠ»ΡΡΠ°ΡΠ΅Π»Ρ/Π²ΡΠΊΠ»ΡΡΠ°ΡΠ΅Π»Ρ
ΠΠ° ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ, ΠΊΠ°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°ΡΡ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ on/off Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS.
39. Π¦Π²Π΅ΡΠ½Π°Ρ Π·Π°Π³ΡΡΠ·ΠΊΠ°
ΠΡΠΈΠΌΠ΅Ρ ΠΎΡΠΈΠ³ΠΈΠ½Π°Π»ΡΠ½ΠΎΠΉ ΡΠ°Π·Π½ΠΎΡΠ²Π΅ΡΠ½ΠΎΠΉ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ Π·Π°Π³ΡΡΠ·ΠΊΠΈ Π½Π° CSS.
40. ΠΡΠΏΠ°Π΄Π°ΡΡΠ΅Π΅ ΠΌΠ΅Π½Ρ
ΠΡΠ΅ ΠΎΠ΄ΠΈΠ½ Π²Π°ΡΠΈΠ°Π½Ρ ΠΏΡΠΎΡΡΠΎΠ³ΠΎ ΠΈ ΡΠΈΠΌΠΏΠ°ΡΠΈΡΠ½ΠΎΠ³ΠΎ Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅Π³ΠΎ ΠΌΠ΅Π½Ρ Π½Π° CSS.
Hover-ΡΡΡΠ΅ΠΊΡΡ Π΄Π»Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π½Π° ΡΠΈΡΡΠΎΠΌ CSS3
ΠΡΠ΅ΠΆΠ΄Π΅ Π²ΡΠ΅Π³ΠΎ, Π΄Π»Ρ ΡΠ΅Ρ
ΠΊΡΠΎ Π½Π΅ ΡΠΎΠ²ΡΠ΅ΠΌ Π΅ΡΡ Π² ΡΠ΅ΠΌΠ΅ ΠΈΠ»ΠΈ ΡΠΎΠ²ΡΠ΅ΠΌ Π½Π΅ Π² ΡΠ΅ΠΌΠ΅, ΠΏΠΎΡΡΠ½Ρ Π²ΠΊΡΠ°ΡΡΠ΅, ΡΡΠΎ ΡΠ°ΠΊΠΎΠ΅ hover-ΡΡΡΠ΅ΠΊΡΡ. ΠΡΠΎ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ Π²ΠΈΠ΄Ρ ΡΡΡΠ΅ΠΊΡΠΎΠ² (Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΠΈΠ΅ ΠΏΠΎΠ΄ΠΏΠΈΡΠΈ, ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΊΠΈ, ΠΏΠ»Π°Π²Π½ΡΠ΅ ΠΏΠ΅ΡΠ΅Ρ
ΠΎΠ΄Ρ, ΡΡΠ°Π½ΡΡΠΎΡΠΌΠ°ΡΠΈΡ, ΡΠΎΡΠ°ΡΠΈΡ, ΡΠ²Π΅Π»ΠΈΡΠ΅Π½ΠΈΠ΅, ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΈ Ρ.Π΄ ΠΈ Ρ.ΠΏ.) ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΠΌΡΠ΅ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ Π²Π΅Π±-ΡΠ°ΠΉΡΠ° ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° Π½ΠΈΡ
ΠΊΡΡΡΠΎΡΠ° ΠΌΡΡΠΈ. Π Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½Ρ ΡΡΠΈ ΡΡΡΠ΅ΠΊΡΡ ΠΌΠΎΠ³ΡΡ ΠΊΠ°ΠΊ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ
ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² jQuery, ΡΠ°ΠΊ ΠΈ Π½Π° ΡΠΈΡΡΠΎΠΌ CSS3.
Π‘Π΅Π³ΠΎΠ΄Π½Ρ Ρ ΠΏΠΎΠ΄Π³ΠΎΡΠΎΠ²ΠΈΠ» Π±ΠΎΠ»ΡΡΡΡ ΠΏΠΎΠ΄Π±ΠΎΡΠΊΡ ΠΎΡΠΈΠ³ΠΈΠ½Π°Π»ΡΠ½ΡΡ
hover-ΡΡΡΠ΅ΠΊΡΠΎΠ² Π΄Π»Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΡΠΎΠ·Π΄Π°Π½Π½ΡΡ
Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS3, Π±Π΅Π· ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ javascript-Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊ. Π Π΄ΠΎΡΡΠΎΠΈΠ½ΡΡΠ²Π°Ρ
ΠΈ Π½Π΅Π΄ΠΎΡΡΠ°ΡΠΊΠ°Ρ
ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ hover-ΡΡΡΠ΅ΠΊΡΠΎΠ² Π½Π° ΡΠΈΡΡΠΎΠΌ CSS3 Π½Π΅ Π±ΡΠ΄Ρ, ΡΡΠΎ Π΄ΡΡΠ³Π°Ρ ΡΠ΅ΠΌΠ°, ΠΏΡΠΎΡΡΠΎ ΡΠΌΠΎΡΡΠΈΡΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΡ, ΠΈ ΠΏΡΠΈ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΠΏΠΎΠ½ΡΠ°Π²ΠΈΠ²ΡΠΈΠΉΡΡ Ρ ΡΠ΅Π±Ρ Π½Π° ΡΠ°ΠΉΡΠ΅. ΠΡΠ΅ ΡΡΡΠ΅ΠΊΡΡ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½Π½ΡΠ΅ Π² ΠΎΠ±Π·ΠΎΡΠ΅ ΡΠ½Π°Π±ΠΆΠ΅Π½Ρ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΡΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠΌ ΠΈ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎΠΉ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΠ΅ΠΉ Ρ ΠΈΡΡ
ΠΎΠ΄Π½ΠΈΠΊΠ°ΠΌΠΈ. ΠΠ°Π½ΡΠ°Π»Ρ ΠΏΠΎ-Π±ΠΎΠ»ΡΡΠ΅ΠΉ ΡΠ°ΡΡΠΈ Π½Π° Π±ΡΡΠΆΡΠΈΠ½ΡΠΊΠΎΠΌ, Π½ΠΎ Π²ΡΡ Π±ΠΎΠ»Π΅Π΅-ΠΌΠ΅Π½Π΅Π΅ ΠΈΠ½ΡΡΠΈΡΠΈΠ²Π½ΠΎ ΠΏΠΎΠ½ΡΡΠ½ΠΎ.
Π‘ΡΠ°Π·Ρ Ρ ΠΎΡΡ ΠΎΠ±ΡΠ°ΡΠΈΡΡ Π²Π°ΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° ΡΠΎ, ΡΡΠΎ Π²ΡΠ΅ ΡΡΠΈ ΠΏΡΠΈΠΌΠ΅ΡΡ Π±ΡΠ΄ΡΡ ΠΊΠΎΡΡΠ΅ΠΊΡΠ½ΠΎ ΡΠ°Π±ΠΎΡΠ°ΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π² ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ , ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° CSS3.
ΠΠ°Π±Ρ Π½Π΅ Π»ΠΎΠΌΠ°ΡΡ ΠΎΠ±ΡΡΡ ΠΊΠ°ΡΡΠΈΠ½Ρ, Π½Π΅ ΡΡΠ°Π» ΠΊΠΎΠ²Π΅ΡΠΊΠ°ΡΡ ΠΌΠ°ΡΠΈΠ½Π½ΡΠΌ ΠΏΠ΅ΡΠ΅Π²ΠΎΠ΄ΠΎΠΌ Π½Π°Π·Π²Π°Π½ΠΈΡ ΡΡΡΠ΅ΠΊΡΠΎΠ²(Π·Π° ΠΈΡΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ΠΌ Π½Π΅ΠΊΠΎΡΠΎΡΡΡ ), ΠΎΡΡΠ°Π²ΠΈΠ» ΠΎΡΠΈΠ³ΠΈΠ½Π°Π»Ρ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² ΡΠ°ΠΊΠΈΠΌΠΈ, ΠΊΠ°ΠΊ ΠΈΡ ΠΎΠ±ΠΎΠ·Π²Π°Π» ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊ.
Hover Effect Ideas
ΠΡΠ΅Π½Ρ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΠΉ ΡΡΡΠ΅ΠΊΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΠΌΠΈΠ½ΠΈΠ°ΡΡΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠΎΠ½ΠΊΠΈΡ Π»ΠΈΠ½ΠΈΠΉ Π² ΠΊΠΎΠ½ΡΡΡΡΠΊΡΠΈΠΈ ΠΈ ΡΠΈΠΏΠΎΠ³ΡΠ°ΡΠΈΠΈ. ΠΠ΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ Π²ΠΈΠ΄ΠΎΠ² ΡΡΡΠ΅ΠΊΡΠΎΠ² ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΡ ΠΏΠΎΠ΄ΠΏΠΈΡΠ΅ΠΉ ΠΊ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ°ΠΌ, ΠΌΡΠ³ΠΊΠΈΠ΅ ΠΈ Π½Π΅ Π½Π°Π²ΡΠ·ΡΠΈΠ²ΡΠ΅ 3D-ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π½ΠΈΡ, ΠΈ ΠΏΠ»Π°Π²Π½ΡΠ΅ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Ρ ΠΏΡΠ΅Π²Π΄ΠΎ-ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ². Π Π°Π±ΠΎΡΠ°Π΅Ρ ΡΠΎΠ»ΡΠΊΠΎ Π² ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ .
Β
iHover
iHover ΡΡΠΎ Π²ΠΏΠ΅ΡΠ°ΡΠ»ΡΡΡΠ°Ρ ΠΊΠΎΠ»Π»Π΅ΠΊΡΠΈΡ ΡΡΡΠ΅ΠΊΡΠΎΠ² ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΡΠΈΡΡΠΎΠΌ CSS3, Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΎΠΉ Bootstrap 3. ΠΠΎΡΡΡΠΎΠ΅Π½ Π½Π° Scss CSS (ΡΠ°ΠΉΠ»), Π»Π΅Π³ΠΊΠΎ ΠΌΠΎΠ΄ΠΈΡΠΈΡΠΈΡΡΠ΅ΡΡΡ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΡΠΌΠΈ. ΠΠΎΠ΄ ΠΌΠΎΠ΄ΡΠ»ΡΠ½ΡΠΉ, Π½Π΅Ρ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ Π²ΠΊΠ»ΡΡΠ°ΡΡ Π² ΡΠ°Π±ΠΎΡΡ Π²Π΅ΡΡ ΡΠ°ΠΉΠ». 30+ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΡΡΡΠ΅ΠΊΡΠΎΠ² Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΏΠ°ΠΊΠ΅ΡΠ΅. ΠΡΡ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ Ρ ΠΎΡΠΎΡΠΎ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠΈΡΠΎΠ²Π°Π½ΠΎ, ΡΡΡΠ΅ΠΊΡΡ ΠΎΡΠ΅Π½Ρ ΠΏΡΠΎΡΡΡ Π² ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ. ΠΡΠ΅, ΡΡΠΎ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ, ΡΡΠΎ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ Π²ΡΡΡΡΠΎΠΈΡΡ HTML-ΡΠ°Π·ΠΌΠ΅ΡΠΊΡ ΠΈ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠΈΡΡ ΡΠ°ΠΉΠ» CSS Π² ΡΠ°Π±ΠΎΡΡ.
Β
Caption Hover Effects
Π‘ΠΎΠ·Π΄Π°ΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΏΡΠΎΡΡΡΡ , Π½ΠΎ ΡΡΠΈΠ»ΡΠ½ΡΡ ΡΡΡΠ΅ΠΊΡΠΎΠ² ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π΄Π»Ρ ΠΏΠΎΠ΄ΠΏΠΈΡΠ΅ΠΉ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ. ΠΠ΄Π΅Ρ Π·Π°ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ Π² ΡΠΎΠΌ, ΡΡΠΎΠ±Ρ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΠΌΠΈΠ½ΠΈΠ°ΡΡΡΡ, ΠΏΠΎΠ»ΡΡΠΈΡΡ ΡΡΡΠ΅ΠΊΡΠ½ΠΎΠ΅ ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΠ΅ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°, ΠΈΠΌΡ Π°Π²ΡΠΎΡΠ° ΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΡΠ²ΡΠ·ΠΈ. ΠΠ»Ρ Π½Π΅ΠΊΠΎΡΠΎΡΡΡ ΡΡΡΠ΅ΠΊΡΠΎΠ² ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½Ρ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΡΠ΅ 3D-ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π½ΠΈΡ.
Β
ΠΡΡΠ΅ΠΊΡ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Π° CSS3
Π‘ΠΎΠ²ΡΠ΅ΠΌ ΡΠΆ ΠΏΡΠΎΡΡΠ΅ΡΠΊΠΈΠΉ ΡΡΡΠ΅ΠΊΡ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Π°, Π±Π΅Π· ΠΎΡΠΎΠ±ΡΡ Π½Π°Π²ΠΎΡΠΎΡΠΎΠ², ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΠΊΡΡΠ³Π»ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π² ΡΠ°ΠΌΠΊΠ΅, ΡΡΠ°Π½ΡΡΠΎΡΠΌΠΈΡΡΠ΅ΡΡΡ ΠΌΠ΅Π½ΡΡ ΡΠΎΠΊΡΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΈ Π²ΡΡ.
Β
Hover-ΡΡΡΠ΅ΠΊΡΡ Π΄Π»Ρ ΠΌΠΈΠ½ΠΈΠ°ΡΡΡ Π½Π° CSS3
Π Π°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅Ρ ΡΠ²ΠΎΡ ΡΠ°Π±ΠΎΡΡ, ΠΊΠ°ΠΊ ΠΏΡΠΈΠΌΠ΅Ρ Π³Π°Π»Π΅ΡΠ΅ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Ρ ΡΡΡΠ΅ΠΊΡΠ°ΠΌΠΈ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ΠΎΠ² ΠΏΡΠΈ ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΠΈ Π°Π½Π½ΠΎΡΠ°ΡΠΈΠΉ(ΠΏΠΎΠ΄ΠΏΠΈΡΠ΅ΠΉ) ΠΊ ΠΌΠΈΠ½ΠΈΠ°ΡΡΡΠ°ΠΌ. ΠΠ°ΡΠ²Π»Π΅Π½Π° ΡΠ²Π΅ΡΠ΅Π½Π½Π°Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠΌΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌΠΈ, Π²ΠΊΠ»ΡΡΠ°Ρ IE 9+. ΠΠΎΠ»Π½ΠΎΡΠ΅Π½Π½ΠΎΠΉ Π³Π°Π»Π΅ΡΠ΅Π΅ΠΉ, ΠΊΠΎΠ½Π΅ΡΠ½ΠΎ Π½Π°Π·Π²Π°ΡΡ ΡΡΠΎ ΡΠ»ΠΎΠΆΠ½ΠΎ, Π° Π²ΠΎΡ ΡΡΡΠ΅ΠΊΡ ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΡ ΠΏΠΎΠ΄ΠΏΠΈΡΠ΅ΠΉ, Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΠΉ.
Β
Circle Hover Effects
ΠΡΠ΅ΡΠ΅Π΄Π½ΠΎΠΉ Π½Π°Π±ΠΎΡ ΠΏΡΠ°Π²ΠΈΠ» CSS, Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π²ΠΏΠ΅ΡΠ°ΡΠ»ΡΡΡΠΈΡ ΡΡΡΠ΅ΠΊΡΠΎΠ² ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π½ΠΈΠΉ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΊΡΡΠ³Π»ΡΠ΅ ΠΌΠΈΠ½ΠΈΠ°ΡΡΡΡ. ΠΠ°ΠΊΠ΅Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ 7 Π²ΠΈΠ΄ΠΎΠ² ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ΠΎΠ² CSS3, ΠΎΡΠ΅Π½Ρ ΠΏΠΎΠ΄ΡΠΎΠ±Π½Π°Ρ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΡ ΠΏΠΎ Π½Π°ΡΡΡΠΎΠΉΠΊΠ΅ ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ. ΠΡΡΠ΅ΠΊΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ Π²ΡΠ΅ΠΌΠΈ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠΌΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌΠΈ.
Β
ΠΡΠ°ΡΠ΅Π½ΠΈΠ΅ ΠΌΠΈΠ½ΠΈΠ°ΡΡΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ
ΠΡΠΎΡΡΠΎΠΉ ΡΡΡΠ΅ΠΊΡ Π²ΡΠ°ΡΠ΅Π½ΠΈΡ ΠΊΡΡΠ³Π»ΡΡ ΠΌΠΈΠ½ΠΈΠ°ΡΡΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° Π½ΠΈΡ ΠΊΡΡΡΠΎΡΠ° ΠΌΡΡΠΈ, ΠΏΡΠΈΠΌΠ΅ΡΠ½ΠΎ ΡΠ°ΠΊΠΎΠΉ ΠΆΠ΅ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΠΈΠ΄Π΅ΡΡ Ρ ΠΌΠ΅Π½Ρ Π½Π° Π±Π»ΠΎΠ³Π΅, Π² Π°Π½ΠΎΠ½ΡΠ°Ρ Π·Π°ΠΏΠΈΡΠ΅ΠΉ Π½Π° Π³Π»Π°Π²Π½ΠΎΠΉ. Π Π΅Π°Π»ΠΈΠ·ΡΠ΅ΡΡΡ ΠΏΠ°ΡΠΎΠΉ-ΡΡΠΎΠΉΠΊΠΎΠΉ ΡΡΡΠΎΠΊ ΠΊΠΎΠ΄Π° css.
Β
Sexy Image Hover Effects
ΠΡΠ»ΠΈ ΠΏΠ΅ΡΠ΅Π²Π΅ΡΡΠΈ Π΄ΠΎΡΠ»ΠΎΠ²Π½ΠΎ:βΠ‘Π΅ΠΊΡΡΠ°Π»ΡΠ½ΡΠΉ ΡΡΡΠ΅ΠΊΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡβ. Π§ΡΠΎ-ΡΠΎ ΡΠ°ΠΊΠΎΠ³ΠΎ ΡΠ΅ΠΊΡΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ, Π² ΡΡΠΎΠΌ ΡΡΡΠ΅ΠΊΡΠ΅ Π²Ρ ΠΊΠΎΠ½Π΅ΡΠ½ΠΎ ΠΆΠ΅ Π²ΡΡΠ΄ Π»ΠΈ Π·Π°ΠΌΠ΅ΡΠΈΡΠ΅, Π΅ΡΠ»ΠΈ ΡΠΎΠ»ΡΠΊΠΎ Ρ Π²Π°Ρ Π½Π΅ Π±ΡΠΉΠ½Π°Ρ ΡΠ°Π½ΡΠ°Π·ΠΈΡ, Π½ΠΎ ΡΡΡΠ΅ΠΊΡ ΠΏΠΎ ΡΠ²ΠΎΠ΅ΠΌΡ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ΅Π½ ΠΈ ΠΎΠ±ΡΠ°ΡΠΈΡΡ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° Π½Π΅Π³ΠΎ ΡΡΠΎΠΈΡ.
Β
5 Hover-ΡΡΡΠ΅ΠΊΡΠΎΠ² Π½Π° CSS3
ΠΡΡΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΡΡΡΠ΅ΠΊΡΠΎΠ² Π΄Π»Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° Π½ΠΈΡ . ΠΡΠΏΠ»ΡΠ²Π°ΡΡΠΈΠ΅ ΠΏΠΎΠ΄ΠΏΠΈΡΠΈ Π² ΡΡΡΡ Π²Π°ΡΠΈΠ°ΡΠΈΡΡ , ΡΡΠΎΡΠΊΠΈ Π² Π²ΠΈΠ΄Π΅ ΡΠΌΠ΅Π½Ρ ΡΡΠ΅ΠΏΠ΅Π½ΠΈ ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΡΡΠΈ ΠΈ Π²ΡΠ°ΡΠ΅Π½ΠΈΠ΅ Ρ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ.
Β
ΠΠ½ΠΈΠΌΠ°ΡΠΈΡ ΠΏΠΎΠ΄ΠΏΠΈΡΠ΅ΠΉ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ
4 ΠΠΈΠ΄Π° ΡΡΡΠ΅ΠΊΡΠΎΠ² Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΠΏΠΎΠ΄ΠΏΠΈΡΠ΅ΠΉ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½Π½ΡΡ ΠΈΡΠΊΠ»ΡΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΡΠ΅Π΄ΡΡΠ²Π°ΠΌΠΈ CSS3. Π Π°Π·Π½ΡΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ ΠΏΡΠΈ ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΠΈ ΠΈ ΡΡΡΠ΅ΠΊΡΡ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ΠΎΠ², Π²ΠΏΠΎΠ»Π½Π΅ ΡΠ΅Π±Π΅ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΠΎΠ΅ ΠΈΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅. Π§ΡΠΎΠ±Ρ ΠΏΠΎΠ½ΡΡΡ, ΠΊΠ°ΠΊ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ, Π·Π°Π³Π»ΡΠ½ΠΈΡΠ΅ Π² ΠΈΡΡ ΠΎΠ΄Π½ΡΠΉ ΠΊΠΎΠ΄ Π΄Π΅ΠΌΠΎ-ΡΡΡΠ°Π½ΠΈΡΡ, ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎΠΉ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ Π½Π΅ ΠΎΠ±Π½Π°ΡΡΠΆΠΈΠ».
Β
Hover-ΡΡΡΠ΅ΠΊΡΡ Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ
ΠΡΡΡΡΠΎΠ΅Π½Π½ΡΠ΅ Π² ΡΠ΅ΡΠΊΡ Π³Π°Π»Π΅ΡΠ΅ΠΈ ΠΌΠΈΠ½ΠΈΠ°ΡΡΡΡ Ρ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠΌΠΈ ΡΡΡΠ΅ΠΊΡΠ°ΠΌΠΈ ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΡ ΠΏΠΎΠ΄ΠΏΠΈΡΠ΅ΠΉ, Π²ΡΠ°ΡΠ΅Π½ΠΈΠ΅, ΠΏΡΠΎΡΠ²Π»Π΅Π½ΠΈΠ΅, Π²ΡΠΏΠ»ΡΡΠΈΠ΅ ΠΈ Ρ.Π΄. ΠΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΡ ΠΏΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΈ Π½Π°ΡΡΡΠΎΠΉΠΊΠ΅ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΡΠΊΡΠ΄Π½Π°, Π½ΠΎ ΠΏΡΠΈ ΠΎΡΠΎΠ±ΠΎΠΌ ΠΆΠ΅Π»Π°Π½ΠΈΠΈ ΡΠ°Π·ΠΎΠ±ΡΠ°ΡΡΡΡ ΠΌΠΎΠΆΠ½ΠΎ.
Β
ΠΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΡΠΊΠΎΡΡΠΈ ΠΊΠ°ΡΡΠΈΠ½ΠΎΠΊ
ΠΠ°Π½Π½ΡΠΉ ΡΡΡΠ΅ΠΊΡ ΠΎΡΠΎΠ±ΠΎΠ³ΠΎ Π½ΠΈΡΠ΅Π³ΠΎ ΠΈΠ· ΡΠ΅Π±Ρ Π½Π΅ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ, Π±Π°Π½Π°Π»ΡΠ½Π°Ρ ΡΠΌΠ΅Π½Π° ΡΡΠΊΠΎΡΡΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ, ΡΠ°Π·Π²Π΅ ΡΡΠΎ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ. Π Π°Π·Π±ΠΈΡΠ°ΡΡΡΡ Ρ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎΡΡΡΠΌΠΈ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ ΠΏΡΠΈΠ΄ΡΡΡΡ ΡΠ°ΠΌΠΎΡΡΠΎΡΡΠ΅Π»ΡΠ½ΠΎ, ΡΠ°Π·Π»ΠΎΠΆΠΈΠ² ΠΈΡΡ ΠΎΠ΄Π½ΠΈΠΊΠΈ Π΄Π΅ΠΌΠΎ.
Β
10 Image Hover Effects
ΠΡΡ ΠΎΠ΄ΠΈΠ½ Π½Π°Π±ΠΎΡ ΠΈΠ· 10 hover-ΡΡΡΠ΅ΠΊΡΠΎΠ² Π΄Π»Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ Π²ΠΈΠ΄ΠΎΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΠΌΠΈΠ½ΠΈΠ°ΡΡΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ, ΡΠ²Π΅Π»ΠΈΡΠ΅Π½ΠΈΠ΅, ΡΠΎΡΠ°ΡΠΈΡ, ΠΏΠΎΠ²ΠΎΡΠΎΡ, Π·Π°ΡΠ΅ΠΌΠ½Π΅Π½ΠΈΠ΅ ΠΈ Ρ.Π΄.
Β Border Animation Effect
Β
Π Π°Π·Π»ΠΈΡΠ½ΡΠ΅ ΡΡΡΠ΅ΠΊΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΡΠ°ΠΌΠΊΠΈ Π²ΠΎΠΊΡΡΠ³ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, ΡΠΌΠΎΡΡΠΈΡΡΡ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°ΡΠ΅Π»ΡΠ½ΠΎ, ΠΈΠΌΠ΅Π΅ΡΡΡ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎΠ΅ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²ΠΎ ΠΏΠΎ Π½Π°ΡΡΡΠΎΠΉΠΊΠ΅ ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ.
Β
Original Hover Effects With CSS3
ΠΡΠΈΠ³ΠΈΠ½Π°Π»ΡΠ½ΡΠ΅ hover-ΡΡΡΠ΅ΠΊΡΡ Π½Π° CSS3 ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΠΌΡΠ΅ Π΄Π»Ρ ΡΡΡΠ΅ΠΊΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΡ ΠΏΠΎΠ΄ΠΏΠΈΡΠ΅ΠΉ ΠΌΠΈΠ½ΠΈΠ°ΡΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ. Π Π½Π°Π±ΠΎΡ ΠΏΡΠ°Π²ΠΈΠ» CSS Π²Ρ ΠΎΠ΄ΡΡ 10 ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΡΡΡΠ΅ΠΊΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎ Π΄Π»Ρ ΡΠ°Π·Π½ΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΎΠΊ. ΠΡΡΠ΅ΠΊΡΡ ΠΏΠΎ-Π½Π°ΡΡΠΎΡΡΠ΅ΠΌΡ Π²ΠΏΠ΅ΡΠ°ΡΠ»ΡΡΡ, ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎ ΠΏΠΎΠ½ΠΈΠΌΠ°Ρ ΡΠΎ, ΡΡΠΎ Π²ΡΡ ΡΡΠΎ ΡΠ΄Π΅Π»Π°Π½ΠΎ Π»ΠΈΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS3. ΠΠΎΠ΄ΡΠΎΠ±Π½ΠΎΠ΅ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²ΠΎ, ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ Π²Π°ΠΌ ΡΠ°Π·ΠΎΠ±ΡΠ°ΡΡΡΡ ΡΡΠΎ ΠΊ ΡΠ΅ΠΌΡ.
Shape Hover Effect
ΠΠ΄Π΅Ρ ΡΠΎΡΡΠΎΠΈΡ Π² ΡΠΎΠΌ, ΡΡΠΎΠ±Ρ ΡΠΎΠ·Π΄Π°ΡΡ SVG, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠΎΠ±ΠΎΠΉ ΡΠΎΡΠΌΡ-ΡΠΎΠ½ Π΄Π»Ρ ΠΊΠ°ΠΊΠΎΠΉ-ΡΠΎ Π½Π°Π΄ΠΏΠΈΡΠΈ ΠΈ ΠΏΡΠ΅Π²ΡΠ°ΡΠ°Π΅ΡΡΡ Π² Π΄ΡΡΠ³ΡΡ ΡΠΎΡΠΌΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° ΠΌΡΡΠΈ. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ ΡΠ°Π·Π½ΡΡ Π²Π°ΡΠΈΠ°Π½ΡΠΎΠ², Π² ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΆΠ΅, ΠΏΠΎΠΊΠ°Π·Π°Π½Ρ ΡΡΠΈ Π²ΠΈΠ΄Π° ΡΡΡΠ΅ΠΊΡΠΎΠ² ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ΠΎΠ². ΠΠΎΡΡΠΎΠΈΠ½ΡΡΠ²ΠΎΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ SVG ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠΎ, ΡΡΠΎ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΎΡΠΌΡ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°.
Β
Π Π°Π·Π΄Π²ΠΈΠΆΠ½ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
Π‘ΡΡΡ Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΡΡΡΠ΅ΠΊΡΠ° Π² ΡΠΎΠΌ, ΡΡΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠ°Π·Π΄Π²ΠΈΠ³Π°Π΅ΡΡΡ Π²Π²Π΅ΡΡ ΠΈ Π²Π½ΠΈΠ· Π΄Π»Ρ ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΡ ΠΏΠΎΠ΄ΠΏΠΈΡΠΈ. ΠΡΠ»ΠΈ ΠΏΠΎΡΠ°Π±ΠΎΡΠ°ΡΡ Ρ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠ°ΠΌΠΈ ΡΡΠΈΠ»Π΅ΠΉ, Π΄ΡΠΌΠ°Ρ ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ±ΠΈΡΡΡΡ Π²ΠΏΠΎΠ»Π½Π΅-ΡΠ΅Π±Π΅ ΡΠΈΠΌΠΏΠ°ΡΠΈΡΠ½ΡΡ ΡΡΡΠ΅ΠΊΡΠΎΠ², Π° ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ, Π²ΡΠ³Π»ΡΠ΄ΠΈΡ Π²ΡΡ ΡΠΎΠ²ΡΠ΅ΠΌ ΡΠΆ ΠΏΡΠΎΡΡΠΎ.
Β
Slick CSS3 Animated Image
Π‘ ΡΡΠΈΠΌ ΡΡΡΠ΅ΠΊΡΠΎΠΌ Π²ΡΡ ΠΏΡΠΎΡΡΠΎ, ΠΏΠΎΠ΄ΠΏΠΈΡΠΈ ΠΊ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ°ΠΌ Π²ΡΡΠΊΠ°Π»ΡΠ·ΡΠ²Π°ΡΡ Π² Π²Π΅ΡΡ Ρ ΡΠΏΡΠ°Π²Π° ΠΈΠ»ΠΈ ΡΠ»Π΅Π²Π° Π² Π½ΠΈΠ·Ρ, Π² Π²ΠΈΠ΄Π΅ Π»Π΅Π½ΡΡ Ρ ΠΏΠΎΠ»ΡΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΡΠΌ ΡΡΠΌΠ½ΡΠΌ ΡΠΎΠ½ΠΎΠΌ, Π²ΡΡ ΠΎΡΠ΅Π½Ρ ΠΏΡΠΎΡΡΠΎ ΠΏΠ΅ΡΠ΅ΡΠΎΡΠΌΠΈΡΡΠ΅ΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ² css.
Β
ΠΡΠΏΠ»ΡΠ²Π°ΡΡΠ°Ρ ΠΏΠΎΠ΄ΠΏΠΈΡΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ
ΠΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅, ΠΌΠΈΠ½ΠΈΠ°ΡΡΡΡ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½Ρ Π² Π·Π°ΡΠ΅ΠΌΠ½ΡΠ½Π½ΠΎΠΌ Π²ΠΈΠ΄Π΅, ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΡΠΎΡΠ²Π»ΡΡΡΡΡ ΠΈ Π²ΡΠΏΠ»ΡΠ²Π°Π΅Ρ ΠΏΠΎΠ΄ΠΏΠΈΡΡ Π½Π° ΡΠ²Π΅ΡΠ»ΠΎΠΌ ΡΠΎΠ½Π΅.
Β
ΠΠΈΠ°Π³ΠΎΠ½Π°Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΠ΅ ΠΏΠΎΠ΄ΠΏΠΈΡΠΈ
ΠΠΎΠ΄ΠΏΠΈΡΡ ΠΊ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ ΠΈΠ· ΡΠ³Π»Π° ΠΈ ΡΠ°ΡΡΠΈΡΡΠ΅ΡΡΡ Π½Π° Π²ΡΡ ΠΏΠ»ΠΎΡΠ°Π΄Ρ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ ΠΏΠΎ Π΄ΠΈΠ°Π³ΠΎΠ½Π°Π»ΠΈ.
Β
ΠΠ½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ ΠΌΠΈΠ½ΠΈΠ°ΡΡΡ
ΠΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΡ ΡΠ΅ΡΠ΅Π½ΠΈΠΉ Π΄Π»Ρ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΠΈΡ ΠΏΠΎΠ΄ΠΏΠΈΡΠ΅ΠΉ ΠΊ ΠΌΠΈΠ½ΠΈΠ°ΡΡΡΠ°ΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ. Π ΠΎΠ½Π»Π°ΠΉΠ½-ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠ΅ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΡΠΊΡΠΏΠ΅ΡΠΈΠΌΠ΅Π½ΡΠΈΡΠΎΠ²Π°ΡΡ Ρ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠ°ΠΌΠΈ ΠΈ Π΄ΠΎΠ±ΠΈΡΡΡΡ Π±ΠΎΠ»Π΅Π΅ Π²ΠΏΠ΅ΡΠ°ΡΠ»ΡΡΡΠΈΡ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠΎΠ².
Β
ΠΠΎΠ΄ΡΡΡΠΊΠ½ΡΡΡΠ΅ ΠΈΠ»ΠΈ ΠΎΡΠ΅ΡΡΠ΅Π½Π½ΡΠ΅ ΠΏΠΎΠ΄ΠΏΠΈΡΠΈ ΠΊ ΠΌΠΈΠ½ΠΈΠ°ΡΡΡΠ°ΠΌ
ΠΠ°Π±ΠΎΡ ΠΊΡΠ°ΡΠΈΠ²ΡΡ ΡΡΡΠ΅ΠΊΡΠΎΠ² ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΠΌΠΈΠ½ΠΈΠ°ΡΡΡΡ, ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ Π²ΠΈΠ΄Ρ ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΡ ΠΈ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΡ ΠΏΠΎΠ΄ΠΏΠΈΡΠ΅ΠΉ ΠΊ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ°ΠΌ. Π’ΠΎΠ½ΠΊΠΈΠ΅ Π»ΠΈΠ½ΠΈΠΈ Π² ΠΊΠΎΠ½ΡΡΠ°ΡΡΠ΅ Ρ ΡΠ»Π΅Π³ΠΊΠ° Π·Π°ΡΠ΅ΠΌΠ½ΡΠ½Π½ΡΠΌ ΡΠΎΠ½ΠΎΠΌ ΡΠΎΠ·Π΄Π°ΡΡ Π»ΡΠ³ΠΊΠΈΠ΅ Π΄Π»Ρ Π²ΠΎΡΠΏΡΠΈΡΡΠΈΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΎΠ½Π½ΡΠ΅ Π±Π»ΠΎΠΊΠΈ.
Β
ΠΡΠΈΡΡΠ΄Π»ΠΈΠ²ΡΠ΅ ΡΠΎΡΠΌΡ ΠΈ zoom-ΡΡΡΠ΅ΠΊΡ
ΠΡΠΈΡΡΠ΄Π»ΠΈΠ²ΡΠ΅ ΡΠΎΡΠΌΡ ΠΈ ΡΡΡΠ΅ΠΊΡ ΡΠ²Π΅Π»ΠΈΡΠ΅Π½ΠΈΡ Π² ΡΠ²ΡΠ·ΠΊΠ΅ Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΎΠ½Π½ΡΠΌ ΡΡΡΠ΅ΠΊΡΠΎΠΌ ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΡ ΠΏΠΎΠ΄ΠΏΠΈΡΠ΅ΠΉ ΠΊ ΠΌΠΈΠ½ΠΈΠ°ΡΡΡΠ°ΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ.
Β
ΠΠ°Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅
ΠΠ°ΠΌΠ΅ΡΠ°ΡΠ΅Π»ΡΠ½ΡΠ΅ ΡΡΡΠ΅ΠΊΡΡ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΈΠΊΠΎΠ½ΠΊΠΈ Π½Π° ΠΌΠΈΠ½ΠΈΠ°ΡΡΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π² ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ
Π²Π°ΡΠΈΠ°ΡΠΈΡΡ
ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΡ. Π ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ ΡΠΈΠΌΠ²ΠΎΠ» (+) ΠΎΡΠ΅ΡΡΠ΅Π½Π½ΡΠΉ ΠΊΡΡΠ³ΠΎΠΌ Ρ ΠΏΠΎΠΌΠΎΡΡΡ border-radius:
Π² CSS, ΡΠ°ΠΊ ΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΠΈΡΡ-ΠΈΠΊΠΎΠ½ΠΊΠΈ, Π΄Π»Ρ Π±ΠΎΠ»ΡΡΠ΅ΠΉ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠ²Π½ΠΎΡΡΠΈ Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΠ΅ΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ.
Β
6 ΠΠΎΠ΄ΠΏΠΈΡΠ΅ΠΉ ΠΊ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ°ΠΌ
6 ΠΠ°ΡΠΈΠ°Π½ΡΠΎΠ² ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΡ Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΠΈΡ ΠΏΠΎΠ΄ΠΏΠΈΡΠ΅ΠΉ ΠΊ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ°ΠΌ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS3. ΠΠΎΠ΄ΡΠΎΠ±Π½Π΅ΠΉΡΠΈΠΉ ΡΡΠΎΠΊ ΠΏΠΎ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ ΠΈ Π½Π°ΡΡΡΠΎΠΉΠΊΠ΅, Π΄ΠΎΡΡΡΠΏΠ½ΡΠ΅ Π΄Π»Ρ ΡΠΊΠ°ΡΠΈΠ²Π°Π½ΠΈΡ ΠΈΡΡ ΠΎΠ΄Π½ΠΈΠΊΠΈ.
ΠΡΡΠΎΡΠ½ΠΈΠΊ
Caption Hover Effects
Learn how to create some simple, yet stylish hover effects for image captions. The idea is to have a grid of figures and apply a hover effect to the items which will reveal a caption with the title, author and a link button.
View Tutorial
Direction aware CSS3 Hover Effect with jQuery
Create a direction-aware hover effect using CSS3 and jQuery.
Learn how to create a direction aware hover effect using some CSS3 goodness and jQuery. The idea is to have a little overlay slide in on top of some thumbnails from the direction that we are coming from with the mouse.
View Tutorial
Circle Hover Effects with CSS Transitions
A tutorial about how to create different hover effects on circles with CSS transitions and 3D rotations
In this tutorial weβll experiment with hover effects on circles. Since we have the border radius property, we can create circular shapes and they have been appearing more often as design elements in websites.
View Tutorial
Animated Text and Icon Menu with jQuery
Make elements slide out, change and animate the background color of the item and then slide the elements back in with a different color.
View Tutorial
CSS3 Hover Effects
Beautiful CSS3 Image Effects
This tutorial will show you five examples of CSS3 hover effects using different CSS properties. Please note that the CSS3 effects will only work properly in modern browsers that support the CSS3 properties in use.
View Tutorial
Unique CSS Button Hover Effects
Some creative and modern button styles and effects for your inspiration.
This CSS button set consists of some simple, creative and subtle styles and effects to inspire you. The effects can be seen when hovering on some buttons and clicking on others. Mostly, CSS transitions are used but also CSS animations and for some buttons a bit of JavaScript to add/remove effect classes is used.
View Tutorial
Icon Hover Effects
A set of simple round icon hover effects with CSS transitions and animations for your inspiration.
Hereβs a collection of simple icon hover effects. Create a subtle and stylish effect using CSS transitions and animations on the anchors and their pseudo-elements.
View Tutorial
ΠΡΠΈΠ³ΠΈΠ½Π°Π»ΡΠ½ΡΠ΅ hover-ΡΡΡΠ΅ΠΊΡΡ Π΄Π»Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π½Π° ΡΠΈΡΡΠΎΠΌ CSS3
ΠΡΠ΅ΠΆΠ΄Π΅ Π²ΡΠ΅Π³ΠΎ, Π΄Π»Ρ ΡΠ΅Ρ
ΠΊΡΠΎ Π½Π΅ ΡΠΎΠ²ΡΠ΅ΠΌ Π΅ΡΡ Π² ΡΠ΅ΠΌΠ΅ ΠΈΠ»ΠΈ ΡΠΎΠ²ΡΠ΅ΠΌ Π½Π΅ Π² ΡΠ΅ΠΌΠ΅, ΠΏΠΎΡΡΠ½Ρ Π²ΠΊΡΠ°ΡΡΠ΅, ΡΡΠΎ ΡΠ°ΠΊΠΎΠ΅ hover-ΡΡΡΠ΅ΠΊΡΡ. ΠΡΠΎ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ Π²ΠΈΠ΄Ρ ΡΡΡΠ΅ΠΊΡΠΎΠ² (Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΠΈΠ΅ ΠΏΠΎΠ΄ΠΏΠΈΡΠΈ, ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΊΠΈ, ΠΏΠ»Π°Π²Π½ΡΠ΅ ΠΏΠ΅ΡΠ΅Ρ
ΠΎΠ΄Ρ, ΡΡΠ°Π½ΡΡΠΎΡΠΌΠ°ΡΠΈΡ, ΡΠΎΡΠ°ΡΠΈΡ, ΡΠ²Π΅Π»ΠΈΡΠ΅Π½ΠΈΠ΅, ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΈ Ρ.Π΄ ΠΈ Ρ.ΠΏ.) ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΠΌΡΠ΅ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ Π²Π΅Π±-ΡΠ°ΠΉΡΠ° ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° Π½ΠΈΡ
ΠΊΡΡΡΠΎΡΠ° ΠΌΡΡΠΈ. Π Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½Ρ ΡΡΠΈ ΡΡΡΠ΅ΠΊΡΡ ΠΌΠΎΠ³ΡΡ ΠΊΠ°ΠΊ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ
ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² jQuery, ΡΠ°ΠΊ ΠΈ Π½Π° ΡΠΈΡΡΠΎΠΌ CSS3.
Π‘Π΅Π³ΠΎΠ΄Π½Ρ Ρ ΠΏΠΎΠ΄Π³ΠΎΡΠΎΠ²ΠΈΠ» Π±ΠΎΠ»ΡΡΡΡ ΠΏΠΎΠ΄Π±ΠΎΡΠΊΡ ΠΎΡΠΈΠ³ΠΈΠ½Π°Π»ΡΠ½ΡΡ
hover-ΡΡΡΠ΅ΠΊΡΠΎΠ² Π΄Π»Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΡΠΎΠ·Π΄Π°Π½Π½ΡΡ
Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS3, Π±Π΅Π· ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ javascript-Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊ. Π Π΄ΠΎΡΡΠΎΠΈΠ½ΡΡΠ²Π°Ρ
ΠΈ Π½Π΅Π΄ΠΎΡΡΠ°ΡΠΊΠ°Ρ
ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ hover-ΡΡΡΠ΅ΠΊΡΠΎΠ² Π½Π° ΡΠΈΡΡΠΎΠΌ CSS3 Π½Π΅ Π±ΡΠ΄Ρ, ΡΡΠΎ Π΄ΡΡΠ³Π°Ρ ΡΠ΅ΠΌΠ°, ΠΏΡΠΎΡΡΠΎ ΡΠΌΠΎΡΡΠΈΡΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΡ, ΠΈ ΠΏΡΠΈ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΠΏΠΎΠ½ΡΠ°Π²ΠΈΠ²ΡΠΈΠΉΡΡ Ρ ΡΠ΅Π±Ρ Π½Π° ΡΠ°ΠΉΡΠ΅. ΠΡΠ΅ ΡΡΡΠ΅ΠΊΡΡ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½Π½ΡΠ΅ Π² ΠΎΠ±Π·ΠΎΡΠ΅ ΡΠ½Π°Π±ΠΆΠ΅Π½Ρ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΡΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠΌ ΠΈ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎΠΉ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΠ΅ΠΉ Ρ ΠΈΡΡ
ΠΎΠ΄Π½ΠΈΠΊΠ°ΠΌΠΈ. ΠΠ°Π½ΡΠ°Π»Ρ ΠΏΠΎ-Π±ΠΎΠ»ΡΡΠ΅ΠΉ ΡΠ°ΡΡΠΈ Π½Π° Π±ΡΡΠΆΡΠΈΠ½ΡΠΊΠΎΠΌ, Π½ΠΎ Π²ΡΡ Π±ΠΎΠ»Π΅Π΅-ΠΌΠ΅Π½Π΅Π΅ ΠΈΠ½ΡΡΠΈΡΠΈΠ²Π½ΠΎ ΠΏΠΎΠ½ΡΡΠ½ΠΎ.
Π‘ΡΠ°Π·Ρ Ρ ΠΎΡΡ ΠΎΠ±ΡΠ°ΡΠΈΡΡ Π²Π°ΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° ΡΠΎ, ΡΡΠΎ Π²ΡΠ΅ ΡΡΠΈ ΠΏΡΠΈΠΌΠ΅ΡΡ Π±ΡΠ΄ΡΡ ΠΊΠΎΡΡΠ΅ΠΊΡΠ½ΠΎ ΡΠ°Π±ΠΎΡΠ°ΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π² ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ , ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° CSS3.
ΠΠ°Π±Ρ Π½Π΅ Π»ΠΎΠΌΠ°ΡΡ ΠΎΠ±ΡΡΡ ΠΊΠ°ΡΡΠΈΠ½Ρ, Π½Π΅ ΡΡΠ°Π» ΠΊΠΎΠ²Π΅ΡΠΊΠ°ΡΡ ΠΌΠ°ΡΠΈΠ½Π½ΡΠΌ ΠΏΠ΅ΡΠ΅Π²ΠΎΠ΄ΠΎΠΌ Π½Π°Π·Π²Π°Π½ΠΈΡ ΡΡΡΠ΅ΠΊΡΠΎΠ²(Π·Π° ΠΈΡΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ΠΌ Π½Π΅ΠΊΠΎΡΠΎΡΡΡ ), ΠΎΡΡΠ°Π²ΠΈΠ» ΠΎΡΠΈΠ³ΠΈΠ½Π°Π»Ρ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² ΡΠ°ΠΊΠΈΠΌΠΈ, ΠΊΠ°ΠΊ ΠΈΡ ΠΎΠ±ΠΎΠ·Π²Π°Π» ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊ.
Hover Effect Ideas
ΠΡΠ΅Π½Ρ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΠΉ ΡΡΡΠ΅ΠΊΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΠΌΠΈΠ½ΠΈΠ°ΡΡΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠΎΠ½ΠΊΠΈΡ Π»ΠΈΠ½ΠΈΠΉ Π² ΠΊΠΎΠ½ΡΡΡΡΠΊΡΠΈΠΈ ΠΈ ΡΠΈΠΏΠΎΠ³ΡΠ°ΡΠΈΠΈ. ΠΠ΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ Π²ΠΈΠ΄ΠΎΠ² ΡΡΡΠ΅ΠΊΡΠΎΠ² ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΡ ΠΏΠΎΠ΄ΠΏΠΈΡΠ΅ΠΉ ΠΊ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ°ΠΌ, ΠΌΡΠ³ΠΊΠΈΠ΅ ΠΈ Π½Π΅ Π½Π°Π²ΡΠ·ΡΠΈΠ²ΡΠ΅ 3D-ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π½ΠΈΡ, ΠΈ ΠΏΠ»Π°Π²Π½ΡΠ΅ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Ρ ΠΏΡΠ΅Π²Π΄ΠΎ-ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ². Π Π°Π±ΠΎΡΠ°Π΅Ρ ΡΠΎΠ»ΡΠΊΠΎ Π² ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ .
Β
iHover
iHover ΡΡΠΎ Π²ΠΏΠ΅ΡΠ°ΡΠ»ΡΡΡΠ°Ρ ΠΊΠΎΠ»Π»Π΅ΠΊΡΠΈΡ ΡΡΡΠ΅ΠΊΡΠΎΠ² ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΡΠΈΡΡΠΎΠΌ CSS3, Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΎΠΉ Bootstrap 3. ΠΠΎΡΡΡΠΎΠ΅Π½ Π½Π° Scss CSS (ΡΠ°ΠΉΠ»), Π»Π΅Π³ΠΊΠΎ ΠΌΠΎΠ΄ΠΈΡΠΈΡΠΈΡΡΠ΅ΡΡΡ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΡΠΌΠΈ. ΠΠΎΠ΄ ΠΌΠΎΠ΄ΡΠ»ΡΠ½ΡΠΉ, Π½Π΅Ρ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ Π²ΠΊΠ»ΡΡΠ°ΡΡ Π² ΡΠ°Π±ΠΎΡΡ Π²Π΅ΡΡ ΡΠ°ΠΉΠ». 30+ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΡΡΡΠ΅ΠΊΡΠΎΠ² Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΏΠ°ΠΊΠ΅ΡΠ΅. ΠΡΡ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ Ρ ΠΎΡΠΎΡΠΎ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠΈΡΠΎΠ²Π°Π½ΠΎ, ΡΡΡΠ΅ΠΊΡΡ ΠΎΡΠ΅Π½Ρ ΠΏΡΠΎΡΡΡ Π² ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ. ΠΡΠ΅, ΡΡΠΎ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ, ΡΡΠΎ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ Π²ΡΡΡΡΠΎΠΈΡΡ HTML-ΡΠ°Π·ΠΌΠ΅ΡΠΊΡ ΠΈ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠΈΡΡ ΡΠ°ΠΉΠ» CSS Π² ΡΠ°Π±ΠΎΡΡ.
Β
Caption Hover Effects
Π‘ΠΎΠ·Π΄Π°ΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΏΡΠΎΡΡΡΡ , Π½ΠΎ ΡΡΠΈΠ»ΡΠ½ΡΡ ΡΡΡΠ΅ΠΊΡΠΎΠ² ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π΄Π»Ρ ΠΏΠΎΠ΄ΠΏΠΈΡΠ΅ΠΉ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ. ΠΠ΄Π΅Ρ Π·Π°ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ Π² ΡΠΎΠΌ, ΡΡΠΎΠ±Ρ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΠΌΠΈΠ½ΠΈΠ°ΡΡΡΡ, ΠΏΠΎΠ»ΡΡΠΈΡΡ ΡΡΡΠ΅ΠΊΡΠ½ΠΎΠ΅ ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΠ΅ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°, ΠΈΠΌΡ Π°Π²ΡΠΎΡΠ° ΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΡΠ²ΡΠ·ΠΈ. ΠΠ»Ρ Π½Π΅ΠΊΠΎΡΠΎΡΡΡ ΡΡΡΠ΅ΠΊΡΠΎΠ² ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½Ρ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΡΠ΅ 3D-ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π½ΠΈΡ.
Β
ΠΡΡΠ΅ΠΊΡ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Π° CSS3
Π‘ΠΎΠ²ΡΠ΅ΠΌ ΡΠΆ ΠΏΡΠΎΡΡΠ΅ΡΠΊΠΈΠΉ ΡΡΡΠ΅ΠΊΡ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Π°, Π±Π΅Π· ΠΎΡΠΎΠ±ΡΡ Π½Π°Π²ΠΎΡΠΎΡΠΎΠ², ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΠΊΡΡΠ³Π»ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π² ΡΠ°ΠΌΠΊΠ΅, ΡΡΠ°Π½ΡΡΠΎΡΠΌΠΈΡΡΠ΅ΡΡΡ ΠΌΠ΅Π½ΡΡ ΡΠΎΠΊΡΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΈ Π²ΡΡ.
Β
Hover-ΡΡΡΠ΅ΠΊΡΡ Π΄Π»Ρ ΠΌΠΈΠ½ΠΈΠ°ΡΡΡ Π½Π° CSS3
Π Π°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅Ρ ΡΠ²ΠΎΡ ΡΠ°Π±ΠΎΡΡ, ΠΊΠ°ΠΊ ΠΏΡΠΈΠΌΠ΅Ρ Π³Π°Π»Π΅ΡΠ΅ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Ρ ΡΡΡΠ΅ΠΊΡΠ°ΠΌΠΈ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ΠΎΠ² ΠΏΡΠΈ ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΠΈ Π°Π½Π½ΠΎΡΠ°ΡΠΈΠΉ(ΠΏΠΎΠ΄ΠΏΠΈΡΠ΅ΠΉ) ΠΊ ΠΌΠΈΠ½ΠΈΠ°ΡΡΡΠ°ΠΌ. ΠΠ°ΡΠ²Π»Π΅Π½Π° ΡΠ²Π΅ΡΠ΅Π½Π½Π°Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠΌΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌΠΈ, Π²ΠΊΠ»ΡΡΠ°Ρ IE 9+. ΠΠΎΠ»Π½ΠΎΡΠ΅Π½Π½ΠΎΠΉ Π³Π°Π»Π΅ΡΠ΅Π΅ΠΉ, ΠΊΠΎΠ½Π΅ΡΠ½ΠΎ Π½Π°Π·Π²Π°ΡΡ ΡΡΠΎ ΡΠ»ΠΎΠΆΠ½ΠΎ, Π° Π²ΠΎΡ ΡΡΡΠ΅ΠΊΡ ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΡ ΠΏΠΎΠ΄ΠΏΠΈΡΠ΅ΠΉ, Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΠΉ.
Β
Circle Hover Effects
ΠΡΠ΅ΡΠ΅Π΄Π½ΠΎΠΉ Π½Π°Π±ΠΎΡ ΠΏΡΠ°Π²ΠΈΠ» CSS, Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π²ΠΏΠ΅ΡΠ°ΡΠ»ΡΡΡΠΈΡ ΡΡΡΠ΅ΠΊΡΠΎΠ² ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π½ΠΈΠΉ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΊΡΡΠ³Π»ΡΠ΅ ΠΌΠΈΠ½ΠΈΠ°ΡΡΡΡ. ΠΠ°ΠΊΠ΅Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ 7 Π²ΠΈΠ΄ΠΎΠ² ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ΠΎΠ² CSS3, ΠΎΡΠ΅Π½Ρ ΠΏΠΎΠ΄ΡΠΎΠ±Π½Π°Ρ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΡ ΠΏΠΎ Π½Π°ΡΡΡΠΎΠΉΠΊΠ΅ ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ. ΠΡΡΠ΅ΠΊΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ Π²ΡΠ΅ΠΌΠΈ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠΌΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌΠΈ.
Β
ΠΡΠ°ΡΠ΅Π½ΠΈΠ΅ ΠΌΠΈΠ½ΠΈΠ°ΡΡΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ
ΠΡΠΎΡΡΠΎΠΉ ΡΡΡΠ΅ΠΊΡ Π²ΡΠ°ΡΠ΅Π½ΠΈΡ ΠΊΡΡΠ³Π»ΡΡ ΠΌΠΈΠ½ΠΈΠ°ΡΡΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° Π½ΠΈΡ ΠΊΡΡΡΠΎΡΠ° ΠΌΡΡΠΈ, ΠΏΡΠΈΠΌΠ΅ΡΠ½ΠΎ ΡΠ°ΠΊΠΎΠΉ ΠΆΠ΅ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΠΈΠ΄Π΅ΡΡ Ρ ΠΌΠ΅Π½Ρ Π½Π° Π±Π»ΠΎΠ³Π΅, Π² Π°Π½ΠΎΠ½ΡΠ°Ρ Π·Π°ΠΏΠΈΡΠ΅ΠΉ Π½Π° Π³Π»Π°Π²Π½ΠΎΠΉ. Π Π΅Π°Π»ΠΈΠ·ΡΠ΅ΡΡΡ ΠΏΠ°ΡΠΎΠΉ-ΡΡΠΎΠΉΠΊΠΎΠΉ ΡΡΡΠΎΠΊ ΠΊΠΎΠ΄Π° css.
Β
Sexy Image Hover Effects
ΠΡΠ»ΠΈ ΠΏΠ΅ΡΠ΅Π²Π΅ΡΡΠΈ Π΄ΠΎΡΠ»ΠΎΠ²Π½ΠΎ:Β»Π‘Π΅ΠΊΡΡΠ°Π»ΡΠ½ΡΠΉ ΡΡΡΠ΅ΠΊΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΒ«. Π§ΡΠΎ-ΡΠΎ ΡΠ°ΠΊΠΎΠ³ΠΎ ΡΠ΅ΠΊΡΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ, Π² ΡΡΠΎΠΌ ΡΡΡΠ΅ΠΊΡΠ΅ Π²Ρ ΠΊΠΎΠ½Π΅ΡΠ½ΠΎ ΠΆΠ΅ Π²ΡΡΠ΄ Π»ΠΈ Π·Π°ΠΌΠ΅ΡΠΈΡΠ΅, Π΅ΡΠ»ΠΈ ΡΠΎΠ»ΡΠΊΠΎ Ρ Π²Π°Ρ Π½Π΅ Π±ΡΠΉΠ½Π°Ρ ΡΠ°Π½ΡΠ°Π·ΠΈΡ, Π½ΠΎ ΡΡΡΠ΅ΠΊΡ ΠΏΠΎ ΡΠ²ΠΎΠ΅ΠΌΡ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ΅Π½ ΠΈ ΠΎΠ±ΡΠ°ΡΠΈΡΡ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° Π½Π΅Π³ΠΎ ΡΡΠΎΠΈΡ.
Β
5 Hover-ΡΡΡΠ΅ΠΊΡΠΎΠ² Π½Π° CSS3
ΠΡΡΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΡΡΡΠ΅ΠΊΡΠΎΠ² Π΄Π»Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° Π½ΠΈΡ . ΠΡΠΏΠ»ΡΠ²Π°ΡΡΠΈΠ΅ ΠΏΠΎΠ΄ΠΏΠΈΡΠΈ Π² ΡΡΡΡ Π²Π°ΡΠΈΠ°ΡΠΈΡΡ , ΡΡΠΎΡΠΊΠΈ Π² Π²ΠΈΠ΄Π΅ ΡΠΌΠ΅Π½Ρ ΡΡΠ΅ΠΏΠ΅Π½ΠΈ ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΡΡΠΈ ΠΈ Π²ΡΠ°ΡΠ΅Π½ΠΈΠ΅ Ρ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ.
Β
ΠΠ½ΠΈΠΌΠ°ΡΠΈΡ ΠΏΠΎΠ΄ΠΏΠΈΡΠ΅ΠΉ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ
4 ΠΠΈΠ΄Π° ΡΡΡΠ΅ΠΊΡΠΎΠ² Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΠΏΠΎΠ΄ΠΏΠΈΡΠ΅ΠΉ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½Π½ΡΡ ΠΈΡΠΊΠ»ΡΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΡΠ΅Π΄ΡΡΠ²Π°ΠΌΠΈ CSS3. Π Π°Π·Π½ΡΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ ΠΏΡΠΈ ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΠΈ ΠΈ ΡΡΡΠ΅ΠΊΡΡ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ΠΎΠ², Π²ΠΏΠΎΠ»Π½Π΅ ΡΠ΅Π±Π΅ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΠΎΠ΅ ΠΈΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅. Π§ΡΠΎΠ±Ρ ΠΏΠΎΠ½ΡΡΡ, ΠΊΠ°ΠΊ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ, Π·Π°Π³Π»ΡΠ½ΠΈΡΠ΅ Π² ΠΈΡΡ ΠΎΠ΄Π½ΡΠΉ ΠΊΠΎΠ΄ Π΄Π΅ΠΌΠΎ-ΡΡΡΠ°Π½ΠΈΡΡ, ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎΠΉ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ Π½Π΅ ΠΎΠ±Π½Π°ΡΡΠΆΠΈΠ».
Β
Hover-ΡΡΡΠ΅ΠΊΡΡ Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ
ΠΡΡΡΡΠΎΠ΅Π½Π½ΡΠ΅ Π² ΡΠ΅ΡΠΊΡ Π³Π°Π»Π΅ΡΠ΅ΠΈ ΠΌΠΈΠ½ΠΈΠ°ΡΡΡΡ Ρ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠΌΠΈ ΡΡΡΠ΅ΠΊΡΠ°ΠΌΠΈ ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΡ ΠΏΠΎΠ΄ΠΏΠΈΡΠ΅ΠΉ, Π²ΡΠ°ΡΠ΅Π½ΠΈΠ΅, ΠΏΡΠΎΡΠ²Π»Π΅Π½ΠΈΠ΅, Π²ΡΠΏΠ»ΡΡΠΈΠ΅ ΠΈ Ρ.Π΄. ΠΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΡ ΠΏΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΈ Π½Π°ΡΡΡΠΎΠΉΠΊΠ΅ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΡΠΊΡΠ΄Π½Π°, Π½ΠΎ ΠΏΡΠΈ ΠΎΡΠΎΠ±ΠΎΠΌ ΠΆΠ΅Π»Π°Π½ΠΈΠΈ ΡΠ°Π·ΠΎΠ±ΡΠ°ΡΡΡΡ ΠΌΠΎΠΆΠ½ΠΎ.
Β
ΠΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΡΠΊΠΎΡΡΠΈ ΠΊΠ°ΡΡΠΈΠ½ΠΎΠΊ
ΠΠ°Π½Π½ΡΠΉ ΡΡΡΠ΅ΠΊΡ ΠΎΡΠΎΠ±ΠΎΠ³ΠΎ Π½ΠΈΡΠ΅Π³ΠΎ ΠΈΠ· ΡΠ΅Π±Ρ Π½Π΅ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ, Π±Π°Π½Π°Π»ΡΠ½Π°Ρ ΡΠΌΠ΅Π½Π° ΡΡΠΊΠΎΡΡΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ, ΡΠ°Π·Π²Π΅ ΡΡΠΎ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ. Π Π°Π·Π±ΠΈΡΠ°ΡΡΡΡ Ρ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎΡΡΡΠΌΠΈ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ ΠΏΡΠΈΠ΄ΡΡΡΡ ΡΠ°ΠΌΠΎΡΡΠΎΡΡΠ΅Π»ΡΠ½ΠΎ, ΡΠ°Π·Π»ΠΎΠΆΠΈΠ² ΠΈΡΡ ΠΎΠ΄Π½ΠΈΠΊΠΈ Π΄Π΅ΠΌΠΎ.
Β
10 Image Hover Effects
ΠΡΡ ΠΎΠ΄ΠΈΠ½ Π½Π°Π±ΠΎΡ ΠΈΠ· 10 hover-ΡΡΡΠ΅ΠΊΡΠΎΠ² Π΄Π»Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ Π²ΠΈΠ΄ΠΎΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΠΌΠΈΠ½ΠΈΠ°ΡΡΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ, ΡΠ²Π΅Π»ΠΈΡΠ΅Π½ΠΈΠ΅, ΡΠΎΡΠ°ΡΠΈΡ, ΠΏΠΎΠ²ΠΎΡΠΎΡ, Π·Π°ΡΠ΅ΠΌΠ½Π΅Π½ΠΈΠ΅ ΠΈ Ρ.Π΄.
Β
Border Animation Effect
Π Π°Π·Π»ΠΈΡΠ½ΡΠ΅ ΡΡΡΠ΅ΠΊΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΡΠ°ΠΌΠΊΠΈ Π²ΠΎΠΊΡΡΠ³ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, ΡΠΌΠΎΡΡΠΈΡΡΡ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°ΡΠ΅Π»ΡΠ½ΠΎ, ΠΈΠΌΠ΅Π΅ΡΡΡ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎΠ΅ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²ΠΎ ΠΏΠΎ Π½Π°ΡΡΡΠΎΠΉΠΊΠ΅ ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ.
Β
Original Hover Effects With CSS3
ΠΡΠΈΠ³ΠΈΠ½Π°Π»ΡΠ½ΡΠ΅ hover-ΡΡΡΠ΅ΠΊΡΡ Π½Π° CSS3 ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΠΌΡΠ΅ Π΄Π»Ρ ΡΡΡΠ΅ΠΊΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΡ ΠΏΠΎΠ΄ΠΏΠΈΡΠ΅ΠΉ ΠΌΠΈΠ½ΠΈΠ°ΡΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ. Π Π½Π°Π±ΠΎΡ ΠΏΡΠ°Π²ΠΈΠ» CSS Π²Ρ ΠΎΠ΄ΡΡ 10 ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΡΡΡΠ΅ΠΊΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎ Π΄Π»Ρ ΡΠ°Π·Π½ΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΎΠΊ. ΠΡΡΠ΅ΠΊΡΡ ΠΏΠΎ-Π½Π°ΡΡΠΎΡΡΠ΅ΠΌΡ Π²ΠΏΠ΅ΡΠ°ΡΠ»ΡΡΡ, ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎ ΠΏΠΎΠ½ΠΈΠΌΠ°Ρ ΡΠΎ, ΡΡΠΎ Π²ΡΡ ΡΡΠΎ ΡΠ΄Π΅Π»Π°Π½ΠΎ Π»ΠΈΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS3. ΠΠΎΠ΄ΡΠΎΠ±Π½ΠΎΠ΅ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²ΠΎ, ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ Π²Π°ΠΌ ΡΠ°Π·ΠΎΠ±ΡΠ°ΡΡΡΡ ΡΡΠΎ ΠΊ ΡΠ΅ΠΌΡ.
Shape Hover Effect
ΠΠ΄Π΅Ρ ΡΠΎΡΡΠΎΠΈΡ Π² ΡΠΎΠΌ, ΡΡΠΎΠ±Ρ ΡΠΎΠ·Π΄Π°ΡΡ SVG, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠΎΠ±ΠΎΠΉ ΡΠΎΡΠΌΡ-ΡΠΎΠ½ Π΄Π»Ρ ΠΊΠ°ΠΊΠΎΠΉ-ΡΠΎ Π½Π°Π΄ΠΏΠΈΡΠΈ ΠΈ ΠΏΡΠ΅Π²ΡΠ°ΡΠ°Π΅ΡΡΡ Π² Π΄ΡΡΠ³ΡΡ ΡΠΎΡΠΌΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° ΠΌΡΡΠΈ. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ ΡΠ°Π·Π½ΡΡ Π²Π°ΡΠΈΠ°Π½ΡΠΎΠ², Π² ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΆΠ΅, ΠΏΠΎΠΊΠ°Π·Π°Π½Ρ ΡΡΠΈ Π²ΠΈΠ΄Π° ΡΡΡΠ΅ΠΊΡΠΎΠ² ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ΠΎΠ². ΠΠΎΡΡΠΎΠΈΠ½ΡΡΠ²ΠΎΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ SVG ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠΎ, ΡΡΠΎ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΎΡΠΌΡ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°.
Β
Π Π°Π·Π΄Π²ΠΈΠΆΠ½ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
Π‘ΡΡΡ Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΡΡΡΠ΅ΠΊΡΠ° Π² ΡΠΎΠΌ, ΡΡΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠ°Π·Π΄Π²ΠΈΠ³Π°Π΅ΡΡΡ Π²Π²Π΅ΡΡ ΠΈ Π²Π½ΠΈΠ· Π΄Π»Ρ ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΡ ΠΏΠΎΠ΄ΠΏΠΈΡΠΈ. ΠΡΠ»ΠΈ ΠΏΠΎΡΠ°Π±ΠΎΡΠ°ΡΡ Ρ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠ°ΠΌΠΈ ΡΡΠΈΠ»Π΅ΠΉ, Π΄ΡΠΌΠ°Ρ ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ±ΠΈΡΡΡΡ Π²ΠΏΠΎΠ»Π½Π΅-ΡΠ΅Π±Π΅ ΡΠΈΠΌΠΏΠ°ΡΠΈΡΠ½ΡΡ ΡΡΡΠ΅ΠΊΡΠΎΠ², Π° ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ, Π²ΡΠ³Π»ΡΠ΄ΠΈΡ Π²ΡΡ ΡΠΎΠ²ΡΠ΅ΠΌ ΡΠΆ ΠΏΡΠΎΡΡΠΎ.
Β
Slick CSS3 Animated Image
Π‘ ΡΡΠΈΠΌ ΡΡΡΠ΅ΠΊΡΠΎΠΌ Π²ΡΡ ΠΏΡΠΎΡΡΠΎ, ΠΏΠΎΠ΄ΠΏΠΈΡΠΈ ΠΊ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ°ΠΌ Π²ΡΡΠΊΠ°Π»ΡΠ·ΡΠ²Π°ΡΡ Π² Π²Π΅ΡΡ Ρ ΡΠΏΡΠ°Π²Π° ΠΈΠ»ΠΈ ΡΠ»Π΅Π²Π° Π² Π½ΠΈΠ·Ρ, Π² Π²ΠΈΠ΄Π΅ Π»Π΅Π½ΡΡ Ρ ΠΏΠΎΠ»ΡΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΡΠΌ ΡΡΠΌΠ½ΡΠΌ ΡΠΎΠ½ΠΎΠΌ, Π²ΡΡ ΠΎΡΠ΅Π½Ρ ΠΏΡΠΎΡΡΠΎ ΠΏΠ΅ΡΠ΅ΡΠΎΡΠΌΠΈΡΡΠ΅ΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ² css.
Β
ΠΡΠΏΠ»ΡΠ²Π°ΡΡΠ°Ρ ΠΏΠΎΠ΄ΠΏΠΈΡΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ
ΠΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅, ΠΌΠΈΠ½ΠΈΠ°ΡΡΡΡ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½Ρ Π² Π·Π°ΡΠ΅ΠΌΠ½ΡΠ½Π½ΠΎΠΌ Π²ΠΈΠ΄Π΅, ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΡΠΎΡΠ²Π»ΡΡΡΡΡ ΠΈ Π²ΡΠΏΠ»ΡΠ²Π°Π΅Ρ ΠΏΠΎΠ΄ΠΏΠΈΡΡ Π½Π° ΡΠ²Π΅ΡΠ»ΠΎΠΌ ΡΠΎΠ½Π΅.
Β
ΠΠΈΠ°Π³ΠΎΠ½Π°Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΠ΅ ΠΏΠΎΠ΄ΠΏΠΈΡΠΈ
ΠΠΎΠ΄ΠΏΠΈΡΡ ΠΊ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ ΠΈΠ· ΡΠ³Π»Π° ΠΈ ΡΠ°ΡΡΠΈΡΡΠ΅ΡΡΡ Π½Π° Π²ΡΡ ΠΏΠ»ΠΎΡΠ°Π΄Ρ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ ΠΏΠΎ Π΄ΠΈΠ°Π³ΠΎΠ½Π°Π»ΠΈ.
Β
ΠΠ½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ ΠΌΠΈΠ½ΠΈΠ°ΡΡΡ
ΠΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΡ ΡΠ΅ΡΠ΅Π½ΠΈΠΉ Π΄Π»Ρ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΠΈΡ ΠΏΠΎΠ΄ΠΏΠΈΡΠ΅ΠΉ ΠΊ ΠΌΠΈΠ½ΠΈΠ°ΡΡΡΠ°ΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ. Π ΠΎΠ½Π»Π°ΠΉΠ½-ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠ΅ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΡΠΊΡΠΏΠ΅ΡΠΈΠΌΠ΅Π½ΡΠΈΡΠΎΠ²Π°ΡΡ Ρ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠ°ΠΌΠΈ ΠΈ Π΄ΠΎΠ±ΠΈΡΡΡΡ Π±ΠΎΠ»Π΅Π΅ Π²ΠΏΠ΅ΡΠ°ΡΠ»ΡΡΡΠΈΡ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠΎΠ².
Β
ΠΠΎΠ΄ΡΡΡΠΊΠ½ΡΡΡΠ΅ ΠΈΠ»ΠΈ ΠΎΡΠ΅ΡΡΠ΅Π½Π½ΡΠ΅ ΠΏΠΎΠ΄ΠΏΠΈΡΠΈ ΠΊ ΠΌΠΈΠ½ΠΈΠ°ΡΡΡΠ°ΠΌ
ΠΠ°Π±ΠΎΡ ΠΊΡΠ°ΡΠΈΠ²ΡΡ ΡΡΡΠ΅ΠΊΡΠΎΠ² ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΠΌΠΈΠ½ΠΈΠ°ΡΡΡΡ, ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ Π²ΠΈΠ΄Ρ ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΡ ΠΈ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΡ ΠΏΠΎΠ΄ΠΏΠΈΡΠ΅ΠΉ ΠΊ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ°ΠΌ. Π’ΠΎΠ½ΠΊΠΈΠ΅ Π»ΠΈΠ½ΠΈΠΈ Π² ΠΊΠΎΠ½ΡΡΠ°ΡΡΠ΅ Ρ ΡΠ»Π΅Π³ΠΊΠ° Π·Π°ΡΠ΅ΠΌΠ½ΡΠ½Π½ΡΠΌ ΡΠΎΠ½ΠΎΠΌ ΡΠΎΠ·Π΄Π°ΡΡ Π»ΡΠ³ΠΊΠΈΠ΅ Π΄Π»Ρ Π²ΠΎΡΠΏΡΠΈΡΡΠΈΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΎΠ½Π½ΡΠ΅ Π±Π»ΠΎΠΊΠΈ.
Β
ΠΡΠΈΡΡΠ΄Π»ΠΈΠ²ΡΠ΅ ΡΠΎΡΠΌΡ ΠΈ zoom-ΡΡΡΠ΅ΠΊΡ
ΠΡΠΈΡΡΠ΄Π»ΠΈΠ²ΡΠ΅ ΡΠΎΡΠΌΡ ΠΈ ΡΡΡΠ΅ΠΊΡ ΡΠ²Π΅Π»ΠΈΡΠ΅Π½ΠΈΡ Π² ΡΠ²ΡΠ·ΠΊΠ΅ Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΎΠ½Π½ΡΠΌ ΡΡΡΠ΅ΠΊΡΠΎΠΌ ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΡ ΠΏΠΎΠ΄ΠΏΠΈΡΠ΅ΠΉ ΠΊ ΠΌΠΈΠ½ΠΈΠ°ΡΡΡΠ°ΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ.
Β
ΠΠ°Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅
ΠΠ°ΠΌΠ΅ΡΠ°ΡΠ΅Π»ΡΠ½ΡΠ΅ ΡΡΡΠ΅ΠΊΡΡ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΈΠΊΠΎΠ½ΠΊΠΈ Π½Π° ΠΌΠΈΠ½ΠΈΠ°ΡΡΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π² ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ
Π²Π°ΡΠΈΠ°ΡΠΈΡΡ
ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΡ. Π ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ ΡΠΈΠΌΠ²ΠΎΠ» (+) ΠΎΡΠ΅ΡΡΠ΅Π½Π½ΡΠΉ ΠΊΡΡΠ³ΠΎΠΌ Ρ ΠΏΠΎΠΌΠΎΡΡΡ border-radius:
Π² CSS, ΡΠ°ΠΊ ΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΠΈΡΡ-ΠΈΠΊΠΎΠ½ΠΊΠΈ, Π΄Π»Ρ Π±ΠΎΠ»ΡΡΠ΅ΠΉ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠ²Π½ΠΎΡΡΠΈ Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΠ΅ΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ.
Β
Π‘Π»Π°ΠΉΠ΄-ΡΡΡΠ΅ΠΊΡ Π΄Π»Ρ ΠΏΠΎΠ΄ΠΏΠΈΡΠ΅ΠΉ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ
ΠΡΠΈΠΌΠ΅Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠ»Π°ΠΉΠ΄-ΡΡΡΠ΅ΠΊΡΠ° Π΄Π»Ρ Π²ΡΠ²ΠΎΠ΄Π° ΠΎΠ±ΡΡΠΌΠ½ΡΡ ΠΏΠΎΠ΄ΠΏΠΈΡΠ΅ΠΉ ΠΊ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠΎΠ»ΡΠΊΠΎ CSS3 ΠΈ HTML5.
Β
6 ΠΠΎΠ΄ΠΏΠΈΡΠ΅ΠΉ ΠΊ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ°ΠΌ
6 ΠΠ°ΡΠΈΠ°Π½ΡΠΎΠ² ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΡ Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΠΈΡ ΠΏΠΎΠ΄ΠΏΠΈΡΠ΅ΠΉ ΠΊ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ°ΠΌ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS3. ΠΠΎΠ΄ΡΠΎΠ±Π½Π΅ΠΉΡΠΈΠΉ ΡΡΠΎΠΊ ΠΏΠΎ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ ΠΈ Π½Π°ΡΡΡΠΎΠΉΠΊΠ΅, Π΄ΠΎΡΡΡΠΏΠ½ΡΠ΅ Π΄Π»Ρ ΡΠΊΠ°ΡΠΈΠ²Π°Π½ΠΈΡ ΠΈΡΡ ΠΎΠ΄Π½ΠΈΠΊΠΈ.
ΠΡ ΠΈ Π½Π°ΠΊΠΎΠ½Π΅Ρ, Π½Π°ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠΊ ΡΠ°ΠΊ ΡΠΊΠ°Π·Π°ΡΡ, Π½Π΅ ΠΌΠΎΠ³Ρ Π½Π΅ ΡΠΏΠΎΠΌΡΠ½ΡΡΡ ΠΎ ΡΠ°ΠΌΠΎΠΌ ΠΏΡΠΎΡΡΠ΅ΠΉΡΠ΅ΠΌ ΡΠΏΠΎΡΠΎΠ±Π΅ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΠ΅ΠΉ ΠΏΠΎΠ΄ΠΏΠΈΡΠΈ ΠΊ ΠΌΠΈΠ½ΠΈΠ°ΡΡΡΠ΅ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS3.
Β
ΠΡΠΈΠ³ΠΈΠ½Π°Π» ΡΡΠ°ΡΡΠΈ Π·Π΄Π΅ΡΡ
ΠΡΠΎΡΡΡΠ΅ hover-ΡΡΡΠ΅ΠΊΡΡ Π΄Π»Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΏΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ CSS
Hover-ΡΡΡΠ΅ΠΊΡΡΒ β Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½Π°Ρ ΡΠ΅ΠΌΠ° Π΄Π»Ρ ΠΈΠ·ΡΡΠ΅Π½ΠΈΡ. Β ΠΠ΅Π΄Ρ ΠΈΡ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ΅Ρ ΡΠ΄Π΅Π»Π°ΡΡ Π²Π°Ρ ΡΠ°ΠΉΡ Π±ΠΎΠ»Π΅Π΅ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ½ΡΠΌ ΠΈ ΠΆΠΈΠ²ΡΠΌ. Π‘Π΅Π³ΠΎΠ΄Π½Ρ ΠΌΡ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΡΡΡΠ΅ΠΊΡΡ Π΄Π»Ρ ΡΠ°Π±ΠΎΡΡ Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌΠΈ.Β ΠΠ°ΠΆΠ΄ΡΠΉ ΠΏΡΠΈΠΌΠ΅Ρ Β ΠΈΠΌΠ΅Π΅Ρ HTML ΠΈ CSS ΠΊΠΎΠ΄Ρ, ΠΊΠΎΡΠΎΡΡΠ΅ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ²ΠΈΠ΄Π΅ΡΡ Π²Β Π΄Π΅ΠΉΡΡΠ²ΠΈΠΈ.
Β ΠΠΎΡΠΌΠΎΡΡΠΈΡΠ΅ Π½Π° Π΄Π΅ΠΌΠΎ Π½ΠΈΠΆΠ΅, ΡΡΠΎΠ±Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ Π²ΡΠ΅ hover-ΡΡΡΠ΅ΠΊΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅ Π±ΡΠ΄ΡΡ ΡΠ°ΡΡΠΌΠ°ΡΡΠΈΠ²Π°ΡΡΡΡ Π² ΡΡΠΎΠΌΒ ΡΡΠΎΠΊΠ΅.
ΠΠ΅ΡΠ΅Π΄ ΡΠ΅ΠΌ, ΠΊΠ°ΠΊ ΠΏΡΠΈΡΡΡΠΏΠΈΡΡ ΠΊ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΡ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ², ΡΡΠ΅Π±ΡΡΡΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ Π±Π°Π·ΠΎΠ²ΡΠ΅ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ. ΠΠΈΠΆΠ΅ ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Β CSS-ΠΊΠΎΠ΄, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΡ Π±ΡΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ, ΡΡΠΎΠ±Ρ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°ΡΡ Π²ΡΠ΅Β ΠΏΡΠΈΠΌΠ΅ΡΡ.
ΠΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²ΠΎ ΡΡΠΎ ΠΎΡΠ½ΠΎΠ²Π½ΡΠ΅ Π²Π΅ΡΠΈ: box-sizingΒ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠΏΡΠ°Π²Π»ΡΡΡ ΠΌΠΎΠ΄Π΅Π»ΡΠΌΠΈ (Π½Π΅ ΡΡΠ΅ΡΠ½ΡΠΉΡΠ΅ΡΡ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ Π±ΠΎΠ»Π΅Π΅ ΡΠΎΡΠ½ΡΠ΅ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ, Π΅ΡΠ»ΠΈ Π²Π°ΠΌ Π½Π΅ Π½ΡΠ°Π²ΠΈΡΡΡ ΡΠ½ΠΈΠ²Π΅ΡΡΠ°Π»ΡΠ½ΡΠΉ ΡΠ΅Π»Π΅ΠΊΡΠΎΡ). ΠΠ»Π°ΡΡ pic Π΄Π°Π΅Ρ Π½Π°ΠΌ ΠΌΠ΅ΡΡΠΎ, ΡΡΠΎΠ±Ρ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΎΡΠ½ΠΎΠ²Π½ΡΠ΅ ΡΡΠΈΠ»ΠΈ Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠΉΒ Β ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΠΈ.
ΠΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈΒ ΠΏΠ°Π½ΠΎΡΠ°ΠΌΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅
ΠΠ΅ΡΠ²Π°Ρ Π³ΡΡΠΏΠΏΠ° ΡΡΡΠ΅ΠΊΡΠΎΠ² Π²ΠΊΠ»ΡΡΠ°Π΅Ρ Π² ΡΠ΅Π±Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ Π½Π΅ΠΊΠΎΡΠΎΡΡΡ ΠΏΡΠΈΠ΅ΠΌΠΎΠ² Ρ Β hiddenΒ overflow.
Β Demo
Π£Π²Π΅Π»ΠΈΡΠ΅Π½ΠΈΠ΅
ΠΠ»Ρ Π½Π°ΡΠ°Π»Π°, ΠΌΡ ΡΠ΄Π΅Π»Π°Π΅ΠΌ ΡΠ°ΠΊ, ΡΡΠΎ, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π½Π°Π²ΠΎΠ΄ΠΈΡ ΠΊΡΡΡΠΎΡ Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΡ ΡΠ²Π΅Π»ΠΈΡΠΈΠ²Π°Π»Π°ΡΡ, Π½ΠΎ ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠ°Π»Π° ΠΎΡΡΠ°Π²Π°ΡΡΡΡ Π² ΠΏΡΠ΅Π΄Π΅Π»Π°Ρ ΡΠ²ΠΎΠΈΡ Β Π³ΡΠ°Π½ΠΈΡ.
ΠΠΎΡΒ HTML-ΠΊΠΎΠ΄:
<div> <img src="http://lorempixel.com/400/400/people/9" alt="portrait"> </div>
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π±ΡΠ»ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΎ Π² ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΈΠΌΠ΅Π΅Ρ ΡΠ°Π·ΠΌΠ΅ΡΡ 400px Π½Π° 400px.Β Π’Π΅ΠΏΠ΅ΡΡ Π΄Π°Π²Π°ΠΉΡΠ΅ ΠΏΠΎΡΠΌΠΎΡΡΠΈΠΌΒ CSS.
/*GROW*/ .grow img { height: 300px; width: 300px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; } .grow img:hover { width: 400px; height: 400px; }
ΠΡ Π²Π½Π°ΡΠ°Π»Π΅ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΠΌ ΡΠ°Π·ΠΌΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π·ΠΎΠΎpx Π½Π°Β 300px, Π° Π·Π°ΡΠ΅ΠΌ, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π½Π°Π²ΠΎΠ΄ΠΈΡ Π½Π° Π½Π΅Π³ΠΎ ΠΊΡΡΡΠΎΡ, ΡΠ²Π΅Π»ΠΈΡΠΈΠ²Π°Π΅ΠΌ ΠΊΒ 400px. ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ Ρ Π½Π°ΡΒ overflowΒ —Β hidden, ΡΡΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ Π½Π°ΠΌ ΠΏΠΎΠ»ΡΡΠΈΡΡ ΡΡΡΠ΅ΠΊΡΒ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΡ.
Π‘ΠΆΠ°ΡΠΈΠ΅
Π ΠΏΡΠΎΡΠ»ΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅, ΠΌΡ ΠΏΠΎΡΠΌΠΎΡΡΠ΅Π»ΠΈ, ΠΊΠ°ΠΊ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° ΠΌΡΡΠΈ ΡΠ²Π΅Π»ΠΈΡΠΈΠ²Π°Π΅ΡΡΡ. Π Π°ΡΡΠΌΠΎΡΡΠΈΠΌ ΠΎΠ±ΡΠ°ΡΠ½ΡΠΉ ΡΡΡΠ΅ΠΊΡ.Β ΠΡΠΎΡ ΠΌΠ΅ΡΠΎΠ΄ Π² ΡΠ΅Π»ΠΎΠΌ ΡΠΎΡΠ½ΠΎ ΡΠ°ΠΊΠΎΠΉΒ ΠΆΠ΅, ΡΠΎΠ»ΡΠΊΠΎ Π½Π° ΡΡΠΎΡ ΡΠ°Π· Π²Ρ Π½Π°ΡΠ½Π΅ΡΠ΅ Ρ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² Π²Β 400px ΠΈ Β ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° ΡΠΌΠ΅Π½ΡΡΠΈΡΠ΅ ΠΈΡ Β Π½Π° 300Β ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ.
HTML
<div> <img src="http://lorempixel.com/400/400/nightlife/4" alt="city"> </div>
CSS
/*SHRINK*/ .shrink img { height: 400px; width: 400px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; } .shrink img:hover { width: 300px; height: 300px; }
ΠΠΎΠΊΠΎΠ²ΠΎΠ΅Β ΠΏΠ°Π½ΠΎΡΠ°ΠΌΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅
Π ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌ ΡΡΡΠ΅ΠΊΡΠ΅ ΡΠ°Π·ΠΌΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π½Π΅ ΠΌΠ΅Π½ΡΠ΅ΡΡΡ, Π½ΠΎΒ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΡ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°Π΅ΡΡΡ Π² ΡΡΠΎΡΠΎΠ½Ρ. ΠΡΠΎ Ρ ΠΎΡΠΎΡΠΈΠΉ ΡΠΏΠΎΡΠΎΠ±, ΡΡΠΎΠ±Ρ ΠΏΠΎΠ΄ΡΠ΅ΡΠΊΠ½ΡΡΡ Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΠ΅Β ΠΎΠ±ΡΠ΅ΠΊΡΠ°.
HTML
<div> <img src="http://lorempixel.com/600/300/sports/8" alt="kick"> </div>
ΠΠ΄Π΅ΡΡ ΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠΈΡΠΈΠ½ΠΎΠΉ 600px ΠΈ Π²ΡΡΠΎΡΠΎΠΉ Β ΡΠΎΠ»ΡΠΊΠΎ 300pxΒ β ΠΌΡ ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅ΠΌ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΠΈ ΠΈΒ Π½Π°ΠΌ Π½Π΅ Π½ΡΠΆΠ½ΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ ΡΡΡΠ΅ΠΊΡΡ ΠΊΒ Π²ΡΡΠΎΡΠ΅.
CSS
/*SIDEPAN*/ .sidepan img { margin-left: 0px; -webkit-transition: margin 1s ease; -moz-transition: margin 1s ease; -o-transition: margin 1s ease; -ms-transition: margin 1s ease; transition: margin 1s ease; } .sidepan img:hover { margin-left: -200px; }
ΠΠ»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΡΡΡΠ΅ΠΊΡΠ° ΠΏΠ°Π½ΠΎΡΠ°ΠΌΠΈΡΠΎΠ²Π°Π½ΠΈΡ Β ΠΌΡ Π½Π΅ Π±ΡΠ΄Π΅ΠΌ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡ ΡΠ°Π·ΠΌΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΊΠ°ΠΊΒ ΡΡΠΎ Π΄Π΅Π»Π°Π»ΠΈ Π² ΠΏΡΠΎΡΠ»ΡΠΉ ΡΠ°Π·, Π½ΠΎ Π²ΠΌΠ΅ΡΡΠΎ ΡΡΠΎΠ³ΠΎ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ margin, Π±ΡΠ΄Π΅ΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π»Π΅Π²Π΅Π΅. ΠΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅, ΡΡΠΎΠ±Ρ Β ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°Π»ΠΎΡΡ Π²ΠΏΡΠ°Π²ΠΎ,Β ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅Β margin-right.
ΠΠ΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ΅Β Β ΠΏΠ°Π½ΠΎΡΠ°ΠΌΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅
Π§ΡΠΎΠ±Ρ ΠΏΠ΅ΡΠ΅Π΄Π°ΡΡ ΡΡΡΠ΅ΠΊΡ Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΡ, Π±ΡΠ΄Π΅ΠΌ Π΅ΡΠ΅ ΡΠ°Π· ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΠΎΡ ΡΡΡΠ΅ΠΊΡΒ β ΠΎΠ½ ΡΠ°ΠΊΠΆΠ΅ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΈΡ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ³ΠΎΒ ΠΏΠ°Π½ΠΎΡΠ°ΠΌΠΈΡΠΎΠ²Π°Π½ΠΈΡ.
HTML
<div> <img src="http://lorempixel.com/300/600/sports/5" alt="climb"> </div>
CSS
/*VERTPAN*/ .vertpan img { margin-top: 0px; -webkit-transition: margin 1s ease; -moz-transition: margin 1s ease; -o-transition: margin 1s ease; -ms-transition: margin 1s ease; transition: margin 1s ease; } .vertpan img:hover { margin-top: -200px; }
ΠΠΎΠ΄ ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ ΡΠ°ΠΊΠΎΠΉΒ ΠΆΠ΅, ΠΊΠ°ΠΊ ΠΈ Π² ΠΏΡΠΎΡΠ»ΡΠΉ ΡΠ°Π·, ΡΠΎΠ»ΡΠΊΠΎ ΡΠ΅ΠΏΠ΅ΡΡ Β Π²ΠΌΠ΅ΡΡΠΎΒ margin-leftΒ ΠΌΡΒ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΒ Β margin-top.
Π’ΡΠ°Π½ΡΡΠΎΡΠΌΠ°ΡΠΈΡ
Π‘Π»Π΅Π΄ΡΡΡΠΈΠ΅ Β ΡΡΡΠ΅ΠΊΡΡ Β Π±ΠΎΠ»Π΅Π΅Β Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ½Ρ.
ΠΠ΅ΠΌΠΎ
ΠΠ°ΠΊΠ»ΠΎΠ½
Π’Π΅ΠΏΠ΅ΡΡ Π΄Π°Π²Π°ΠΉΡΠ΅ ΡΠ΄Π΅Π»Π°Π΅ΠΌ ΡΠ°ΠΊ, ΡΡΠΎΠ±Ρ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΠΈΠ·ΠΌΠ΅Π½ΡΠ»ΡΡ ΡΠ³ΠΎΠ»Β Π½Π°ΠΊΠ»ΠΎΠ½Π°.
HTML
<div> <img src="http://lorempixel.com/300/300/transport/5" alt="car"> </div>
CSS
/*TILT*/ .tilt { -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease; transition: all 0.5s ease; } .tilt:hover { -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); -o-transform: rotate(-10deg); -ms-transform: rotate(-10deg); transform: rotate(-10deg); }
ΠΠ°ΠΊ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΠΈΠ΄ΠΈΡΠ΅, Π²ΡΠ΅, ΡΡΠΎΒ Π½Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π±ΡΠ»ΠΎΒ β ΠΏΠΎΠ²Π΅ΡΠ½ΡΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π° Π΄Π΅ΡΡΡΡ Π³ΡΠ°Π΄ΡΡΠΎΠ².Β ΠΡΠΎΡΡΠΎ ΠΈΒ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΠΎ!
Π‘ΠΊΡΡΠ³Π»Π΅Π½ΠΈΠ΅Β ΡΠ³Π»ΠΎΠ²
ΠΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π½Π°Π²ΠΎΠ΄ΠΈΡ Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΠΎΠ½ΠΎ Π½Π°ΡΠΈΠ½Π°Π΅Ρ Π²ΡΠ°ΡΠ°ΡΡΡΡ, ΠΏΡΠΈ ΡΡΠΎΠΌ ΠΏΡΠ΅Π²ΡΠ°ΡΠ°ΡΡΡ ΠΈΠ· ΠΊΡΡΠ³Π° Π²Β ΠΊΠ²Π°Π΄ΡΠ°Ρ.
HTML
<div> <img src="http://lorempixel.com/300/300/nature/5" alt="beach"> </div>
CSS
/*MORPH*/ .morph { -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease; transition: all 0.5s ease; } .morph:hover { border-radius: 50%; -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); }
ΠΠ΄Π΅ΡΡ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ ΠΊΠ»Π°ΡΡ Β morph, ΠΊΠΎΡΠΎΡΡΠΉ Π½Π°ΡΠΈΠ½Π°Π΅Ρ Π²ΡΠ°ΡΠ°ΡΡΡΡ Π½Π° 360 Π³ΡΠ°Π΄ΡΡΠΎΠ² ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° ΠΌΡΡΠΈ Π½Π° Π½Π΅Π³ΠΎ, Π° Β border-radius Β Π±ΡΠ΄Π΅Ρ ΠΏΠΎΡΡΠ΅ΠΏΠ΅Π½Π½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡΡΡΒ Π΄ΠΎ 50%, Π² ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ΅ ΡΠ΅Π³ΠΎ ΠΏΡΠ΅Π²ΡΠ°ΡΠΈΡΡΡ Π²Β ΠΊΡΡΠ³.
Π€ΠΎΠΊΡΡ
ΠΠΎΡ Π΅ΡΠ΅ ΠΎΠ΄ΠΈΠ½ ΡΠΏΠΎΡΠΎΠ± ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ border-radius Π΄Π»Ρ Π·Π°ΠΊΡΡΠ³Π»Π΅Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.Β ΠΠ° ΡΡΠΎΡ ΡΠ°Π·, ΠΎΠ΄Π½Π°ΠΊΠΎ, ΠΌΡ Π±ΡΠ΄Π΅ΠΌ Β Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ ΡΠ²Π΅Π»ΠΈΡΠΈΠ²Π°ΡΡborder-radius, Π½ΠΎ ΠΈΒ Π΅Π³ΠΎ ΡΠΎΠ»ΡΠΈΠ½Ρ.Β Π ΡΠΎΡΠ΅ΡΠ°Π½ΠΈΠΈ ΡΒ border-box, ΡΡΠΎ ΡΠΎΠ·Π΄Π°ΡΡ ΡΡΡΠ΅ΠΊΡ, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠΎΠΊΡΡΠΈΡΡΠ΅ΡΡΡ Π½Π° ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΉ ΡΠ°ΡΡΠΈΒ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.
HTML
<div> <img src="http://lorempixel.com/300/300/sports/1" alt="cricket"> </div>
CSS
/*FOCUS*/ .focus { -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; } .focus:hover { border: 70px solid #000; border-radius: 50%; }
Β
ΠΡ Π²Π·ΡΠ»ΠΈ border 10px ΠΈ ΠΏΡΠ΅Π²ΡΠ°ΡΠΈΠ» Π΅Π³ΠΎ Π²Β 70px ΡΠ΅ΡΠ½ΡΡ ΡΠ°ΠΌΠΊΡ ΠΏΡΠΈ ΠΏΡΠΎΠ²ΠΎΡΠ°ΡΠΈΠ²Π°Π½ΠΈΠΈ ΡΠ°Π΄ΠΈΡΡΠ΅ Π΄ΠΎΒ 50%, ΠΊΠ°ΠΊΒ ΠΌΡ ΡΡΠΎ Π΄Π΅Π»Π°Π»ΠΈ Π² ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠ΅ΠΌΒ ΠΏΡΠΈΠΌΠ΅ΡΠ΅.
Webkit-ΡΠΈΠ»ΡΡΡΡ
Π ΠΎΡΠ»ΠΈΡΠΈΠ΅ ΠΎΡ ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΡΡ Π²ΡΡΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ², ΠΊΠ°ΠΆΠ΄ΡΠΉ ΠΈΠ· ΠΊΠΎΡΠΎΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΏΡΠ΅ΡΠΈΠΊΡΠΎΠ², ΡΡΠΎΠ±Ρ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΡΡ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΡΡ ΡΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΠΎΡΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°, ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΡΠ΅ΡΠΈΠΊΡ WebKit. ΠΠ°Π½Π½ΡΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΡ ΡΠ°Π±ΠΎΡΠ°ΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π²Β Safari ΠΈ Chrome. ΠΠ΅ΡΠΌΠΎΡΡΡ Π½Π° Β ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½ΠΈΡ, Webkit-ΡΠΈΠ»ΡΡΡΡ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ Π²ΡΠΏΠΎΠ»Π½ΡΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΡΠ΄ΠΈΠ²ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΡΡΡΠ΅ΠΊΡΡ! ΠΠ΅ΠΌΠΎΒ
Π Π°Π·ΠΌΡΡΠΈΠ΅
Β
ΠΠ΅ΡΠ²ΡΠΉ ΡΡΡΠ΅ΠΊΡ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΡ Π±ΡΠ΄Π΅ΠΌ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ,Β β ΠΏΡΠΎΡΡΠΎΠ΅ ΡΠ°Π·ΠΌΡΡΠΈΠ΅. Π’Π΅ΠΏΠ΅ΡΡ ΡΠ°Π·ΠΌΡΡΠΈΡ ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ±ΠΈΡΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΎΠ΄Π½ΠΎΠΉ ΠΌΠ°Π»Π΅Π½ΡΠΊΠΎΠΉ ΡΡΡΠΎΠΊΠΈΒ ΠΊΠΎΠ΄Π°.
HTML
<div> <img src="http://lorempixel.com/300/300/transport/2" alt="plane"> </div>
CSS
/*BLUR*/ .blur 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; } .blur img:hover { -webkit-filter: blur(5px); }
ΠΠ°ΠΊ Π²Ρ Π²ΠΈΠ΄ΠΈΡΠ΅, ΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΒ Β -webkit-filterΒ , Π° Π·Π°ΡΠ΅ΠΌ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΠΌ ΡΠ°Π·ΠΌΡΡΠΈΠ΅ blurΒ Β 5px.
B&W
ΠΠ° ΡΡΠΎΡ ΡΠ°Π· ΠΌΡ ΡΠΎΠ±ΠΈΡΠ°Π΅ΠΌΡΡ ΡΠ½ΠΈΠ·ΠΈΡΡ Π½Π°ΡΡΡΠ΅Π½Π½ΠΎΡΡΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° Π½Π΅Π³ΠΎ ΠΊΡΡΡΠΎΡΠ° ΠΌΡΡΠΈ.Β Π Π°Π½ΡΡΠ΅, ΡΡΠΎΠ±Ρ Π΄ΠΎΠ±ΠΈΡΡΡΡ ΡΠ°ΠΊΠΎΠ³ΠΎ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ°, Π½ΡΠΆΠ½ΠΎ Π±ΡΠ»ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π²Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, Π½ΠΎ Ρ ΡΠΈΠ»ΡΡΡΠ°ΠΌΠΈ Webkit, ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΡΠΎΠΊΡΠ°ΡΠΈΡΡ Π΄ΠΎΒ ΠΎΠ΄Π½ΠΎΠ³ΠΎ.
HTML
<div> <img src="http://lorempixel.com/300/300/nature/2" alt="sea"> </div>
CSS
/*B&W*/ .bw { -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; } .bw:hover { -webkit-filter: grayscale(100%); }
ΠΠ΄Π΅ΡΡ Π΄Π»Ρ grayscale Π±ΡΠ»ΠΎ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ΠΎΒ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅Β 100%.
Π―ΡΠΊΠΎΡΡΡ
ΠΠ»Ρ Π½Π°ΡΠ΅Π³ΠΎ ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅Π³ΠΎ ΡΡΡΠ΅ΠΊΡΠ°, ΠΌΡ Π±ΡΠ΄Π΅ΠΌ Π·Π°ΡΠ΅ΠΌΠ½ΡΡΡ ΡΠΎΡΠΎ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ, Π° Π·Π°ΡΠ΅ΠΌ Π²ΠΎΠ·Π²ΡΠ°ΡΠ°ΡΡ Π΅Π³ΠΎ Π² Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ°Β ΠΌΡΡΠΈ.
HTML
<div> <img src="http://lorempixel.com/300/300/technics/2" alt="sea"> </div>
CSS
/*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 { -webkit-filter: brightness(0%); }
ΠΠΎ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»Π°ΠΌ Β JoshuaΒ Johnson.
ΠΠ΅ΡΠ΅Π²ΠΎΠ΄Β βΒ ΠΠ΅ΠΆΡΡΠΊΠ°.
ΠΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π²Π°Ρ ΡΠ°ΠΊΠΆΠ΅ Π·Π°ΠΈΠ½ΡΠ΅ΡΠ΅ΡΡΡΡΒ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅Β ΡΡΠ°ΡΡΠΈ:
Β
ΠΠ°Π»Π΅ΡΠ΅Ρ
8 636 Π‘ΠΊΡΠΈΠΏΡΡ / GalleryΠΠ΄Π°ΠΏΡΠΈΠ²Π½Π°Ρ Π³Π°Π»Π΅ΡΠ΅Ρ least.js
ΠΡΠΈΡΠ»ΠΎ Π²ΡΠ΅ΠΌΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΡ ΡΠ°ΠΉΡΠΎΠ², ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠ°Π΅ΠΌ ΡΡΡ ΡΠ΅ΠΌΠ°ΡΠΈΠΊΡ Π² Π³Π°Π»Π΅ΡΠ΅Π΅, ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎ Ρ ΠΎΡΠΎΡΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΠΌΠΎΠΉ ΠΊΠ°ΠΊ Π½Π° Π΄Π΅ΡΠΊΡΠΎΠΏΠ΅, ΡΠ°ΠΊ ΠΈ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ . Π Π³Π°Π»Π΅ΡΠ΅Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΠΏΠ»Π°Π³ΠΈΠ½ lazyload — ΠΎΡΠ»ΠΎΠΆΠ΅Π½Π½Π°Ρ Π·Π°Π³ΡΡΠ·ΠΊΠ° ΠΊΠ°ΡΡΠΈΠ½ΠΎΠΊ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠΊΠΎΠ½ΠΎΠΌΠΈΡΡ ΡΡΠ°ΡΠΈΠΊ. ΠΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ ΠΊΡΠ°ΡΠΊΠΎΠ΅ ΠΎΠΏΠΈΡΠ°Π½ΠΈΠ΅, Π° ΠΏΠΎ ΠΊΠ»ΠΈΠΊΡ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ ΠΏΠΎΠΊΠ°Π· ΠΏΠΎΠ»Π½ΠΎΠΉ Π²Π΅ΡΡΠΈΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠΎΡΠΌΠΈΡΡΡΡΡΡ ΡΠ»ΡΡΠ°ΠΉΠ½ΡΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅.
6 632 Π‘ΠΊΡΠΈΠΏΡΡ / GalleryΠ€ΠΎΡΠΎΠ³Π°Π»Π΅ΡΠ΅Ρ Π½Π° jQuery
ΠΠΈΠ½ΠΈΠΌΠ°Π»ΠΈΡΡΠΈΡΠ½Π°Ρ ΡΠΎΡΠΎΠ³Π°Π»Π΅ΡΠ΅Ρ Π½Π° jQuery. ΠΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π»Ρ ΠΏΠΎΠΊΠ°Π·Π° ΡΠ²ΠΎΠΈΡ ΡΠ°Π±ΠΎΡ ΠΈΠ»ΠΈ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΡΠΎΡΠΎΠ°Π»ΡΠ±ΠΎΠΌΠ°. Π Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΌΠ΅Π½Ρ, ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ ΡΠΎΡΠΎ/ΡΠ°Π±ΠΎΡΡ ΠΏΠΎ ΠΊΠ°ΡΠ΅Π³ΠΎΡΠΈΡΠΌ. ΠΠ°Π»Π΅ΡΠ΅Ρ ΠΊΡΠΎΡΡΠ±ΡΠ°ΡΠ·Π΅ΡΠ½Π°Ρ, ΡΡΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ Π±Π΅Π· ΡΡΡΠ΄Π° Π°Π΄Π°ΠΏΡΠΈΡΠΎΠ²Π°ΡΡ Π΅Ρ ΠΏΠΎΠ΄ Π²Π°Ρ ΡΠ°ΠΉΡ.
3 321 Π‘ΠΊΡΠΈΠΏΡΡ / GalleryΠΡΡΠ΅ΠΊΡ ΡΠΎΠΊΡΡΠΈΡΠΎΠ²ΠΊΠΈ Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΈ
ΠΡΡΠ΅ΠΊΡ ΡΠΎΠΊΡΡΠΈΡΠΎΠ²ΠΊΠΈ Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΈ. ΠΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΡ, ΠΎΡΡΠ°Π»ΡΠ½ΡΠ΅ ΡΠ½ΠΈΠΌΠΊΠΈ Π·Π°ΡΠ΅ΠΌΠ½ΡΡΡΡΡ. Π Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½ Π΄Π°Π½Π½ΡΠΉ ΡΡΡΠ΅ΠΊΡ Π²Π²ΠΈΠ΄Π΅ Π½Π΅ ΡΠΎΠ²ΡΠ΅ΠΌ ΠΎΠ±ΡΡΠ½ΠΎΠ³ΠΎ ΡΠ»Π°ΠΉΠ΄Π΅ΡΠ°.
4 260 Π‘ΠΊΡΠΈΠΏΡΡ / GalleryCSS3 ΡΠΎΡΠΎΠ³Π°Π»Π΅ΡΠ΅Ρ
Π ΡΡΠΎΠΌ ΡΡΠΎΠΊΠ΅ ΡΠ΄Π΅Π»Π°Π΅ΠΌ ΡΠΎΡΠΎΠ³Π°Π»Π΅ΡΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠΎΠ»ΡΠΊΠΎ CSS3. ΠΠΎΡ Ρ ΡΠ°ΠΊΠΈΠΌΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΌΠΈ Π±ΡΠ΄Π΅ΠΌ ΡΠ°Π±ΠΎΡΠ°ΡΡ: user-select, box-sizing, transition, box-shadow ΠΈ transform.
1 846 Π‘ΠΊΡΠΈΠΏΡΡ / GalleryΠΠΈΠ°Π³ΠΎΠ½Π°Π»ΡΠ½ΠΎΠ΅ Π²ΡΠ°ΡΠ΅Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ
ΠΡΠ΅Π²ΡΠ°ΡΠΈΠΌ Π½Π΅ΡΠΏΠΎΡΡΠ΄ΠΎΡΠ΅Π½Π½ΡΠΉ ΡΠΏΠΈΡΠΎΠΊ Π²ΠΎ Π²ΡΠ°ΡΠ°ΡΡΠ΅Π΅ΡΡ Π΄ΠΈΠ°Π³ΠΎΠ½Π°Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΡΡΡΠΎΠ»ΠΈΠΎ ΠΈΠ· ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS3 ΠΈ jQuery.
3 458 Π‘ΠΊΡΠΈΠΏΡΡ / GallerygpGallery — Π³Π°Π»Π΅ΡΠ΅Ρ
ΠΡΠ΅Π½Ρ ΠΏΡΠΎΡΡΠ°Ρ Π³Π°Π»Π΅ΡΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΠ°Ρ jQuery. ΠΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΠΌΠΈΠ½ΠΈΠ°ΡΡΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠ²Π΅Π»ΠΈΡΠΈΠ²Π°Π΅ΡΡΡ Π΄ΠΎ ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°.
2 532 Π‘ΠΊΡΠΈΠΏΡΡ / GalleryΠΡΡΠ³Π»Π°Ρ Π³Π°Π»Π΅ΡΠ΅Ρ
ΠΡΠΎΡΡΠ°Ρ Π³Π°Π»Π΅ΡΠ΅Ρ Ρ ΡΠ°ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΏΠΎ ΠΊΡΡΠ³Ρ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½Π½Π°Ρ Ρ ΠΏΠΎΠΌΠΎΡΡΡ jQuery ΠΏΠ»Π°Π³ΠΈΠ½Π° radmenu.
1 510 Π‘ΠΊΡΠΈΠΏΡΡ / GalleryΠΠ°Π»Π΅ΡΠ΅Ρ ΡΡΠ±Π°ΡΠ΅ΠΊ
ΠΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΠΉ ΠΈ ΠΏΡΠΎΡΡΠΎΠΉ ΡΡΡΠ΅ΠΊΡ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π½Π° ΡΠ°ΠΉΡΠ΅ ΠΈΠ½ΡΠ΅ΡΠ½Π΅Ρ ΠΌΠ°Π³Π°Π·ΠΈΠ½Π°. ΠΠΎΠ»Π½ΠΎΡΠ°Π·ΠΌΠ΅ΡΠ½ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΠΎΠΌΠ΅ΡΠ°ΡΡΡΡ Π² ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ DIV ΠΌΠ΅Π½ΡΡΠ΅Π³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°. ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠ΅Π½ΡΡΠΈΡΡΠ΅ΡΡΡ, Π½ΠΎ Π½Π΅ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅ΡΡΡ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ, ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡ overflow:hidden — Π² ΡΠΎΡΡΠΎΡΠ½ΠΈΠΈ Π²ΠΊΠ»ΡΡΠ΅Π½. ΠΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΌΡΡΠΈ Π½Π° ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ, overflow:hidden ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ΠΈΡ Π² ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ Π²ΡΠΊΠ»ΡΡΠ΅Π½ ΠΈ ΡΡΠ±Π°ΡΠΊΠ° ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅ΡΡΡ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ.
2 755 Π‘ΠΊΡΠΈΠΏΡΡ / Gallery3D Π³Π°Π»Π΅ΡΠ΅Ρ
ΠΠ°Π»Π΅ΡΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Ρ ΡΡΡΠ΅ΠΊΡΠΎΠΌ 3D. ΠΡΠΈ Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° ΠΌΠΈΠ½ΠΈΠ°ΡΡΡΡ ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΠΉ (ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΠΌΠ΅ΡΡ ΡΠ΅Π½Ρ), ΡΠ°ΠΊΠΆΠ΅ Π΄Π²ΠΈΠ³Π°ΡΡΡΡ. ΠΠΎΠ·Π²ΠΎΠ»ΠΈΠ» ΠΎΡ ΡΠ΅Π±Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΈΠΊΠΎΠ½ΠΊΡ «ΠΡΠΏΠ°» — ΡΠ²Π΅Π»ΠΈΡΠ΅Π½ΠΈΡ ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΠΈ, Π·Π° ΠΌΠ΅ΡΡΠΎ ΡΠ΅ΠΊΡΡΠ°.
1 453 Π‘ΠΊΡΠΈΠΏΡΡ / GalleryΠΡΠΈΠΊΠΎΠ»ΡΠ½Π°Ρ ΡΠΎΡΠΎΠ³Π°Π»Π΅ΡΠ΅Ρ
ΠΡΠΎΠ·ΡΠ°ΡΠ½Π°Ρ, ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½Π°Ρ, ΠΎΡΠΎΡΠΌΠ»Π΅Π½Π½Π°Ρ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ CSS ΡΠΎΡΠΎΠ³Π°Π»Π΅ΡΠ΅Ρ ΠΈ Π²ΡΠ·ΡΠ²Π°Π΅ΠΌΠ°Ρ Π½Π°ΠΆΠ°ΡΠΈΠ΅ΠΌ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡ ΠΠΊΠ»ΡΡΠ΅Π½ΠΈΡ/ΠΡΠΊΠ»ΡΡΠ΅Π½ΠΈΡ.
2 208 Π‘ΠΊΡΠΈΠΏΡΡ / GalleryΠΠ½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½Π°Ρ ΡΠΎΡΠΎΠ³Π°Π»Π΅ΡΠ΅Ρ Π½Π° jQuery
ΠΠ»Ρ ΠΎΠΆΠΈΠ²Π»Π΅Π½ΠΈΡ Π³Π°Π»Π΅ΡΠ΅ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΡΡΠ½ΠΊΡΠΈΡ animate() ΠΈ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ ΠΏΠ»Π°Π²Π½ΠΎΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠ²Π΅ΡΠ° ΠΎΡ ΡΠ΅ΡΠ½ΠΎ-Π±Π΅Π»ΠΎΠ³ΠΎ Π΄ΠΎ ΡΠ²Π΅ΡΠ½ΠΎΠ³ΠΎ.
1 578 Π‘ΠΊΡΠΈΠΏΡΡ / GalleryΠΡΠ΅Π΄ΠΏΡΠΎΡΠΌΠΎΡΡ ΠΌΠΈΠ½ΠΈΠ°ΡΡΡ ΡΠ»Π°ΠΉΠ΄Π°ΠΌΠΈ
Π ΡΡΠΎΠΌ ΡΡΠΎΠΊΠ΅ Ρ ΠΏΠΎΠΊΠ°ΠΆΡ, ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ ΠΏΡΠ΅Π΄ΠΏΡΠΎΡΠΌΠΎΡΡ ΠΌΠΈΠ½ΠΈΠ°ΡΡΡ ΡΠ»Π°ΠΉΠ΄Π°ΠΌΠΈ Π½Π° jQuery.
- ΠΠ°Π·Π°Π΄
- 1
- 2
- ΠΠΏΠ΅ΡΡΠ΄