hover Π² html ΠΊΠΎΠ΄Π΅

CSS hover эффСкты β€” для ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ, ΠΊΠ½ΠΎΠΏΠΎΠΊ, ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ссылки, Π±Π»ΠΎΠΊΠΈ ΠΈ Π΄Ρ€.

ΠžΡ‡Π΅Π½ΡŒ часто Π½Π° сайтах Π²Ρ‹ ΠΌΠΎΠ³Π»ΠΈ Π²ΡΡ‚Ρ€Π΅Ρ‡Π°Ρ‚ΡŒ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ оформлСния ссылок ΠΈΠ»ΠΈ ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ. Π Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π·Π°Π΄Π°Ρ‡Ρƒ позволяСт ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹ΠΉ псСвдокласс :hover Π² CSS. БСгодня рассмотрим Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΡ€ΠΈΠ΅ΠΌΡ‹ вСрстки ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰ΠΈΠ΅ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ эту Ρ„ΠΈΡˆΠΊΡƒ, Π° Π½ΠΈΠΆΠ΅ ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΡƒΠ΅ΠΌ список Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ интСрСсных ΠΈΠ· Π½ΠΈΡ… (с ΠΊΡ€Π°Ρ‚ΠΊΠΈΠΌΠΈ описаниями/пояснСниСми). ВсС Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹ Ρ€Π°Π·Π΄Π΅Π»ΠΈΠΌ Π½Π°:

Π”Π°Π½Π½Ρ‹Π΅ Π³Ρ€ΡƒΠΏΠΏΡ‹ вСсьма условны, Ρ‚.ΠΊ. ΠΌΠ½ΠΎΠ³ΠΈΠ΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ ΠΏΠ΅Ρ€Π΅ΡΠ΅ΠΊΠ°ΡŽΡ‚ΡΡ ΠΈ ΡΠ²Π»ΡΡŽΡ‚ΡΡ ΡƒΠ½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½Ρ‹ΠΌΠΈ, Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ ΠΌΠΎΠ³ΡƒΡ‚ Π²ΡΡ‚Ρ€Π΅Ρ‡Π°Ρ‚ΡŒΡΡ ΠΏΡ€ΠΈ ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠΈ Ρ€Π°Π·Π½Ρ‹Ρ… ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΎΠ².

Hover эффСкт Π² CSS стилях добавляСтся справа ΠΎΡ‚ элСмСнта ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ:

Π§Π°Ρ‰Π΅ всСго ΠΌΠ΅Ρ…Π°Π½ΠΈΠ·ΠΌ примСняСтся ΠΈΠΌΠ΅Π½Π½ΠΎ для ссылок Π΄Π°Π±Ρ‹ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΈΡ… Ρ†Π²Π΅Ρ‚ ΠΈΠ»ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ/ΡƒΠ±Ρ€Π°Ρ‚ΡŒ ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅. Однако ΠΎΠ½ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Π·Π°Π΄Π°Π½ ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠΌ Π±Π»ΠΎΠΊΠ°ΠΌ, ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌ, тСкстам ΠΈΠ»ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ ΠΏΡ€ΠΈ создании Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π³ΠΎ мСню.

hover Π² html ΠΊΠΎΠ΄Π΅. . hover Π² html ΠΊΠΎΠ΄Π΅ Ρ„ΠΎΡ‚ΠΎ. hover Π² html ΠΊΠΎΠ΄Π΅-. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° hover Π² html ΠΊΠΎΠ΄Π΅. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° . ΠžΡ‡Π΅Π½ΡŒ часто Π½Π° сайтах Π²Ρ‹ ΠΌΠΎΠ³Π»ΠΈ Π²ΡΡ‚Ρ€Π΅Ρ‡Π°Ρ‚ΡŒ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ оформлСния ссылок ΠΈΠ»ΠΈ ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ. Π Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π·Π°Π΄Π°Ρ‡Ρƒ позволяСт ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹ΠΉ псСвдокласс :hover Π² CSS. БСгодня рассмотрим Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΡ€ΠΈΠ΅ΠΌΡ‹ вСрстки ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰ΠΈΠ΅ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ эту Ρ„ΠΈΡˆΠΊΡƒ, Π° Π½ΠΈΠΆΠ΅ ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΡƒΠ΅ΠΌ список Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ интСрСсных ΠΈΠ· Π½ΠΈΡ… (с ΠΊΡ€Π°Ρ‚ΠΊΠΈΠΌΠΈ описаниями/пояснСниСми). ВсС Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹ Ρ€Π°Π·Π΄Π΅Π»ΠΈΠΌ Π½Π°:

ΠšΡΡ‚Π°Ρ‚ΠΈ, ΠΏΡ€ΠΈ Π·Π°Π΄Π°Π½ΠΈΠΈ стилСй ссылок Ρ‚Π°ΠΊΠΆΠ΅ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΌΠΎΠ³ΡƒΡ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ сСлСкторы :link β€” для Π½Π΅ посСщСнных Π΅Ρ‰Π΅ страниц, :visited β€” Ρ‚Π΅Ρ…, Π³Π΄Π΅ Π²Ρ‹ ΡƒΠΆΠ΅ Π±Ρ‹Π»ΠΈ + :active опрСдСляСт Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΉ сСйчас адрСс. Π’Π°ΠΆΠ½ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒ hover эффСкт Π² CSS послС :link ΠΈ :visited, Ссли ΠΎΠ½ΠΈ ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‚.

ΠŸΠ΅Ρ€Π΅ΠΉΠ΄Π΅ΠΌ ΠΎΡ‚ Ρ‚Π΅ΠΎΡ€ΠΈΠΈ ΠΊ ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠ΅. НиТС прСдставлСн список ΠΏΠΎΠ»Π΅Π·Π½Ρ‹Ρ… ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»ΠΎΠ² ΠΈ сниппСтов β€” ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΈΡ‚Π΅ ΠΏΠΎ ссылкам Π΄Π°Π±Ρ‹ ΠΏΡ€ΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ исходники.

Hover эффСкты ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΈ ссылок

Как ΠΌΡ‹ ΡƒΠΆΠ΅ Π³ΠΎΠ²ΠΎΡ€ΠΈΠ»ΠΈ Π²Ρ‹ΡˆΠ΅, это самая популярная катСгория ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΎΠ² Π½Π° сайтС, Π³Π΄Π΅ встрСчаСтся ΠΏΠΎΠ΄ΠΎΠ±Π½Ρ‹ΠΉ ΠΏΡ€ΠΈΠ΅ΠΌ. Π’ΠΎΡ‚ Π²Π°ΠΌ нСсколько Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ² ΠΏΠΎ Ρ‚Π΅ΠΌΠ΅.

ΠŸΡ€ΠΎΡΡ‚Ρ‹Π΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ для ΠΊΠ½ΠΎΠΏΠΎΠΊ

hover Π² html ΠΊΠΎΠ΄Π΅. . hover Π² html ΠΊΠΎΠ΄Π΅ Ρ„ΠΎΡ‚ΠΎ. hover Π² html ΠΊΠΎΠ΄Π΅-. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° hover Π² html ΠΊΠΎΠ΄Π΅. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° . ΠžΡ‡Π΅Π½ΡŒ часто Π½Π° сайтах Π²Ρ‹ ΠΌΠΎΠ³Π»ΠΈ Π²ΡΡ‚Ρ€Π΅Ρ‡Π°Ρ‚ΡŒ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ оформлСния ссылок ΠΈΠ»ΠΈ ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ. Π Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π·Π°Π΄Π°Ρ‡Ρƒ позволяСт ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹ΠΉ псСвдокласс :hover Π² CSS. БСгодня рассмотрим Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΡ€ΠΈΠ΅ΠΌΡ‹ вСрстки ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰ΠΈΠ΅ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ эту Ρ„ΠΈΡˆΠΊΡƒ, Π° Π½ΠΈΠΆΠ΅ ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΡƒΠ΅ΠΌ список Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ интСрСсных ΠΈΠ· Π½ΠΈΡ… (с ΠΊΡ€Π°Ρ‚ΠΊΠΈΠΌΠΈ описаниями/пояснСниСми). ВсС Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹ Ρ€Π°Π·Π΄Π΅Π»ΠΈΠΌ Π½Π°:

Π’ Π΄Π°Π½Π½ΠΎΠΉ ΡΡ‚Π°Ρ‚ΡŒΠ΅ ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Ρ‹ 8 Π±Π°Π·ΠΎΠ²Ρ‹Ρ… способов ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡ€ΠΈΠ³ΠΈΠ½Π°Π»ΡŒΠ½Ρ‹ΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ ΠΎΠ±Ρ‹Π³Ρ€Π°Ρ‚ΡŒ динамичСскиС hover эффСкт ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ: Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ, создания ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΠ³ΠΎ Ρ„ΠΎΠ½Π°, 3D ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Π°Π½ΠΈΠ΅, Π½Π°ΠΊΠ»ΠΎΠ½ ΠΈ Ρ‚.ΠΏ. ВсС ΠΊΠΎΠ΄Ρ‹ достаточно простыС, Π²ΠΎΡ‚ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Π½ΠΈΡ…:

НСобычный Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π½Ρ‹ΠΉ Π² ΠΊΠ½ΠΎΠΏΠΊΠ΅

hover Π² html ΠΊΠΎΠ΄Π΅. . hover Π² html ΠΊΠΎΠ΄Π΅ Ρ„ΠΎΡ‚ΠΎ. hover Π² html ΠΊΠΎΠ΄Π΅-. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° hover Π² html ΠΊΠΎΠ΄Π΅. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° . ΠžΡ‡Π΅Π½ΡŒ часто Π½Π° сайтах Π²Ρ‹ ΠΌΠΎΠ³Π»ΠΈ Π²ΡΡ‚Ρ€Π΅Ρ‡Π°Ρ‚ΡŒ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ оформлСния ссылок ΠΈΠ»ΠΈ ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ. Π Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π·Π°Π΄Π°Ρ‡Ρƒ позволяСт ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹ΠΉ псСвдокласс :hover Π² CSS. БСгодня рассмотрим Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΡ€ΠΈΠ΅ΠΌΡ‹ вСрстки ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰ΠΈΠ΅ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ эту Ρ„ΠΈΡˆΠΊΡƒ, Π° Π½ΠΈΠΆΠ΅ ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΡƒΠ΅ΠΌ список Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ интСрСсных ΠΈΠ· Π½ΠΈΡ… (с ΠΊΡ€Π°Ρ‚ΠΊΠΈΠΌΠΈ описаниями/пояснСниСми). ВсС Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹ Ρ€Π°Π·Π΄Π΅Π»ΠΈΠΌ Π½Π°:

Π—Π΄Π΅ΡΡŒ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ появляСтся яркий Ρ†Π²Π΅Ρ‚Π½ΠΎΠΉ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ слСдуСт Π·Π° ΠΏΠ΅Ρ€Π΅Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΠ΅ΠΌ курсора. Π’ Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ CSS ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½Ρ‹Π΅, Π° Ρ‚Π°ΠΊΠΆΠ΅ скрипт опрСдСлСния ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΈ ΠΌΡ‹ΡˆΠΊΠΈ. Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ выглядит это достаточно ΠΎΡ€ΠΈΠ³ΠΈΠ½Π°Π»ΡŒΠ½ΠΎ. ОписаниС ΠΌΠ΅Ρ‚ΠΎΠ΄Π° ΠΈΡ‰ΠΈΡ‚Π΅ Ρ‚ΡƒΡ‚.

Sullivan Buttons

Ѐишка Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° Ρ€Π°Π·Π½Ρ‹Π΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΊΡ€ΠΎΠΌΠ΅ измСнСния Ρ†Π²Π΅Ρ‚Π° Ρ„ΠΎΠ½Π° запускаСтся Ρ‚Π°ΠΊΠΆΠ΅ нСбольшая анимация с ΠΈΠΊΠΎΠ½ΠΊΠ°ΠΌΠΈ (ΠΏΡ€ΠΈΡ‡Π΅ΠΌ Ρƒ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ своя).

CSS Icons on Hover

ΠŸΠΎΠ΄Π±ΠΎΡ€ΠΊΠ° ΠΈΠ· 5Ρ‚ΠΈ простых Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ² Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ Π·Π°Π΄Π°Ρ‡ΠΈ. Π’ΠΎ всСх случаях задСйствованы Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΡΠ²Π»ΡΡŽΡ‚ΡΡ справа/слСва ΠΎΡ‚ тСкста Π»ΠΈΠ±ΠΎ Π·Π°ΠΌΠ΅Π½ΡΡŽΡ‚ Π΅Π³ΠΎ.

Button Hover Effects

По ΡΡ€Π°Π²Π½Π΅Π½ΠΈΡŽ с ΠΏΡ€ΠΎΡˆΠ»Ρ‹ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠΌ эти 12 Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ срабатывания выглядят ΠΊΡƒΠ΄Π° интСрСснСС: ΠΊΠ°ΠΊ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎ, Ρ‚Π°ΠΊ ΠΈ Π² ΠΏΠ»Π°Π½Π΅ ΠΊΠΎΠ΄Π°. НС обошлось Π±Π΅Π· JS.

Nav Hovers

НСсколько Ρ„ΠΈΡˆΠ΅ΠΊ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±ΠΎΠ»Π΅Π΅ Π½Π΅ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹Π΅ подчСркивания ссылок Π½Π° CSS Π½Π΅ΠΆΠ΅Π»ΠΈ с Π±Π°Π·ΠΎΠ²Ρ‹ΠΌ свойством text-decoration. Π€ΠΎΠ½ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ заполняСтся Ρ€Π°Π·Π½Ρ‹ΠΌΠΈ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹ΠΌΠΈ эффСктами.

Info on Hover

Π€ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΡ… подсказок сСйчас поддСрТиваСтся Π²ΠΎ всСх Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ…, Π½ΠΎ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΡ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π΅Π΅ ΠΏΠΎΠ΄ свои Π½ΡƒΠΆΠ΄Ρ‹. Π’ Ρ‚Π΅ΠΊΡƒΡ‰Π΅ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ срабатываниС псСвдокласса происходит для Ρ‚Π΅Π³Π° dfn, смотрится ΡΡ‚ΠΈΠ»ΡŒΠ½ΠΎ. Код достаточно ΠΊΠΎΠΌΠΏΠ°ΠΊΡ‚Π½Ρ‹ΠΉ HTML + CSS.

Mana Button

Один ΠΈΠ· самых ΠΎΡ€ΠΈΠ³ΠΈΠ½Π°Π»ΡŒΠ½Ρ‹Ρ… Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ² hover эффСкта Π² Π±Π»ΠΎΠΊΠ°Ρ… β€” ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ выполняСтся словно Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ Π΅Π³ΠΎ ΠΆΠΈΠ΄ΠΊΠΎΡΡ‚ΡŒΡŽ. Π’ Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ CSS, HTML ΠΈ SVG. Π’ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΉ Ρ‚Π΅ΠΌΠ°Ρ‚ΠΈΠΊΠ΅ сайтов Π΄Π°Π½Π½Ρ‹ΠΉ сниппСт ΠΎΠ΄Π½ΠΎΠ·Π½Π°Ρ‡Π½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ Π½Π°Ρ…ΠΎΠ΄ΠΊΠΎΠΉ.

Hover эффСкты для ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ

15 Π±Π°Π·ΠΎΠ²Ρ‹Ρ… ΠΏΡ€ΠΈΠ΅ΠΌΠΎΠ²

НС смотря Π½Π° Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ ΡΡ‚Π°Ρ‚ΡŒΡ Π±Ρ‹Π»Π° ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½Π° достаточно Π΄Π°Π²Π½ΠΎ ΠΌΠ΅Ρ‚ΠΎΠ΄Ρ‹ ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚Π½ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ ΠΈ сСйчас. Π—Π΄Π΅ΡΡŒ, Π½Π°Π²Π΅Ρ€Π½ΠΎΠ΅, собраны всС Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹Π΅ Ρ‚ΠΈΠΏΠΎΠ²Ρ‹Π΅ прСобразования для Π³Ρ€Π°Ρ„ΠΈΠΊΠΈ: нСсколько Π²ΠΈΠ΄ΠΎΠ² Π·ΡƒΠΌΠ°, ΠΏΠΎΠ²ΠΎΡ€ΠΎΡ‚Ρ‹, Ρ€Π°Π·ΠΌΡ‹Ρ‚ΠΈΠ΅, Ρ‡/Π±, ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΡΡ‚ΡŒ, Ρ„ΠΈΠ»ΡŒΡ‚Ρ€Ρ‹, сияниС ΠΈ Π΄Ρ€. ΠžΡ‡Π΅Π½ΡŒ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ΠΉ ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π».

ΠšΡ€Π°ΡΠΈΠ²Ρ‹Π΅ hover эффСкты ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ

hover Π² html ΠΊΠΎΠ΄Π΅. . hover Π² html ΠΊΠΎΠ΄Π΅ Ρ„ΠΎΡ‚ΠΎ. hover Π² html ΠΊΠΎΠ΄Π΅-. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° hover Π² html ΠΊΠΎΠ΄Π΅. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° . ΠžΡ‡Π΅Π½ΡŒ часто Π½Π° сайтах Π²Ρ‹ ΠΌΠΎΠ³Π»ΠΈ Π²ΡΡ‚Ρ€Π΅Ρ‡Π°Ρ‚ΡŒ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ оформлСния ссылок ΠΈΠ»ΠΈ ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ. Π Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π·Π°Π΄Π°Ρ‡Ρƒ позволяСт ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹ΠΉ псСвдокласс :hover Π² CSS. БСгодня рассмотрим Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΡ€ΠΈΠ΅ΠΌΡ‹ вСрстки ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰ΠΈΠ΅ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ эту Ρ„ΠΈΡˆΠΊΡƒ, Π° Π½ΠΈΠΆΠ΅ ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΡƒΠ΅ΠΌ список Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ интСрСсных ΠΈΠ· Π½ΠΈΡ… (с ΠΊΡ€Π°Ρ‚ΠΊΠΈΠΌΠΈ описаниями/пояснСниСми). ВсС Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹ Ρ€Π°Π·Π΄Π΅Π»ΠΈΠΌ Π½Π°:

ΠŸΠΎΠ΄Π±ΠΎΡ€ΠΊΠ° ΠΈΠ· 30 приятных ΠΈ ΠΏΠ»Π°Π²Π½Ρ‹Ρ… дСйствий ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ. Π—Π° счСт простых Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹Ρ… манипуляций Π² Π²ΠΈΠ΄Π΅ Π·ΡƒΠΌΠ°, добавлСния Π»ΠΈΠ½ΠΈΠΉ создаСтся Ρ…ΠΎΡ€ΠΎΡˆΠΈΠΉ комплСксноС Π²ΠΏΠ΅Ρ‡Π°Ρ‚Π»Π΅Π½ΠΈΠ΅. ΠœΠ΅ΡΡ‚Π°ΠΌΠΈ увСличиваСтся Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΈ «подтягиваСтся» ΠΊΡ€Π°Ρ‚ΠΊΠΎΠ΅ описаниС. ΠžΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΉ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ для ΠΏΠΎΡ€Ρ‚Ρ„ΠΎΠ»ΠΈΠΎ.

Barberpole Hover Animation

НС слоТная Π½Π° ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ взгляд анимация, которая Π² ΠΈΡ‚ΠΎΠ³Π΅ смотрится ΠΎΡ‡Π΅Π½ΡŒ классно ΠΈ нСстандартно.

CSS hover эффСкты с ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ΠΌ направлСния

hover Π² html ΠΊΠΎΠ΄Π΅. . hover Π² html ΠΊΠΎΠ΄Π΅ Ρ„ΠΎΡ‚ΠΎ. hover Π² html ΠΊΠΎΠ΄Π΅-. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° hover Π² html ΠΊΠΎΠ΄Π΅. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° . ΠžΡ‡Π΅Π½ΡŒ часто Π½Π° сайтах Π²Ρ‹ ΠΌΠΎΠ³Π»ΠΈ Π²ΡΡ‚Ρ€Π΅Ρ‡Π°Ρ‚ΡŒ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ оформлСния ссылок ΠΈΠ»ΠΈ ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ. Π Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π·Π°Π΄Π°Ρ‡Ρƒ позволяСт ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹ΠΉ псСвдокласс :hover Π² CSS. БСгодня рассмотрим Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΡ€ΠΈΠ΅ΠΌΡ‹ вСрстки ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰ΠΈΠ΅ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ эту Ρ„ΠΈΡˆΠΊΡƒ, Π° Π½ΠΈΠΆΠ΅ ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΡƒΠ΅ΠΌ список Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ интСрСсных ΠΈΠ· Π½ΠΈΡ… (с ΠΊΡ€Π°Ρ‚ΠΊΠΈΠΌΠΈ описаниями/пояснСниСми). ВсС Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹ Ρ€Π°Π·Π΄Π΅Π»ΠΈΠΌ Π½Π°:

ΠžΡ‚Π»ΠΈΡ‡Π½Π°Ρ ΠΏΠΎΠ΄Π±ΠΎΡ€ΠΊΠ° сниппСтов ΠΈ ΠΊΠΎΠ΄ΠΎΠ² ΠΏΠΎ Ρ‚Π΅ΠΌΠ΅ находится Π² ΡΡ‚Π°Ρ‚ΡŒΠ΅ с css-tricks.com. ВсС эти ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½ΡΠ΅Ρ‚ Ρ‚ΠΎΡ‚ Ρ„Π°ΠΊΡ‚, Ρ‡Ρ‚ΠΎ Π² процСссС Ρ€Π°Π±ΠΎΡ‚Ρ‹ опрСдСляСтся мСстополоТСниС ΠΈ Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ двиТСния курсора. Π­Ρ‚ΠΎ, Π² свою ΠΎΡ‡Π΅Ρ€Π΅Π΄ΡŒ, позволяСт ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ достаточно ΠΎΡ€ΠΈΠ³ΠΈΠ½Π°Π»ΡŒΠ½Ρ‹Π΅ Ρ€Π΅Π°ΠΊΡ†ΠΈΠΈ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° элСмСнты страницы:

Π’ΠΎ ΠΌΠ½ΠΎΠ³ΠΈΡ… слоТных Ρ€Π΅ΡˆΠ΅Π½ΠΈΡΡ… Javascript ΠΈ jQuery для hover эффСктов ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ Π·Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Ρ€Π°Π·Π½ΠΎΠΎΠ±Ρ€Π°Π·ΠΈΡ‚ΡŒ ΠΈ ΡƒΠ»ΡƒΡ‡ΡˆΠΈΡ‚ΡŒ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚.

Direction Aware Hover Goodness

Direction Aware Tiles using clip-path Pure CSS

ΠžΡΡ‚Π°Π»ΡŒΠ½Ρ‹Π΅ Ρ„ΠΈΡˆΠΊΠΈ ΠΈΡ‰ΠΈΡ‚Π΅ Π² ΠΎΡ€ΠΈΠ³ΠΈΠ½Π°Π»ΡŒΠ½ΠΎΠΉ ΡΡ‚Π°Ρ‚ΡŒΠ΅.

Animatism

hover Π² html ΠΊΠΎΠ΄Π΅. . hover Π² html ΠΊΠΎΠ΄Π΅ Ρ„ΠΎΡ‚ΠΎ. hover Π² html ΠΊΠΎΠ΄Π΅-. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° hover Π² html ΠΊΠΎΠ΄Π΅. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° . ΠžΡ‡Π΅Π½ΡŒ часто Π½Π° сайтах Π²Ρ‹ ΠΌΠΎΠ³Π»ΠΈ Π²ΡΡ‚Ρ€Π΅Ρ‡Π°Ρ‚ΡŒ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ оформлСния ссылок ΠΈΠ»ΠΈ ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ. Π Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π·Π°Π΄Π°Ρ‡Ρƒ позволяСт ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹ΠΉ псСвдокласс :hover Π² CSS. БСгодня рассмотрим Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΡ€ΠΈΠ΅ΠΌΡ‹ вСрстки ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰ΠΈΠ΅ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ эту Ρ„ΠΈΡˆΠΊΡƒ, Π° Π½ΠΈΠΆΠ΅ ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΡƒΠ΅ΠΌ список Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ интСрСсных ΠΈΠ· Π½ΠΈΡ… (с ΠΊΡ€Π°Ρ‚ΠΊΠΈΠΌΠΈ описаниями/пояснСниСми). ВсС Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹ Ρ€Π°Π·Π΄Π΅Π»ΠΈΠΌ Π½Π°:

Π’ этой Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ Π±ΠΎΠ»Π΅Π΅ 100 простых способов Β«Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈΒ» ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ ΠΈΠ»ΠΈ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΎΠ² ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ. Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π΄Π°Π½Π½Ρ‹Ρ… Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ смоТСтС Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ€Π°Π·Π½ΠΎΠ΅ появлСниС ΠΊΠ½ΠΎΠΏΠΎΠΊ, Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ², тСкстов, ΡΠΎΡ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Ρ… ΠΈΠΊΠΎΠ½ΠΎΠΊ ΠΈ Ρ‚.ΠΏ. Π•ΡΡ‚ΡŒ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹ с ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ΠΌ отобраТСния ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ, Π½Π°ΠΊΠ»Π°Π΄ΠΊΠ°ΠΌΠΈ ΠΏΠΎΠ»ΡƒΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΠ³ΠΎ Ρ„ΠΎΠ½Π°.

Caption Hover Effects

hover Π² html ΠΊΠΎΠ΄Π΅. . hover Π² html ΠΊΠΎΠ΄Π΅ Ρ„ΠΎΡ‚ΠΎ. hover Π² html ΠΊΠΎΠ΄Π΅-. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° hover Π² html ΠΊΠΎΠ΄Π΅. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° . ΠžΡ‡Π΅Π½ΡŒ часто Π½Π° сайтах Π²Ρ‹ ΠΌΠΎΠ³Π»ΠΈ Π²ΡΡ‚Ρ€Π΅Ρ‡Π°Ρ‚ΡŒ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ оформлСния ссылок ΠΈΠ»ΠΈ ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ. Π Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π·Π°Π΄Π°Ρ‡Ρƒ позволяСт ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹ΠΉ псСвдокласс :hover Π² CSS. БСгодня рассмотрим Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΡ€ΠΈΠ΅ΠΌΡ‹ вСрстки ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰ΠΈΠ΅ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ эту Ρ„ΠΈΡˆΠΊΡƒ, Π° Π½ΠΈΠΆΠ΅ ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΡƒΠ΅ΠΌ список Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ интСрСсных ΠΈΠ· Π½ΠΈΡ… (с ΠΊΡ€Π°Ρ‚ΠΊΠΈΠΌΠΈ описаниями/пояснСниСми). ВсС Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹ Ρ€Π°Π·Π΄Π΅Π»ΠΈΠΌ Π½Π°:

По ссылкС находится 7 CSS3 hover эффСктов Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² β€” ΠΊΠΎΠ³Π΄Π° ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ ΡƒΠ²ΠΈΠ΄ΠΈΡ‚ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΎΠ½Π½Ρ‹ΠΉ Π±Π»ΠΎΠΊ с Ρ‚Π°ΠΉΡ‚Π»ΠΎΠΌ, ΠΊΡ€Π°Ρ‚ΠΊΠΈΠΌ описаниСм ΠΈ ссылкой для ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π°. НСльзя ΡΠΊΠ°Π·Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ ΠΎΡ‡Π΅Π½ΡŒ ΠΎΡ€ΠΈΠ³ΠΈΠ½Π°Π»ΡŒΠ½Ρ‹Π΅, Π½ΠΎ ΠΎΠ½ΠΈ ΠΎΠ΄Π½ΠΎΠ·Π½Π°Ρ‡Π½ΠΎ ΠΏΠΎΠΌΠΎΠ³ΡƒΡ‚ Ρ€Π°Π·Π½ΠΎΠΎΠ±Ρ€Π°Π·ΠΈΡ‚ΡŒ статичный ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π½Ρ‹ΠΉ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚.

CSS Hover Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ

Hover.css

hover Π² html ΠΊΠΎΠ΄Π΅. . hover Π² html ΠΊΠΎΠ΄Π΅ Ρ„ΠΎΡ‚ΠΎ. hover Π² html ΠΊΠΎΠ΄Π΅-. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° hover Π² html ΠΊΠΎΠ΄Π΅. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° . ΠžΡ‡Π΅Π½ΡŒ часто Π½Π° сайтах Π²Ρ‹ ΠΌΠΎΠ³Π»ΠΈ Π²ΡΡ‚Ρ€Π΅Ρ‡Π°Ρ‚ΡŒ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ оформлСния ссылок ΠΈΠ»ΠΈ ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ. Π Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π·Π°Π΄Π°Ρ‡Ρƒ позволяСт ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹ΠΉ псСвдокласс :hover Π² CSS. БСгодня рассмотрим Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΡ€ΠΈΠ΅ΠΌΡ‹ вСрстки ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰ΠΈΠ΅ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ эту Ρ„ΠΈΡˆΠΊΡƒ, Π° Π½ΠΈΠΆΠ΅ ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΡƒΠ΅ΠΌ список Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ интСрСсных ΠΈΠ· Π½ΠΈΡ… (с ΠΊΡ€Π°Ρ‚ΠΊΠΈΠΌΠΈ описаниями/пояснСниСми). ВсС Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹ Ρ€Π°Π·Π΄Π΅Π»ΠΈΠΌ Π½Π°:

ΠŸΡ€ΠΎΠ΅ΠΊΡ‚ ΠΏΠΎΠ΄ нСзамысловатым Π½Π°Π·Π²Π°Π½ΠΈΠ΅ΠΌ Hover.css содСрТит ΠΊΠΎΠ»Π»Π΅ΠΊΡ†ΠΈΡŽ CSS3 эффСктов для ссылок, ΠΊΠ½ΠΎΠΏΠΎΠΊ, Π±Π»ΠΎΠΊΠΎΠ² ΠΈ Ρ‚.ΠΏ. ΠœΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π³ΠΎΡ‚ΠΎΠ²Ρ‹ΠΉ ΠΊΠΎΠ΄ ΠΈ/ΠΈΠ»ΠΈ Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ Π² Π½Π΅Π³ΠΎ свои ΠΌΠΎΠ΄ΠΈΡ„ΠΈΠΊΠ°Ρ†ΠΈΠΈ. Π—Π΄Π΅ΡΡŒ ΠΌΠ½ΠΎΠ³ΠΎ интСрСсного: 2D/3D прСобразования, Ρ€Π°Π±ΠΎΡ‚Π° с Ρ„ΠΎΠ½ΠΎΠΌ ΠΈ Ρ€Π°ΠΌΠΊΠ°ΠΌΠΈ, Ρ‚Π΅Π½ΠΈ, ΠΈΠΊΠΎΠ½ΠΊΠΈ. РСшСниС доступно Π² CSS, LESS ΠΈ Sass Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π°Ρ….

Imagehover.css

hover Π² html ΠΊΠΎΠ΄Π΅. . hover Π² html ΠΊΠΎΠ΄Π΅ Ρ„ΠΎΡ‚ΠΎ. hover Π² html ΠΊΠΎΠ΄Π΅-. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° hover Π² html ΠΊΠΎΠ΄Π΅. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° . ΠžΡ‡Π΅Π½ΡŒ часто Π½Π° сайтах Π²Ρ‹ ΠΌΠΎΠ³Π»ΠΈ Π²ΡΡ‚Ρ€Π΅Ρ‡Π°Ρ‚ΡŒ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ оформлСния ссылок ΠΈΠ»ΠΈ ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ. Π Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π·Π°Π΄Π°Ρ‡Ρƒ позволяСт ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹ΠΉ псСвдокласс :hover Π² CSS. БСгодня рассмотрим Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΡ€ΠΈΠ΅ΠΌΡ‹ вСрстки ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰ΠΈΠ΅ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ эту Ρ„ΠΈΡˆΠΊΡƒ, Π° Π½ΠΈΠΆΠ΅ ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΡƒΠ΅ΠΌ список Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ интСрСсных ΠΈΠ· Π½ΠΈΡ… (с ΠΊΡ€Π°Ρ‚ΠΊΠΈΠΌΠΈ описаниями/пояснСниСми). ВсС Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹ Ρ€Π°Π·Π΄Π΅Π»ΠΈΠΌ Π½Π°:

Π•Ρ‰Π΅ ΠΎΠ΄Π½Π° Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° Π·Π°Π΄Π°ΡŽΡ‰Π°Ρ hover эффСкты ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ°ΠΌ β€” Π² бСсплатной вСрсии Π½Π°ΠΉΠ΄Π΅Ρ‚Π΅ 44 Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Π° ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Π°Π½ΠΈΠΉ (ΠΏΡ€Π΅ΠΌΠΈΠ°Π»ΡŒΠ½Ρ‹ΠΉ Π½Π°Π±ΠΎΡ€ содСрТит ΠΈΡ… Π² 5 Ρ€Π°Π· большС). Π’ΡƒΡ‚ Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ΡΡ LESS ΠΈ SCSS, вСсит это Π΄Π΅Π»ΠΎ лишь 19ΠΊΠ±. На сайтС имССтся страница с дСмонстрациСй всСх Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‰ΠΈΡ… ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ². ΠŸΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ΡΡ ΠΌΠ½ΠΎΠ³ΠΎ ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹Ρ… Ρ„ΠΈΡˆΠ΅ΠΊ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½Π΅ Π²ΡΡ‚Ρ€Π΅Ρ‡Π°Π»ΠΈΡΡŒ Π²Ρ‹ΡˆΠ΅.

iHover

hover Π² html ΠΊΠΎΠ΄Π΅. . hover Π² html ΠΊΠΎΠ΄Π΅ Ρ„ΠΎΡ‚ΠΎ. hover Π² html ΠΊΠΎΠ΄Π΅-. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° hover Π² html ΠΊΠΎΠ΄Π΅. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° . ΠžΡ‡Π΅Π½ΡŒ часто Π½Π° сайтах Π²Ρ‹ ΠΌΠΎΠ³Π»ΠΈ Π²ΡΡ‚Ρ€Π΅Ρ‡Π°Ρ‚ΡŒ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ оформлСния ссылок ΠΈΠ»ΠΈ ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ. Π Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π·Π°Π΄Π°Ρ‡Ρƒ позволяСт ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹ΠΉ псСвдокласс :hover Π² CSS. БСгодня рассмотрим Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΡ€ΠΈΠ΅ΠΌΡ‹ вСрстки ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰ΠΈΠ΅ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ эту Ρ„ΠΈΡˆΠΊΡƒ, Π° Π½ΠΈΠΆΠ΅ ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΡƒΠ΅ΠΌ список Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ интСрСсных ΠΈΠ· Π½ΠΈΡ… (с ΠΊΡ€Π°Ρ‚ΠΊΠΈΠΌΠΈ описаниями/пояснСниСми). ВсС Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹ Ρ€Π°Π·Π΄Π΅Π»ΠΈΠΌ Π½Π°:

Π’ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π΅ iHover Π±ΠΎΠ»Π΅Π΅ 30 Ρ€Π°Π·Π½Ρ‹Ρ… ΠΏΡ€ΠΈΠ΅ΠΌΠΎΠ² для ΠΊΡ€ΡƒΠ³Π»Ρ‹Ρ… ΠΈ ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚Π½Ρ‹Ρ… ΠΏΠΎ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρƒ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΎΠ². ВсС ΠΎΠ½ΠΈ достаточно ΠΎΡ€ΠΈΠ³ΠΈΠ½Π°Π»ΡŒΠ½Ρ‹Π΅, простых «одноэлСмСнтных» дСйствий Π² Π²ΠΈΠ΄Π΅ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎΠ³ΠΎ Π·ΡƒΠΌΠ°/вылСтания практичСски Π½Π΅Ρ‚. Π Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½Π° Π·Π°Π΄Π°Ρ‡Π° Π½Π° чистом CSS3 + HTML (плюс Scss Ρ„Π°ΠΉΠ»Ρ‹ Π²ΠΊΠ»ΡŽΡ‡Π΅Π½Ρ‹). ΠžΡ‚Π»ΠΈΡ‡Π½Π°Ρ ΡΠΎΠ²ΠΌΠ΅ΡΡ‚ΠΈΠΌΠΎΡΡ‚ΡŒ с Bootstrap 3, Π΅ΡΡ‚ΡŒ докумСнтация.

Π˜Ρ‚ΠΎΠ³ΠΎ. НадССмся эти css hover эффСкты ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ, Π±Π»ΠΎΠΊΠΈ, ссылки ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ элСмСнты страницы ΠΏΠΎΠΌΠΎΠ³Π»ΠΈ Π²Π°ΠΌ Ρ€Π°Π·ΠΎΠ±Ρ€Π°Ρ‚ΡŒΡΡ Π² Π΄Π°Π½Π½ΠΎΠΉ Ρ‚Π΅ΠΌΠ΅. Π‘Π°ΠΌΡ‹Π΅ ΡƒΠ΄Π°Ρ‡Π½Ρ‹Π΅, Π½Π° ваш, взгляд Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²Π½Π΅Π΄Ρ€ΠΈΡ‚ΡŒ Π² своих сайтах β€” Π±ΡƒΠ΄ΡŒ Ρ‚ΠΎ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎΠ»Π½ΠΎΡ†Π΅Π½Π½ΠΎΠΉ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ ΠΈΠ»ΠΈ просто интСграция нСбольшого Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Π° ΠΊΠΎΠ΄Π°.

Если Π·Π½Π°Π΅Ρ‚Π΅ Π΅Ρ‰Π΅ ΠΊΠ°ΠΊΠΈΠ΅-Ρ‚ΠΎ интСрСсныС Ρ„ΠΈΡˆΠΊΠΈ ΠΈ сниппСты, присылайтС URL’ы Π½Π° Π½ΠΈΡ… Π² коммСнтариях. И ΠΌΡ‹ Π² Π±ΡƒΠ΄ΡƒΡ‰Π΅ΠΌ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΠΌ ΡΡ‚Π°Ρ‚ΡŒΡŽ.

hover Π² html ΠΊΠΎΠ΄Π΅. . hover Π² html ΠΊΠΎΠ΄Π΅ Ρ„ΠΎΡ‚ΠΎ. hover Π² html ΠΊΠΎΠ΄Π΅-. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° hover Π² html ΠΊΠΎΠ΄Π΅. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° . ΠžΡ‡Π΅Π½ΡŒ часто Π½Π° сайтах Π²Ρ‹ ΠΌΠΎΠ³Π»ΠΈ Π²ΡΡ‚Ρ€Π΅Ρ‡Π°Ρ‚ΡŒ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ оформлСния ссылок ΠΈΠ»ΠΈ ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ. Π Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π·Π°Π΄Π°Ρ‡Ρƒ позволяСт ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹ΠΉ псСвдокласс :hover Π² CSS. БСгодня рассмотрим Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΡ€ΠΈΠ΅ΠΌΡ‹ вСрстки ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰ΠΈΠ΅ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ эту Ρ„ΠΈΡˆΠΊΡƒ, Π° Π½ΠΈΠΆΠ΅ ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΡƒΠ΅ΠΌ список Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ интСрСсных ΠΈΠ· Π½ΠΈΡ… (с ΠΊΡ€Π°Ρ‚ΠΊΠΈΠΌΠΈ описаниями/пояснСниСми). ВсС Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹ Ρ€Π°Π·Π΄Π΅Π»ΠΈΠΌ Π½Π°:

hover Π² html ΠΊΠΎΠ΄Π΅. . hover Π² html ΠΊΠΎΠ΄Π΅ Ρ„ΠΎΡ‚ΠΎ. hover Π² html ΠΊΠΎΠ΄Π΅-. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° hover Π² html ΠΊΠΎΠ΄Π΅. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° . ΠžΡ‡Π΅Π½ΡŒ часто Π½Π° сайтах Π²Ρ‹ ΠΌΠΎΠ³Π»ΠΈ Π²ΡΡ‚Ρ€Π΅Ρ‡Π°Ρ‚ΡŒ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ оформлСния ссылок ΠΈΠ»ΠΈ ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ. Π Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π·Π°Π΄Π°Ρ‡Ρƒ позволяСт ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹ΠΉ псСвдокласс :hover Π² CSS. БСгодня рассмотрим Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΡ€ΠΈΠ΅ΠΌΡ‹ вСрстки ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰ΠΈΠ΅ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ эту Ρ„ΠΈΡˆΠΊΡƒ, Π° Π½ΠΈΠΆΠ΅ ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΡƒΠ΅ΠΌ список Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ интСрСсных ΠΈΠ· Π½ΠΈΡ… (с ΠΊΡ€Π°Ρ‚ΠΊΠΈΠΌΠΈ описаниями/пояснСниСми). ВсС Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹ Ρ€Π°Π·Π΄Π΅Π»ΠΈΠΌ Π½Π°:

hover Π² html ΠΊΠΎΠ΄Π΅. . hover Π² html ΠΊΠΎΠ΄Π΅ Ρ„ΠΎΡ‚ΠΎ. hover Π² html ΠΊΠΎΠ΄Π΅-. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° hover Π² html ΠΊΠΎΠ΄Π΅. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° . ΠžΡ‡Π΅Π½ΡŒ часто Π½Π° сайтах Π²Ρ‹ ΠΌΠΎΠ³Π»ΠΈ Π²ΡΡ‚Ρ€Π΅Ρ‡Π°Ρ‚ΡŒ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ оформлСния ссылок ΠΈΠ»ΠΈ ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ. Π Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π·Π°Π΄Π°Ρ‡Ρƒ позволяСт ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹ΠΉ псСвдокласс :hover Π² CSS. БСгодня рассмотрим Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΡ€ΠΈΠ΅ΠΌΡ‹ вСрстки ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰ΠΈΠ΅ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ эту Ρ„ΠΈΡˆΠΊΡƒ, Π° Π½ΠΈΠΆΠ΅ ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΡƒΠ΅ΠΌ список Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ интСрСсных ΠΈΠ· Π½ΠΈΡ… (с ΠΊΡ€Π°Ρ‚ΠΊΠΈΠΌΠΈ описаниями/пояснСниСми). ВсС Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹ Ρ€Π°Π·Π΄Π΅Π»ΠΈΠΌ Π½Π°:

Π‘ΠΎ слоТными ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°ΠΌΠΈ, ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎ, ΠΌΠ°Π»ΠΎ Ρ‡Ρ‚ΠΎ понятно, Π½ΠΎ Π²ΠΎΡ‚ ΠΏΡ€ΠΎ Ρ…ΡƒΠ²Π΅Ρ€ эффСкт Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ Π±ΡƒΠ΄Ρƒ Ρ‚ΠΎΡ‡Π½ΠΎ Π·Π½Π°Ρ‚ΡŒ.

ΠœΠ°Ρ€ΠΈΠ½Π°, Π½ΡƒΠΆΠ½ΠΎ Π½Π°Ρ‡ΠΈΠ½Π°Ρ‚ΡŒ с ΠΌΠ°Π»ΠΎΠ³ΠΎ:)

ПолСзноС Ρ‡Ρ‚ΠΈΠ²ΠΎ для Π½ΠΎΠ²ΠΈΡ‡ΠΊΠΎΠ² ΠΎΠ΄Π½ΠΎΠ·Π½Π°Ρ‡Π½ΠΎ!

НСкоторыС ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹, ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎ, Π½Π΅Ρ€Π΅Π°Π»ΡŒΠ½ΠΎ ΠΊΡ€ΡƒΡ‚Ρ‹Π΅.. вряд Π»ΠΈ ΠΊΠΎΠ³Π΄Π°-Ρ‚ΠΎ смогу Ρ‚Π°ΠΊΠΎΠ΅ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΠΈΡ‚ΡŒ, хотя я Ρ‚Π°ΠΊ вСбмастСр-Π»ΡŽΠ±ΠΈΡ‚Π΅Π»ΡŒ скорСС

ΠœΠ°Ρ€Π°Ρ‚, люди, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π΄Π΅Π»Π°ΡŽΡ‚ Ρ‚Π°ΠΊΠΈΠ΅ Β«Π·Π°Π³ΠΎΡ‚ΠΎΠ²ΠΊΠΈΒ», Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ Π²ΠΎ Ρ„Ρ€ΠΎΠ½Ρ‚Π΅Π½Π΄Π΅ Π½Π΅ ΠΎΠ΄ΠΈΠ½ Π³ΠΎΠ΄, Ρ‚Π°ΠΊ Ρ‡Ρ‚ΠΎ это Π½ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½ΠΎ (ΠΊΠ°ΠΊ для ΠΏΡ€ΠΎΡ„ΠΈ).

МнС ΠΊΠ°ΠΊ Π½ΠΎΠ²ΠΈΡ‡ΠΊΡƒ ΠΎΡ‡Π΅Π½ΡŒ нуТная Ρ‚ΡƒΡ‚ информация! Π‘Π»Π°Π³ΠΎΠ΄Π°Ρ€ΡŽ.

Бпасибо Π·Π° Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ, Π° Ρ‚ΠΎ своСй Ρ„Π°Π½Ρ‚Π°Π·ΠΈΠΈ ΡƒΠΆΠ΅ Π½Π΅ Ρ…Π²Π°Ρ‚Π°Π΅Ρ‚.

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ

CSS3 hover effects. ΠŸΠΎΡˆΠ°Π³ΠΎΠ²Ρ‹ΠΉ Ρ‚ΡƒΡ‚ΠΎΡ€ΠΈΠ°Π»

ΠŸΡ€ΠΈ создании этого ΠΌΠ°Π½ΡƒΠ°Π»Π°, ΠΌΠΎΠ΅ΠΉ Ρ†Π΅Π»ΡŒΡŽ Π±Ρ‹Π»ΠΎ Π²Π·ΡΡ‚ΡŒ Ρ‚Ρ€ΠΈ дСсятка Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… эффСктов, Ρ‡Π°ΡΡ‚ΡŒΡŽ β€” довольно распространСнных, Ρ‡Π°ΡΡ‚ΡŒΡŽ β€” ΠΏΡ€ΠΈΠ΄ΡƒΠΌΠ°Π½Π½Ρ‹Ρ… ΠΌΠ½ΠΎΠΉ, Ρ€Π°Π·ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ ΠΈΡ… ΠΎΡ‚ простых ΠΊ Π±ΠΎΠ»Π΅Π΅ слоТным, ΠΈ Π½Π° ΠΈΡ… ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ Π½ΠΎΠ²ΠΈΡ‡ΠΊΠ°ΠΌ, Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ имСвшим Π΄Π΅Π»ΠΎ с CSS3 возмоТностями, ΠΊΠ°ΠΊ эти возмоТности Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ ΠΈ ΠΊΠ°ΠΊ ΠΈΡ… ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π½Π° ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠ΅. ИмСнно ΠΏΠΎ этой ΠΏΡ€ΠΈΡ‡ΠΈΠ½Π΅ ΡΡ‚Π°Ρ‚ΡŒΡ Π²Ρ‹ΡˆΠ»Π° подробная, пошаговая, ΠΌΠ½Π΅ Π±Ρ‹Π»ΠΎ Π²Π°ΠΆΠ½ΠΎ ΠΎΠΏΠΈΡΠ°Ρ‚ΡŒ ΠΈ Ρ€Π°Π·ΠΎΠ±Ρ€Π°Ρ‚ΡŒ ΠΊΠ°ΠΆΠ΄ΡƒΡŽ Π΄Π΅Ρ‚Π°Π»ΡŒ.

Π”Π΅ΠΌΠΎ ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»Ρ‹ Π»Π΅ΠΆΠ°Ρ‚ здСсь.

ΠŸΡ€Π΅Π΄ΡƒΠΏΡ€Π΅ΠΆΠ΄Π΅Π½ΠΈΠ΅: эффСкты Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π² соврСмСнных Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ…, ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‰ΠΈΡ… возмоТности CSS3.

ΠŸΠΎΠ΄Π³ΠΎΡ‚ΠΎΠ²ΠΊΠ° ΠΊ Ρ€Π°Π±ΠΎΡ‚Π΅.

Π˜Ρ‚Π°ΠΊ, для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ наши эффСкты Π½Π°ΠΌ понадобится Π²ΠΎΡ‚ такая простая дСфолтная html-структура:

Π”Π΅Ρ„ΠΎΠ»Ρ‚Π½Ρ‹Π΅ css-стили для нашСй структуры (ΠΎΠΏΡΡ‚ΡŒ ΠΆΠ΅, Π² зависимости ΠΎΡ‚ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊΠΎΠΉ ΠΌΡ‹ Π±ΡƒΠ΄Π΅ΠΌ Ρ€Π°ΡΡΠΌΠ°Ρ‚Ρ€ΠΈΠ²Π°Ρ‚ΡŒ эффСкт, ΠΎΠ½ΠΈ Π±ΡƒΠ΄ΡƒΡ‚ Ρ€Π°Π·Π»ΠΈΡ‡Π°Ρ‚ΡŒΡΡ):

ΠžΡΠ½ΠΎΠ²Ρ‹ свойства transition. Π­Ρ„Ρ„Π΅ΠΊΡ‚Ρ‹ #1.1-1.3

Π§Ρ‚ΠΎΠ±Ρ‹ этого Π΄ΠΎΠ±ΠΈΡ‚ΡŒΡΡ, Π½ΡƒΠΆΠ½ΠΎ, Π² ΠΏΠ΅Ρ€Π²ΡƒΡŽ ΠΎΡ‡Π΅Ρ€Π΅Π΄ΡŒ, ΠΏΠ΅Ρ€Π΅ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ этот ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ Π²Ρ‹ΡˆΠ΅, Π·Π° ΠΏΡ€Π΅Π΄Π΅Π»Ρ‹ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° с эффСктом. Для этого ΠΌΡ‹ ΠΈΠ·ΠΌΠ΅Π½ΠΈΠΌ Π΅ΠΌΡƒ свойство top, ΠΈ стили для Π±Π»ΠΎΠΊΠ° Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ Π±ΡƒΠ΄ΡƒΡ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ Ρ‚Π°ΠΊ:

Рассмотрим Π΅Π³ΠΎ ΠΏΠΎΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅. Π’ΠΎΡ‚ Ρ‚Π°ΠΊ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ свойство transition для эффСкта #1.1:

transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s;

ΠŸΠ΅Ρ€Π²ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ устанавливаСт имя стилСвого свойства, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚ΡΠ»Π΅ΠΆΠΈΠ²Π°Ρ‚ΡŒΡΡ для измСнСния. Π’ Π΄Π°Π½Π½ΠΎΠΌ случаС ΠΌΡ‹ выставили all β€” ΠΎΡ‚ΡΠ»Π΅ΠΆΠΈΠ²Π°Ρ‚ΡŒΡΡ Π±ΡƒΠ΄ΡƒΡ‚ всС свойства. Π’Ρ‚ΠΎΡ€ΠΎΠ΅ β€” ΠΎΡ‚Π²Π΅Ρ‡Π°Π΅Ρ‚ Π·Π° врСмя, Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎΠ΅ для Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ. Π’Ρ€Π΅Ρ‚ΡŒΠ΅ β€” Π·Π° Ρ‚ΠΎ, ΠΊΠ°ΠΊ Π² Ρ‚Π΅Ρ‡Π΅Π½ΠΈΠ΅ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ, Π·Π°Π΄Π°Π½Π½ΠΎΠ³ΠΎ Π²Ρ‚ΠΎΡ€Ρ‹ΠΌ свойством, Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°ΡΠΏΡ€Π΅Π΄Π΅Π»ΡΡ‚ΡŒΡΡ ΡΠΊΠΎΡ€ΠΎΡΡ‚ΡŒ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π°: Π³Π΄Π΅ замСдлится, Π³Π΄Π΅ ускорится. Π’Π°ΠΊ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π² Π΄Π°Π½Π½ΠΎΠΌ случаС сначала анимация Π±ΡƒΠ΄Π΅Ρ‚ быстрСС, ΠΊ сСрСдинС замСдлится ΠΈ Π±Π»ΠΈΠΆΠ΅ ΠΊ ΠΊΠΎΠ½Ρ†Ρƒ Π²Ρ‹ΠΉΠ΄Π΅Ρ‚ Π½Π° Ρ€Π°Π²Π½ΠΎΠΌΠ΅Ρ€Π½ΡƒΡŽ ΡΠΊΠΎΡ€ΠΎΡΡ‚ΡŒ. Π§Π΅Ρ‚Π²Π΅Ρ€Ρ‚ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ опрСдСляСт, начнСтся анимация с Π·Π°Π΄Π΅Ρ€ΠΆΠΊΠΎΠΉ ΠΈΠ»ΠΈ Π½Π΅Ρ‚. Если Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Ρ€Π°Π²Π½ΠΎ 0s β€” Π·Π°Π΄Π΅Ρ€ΠΆΠΊΠΈ Π½Π΅Ρ‚.

ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, для этого свойства Π½Π°ΠΌ Π½Π°Π΄ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π²Π΅Π½Π΄ΠΎΡ€Π½Ρ‹Π΅ прСфиксы. Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹Π΅ для ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚Π½ΠΎΠ³ΠΎ отобраТСния Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ…. Как это выглядит:

-webkit-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; β€” для Chrome ΠΈ Safari
-o-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; β€” для Opera
-ms-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; β€” для IE
-moz-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; β€” для Firefox

Π’ ΡΡ‚Π°Ρ‚ΡŒΠ΅, для краткости, я Π±ΡƒΠ΄Ρƒ ΠΎΠΏΡƒΡΠΊΠ°Ρ‚ΡŒ прСфиксы, Π½ΠΎ Π½Π΅ Π·Π°Π±Ρ‹Π²Π°ΠΉΡ‚Π΅ Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ ΠΈΡ… для Ρ‚Π°ΠΊΠΈΡ… свойств, ΠΊΠ°ΠΊ transition, transform ΠΈ transform-origin. Π’ ΠΊΠΎΠ΄Π΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² ΠΏΠΎΠ΄ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ CSS (ΠΈΠ»ΠΈ Π² самих Ρ„Π°ΠΉΠ»Π°Ρ…) прСфиксы Ρ‚ΠΎΠΆΠ΅ Π΅ΡΡ‚ΡŒ.

Π˜Ρ‚Π°ΠΊ, ΠΌΡ‹ Π΄ΠΎΠ±Π°Π²ΠΈΠ»ΠΈ ΠΏΠΎΡ‡Ρ‚ΠΈ всС, Ρ‡Ρ‚ΠΎ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ для создания эффСкта: Π½Π°Ρ‡Π°Π»ΡŒΠ½Ρ‹Π΅ условия ΠΈ условия ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π° Π² ΠΊΠΎΠ½Π΅Ρ‡Π½ΡƒΡŽ Ρ‚ΠΎΡ‡ΠΊΡƒ, ΠΎΡΡ‚Π°Π»ΠΎΡΡŒ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ стили для самой ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎΠΉ Ρ‚ΠΎΡ‡ΠΊΠΈ.

ИзмСняСм ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΡΡ‚ΡŒ. ДобавляСм Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΠ΅ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Ρ… элСмСнтов. Π­Ρ„Ρ„Π΅ΠΊΡ‚Ρ‹ #2.1-#2.3

Π’ эффСктС #2.1 элСмСнты Π²Ρ‹Π΄Π²ΠΈΠ³Π°ΡŽΡ‚ΡΡ ΠΈΠ· Ρ†Π΅Π½Ρ‚Ρ€Π° ΠΊ краям. Π’ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡΡ Π±Π°Π·ΠΎΠ²ΠΎΠΉ html-структурой, Π² ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ, для создания этого эффСкта, Π½Π΅ понадобится Π²Π½ΠΎΡΠΈΡ‚ΡŒ Π½ΠΈΠΊΠ°ΠΊΠΈΡ… ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ.

Π’Π΅ΠΏΠ΅Ρ€ΡŒ, Ссли ΠΌΡ‹ Π·Π°Π΄Π°Π΄ΠΈΠΌ ΠΊΠΎΠ½Π΅Ρ‡Π½ΡƒΡŽ Ρ‚ΠΎΡ‡ΠΊΡƒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ:

ΠΌΡ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠΌ Π½Π΅ самый красивый Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚. ΠŸΠΎΠ»ΡƒΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½Π°Ρ ΠΏΠΎΠ΄Π»ΠΎΠΆΠΊΠ° Π½ΠΈΠΊΡƒΠ΄Π° Π½Π΅ дСлась, элСмСнты ΠΊΡƒΡ‡ΠΊΡƒΡŽΡ‚ΡΡ Π² Ρ†Π΅Π½Ρ‚Ρ€Π΅ ΠΈ нСэстСтично ΠΎΡ‚Ρ‚ΡƒΠ΄Π° Ρ€Π°Π·ΡŠΠ΅Π·ΠΆΠ°ΡŽΡ‚ΡΡ. ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ, с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ transition, ΠΌΠΎΠΆΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒ Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ элСмСнта, Π½ΠΎ ΠΈ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π΅Π³ΠΎ ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΡΡ‚ΡŒ, благодаря Π΅ΠΉ ΠΌΡ‹ смоТСм ΡΠΊΡ€Ρ‹Ρ‚ΡŒ ΠΈ ΠΏΠΎΠ΄Π»ΠΎΠΆΠΊΡƒ, ΠΈ элСмСнты Π² Ρ†Π΅Π½Ρ‚Ρ€Π΅ Π΄ΠΎ ΠΌΠΎΠΌΠ΅Π½Ρ‚Π°, ΠΏΠΎΠΊΠ° Π½Π΅ понадобится ΠΈΡ… ΠΏΠΎΠ΄Π²ΠΈΠ½ΡƒΡ‚ΡŒ.

Π­Ρ„Ρ„Π΅ΠΊΡ‚Ρ‹ #2.2 ΠΈ #2.3 построСны Π°Π½Π°Π»ΠΎΠ³ΠΈΡ‡Π½Ρ‹ΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Ρ‚ΠΎΠ»ΡŒΠΊΠΎ для эффСкта #2.2 Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΈ ΠΊΠ½ΠΎΠΏΠΊΡƒ ΠΌΡ‹ смСщаСм свСрху Π²Π½ΠΈΠ· ΠΈ снизу Π²Π²Π΅Ρ€Ρ… соотвСтствСнно, Π° для эффСкта #2.3 справа Π½Π°Π»Π΅Π²ΠΎ ΠΈ слСва Π½Π°ΠΏΡ€Π°Π²ΠΎ соотвСтствСнно.

ИзмСнСния, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ внСсти Π² ΠΊΠΎΠ΄ эффСкта #2.1, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ эффСкт #2.2:

Π’ ΠΎΡΡ‚Π°Π»ΡŒΠ½ΠΎΠΌ, всС остаСтся Π°Π½Π°Π»ΠΎΠ³ΠΈΡ‡Π½Ρ‹ΠΌ.

Ну Π° Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ· эффСкта #2.1 ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ эффСкт #2.3, ΠΈΠ·ΠΌΠ΅Π½ΠΈΠΌ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π΅:

ΠŸΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΈΠΌ ΠΎ transform ΠΈ ΠΎΠ± ΡƒΠ²Π΅Π»ΠΈΡ‡Π΅Π½ΠΈΠΈ/ΡƒΠΌΠ΅Π½ΡŒΡˆΠ΅Π½ΠΈΠΈ элСмСнтов. Π­Ρ„Ρ„Π΅ΠΊΡ‚Ρ‹ #3.1-#3.3

Π­Ρ„Ρ„Π΅ΠΊΡ‚ #3.1 строится Π½Π° Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ, ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ, ΠΏΠΎΡΠ²Π»ΡΡŽΡ‚ΡΡ ΠΎΡ‡Π΅Π½ΡŒ ΡƒΠ²Π΅Π»ΠΈΡ‡Π΅Π½Π½Ρ‹Π΅ элСмСнты

html-структуру оставляСм Π±Π°Π·ΠΎΠ²ΠΎΠΉ. Π§Ρ‚ΠΎ касаСтся ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ Π² Ρ‚Π°Π±Π»ΠΈΡ†Π΅ стилСй, ΡƒΠΌΠ΅Π½ΡŒΡˆΠ°ΡŽΡ‰ΠΈΠΌΡΡ элСмСнтам ΠΌΡ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ свойство transform. Transform позволяСт Ρ‚Ρ€Π°Π½ΡΡ„ΠΎΡ€ΠΌΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ элСмСнты: Π²Ρ€Π°Ρ‰Π°Ρ‚ΡŒ, ΠΌΠ΅Π½ΡΡ‚ΡŒ ΠΈΠΌ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹, Π½Π°ΠΊΠ»ΠΎΠ½ΡΡ‚ΡŒ, ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒ, ΠΊΠΎΠΌΠ±ΠΈΠ½ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ нСсколько свойств для создания Π±ΠΎΠ»Π΅Π΅ слоТных эффСктов. Для этих эффСктов ΠΌΡ‹ Ρ€Π°Π·Π±Π΅Ρ€Π΅ΠΌ ΡƒΠΌΠ΅Π½ΡŒΡˆΠ΅Π½ΠΈΠ΅/ΡƒΠ²Π΅Π»ΠΈΡ‡Π΅Π½ΠΈΠ΅ элСмСнтов.

НСобходимоС для Ρ‚Π°ΠΊΠΎΠΉ трансформации Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ свойства transform β€” scale(x,y), Π³Π΄Π΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ x β€” ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ² ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π° ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ, Π° y β€” ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ соотвСтствСнно. Если ΠΌΡ‹ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΠΌ это свойство для

Как Π²ΠΈΠ΄ΠΈΡ‚Π΅, Ρƒ значСния scale Π² Π΄Π°Π½Π½ΠΎΠΌ случаС Π½Π΅ Π΄Π²Π° ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π°, Π° ΠΎΠ΄ΠΈΠ½, ΠΈ это ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ ΠΈ ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ, ΠΈ ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ наш элСмСнт ΡƒΠ²Π΅Π»ΠΈΡ‡Π΅Π½ Π² Π΄Π²Π° Ρ€Π°Π·Π°.

Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π½Π° hover наша Π·Π°Π΄Π°Ρ‡Π° ΡƒΠΌΠ΅Π½ΡŒΡˆΠΈΡ‚ΡŒ эти элСмСнты Π΄ΠΎ ΠΈΡ… Π½ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Π°, Ρ‡Ρ‚ΠΎ ΠΌΡ‹ ΠΈ Π΄Π΅Π»Π°Π΅ΠΌ, добавляя эти стили:

Π­Ρ„Ρ„Π΅ΠΊΡ‚ #3.2 строится Π°Π½Π°Π»ΠΎΠ³ΠΈΡ‡Π½ΠΎ ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰Π΅ΠΌΡƒ, с Ρ‚Π΅ΠΌ лишь ΠΈΡΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ΠΌ, Ρ‡Ρ‚ΠΎ элСмСнты Π½Π΅ ΡƒΠΌΠ΅Π½ΡŒΡˆΠ°ΡŽΡ‚ΡΡ, Π° ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΠ²Π°ΡŽΡ‚ΡΡ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΌΡ‹ΡˆΠΈ. Выставим для Π½ΠΈΡ… Ρ‚Π°ΠΊΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ scale: 0.25, всС ΠΏΡ€ΠΎΡ‡ΠΈΠ΅ стили ΠΎΡΡ‚Π°ΡŽΡ‚ΡΡ Π°Π½Π°Π»ΠΎΠ³ΠΈΡ‡Π½Ρ‹.

А Π²ΠΎΡ‚ эффСкт #3.3 β€” это комбинация ΠΈΠ· пСрСмСщСния элСмСнтов ΠΈ измСнСния ΠΈΡ… Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ². Как Π²ΠΈΠ΄ΠΈΠΌ, элСмСнт

остаСтся Π½Π° своСм мСстС ΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ Π½Π΅ мСняСт, для Π½Π΅Π³ΠΎ стили ΠΎΡΡ‚Π°ΡŽΡ‚ΡΡ стандартныС. Π§Ρ‚ΠΎ касаСтся

Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π½Π°Π΄ΠΎ Π·Π°Π΄Π°Ρ‚ΡŒ transition, Π½ΠΎ Ρ‚ΡƒΡ‚ встаСт Ρ‚Π°ΠΊΠΎΠΉ вопрос: элСмСнты Π΄ΠΎΠ»ΠΆΠ½Ρ‹ сначала β€” ΠΎΠΏΡƒΡΡ‚ΠΈΡ‚ΡŒΡΡ ΠΈ лишь послС β€” ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΡ‚ΡŒΡΡ Π² Ρ€Π°Π·ΠΌΠ΅Ρ€Π°Ρ…, Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ, Π½ΡƒΠΆΠ½ΠΎ Π·Π°Π΄Π°Ρ‚ΡŒ transition для опускания элСмСнтов Π±Π΅Π· Π·Π°Π΄Π΅Ρ€ΠΆΠΊΠΈ ΠΈ transition с Π·Π°Π΄Π΅Ρ€ΠΆΠΊΠΎΠΉ для увСличСния.

Π—Π°Π΄Π°Ρ‚ΡŒ большС ΠΎΠ΄Π½ΠΎΠ³ΠΎ стилСвого свойства для transition β€” просто: ΠΌΡ‹ всСго лишь пСрСчисляСм ΠΈΡ… Ρ‡Π΅Ρ€Π΅Π· Π·Π°ΠΏΡΡ‚ΡƒΡŽ, Π½Π΅ Π·Π°Π±Ρ‹Π² ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ всС ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ свойства:

transition: top 0.3s linear 0s, transform 0.3s linear 0.3s;

Π”ΠΎΠ±Π°Π²ΠΈΠΌ это ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ ΠΊ ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹ΠΌ стилСвым ΠΏΡ€Π°Π²ΠΈΠ»Π°ΠΌ:

Π—Π°Π΄Π°Π΅ΠΌ ΠΊΠΎΠ½Π΅Ρ‡Π½ΡƒΡŽ Ρ‚ΠΎΡ‡ΠΊΡƒ трансформаций:

ΠšΡ€ΡƒΡ‚ΠΈΠΌ элСмСнты: rotate. Π—Π°Π΄Π°Π΅ΠΌ β€œΡ‚ΠΎΡ‡ΠΊΡƒ вращСния”. Π­Ρ„Ρ„Π΅ΠΊΡ‚Ρ‹ #4.1-#4.4

Π§Ρ‚ΠΎΠ±Ρ‹ β€œΠΊΡ€ΡƒΡ‚ΠΈΡ‚ΡŒβ€ элСмСнты, свойству transform Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Π·Π°Π΄Π°Ρ‚ΡŒ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ β€” rotate ΠΈ Π΅Π³ΠΎ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹. КакиС ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ Π΅ΡΡ‚ΡŒ Ρƒ значСния rotate? Π’ΠΎ-ΠΏΠ΅Ρ€Π²Ρ‹Ρ…, ось вращСния: X, Y ΠΈΠ»ΠΈ Z. Π’ΠΎ-Π²Ρ‚ΠΎΡ€Ρ‹Ρ…, количСство градусов, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠ²Π΅Ρ€Π½ΡƒΡ‚ элСмСнт. Π’Π°ΠΊ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Ссли ΠΌΡ‹ Ρ…ΠΎΡ‚ΠΈΠΌ ΠΏΠΎΠ²Π΅Ρ€Π½ΡƒΡ‚ΡŒ элСмСнт ΠΏΠΎ оси Y Π½Π° 30 градусов, Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ:

html-структура остаСтся Π±Π°Π·ΠΎΠ²ΠΎΠΉ, Ρ€Π°Π²Π½ΠΎ ΠΊΠ°ΠΊ ΠΈ стили для

Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΌΡ‹ΡˆΠΈ элСмСнт крутанСтся Π½Π° Π²Ρ‹ΡˆΠ΅ΠΎΠ±ΠΎΠ·Π½Π°Ρ‡Π΅Π½Π½ΠΎΠ΅ количСство градусов. Но Ρ…ΠΎΡ‚Π΅Π»ΠΎΡΡŒ Π±Ρ‹, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ крутился, Π½ΠΎ ΠΈ, Π² отсутствиС hover, исчСзал, Π° Π½Π° hover Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ вращался, Π½ΠΎ ΠΈ β€œΠ²Ρ‹ΠΏΠ»Ρ‹Π²Π°Π»β€. Для этого Π΄ΠΎΠ±Π°Π²ΠΈΠΌ Π΅Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ transform со Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ scale. Π§Ρ‚ΠΎΠ±Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ элСмСнту Π΄Π²Π° ΠΈ Π±ΠΎΠ»Π΅Π΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ transform, Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ ΠΏΠΈΡΠ°Ρ‚ΡŒ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ Π΄Π²Π°ΠΆΠ΄Ρ‹, ΠΌΡ‹ просто ставим эти значСния Ρ‡Π΅Ρ€Π΅Π· ΠΏΡ€ΠΎΠ±Π΅Π». И поступаСм Π°Π½Π°Π»ΠΎΠ³ΠΈΡ‡Π½ΠΎ с hover-стилями:

Π­Ρ„Ρ„Π΅ΠΊΡ‚ #4.2 строится ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ Π°Π½Π°Π»ΠΎΠ³ΠΈΡ‡Π½ΠΎ, Ρ‚ΠΎΠ»ΡŒΠΊΠΎ замСняСм ось вращСния Π½Π° Y.

Π­Ρ„Ρ„Π΅ΠΊΡ‚ #4.3 строится, ΠΎΠΏΡΡ‚ΡŒ ΠΆΠ΅, ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ Π°Π½Π°Π»ΠΎΠ³ΠΈΡ‡Π½ΠΎ. ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ rotateZ() ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ Π°Π½Π°Π»ΠΎΠ³ΠΈΡ‡Π½Π° записи rotate(), ΠΌΡ‹ просто мСняСм стили Π½Π°:

Π­Ρ„Ρ„Π΅ΠΊΡ‚ #4.4 слоТнСС. Он базируСтся Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½Π° Π²Ρ€Π°Ρ‰Π΅Π½ΠΈΠΈ ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€Π°, Π½ΠΎ Π΅Ρ‰Π΅ ΠΈ Π½Π° ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚ Ρ‚ΠΎΡ‡ΠΊΠΈ, Π²ΠΎΠΊΡ€ΡƒΠ³ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ ΡΠΎΠ²Π΅Ρ€ΡˆΠ°Π΅Ρ‚ΡΡ Π²Ρ€Π°Ρ‰Π΅Π½ΠΈΠ΅, Π° Ρ‚Π°ΠΊΠΆΠ΅ Π½Π° услоТнСнном Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΈ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π° transition-timing-function свойства transition. Но Π½Π°Ρ‡Π½Π΅ΠΌ ΠΏΠΎ порядку.

Π•Ρ‰Π΅ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΎ scale ΠΈ transform-origin. Π­Ρ„Ρ„Π΅ΠΊΡ‚Ρ‹ #5.1-#5.4

Для этого элСмСнта html-структура ΠΈ стили для

И, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΎΠΈΠ·ΠΎΡˆΠ»ΠΎ ΡƒΠ²Π΅Π»ΠΈΡ‡Π΅Π½ΠΈΠ΅, Π½Π° hover:

Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, ΠΌΡ‹ смСщаСм Ρ‚ΠΎΡ‡ΠΊΡƒ, ΠΎΡ‚ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ происходит ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄, ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ Π² ΠΊΡ€Π°ΠΉΠ½Π΅Π΅ Π»Π΅Π²ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, Π° ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ ΠΎΠ½Π° Ρ‚Π°ΠΊ ΠΈ остаСтся Π² Π΄Π΅Ρ„ΠΎΠ»Ρ‚Π½ΠΎΠΌ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ β€” ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ. ΠŸΡ€ΠΎΡ‡ΠΈΠ΅ стили ΠΎΡΡ‚Π°ΡŽΡ‚ΡΡ Π°Π½Π°Π»ΠΎΠ³ΠΈΡ‡Π½Ρ‹ΠΌΠΈ.

Π’ΠΎΡ‡ΠΊΠ° смСщСна Π² ΠΊΡ€Π°ΠΉΠ½Π΅Π΅ Π²Π΅Ρ€Ρ…Π½Π΅Π΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ ΠΆΠ΅ β€” остаСтся ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ. ΠŸΡ€ΠΎΡ‡ΠΈΠ΅ стили Π°Π½Π°Π»ΠΎΠ³ΠΈΡ‡Π½Ρ‹.

Как Π΅Ρ‰Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ связку rotate ΠΈ transform-origin. Π­Ρ„Ρ„Π΅ΠΊΡ‚Ρ‹ #6.1-#6.3

html-структура остаСтся Π±Π°Π·ΠΎΠ²ΠΎΠΉ, Ρ€Π°Π²Π½ΠΎ ΠΊΠ°ΠΊ ΠΈ стили для

Π’Π΅ΠΏΠ΅Ρ€ΡŒ, Ссли ΠΌΡ‹ Π±ΡƒΠ΄Π΅ΠΌ ΡΠΌΠ΅Ρ‰Π°Ρ‚ΡŒ ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹ β€œΡ‚ΠΎΡ‡ΠΊΠΈ пСрСхода” ΠΈ ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒ Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ Π²Ρ€Π°Ρ‰Π΅Π½ΠΈΠ΅, Ρ‚ΠΎ смоТСм ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ Π²Π°Ρ€ΠΈΠ°Ρ†ΠΈΠΈ этого эффСкта. Π’Π°ΠΊ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, эффСкт #6.2 ΠΏΠΎΡ‡Ρ‚ΠΈ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ Π°Π½Π°Π»ΠΎΠ³ΠΈΡ‡Π΅Π½ ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰Π΅ΠΌΡƒ, Ρ‚ΠΎΠ»ΡŒΠΊΠΎ transform-origin: center bottom; Π° Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ вращСния ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΎ Π½Π° ΠΏΡ€ΠΎΡ‚ΠΈΠ²ΠΎΠΏΠΎΠ»ΠΎΠΆΠ½ΠΎΠ΅ благодаря Ρ‚ΠΎΠΌΡƒ, Ρ‡Ρ‚ΠΎ исходноС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ стало Ρ‚Π°ΠΊΠΈΠΌ transform: rotate(-180deg);

Π’ эффСктС #6.3 Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ вращСния остаСтся Ρ‚Π°ΠΊΠΈΠΌ ΠΆΠ΅, ΠΊΠ°ΠΊ Π² #6.2, Π° β€œΡ‚ΠΎΡ‡ΠΊΠ° пСрСхода” смСщСна Π½Π° сСрСдину ΠΏΡ€Π°Π²ΠΎΠΉ стороны ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°: transform-origin: right center; Π’ ΠΎΡΡ‚Π°Π»ΡŒΠ½ΠΎΠΌ, стили ΠΎΡΡ‚Π°ΡŽΡ‚ΡΡ Ρ‚Π΅ΠΌΠΈ ΠΆΠ΅ самыми.

ΠŸΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΈΠΌ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅ ΠΎ delay. Π­Ρ„Ρ„Π΅ΠΊΡ‚Ρ‹ #7.1-#7.3

БСйчас ΠΌΡ‹ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Π½Π°Ρ€ΡƒΡˆΠΈΠΌ порядок Ρ€Π°Π·Π±ΠΎΡ€Π° эффСктов ΠΈ Π½Π°Ρ‡Π½Π΅ΠΌ с эффСкта #7.2, ΠΏΠΎΡ‚ΠΎΠΌ ΠΏΠ΅Ρ€Π΅ΠΉΠ΄Π΅ΠΌ ΠΊ #7.3, ΠΈ лишь ΠΏΠΎΡ‚ΠΎΠΌ вСрнСмся ΠΊ #7.1 ΠΊΠ°ΠΊ ΠΊ самому слоТному ΠΈΠ· Π»ΠΈΠ½Π΅ΠΉΠΊΠΈ.

html-структура понадобится такая:

Π§Ρ‚ΠΎ касаСтся стилСй: для

Π’ΠΎΡ‚ Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ ΠΎΡ‡Π΅Ρ€Π΅Π΄Π½ΠΎΡΡ‚ΡŒ Π±ΡƒΠ΄Π΅Ρ‚ соблюдСна, ΠΈ элСмСнты Π±ΡƒΠ΄ΡƒΡ‚ Π΄Π²ΠΈΠ³Π°Ρ‚ΡŒΡΡ Π² ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎΠΌ порядкС.

ΠŸΡ€ΠΎΡ‡ΠΈΠ΅ стили ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ‡Π½Ρ‹ стилям ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰ΠΈΡ… эффСктов.

ΠŸΡ€ΠΈΠΌΠ΅Π½ΡΠ΅ΠΌ ΠΏΠΎΠ»ΡƒΡ‡Π΅Π½Π½Ρ‹Π΅ Π½Π°Π²Ρ‹ΠΊΠΈ Π½Π° ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠ΅. Π‘ΠΎΠ»ΡŒΡˆΠ΅ Ρ‚Ρ€ΡŽΠΊΠΎΠ²! Π­Ρ„Ρ„Π΅ΠΊΡ‚Ρ‹ #8.1-#10.3

Ну Π° Π½Π° hover ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΠ²Π°Π΅ΠΌ Π΅Π³ΠΎ:

ΠŸΡ€ΠΎΡ‡ΠΈΠ΅ стили ΠΎΡΡ‚Π°ΡŽΡ‚ΡΡ Π΄Π΅Ρ„ΠΎΠ»Ρ‚Π½Ρ‹ΠΌΠΈ.

Π­Ρ„Ρ„Π΅ΠΊΡ‚Ρ‹ #8.2-#8.3 строятся Π°Π½Π°Π»ΠΎΠ³ΠΈΡ‡Π½ΠΎ. Вся Ρ€Π°Π·Π½ΠΈΡ†Π° лишь Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Π² #8.2 ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ scaleX(), Π° Π² #8.3 β€” scaleY(), ΠΎ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… я ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΠΎ рассказывала ΠΏΡ€ΠΈ Ρ€Π°Π·Π±ΠΎΡ€Π΅ эффСктов #3.1-#3.3

Π§Ρ‚ΠΎ касаСтся html-структуры, ΠΎΠ½Π° Ρ‚Π°ΠΊΠΎΠ²Π°:

ΠŸΡ€ΠΎΡ‡ΠΈΠ΅ стили Π°Π½Π°Π»ΠΎΠ³ΠΈΡ‡Π½Ρ‹ стилям эффСкта #9.1

Π­Ρ„Ρ„Π΅ΠΊΡ‚ #9.3 строится ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ. НуТна такая html-структура:

ВсС ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Π΅ стили β€” Π΄Π΅Ρ„ΠΎΠ»Ρ‚Π½Ρ‹Π΅.

html-структура Π½ΡƒΠΆΠ½Π° такая:

На hover ΠΈΡ… delay Ρ‚ΠΎΠΆΠ΅ Π±ΡƒΠ΄ΡƒΡ‚ Ρ€Π°Π·Π»ΠΈΡ‡Π°Ρ‚ΡŒΡΡ:

html-структура Π½ΡƒΠΆΠ½Π° такая:

Π˜Π½Ρ‚Π΅Ρ€Π΅ΡΠ½Π΅Π΅ с Π½ΠΈΠΆΠ½ΠΈΠΌ ΠΏΡ€Π°Π²Ρ‹ΠΌ. ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΡˆΠΈΡ€ΠΈΠ½Π° border Ρ€Π°Π²Π½Π° 4px, просто Π·Π°Π΄Π°Ρ‚ΡŒ ΡˆΠΈΡ€ΠΈΠ½Π΅ ΠΈ высотС ΠΏΠΎ 100% нСдостаточно, Π½ΡƒΠΆΠ½ΠΎ ΠΊΠΎΠΌΠΏΠ΅Π½ΡΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΠΎ 8px ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ ΠΈ ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ, Ρ‡Π΅ΠΌ Π½Π°ΠΌ ΠΈ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ calc:

ΠžΡΡ‚Π°Π»ΠΎΡΡŒ лишь, Ρ‡Ρ‚ΠΎΠ± элСмСнты ΠΎΠΏΡƒΡΠΊΠ°Π»ΠΈΡΡŒ Π½Π° hover, ΠΏΡ€ΠΈΡ‡Π΅ΠΌ Π² установлСнном Π½Π°ΠΌΠΈ порядкС:

html-структура Π½ΡƒΠΆΠ½Π° дСфолтная, Ρ€Π°Π²Π½ΠΎ ΠΊΠ°ΠΊ ΠΈ стили для

НадСюсь, эта ΡΡ‚Π°Ρ‚ΡŒΡ оказалась для вас ΠΏΠΎΠ»Π΅Π·Π½ΠΎΠΉ ΠΈ интСрСсной!

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ

Π Π°Π±ΠΎΡ‚Π° с эффСктами навСдСния CSS

Π‘Π΅Π»Π΅ΠΊΡ‚ΠΎΡ€ :hover опрСдСлят ΡΡ‚ΠΈΠ»ΡŒ элСмСнта ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора ΠΌΡ‹ΡˆΠΈ. Π­Ρ‚ΠΎΡ‚ сСлСктор ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для всСх элСмСнтов, Π° Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ для ссылок. ПсСвдокласс CSS :hover запускаСтся, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π½Π°Π²ΠΎΠ΄ΠΈΡ‚ ΡƒΠΊΠ°Π·Π°Ρ‚Π΅Π»ΡŒ ΠΌΡ‹ΡˆΠΈ Π½Π° элСмСнт.

Π‘Ρ‚ΠΈΠ»ΠΈ, опрСдСляСмыС Π°ΠΊΡ‚ΠΈΠ²Π°ΠΌΠΈ псСвдо-класса, Π±ΡƒΠ΄ΡƒΡ‚ ΠΏΠ΅Ρ€Π΅ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Ρ‹ Π»ΡŽΠ±Ρ‹ΠΌ ΠΏΠΎΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ классом. НапримСр, :link, :active ΠΈΠ»ΠΈ :visited, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΈΠΌΠ΅Π΅Ρ‚ хотя Π±Ρ‹ ΠΎΠ΄ΠΈΠ½ Ρ€Π°Π²Π½Ρ‹ΠΉ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ псСвдокласс hover послС :link ΠΈ :visit, Π½ΠΎ ΠΏΠ΅Ρ€Π΅Π΄ :active.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ ссылок с Ρ€Π°Π·Π½Ρ‹ΠΌΠΈ стилями:

Π’Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню

ΠŸΡ€ΠΈΠΌΠ΅Ρ€, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ ΠΌΡ‹ Π±ΡƒΠ΄Π΅ΠΌ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора ΠΌΡ‹ΡˆΠΈ:

Π”Ρ€ΡƒΠ³ΠΎΠΉ ΡΡ‚ΠΈΠ»ΡŒ

Π•Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ эффСкта ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ, Π½ΠΎ ΡƒΠΆΠ΅ с Π΄Ρ€ΡƒΠ³ΠΈΠΌ стилСм:

НиТняя Π³Ρ€Π°Π½ΠΈΡ†Π° становится Ρ„ΠΎΠ½ΠΎΠΌ

ΠŸΡ€ΠΈΠΌΠ΅Ρ€, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора Π½Π° ссылку ниТняя Π³Ρ€Π°Π½ΠΈΡ†Π° строки увСличиваСтся ΠΈ становится Ρ„ΠΎΠ½ΠΎΠΌ:

УмСньшСниС интСнсивности Ρ†Π²Π΅Ρ‚Π°

Π­Ρ„Ρ„Π΅ΠΊΡ‚ :hover, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ проявляСтся ΡƒΠΌΠ΅Π½ΡŒΡˆΠ΅Π½ΠΈΠ΅ΠΌ интСнсивности Ρ†Π²Π΅Ρ‚Π°. Π­Ρ‚ΠΎ ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΉ способ ΠΏΡ€ΠΈΠ²Π»Π΅Ρ‡ΡŒ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΊ Π²Π°ΠΆΠ½ΠΎΠΌΡƒ элСмСнту Π½Π° страницС:

Π£Π²Π΅Π»ΠΈΡ‡Π΅Π½ΠΈΠ΅ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ ΠΈ высоты

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ свойство transform для увСличСния ΡˆΠΈΡ€ΠΈΠ½Ρ‹ ΠΈ высоты элСмСнта ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора:

Π’Ρ€Π°Ρ‰Π΅Π½ΠΈΠ΅ элСмСнта

CSS-прСобразования Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ эффСкта вращСния элСмСнта

ИзмСнСниС Ρ„ΠΎΡ€ΠΌΡ‹ элСмСнта

Π•Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ популярный эффСкт – ΠΏΡ€Π΅Π²Ρ€Π°Ρ‰Π΅Π½ΠΈΠ΅ ΠΊΡ€ΡƒΠ³Π»ΠΎΠ³ΠΎ элСмСнта Π² ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚Π½Ρ‹ΠΉ ΠΈ Π½Π°ΠΎΠ±ΠΎΡ€ΠΎΡ‚

ИзмСнСниС Ρ†Π²Π΅Ρ‚Π° Π³Ρ€Π°Π½ΠΈΡ†

Π•Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ интСрСсный эффСкт – ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Ρ†Π²Π΅Ρ‚Π° Π³Ρ€Π°Π½ΠΈΡ† элСмСнта ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора. Для Π΅Π³ΠΎ Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ примСняСтся ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ с использованиСм Ρ‚Π΅Π½ΠΈ для Π±Π»ΠΎΠΊΠ°:

ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°ΠΌΠΈ: Google Chrome, Microsoft Edge, Firefox, Opera, Safari.

Π—Π°ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅

CSS3 позволяСт ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ мноТСство красивых эффСктов Π±Π΅Π· использования Java Script. Π­Ρ‚ΠΎ Π΄ΠΎΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‚ ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½Ρ‹Π΅ Π²Ρ‹ΡˆΠ΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹.

Π”Π°ΠΉΡ‚Π΅ Π·Π½Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ Π΄ΡƒΠΌΠ°Π΅Ρ‚Π΅ ΠΏΠΎ этой Ρ‚Π΅ΠΌΠ΅ ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»Π° Π² коммСнтариях. Π—Π° ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ, подписки, Π΄ΠΈΠ·Π»Π°ΠΉΠΊΠΈ, ΠΎΡ‚ΠΊΠ»ΠΈΠΊΠΈ, Π»Π°ΠΉΠΊΠΈ ΠΎΠ³Ρ€ΠΎΠΌΠ½ΠΎΠ΅ Π²Π°ΠΌ спасибо!

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ

ΠŸΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡΡ‹ ΠΈ псСвдоэлСмСнты Π² CSS (hover, before, first-child ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅)

hover Π² html ΠΊΠΎΠ΄Π΅. money birds728. hover Π² html ΠΊΠΎΠ΄Π΅ Ρ„ΠΎΡ‚ΠΎ. hover Π² html ΠΊΠΎΠ΄Π΅-money birds728. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° hover Π² html ΠΊΠΎΠ΄Π΅. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° money birds728. ΠžΡ‡Π΅Π½ΡŒ часто Π½Π° сайтах Π²Ρ‹ ΠΌΠΎΠ³Π»ΠΈ Π²ΡΡ‚Ρ€Π΅Ρ‡Π°Ρ‚ΡŒ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ оформлСния ссылок ΠΈΠ»ΠΈ ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ. Π Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π·Π°Π΄Π°Ρ‡Ρƒ позволяСт ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹ΠΉ псСвдокласс :hover Π² CSS. БСгодня рассмотрим Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΡ€ΠΈΠ΅ΠΌΡ‹ вСрстки ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰ΠΈΠ΅ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ эту Ρ„ΠΈΡˆΠΊΡƒ, Π° Π½ΠΈΠΆΠ΅ ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΡƒΠ΅ΠΌ список Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ интСрСсных ΠΈΠ· Π½ΠΈΡ… (с ΠΊΡ€Π°Ρ‚ΠΊΠΈΠΌΠΈ описаниями/пояснСниСми). ВсС Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹ Ρ€Π°Π·Π΄Π΅Π»ΠΈΠΌ Π½Π°:

ΠŸΡ€ΠΈΠ²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽ Вас, ΡƒΠ²Π°ΠΆΠ°Π΅ΠΌΡ‹Π΅ Ρ‡ΠΈΡ‚Π°Ρ‚Π΅Π»ΠΈ Π±Π»ΠΎΠ³Π°. БСгодня ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΠΌ Ρ‚Π΅ΠΌΡƒ изучСния каскадных Ρ‚Π°Π±Π»ΠΈΡ† стилСй. Π’ ΠΎΠ΄Π½ΠΎΠΉ ΠΈΠ· ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰ΠΈΡ… статСй ΠΌΡ‹ рассматривали ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Π΅ сСлСкторы Π² CSS, Π½ΠΎ рассмотрСли Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‡Π°ΡΡ‚ΡŒ ΠΈΠ· Π½ΠΈΡ…. И Π½Π° ΠΎΡ‡Π΅Ρ€Π΅Π΄ΠΈ Ρƒ нас ΠΎΡΡ‚Π°Π»ΠΈΡΡŒ сСлСкторы псСвдоклассов ΠΈ псСвдоэлСмСнтов.

ΠŸΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½Ρ‚Ρ‹

ΠŸΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½Ρ‚Ρ‹ β€” Ρ€Π°Π·Π½ΠΎΠ²ΠΈΠ΄Π½ΠΎΡΡ‚ΡŒ ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Ρ… сСлСкторов, ΠΏΡ€ΠΈΠ²ΡΠ·Ρ‹Π²Π°ΡŽΡ‰ΠΈΡ… ΡΡ‚ΠΈΠ»ΡŒ ΠΊ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΌΡƒ Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚Ρƒ элСмСнта Web-страницы, Π° Ρ‚Π°ΠΊΠΆΠ΅ ΠΎΠ½ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ содСрТимоС, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ Π½Π΅Ρ‚ Π² исходном html ΠΊΠΎΠ΄Π΅. Π’Π°ΠΊΠΈΠΌ Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚ΠΎΠΌ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ символ ΠΈΠ»ΠΈ пСрвая строка Π² Π°Π±Π·Π°Ρ†Π΅.

ΠŸΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½Ρ‚Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ Π½Π΅ сами ΠΏΠΎ сСбС, Π° Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π² совокупности с основными сСлСкторами:

Π’Π½Π°Ρ‡Π°Π»Π΅ слСдуСт имя основного сСлСктора, Π·Π°Ρ‚Π΅ΠΌ ΠΏΠΈΡˆΠ΅Ρ‚ΡΡ Π΄Π²ΠΎΠ΅Ρ‚ΠΎΡ‡ΠΈΠ΅, послС ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ ΠΈΠ΄Ρ‘Ρ‚ имя псСвдоэлСмСнта.

Π”Π°Π»Π΅Π΅ рассмотрим Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ псСвдоэлСмСнты ΠΈ ΠΈΡ… свойства.

:first-letter

ΠŸΡ€ΠΈΠ²ΡΠ·Ρ‹Π²Π°Π΅Ρ‚ ΡΡ‚ΠΈΠ»ΡŒ ΠΊ ΠΏΠ΅Ρ€Π²ΠΎΠΉ Π±ΡƒΠΊΠ²Π΅ тСкста Π² элСмСнтС web-страницы, Ссли Π΅ΠΉ Π½Π΅ ΠΏΡ€Π΅Π΄ΡˆΠ΅ΡΡ‚Π²ΡƒΠ΅Ρ‚ встроСнный элСмСнт, Π½Π΅ ΡΠ²Π»ΡΡŽΡ‰ΠΈΠΉΡΡ тСкстом, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅. Π­Ρ‚ΠΎ позволяСт ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Π² тСкстС Π±ΡƒΠΊΠ²ΠΈΡ†Ρƒ (увСличСнная пСрвая Π±ΡƒΠΊΠ²Π°, базовая линия ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ Π½ΠΈΠΆΠ΅ Π½Π° ΠΎΠ΄Π½Ρƒ ΠΈΠ»ΠΈ нСсколько строк Π±Π°Π·ΠΎΠ²ΠΎΠΉ Π»ΠΈΠ½ΠΈΠΈ основного тСкста) ΠΈ Π²Ρ‹ΡΡ‚ΡƒΠΏΠ°ΡŽΡ‰ΠΈΠΉ ΠΈΠ½ΠΈΡ†ΠΈΠ°Π» (увСличСнная прописная Π±ΡƒΠΊΠ²Π°, базовая линия ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ совпадаСт с Π±Π°Π·ΠΎΠ²ΠΎΠΉ Π»ΠΈΠ½ΠΈΠ΅ΠΉ основного тСкста).

Рассмотрим ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ first-letter Π½Π° ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ созданиС Π²Ρ‹ΡΡ‚ΡƒΠΏΠ°ΡŽΡ‰Π΅Π³ΠΎ ΠΈΠ½ΠΈΡ†ΠΈΠ°Π»Π°:

И Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°:

hover Π² html ΠΊΠΎΠ΄Π΅. psevdoel1. hover Π² html ΠΊΠΎΠ΄Π΅ Ρ„ΠΎΡ‚ΠΎ. hover Π² html ΠΊΠΎΠ΄Π΅-psevdoel1. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° hover Π² html ΠΊΠΎΠ΄Π΅. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° psevdoel1. ΠžΡ‡Π΅Π½ΡŒ часто Π½Π° сайтах Π²Ρ‹ ΠΌΠΎΠ³Π»ΠΈ Π²ΡΡ‚Ρ€Π΅Ρ‡Π°Ρ‚ΡŒ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ оформлСния ссылок ΠΈΠ»ΠΈ ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ. Π Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π·Π°Π΄Π°Ρ‡Ρƒ позволяСт ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹ΠΉ псСвдокласс :hover Π² CSS. БСгодня рассмотрим Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΡ€ΠΈΠ΅ΠΌΡ‹ вСрстки ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰ΠΈΠ΅ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ эту Ρ„ΠΈΡˆΠΊΡƒ, Π° Π½ΠΈΠΆΠ΅ ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΡƒΠ΅ΠΌ список Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ интСрСсных ΠΈΠ· Π½ΠΈΡ… (с ΠΊΡ€Π°Ρ‚ΠΊΠΈΠΌΠΈ описаниями/пояснСниСми). ВсС Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹ Ρ€Π°Π·Π΄Π΅Π»ΠΈΠΌ Π½Π°:

Как Π²ΠΈΠ΄Π½ΠΎ Π½Π° ΡΠΊΡ€ΠΈΠ½ΡˆΠΎΡ‚Π΅, пСрвая Π±ΡƒΠΊΠ²Π° Π°Π±Π·Π°Ρ†Π° стала Π² Π΄Π²Π° Ρ€Π°Π·Π° большС ΠΈ ΠΈΠ·ΠΌΠ΅Π½ΠΈΠ»Π° Ρ†Π²Π΅Ρ‚ Π½Π° красный.

:first-line

ΠŸΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½Ρ‚ :first-line привязываСт ΡΡ‚ΠΈΠ»ΡŒ ΠΊ ΠΏΠ΅Ρ€Π²ΠΎΠΉ строкС тСкста Π² элСмСнтС Π²Π΅Π± страницы. ΠŸΠΎΡΠΌΠΎΡ‚Ρ€ΠΈΠΌ дСйствиС псСвдоэлСмСнта :first-line Π½Π° Π°Π±Π·Π°Ρ† тСкста:

hover Π² html ΠΊΠΎΠ΄Π΅. psevdoel2. hover Π² html ΠΊΠΎΠ΄Π΅ Ρ„ΠΎΡ‚ΠΎ. hover Π² html ΠΊΠΎΠ΄Π΅-psevdoel2. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° hover Π² html ΠΊΠΎΠ΄Π΅. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° psevdoel2. ΠžΡ‡Π΅Π½ΡŒ часто Π½Π° сайтах Π²Ρ‹ ΠΌΠΎΠ³Π»ΠΈ Π²ΡΡ‚Ρ€Π΅Ρ‡Π°Ρ‚ΡŒ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ оформлСния ссылок ΠΈΠ»ΠΈ ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ. Π Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π·Π°Π΄Π°Ρ‡Ρƒ позволяСт ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹ΠΉ псСвдокласс :hover Π² CSS. БСгодня рассмотрим Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΡ€ΠΈΠ΅ΠΌΡ‹ вСрстки ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰ΠΈΠ΅ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ эту Ρ„ΠΈΡˆΠΊΡƒ, Π° Π½ΠΈΠΆΠ΅ ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΡƒΠ΅ΠΌ список Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ интСрСсных ΠΈΠ· Π½ΠΈΡ… (с ΠΊΡ€Π°Ρ‚ΠΊΠΈΠΌΠΈ описаниями/пояснСниСми). ВсС Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹ Ρ€Π°Π·Π΄Π΅Π»ΠΈΠΌ Π½Π°:

:after ΠΈ :before

ΠŸΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½Ρ‚Ρ‹ after ΠΈ before примСняСтся для вставки ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° послС ΠΈ ΠΏΠ΅Ρ€Π΅Π΄ содСрТимым элСмСнта. Π­Ρ‚ΠΈ псСвдоэлСмСнты Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ совмСстно со стилСвым свойством content, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ опрСдСляСт содСрТимоС для вставки.

hover Π² html ΠΊΠΎΠ΄Π΅. psevdoel3. hover Π² html ΠΊΠΎΠ΄Π΅ Ρ„ΠΎΡ‚ΠΎ. hover Π² html ΠΊΠΎΠ΄Π΅-psevdoel3. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° hover Π² html ΠΊΠΎΠ΄Π΅. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° psevdoel3. ΠžΡ‡Π΅Π½ΡŒ часто Π½Π° сайтах Π²Ρ‹ ΠΌΠΎΠ³Π»ΠΈ Π²ΡΡ‚Ρ€Π΅Ρ‡Π°Ρ‚ΡŒ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ оформлСния ссылок ΠΈΠ»ΠΈ ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ. Π Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π·Π°Π΄Π°Ρ‡Ρƒ позволяСт ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹ΠΉ псСвдокласс :hover Π² CSS. БСгодня рассмотрим Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΡ€ΠΈΠ΅ΠΌΡ‹ вСрстки ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰ΠΈΠ΅ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ эту Ρ„ΠΈΡˆΠΊΡƒ, Π° Π½ΠΈΠΆΠ΅ ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΡƒΠ΅ΠΌ список Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ интСрСсных ΠΈΠ· Π½ΠΈΡ… (с ΠΊΡ€Π°Ρ‚ΠΊΠΈΠΌΠΈ описаниями/пояснСниСми). ВсС Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹ Ρ€Π°Π·Π΄Π΅Π»ΠΈΠΌ Π½Π°:

Как Π²ΠΈΠ΄ΠΈΠΌ Π² ΠΊΠΎΠ½Ρ†Π΅ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Π°Π±Π·Π°Ρ†Π° вставлСн тСкст Β«webcodius.ruΒ», ΠΊΠ°ΠΊ ΠΈ прописано Π² css ΠΏΡ€Π°Π²ΠΈΠ»Π΅ Π² свойствС Β«contentΒ». Если Π² мСсто Β«afterΒ» ΠΏΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Β«beforeΒ», Ρ‚ΠΎ тСкст Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒΡΡ Π² Π½Π°Ρ‡Π°Π»Π΅ Π°Π±Π·Π°Ρ†Π°.

ΠŸΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡΡ‹

ΠŸΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡΡ‹ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ ΠΏΡ€ΠΈΠ²ΡΠ·Π°Ρ‚ΡŒ ΡΡ‚ΠΈΠ»ΡŒ ΠΊ элСмСнтам Π²Π΅Π± страницы Π½Π° основС ΠΈΡ… состояния ΠΈ мСстополоТСния Π² Π΄Π΅Ρ€Π΅Π²Π΅ элСмСнтов. ΠŸΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠΌ Ρ‚Π°ΠΊΠΎΠ³ΠΎ состояния ΠΌΠΎΠΆΠ΅Ρ‚ ΡΠ»ΡƒΠΆΠΈΡ‚ΡŒ гипСрссылка, которая мСняСт свой Ρ†Π²Π΅Ρ‚ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° Π½Π΅Π΅ курсора ΠΌΡ‹ΡˆΠΈ.

ΠŸΡ€ΠΈ описании css ΠΏΡ€Π°Π²ΠΈΠ» псСвдоклассы ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ Π² совокупности с основными сСлСкторами:

Если псСвдокласс указываСтся Π±Π΅Π· сСлСктора Π²ΠΏΠ΅Ρ€Π΅Π΄ΠΈ (:hover), Ρ‚ΠΎ ΠΎΠ½ примСняСтся ΠΊΠΎ всСм элСмСнтам страницы.

ΠŸΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡΡ‹ условно дСлятся Π½Π° Ρ‚Ρ€ΠΈ Π³Ρ€ΡƒΠΏΠΏΡ‹:

ΠŸΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡΡ‹, ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‰ΠΈΠ΅ состояниС элСмСнтов

ΠŸΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡΡ‹ этой Π³Ρ€ΡƒΠΏΠΏΡ‹ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‚ состояниС элСмСнта html страницы ΠΈ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡŽΡ‚ ΡΡ‚ΠΈΠ»ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ для ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠ³ΠΎ состояния. ΠžΠ±Ρ‹Ρ‡Π½ΠΎ псСвдоклассы состояний ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ для гипСрссылок, Π½ΠΎ ΠΈΠ½ΠΎΠ³Π΄Π° ΠΈΡ… ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡŽΡ‚ ΠΈ для Π΄Ρ€ΡƒΠ³ΠΈΡ… элСмСнтов Π²Π΅Π± страницы.

ПсСвдокласс :link примСняСтся для Π½Π΅ посСщСнных ссылок, Ρ‚.Π΅. ссылкам, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π΅Ρ‰Π΅ Π½Π΅ Π½Π°ΠΆΠΈΠΌΠ°Π». Записи a <. >ΠΈ a:link <. >Π² Ρ‚Π°Π±Π»ΠΈΡ†Π΅ стилСй Π΄Π°ΡŽΡ‚ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ‹ΠΉ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚, поэтому псСвдокласс :link ΠΌΠΎΠΆΠ½ΠΎ Π½Π΅ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ.

ПсСвдокласс :visited опрСдСляСт внСшний Π²ΠΈΠ΄ посСщСнных ссылок, Ρ‚.Π΅. ссылок ΠΏΠΎ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ ΡƒΠΆΠ΅ Ρ‰Π΅Π»ΠΊΠ½ΡƒΠ». По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Ρ‚Π°ΠΊΠΈΠ΅ ссылки ΠΌΠ΅Π½ΡΡŽΡ‚ свой Ρ†Π²Π΅Ρ‚ Π½Π° Ρ„ΠΈΠΎΠ»Π΅Ρ‚ΠΎΠ²Ρ‹ΠΉ, Π½ΠΎ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π΄Π°Π½Π½ΠΎΠ³ΠΎ псСвдокласса Ρ†Π²Π΅Ρ‚ ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠΌΠ΅Π½ΡΡ‚ΡŒ.

ПсСвдокласс :active примСняСтся ΠΊ Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΌ элСмСнтам. НапримСр, для Π°ΠΊΡ‚ΠΈΠ²Π°Ρ†ΠΈΠΈ ссылки, Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ навСсти Π½Π° Π½Π΅Π΅ курсор ΠΈ Ρ‰Π΅Π»ΠΊΠ½ΡƒΡ‚ΡŒ ΠΌΡ‹ΡˆΠΊΠΎΠΉ.

ПсСвдокласс :focus примСняСтся ΠΊ элСмСнту ΠΏΡ€ΠΈ ΠΏΠΎΠ»ΡƒΡ‡Π΅Π½ΠΈΠΈ фокуса. НапримСр, ΠΏΠΎΠ»Π΅ тСкстового Π²Π²ΠΎΠ΄Π° ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅Ρ‚ фокус, ΠΊΠΎΠ³Π΄Π° Π² Π½Π΅Π³ΠΎ установлСн курсор.

И послСдний псСвдокласс :hΠΎvΠ΅r примСняСтся ΠΊ элСмСнту, ΠΊΠΎΠ³Π΄Π° Π½Π° Π½Π΅Π³ΠΎ Π½Π°Π²Π΅Π΄Π΅Π½ курсор ΠΌΡ‹ΡˆΠΈ, Π½ΠΎ Ρ‰Π΅Π»Ρ‡ΠΊΠ° Π½Π΅ происходит.

Для ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° посмотрим ΠΊΠ°ΠΊ Π±ΡƒΠ΄ΡƒΡ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ ссылки Π² Ρ€Π°Π·Π½Ρ‹Ρ… состояниях:

hover Π² html ΠΊΠΎΠ΄Π΅. ssylki. hover Π² html ΠΊΠΎΠ΄Π΅ Ρ„ΠΎΡ‚ΠΎ. hover Π² html ΠΊΠΎΠ΄Π΅-ssylki. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° hover Π² html ΠΊΠΎΠ΄Π΅. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ssylki. ΠžΡ‡Π΅Π½ΡŒ часто Π½Π° сайтах Π²Ρ‹ ΠΌΠΎΠ³Π»ΠΈ Π²ΡΡ‚Ρ€Π΅Ρ‡Π°Ρ‚ΡŒ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ оформлСния ссылок ΠΈΠ»ΠΈ ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ. Π Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π·Π°Π΄Π°Ρ‡Ρƒ позволяСт ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹ΠΉ псСвдокласс :hover Π² CSS. БСгодня рассмотрим Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΡ€ΠΈΠ΅ΠΌΡ‹ вСрстки ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰ΠΈΠ΅ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ эту Ρ„ΠΈΡˆΠΊΡƒ, Π° Π½ΠΈΠΆΠ΅ ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΡƒΠ΅ΠΌ список Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ интСрСсных ΠΈΠ· Π½ΠΈΡ… (с ΠΊΡ€Π°Ρ‚ΠΊΠΈΠΌΠΈ описаниями/пояснСниСми). ВсС Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹ Ρ€Π°Π·Π΄Π΅Π»ΠΈΠΌ Π½Π°:

ΠŸΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡΡ‹ структуры Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°

Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ этой Π³Ρ€ΡƒΠΏΠΏΡ‹ псСвдоклассов стили ΠΏΡ€ΠΈΠ²ΡΠ·Ρ‹Π²Π°ΡŽΡ‚ΡΡ ΠΊ элСмСнтам Π² зависимости ΠΎΡ‚ ΠΈΡ… полоТСния Π² структурС Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°.

ΠŸΠ΅Ρ€Π²Ρ‹ΠΌΠΈ рассмотрим псСвдоклассы :first-child ΠΈ :last-child, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΡ€ΠΈΠ²ΡΠ·Ρ‹Π²Π°ΡŽΡ‚ ΡΡ‚ΠΈΠ»ΡŒ ΠΊ элСмСнтам сСлСктора, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΡΠ²Π»ΡΡŽΡ‚ΡΡ соотвСтствСнно ΠΏΠ΅Ρ€Π²Ρ‹ΠΌ ΠΈ послСдним Π΄ΠΎΡ‡Π΅Ρ€Π½ΠΈΠΌ элСмСнтом своСго родитСля. Π§Ρ‚ΠΎΠ±Ρ‹ стало понятнСй рассмотрим эти псСвдоклассы Π½Π° ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΌΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ списка:

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°: hover Π² html ΠΊΠΎΠ΄Π΅. first child. hover Π² html ΠΊΠΎΠ΄Π΅ Ρ„ΠΎΡ‚ΠΎ. hover Π² html ΠΊΠΎΠ΄Π΅-first child. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° hover Π² html ΠΊΠΎΠ΄Π΅. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° first child. ΠžΡ‡Π΅Π½ΡŒ часто Π½Π° сайтах Π²Ρ‹ ΠΌΠΎΠ³Π»ΠΈ Π²ΡΡ‚Ρ€Π΅Ρ‡Π°Ρ‚ΡŒ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ оформлСния ссылок ΠΈΠ»ΠΈ ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ. Π Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π·Π°Π΄Π°Ρ‡Ρƒ позволяСт ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹ΠΉ псСвдокласс :hover Π² CSS. БСгодня рассмотрим Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΡ€ΠΈΠ΅ΠΌΡ‹ вСрстки ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰ΠΈΠ΅ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ эту Ρ„ΠΈΡˆΠΊΡƒ, Π° Π½ΠΈΠΆΠ΅ ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΡƒΠ΅ΠΌ список Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ интСрСсных ΠΈΠ· Π½ΠΈΡ… (с ΠΊΡ€Π°Ρ‚ΠΊΠΈΠΌΠΈ описаниями/пояснСниСми). ВсС Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹ Ρ€Π°Π·Π΄Π΅Π»ΠΈΠΌ Π½Π°:

Π’ этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΏΡ€Π°Π²ΠΈΠ»Π° CSS Β«li:first-childΒ» ΠΌΡ‹ Π³ΠΎΠ²ΠΎΡ€ΠΈΠΌ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρƒ, Ρ‡Ρ‚ΠΎ ΡΡ‚ΠΈΠ»ΡŒ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΊ элСмСнту li, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΈΠ΄Π΅Ρ‚ ΠΏΠ΅Ρ€Π²Ρ‹ΠΌ Π² своСм Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠΌ элСмСнтС. А с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ сСлСктора Β«li:last-childΒ» элСмСнт Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ послСдним. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ свойств css для настроСк отобраТСния ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ², ΠΌΡ‹ ΡƒΠΊΠ°Π·Π°Π»ΠΈ, Ρ‡Ρ‚ΠΎ ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ элСмСнт списка Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ Π²Ρ‹Π΄Π΅Π»Π΅Π½ ΠΆΠΈΡ€Π½Ρ‹ΠΌ ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠΌ, Π° Ρƒ послСднСго элСмСнта установили ΡˆΡ€ΠΈΡ„Ρ‚ красного Ρ†Π²Π΅Ρ‚Π°.

Π‘Π»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ псСвдокласс :only-of-type, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ примСняСтся ΠΊ Π΄ΠΎΡ‡Π΅Ρ€Π½Π΅ΠΌΡƒ элСмСнту ΡƒΠΊΠ°Π·Π°Π½Π½ΠΎΠ³ΠΎ Ρ‚ΠΈΠΏΠ°, Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ссли ΠΎΠ½ СдинствСнный Ρƒ своСго родитСля.

hover Π² html ΠΊΠΎΠ΄Π΅. only of type. hover Π² html ΠΊΠΎΠ΄Π΅ Ρ„ΠΎΡ‚ΠΎ. hover Π² html ΠΊΠΎΠ΄Π΅-only of type. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° hover Π² html ΠΊΠΎΠ΄Π΅. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° only of type. ΠžΡ‡Π΅Π½ΡŒ часто Π½Π° сайтах Π²Ρ‹ ΠΌΠΎΠ³Π»ΠΈ Π²ΡΡ‚Ρ€Π΅Ρ‡Π°Ρ‚ΡŒ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ оформлСния ссылок ΠΈΠ»ΠΈ ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ. Π Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π·Π°Π΄Π°Ρ‡Ρƒ позволяСт ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹ΠΉ псСвдокласс :hover Π² CSS. БСгодня рассмотрим Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΡ€ΠΈΠ΅ΠΌΡ‹ вСрстки ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰ΠΈΠ΅ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ эту Ρ„ΠΈΡˆΠΊΡƒ, Π° Π½ΠΈΠΆΠ΅ ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΡƒΠ΅ΠΌ список Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ интСрСсных ΠΈΠ· Π½ΠΈΡ… (с ΠΊΡ€Π°Ρ‚ΠΊΠΈΠΌΠΈ описаниями/пояснСниСми). ВсС Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹ Ρ€Π°Π·Π΄Π΅Π»ΠΈΠΌ Π½Π°:

Π’ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ псСвдокласс : only-of-type примСняСтся ΠΊ элСмСнту , Π² ΠΏΡ€Π°Π²ΠΈΠ»Π°Ρ… стиля ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€ ΡˆΡ€ΠΈΡ„Ρ‚Π° увСличиваСтся Π² Π΄Π²Π° Ρ€Π°Π·Π°. Π Π°Π·ΠΌΠ΅Ρ€ ΡˆΡ€ΠΈΡ„Ρ‚Π° увСличиваСтся Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρƒ Ρ‚Π΅Ρ… гипСрссылок, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Ρƒ своих Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»Π΅ΠΉ (Π² Π΄Π°Π½Π½ΠΎΠΌ случаС это Ρ‚Π΅Π³

) Π²ΡΡ‚Ρ€Π΅Ρ‡Π°ΡŽΡ‚ΡΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄ΠΈΠ½ Ρ€Π°Π·.

ПсСвдокласс :nth-child позволяСт ΠΏΡ€ΠΈΠ²ΡΠ·Π°Ρ‚ΡŒ ΡΡ‚ΠΈΠ»ΡŒ ΠΊ элСмСнтам Web-страницы, Π½Π° основС ΠΈΡ… Π½ΡƒΠΌΠ΅Ρ€Π°Ρ†ΠΈΠΈ Π² Π΄Π΅Ρ€Π΅Π²Π΅ элСмСнтов:

ПослС ΠΈΠΌΠ΅Π½ΠΈ Π΄Π°Π½Π½ΠΎΠ³ΠΎ псСвдокласса Π² скобках ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΡƒΠΊΠ°Π·Π°Π½ΠΎ Ρ‡Π΅Ρ‚Ρ‹Ρ€Π΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹Ρ… Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Π°:

НапримСр, ΠΊΠ°ΠΊ Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚ΡŒ всС Ρ‡Π΅Ρ‚Π½Ρ‹Π΅ строки Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ Ρ†Π²Π΅Ρ‚ΠΎΠΌ? Π’ этом случаС идСально ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ псСвдокласс :nth-child:

hover Π² html ΠΊΠΎΠ΄Π΅. nth child. hover Π² html ΠΊΠΎΠ΄Π΅ Ρ„ΠΎΡ‚ΠΎ. hover Π² html ΠΊΠΎΠ΄Π΅-nth child. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° hover Π² html ΠΊΠΎΠ΄Π΅. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° nth child. ΠžΡ‡Π΅Π½ΡŒ часто Π½Π° сайтах Π²Ρ‹ ΠΌΠΎΠ³Π»ΠΈ Π²ΡΡ‚Ρ€Π΅Ρ‡Π°Ρ‚ΡŒ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ оформлСния ссылок ΠΈΠ»ΠΈ ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ. Π Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π·Π°Π΄Π°Ρ‡Ρƒ позволяСт ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹ΠΉ псСвдокласс :hover Π² CSS. БСгодня рассмотрим Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΡ€ΠΈΠ΅ΠΌΡ‹ вСрстки ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰ΠΈΠ΅ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ эту Ρ„ΠΈΡˆΠΊΡƒ, Π° Π½ΠΈΠΆΠ΅ ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΡƒΠ΅ΠΌ список Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ интСрСсных ΠΈΠ· Π½ΠΈΡ… (с ΠΊΡ€Π°Ρ‚ΠΊΠΈΠΌΠΈ описаниями/пояснСниСми). ВсС Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹ Ρ€Π°Π·Π΄Π΅Π»ΠΈΠΌ Π½Π°:

Π’ ΠΊΠΎΠ΄Π΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° запись tr:nth-child (2n) ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ ΡΡ‚ΠΈΠ»ΡŒ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΡ€ΠΈΠ²ΡΠ·Π°Ρ‚ΡŒ ΠΊΠΎ всСм элСмСнтам tr, с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Ρ„ΠΎΡ€ΠΌΠΈΡ€ΡƒΡŽΡ‚ΡΡ строки Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ (ΠΎΠ± этом ΠΌΡ‹ Π³ΠΎΠ²ΠΎΡ€ΠΈΠ»ΠΈ Π² ΡΡ‚Π°Ρ‚ΡŒΠ΅ ΠΊΠ°ΠΊ Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ Π½Π° html-страницС). ΠŸΡ€ΠΈΡ‡Π΅ΠΌ порядковый Π½ΠΎΠΌΠ΅Ρ€ строк ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ элСмСнта table Π΄ΠΎΠ»ΠΆΠ΅Π½ ΡƒΠ΄ΠΎΠ²Π»Π΅Ρ‚Π²ΠΎΡ€ΡΡ‚ΡŒ Ρ„ΠΎΡ€ΠΌΡƒΠ»Π΅ 2n, Π² ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ вмСсто n подставляСт Ρ†Π΅Π»Ρ‹Π΅ числа 0, 1, 2. Π’ ΠΈΡ‚ΠΎΠ³Π΅ получаСтся, Ρ‡Ρ‚ΠΎ ΡΡ‚ΠΈΠ»ΡŒ примСняСтся ΠΊ строкам ΠΏΠΎΠ΄ Π½ΠΎΠΌΠ΅Ρ€Π°ΠΌΠΈ 2, 4, 6 ΠΈ Ρ‚.Π΄.

ΠŸΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡΡ‹ :not ΠΈ *

ΠžΡΡ‚Π°Π»ΠΎΡΡŒ Ρ€Π°ΡΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Π΅Ρ‰Π΅ Π΄Π²Π° Π²Π°ΠΆΠ½Ρ‹Ρ… псСвдокласса. ΠžΡΠΎΠ±Ρ‹ΠΉ псСвдокласс :not позволяСт ΠΏΡ€ΠΈΠ²ΡΠ·Π°Ρ‚ΡŒ ΡΡ‚ΠΈΠ»ΡŒ ΠΊ Π»ΡŽΠ±ΠΎΠΌΡƒ элСмСнту web страницы, Π½Π΅ ΡƒΠ΄ΠΎΠ²Π»Π΅Ρ‚Π²ΠΎΡ€ΡΡŽΡ‰Π΅ΠΌΡƒ Π·Π°Π΄Π°Π½Π½Ρ‹ΠΌ условиям. Π’Π°ΠΊΠΈΠΌ условиСм ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ любой сСлСктор:

Π‘Ρ‚ΠΈΠ»ΡŒ Π±ΡƒΠ΄Π΅Ρ‚ привязан ΠΊ элСмСнтам Π²Π΅Π± страницы, ΡƒΠ΄ΠΎΠ²Π»Π΅Ρ‚Π²ΠΎΡ€ΡΡŽΡ‰ΠΈΠΌ основному сСлСктору ΠΈ Π½Π΅ ΡƒΠ΄ΠΎΠ²Π»Π΅Ρ‚Π²ΠΎΡ€ΡΡŽΡ‰Π΅ΠΌΡƒ сСлСктору Π²Ρ‹Π±ΠΎΡ€Π°. НапримСр:

Π’ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π΅ этого css ΠΏΡ€Π°Π²ΠΈΠ»Π°, тСкст всСх Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² h1 окрасятся Π² красный Ρ†Π²Π΅Ρ‚, ΠΊΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ Ρƒ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ id Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°Π²Π΅Π½ main.

И послСдний Π½Π° сСгодня псСвдокласс * (Β«Π·Π²Π΅Π·Π΄ΠΎΡ‡ΠΊΠ°Β»), ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΎΠ±ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚ любой элСмСнт html страницы. Он ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΡ‚Ρ€Π΅Π±ΠΎΠ²Π°Ρ‚ΡŒΡΡ Π² случаС, Ссли Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ ΠΎΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ ΠΎΠ΄ΠΈΠ½ ΡΡ‚ΠΈΠ»ΡŒ для всСх элСмСнтов Π²Π΅Π±-страницы, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π·Π°Π΄Π°Ρ‚ΡŒ ΡˆΡ€ΠΈΡ„Ρ‚ ΠΈΠ»ΠΈ Π½Π°Ρ‡Π΅Ρ€Ρ‚Π°Π½ΠΈΠ΅ тСкста. Бинтаксис:

НапримСр, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€ тСкста для всСх элСмСнтов Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π΅ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ css:

На этом всС, Π΄ΠΎ Π½ΠΎΠ²Ρ‹Ρ… встрСч Π½Π° страницах Π±Π»ΠΎΠ³Π°!

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ

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

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