Π Π°Π·Π½ΠΎΠ΅

Hover эффСкт ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ: 10 нСвСроятных ΠΈ ΠΊΡ€ΡƒΡ‚Ρ‹Ρ… эффСктов ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ бСсплатно

18.07.2021

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

Π­Ρ„Ρ„Π΅ΠΊΡ‚Ρ‹ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ

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.

Плагин «Photo Zoom»

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 / Codepen

Hover эффСкты Π½Π°Π΄ изобраТСниями Π½Π° CSS

Π­Ρ„Ρ„Π΅ΠΊΡ‚ навСдСния Π½Π° Π±Π»ΠΎΠΊΠΈ с изобраТСниями ΠΈ тСкстом.

2 322 Codepen

Π­Ρ„Ρ„Π΅ΠΊΡ‚ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅

Π”ΠΎΠ²ΠΎΠ»ΡŒΠ½ΠΎ-Ρ‚Π°ΠΊΠΈ смСлый hover эффСкт Π½Π° ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΈ. ΠŸΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ происходит Ρ€Π°Π·Π΄Π΅Π»Π΅Π½ΠΈΠ΅ Π±Π»ΠΎΠΊΠ° Π½Π° ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Π΅ кусочки с ΠΎΠ±Ρ‰ΠΈΠΌ Ρ„ΠΎΠ½ΠΎΠΌ β€” ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΎΠΉ.

1 284 Codepen

Π­Ρ„Ρ„Π΅ΠΊΡ‚ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ clip-path

ИспользованиС свойства clip-path ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ для придания ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡŽ Ρ„ΠΎΡ€ΠΌΡ‹ стрСлки с Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠ΅ΠΉ.

3 136 Text / Codepen

Π­Ρ„Ρ„Π΅ΠΊΡ‚ fill для тСкста ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ

Π­Ρ„Ρ„Π΅ΠΊΡ‚ заполнСния тСкста ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ. Π Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½ΠΎ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS.

1 666 Codepen

ΠΠΎΡ‡ΡŒ Π² ΠΌΡƒΠ·Π΅Π΅

ΠŸΡ€ΠΈ Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΠΈ курсора разгораСтся Ρ„ΠΎΠ½Π°Ρ€ΡŒ ΠΈ освСщаСт ΠΊΠ°Ρ€Ρ‚ΠΈΠ½Ρ‹ Π² ΠΌΡƒΠ·Π΅Π΅. ΠŸΡ€ΠΈ ΠΊΠ»ΠΈΠΊΠ΅ происходит ΠΏΡ€ΠΈΠ±Π»ΠΈΠΆΠ΅Π½ΠΈΠ΅ изобраТСния.

3 364 Text / Codepen

Π–ΠΈΠ΄ΠΊΠΈΠΉ тСкст ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ

ΠŸΡ€ΠΈ hover Π½Π° тСкст Π΅Π³ΠΎ Ρ„ΠΎΠ½ становится Ρ‚Π΅ΠΊΡƒΡ‡ΠΈΠΌ, ΠΊΠ°ΠΊ ΠΆΠΈΠ΄ΠΊΠΎΡΡ‚ΡŒ.

2 186 Codepen

ВСкстурный ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ ΠΌΠ΅ΠΆΠ΄Ρƒ изобраТСниями Π½Π° three.js

ΠŸΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ происходит ΠΏΠ»Π°Π²Π½Ρ‹ΠΉ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ сквозь тСкстуру для ΠΏΠΎΠΊΠ°Π·Π° Π΄Ρ€ΡƒΠ³ΠΎΠΉ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ. ΠŸΡ€ΠΈ Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΠΈ курсора ΠΌΡ‹ΡˆΠΈ Ρ‚Π°ΠΊ ΠΆΠ΅ происходит Π½Π°ΠΊΠ»ΠΎΠ½ Π² 3d пространствС. Π Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½ΠΎ Π½Π° three.js

3 141 Codepen

CSS Ρ„ΠΈΠ»ΡŒΡ‚Ρ€Ρ‹ для hover эффСкта ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡Π΅ΠΊ

Hover эффСкт Π½Π° CSS ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‰ΠΈΠΉ Ρ„ΠΈΠ»ΡŒΡ‚Ρ€Ρ‹ для Π·Π°Π±Π»ΡŽΡ€ΠΈΠ²Π°Π½ΠΈΡ Π½Π΅Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Ρ… ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡Π΅ΠΊ

4 195 Animation / Menu & Nav / Codepen

Π­Ρ„Ρ„Π΅ΠΊΡ‚ навСдСния слСдящий Π·Π° курсором

ΠŸΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅ ссылки ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΠΏΡƒΠ½ΠΊΡ‚ мСню

2 537 Codepen

Π“Π»ΠΈΡ‚Ρ‡ эффСкт Π½Π° CSS ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ

ΠŸΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ воспроизводится Π³Π»ΠΈΡ‚Ρ‡ эффСкт. Π‘Π΄Π΅Π»Π°Π½ΠΎ Π½Π° CSS Π·Π° счСт использования ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈ Ρ‚ΠΎΠ³ΠΎ ΠΆΠ΅ изобраТСния нСсколько Ρ€Π°Π·.

1 806 Codepen

Π­Ρ„Ρ„Π΅ΠΊΡ‚ тСссСляции ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ячСйку Π² grid css

Π­Ρ„Ρ„Π΅ΠΊΡ‚ тСссСляции ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ячСйки Π² сСткС. Π‘Π΅Ρ‚ΠΊΠ° grid построСна Π½Π° Π±Π°Π·Π΅ 200 Π±Π»ΠΎΠΊΠΎΠ². Π‘Π΄Π΅Π»Π°Π½ эффСкт Π½Π° чистом CSS

CSS эффСкты ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ

Π’Ρ‹ здСсь: Главная β€” CSS β€” CSS3 β€” CSS эффСкты ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ

CSS Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° imagehover – это коллСкция Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… CSS эффСктов ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ (hover effects), ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒ ΠΊΠ°ΠΊ ΠΊ ΠΎΠ΄ΠΈΠ½ΠΎΡ‡Π½Ρ‹ΠΌ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ°ΠΌ, Ρ‚Π°ΠΊ ΠΈ ΠΊ галСрСям.

Бсылка Π½Π° сайт: http://imagehover.io/

ΠΠ°ΠΈΠ»ΡƒΡ‡ΡˆΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Π΄Π°Π½Π½Ρ‹Π΅ эффСкты Ρ…ΠΎΡ€ΠΎΡˆΠΎ подходят, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ ΠΊ ΠΏΡ€Π΅Π²ΡŒΡŽ-изобраТСниям, ΡΡΡ‹Π»Π°ΡŽΡ‰ΠΈΠ΅ΡΡ Π½Π° ΠΏΠΎΠ»Π½ΡƒΡŽ ΡΡ‚Π°Ρ‚ΡŒΡŽ Π² Π±Π»ΠΎΠ³Π΅ ΠΈΠ»ΠΈ Π½Π° URL Ρ€Π΅Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ сайта ΠΈΠ· вашСго ΠΏΠΎΡ€Ρ‚Ρ„ΠΎΠ»ΠΈΠΎ.

ДСмонстрация ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°

Π§Ρ‚ΠΎ находится Π²Π½ΡƒΡ‚Ρ€ΠΈ CSS Ρ„Π°ΠΉΠ»Π° Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ? Π’ бСсплатной вСрсии Π²Ρ‹ Π½Π°ΠΉΠ΄Π΅Ρ‚Π΅ 44 эффСкта, ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ эффСкт ΠΈΠΌΠ΅Π΅Ρ‚ свой класс, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ прописаны ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠ΅ свойства ΠΈ ΠΈΡ… значСния. Π’ ΠΏΠ»Π°Ρ‚Π½ΠΎΠΉ вСрсии находятся стили 216 эффСктов, Π½ΠΎ Π²Π°ΠΌ с Π³ΠΎΠ»ΠΎΠ²ΠΎΠΉ Ρ…Π²Π°Ρ‚ΠΈΡ‚ ΠΈ 44 эффСкта.

4 шага для запуска hover эффСкта:

1) Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ ΠΈ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΡƒ

Π‘ΠΊΠ°Ρ‡Π°ΠΉΡ‚Π΅ Π°Ρ€Ρ…ΠΈΠ² ΠΈ Π²Ρ‹Ρ‚Π°Ρ‰ΠΈΡ‚Π΅ ΠΎΡ‚Ρ‚ΡƒΠ΄Π° всСго ΠΎΠ΄ΠΈΠ½ CSS Ρ„Π°ΠΉΠ» imagehover.min (сТатая вСрсия) ΠΈ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡ΠΈΡ‚Π΅ ΠΊ Π²Π°ΡˆΠ΅ΠΌΡƒ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Ρƒ.

<head>
  <link rel="stylesheet" href="css/imagehover.min.css">
</head>

2) Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ эффСкт

На Π³Π»Π°Π²Π½ΠΎΠΉ страницС imagehover.

io, Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Π½ΡƒΠΆΠ½Ρ‹ΠΉ эффСкт ΠΈ Π·Π°ΠΏΠΎΠΌΠ½ΠΈΡ‚Π΅ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ Π΅Π³ΠΎ класса, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ ΠΌΠ½Π΅ понравился класс imghvr-slide-up.

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.

Если Π’Ρ‹ Π½Π΅ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΏΡ€ΠΎΠΏΡƒΡΡ‚ΠΈΡ‚ΡŒ Π½ΠΎΠ²Ρ‹Π΅ ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»Ρ‹ Π½Π° сайтС,
Ρ‚ΠΎ Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠ΄ΠΏΠΈΡΠ°Ρ‚ΡŒΡΡ Π½Π° обновлСния: ΠŸΠΎΠ΄ΠΏΠΈΡΠ°Ρ‚ΡŒΡΡ Π½Π° обновлСния

Если Ρƒ Вас ΠΎΡΡ‚Π°Π»ΠΈΡΡŒ ΠΊΠ°ΠΊΠΈΠ΅-Π»ΠΈΠ±ΠΎ вопросы, Π»ΠΈΠ±ΠΎ Ρƒ Вас Π΅ΡΡ‚ΡŒ ΠΆΠ΅Π»Π°Π½ΠΈΠ΅ Π²Ρ‹ΡΠΊΠ°Π·Π°Ρ‚ΡŒΡΡ ΠΏΠΎ ΠΏΠΎΠ²ΠΎΠ΄Ρƒ этой ΡΡ‚Π°Ρ‚ΡŒΠΈ, Ρ‚ΠΎ Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ свой ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ Π²Π½ΠΈΠ·Ρƒ страницы.

ΠŸΠΎΡ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΠΉΡ‚Π΅ эту ΡΡ‚Π°Ρ‚ΡŒΡŽ Π΄Ρ€ΡƒΠ·ΡŒΡΠΌ:

Если Π’Π°ΠΌ понравился сайт, Ρ‚ΠΎ размСститС ссылку Π½Π° Π½Π΅Π³ΠΎ (Ρƒ сСбя Π½Π° сайтС, Π½Π° Ρ„ΠΎΡ€ΡƒΠΌΠ΅, Π² ΠΊΠΎΠ½Ρ‚Π°ΠΊΡ‚Π΅):

  1. Кнопка:
    <a href=Β»https://myrusakov.ruΒ» target=Β»_blankΒ»><img src=Β»https://myrusakov.ru/images/button.gifΒ» alt=»Как ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ свой сайт» /></a>

    Она выглядит Π²ΠΎΡ‚ Ρ‚Π°ΠΊ:

  2. ВСкстовая ссылка:
    <a href=Β»https://myrusakov.ruΒ» target=Β»_blankΒ»>Как ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ свой сайт</a>

    Она выглядит Π²ΠΎΡ‚ Ρ‚Π°ΠΊ: Как ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ свой сайт

  3. BB-ΠΊΠΎΠ΄ ссылки для Ρ„ΠΎΡ€ΡƒΠΌΠΎΠ² (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Π΅Ρ‘ Π² подписи):
    [URL=Β»https://myrusakov.ruΒ»]Как ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ свой сайт[/URL]

ΠšΡ€Π°ΡΠΈΠ²Ρ‹ΠΉ эффСкт ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ

ΠšΡ€Π°ΡΠΈΠ²Ρ‹ΠΉ эффСкт ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ. Π₯ΠΎΠ²Π΅Ρ€ эффСкты ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°Π·ΠΈΡ‚ΡŒ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΡƒΡŽ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ Π½Π° изобраТСниях ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π½Π°Π²ΠΎΠ΄ΠΈΡ‚ курсор ΠΌΡ‹ΡˆΠΈ. Π­Ρ‚ΠΎ ΡƒΠ΄ΠΎΠ±Π½ΠΎ ΠΈ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½ΠΎ, Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎ Ρ€Π°Π·Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ сайт. БСгодня ΠΌΡ‹ Ρ…ΠΎΡ‚ΠΈΠΌ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ красивый hover-эффСкт для ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора ΠΌΡ‹ΡˆΠΈ с ΠΏΠΎΠΌΠΎΡ‰ΠΈ CSS3. ΠŸΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора ΠΌΡ‹ΡˆΠΈ Π½Π° ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΡ€ΠΎΠΈΡΡ…ΠΎΠ΄ΠΈΡ‚ΡŒ анимация ΠΈ ΠΏΠ»Π°Π²Π½ΠΎΠ΅ появлСниС Ρ€Π°ΠΌΠΊΠΈ Π½Π° изобраТСниях с тСкстовыми полями.

Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π³ΠΎΡ‚ΠΎΠ²Ρ‹Π΅ ΡˆΠ°Π±Π»ΠΎΠ½Ρ‹ с Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΡΡ‚ΡŒΡŽ ΠΈ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΎΠΉ русского языка, ΠΎΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° ΠΏΡ€Π΅Π΄Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π² нашСм ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚-ΠΌΠ°Π³Π°Π·ΠΈΠ½Π΅.

ΠšΡ€Π°ΡΠΈΠ²Ρ‹ΠΉ эффСкт ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ. ΠŸΡ€ΠΎΡ†Π΅ΡΡ Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ Π½Π° сайтС.

Π¨Π°Π³ 1. HTML

ПослС Ρ‚ΠΎΠ³ΠΎ ΠΊΠ°ΠΊ Π²Ρ‹ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡ΠΈΠ»ΠΈ стили ΠΊ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Ρƒ, Π½Π°ΠΌ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΡƒ, Ρƒ нас Π±ΡƒΠ΄Π΅Ρ‚ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΡ‹ использовали для дСмонстрации, Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΡ‹ Π΄ΠΎΠ±Π°Π²ΠΈΠ»ΠΈ Π±Π»ΠΎΠΊΠΈ с установлСнным классом:

<div>

<div>

<img src=»img/6.jpg» alt=»»>

</div>

<!β€” ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ β€”>

<div>

<h*>Hover-эффСкт</h*>

<p>ОписаниС для ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора ΠΌΡ‹ΡˆΠΈ. </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

. box {

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;

}

. box:hover .content {

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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
      -ms-box-sizing: border-box;
          box-sizing: border-box;
}
 
body {
  background: #333;
}
 
.pic {
  border: 10px solid #fff;  
  float: left;
  height: 300px;
  width: 300px;
  margin: 20px;
  overflow: hidden;
   
  -webkit-box-shadow: 5px 5px 5px #111;
          box-shadow: 5px 5px 5px #111;  
}

border-box ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ высота ΠΈ ΡˆΠΈΡ€ΠΈΠ½Π° Π±Π»ΠΎΠΊΠΎΠ² с изобраТСниями Π±ΡƒΠ΄ΡƒΡ‚ Π²ΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒ Π² сСбя значСния ΠΏΠΎΠ»Π΅ΠΉ ΠΈ Π³Ρ€Π°Π½ΠΈΡ†, Π° класс pic являСтся ΠΎΠ±Ρ‰ΠΈΠΌ для всСх ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ. ΠžΠ³Ρ€Π°Π½ΠΈΡ‡ΠΈΠ²Π°Π΅Ρ‚ высоту, ΡˆΠΈΡ€ΠΈΠ½Ρƒ, Π·Π°Π΄Π°Π΅Ρ‚ Π³Ρ€Π°Π½ΠΈΡ†Ρƒ ΠΈ Ρ‚Π΅Π½ΡŒ. И Ρ‡Ρ‚ΠΎ самоС Π²Π°ΠΆΠ½ΠΎΠ΅ содСрТимоС (Ρ‚.Π΅. изобраТСния) этого Π±Π»ΠΎΡ‡Π½ΠΎΠ³ΠΎ элСмСнта, Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π²Π½ΡƒΡ‚Ρ€ΠΈ, Π·Π° ΠΏΡ€Π΅Π΄Π΅Π»Ρ‹ Π½Π΅ Π²Ρ‹ΠΉΠ΄Π΅Ρ‚ свойство overflow : hidden.

ΠœΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈ ΠΏΠ°Π½ΠΎΡ€Π°ΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅

Наша пСрвая Π³Ρ€ΡƒΠΏΠΏΠ° эффСктов Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ Π² сСбя использованиС Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… Ρ‚Ρ€ΡŽΠΊΠΎΠ² с ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΈ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅ΠΌ изобраТСния.

Π£Π²Π΅Π»ΠΈΡ‡Π΅Π½ΠΈΠ΅


Для Π½Π°Ρ‡Π°Π»Π° ΠΌΡ‹ сдСлаСм Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎ ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π½Π°Π²ΠΎΠ΄ΠΈΡ‚ курсор Π½Π° ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ фотография увСличиваСтся, ΠΎΡΡ‚Π°Π²Π°ΡΡΡŒ Π² ΠΏΡ€Π΅Π΄Π΅Π»Π°Ρ… своих Π³Ρ€Π°Π½ΠΈΡ†. Π’ΠΎΡ‚ HTML:

1
2
3

<div>
  <img src=Β»http://lorempixel.com/400/400/people/9β€³ alt=Β»portraitΒ»>
</div>

Как Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²ΠΈΠ΄Π΅Ρ‚ΡŒ здСсь ΠΌΡ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ Π΄Π²Π° класса pic ΠΈ grow. Π‘Π°Π·ΠΎΠ²Ρ‹ΠΉ pic ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π·Π°Π΄Π°Π΅Ρ‚ Ρ€Π°Π·ΠΌΠ΅Ρ€ изобраТСния ΠΈ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹. Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π΄Π°Π²Π°ΠΉΡ‚Π΅ посмотрим, CSS.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

/*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;
}

Π‘Π°ΠΌΠΎ ΠΏΠΎ сСбС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ 400Ρ…400px, Π½ΠΎ ΠΌΡ‹ Π΅Π³ΠΎ подгоняСм ΠΏΠΎΠ΄ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ Π±Π»ΠΎΠΊΠ° 300x300px ΠΈ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅ΠΌ transition свойство, ΠΎΠ·Π½Π°Ρ‡Π°ΡŽΡ‰Π΅Π΅ Ρ‡Ρ‚ΠΎ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ свойства Π±ΡƒΠ΄ΡƒΡ‚ ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒΡΡ ΠΏΠ»Π°Π²Π½ΠΎ Π² Ρ‚Π΅Ρ‡Π΅Π½ΠΈΠΈ ΠΎΠ΄Π½ΠΎΠΉ сСкунды, ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΠΎ ΠΏΡ€ΠΎ transition. Π’Π°ΠΊ ΠΊΠ°ΠΊ Π½Π°ΠΌ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΡƒΠ²Π΅Π»ΠΈΡ‡Π΅Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Ρ‚ΠΎ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΎΠ½ΠΎ возвращаСтся ΠΊ исходным Ρ€Π°Π·ΠΌΠ΅Ρ€Π°ΠΌ.

УмСньшСниС


Π­Ρ‚ΠΎ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ ΠΏΡ€ΠΎΡ‚ΠΈΠ²ΠΎΠΏΠΎΠ»ΠΎΠΆΠ½Ρ‹ΠΉ эффСкт. Π˜Π·Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π² ΠΏΠΎΠ»Π½ΠΎΡ†Π΅Π½Π½ΠΎΠΌ Ρ€Π°Π·ΠΌΠ΅Ρ€Π΅, Π° ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΡƒΠΌΠ΅Π½ΡŒΡˆΠ°Π΅Ρ‚ΡΡ Π΄ΠΎ 300Ρ…300px. Ρ‚Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ создаСтся эффСкт сТатия.

1
2
3

<div>
  <img src=Β»http://lorempixel.com/400/400/nightlife/4β€³ alt=Β»cityΒ»>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

/*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;
}

Π“ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ смСщСниС


Π”Π°Π½Π½Ρ‹ΠΉ эффСкт Π½Π΅ ΠΌΠ°Π½ΠΈΠΏΡƒΠ»ΠΈΡ€ΡƒΠ΅Ρ‚ Ρ€Π°Π·ΠΌΠ΅Ρ€Π°ΠΌΠΈ изобраТСния, Π½ΠΎ Π·Π°Ρ‚ΠΎ мСняСт ΠΏΠΎΠ·ΠΈΡ†ΠΈΡŽ Π² Π±Π»ΠΎΠΊΠ΅. ΠŸΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° смСщаСтся Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎ Π² сторону.

1
2
3

<div>
  <img src=Β»http://lorempixel.com/600/300/sports/8β€³ alt=Β»kickΒ»>
</div>

Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠΌΠ΅Π΅Ρ‚ Ρ€Π°Π·ΠΌΠ΅Ρ€ 600Ρ…300px.

1
2
3
4
5
6
7
8
9
10
11
12
13

/*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;
}

ВсС с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ‚ΠΎΠ³ΠΎ ΠΆΠ΅ свойства transition ΠΌΡ‹ ΠΏΠ»Π°Π²Π½ΠΎ мСняСм, Π½ΠΎ ΡƒΠΆΠ΅ свойство margin. ΠŸΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ смСщаСм ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Π²Π»Π΅Π²ΠΎ Π½Π° 200px.

Π’Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ смСщСниС


АналогичСн ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰Π΅ΠΌΡƒ ΠΈ Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π±Ρ‹Π»ΠΎ Π±Ρ‹ Π½Π΅ ΠΏΡ€ΠΈΠ²ΠΎΠ΄ΠΈΡ‚ΡŒ. Но всС Ρ‚Π°ΠΊΠΈ ΡΠ»Π΅Π΄ΡƒΡŽΡ‚ ΠΏΡ€ΠΎΠ΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ‚Π°ΠΊΠΎΠΉ эффСкт, Ρ‚ΠΎΡ‡Π½Π΅Π΅ с ΠΊΠ°ΠΊΠΈΠΌ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ.

1
2
3

<div>
  <img src=Β»http://lorempixel.com/300/600/sports/5β€³ alt=Β»climbΒ»>
</div>

Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠΌΠ΅Π΅Ρ‚ Ρ€Π°Π·ΠΌΠ΅Ρ€ 300Ρ…600px.

1
2
3
4
5
6
7
8
9
10
11
12
13

/*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;
}

Π’Π΅ΠΏΠ΅Ρ€ΡŒ смСщаСм Π²Π²Π΅Ρ€Ρ… Π½Π° 200px.

Врансформация

ΠŸΠΎΠ²Ρ‹ΡˆΠ°Π΅ΠΌ ΡΠ»ΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ создаваСмых эффСктов. НачнСм с простого Π½Π°ΠΊΠ»ΠΎΠ½Π°, Π° дальшС большС. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ Π±ΡƒΠ΄Π΅Ρ‚ свойство transform β€” Π΅Ρ‰Π΅ эффСкт с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ transform.

Наклон


Π—Π°ΠΌΠ΅Ρ‡Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ эффСкт. НСбольшой ΠΏΠΎΠ²ΠΎΡ€ΠΎΡ‚ изобраТСния Π² Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π΅ навСдСния курсора ΠΌΡ‹ΡˆΠΈ.

1
2
3

<div>
  <img src=Β»http://lorempixel.com/300/300/transport/5β€³ alt=Β»carΒ»>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

/*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);
}

ВсС Ρ‡Ρ‚ΠΎ Π½ΡƒΠΆΠ½ΠΎ Π±Ρ‹Π»ΠΎ, Ρ‚Π°ΠΊ это ΠΏΠΎΠ²Π΅Ρ€Π½ΡƒΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π° Π΄Π΅ΡΡΡ‚ΡŒ градусов. ΠŸΡ€ΠΎΡΡ‚ΠΎ ΠΈ эффСктивно! ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ эффСкт Π½Π°Ρ†Π΅Π»Π΅Π½ Π½Π° сам класс, Π° Π½Π΅ Π½Π° ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅.

ΠŸΠΎΠ²ΠΎΡ€ΠΎΡ‚


Когда ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π½Π°Π²ΠΎΠ΄ΠΈΡ‚ Π½Π° ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, послСднСС Π½Π°Ρ‡ΠΈΠ½Π°Π΅Ρ‚ Π²Ρ€Π°Ρ‰Π°Ρ‚ΡŒΡΡ. Пока ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ вращаСтся, Π±Π»ΠΎΠΊ Π΄ΠΈΠ² трансформируСтся Π² ΠΊΡ€ΡƒΠ³. Π’ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π΅ Π²Ρ‹Ρ…ΠΎΠ΄ΠΈΡ‚ супСр эффСкт.

1
2
3

<div>
  <img src=Β»http://lorempixel.com/300/300/nature/5β€³ alt=Β»beachΒ»>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

/*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%, Π² Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π΅ Ρ‡Π΅Π³ΠΎ получаСтся ΠΊΡ€ΡƒΠ³.

Ѐокусировка


Π’ΠΎΡ‚ Π΅Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ ΠΏΠΎΠ΄ΠΎΠ±Π½Ρ‹ΠΉ эффСкт. Однако вращСния Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ просто ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π·Π°ΠΊΡ€ΡƒΠ³Π»ΠΈΠΌ ΠΈ ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΠΌ Ρ‚ΠΎΠ»Ρ‰ΠΈΠ½Ρƒ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹.

1
2
3

<div>
    <img src=Β»http://lorempixel.com/300/300/sports/1β€³ alt=Β»cricketΒ»>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13

/*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%;
}

ΠŸΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора, ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΠ²Π°Π΅ΠΌ Ρ‚ΠΎΠ»Ρ‰ΠΈΠ½Ρƒ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ с 10 Π΄ΠΎ 70px, ΠΈ ΠΊΠ°ΠΊ Π² ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰Π΅ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ border-radius Π² 50%.

Π€ΠΈΠ»ΡŒΡ‚Ρ€Ρ‹ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ

На послСдок рассмотрим ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Ρ„ΠΈΠ»ΡŒΡ‚Ρ€ΠΎΠ² ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ. Π’ ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠ΅ ΠΎΡ‚ ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½Ρ‹Ρ… Π²Ρ‹ΡˆΠ΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ², ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΈΠ· ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ нСсколько прСфиксов, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ±Π΅ΡΠΏΠ΅Ρ‡ΠΈΡ‚ΡŒ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡŒΠ½ΡƒΡŽ ΡΠΎΠ²ΠΌΠ΅ΡΡ‚ΠΈΠΌΠΎΡΡ‚ΡŒ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°, Π² Ρ„ΠΈΠ»Ρ‚Ρ€Π°Ρ… ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π±ΡƒΠ΄Π΅ΠΌ прСфикс-WebKit (для Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ² Chrome ΠΈ Safari), ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹, ΠΊ соТалСнию ΠΈΡ… (Ρ„ΠΈΠ»ΡŒΡ‚Ρ€Ρ‹) Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚.

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


ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ эффСкт, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΡ‹ рассмотрим это Ρ€Π°Π·ΠΌΡ‹Ρ‚ΠΈΠ΅. Π—Π΄Π΅ΡΡŒ с ΠΊΠΎΠ΄ΠΎΠΌ всС Π΅Ρ‰Π΅ ΠΏΡ€ΠΎΡ‰Π΅, ΠΎΠ΄Π½Π° строка.

1
2
3

<div>
  <img src=Β»http://lorempixel.com/300/300/transport/2β€³ alt=Β»planeΒ»>
</div>

1
2
3
4
5
6
7
8
9
10
11
12

/*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, с Ρ€Π°Π·ΠΌΡ‹Ρ‚ΠΈΠ΅ΠΌ 5px.

Π§Π΅Ρ€Π½ΠΎ-Π±Π΅Π»ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅


Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ этого Ρ„ΠΈΠ»ΡŒΡ‚Ρ€Π°, добьСмся эффСкта Ρ‡Π΅Ρ€Π½ΠΎ-Π±Π΅Π»ΠΎΠ³ΠΎ изобраТСния.

1
2
3

<div>
  <img src=Β»http://lorempixel.com/300/300/nature/2β€³ alt=Β»seaΒ»>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13

/*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%);
  filter: grayscale(100%);
}

Π—Π΄Π΅ΡΡŒ я установил ΠΎΡ‚Ρ‚Π΅Π½ΠΊΠΈ сСрого (grayscale) со Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ 100%. ΠŸΡ€ΠΎΡ†Π΅Π½Ρ‚ ΠΎΡ‚Ρ‚Π΅Π½ΠΊΠΎΠ² сСрого ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ½ΠΈΠ·ΠΈΡ‚ΡŒ.

ΠžΡΠ²Π΅Ρ‚Π»Π΅Π½ΠΈΠ΅


Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΏΠΎΠΈΠ³Ρ€Π°Π΅ΠΌ ΡΡ€ΠΊΠΎΡΡ‚ΡŒΡŽ изобраТСния. Π‘Π½Π°Ρ‡Π°Π»Π° Π·Π°Ρ‚Π΅ΠΌΠ½ΠΈΠΌ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ, Π° ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π²Π΅Ρ€Π½Π΅ΠΌ Π½ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ для яркости.

1
2
3

<div>
  <img src=Β»http://lorempixel.com/300/300/technics/2β€³ alt=Β»seaΒ»>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13

/*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(145%);
}

Π˜Π·Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎ ΡΡ€ΠΊΠΎΡΡ‚ΡŒ Π΄Π΅Π»Π°Π΅ΠΌ 65%, Π° ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ устанавливаСм Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ 145% Ρ‚.Π΅. ярчС Π½Π° 45% ΠΎΡ‚ Π½ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ состояниС ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ.

БСпия


Π•Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ Ρ€Π΅Ρ‚Ρ€ΠΎ эффСкт) ΠΏΠ΅Ρ€Π΅Π²ΠΎΠ΄ Ρ†Π²Π΅Ρ‚Π½ΠΎΠ³ΠΎ изобраТСния Π² Ρ‚ΠΎΠ½Π°Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ сСпия.

1
2
3

<div>
  <img src=Β»http://lorempixel.com/output/people-q-c-300-300-4.jpgΒ» alt=Β»peopleΒ»>
</div>

1
2
3
4
5
6
7
8
9
10
11
12

/*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 {
  -webkit-filter: sepia(100%);
}

ЗначСния Ρ„ΠΈΠ»ΡŒΡ‚Ρ€ΠΎΠ² сСпия ΠΈ ΠΎΡ‚Ρ‚Π΅Π½ΠΊΠΈ сСрого ΡƒΠΊΠ°Π·Π°Π½Ρ‹ Π² ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚Π°Ρ…, Π³Π΄Π΅ 100% являСтся ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΌ. Если Π½Π΅ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ число Ρ‚ΠΎ 100% Π±ΡƒΠ΄ΡƒΡ‚ ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½Ρ‹ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ.

ΠšΠΎΠ½Ρ‚Ρ€Π°ΡΡ‚Π½ΠΎΡΡ‚ΡŒ


Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΊΠΎΠ½Ρ‚Ρ€Π°ΡΡ‚Π½ΠΎΡΡ‚ΡŒ. На ΠΌΠΎΠΉ взгляд самый классный Ρ„ΠΈΠ»ΡŒΡ‚Ρ€, ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ Π½Π°ΡΡ‹Ρ‰Π΅Π½Π½ΠΎΡΡ‚ΡŒΡŽ Ρ†Π²Π΅Ρ‚ΠΎΠ² Π² ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΈ.

1
2
3

<div>
  <img src=Β»http://lorempixel.com/output/animals-q-c-300-300-9.jpgΒ» alt=Β»dogΒ»>
</div>

1
2
3
4
5
6
7
8
9
10
11
12

/*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 {
  -webkit-filter: contrast(185%);  
}

БущСствуСт нСбольшая Ρ€Π°Π·Π½ΠΈΡ†Π° Π² использовании этого Ρ„ΠΈΠ»ΡŒΡ‚Ρ€Π°. ΠžΠ±Ρ‹Ρ‡Π½Ρ‹ΠΌ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ контрастности являСтся 100%. Π‘ΠΎΠ»ΡŒΡˆΠ΅ 100% Ρ†Π²Π΅Ρ‚Π° насыщСннСй, мСньшС Ρ†Π²Π΅Ρ‚Π° Ρ‚ΡƒΡΠΊΠ½Π΅ΡŽΡ‚.

ΠžΡ‚Ρ‚Π΅Π½ΠΎΠΊ изобраТСния


Π”Π°Π½Π½Ρ‹ΠΉ Ρ„ΠΈΠ»ΡŒΡ‚Ρ€ измСняСт Ρ†Π²Π΅Ρ‚Π° ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ Π² зависимости ΠΎΡ‚ Π·Π°Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΡƒΠ³Π»Π°.

1
2
3

<div>
  <img src=Β»http://lorempixel.com/output/transport-q-c-300-300-9.jpgΒ» alt=Β»trainΒ»>
</div>

1
2
3
4
5
6
7
8
9
10
11
12

/*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 {
  -webkit-filter: hue-rotate(65deg);  
}

Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΎΡ‚Ρ‚Π΅Π½ΠΊΠ° изобраТСния задаСтся Π² градусах ΠΎΡ‚ 0-360, Π³Π΄Π΅ 0 это Π½ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅.

Π˜Π½Π²Π΅Ρ€ΡΠΈΡ


Π•Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ Webkit Ρ„ΠΈΠ»ΡŒΡ‚Ρ€ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ β€” это инвСрсия.

1
2
3

<div>
   <img src=Β»http://lorempixel.com/output/technics-q-c-300-300-1.jpgΒ» alt=Β»dogΒ»>
</div>

1
2
3
4
5
6
7
8
9
10
11
12

/*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 {
  -webkit-filter: invert(100%);
}

Π”Π°Π½Π½Ρ‹ΠΉ Ρ„ΠΈΠ»ΡŒΡ‚Ρ€ ΠΈΠ½Π²Π΅Ρ€Ρ‚ΠΈΡ€ΡƒΠ΅Ρ‚ Ρ†Π²Π΅Ρ‚Π°. Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ задаСтся Π² % ΠΎΡ‚ 0-100.

Π’Π°ΠΊΠΆΠ΅ ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½ΠΈΡ‚ΡŒ Ρ„ΠΈΠ»ΡŒΡ‚Ρ€Ρ‹ Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΏΡ€Π°Π²ΠΈΠ»Π΅. ΠŸΠΎΠ»ΡƒΡ‡Π°Π΅Ρ‚ΡΡ Π±ΠΎΠ»Π΅Π΅ комплСксный эффСкт для изобраТСния. НапримСр ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Ρ‡Π΅Ρ€Π½ΠΎ-Π±Π΅Π»ΠΎΠΉ ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ контрастности:

1
2
3

img {  
    -webkit-filter: grayscale(100%) contrast(150%);  
}

ΠŸΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΡΡ‚ΡŒ



НавСрноС самый распространСнный способ манипуляции с Ρ†Π²Π΅Ρ‚Π°ΠΌΠΈ изобраТСния, Ρ‚Π°ΠΊ это Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ прозрачности. Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΈ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS3. ВынСс Π΅Π³ΠΎ Π² ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹ΠΉ Ρ€Π°Π·Π΄Π΅Π» Π² связи с ΠΎΠ΄Π½ΠΎΠΉ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΡΡ‚ΡŒΡŽ, ΠΎ Π½Π΅ΠΉ Π½ΠΈΠΆΠ΅.

1
2
3

<div>
  <img src=Β»http://lorempixel.com/output/sports-q-c-300-300-6.jpgΒ» alt=Β»soccerΒ»>
</div>

1
2
3
4
5
6
7
8
9
10
11
12

/*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 {
  -webkit-filter: opacity(25%);
}

Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ прозрачности Π² Ρ„ΠΈΠ»ΡŒΡ‚Ρ€Π΅ задаСтся ΠΎΠΏΡΡ‚ΡŒ Ρ‚Π°ΠΊΠΈ ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚Π°ΠΌΠΈ, Π³Π΄Π΅ 100% это Π½Π΅ ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎ, Π° 0% ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎ. ΠžΡΠΎΠ±Π΅Π½Π½ΠΎΡΡ‚ΡŒ использования прозрачности Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠ°ΠΊ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎΠ΅ свойство CSS, Π° Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΊΠ°ΠΊ Ρ„ΠΈΠ»ΡŒΡ‚Ρ€. БоотвСтствСнно ΠΈ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Ρ‚Π°ΠΊΠΎΠΉ эффСкт Π²ΠΎ всСх Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ…, Π΄Π°ΠΆΠ΅ Π² IE9+.

1
2
3

img {
    opacity: 0.5;
}

ΠŸΡ€ΠΈ Ρ‚Π°ΠΊΠΎΠΌ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Π΅ использованиС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ бСрСтся ΠΈΠ· ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π»Π° ΠΎΡ‚ 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 ΠΈ Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ с Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎΠΌ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ².

iHover

iHover содСрТит CSS3 эффСкты навСдСния β€” 20 ΠΊΡ€ΡƒΠ³ΠΎΠ²Ρ‹Ρ… ΠΈ 15 ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚Π½Ρ‹Ρ…. Π§Ρ‚ΠΎΠ±Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ эффСкты, Π²ΠΊΠ»ΡŽΡ‡Π΅Π½Π½Ρ‹Π΅ Π² эту Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΡƒ CSS, Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ Π½Π°ΠΏΠΈΡΠ°Ρ‚ΡŒ нСсколько строк Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ HTML ΠΈ Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ ΠΈΡ… Π² Ρ„Π°ΠΉΠ»Ρ‹.

Aero β€” CSS3 Hover Effects

Π’ Aero Π½Π΅Ρ‚ Π½ΠΈΡ‡Π΅Π³ΠΎ особСнного. Он содСрТит Π±Π°Π·ΠΎΠ²Ρ‹Π΅ эффСкты навСдСния, основанныС Π½Π° CSS3 ΠΈ Ρ…ΠΎΡ€ΠΎΡˆΠΎ Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‰ΠΈΠ΅ Π½Π° всСх Ρ‚ΠΈΠΏΠ°Ρ… Π²Π΅Π±-сайтов.

imagehover.css

Если Π²Π°ΠΌ Π½ΡƒΠΆΠ½Ρ‹ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΠ΅ΠΌΡ‹Π΅ эффСкты навСдСния, эта Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° создана ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎ для вас. На Π²Ρ‹Π±ΠΎΡ€ прСдлагаСтся Π±ΠΎΠ»Π΅Π΅ 40 эффСктов навСдСния изобраТСния CSS, всС Π² ΠΎΠ΄Π½ΠΎΠΉ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ΅ Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠΌ всСго 19 ΠšΠ‘.

Hov e r.css

Hover.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 изобраТСния, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹Π΅ Π² эффСктС Ρ€ΠΎΠ»Π»ΠΎΠ²Π΅Ρ€Π°. БущСствуСт Π΄Π²Π° ΠΌΠ΅Ρ‚ΠΎΠ΄Π°: Π»ΠΈΠ±ΠΎ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΎΡ‚Π»ΠΎΠΆΠ΅Π½Π½ΠΎΠΉ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ с Β«ΠΈΠ΄Π΅Π°Π»ΡŒΠ½Ρ‹ΠΌ Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠΌ пиксСля», Π»ΠΈΠ±ΠΎ с использованиСм ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ фиксированного Ρ€Π°Π·ΠΌΠ΅Ρ€Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΡŽΡ‚ΡΡ Π² соотвСтствии с Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠΌ Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅.

Π Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΠ΅ΠΌΡ‹ΠΉ ΠΌΠ΅Ρ‚ΠΎΠ΄ β€” с ΠΎΡ‚Π»ΠΎΠΆΠ΅Π½Π½ΠΎΠΉ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΎΠΉ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ с ΠΎΠΏΡ‚ΠΈΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΌ Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠΌ пиксСля (Π±Π΅Π· ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΡ Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅):

ΠΠ»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π½Ρ‹ΠΉ ΠΌΠ΅Ρ‚ΠΎΠ΄ β€” Π±Π΅Π· Π»Π΅Π½ΠΈΠ²ΠΎΠΉ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ с использованиСм ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ фиксированного Ρ€Π°Π·ΠΌΠ΅Ρ€Π° (ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒΡΡ Π½Π° устройствах с малСньким экраном):

 Π”Π΅ΠΌΠΎ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ 1  Π”Π΅ΠΌΠΎ-ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ 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 Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ Π² сСбя:

  1. Π’Ρ‹Π±ΠΎΡ€ элСмСнта, ΠΊ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌΡƒ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ эффСкт навСдСния
  2. ΠŸΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ мСню состояний Π² состояниС навСдСния ΠΈ настройка стиля
  3. Π’ΠΎΠ·Π²Ρ€Π°Ρ‰Π΅Π½ΠΈΠ΅ ΠΊ состояниС 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 .

Но сначала: Π³Π»Π°Π²Π½ΠΎΠ΅ Π² вашСм ΠΊΠΎΠ΄Π΅ β€” ΡΠΎΠ³Π»Π°ΡΠΎΠ²Π°Π½Π½ΠΎΡΡ‚ΡŒ, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ Π²Ρ‹ ΡΠΌΠ΅ΡˆΠΈΠ²Π°Π΅Ρ‚Π΅ строчныС ΠΈ прописныС Π±ΡƒΠΊΠ²Ρ‹ Π² #content ΠΈ id = "Content" . ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ всС Ρ€Π°Π²Π½ΠΎ Π½Π΅ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚.

ΠžΡ‚Π²Π΅Ρ‡Π°ΡŽ Π½Π° ваши вопросы:

1) ΡΠΎΠ³Π»Π°ΡΠΎΠ²Π°Ρ‚ΡŒ Π²Π΅Ρ€Ρ…Π½ΠΈΠΉ ΠΈ Π½ΠΈΠΆΠ½ΠΈΠΉ рСгистр!

2) Π§Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ постоянноС Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠ΅, Π°ΠΊΡ‚ΠΈΠ²ΠΈΡ€ΡƒΠΉΡ‚Π΅ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ «содСрТимого» с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ фокусируСмого элСмСнта Β«Ρ‚Ρ€ΠΈΠ³Π³Π΅Ρ€Β»

ΠŸΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ / Ρ‰Π΅Π»Ρ‡ΠΊΠ΅ внСшний Π²ΠΈΠ΄ остаСтся Π² фокусС ΠΈ, ΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ, Π΅Π³ΠΎ родствСнный ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ #content становится Π²ΠΈΠ΄ΠΈΠΌΡ‹ΠΌ.ΠŸΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора .shorttext Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ Π΅Π³ΠΎ Π±Ρ€Π°Ρ‚ .longtext .

ΠŸΡ€ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ .shorttext (фактичСски Π³Π΄Π΅-Π½ΠΈΠ±ΡƒΠ΄ΡŒ Π² #content ) ΠΏΠΎΠ»Π΅ содСрТимого снова закроСтся, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ внСшний снова тСряСт фокус.

FYI-1, ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΎ, поэтому Π²Π°ΠΌ понадобится Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π°, ΠΊΠΎΠ³Π΄Π° Π²Π°ΠΌ понадобится ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ ΠΊ ΠΊΠ°ΠΊΠΎΠΌΡƒ-Π»ΠΈΠ±ΠΎ элСмСнту. Π’ этом случаС ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Π½Π΅ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΡΡ‚ΡŒ ΠΎΡ‚ 0 Π΄ΠΎ 1 (Π½Π΅ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ Π² сочСтании с ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ ΠΈ высотой , ΠΎΡ‚ 0 Π΄ΠΎ 300 пиксСлСй).

FYI-2, использованиС href = "javascript: void (0)" вмСсто href = "#" ΠΏΡ€Π΅Π΄ΠΎΡ‚Π²Ρ€Π°Ρ‚ΠΈΡ‚ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°ΠΌΠΈ записи Π² ΠΆΡƒΡ€Π½Π°Π» истории ΠΏΡ€ΠΈ ΠΊΠ°ΠΆΠ΄ΠΎΠΌ Ρ‰Π΅Π»Ρ‡ΠΊΠ΅.

FYI-3 final, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ классы CSS ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ, ΠΎΠ½ΠΈ ΡΠ²Π»ΡΡŽΡ‚ΡΡ ΠΎΠ±Ρ‰ΠΈΠΌΠΈ, Ρ‡Ρ‚ΠΎ Π·Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΡƒΠΏΡ€ΠΎΡ‰Π°Π΅Ρ‚ ΠΊΠΎΠΏΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈ Ρ‚ΠΎΠ³ΠΎ ΠΆΠ΅ повСдСния Π² ваш HTML Π±Π΅Π· повторСния CSS ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ Ρ€Π°Π·. Π˜Π΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€Ρ‹ спСцифичны ΠΈ Ρ‚Ρ€Π΅Π±ΡƒΡŽΡ‚, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹ снова ΠΈ снова ΠΊΠΎΠΏΠΈΡ€ΠΎΠ²Π°Π»ΠΈ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ‹ΠΉ CSS.

  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
}  
    Picture  

ΠΊΠΎΡ€ΠΎΡ‚ΠΊΠΈΠΉ Π²ΡΡ‚ΡƒΠΏΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ тСкст, Π½Π°Π²Π΅Π΄ΠΈΡ‚Π΅ Π½Π° мСня

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.

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

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