Css ΠΎΠ½Π»Π°ΠΉΠ½ ΠΊΠ½ΠΎΠΏΠΊΠ°: CSS Π“Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€ ΠΊΠ½ΠΎΠΏΠΊΠΈ

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

ΠžΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ CSS сСлСкторов | Π‘Π°Π·Π° Π·Π½Π°Π½ΠΈΠΉ

Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΠΎ Ρ€Π°Π·Π±Π΅Ρ€Π΅ΠΌ, ΠΊΠ°ΠΊ Π½Π°ΠΉΡ‚ΠΈ CSS сСлСкторы, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹ для сбора Π΄Π°Π½Π½Ρ‹Ρ… с сайта

Π’Π°ΠΆΠ½ΠΎ! НС ΠΏΠ΅Ρ€Π΅ΠΆΠΈΠ²Π°ΠΉΡ‚Π΅, Ссли Ρ€Π°Π½Π΅Π΅ Π½Π΅ Π±Ρ‹Π»ΠΈ Π·Π½Π°ΠΊΠΎΠΌΡ‹ с html ΠΈ CSS, здСсь Π½Π΅ потрСбуСтся ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Ρ… Π·Π½Π°Π½ΠΈΠΉ Π² ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠΈ πŸ˜‰

CSS сСлСкторы ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‚ ΠΏΡƒΡ‚ΡŒ, Π² ΠΊΠ°ΠΊΠΎΠΌ ΠΈΠΌΠ΅Π½Π½ΠΎ Ρ‚Π΅Π³Π΅ содСрТится нуТная Π½Π°ΠΌ информация. Для ΠΈΡ… поиска ΠΌΠΎΠΆΠ½ΠΎ Π²ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹ΠΌΠΈ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ°ΠΌΠΈ для Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, SelectorGadget, Π½ΠΎ ΠΎΠ½ΠΈ Π½Π΅ Π³Π°Ρ€Π°Π½Ρ‚ΠΈΡ€ΡƒΡŽΡ‚ Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ Π½Π°ΠΉΠ΄Π΅Π½Π½Ρ‹Π΅ сСлСкторы Π±ΡƒΠ΄ΡƒΡ‚ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ вашим Π·Π°Π΄Π°Ρ‡Π°ΠΌ.

Поиск Π½ΡƒΠΆΠ½ΠΎΠ³ΠΎ элСмСнта

Для Π½Π°Ρ‡Π°Π»Π° ΠΎΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ html ΠΊΠΎΠ΄ страницы вашСго сайта. Π‘Π΄Π΅Π»Π°Ρ‚ΡŒ это ΠΌΠΎΠΆΠ½ΠΎ ΠΊΠ»ΠΈΠΊΠ½ΡƒΠ² ΠΏΡ€Π°Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ ΠΌΡ‹ΡˆΠΈ ΠΈ Π²Ρ‹Π±Ρ€Π°Π² «ΠŸΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΊΠΎΠ΄ элСмСнта»/Inspect (здСсь ΠΈ Π΄Π°Π»Π΅Π΅ рассматриваСтся Ρ€Π°Π±ΠΎΡ‚Π° Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅ Chrome).Β 

ΠžΡ‚ΠΊΡ€ΠΎΠ΅Ρ‚ΡΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Π°Ρ панСль Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°, Π³Π΄Π΅ Π²ΠΎ Π²ΠΊΠ»Π°Π΄ΠΊΠ΅ Elements отобразится вСсь html ΠΊΠΎΠ΄ страницы, Π·Π°Π³Ρ€ΡƒΠΆΠ΅Π½Π½Ρ‹ΠΉ Π² Π΄Π°Π½Π½Ρ‹ΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ‚. На ΡΠΊΡ€ΠΈΠ½ΡˆΠΎΡ‚Π΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° Π²Ρ‹Π΄Π΅Π»Π΅Π½ Ρ‚Π΅Π³, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΊΠ°ΠΊ Ρ€Π°Π· Π±Ρ‹Π» ΠΊΠ»ΠΈΠΊ ΠΏΡ€Π°Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ ΠΌΡ‹ΡˆΠΈ.

Π‘Π»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ этап Ρ€Π°Π±ΠΎΡ‚Ρ‹ — ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ Ρ‚Π΅Π³, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π½Π°ΠΌ Π½ΡƒΠΆΠ΅Π½. Π‘Π΄Π΅Π»Π°Ρ‚ΡŒ это ΠΌΠΎΠΆΠ½ΠΎ нСсколькими способами:

  • ΠΊΠ»ΠΈΠΊΠ½ΡƒΡ‚ΡŒ Π½Π° ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΡƒΡŽ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ, Π½Π°ΠΆΠ°Ρ‚ΡŒ Π½Π° ΠΏΡ€Π°Π²ΡƒΡŽ ΠΊΠ½ΠΎΠΏΠΊΡƒ ΠΌΡ‹ΡˆΠΈ ΠΈ Π΅Ρ‰Π΅ Ρ€Π°Π· Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒΒ «ΠŸΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΊΠΎΠ΄ элСмСнта»/Inspect;
  • ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒΡΡ Π½Π° Π²Ρ‹Π±ΠΎΡ€ элСмСнта Π½Π° страницС ΠΈΠ· консоли, Π½Π°ΠΆΠ°Π² Π½Π° ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΡƒΡŽ ΠΊΠ½ΠΎΠΏΠΊΡƒ Π² консоли Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°;

  • Ρ‡Π΅Ρ€Π΅Π· поиск Π½Π°ΠΉΡ‚ΠΈ Ρ‚Π΅Π³ прямо Π² html ΠΊΠΎΠ΄Π΅. Для этого ΠΊΠ»ΠΈΠΊΠ½ΠΈΡ‚Π΅ Π½Π° любой Ρ‚Π΅Π³, Π½Π°ΠΆΠΌΠΈΡ‚Π΅ сочСтаниС клавиш Ctrl + F ΠΈ Π² появившСйся строкС поиска Π²Π²Π΅Π΄ΠΈΡ‚Π΅ любой тСкст с сайта. Π‘Ρ€Π°ΡƒΠ·Π΅Ρ€ сам подсвСтит элСмСнт ΠΈ рядом Π½Π°ΠΏΠΈΡˆΠ΅Ρ‚ количСство совпадСний Π½Π° страницС. Π’ нашСм ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ Π²ΠΈΠ΄Π½ΠΎ, Ρ‡Ρ‚ΠΎ «Π·Π°ΠΏΠΈΡΠ°Ρ‚ΡŒΡΡ» повторяСтся Π½Π° страницС Π΄Π²Π°ΠΆΠ΄Ρ‹. ΠŸΡ€ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ Enter Π² строкС поиска, Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ ΠΊ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌΡƒ элСмСнту Π½Π° страницС (этот ΠΌΠΎΠΌΠ΅Π½Ρ‚ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ Π²Π°ΠΌ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΡΡ‚ΡŒ ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ сСлСктора Π½Π° страницС Π»ΠΈΠ±ΠΎ ΡƒΡ‚ΠΎΡ‡Π½ΡΡ‚ΡŒ, всС Π»ΠΈ Π½Π°ΠΉΠ΄Π΅Π½Π½Ρ‹Π΅ элСмСнты ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‚ вашим Π·Π°Π΄Π°Ρ‡Π°ΠΌ, ΠΊΠΎΠ³Π΄Π° ΠΈΡ… Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ нСсколько).

ΠžΡΠ½ΠΎΠ²Π½Ρ‹Π΅ понятия Π² html ΠΊΠΎΠ΄Π΅

Π”Π°Π»Π΅Π΅ Ρ€Π°Π·Π±Π΅Ρ€Π΅ΠΌ, Ρ‡Ρ‚ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ Π² html ΠΊΠΎΠ΄Π΅ ΠΈ Ρ‡Ρ‚ΠΎ ΠΈΠ· этого Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Π·Π½Π°Ρ‚ΡŒ для сбора Π΄Π°Π½Π½Ρ‹Ρ…. Β 

Π’Π΅Π³Β — это элСмСнт, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠΎΠΆΠ΅Ρ‚ ΡΠΎΡΡ‚ΠΎΡΡ‚ΡŒ ΠΈΠ· Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ ΠΈ ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎΠ³ΠΎ, ΠΈ ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒ Π²Π½ΡƒΡ‚Ρ€ΠΈ сСбя тСкст (span Π² ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ — Π½Π°Π·Π²Π°Π½ΠΈΠ΅ Ρ‚Π΅Π³Π°), Π° ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΎΠ΄ΠΈΠ½ΠΎΡ‡Π½Ρ‹ΠΌ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ <br> (пСрСнос тСкста Π½Π° Π½ΠΎΠ²ΡƒΡŽ строку).Β 

Атрибут Ρ‚Π΅Π³Π° —Β Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ Ρ‚Π΅Π³Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Π»ΠΈΡΡŽΡ‚ Π½Π° содСрТимоС Ρ‚Π΅Π³Π°, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ тСкст. НапримСр,
— здСсь style=»font-size: 200%; text-align: center;»Β ΡΠ²Π»ΡΠ΅Ρ‚ся Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠΌ ΠΈ Π² нашСм ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΎΠ½ сдСлаСт Ρ€Π°Π·ΠΌΠ΅Ρ€ тСкста Π—Π°ΠΏΠΈΡΠ°Ρ‚ΡŒΡΡΒ Π² Π΄Π²Π° Ρ€Π°Π·Π° ΠΊΡ€ΡƒΠΏΠ½Π΅Π΅ ΠΈ размСстит Π΅Π³ΠΎ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ.
Π£ ΠΎΠ΄Π½ΠΎΠ³ΠΎ Ρ‚Π΅Π³Π° ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ нСсколько Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π±ΡƒΠ΄ΡƒΡ‚ Ρ€Π°Π·Π΄Π΅Π»Π΅Π½Ρ‹ ΠΏΡ€ΠΎΠ±Π΅Π»Π°ΠΌΠΈ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Ρ‚Π°ΠΊ:

здСсь Π΄Π²Π° Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° Ρƒ ΠΎΠ΄Π½ΠΎΠ³ΠΎ Ρ‚Π΅Π³Π° — classΒ ΠΈ style.

Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° —Β Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ Ρ‚Π΅Π³Π° состоит ΠΈΠ· Π΄Π²ΡƒΡ… элСмСнтов: названия ΠΈ значСния.
Π¦ΠΈΡ„Ρ€ΠΎΠΉ 1 ΠΎΡ‚ΠΌΠ΅Ρ‡Π΅Π½Ρ‹ названия Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ², Ρ†ΠΈΡ„Ρ€ΠΎΠΉ 2 — ΠΈΡ… значСния. Π—Π½Π°Ρ‡Π΅Π½ΠΈΠΉ, ΠΊΠ°ΠΊ ΠΈ самих Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ² Π² Ρ‚Π΅Π³Π΅, ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ нСсколько, Ρ€Π°Π·Π΄Π΅Π»ΡΡŽΡ‚ΡΡ ΠΎΠ½ΠΈ Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΡ€ΠΎΠ±Π΅Π»ΠΎΠΌ.

РасполоТСниС Ρ‚Π΅Π³ΠΎΠ²Β — Π² html ΠΊΠΎΠ΄Π΅ всС Ρ‚Π΅Π³ΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Ρ€Π°ΡΠΏΠΎΠ»Π°Π³Π°Ρ‚ΡŒΡΡ ΠΏΠΎ Ρ‡Π΅Ρ‚ΠΊΠΈΠΌ ΠΏΡ€Π°Π²ΠΈΠ»Π°ΠΌ, ΠΊΠ°ΠΊ ΠΌΠ°Ρ‚Ρ€Π΅ΡˆΠΊΠΈ, ΠΎΠ΄ΠΈΠ½ Π² Π΄Ρ€ΡƒΠ³ΠΎΠΌ Π»ΠΈΠ±ΠΎ рядом. Π£ всСх Ρ‚Π΅Π³ΠΎΠ² Π΅ΡΡ‚ΡŒ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΠΈ (Ρ‚Π΅Π³ΠΈ, Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… ΠΎΠ½ΠΈ находятся) ΠΈ Ρƒ ΠΌΠ½ΠΎΠ³ΠΈΡ… Π΄Π΅Ρ‚ΠΈ. НапримСр, Ρ‚Π΅Π³ <strong></strong> Ρ€Π΅Π±Π΅Π½ΠΎΠΊ ΠΈ Ρ‚Π΅Π³Π° <h3></h3>, ΠΈ Ρ‚Π΅Π³Π° <div></div>, Π° ΠΎΠ½ΠΈ соотвСтствСнно Π΅Π³ΠΎ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΠΈ:

ΠŸΡ€Π°Π²ΠΈΠ»Π° обозначСния CSS сСлСкторов

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для указания Π½Π° ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½Ρ‹ΠΉ Ρ‚Π΅Π³ ΠΈΠ»ΠΈ Π΅Π³ΠΎ содСрТимоС ΠΌΠΎΠΆΠ½ΠΎ практичСски всС элСмСнты html. Π”Π°Π»Π΅Π΅ рассмотрим нСсколько самых простых Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ².

НазваниС Ρ‚Π΅Π³Π° — достаточно просто ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ span, div, img, h3Β  Π² мСстС, Π³Π΄Π΅ Π½ΡƒΠΆΠ½ΠΎ ΠΏΡ€ΠΎΠΏΠΈΡΠ°Ρ‚ΡŒ сСлСктор, ΠΈ Ρ‚Π°ΠΊΠΎΠΉ сСлСктор Π±ΡƒΠ΄Π΅Ρ‚ ΡƒΡ‡ΠΈΡ‚Ρ‹Π²Π°Ρ‚ΡŒ всС Ρ‚Π΅Π³ΠΈ с Ρ‚Π°ΠΊΠΈΠΌ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ΠΌ Π½Π° страницС. ΠžΠ±Ρ‹Ρ‡Π½ΠΎ этого Ρ…Π²Π°Ρ‚Π°Π΅Ρ‚ для записи названия страницы, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ ΠΎΠ½ΠΎ присутствуСт Π² Ρ‚Π΅Π³Π΅ h2, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π½Π΅ повторяСтся. НапримСр, Ρ‚Π°ΠΊ Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ настройка записи Π² свойство события «ΠŸΠΎΡΠ΅Ρ‰Π΅Π½ΠΈΠ΅ страницы» названия страницы:

Атрибуты class ΠΈ idΒ — это ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹Π΅ Π² нашСм случаС Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΎΠ±ΠΎΠ·Π½Π°Ρ‡Π°ΡŽΡ‚ΡΡ Π½Π΅ Ρ‚Π°ΠΊ, ΠΊΠ°ΠΊ всС ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Π΅. ΠŸΡ€ΠΈΠΌΠ΅Ρ€:

Π—Π΄Π΅ΡΡŒ сСлСктор Β class ΠΌΡ‹ запишСм ΠΊΠ°ΠΊ .text ΠΈΠ»ΠΈ .wrapper2, Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ просто Π΄ΠΎΠ±Π°Π²ΠΈΠΌ Ρ‚ΠΎΡ‡ΠΊΡƒ ΠΏΠ΅Ρ€Π΅Π΄ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ. Если ΠΌΡ‹ Ρ…ΠΎΡ‚ΠΈΠΌ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ Π½Π°ΠΌ Π½ΡƒΠΆΠ΅Π½ Ρ‚Π΅Π³, Π³Π΄Π΅ Π² ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠΌ порядкС ΠΏΡ€ΠΈΡΡƒΡ‚ΡΡ‚Π²ΡƒΡŽΡ‚ ΠΎΠ±Π° значСния, Ρ‚ΠΎ ΠΏΡ€ΠΎΠΏΠΈΡˆΠ΅ΠΌ Ρ‚Π°ΠΊ .text.wrapper2 (Π±Π΅Π· ΠΏΡ€ΠΎΠ±Π΅Π»Π°).

Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ id Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΡΠ²Π»ΡΡ‚ΡŒΡΡ ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΌ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΈΠ»Π°ΠΌ html ΠΈ ΠΈΠΌΠ΅Ρ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄Π½ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π²Π½ΡƒΡ‚Ρ€ΠΈ этого Ρ‚Π΅Π³Π°. ΠŸΡ€ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρƒ ΠΎΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠ±ΠΎΠ·Π½Π°Ρ‡Π°Ρ‚ΡŒΡΡ Ρ‚Π°ΠΊ #section24.

Π’Π°ΠΌ ΠΏΠΎΠ²Π΅Π·Π»ΠΎ, Ссли Π² Π½ΡƒΠΆΠ½ΠΎΠΌ Π²Π°ΠΌ элСмСнтС Π΅ΡΡ‚ΡŒ id, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ этого ΠΊΠ°ΠΊ Ρ€Π°Π· Π±ΡƒΠ΄Π΅Ρ‚ достаточно для Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²Π° настроСк сбора Π΄Π°Π½Π½Ρ‹Ρ….

Π”Ρ€ΡƒΠ³ΠΈΠ΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ — всС ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Π΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ Π·Π°ΠΏΠΈΡΡ‹Π²Π°ΡŽΡ‚ΡΡ ΠΏΠΎ Π΅Π΄ΠΈΠ½ΠΎΠΌΡƒ ΠΏΡ€Π°Π²ΠΈΠ»Ρƒ: Π½Π°Π·Π²Π°Π½ΠΈΠ΅ Ρ‚Π΅Π³Π°[Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ ΠΈ Π΅Π³ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅]. НапримСр, ΡƒΠΊΠ°ΠΆΠ΅ΠΌ CSS сСлСктор для Ρ‚Π΅Π³Π° с ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΠΎΠΉ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΎΠΉ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ scr (ссылку Π½Π° ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ):

img[src=»//s.filesonload.ru/img/shadowbottom/1.png»]

Использования элСмСнтов Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… Ρ‚Π΅Π³ΠΎΠ²Β — ΠΈΠ½ΠΎΠ³Π΄Π° Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ Ρƒ Π½ΡƒΠΆΠ½ΠΎΠ³ΠΎ Ρ‚Π΅Π³Π° Π½Π΅ ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ ΠΈΠ»ΠΈ вовсС ΠΎΡ‚ΡΡƒΡ‚ΡΡ‚Π²ΡƒΡŽΡ‚. Π’ этих случаях ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»Π΅ΠΉ для опрСдСлСния сСлСктора. НапримСр, ΠΌΡ‹ Ρ…ΠΎΡ‚ΠΈΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для сбора Π΄Π°Π½Π½Ρ‹Ρ… ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ ΠΈΠ· Ρ‚Π΅Π³Π° <strong>:

Π‘Π½Π°Ρ‡Π°Π»Π° ΠΏΡ€ΠΎΠ±ΡƒΠ΅ΠΌ блиТайшСго родитСля, Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ Ρ‚Π΅Π³ <span>. Π‘Π΅Π»Π΅ΠΊΡ‚ΠΎΡ€ Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ Ρ‚Π°ΠΊ: span strong,Β Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ Π½Π°ΠΌ достаточно Π½Π°ΠΏΠΈΡΠ°Ρ‚ΡŒ названия Ρ‚Π΅Π³ΠΎΠ² Π² Π½ΡƒΠΆΠ½ΠΎΠΌ порядкС ΠΈ Ρ‚Π°ΠΊΠΎΠΉ сСлСктор Π²Ρ‹Π±Π΅Ρ€Π΅Ρ‚ всС Ρ‚Π΅Π³ΠΈ <strong>, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ находятся Π² Ρ‚Π΅Π³Π΅ <span>. Аналогично Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ ΠΈ с Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»Π΅ΠΉ <h3>: h3 strong.Β 

ΠœΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ Π·Π°Π΄Π°Ρ‚ΡŒ ΠΈ Π±ΠΎΠ»Π΅Π΅ Ρ‡Π΅Ρ‚ΠΊΠΎΠ΅ условиС, Ρ‡Ρ‚ΠΎ Π½Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ всС Ρ‚Π΅Π³ΠΈ <strong>, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ находятся нСпосрСдствСнно Π² Ρ‚Π΅Π³Π΅ <span>. Для этого ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ символ >: span > strong.Β 

МоТно ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ†Π΅ΠΏΠΎΡ‡ΠΊΡƒ ΠΈΠ· Π½Π°Π·Π²Π°Π½ΠΈΠΉ Ρ‚Π΅Π³ΠΎΠ² ΠΈ ΠΈΡ… Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π² ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎΠΌ ΠΈΡ‚ΠΎΠ³Π΅ ΡƒΠΊΠ°ΠΆΡƒΡ‚ Π½Π° Π½ΡƒΠΆΠ½Ρ‹ΠΉ Ρ‚Π΅Π³: h3.font-header span span strong.

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

Π’ этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ всС просто: ΠΌΡ‹ ΠΈΠΌΠ΅Π΅ΠΌ Π²Π²ΠΈΠ΄Ρƒ 2 Ρ‚Π΅Π³Π°, ΠΊΠ»ΠΈΠΊ Π½Π° ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π±ΡƒΠ΄ΡƒΡ‚ Π·Π°ΠΏΠΈΡΡ‹Π²Π°Ρ‚ΡŒΡΡ Π² Ρ…Ρ€ΠΎΠ½ΠΎΠ»ΠΎΠ³ΠΈΡŽ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ, ΠΊΠ°ΠΊ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΠ΅ событиС. ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ сСлСктор div.button input[type=»submit»] ΠΎΠ±ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ Π½Π°ΠΌ Π½ΡƒΠΆΠ½Ρ‹ всС Ρ‚Π΅Π³ΠΈ <input>, Π² ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Π΅ΡΡ‚ΡŒ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ type=»submit» ΠΈ ΠΎΠ½ΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΡΠ²Π»ΡΡ‚ΡŒΡΡ Π΄Π΅Ρ‚ΡŒΠΌΠΈ Ρ‚Π΅Π³Π° <div>, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ Π΅ΡΡ‚ΡŒ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚. Π’ ΡƒΠΏΡ€ΠΎΡ‰Π΅Π½Π½ΠΎΠΌ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Π΅ это Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ Ρ‚Π°ΠΊ Π² html (Π½Π° самом сайтС, ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎ, Π±ΡƒΠ΄Π΅Ρ‚ большС всСго Π²ΠΎΠΊΡ€ΡƒΠ³):Β 

<divΒ class=»button»>
<input type=»submit»></input>
</div>

Π’ΡƒΡ‚ ΠΆΠ΅, Ρ‡Π΅Ρ€Π΅Π· Π·Π°ΠΏΡΡ‚ΡƒΡŽ, прописан Π΅Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ сСлСктор: всС Ρ‚Π΅Π³ΠΈ <button> с Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠΌ.

ΠŸΡ€ΠΎΠ²Π΅Ρ€ΠΊΠ° ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ CSS сСлСктора

Π£Π½ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ CSS сСлСктора для нас ΠΎΡ‡Π΅Π½ΡŒ Π²Π°ΠΆΠ½Π°. Если сСлСктор прописан Π½Π΅Π²Π΅Ρ€Π½ΠΎ ΠΈ ΠΎΠ½ Π½Π΅ являСтся ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΌ, Ρ‚ΠΎ сбор Π΄Π°Π½Π½Ρ‹Ρ… Π±ΡƒΠ΄Π΅Ρ‚ Π½Π΅ Ρ‚ΠΎΡ‡Π½Ρ‹ΠΌ, Π° Π·Π½Π°Ρ‡ΠΈΡ‚ — бСсполСзным.Β 

ΠŸΡ€ΠΎΠ²Π΅Ρ€ΠΈΡ‚ΡŒ ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ ΠΌΠΎΠΆΠ½ΠΎ прямо Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅ Ρ‡Π΅Ρ€Π΅Π· поиск Π² ΠΏΠ°Π½Π΅Π»Π΅ Elements. НаТмитС сочСтаниС клавиш Ctrl + F, ΠΈ Π²Π²Π΅Π΄ΠΈΡ‚Π΅ Π² строкС поиска Π½Π°ΠΉΠ΄Π΅Π½Π½Ρ‹ΠΉ Π²Π°ΠΌΠΈ Ρ€Π°Π½Π΅Π΅ CSS сСлСктор. Π‘Ρ€Π°ΡƒΠ·Π΅Ρ€ сам подсвСтит Ρ‚Π΅Π³, ΠΏΡƒΡ‚ΡŒ ΠΊ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌΡƒ Π²Ρ‹ ΡƒΠΊΠ°Π·Π°Π»ΠΈ ΠΈ Π½Π°ΠΏΠΈΡˆΠ΅Ρ‚ количСство Ρ‚Π°ΠΊΠΈΡ… совпадСний Π½Π° страницС.

Π’ Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²Π΅ случаСв, совпадСниС Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄Π½ΠΎ (Π±ΡƒΠ΄Π΅Ρ‚ написано — 1/1). Иногда трСбуСтся, Ρ‡Ρ‚ΠΎΠ±Ρ‹ совпадСний Π±Ρ‹Π»ΠΎ нСсколько, Π½ΠΎ всС ΠΎΠ½ΠΈ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π»ΠΈ Π½Π° Π½ΡƒΠΆΠ½Ρ‹Π΅ Π²Π°ΠΌ Ρ‚Π΅Π³ΠΈ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, свойство «Π’ΠΎΠ²Π°Ρ€Ρ‹ Π² ΠΊΠΎΡ€Π·ΠΈΠ½Π΅» подтягиваСт названия Ρ‚ΠΎΠ²Π°Ρ€ΠΎΠ² ΠΈΠ· списка Ρ‚ΠΎΠ²Π°Ρ€ΠΎΠ² Π² самой ΠΊΠΎΡ€Π·ΠΈΠ½Π΅. ΠŸΡ€ΠΈ настройкС Ρ‚Π°ΠΊΠΎΠ³ΠΎ свойства количСство совпадСний ΠΏΠΎ сСлСкторам Π΄ΠΎΠ»ΠΆΠ½ΠΎ Ρ€Π°Π²Π½ΡΡ‚ΡŒΡΡ Ρ€Π΅Π°Π»ΡŒΠ½ΠΎΠΌΡƒ количСству Ρ‚ΠΎΠ²Π°Ρ€ΠΎΠ² Π² ΠΊΠΎΡ€Π·ΠΈΠ½Π΅ Π½Π° Π΄Π°Π½Π½Ρ‹ΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ‚.

Как ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΈΡ‚ΡŒ, ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ Π²Ρ‹ настроили сбор Π΄Π°Π½Π½Ρ‹Ρ… Π² Carrot quest, ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Π² этой ΡΡ‚Π°Ρ‚ΡŒΠ΅. ΠŸΡ€ΠΈ Π»ΡŽΠ±Ρ‹Ρ… слоТностях — ΠΏΠΈΡˆΠΈΡ‚Π΅ Π½Π°ΠΌ Π² Ρ‡Π°Ρ‚, Π±ΡƒΠ΄Π΅ΠΌ Ρ€Π°Π΄Ρ‹ ΠΏΠΎΠΌΠΎΡ‡ΡŒ.

Бсылки ΠΏΡ€ΠΎΡ‚ΠΈΠ² ΠΊΠ½ΠΎΠΏΠΎΠΊ Π² соврСмСнных Π²Π΅Π±-прилоТСниях β€” CSS-LIVE

ΠŸΠ΅Ρ€Π΅Π²ΠΎΠ΄ ΡΡ‚Π°Ρ‚ΡŒΠΈ Links vs. Buttons in Modern Web Applications с сайта marcysutton.com для CSS-live.ru, Π°Π²Ρ‚ΠΎΡ€ β€” ΠœΠ°Ρ€ΡΠΈ Π‘Π°Ρ‚Ρ‚ΠΎΠ½


Github: ссылки ΠΈΠ»ΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ?

Одна ΠΈΠ· Π²Π΅Ρ‡Π½Ρ‹Ρ… Ρ‚Π΅ΠΌ Π²ΠΎ Ρ„Ρ€ΠΎΠ½Ρ‚Π΅Π½Π΄-доступности β€” Π½Π΅Ρ€Π°Π·Π±Π΅Ρ€ΠΈΡ…Π° ΠΌΠ΅ΠΆΠ΄Ρƒ ссылками ΠΈ ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌΠΈ. Ну, HTML-элСмСнты, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‚ ссылки Π² Π½ΠΎΠ²ΠΎΠΌ ΠΎΠΊΠ½Π΅ ΠΈΠ»ΠΈ ΠΎΡ‚ΠΏΡ€Π°Π²Π»ΡΡŽΡ‚ Ρ„ΠΎΡ€ΠΌΡƒ, Π·Π½Π°Π΅Ρ‚Π΅? Π’ Π²Π΅Π±-прилоТСниях Π½Π° JavaScript ΠΌΡ‹ ΠΏΠΎ-ΠΏΡ€Π΅ΠΆΠ½Π΅ΠΌΡƒ путаСмся, ΠΊΠ°ΠΊΠΎΠΉ элСмСнт Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ для ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ дСйствия. Π§Ρ‚ΠΎΠ±Ρ‹ Ρ€Π°Π·Π²Π΅ΡΡ‚ΡŒ Ρ‚ΡƒΠΌΠ°Π½, я ΠΏΠΎΠΊΠ°ΠΆΡƒ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ использования для ссылок ΠΈ ΠΊΠ½ΠΎΠΏΠΎΠΊ Π² прилоТСниях с отрисовкой Π½Π° ΠΊΠ»ΠΈΠ΅Π½Ρ‚Π΅ ΠΈ ΠΏΠΎΠΌΠΎΠ³Ρƒ Π²Π°ΠΌ ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Ρ‚ΡŒ Π»ΡƒΡ‡ΡˆΠΈΠ΅ Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ с Ρ‚ΠΎΡ‡ΠΊΠΈ зрСния UI.

Кнопки

ΠŸΠΎΡ‡Π΅ΠΌΡƒ-Ρ‚ΠΎ люди становятся Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌΠΈ,Ρ‚Π°ΠΊ ΠΈ Π½Π΅ ΡƒΠ·Π½Π°Π² ΠΏΡ€ΠΎ HTML-элСмСнт <button>. (МнС ΠΈ самой ΠΏΠΎΡ‚Ρ€Π΅Π±ΠΎΠ²Π°Π»ΠΎΡΡŒ нСсколько Π»Π΅Ρ‚, ΠΏΠΎΠΊΠ° я ΡƒΠ·Π½Π°Π»Π°, для Ρ‡Π΅Π³ΠΎ Π½ΡƒΠΆΠ½Ρ‹ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ h2-h6, Ρ‚Π°ΠΊ Ρ‡Ρ‚ΠΎ Π±Ρ‹Π²Π°Π΅Ρ‚). ΠœΠΎΠ³ΡƒΡ‡Π°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΈ ΠΏΡ€Π°Π²Π΄Π° крутая. Π’ΠΎΡ‚ Ρ‡Ρ‚ΠΎ ΠΎΠ½Π° ΠΌΠΎΠΆΠ΅Ρ‚ Π΄Π΅Π»Π°Ρ‚ΡŒ:

  • ΠŸΠΎΠ»ΡƒΡ‡Π°Ρ‚ΡŒ фокус с ΠΊΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€Ρ‹ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ
  • Π”Π΅Π»Π°Ρ‚ΡŒ Β«ΠΊΠ»ΠΈΠΊΒ» ΠΏΠΎ Π½Π°ΠΆΠ°Ρ‚ΠΈΡŽ Π½Π° ΠΏΡ€ΠΎΠ±Π΅Π»
  • ΠžΡ‚ΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ Π΄Π°Π½Π½Ρ‹Π΅ Ρ„ΠΎΡ€ΠΌΡ‹ Π½Π° сСрвСр
  • ΠžΡ‡ΠΈΡ‰Π°Ρ‚ΡŒ Ρ„ΠΎΡ€ΠΌΡƒ
  • Π‘Π»ΠΎΠΊΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° disabled
  • Π”Π°Π²Π°Ρ‚ΡŒ подсказку скринридСру с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ нСявного Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° role="button"
  • ΠŸΠΎΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ состояния ∢focus, ∢hover, ∢active, ∢disabled

Если Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ скрипта,ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΈΠ΄Π΅Π°Π»ΡŒΠ½Ρ‹ΠΉ элСмСнт для:

  • ΠžΡ‚ΠΊΡ€Ρ‹Π²Π°Π½ΠΈΡ модального ΠΎΠΊΠ½Π°
  • Π’Ρ‹Π·ΠΎΠ²Π° Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅Π³ΠΎ мСню
  • ΠŸΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ интСрфСйса
  • ΠŸΡ€ΠΎΠΈΠ³Ρ€Ρ‹Π²Π°Π½ΠΈΡ ΠΌΠ΅Π΄ΠΈΠ°-ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°
  • Вставки с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ JS Π² случаС, Ссли ΠΎΠ½ΠΈ Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ JS

Бсылки

Π’ΠΎΡ‚ нСсколько Π±Π°Π·ΠΎΠ²Ρ‹Ρ… возмоТностСй ссылок, ΠΈΠ»ΠΈ якорСй, ΠΈΠ»ΠΈ Ρ„ΡƒΠ½Π΄Π°ΠΌΠ΅Π½Ρ‚Π° Π²Π΅Π±Π°:

  • Π‘ΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ гипСртСкст,Β  ΡΠ΅Ρ‚ΡŒ ΠΎΠ½Π»Π°ΠΉΠ½-рСсурсов
  • ΠŸΠ΅Ρ€Π΅Π²Π΅ΡΡ‚ΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ Π½Π° Π½ΠΎΠ²ΡƒΡŽ страницу ΠΈΠ»ΠΈ ΠΎΠΊΠ½ΠΎ
  • Π˜Π·ΠΌΠ΅Π½ΡΡ‚ΡŒ URL
  • Π’Ρ‹Π·Π²Π°Ρ‚ΡŒ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π½Ρ‹Π΅ пСрСрисовку/ΠΏΠ΅Ρ€Π΅Π·Π°Π³Ρ€ΡƒΠ·ΠΊΡƒ
  • ΠŸΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒ ΠΏΠΎ якорям Π²Π½ΡƒΡ‚Ρ€ΠΈ страницы
  • Π‘Π²ΡΠ·Ρ‹Π²Π°Ρ‚ΡŒ ΠΌΠ΅ΠΆΠ΄Ρƒ собой Ρ€Π°Π·Π½Ρ‹Π΅ части прилоТСния с отрисовкой Π½Π° ΠΊΠ»ΠΈΠ΅Π½Ρ‚Π΅
  • Бпособны ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Ρ‚ΡŒ фокус ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° href
  • Π Π΅Π³ΠΈΡΡ‚Ρ€ΠΈΡ€ΡƒΡŽΡ‚ ΠΊΠ»ΠΈΠΊ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ клавиши Enter
  • Π˜ΠΌΠ΅ΡŽΡ‚ Π½Π΅ΡΠ²Π½ΡƒΡŽ Ρ€ΠΎΠ»ΡŒ link
  • НС Π±Π»ΠΎΠΊΠΈΡ€ΡƒΡŽΡ‚ΡΡ ΠΊΠ°ΠΊ ΠΊΠ½ΠΎΠΏΠΊΠΈ, Π½ΠΎ ΠΈΡ… ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π½Π΅Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΌΠΈ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ tabindex="-1" ΠΈ aria-hidden="true"
  • ΠœΠΎΠ³ΡƒΡ‚ ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒΡΡ Π² Π½ΠΎΠ²Ρ‹Ρ… ΠΎΠΊΠ½Π°Ρ… (Π° Ρ€Π°Π½ΡŒΡˆΠ΅ β€” ΠΈ Π²ΠΎ Ρ„Ρ€Π΅ΠΉΠΌΠ°Ρ…)
  • ΠŸΠΎΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ состояния ∢link, ∢visited, ∢focus, ∢hover, ∢active

Π›ΠΈΡ‡Π½ΠΎ для мСня самоС Π³Π»Π°Π²Π½ΠΎΠ΅ Ρ€Π°Π·Π»ΠΈΡ‡ΠΈΠ΅ ΠΌΠ΅ΠΆΠ΄Ρƒ ссылкой ΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ β€” Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ ссылки ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°ΡŽΡ‚ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ Π½Π° Π½ΠΎΠ²Ρ‹ΠΉ рСсурс, унося Π΅Π³ΠΎ ΠΈΠ· Ρ‚Π΅ΠΊΡƒΡ‰Π΅Π³ΠΎ контСкста (Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠ΅ ссылки β€” СдинствСнная Π·Π°Π³Π²ΠΎΠ·Π΄ΠΊΠ° здСсь).

Кнопка ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ Π² интСрфСйсС, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π²ΠΈΠ΄Π΅ΠΎ-ΠΏΠ»Π΅Π΅Ρ€,Β ΠΈΠ»ΠΈ Π²Ρ‹Π·Ρ‹Π²Π°Π΅Ρ‚ Π½ΠΎΠ²Ρ‹ΠΉ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ Π² Ρ‚ΠΎΠΌ ΠΆΠ΅ самом контСкстС, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅Π΅ мСню, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‰Π΅Π΅ aria-haspopup.

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ навигация? А Ρ‡Ρ‚ΠΎ ΠΌΠ°Ρ€ΡˆΡ€ΡƒΡ‚ΠΈΠ·Π°Ρ†ΠΈΡ?

ИзмСнСниС URL ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΈΡ‚ Π½Π° Π½ΠΎΠ²ΡƒΡŽ страницу. Π­Ρ‚ΠΎ ΠΏΠ΅Ρ€Π΅Π·Π°Π³Ρ€ΡƒΠΆΠ°Π΅Ρ‚ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ с Π½ΠΎΠ²Ρ‹ΠΌ рСсурсом ΠΈ пСрСрисовываСт пиксСли. Навигация ΠΌΠΎΠΆΠ΅Ρ‚ Π²Ρ‹Π·Ρ‹Π²Π°Ρ‚ΡŒΡΡ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ дСйствий Ρ„ΠΎΡ€ΠΌΡ‹, якорных ссылок ΠΈ JavaScript-свойства location.

Подобно сортировкС писСм Π½Π° ΠΏΠΎΡ‡Ρ‚Π΅, ΠΌΠ°Ρ€ΡˆΡ€ΡƒΡ‚ΠΈΠ·Π°Ρ†ΠΈΡ β€” ΠΌΠ΅Ρ…Π°Π½ΠΈΠ·ΠΌ для ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ сСтСвых запросов с ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΌ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ΠΎΠΌ Π² ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ. ΠœΠ°Ρ€ΡˆΡ€ΡƒΡ‚ΠΈΠ·Π°Ρ‚ΠΎΡ€Ρ‹ β€” общая тСхнология для мноТСства Ρ€Π°Π·Π½Ρ‹Ρ… Π²Π΅Π±-Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΎΠ² (помню, ΠΊΠ°ΠΊ Π½Π° Π·Π°Ρ€Π΅ своСй ΠΊΠ°Ρ€ΡŒΠ΅Ρ€Ρ‹ я Π±Π°Π»Π΄Π΅Π»Π° ΠΎΡ‚ PHPΡˆΠ½Ρ‹Ρ…), ставящая Π² соотвСтствиС прСдставлСния ΠΈ ΠΈΡ… части ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΌ Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚Π°ΠΌ URL. Благодаря написанию динамичСских ΠΌΠ°Ρ€ΡˆΡ€ΡƒΡ‚ΠΎΠ², Π½ΠΎΠ²Ρ‹ΠΉ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ динамичСски (Π±Π΅Π· Ρ…Π°Ρ€Π΄ΠΊΠΎΠ΄Π°)

ΠžΡ‚ΠΊΡƒΠ΄Π° Π²ΠΎΠ·Π½ΠΈΠΊΠ°Π΅Ρ‚ ΠΏΡƒΡ‚Π°Π½ΠΈΡ†Π°?

Π’ ΠΌΠΈΡ€Π΅ клиСнтских Π²Π΅Π±-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ построСнных с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Angular, Ember ΠΈΠ»ΠΈ React, браузСрная пСрСрисовка ΠΌΠΎΠΆΠ΅Ρ‚ Π²Ρ‹Π·Π²Π°Ρ‚ΡŒΡΡ Π² любой ΠΌΠΎΠΌΠ΅Π½Ρ‚. НСмного нСясно, ΠΊΠ°ΠΊΠΎΠΉ элСмСнт Π»ΡƒΡ‡ΡˆΠ΅ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для Π΄Π΅Π»Π°, ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²Ρ‹ΠΏΠΎΠ»Π½ΡΡ‚ΡŒ Ρ‚ΠΎΡ‚ ΠΆΠ΅ ΠΊΠΎΠ΄, Ρ‡Ρ‚ΠΎ для ΠΌΠ°Ρ€ΡˆΡ€ΡƒΡ‚Π°, Π½ΠΎ с ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠΌ ΠΊΠ»ΠΈΠΊΠ° ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΈ Π±Π΅Π· измСнСния URL. К ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρƒ, Ссли я ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°ΡŽ панСль Π½Π°Π΄ ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΌ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ΠΎΠΌ страницы, я ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠΆΡƒ сюда ΠΈΠ»ΠΈ ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°ΡŽ интСрфСйс? Зависит Π»ΠΈ это ΠΎΡ‚ Ρ‚ΠΎΠ³ΠΎ, Π΅ΡΡ‚ΡŒ Π»ΠΈ Ρƒ этой ΠΏΠ°Π½Π΅Π»ΠΈ свой собствСнный URL? Π’ΠΎΡ‚ ΠΊΠΎΠ΄, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ я Π²ΠΈΠ΄Π΅Π»Π° Π½Π΅Π΄Π°Π²Π½ΠΎ:

<a href="#" tabindex="0" ng-click="userPicker.userClicked(true)" aria-label="Some username"></a>

По ΠΏΠ΅Ρ€Π²ΠΎΠΌΡƒ Π²ΠΏΠ΅Ρ‡Π°Ρ‚Π»Π΅Π½ΠΈΡŽ я посчитала, Ρ‡Ρ‚ΠΎ это Π½Π°Π΄ΠΎ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π½Π° элСмСнт button, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ Π½Π΅Ρ‚ значСния Π² href, Π½ΠΎ Π΅ΡΡ‚ΡŒ tabindex="0" ΠΈ привязка ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ° ng-click. Выглядит ΠΎΡ‡Π΅Π²ΠΈΠ΄Π½ΠΎ, Π΄Π°? МнС сказали, Ρ‡Ρ‚ΠΎ ΠΎΠ½ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΎΡΡ‚Π°Π²Π°Ρ‚ΡŒΡΡ якорСм, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ Β«ΠΎΠ½ пСрСнаправляСт Π½Π° внСшниС ссылки ΠΈ страницу профиля». Π­Ρ‚ΠΎ стало ясно Ρ‚ΠΎΠ»ΡŒΠΊΠΎ послС изучСния JavaScript-ΠΊΠΎΠ΄Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ вызываСтся Π²ΠΎ ΠΌΠ½ΠΎΠ³ΠΈΡ… ΠΏΠΎΠ΄ΠΎΠ±Π½Ρ‹Ρ… мСстах ΠΏΠΎ привязкС ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ° ng-click Π½Π° элСмСнтС button. НСуТСли ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ Π½Π°Π΄ΠΎ Ρ‚Π°ΠΊ Π³Π»ΡƒΠ±ΠΎΠΊΠΎ ΠΊΠΎΠΏΠ°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠΌΠΎΡ‡ΡŒ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½Ρ‹ΠΉ элСмСнт?

Если Π² чисто клиСнтском ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ фокус обрабатываСтся ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ, это ΠΌΠΎΠΆΠ΅Ρ‚ Π½Π΅ ΡΠΊΠ°Π·Π°Ρ‚ΡŒΡΡ Π½Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ β€” Ρƒ ссылки

ng-click ΠΈ tabindex останСтся ΠΏΠΎ-ΠΏΡ€Π΅ΠΆΠ½Π΅ΠΌΡƒ нСявная Ρ€ΠΎΠ»ΡŒ ссылки. Однако,ΠΏΡ€ΠΈ Π΄Π΅ΠΊΠ»Π°Ρ€Π°Ρ‚ΠΈΠ²Π½ΠΎΠΌ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄Π΅ Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ Π»ΡƒΡ‡ΡˆΠ΅ Π±Ρ‹Π»ΠΎ Π±Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π·Π°ΠΏΠΎΠ»Π½Π΅Π½Π½Ρ‹ΠΉ href ΠΈ ΠΌΠ°Ρ€ΡˆΡ€ΡƒΡ‚ΠΈΠ·Π°Ρ†ΠΈΡŽ, Ссли ΡΠΊΠΎΡ€ΡŒ пСрСнаправляСт ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ Π½Π° Π½ΠΎΠ²Ρ‹ΠΉ рСсурс. Tabindex ΠΈ события click, привязанныС ΠΊ Ρ‚Π΅Π³Ρƒ ссылки β€” Π°Π½Ρ‚ΠΈΠΏΠ°Ρ‚Π΅Ρ€Π½ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π΅Ρ‰Π΅ аукнСтся Ρ‚Π΅ΠΌ, ΠΊΡ‚ΠΎ ΠΏΠΎΠ·Π΄Π½Π΅Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΈΡΠ°Ρ‚ΡŒ ΠΊΠΎΠ΄ ΠΈ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΡΡ‚ΡŒ Π΅Π³ΠΎ.

Если Π΄Π΅Π»Π°Ρ‚ΡŒ ΠΌΠ°Ρ€ΡˆΡ€ΡƒΡ‚ΠΈΠ·Π°Ρ†ΠΈΡŽ основной Ρ‡Π°ΡΡ‚ΡŒΡŽ Π²Π΅Π±-прилоТСния, Ρ‚ΠΎ Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌ Π±ΡƒΠ΄Π΅Ρ‚ Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΡ€ΠΎΡ‰Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ссылки ΠΈ ΠΏΠΎΠ½ΡΡ‚ΡŒ ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΎΠΊ. А Π΅Ρ‰Π΅ с Π½ΠΈΠΌ ΠΏΡ€ΠΎΡ‰Π΅ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ сСрвСрныС JavaScript-прилоТСния с прогрСссивным ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½ΠΈΠ΅ΠΌ, ΠΏΠΎΠ»ΡŒΠ·ΡƒΡΡΡŒ шаблонами URL, Π° Π½Π΅ полагаясь Π½Π° события ΠΏΠΎ ΠΊΠ»ΠΈΠΊΡƒ.

Роль UX Π² Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ доступных ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ

Π― скаТу это вслух: эта ΠΏΡƒΡ‚Π°Π½ΠΈΡ†Π° часто начинаСтся с Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΈ UX. ΠšΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΏΡ€ΠΈΡ…ΠΎΠ΄ΠΈΡ‚ ΠΊ Π½Π°ΠΌ с ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½Ρ‹ΠΌΠΈ ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌΠΈ интСрфСйса, ΠΈ β€” ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ Ρ‚Π°ΠΊ Π½Π°Π΄ΠΎ β€” Π² ΠΊΠΎΠ΄Π΅ ΠΎΠ½ΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ ссылками. Π“Π΄Π΅ это становится ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠΎΠΉ?

Если ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ скринридСра обратится Π² Ρ‚Π΅Ρ…ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΡƒ ΠΈ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ ΠΈΠ½ΡΡ‚Ρ€ΡƒΠΊΡ†ΠΈΡŽ Β«ΠΊΠ»ΠΈΠΊΠ½ΡƒΡ‚ΡŒ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒΒ» Π² вашСм UI, которая Π½Π° самом Π΄Π΅Π»Π΅ написана Π² ΠΊΠΎΠ΄Π΅ ΠΊΠ°ΠΊ ссылка, для Π½Π΅Π³ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΎΠΊΠ°Π·Π°Ρ‚ΡŒΡΡ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠΎΠΉ Π½Π°ΠΉΡ‚ΠΈ Π΅Π΅. НС Π·Π°Π±Ρ‹Π²Π°ΠΉΡ‚Π΅ ΠΈ ΠΎ голосовых интСрфСйсах: Ссли Π²Ρ‹ произнСсётС ΠΊΠΎΠΌΠ°Π½Π΄Ρƒ ΠΊΠ»ΠΈΠΊΠ½ΡƒΡ‚ΡŒ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ, которая Π² ΠΊΠΎΠ΄Π΅ ΠΏΠΎΡ…ΠΎΠΆΠ° Π½Π° ссылку, Π²Ρ‹ ΡΡ‚ΠΎΠ»ΠΊΠ½Π΅Ρ‚Π΅ΡΡŒ с ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ°ΠΌΠΈ, Π½Π΅Ρ‚?

Π€Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΈ, ΠΏΠΎ ΠΎΠ±Ρ‰Π΅ΠΌΡƒ ΠΏΡ€ΠΈΠ·Π½Π°Π½ΠΈΡŽ, ΡΡ‚ΠΈΡ€Π°ΡŽΡ‚ эту Π³Ρ€Π°Π½ΡŒ ΠΈ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΡΠΏΠΎΡΠΎΠ±ΡΡ‚Π²ΡƒΡŽΡ‚ Π²Ρ‹Π±ΠΎΡ€Ρƒ Π½Π΅ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎΠ³ΠΎ элСмСнта, ΠΊΠ°ΠΊ Π² ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ с ng-click Π²Ρ‹ΡˆΠ΅. МоТно ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ JavaScript для запуска асинхронной ΠΎΡ‚ΠΏΡ€Π°Π²ΠΊΠΈ Ρ„ΠΎΡ€ΠΌΡ‹ Π½Π° Π½ΡƒΠΆΠ½ΠΎΠΌ Π½Π°ΠΌ элСмСнтС (Π΄Π°ΠΆΠ΅ Π±Π΅Π· Ρ‚Π΅Π³Π° <form>, Π½ΠΎ это Π΅Ρ‰Π΅ Π½Π΅ ΠΏΠΎΠ²ΠΎΠ΄ ΠΎΡ‚ Π½Π΅Π³ΠΎ ΠΎΡ‚ΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒΡΡ). Аналогично, ΠΌΠΎΠΆΠ½ΠΎ ΠΈΠ½ΠΈΡ†ΠΈΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ измСнСния прСдставлСния Π±Π΅Π· ΠΌΠ°Ρ€ΡˆΡ€ΡƒΡ‚ΠΈΠ·Π°Ρ†ΠΈΠΈ, Π΄Π°ΠΆΠ΅ Ссли ΠΈΡ… Π»ΡƒΡ‡ΡˆΠ΅ всСго ΠΎΠ±Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Ρ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ссылки. Одни элСмСнты подходят Π² ΠΎΠ΄Π½ΠΎΠΌ случаС, Π΄Ρ€ΡƒΠ³ΠΈΠ΅ β€” Π² Π΄Ρ€ΡƒΠ³ΠΎΠΌ: всё Π΄Π΅Π»ΠΎ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π½Π°Ρ‚ΠΈΠ²Π½Ρ‹Π΅ возмоТности этого элСмСнта ΠΏΠΎ максимуму.

Π—Π°ΠΌΠ΅Ρ‚ΠΈΠ»ΠΈ Ρ€Π°Π·Π½ΠΈΡ†Ρƒ?

Π§Ρ‚ΠΎ ΠΌΠΎΠΆΠ½ΠΎ для этого ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ?

Π’Π΅Ρ€Π½ΠΈΡ‚Π΅ΡΡŒ ΠΊ Π΄ΠΈΠ·Π°ΠΉΠ½Ρƒ ΠΈ сдСлайтС ссылки ΠΏΠΎΡ…ΠΎΠΆΠΈΠΌΠΈ Π½Π° ссылки, Π° ΠΊΠ½ΠΎΠΏΠΊΠΈ β€” Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠΈ. Π‘Π΅Π· двусмыслСнности Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌ станСт Π»Π΅Π³Ρ‡Π΅ ΠΏΠΈΡΠ°Ρ‚ΡŒ Π±ΠΎΠ»Π΅Π΅ доступный ΠΊΠΎΠ΄, Π»ΡƒΡ‡ΡˆΠ΅ ΠΎΡ‚Π²Π΅Ρ‡Π°ΡŽΡ‰ΠΈΠΉ оТиданиям ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ.

(МоТно Π»ΠΈ ΠΊΠ»ΠΈΠΊΠ½ΡƒΡ‚ΡŒ ΠΏΡ€Π°Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ ΠΌΡ‹ΡˆΠΈ Π½Π° эту ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚Π½ΡƒΡŽ ΠΊΠ½ΠΎΠΏΠΊΡƒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ Π² Π½ΠΎΠ²ΠΎΠΌ ΠΎΠΊΠ½Π΅?)

Π’ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅:

  • Если ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ скринридСра ΠΏΠ΅Ρ€Π΅ΠΉΠ΄Π΅Ρ‚ Ρ‚Π°Π±ΠΎΠΌ Π½Π° ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΉ элСмСнт, подскаТСт Π»ΠΈ Ρ€ΠΎΠ»ΡŒ этого элСмСнта, Ρ‡Π΅Π³ΠΎ ΠΎΡ‚ Π½Π΅Π³ΠΎ ΠΆΠ΄Π°Ρ‚ΡŒ? (Π£Π²ΠΎΠ΄ΠΈΡ‚ Π»ΠΈ ΠΎΠ½ ΠΊΡƒΠ΄Π°-Ρ‚ΠΎ с Ρ‚Π΅ΠΊΡƒΡ‰Π΅ΠΉ страницы? Об этом Ρ…ΠΎΡ€ΠΎΡˆΠΎ Π±Ρ‹ ΡƒΠ·Π½Π°Ρ‚ΡŒ Π·Π°Ρ€Π°Π½Π΅Π΅.)
  • ΠžΡ‚ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚Π΅ ссылочныС Ρ„ΠΈΡ‡ΠΈ Ρ‚ΠΈΠΏΠ° смСны URL ΠΈΠ»ΠΈ ΠΏΡ€Π°Π²ΠΎΠ³ΠΎ ΠΊΠ»ΠΈΠΊΠ°? ΠŸΠΎΠ΄ΡƒΠΌΠ°ΠΉΡ‚Π΅ ΠΎ ΠΊΠ½ΠΎΠΏΠΊΠ΅.
  • ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΠΉΡ‚Π΅ ΠΌΠ°Ρ€ΡˆΡ€ΡƒΡ‚ΠΈΠ·Π°Ρ†ΠΈΡŽ Π² вашСм ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ href, ng-href, ΠΈ Ρ‚Π°ΠΊ Π΄Π°Π»Π΅Π΅.
  • Навигация ΠΏΠΎ страницам заслуТиваСт измСнСния Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° ΠΈ истории.

Π­Ρ‚ΠΎ Π΅Ρ‰Ρ‘ Π½Π΅ ΠΊΠΎΠ½Π΅Ρ†.

Π£Π²Π΅Ρ€Π΅Π½Π°, Ρ‡Ρ‚ΠΎ ΠΊ этой Ρ‚Π΅ΠΌΠ΅ придСтся Π²Π΅Ρ‡Π½ΠΎ Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Ρ‚ΡŒΡΡ снова ΠΈ снова, ΠΊΠ°ΠΊ ΠΈ всС эти Π³ΠΎΠ΄Ρ‹. Воплощая интСрфСйс Π² ΠΊΠΎΠ΄Π΅, Π²Π°ΠΌ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ Ρ€Π°Π· придСтся с Ρ‚Ρ€ΡƒΠ΄ΠΎΠΌ Π²Ρ‹Π±ΠΈΡ€Π°Ρ‚ΡŒ, ΠΊΠ°ΠΊΠΎΠΉ элСмСнт ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½Ρ‹ΠΉ Π² Π΄Π°Π½Π½ΠΎΠΌ случаС… ΠΈ Π΅ΡΡ‚ΡŒ ΡƒΠΉΠΌΠ° способов ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΎΠ΄Π½ΠΎ ΠΈ Ρ‚ΠΎ ΠΆΠ΅. И Ссли ΠΏΡ€ΠΈ этом Π²Ρ‹ ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Π΅Ρ‚Π΅ ΠΊΠΎΠΌΠΏΠ΅Ρ‚Π΅Π½Ρ‚Π½Ρ‹Π΅ Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ, Ρ‚ΠΎ это Π»ΡƒΡ‡ΡˆΠ΅Π΅, Ρ‡Ρ‚ΠΎ Π² Π²Π°ΡˆΠΈΡ… силах.

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

P.S. Π­Ρ‚ΠΎ Ρ‚ΠΎΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ интСрСсно:
Π“Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€ ΠΊΠ½ΠΎΠΏΠΎΠΊ CSS

| Π˜Π½Ρ‚Π΅Ρ€Ρ„Π΅ΠΉΡΠ½Ρ‹Π΅ инструмСнты

Π˜Π½Ρ‚Π΅Ρ€Ρ„Π΅ΠΉΡΠ½Ρ‹Π΅ инструмСнты

Π­Ρ‚ΠΎ Π²Ρ‹ΡΠΎΠΊΠΎΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ инструмСнт для автоматичСского создания ΠΊΠ½ΠΎΠΏΠΎΠΊ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ позволяСт ΠΈΠ½Ρ‚ΡƒΠΈΡ‚ΠΈΠ²Π½ΠΎ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΠΈ.
Π¦Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°, градация Ρ„ΠΎΠ½Π°, Ρ‚Π΅Π½ΡŒ ΠΊΠ½ΠΎΠΏΠΊΠΈ (Ρ‚Π΅Π½ΡŒ Π±Π»ΠΎΠΊΠ°), Ρ‚Π΅Π½ΡŒ символа (Ρ‚Π΅Π½ΡŒ тСкста), Ρ€Π°Π·ΠΌΠ΅Ρ€ (ΡˆΠΈΡ€ΠΈΠ½Π°, высота), Π³Ρ€Π°Π½ΠΈΡ†Π° (Π³Ρ€Π°Π½ΠΈΡ†Π°), Π·Π°ΠΊΡ€ΡƒΠ³Π»Π΅Π½Π½Ρ‹Π΅ ΡƒΠ³Π»Ρ‹ (Π³Ρ€Π°Π½ΠΈΡ†Π°-радиус), соотвСтствуСт ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Ρƒ (анимация) ΠΈ Ρ‚. Π΄.
ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΎΠ½ Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ псСвдоэлСмСнты (Π΄ΠΎ, послС), Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΌΡ‹ΡˆΠΈ (Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠ΅) ΠΈ псСвдоэлСмСнты послС навСдСния ΠΌΡ‹ΡˆΠΈ, ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΠΈ с Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹ΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ.
20 Ρ‚ΠΈΠΏΠΎΠ² ΠΎΠ±Ρ€Π°Π·Ρ†ΠΎΠ² Π£ нас Π΅ΡΡ‚ΡŒ Π²Ρ‹ΡˆΠ΅ΠΏΠ΅Ρ€Π΅Ρ‡ΠΈΡΠ»Π΅Π½Π½ΠΎΠ΅!

ΠžΠ±Ρ€Π°Π·Π΅Ρ† списка. Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Ρ‚ΠΎΡ‚, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ Ρ‚ΠΎΡ‡Π½ΠΎ соотвСтствуСт ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡŽ Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ. МоТно Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ послС Π²Ρ‹Π±ΠΎΡ€Π°.

ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΈ Π²Ρ‹Π±ΠΎΡ€Π΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° Π² спискС ΠΎΠ±Ρ€Π°Π·Ρ†ΠΎΠ² всС Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΡƒΠ΅ΠΌΡ‹Π΅ Π΄Π°Π½Π½Ρ‹Π΅ Π±ΡƒΠ΄ΡƒΡ‚ пСрСзаписаны.

  • γƒœγ‚Ώγƒ³

    Π‘ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠ΅ΠΉ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ

  • γƒœγ‚Ώγƒ³

    Π‘ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠ΅ΠΉ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ

  • 900 04 γƒœγ‚Ώγƒ³

    Π‘ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠ΅ΠΉ навСдСния

  • γƒœγ‚Ώγƒ³

    Π‘ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠ΅ΠΉ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ

  • γƒœγ‚Ώγƒ³

    Π‘ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠ΅ΠΉ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ

  • 9000 4 γƒœγ‚Ώγƒ³

    Π‘ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠ΅ΠΉ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ

  • γƒœγ‚Ώγƒ³

  • γƒœγ‚Ώγƒ³

  • γƒœγ‚Ώγƒ³

    Π‘ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠ΅ΠΉ навСдСния

  • γƒœγ‚Ώγƒ³

  • γƒœγ‚Ώγƒ³

  • γƒœγ‚Ώγƒ³

    Π‘ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠ΅ΠΉ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ 900 03

  • γƒœγ‚Ώγƒ³

    Π‘ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠ΅ΠΉ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ

  • γƒœγ‚Ώγƒ³

    Π‘ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠ΅ΠΉ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ

  • γƒœγ‚Ώγƒ³

    Π‘ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠ΅ΠΉ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ

  • 9000 4 γƒœγ‚Ώγƒ³

    Π‘ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠ΅ΠΉ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ

  • γƒœγ‚Ώγƒ³

    Π‘ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠ΅ΠΉ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ

  • γƒœγ‚Ώγƒ³

    Π‘ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠ΅ΠΉ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ

  • γƒœγ‚Ώγƒ³

    Π‘ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠ΅ΠΉ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ

  • γƒœγ‚Ώγƒ³

    Π‘ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠ΅ΠΉ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ

  • 900 04 γƒœγ‚Ώγƒ³

    Π‘ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠ΅ΠΉ навСдСния

  • γƒœγ‚Ώγƒ³

    Π‘ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠ΅ΠΉ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ

γƒœγ‚Ώγƒ³

анимация ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π²ΠΊΠ»ΡŽΡ‡Π΅Π½Π°

900 04 . original-button {

Β Β display: flex;

Β Β align-items: center;

Β Β Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅-ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°: ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ;

Β Β line-height: 1;

Β Β text-decoration: Π½Π΅Ρ‚;

Β Β Ρ†Π²Π΅Ρ‚: #ffffff;

Β Β Ρ€Π°Π·ΠΌΠ΅Ρ€ ΡˆΡ€ΠΈΡ„Ρ‚Π°: 18 пиксСлСй;

Β Β border-radius: 5px;

Β Β ΡˆΠΈΡ€ΠΈΠ½Π°: 200 пиксСлСй;

  высота: 40 пиксСлСй;

Β Β ΡˆΡ€ΠΈΡ„Ρ‚: ΠΏΠΎΠ»ΡƒΠΆΠΈΡ€Π½Ρ‹ΠΉ;

Β Β ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄: 0,3 с;

}

.original-button:hover {

Β Β Π½Π΅ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΡΡ‚ΡŒ: .7;

}

Π Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ стилСй

ΡˆΠΈΡ€ΠΈΠ½Π°

px

высота

px

Π‘Π΄Π΅Π»Π°Ρ‚ΡŒ Ρ„ΠΎΠ½ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ΠΎΠΌ

9000 2 font-size(px)

px

Π£ΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Π³Ρ€Π°Π½ΠΈΡ†Ρƒ

Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Ρ‚Π΅Π½ΡŒ ΠΊΠ½ΠΎΠΏΠΊΠ°

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

Π΄ΠΎ/послС (псСвдоэлСмСнт), настройка навСдСния

Π£ΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅

ΠžΠ±Ρ‰ΠΈΠ΅ настройки для Π΄ΠΎ ΠΈ послС

Π£ΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Π΄ΠΎ

Π£ΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ послС

Π£ΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠ΅

​

Π½Π΅ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΡΡ‚ΡŒ: . 7;

Π£ΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ

transition-duration

с

ΠžΠ±Ρ‰ΠΈΠ΅ настройки для Π΄ΠΎ ΠΈ послС ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ

Π£ΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Π΄ΠΎ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ

Π£ΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ послС ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ

Π”Ρ€ΡƒΠ³ΠΈΠ΅ характСристики

Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ (ΠΏΠ΅Ρ€Π΅Π·Π°ΠΏΠΈΡΠ°Ρ‚ΡŒ) CSS

  • ΠŸΠΎΠ»ΠΈΡ‚ΠΈΠΊΠ° ΠΊΠΎΠ½Ρ„ΠΈΠ΄Π΅Π½Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ
  • ΠžΡ‚ΠΊΠ°Π· ΠΎΡ‚ отвСтствСнности
  • ΠšΠΎΠ½Ρ‚Π°ΠΊΡ‚Ρ‹

ΠœΠ΅Ρ‚ΠΎΠ΄Ρ‹ ΠΈ рСсурсы β€” Smashing Magazine

  • 12 ΠΌΠΈΠ½ΡƒΡ‚ чтСния
  • ΠšΠΎΠ΄ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅, Кнопки, CSS, Π’Π΅Ρ…Π½ΠΈΠΊΠΈ, Essentials
  • ΠŸΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ Π² Twitter, LinkedIn
Об Π°Π²Ρ‚ΠΎΡ€Π΅

Π―Π½ΠΊΠΎ Π™ΠΎΠ²Π°Π½ΠΎΠ²ΠΈΡ‡ β€” Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса, ΠΈΠ½ΠΆΠ΅Π½Π΅Ρ€-программист, Π±Π»ΠΎΠ³Π΅Ρ€, спикСр ΠΈ Ρ…ΡƒΠ΄ΠΎΠΆΠ½ΠΈΠΊ. Π’ свободноС врСмя ΠΎΠ½ ΠΏΠΈΡˆΠ΅Ρ‚ ΠΎ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΡ… интСрфСйсах Π² своСм блогС… Π‘ΠΎΠ»ΡŒΡˆΠ΅ ΠΎ Janko ↬

Кнопки, нСзависимо ΠΎΡ‚ ΠΈΡ… назначСния, ΡΠ²Π»ΡΡŽΡ‚ΡΡ Π²Π°ΠΆΠ½Ρ‹ΠΌΠΈ элСмСнтами Π΄ΠΈΠ·Π°ΠΉΠ½Π°.
Они ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎΠΉ Ρ‚ΠΎΡ‡ΠΊΠΎΠΉ Π²Π΅Π±-Ρ„ΠΎΡ€ΠΌΡ‹ ΠΈΠ»ΠΈ ΠΏΡ€ΠΈΠ·Ρ‹Π²ΠΎΠΌ ΠΊ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡŽ. Π£ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ΠΎΠ² Π΅ΡΡ‚ΡŒ ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΡ€ΠΈΡ‡ΠΈΠ½ для оформлСния ΠΊΠ½ΠΎΠΏΠΎΠΊ, Π² Ρ‚ΠΎΠΌ числС для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΈΡ… Π±ΠΎΠ»Π΅Π΅ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌΠΈ ΠΈ ΠΏΠΎΠ²Ρ‹ΡΠΈΡ‚ΡŒ удобство использования. Однако ΠΎΠ΄Π½ΠΎΠΉ ΠΈΠ· Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ Π²Π°ΠΆΠ½Ρ‹Ρ… ΠΏΡ€ΠΈΡ‡ΠΈΠ½ являСтся Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ стандартныС ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΌΠΎΠ³ΡƒΡ‚ Π»Π΅Π³ΠΊΠΎ ΠΏΡ€ΠΎΠΏΡƒΡΡ‚ΠΈΡ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ , ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΈ часто ΠΏΠΎΡ…ΠΎΠΆΠΈ Π½Π° элСмСнты Π² ΠΈΡ… ΠΎΠΏΠ΅Ρ€Π°Ρ†ΠΈΠΎΠ½Π½ΠΎΠΉ систСмС. Π—Π΄Π΅ΡΡŒ ΠΌΡ‹ прСдставляСм Π²Π°ΠΌ нСсколько Ρ‚Π΅Ρ…Π½ΠΈΠΊ ΠΈ руководств, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠΌΠΎΠ³ΡƒΡ‚ Π²Π°ΠΌ Π½Π°ΡƒΡ‡ΠΈΡ‚ΡŒΡΡ ΡΡ‚ΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΠΈ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS. ΠœΡ‹ Ρ‚Π°ΠΊΠΆΠ΅ рассмотрим удобство использования. ΠŸΡ€Π΅ΠΆΠ΄Π΅ Ρ‡Π΅ΠΌ ΠΌΡ‹ объясним, ΠΊΠ°ΠΊ ΡΡ‚ΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΠΈ, Π΄Π°Π²Π°ΠΉΡ‚Π΅ проясним распространСнноС Π·Π°Π±Π»ΡƒΠΆΠ΄Π΅Π½ΠΈΠ΅: ΠΊΠ½ΠΎΠΏΠΊΠΈ β€” это Π½Π΅ ссылки. Основная Ρ†Π΅Π»ΡŒ ссылки β€” ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒΡΡ ΠΌΠ΅ΠΆΠ΄Ρƒ страницами ΠΈ прСдставлСниями, Ρ‚ΠΎΠ³Π΄Π° ΠΊΠ°ΠΊ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ Π²Ρ‹ΠΏΠΎΠ»Π½ΡΡ‚ΡŒ дСйствиС (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΎΡ‚ΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ Ρ„ΠΎΡ€ΠΌΡƒ).

Кнопки, нСзависимо ΠΎΡ‚ ΠΈΡ… назначСния, ΡΠ²Π»ΡΡŽΡ‚ΡΡ Π²Π°ΠΆΠ½Ρ‹ΠΌΠΈ элСмСнтами Π΄ΠΈΠ·Π°ΠΉΠ½Π°. Они ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎΠΉ Ρ‚ΠΎΡ‡ΠΊΠΎΠΉ Π²Π΅Π±-Ρ„ΠΎΡ€ΠΌΡ‹ ΠΈΠ»ΠΈ ΠΏΡ€ΠΈΠ·Ρ‹Π²ΠΎΠΌ ΠΊ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡŽ. Π£ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ΠΎΠ² Π΅ΡΡ‚ΡŒ ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΡ€ΠΈΡ‡ΠΈΠ½ для оформлСния ΠΊΠ½ΠΎΠΏΠΎΠΊ, Π² Ρ‚ΠΎΠΌ числС для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΈΡ… Π±ΠΎΠ»Π΅Π΅ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌΠΈ ΠΈ ΠΏΠΎΠ²Ρ‹ΡΠΈΡ‚ΡŒ удобство использования.

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

Π’ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π²Ρ‹ Π·Π°Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Π²Π·Π³Π»ΡΠ½ΡƒΡ‚ΡŒ Π½Π° ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ ΡΡ‚Π°Ρ‚ΡŒΠΈ ΠΏΠΎ Ρ‚Π΅ΠΌΠ΅:

  • НаТатиС ΠΊΠ½ΠΎΠΏΠΎΠΊ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS3
  • ОсвоСниС CSS, Ρ‡Π°ΡΡ‚ΡŒ 1: стилизация элСмСнтов Π΄ΠΈΠ·Π°ΠΉΠ½Π°
  • Π Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° ссылок Β«ΠŸΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅Β» ΠΈ Β«ΠŸΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚ΡŒ Ρ‡Ρ‚Π΅Π½ΠΈΠ΅Β»
  • Π­Π»Π΅ΠΌΠ΅Π½Ρ‚Ρ‹ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π°: ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ ΠΈ Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°Ρ†ΠΈΠΈ

ΠŸΡ€Π΅ΠΆΠ΄Π΅ Ρ‡Π΅ΠΌ ΠΌΡ‹ объясним, ΠΊΠ°ΠΊ ΠΎΡ„ΠΎΡ€ΠΌΠ»ΡΡ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΠΈ, Π΄Π°Π²Π°ΠΉΡ‚Π΅ проясним распространСнноС Π·Π°Π±Π»ΡƒΠΆΠ΄Π΅Π½ΠΈΠ΅: ΠΊΠ½ΠΎΠΏΠΊΠΈ β€” это Π½Π΅ ссылки. Основная Ρ†Π΅Π»ΡŒ ссылки β€” ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒΡΡ ΠΌΠ΅ΠΆΠ΄Ρƒ страницами ΠΈ прСдставлСниями, Ρ‚ΠΎΠ³Π΄Π° ΠΊΠ°ΠΊ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ Π²Ρ‹ΠΏΠΎΠ»Π½ΡΡ‚ΡŒ дСйствиС (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΎΡ‚ΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ Ρ„ΠΎΡ€ΠΌΡƒ).

Π‘ΠΎΠ»ΡŒΡˆΠ΅ послС ΠΏΡ€Ρ‹ΠΆΠΊΠ°! ΠŸΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚ΡŒ Ρ‡Ρ‚Π΅Π½ΠΈΠ΅ ниТС ↓

Π’ ΠΎΠ΄Π½ΠΎΠΉ ΠΈΠ· своих статСй Π―ΠΊΠΎΠ± НильсСн ΠΏΠΈΡˆΠ΅Ρ‚ ΠΎ ΠΊΠΎΠΌΠ°Π½Π΄Π½Ρ‹Ρ… ссылках, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²Π»ΡΡŽΡ‚ собой смСсь ссылок ΠΈ ΠΊΠ½ΠΎΠΏΠΎΠΊ. Но ΠΎΠ½ Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΠΎΠ²Π°Π» ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡ΠΈΠ²Π°Ρ‚ΡŒ ΠΊΠΎΠΌΠ°Π½Π΄Π½Ρ‹Π΅ ссылки дСйствиями с Π½Π΅Π·Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌΠΈ послСдствиями ΠΈ второстСпСнными ΠΊΠΎΠΌΠ°Π½Π΄Π°ΠΌΠΈ. Π§Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ·Π½Π°Ρ‚ΡŒ большС ΠΎ ΠΏΠ΅Ρ€Π²ΠΈΡ‡Π½Ρ‹Ρ… ΠΈ Π²Ρ‚ΠΎΡ€ΠΈΡ‡Π½Ρ‹Ρ… ΠΊΠΎΠΌΠ°Π½Π΄Π°Ρ… (ΠΈ дСйствиях), ΠΎΠ·Π½Π°ΠΊΠΎΠΌΡŒΡ‚Π΅ΡΡŒ с ΠΏΠ΅Ρ€Π²ΠΈΡ‡Π½Ρ‹ΠΌΠΈ ΠΈ Π²Ρ‚ΠΎΡ€ΠΈΡ‡Π½Ρ‹ΠΌΠΈ дСйствиями Π² Π²Π΅Π±-Ρ„ΠΎΡ€ΠΌΠ°Ρ… Π›ΡŽΠΊΠ° ВроблСвски. Π§Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ·Π½Π°Ρ‚ΡŒ большС ΠΎ различиях ΠΌΠ΅ΠΆΠ΄Ρƒ ссылками ΠΈ ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌΠΈ, ΠΏΡ€ΠΎΡ‡ΠΈΡ‚Π°ΠΉΡ‚Π΅ Β«Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹Ρ… ссылок ΠΈ ΠΊΠ½ΠΎΠΏΠΎΠΊ Π½Π° UXBoothΒ».

ΠžΡΠ½ΠΎΠ²Π½Ρ‹Π΅ стили

Π‘Π°ΠΌΡ‹ΠΉ простой способ ΡΡ‚ΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ ссылки ΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ β€” Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°, отступы ΠΈ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹. НиТС ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Ρ‹ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ ΠΊΠΎΠ΄Π° для ссылки,

ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΈ Π²Π²ΠΎΠ΄Π° (Β«ΠžΡ‚ΠΏΡ€Π°Π²ΠΈΡ‚ΡŒΒ»).

 ΠžΠ±Ρ€Π°Π·Π΅Ρ† ΠΊΠ½ΠΎΠΏΠΊΠΈ
  
   
 .button {
  отступ: 5px;
  Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°: #dcdcdc;
  Π³Ρ€Π°Π½ΠΈΡ†Π°: 1px сплошная #666;
  Ρ†Π²Π΅Ρ‚:#000;
  тСкстовоС ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅: Π½Π΅Ρ‚;
} 

Π­Ρ‚ΠΎΡ‚ простой ΠΊΠΎΠ΄ сводит ΠΊ ΠΌΠΈΠ½ΠΈΠΌΡƒΠΌΡƒ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹Π΅ различия ΠΌΠ΅ΠΆΠ΄Ρƒ ссылками ΠΈ ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌΠΈ. А Π²ΠΎΡ‚ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ ΠΊΠΎΠ΄Π° Π²Ρ‹ΡˆΠ΅:

Π’Π°ΠΆΠ½ΠΎ ΠΎΡ‚ΠΌΠ΅Ρ‚ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ эти Ρ‚Ρ€ΠΈ элСмСнта ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‚ΡΡ ΠΏΠΎ-Ρ€Π°Π·Π½ΠΎΠΌΡƒ с ΠΎΠ΄Π½ΠΈΠΌ ΠΈ Ρ‚Π΅ΠΌ ΠΆΠ΅ CSS . Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Ρ‚Ρ‰Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ ΡΡ‚ΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ эти элСмСнты, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ±Π΅ΡΠΏΠ΅Ρ‡ΠΈΡ‚ΡŒ ΡΠΎΠ³Π»Π°ΡΠΎΠ²Π°Π½Π½ΠΎΡΡ‚ΡŒ Π½Π° вашСм Π²Π΅Π±-сайтС ΠΈΠ»ΠΈ Π² ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ.

Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡ

Π”ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ ΠΊ ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌ ΠΌΠΎΠΆΠ΅Ρ‚ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π±ΠΎΠ»Π΅Π΅ Π·Π°ΠΌΠ΅Ρ‚Π½Ρ‹ΠΌΠΈ. Иногда само ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Ρ‡Π΅Ρ‚ΠΊΠΎ

сообщаСт ΠΎ Π½Π°Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ ; Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Π·Π½Π°Ρ‡ΠΎΠΊ Π»ΡƒΠΏΡ‹ для поиска ΠΈΠ»ΠΈ Π·Π½Π°Ρ‡ΠΎΠΊ дискСты для сохранСния. Π‘Π°ΠΌΡ‹ΠΉ простой способ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΊ ΠΊΠ½ΠΎΠΏΠΊΠ΅ β€” ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, Π° Π·Π°Ρ‚Π΅ΠΌ Ρ€Π°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΡ‚ΡŒ Π΅Π³ΠΎ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ. НиТС ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Ρ‹ наши ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ со Π·Π½Π°Ρ‡ΠΊΠΎΠΌ Π³Π°Π»ΠΎΡ‡ΠΊΠΈ.

 .ΠΊΠ½ΠΎΠΏΠΊΠ° {
  отступ: 5px 5px 5px 25px;
  Π³Ρ€Π°Π½ΠΈΡ†Π°: 1px сплошная #666;
  Ρ†Π²Π΅Ρ‚:#000;
  тСкстовоС ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅: Π½Π΅Ρ‚;
  Ρ„ΠΎΠ½: #dcdcdc url(icon.png) Π±Π΅Π· ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π° ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ 5px ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ;
} 

Бостояния ΠΊΠ½ΠΎΠΏΠΎΠΊ

Помимо состояния ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ, ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΈ ссылки ΠΌΠΎΠ³ΡƒΡ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ Π΄Π²Π° Π΄Ρ€ΡƒΠ³ΠΈΡ… состояния: Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΈ Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠ΅ (Ρ‚.Π΅. Π½Π°ΠΆΠ°Ρ‚ΠΎΠ΅). Π’Π°ΠΆΠ½ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΊΠ½ΠΎΠΏΠΊΠΈ выглядСли ΠΏΠΎ-Ρ€Π°Π·Π½ΠΎΠΌΡƒ Π² Ρ€Π°Π·Π½Ρ‹Ρ… состояниях, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ ΠΏΠΎΠ½ΠΈΠΌΠ°Π»ΠΈ, Ρ‡Ρ‚ΠΎ происходит. Π›ΡŽΠ±ΠΎΠΉ элСмСнт Π² состоянии навСдСния ΠΌΠΎΠΆΠ½ΠΎ ΡΡ‚ΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ, Π²Ρ‹Π·Π²Π°Π² :hover ПсСвдокласс CSS.

 Π°: Π½Π°Π²Π΅Π΄ΠΈΡ‚Π΅ {
  Ρ†Π²Π΅Ρ‚:#f00;
} 

Π₯отя это ΠΎΡ‡Π΅Π½ΡŒ Π²Π°ΠΆΠ½ΠΎ, Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠ΅ состояниС Ρ€Π΅Π΄ΠΊΠΎ примСняСтся Π½Π° Π²Π΅Π±-сайтах. ΠŸΠΎΠΊΠ°Π·Ρ‹Π²Π°Ρ это состояниС, Π²Ρ‹ Π³Π°Ρ€Π°Π½Ρ‚ΠΈΡ€ΡƒΠ΅Ρ‚Π΅, Ρ‡Ρ‚ΠΎ ваши ΠΊΠ½ΠΎΠΏΠΊΠΈ Ρ€Π΅Π°Π³ΠΈΡ€ΡƒΡŽΡ‚, ΠΈ отправляСтС Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹ΠΉ сигнал ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ ΠΎ Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ ΠΊΠ½ΠΎΠΏΠΊΠ° Π±Ρ‹Π»Π° Π½Π°ΠΆΠ°Ρ‚Π°. Π­Ρ‚ΠΎ называСтся ΠΈΠ·ΠΎΠΌΠΎΡ€Ρ„Π½Ρ‹ΠΌ соотвСтствиСм ΠΈ прСдставляСт собой Β«ΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠ΅ ΠΌΠ΅ΠΆΠ΄Ρƒ появлСниСм Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎΠΉ Ρ„ΠΎΡ€ΠΌΡ‹ ΠΈ сопоставимым чСловСчСским ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ΠΌΒ» (Π›ΡŽΠΊ ВроблСвски, Site-Seeing). Π’ ΡΡ‚Π°Ρ‚ΡŒΠ΅ «БостояниС Π½Π°ΠΆΠ°Ρ‚ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSSΒ» ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΠΎ рассматриваСтся Π²Π°ΠΆΠ½ΠΎΡΡ‚ΡŒ Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ состояния.

 Π°: Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΉ {
  Ρ†Π²Π΅Ρ‚:#f00;
} 

Π•ΡΡ‚ΡŒ Π΅Ρ‰Π΅ ΠΎΠ΄Π½ΠΎ состояниС, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Π²ΠΈΠ΄Π½ΠΎ ΠΏΡ€ΠΈ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΊΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€Ρ‹: состояниС фокуса. Когда ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΈΡ‚ ΠΊ ΠΊΠ½ΠΎΠΏΠΊΠ΅ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ клавиши Tab, Π΅Π΅ внСшний Π²ΠΈΠ΄ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒΡΡ, ΠΆΠ΅Π»Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ выглядСл Ρ‚Π°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ.

 Π°: фокус {
  Ρ†Π²Π΅Ρ‚:#f00;
} 

Π’ ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½Ρ‹Ρ… Π½ΠΈΠΆΠ΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°Ρ… ΠΏΠΎΠΊΠ°Π·Π°Π½ ΠΎΠ±Ρ‰ΠΈΠΉ способ стилизации состояний ΠΊΠ½ΠΎΠΏΠΎΠΊ. БостояниС навСдСния Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ свСтлСС, Ρ‡Π΅ΠΌ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎΠ΅ состояниС, Π² Ρ‚ΠΎ врСмя ΠΊΠ°ΠΊ Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠ΅ состояниС ΠΈΠΌΠ΅Π΅Ρ‚ ΠΈΠ½Π²Π΅Ρ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚, ΠΈΠΌΠΈΡ‚ΠΈΡ€ΡƒΡŽΡ‰ΠΈΠΉ Π½Π°ΠΆΠ°Ρ‚ΠΈΠ΅. Π₯отя Π²Π°ΠΌ Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡ΠΈΠ²Π°Ρ‚ΡŒ сСбя этим стилСм, это Ρ…ΠΎΡ€ΠΎΡˆΠ΅Π΅ мСсто для Π½Π°Ρ‡Π°Π»Π°.

Нам слСдуСт ΠΏΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΈΡ‚ΡŒ ΠΎ Ρ‚ΠΎΠΌ, ΠΊΠ°ΠΊ ΠΎΠ±Ρ€Π°Ρ‰Π°Ρ‚ΡŒΡΡ со свойством ΠΊΠΎΠ½Ρ‚ΡƒΡ€Π° для состояний :active ΠΈ :focus . ΠŸΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎΠ΅ ΠΎΠ±Ρ€Π°Ρ‰Π΅Π½ΠΈΠ΅ с этим свойством Π²Π°ΠΆΠ½ΠΎ для удобства ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‰ΠΈΡ… ΠΊΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€Ρƒ Ρ‚Π°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ ΠΈ ΠΌΡ‹ΡˆΡŒ. Π’ ΡΡ‚Π°Ρ‚ΡŒΠ΅ Better CSS Outline Suppression ΠŸΠ°Ρ‚Ρ€ΠΈΠΊ Π›Π°ΡƒΠΊΠ΅ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚, ΠΊΠ°ΠΊ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΈ ссылки Π²Π΅Π΄ΡƒΡ‚ сСбя Π² Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… комбинациях состояний, ΠΈ ΠΎΠ±ΡŠΡΡΠ½ΡΠ΅Ρ‚, ΠΏΠΎΡ‡Π΅ΠΌΡƒ свойство структуры Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π²Ρ‹Π·Ρ‹Π²Π°Ρ‚ΡŒΡΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ с состояниСм :active .

Биняя ΠΊΠ½ΠΎΠΏΠΊΠ° Β«ΠšΡƒΠΏΠΈΡ‚ΡŒ сСйчас» Π½Π° сайтС Apple.com ΠΈΠΌΠ΅Π΅Ρ‚ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Π±ΠΎΠ»Π΅Π΅ свСтлый Ρ„ΠΎΠ½ для состояния навСдСния ΠΈ ΡΡ‚ΠΈΠ»ΡŒ вставки для Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ состояния. Π”Π°ΠΆΠ΅ основная навигационная ΠΊΠ½ΠΎΠΏΠΊΠ° Π½Π° сайтС Apple Ρ€Π΅Π°Π»ΠΈΠ·ΡƒΠ΅Ρ‚ всС Ρ‚Ρ€ΠΈ состояния.

Π₯отя эта причудливая ΠΊΠ½ΠΎΠΏΠΊΠ° Π½Π΅ Ρ€Π΅Π°Π»ΠΈΠ·ΡƒΠ΅Ρ‚ Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠ΅ состояниС, ΠΎΠ½Π° ΠΈΠΌΠ΅Π΅Ρ‚ приятный эффСкт затухания ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора.

Кнопка Β«ΠŸΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅Β» Π½Π° UX Booth становится Π·Π΅Π»Π΅Π½ΠΎΠΉ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΈ пСрСмСщаСтся Π½Π° ΠΎΠ΄ΠΈΠ½ пиксСль Π²Π½ΠΈΠ· Π² Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠΌ состоянии, Ρ‡Ρ‚ΠΎ ΠΈΠΌΠΈΡ‚ΠΈΡ€ΡƒΠ΅Ρ‚ эффСкт наТатия ΠΊΠ½ΠΎΠΏΠΊΠΈ.

ПолСзноС Ρ‡Ρ‚Π΅Π½ΠΈΠ΅

Π’ ΡΡ‚Π°Ρ‚ΡŒΠ΅ НовоС ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΠΈΠ΅ элСмСнта Button ΠΏΠΎΠΊΠ°Π·Π°Π½Ρ‹ различия ΠΌΠ΅ΠΆΠ΄Ρƒ ссылками ΠΈ ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌΠΈ ΠΈ ΠΎΠ±ΡŠΡΡΠ½ΡΠ΅Ρ‚ΡΡ, ΠΊΠ°ΠΊ Π»Π΅Π³ΠΊΠΎ ΡΡ‚ΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΠΈ.

Бтилизация ΠΊΠ½ΠΎΠΏΠΎΠΊ Ρ„ΠΎΡ€ΠΌ ΠΎΡ…Π²Π°Ρ‚Ρ‹Π²Π°Π΅Ρ‚ основы оформлСния ΠΊΠ½ΠΎΠΏΠΎΠΊ со мноТСством ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ².

ΠšΡ€Π°ΡΠΈΠ²Ρ‹Π΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ CSS с Π½Π°Π±ΠΎΡ€ΠΎΠΌ Π·Π½Π°Ρ‡ΠΊΠΎΠ² ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚, ΠΊΠ°ΠΊ ΡΡ‚ΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΠΈ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ„ΠΎΠ½ΠΎΠ²Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ. Π₯отя ΠΎΠ½ΠΈ ΠΈ Π½Π΅ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΡŽΡ‚ΡΡ, это Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Ρ…ΠΎΡ€ΠΎΡˆΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ.

Recreating the Button β€” ΠΎΡ‡Π΅Π½ΡŒ Ρ…ΠΎΡ€ΠΎΡˆΠ°Ρ ΡΡ‚Π°Ρ‚ΡŒΡ, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ ΠΎΠ±ΡŠΡΡΠ½ΡΠ΅Ρ‚ΡΡ, ΠΊΠ°ΠΊ Google ΠΏΡ€ΠΈΡˆΠ΅Π» ΠΊ ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΎΠ½ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ Π½Π° Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²Π΅ своих Π²Π΅Π±-сайтов.

ΠœΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΠ΅ΠΌΡ‹Π΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ CSS с использованиСм PNG ΠΈ Ρ†Π²Π΅Ρ‚ΠΎΠ² Ρ„ΠΎΠ½Π° ΠΎΠ±ΡŠΡΡΠ½ΡΠ΅Ρ‚, ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΠΎΡ‚Ρ€ΡΡΠ°ΡŽΡ‰ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ для всСх состояний. Π₯отя ΠΎΠ½ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ jQuery, ΠΎΠ½ изящно Π΄Π΅Π³Ρ€Π°Π΄ΠΈΡ€ΡƒΠ΅Ρ‚, Ссли JavaScript ΠΎΡ‚ΠΊΠ»ΡŽΡ‡Π΅Π½.

Π Π°Π·Π΄Π²ΠΈΠΆΠ½Ρ‹Π΅ Π΄Π²Π΅Ρ€ΠΈ: Π³ΠΈΠ±ΠΊΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ

ΠŸΡ€ΠΈ ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠΈ ΠΊΠ½ΠΎΠΏΠΎΠΊ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΡƒΡ‡ΠΈΡ‚Ρ‹Π²Π°Ρ‚ΡŒ ΠΎΠ΄Π½ΠΎ Π²Π°ΠΆΠ½ΠΎΠ΅ сообраТСниС: ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΠ΅ΠΌΠΎΡΡ‚ΡŒ. ΠœΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΠ΅ΠΌΠΎΡΡ‚ΡŒ Π² этом контСкстС ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ Ρ€Π°ΡΡ‚ΡΠ³ΠΈΠ²Π°Ρ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΡƒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½Π° соотвСтствовала тСксту, ΠΈ ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ изобраТСния. Если Π²Ρ‹ Π½Π΅ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Ρ€Π°Π·Π½Ρ‹Π΅ изобраТСния для ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ, рассмотритС Ρ‚Π΅Ρ…Π½ΠΈΠΊΡƒ Β«Ρ€Π°Π·Π΄Π²ΠΈΠΆΠ½Ρ‹Ρ… Π΄Π²Π΅Ρ€Π΅ΠΉΒ». Π­Ρ‚ΠΎΡ‚ ΠΌΠ΅Ρ‚ΠΎΠ΄ позволяСт ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΠ΅ΠΌΡ‹Π΅, насыщСнныС ΠΊΠ½ΠΎΠΏΠΊΠΈ.

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

 Бтандартная ΠΊΠ½ΠΎΠΏΠΊΠ° Ρ€Π°Π·Π΄Π²ΠΈΠΆΠ½Ρ‹Ρ… Π΄Π²Π΅Ρ€Π΅ΠΉ 
 a {
  Ρ„ΠΎΠ½: ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½Ρ‹ΠΉ URL('button_right.png') Π±Π΅Π· ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π° ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ Π²Π²Π΅Ρ€Ρ…Ρƒ справа;
  дисплСй: блок;
  ΠΏΠ»Ρ‹Ρ‚ΡŒ Π½Π°Π»Π΅Π²ΠΎ;
  /* отступы, поля ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ стили здСсь */
}
ΠΏΡ€ΠΎΠΌΠ΅ΠΆΡƒΡ‚ΠΎΠΊ {
  Ρ„ΠΎΠ½: ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½Ρ‹ΠΉ URL('button_left. png') Π±Π΅Π· ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΠΎΠ²;
  дисплСй: блок;
  /* отступы, поля ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ стили здСсь */
} 

ΠŸΡ€Π΅ΠΈΠΌΡƒΡ‰Π΅ΡΡ‚Π²Π° этого ΠΌΠ΅Ρ‚ΠΎΠ΄Π° Π·Π°ΠΊΠ»ΡŽΡ‡Π°ΡŽΡ‚ΡΡ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ ΠΎΠ½:

  • Π­Ρ‚ΠΎ простой способ создания Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎ насыщСнных ΠΊΠ½ΠΎΠΏΠΎΠΊ;
  • ΠžΠ±Π΅ΡΠΏΠ΅Ρ‡ΠΈΠ²Π°Π΅Ρ‚ Π΄ΠΎΡΡ‚ΡƒΠΏΠ½ΠΎΡΡ‚ΡŒ, Π³ΠΈΠ±ΠΊΠΎΡΡ‚ΡŒ ΠΈ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΠ΅ΠΌΠΎΡΡ‚ΡŒ;
  • НС Ρ‚Ρ€Π΅Π±ΡƒΠ΅Ρ‚ JavaScript;
  • Π Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π²ΠΎ всСх основных Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ….

ПолСзноС Ρ‡Ρ‚Π΅Π½ΠΈΠ΅

Π‘Ρ‚Π°Ρ‚ΡŒΡ Β«Sliding Doors of CSSΒ» Π½Π° A List Apart (Ρ‡Π°ΡΡ‚ΡŒ 1 ΠΈ Ρ‡Π°ΡΡ‚ΡŒ 2) посвящСна основам этой Ρ‚Π΅Ρ…Π½ΠΈΠΊΠΈ. Π₯отя эти ΡΡ‚Π°Ρ‚ΡŒΠΈ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ устарСли, ΠΈΡ… Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΏΡ€ΠΎΡ‡ΠΈΡ‚Π°Ρ‚ΡŒ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ.

Π’Π°ΠΊΠΆΠ΅ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ устарСла, Β«Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΏΡƒΠ»Π΅Π½Π΅ΠΏΡ€ΠΎΠ±ΠΈΠ²Π°Π΅ΠΌΡ‹Ρ… графичСских ΠΊΠ½ΠΎΠΏΠΎΠΊ ссылок с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSSΒ» β€” отличная ΡΡ‚Π°Ρ‚ΡŒΡ, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ, ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΏΡƒΠ»Π΅Π½Π΅ΠΏΡ€ΠΎΠ±ΠΈΠ²Π°Π΅ΠΌΡ‹Π΅, измСняСмыС ΠΏΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρƒ, сТатыС ΠΊΠ½ΠΎΠΏΠΊΠΈ. Π’Π°ΠΊΠΆΠ΅ ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Π° ΠΊ ΠΏΡ€ΠΎΡ‡Ρ‚Π΅Π½ΠΈΡŽ.

Filament Group ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ мноТСство ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹Ρ… статСй ΠΈ руководств. Π•Π³ΠΎ вторая ΡΡ‚Π°Ρ‚ΡŒΡ ΠΎ ΠΊΠ½ΠΎΠΏΠΊΠ°Ρ… CSS, Β«Π‘Ρ‚ΠΈΠ»ΡŒ элСмСнта ΠΊΠ½ΠΎΠΏΠΊΠΈ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ€Π°Π·Π΄Π²ΠΈΠΆΠ½Ρ‹Ρ… Π΄Π²Π΅Ρ€Π΅ΠΉ CSSΒ», ΠΎΠ±ΡŠΡΡΠ½ΡΠ΅Ρ‚, ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΠΈ, комбинируя ΠΌΠ΅Ρ‚ΠΎΠ΄Ρ‹. Π₯отя ΠΎΠ½ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠ΅ состояниС, Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π»Π΅Π³ΠΊΠΎ Ρ€Π°ΡΡˆΠΈΡ€ΠΈΡ‚ΡŒ.

Если Π²Π°ΠΌ Π½ΡƒΠΆΠ½Ρ‹ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π² стилС Wii, Π² ΡΡ‚Π°Ρ‚ΡŒΠ΅ Β«ΠŸΡ€ΠΎΡΡ‚Ρ‹Π΅ ΠΊΡ€ΡƒΠ³Π»Ρ‹Π΅ ссылки CSS (ΠΊΠ½ΠΎΠΏΠΊΠΈ Wii)Β» прСдставлСны всС Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹Π΅ рСсурсы ΠΈ пояснСния ΠΏΠΎ ΠΈΡ… стилизации.

ΠžΠ±Ρ‹Ρ‡Π½Ρ‹ΠΉ способ Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ‚Π΅Ρ…Π½ΠΈΠΊΡƒ Ρ€Π°Π·Π΄Π²ΠΈΠΆΠ½Ρ‹Ρ… Π΄Π²Π΅Ρ€Π΅ΠΉ CSS β€” ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π΄Π²Π° изобраТСния. Однако ΡΡ‚Π°Ρ‚ΡŒΡ CSS Sliding Door Using Only One Image ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ±ΠΈΡ‚ΡŒΡΡ Ρ‚ΠΎΠ³ΠΎ ΠΆΠ΅ эффСкта, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄Π½ΠΎ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅.

ΠžΠ²Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ CSS ΠΈ ΠšΠ²Π°Π΄Ρ€Π°Ρ‚Π½Ρ‹Π΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ CSS ΠΎΡ‚ Dynamic Drive β€” Π΄Π²Π΅ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ ΡΡ‚Π°Ρ‚ΡŒΠΈ, Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€ΠΈΡ€ΡƒΡŽΡ‰ΠΈΠ΅ ΡΡ„Ρ„Π΅ΠΊΡ‚ΠΈΠ²Π½ΠΎΡΡ‚ΡŒ Ρ€Π°Π·Π΄Π²ΠΈΠΆΠ½Ρ‹Ρ… Π΄Π²Π΅Ρ€Π΅ΠΉ CSS.

CSS-спрайты: ΠΎΠ΄Π½ΠΎ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ

ΠŸΡ€ΠΈ использовании CSS-спрайтов ΠΎΠ΄ΠΈΠ½ Ρ„Π°ΠΉΠ» изобраТСния содСрТит нСсколько графичСских элСмСнтов , ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ Π²Ρ‹Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Π΅ Π² Π²ΠΈΠ΄Π΅ сСтки. Разбивая ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, ΠΌΡ‹ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅ΠΌ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄ΠΈΠ½ спрайт Π·Π° Ρ€Π°Π·. Для ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π³Ρ€Π°Ρ„ΠΈΠΊΡƒ для всСх Ρ‚Ρ€Π΅Ρ… состояний Π² ΠΎΠ΄ΠΈΠ½ Ρ„Π°ΠΉΠ». Π­Ρ‚ΠΎΡ‚ ΠΌΠ΅Ρ‚ΠΎΠ΄ эффСктивСн, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ Ρ‚Ρ€Π΅Π±ΡƒΠ΅Ρ‚ мСньшС рСсурсов, Π° страница загруТаСтся быстрСС. ВсС ΠΌΡ‹ Π·Π½Π°Π΅ΠΌ, Ρ‡Ρ‚ΠΎ ΠΌΠ½ΠΎΠ³ΠΎ запросов ΠΊ сСрвСру для Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… Π½Π΅Π±ΠΎΠ»ΡŒΡˆΠΈΡ… рСсурсов ΠΌΠΎΠΆΠ΅Ρ‚ Π·Π°Π½ΡΡ‚ΡŒ ΠΌΠ½ΠΎΠ³ΠΎ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ. Π’ΠΎΡ‚ ΠΏΠΎΡ‡Π΅ΠΌΡƒ CSS-спрайты Ρ‚Π°ΠΊ ΡƒΠ΄ΠΎΠ±Π½Ρ‹. Они Π·Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΡΠΎΠΊΡ€Π°Ρ‰Π°ΡŽΡ‚ количСство ΠΎΠ±Ρ€Π°Ρ‰Π΅Π½ΠΈΠΉ ΠΊ сСрвСру. Они Π½Π°ΡΡ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΌΠΎΡ‰Π½Ρ‹, Ρ‡Ρ‚ΠΎ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ спрайты CSS для всСй своСй Π³Ρ€Π°Ρ„ΠΈΠΊΠΈ. ΠžΠ±Π·ΠΎΡ€ Holy Sprites ΠΎ Ρ‚Ρ€ΡŽΠΊΠ°Ρ… CSS ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ нСсколько ΠΎΡ‡Π΅Π½ΡŒ ΠΊΡ€Π΅Π°Ρ‚ΠΈΠ²Π½Ρ‹Ρ… Ρ€Π΅ΡˆΠ΅Π½ΠΈΠΉ.

Π’ ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ Π½ΠΈΠΆΠ΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ ΠΏΡ€ΠΎΡΡ‚Π΅ΠΉΡˆΠ΅Π΅ использованиС спрайтов CSS. Одно ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ содСрТит Π³Ρ€Π°Ρ„ΠΈΠΊΡƒ для всСх Ρ‚Ρ€Π΅Ρ… состояний ΠΊΠ½ΠΎΠΏΠΊΠΈ. Настраивая свойство background-position , ΠΌΡ‹ опрСдСляСм Ρ‚ΠΎΡ‡Π½ΡƒΡŽ ΠΏΠΎΠ·ΠΈΡ†ΠΈΡŽ Π½ΡƒΠΆΠ½ΠΎΠ³ΠΎ Π½Π°ΠΌ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ изобраТСния. Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΌΡ‹ Π²Ρ‹Π±ΠΈΡ€Π°Π΅ΠΌ для отобраТСния, соотвСтствуСт полоТСнию Ρ„ΠΎΠ½Π° свСрху: -30 пиксСлСй ΠΈ слСва: 0 .

 Π° {
  Ρ„ΠΎΠ½: Π±Π΅Π»Ρ‹ΠΉ url(buttons.png) 0px 0px Π±Π΅Π· ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π°;
}
Π°: Π½Π°Π²Π΅Π΄ΠΈΡ‚Π΅ {
  фоновая позиция: -30px 0px;
}
Π°: Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΉ {
  фоновая позиция: -60px 0px;
} 

Для получСния ΠΎΠ±Ρ‰Π΅ΠΉ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ ΠΈ рСсурсов ΠΏΠΎ CSS-спрайтам ΠΎΠ·Π½Π°ΠΊΠΎΠΌΡŒΡ‚Π΅ΡΡŒ с The Mystery of CSS Sprites: Techniques, Tools and TutorialsΒ».

ПолСзноС Ρ‡Ρ‚Π΅Π½ΠΈΠ΅

Π’ этом простом руководствС «Как ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΡΡ‚ΡƒΡŽ ΠΊΠ½ΠΎΠΏΠΊΡƒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ спрайтов ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ CSSΒ» ΠšΡ€ΠΈΡ Π‘ΠΏΡƒΠ½Π΅Ρ€ ΠΎΠ±ΡŠΡΡΠ½ΡΠ΅Ρ‚, ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ спрайтов CSS Π² Photoshop ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ с CSS.

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

CSS 3: Кнопки Π±ΡƒΠ΄ΡƒΡ‰Π΅Π³ΠΎ

CSS 3 позволяСт Π½Π°ΠΌ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎ Π±ΠΎΠ³Π°Ρ‚Ρ‹Π΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ всСго нСсколькими строками ΠΊΠΎΠ΄Π°. Пока Ρ‡Ρ‚ΠΎ это самый простой способ создания ΠΊΠ½ΠΎΠΏΠΎΠΊ. НСдостатком CSS 3 являСтся Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Π² настоящСС врСмя ΠΎΠ½ поддСрТиваСтся Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Firefox ΠΈ Safari. ΠŸΠΎΠ»ΠΎΠΆΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ ΠΌΠΎΠΌΠ΅Π½Ρ‚ΠΎΠΌ являСтся Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ ΠΊΠ½ΠΎΠΏΠΊΠΈ, стилизованныС с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS 3 , изящно Π΄Π΅Π³Ρ€Π°Π΄ΠΈΡ€ΡƒΡŽΡ‚ Π² Π½Π΅ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅ΠΌΡ‹Ρ… Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ… . Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ свойства Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° -moz-border-radius (для Firefox) ΠΈΠ»ΠΈ -webkit-border-radius (для Safari), Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ радиус ΡƒΠ³Π»ΠΎΠ². Π’ΠΎΡ‚ нСсколько ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ со свойством радиуса Π³Ρ€Π°Π½ΠΈΡ†Ρ‹.

Для Π»ΡƒΡ‡ΡˆΠΈΡ… Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ΠΎΠ² Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΊΠΎΠΌΠ±ΠΈΠ½ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π·Π°ΠΊΡ€ΡƒΠ³Π»Π΅Π½Π½Ρ‹Π΅ ΡƒΠ³Π»Ρ‹ CSS 3 со свойством Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ изобраТСния. ΠŸΡ€ΠΈΠΌΠ΅Ρ€ Π½ΠΈΠΆΠ΅ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ Ρ‚ΠΈΠΏΠΈΡ‡Π½ΡƒΡŽ ΠΊΠ½ΠΎΠΏΠΊΡƒ с Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π½Ρ‹ΠΌ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ, ΠΏΠ΅Ρ€Π²ΠΎΠ΅ Π±Π΅Π· Π·Π°ΠΊΡ€ΡƒΠ³Π»Π΅Π½Π½Ρ‹Ρ… ΡƒΠ³Π»ΠΎΠ², Π° Π²Ρ‚ΠΎΡ€ΠΎΠ΅ с.

По ΡΡ€Π°Π²Π½Π΅Π½ΠΈΡŽ с Ρ€Π°Π·Π΄Π²ΠΈΠΆΠ½Ρ‹ΠΌΠΈ двСрями этот ΠΌΠ΅Ρ‚ΠΎΠ΄ Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΡ€ΠΎΡ‰Π΅. Однако, Ссли Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΡΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΡƒΡŽ ΡΠΎΠ³Π»Π°ΡΠΎΠ²Π°Π½Π½ΠΎΡΡ‚ΡŒ Π²ΠΎ всСх Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ…, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ Ρ€Π°Π·Π΄Π²ΠΈΠΆΠ½Ρ‹Π΅ Π΄Π²Π΅Ρ€ΠΈ, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΎΠ½ΠΈ Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ Π²ΠΎ всСх основных Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ…, Π²ΠΊΠ»ΡŽΡ‡Π°Ρ IE6. Π§Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ·Π½Π°Ρ‚ΡŒ большС ΠΎ возмоТностях CSS 3, ΠΏΡ€ΠΎΡ‡Ρ‚ΠΈΡ‚Π΅ Π£Π²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ ΠΈ возмоТности CSS 3: Π±ΠΎΠ»Π΅Π΅ 30 ΠΏΠΎΠ»Π΅Π·Π½Ρ‹Ρ… руководств». А Π²ΠΎΡ‚ нСсколько Ρ…ΠΎΡ€ΠΎΡˆΠΈΡ… руководств ΠΏΠΎ стилизации ΠΊΠ½ΠΎΠΏΠΎΠΊ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ CSS 3.

ПолСзноС Ρ‡Ρ‚Π΅Π½ΠΈΠ΅

Super Awesome Buttons With CSS 3 ΠΈ RGBA дСмонстрируСт ΠΌΠΎΡ‰ΡŒ CSS 3 с Π·Π°ΠΊΡ€ΡƒΠ³Π»Π΅Π½Π½Ρ‹ΠΌΠΈ ΡƒΠ³Π»Π°ΠΌΠΈ, тСнями Mozilla ΠΈ RGBA, Ρ†Π²Π΅Ρ‚ΠΎΠ²Ρ‹ΠΌ Ρ€Π΅ΠΆΠΈΠΌΠΎΠΌ, Π΄ΠΎΠ±Π°Π²Π»ΡΡŽΡ‰ΠΈΠΌ Π°Π»ΡŒΡ„Π°-смСшиваниС ΠΊ вашим Π»ΡŽΠ±ΠΈΠΌΡ‹ΠΌ свойствам CSS. Π­Ρ‚ΠΎ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Π»ΡƒΡ‡ΡˆΠΈΡ… ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² ΠΊΠ½ΠΎΠΏΠΎΠΊ CSS 3.

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΎΠΊ Π±Π΅Π· ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS 3 ΠΎΠ±ΡŠΡΡΠ½ΡΠ΅Ρ‚ нСдостатки использования ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ для ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΈ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ нСсколько Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ² создания ΠΊΠ½ΠΎΠΏΠΎΠΊ CSS 3 Π±Π΅Π· ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ.

ΠœΠ³Π½ΠΎΠ²Π΅Π½Π½Ρ‹Π΅ инструмСнты: ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ Π»ΠΈ ΠΎΠ½ΠΈ?

Π‘ΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‚ инструмСнты для создания ΠΊΠ½ΠΎΠΏΠΎΠΊ, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ Easy Button ΠΈ Menu Maker ΠΈ My Cool Button, Π° Ρ‚Π°ΠΊΠΆΠ΅ для создания CSS-спрайтов, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ CSS Sprite Generator, Π½ΠΎ вопрос Π² Ρ‚ΠΎΠΌ, Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π»ΠΈ ΠΎΠ½ΠΈ ΠΏΠΎΠΌΠΎΠ³Π°ΡŽΡ‚ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠ΅ вашим потрСбностям. Π₯отя ΠΎΠ½ΠΈ Π½Π°ΡΡ‚Ρ€Π°ΠΈΠ²Π°ΡŽΡ‚ΡΡ ΠΈ просты Π² использовании, вашС творчСство ΠΈ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΡŒ Π½Π°Π΄ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π°ΠΌΠΈ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Ρ‹, Ρ‡Ρ‚ΠΎ Π΄Π΅Π»Π°Π΅Ρ‚ ΠΊΠ½ΠΎΠΏΠΊΠΈ срСднСго Π²ΠΈΠ΄Π°. ИспользованиС ΡƒΠ½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½Ρ‹Ρ… ΠΊΠ½ΠΎΠΏΠΎΠΊ Π½Π΅ являСтся Ρ…ΠΎΡ€ΠΎΡˆΠ΅ΠΉ ΠΈΠ΄Π΅Π΅ΠΉ.

РСшСниС Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² использовании Photoshop (ΠΈΠ»ΠΈ Π΅Π³ΠΎ бСсплатной Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Ρ‹) ΠΈ ΠΏΡ€ΠΎΠ²Π΅Ρ€Π΅Π½Π½Ρ‹Ρ… ΠΌΠ΅Ρ‚ΠΎΠ΄ΠΎΠ², описанных Π² этой ΡΡ‚Π°Ρ‚ΡŒΠ΅. Если Π²Ρ‹ Π½ΠΎΠ²ΠΈΡ‡ΠΎΠΊ Π² Photoshop, Π²ΠΎΡ‚ нСсколько ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹Ρ… руководств ΠΏΠΎ созданию ΡƒΠ΄ΠΈΠ²ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… ΠΊΠ½ΠΎΠΏΠΎΠΊ.

Если Π²Ρ‹ Π½Π΅ Π·Π½Π°Π΅Ρ‚Π΅, с Ρ‡Π΅Π³ΠΎ Π½Π°Ρ‡Π°Ρ‚ΡŒ, iPhone-ΠΊΠ½ΠΎΠΏΠΊΠ° Π² Photoshop β€” ΠΈΠ΄Π΅Π°Π»ΡŒΠ½Ρ‹ΠΉ Π²Ρ‹Π±ΠΎΡ€. ВсСго Π·Π° 10-15 ΠΌΠΈΠ½ΡƒΡ‚ Π²Ρ‹ смоТСтС ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Ρ‚Π°ΠΊΠΈΠ΅ ΠΆΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΠΊΠ°ΠΊ Π½Π° iPhone.

Как ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π³Π»Π°Π΄ΠΊΡƒΡŽ ΠΈ Ρ‡ΠΈΡΡ‚ΡƒΡŽ ΠΊΠ½ΠΎΠΏΠΊΡƒ Π² Photoshop β€” это ΠΎΡ‡Π΅Π½ΡŒ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΠΎΠ΅ руководство, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΏΡ€ΠΎΠ²Π΅Π΄Π΅Ρ‚ вас Ρ‡Π΅Ρ€Π΅Π· 30 простых шагов ΠΈ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ Π²Π°ΠΌ ΠΈΠ·ΡƒΡ‡ΠΈΡ‚ΡŒ основы Photoshop. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, Π² ΡΡ‚Π°Ρ‚ΡŒΠ΅ ΠΎΠ±ΡŠΡΡΠ½ΡΠ΅Ρ‚ΡΡ, ΠΊΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ эту Π³Ρ€Π°Ρ„ΠΈΠΊΡƒ Π² сочСтании с HTML ΠΈ CSS для создания ΠΏΠΎΠ»Π½ΠΎΡ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΊΠ½ΠΎΠΏΠΎΠΊ CSS.

Кнопки ΠΈ ΡŽΠ·Π°Π±ΠΈΠ»ΠΈΡ‚ΠΈ: вмСсто Π·Π°ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ

ΠžΠΏΠΈΡΠ°Π½Π½Ρ‹Π΅ Π²Ρ‹ΡˆΠ΅ ΠΏΡ€ΠΈΠ΅ΠΌΡ‹ ΠΏΠΎΠΌΠΎΠ³ΡƒΡ‚ Π²Π°ΠΌ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΏΠΎΡ‚Ρ€ΡΡΠ°ΡŽΡ‰ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ. Однако, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΎΠ½ΠΈ ΠΈΠ³Ρ€Π°ΡŽΡ‚ Ρ€Π΅ΡˆΠ°ΡŽΡ‰ΡƒΡŽ Ρ€ΠΎΠ»ΡŒ Π² удобствС использования Π²Π΅Π±-сайта, ΠΊΠ½ΠΎΠΏΠΊΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹ΠΌ ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΠ°ΠΌ:

  1. Π‘Π½Π°Ρ‡Π°Π»Π° ΠΎΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° ΠΌΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²ΠΊΡƒ. ВсСгда ΠΏΠΎΠΌΠ΅Ρ‡Π°ΠΉΡ‚Π΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ΠΌ дСйствия, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ выполняСт ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ . И всСгда Π΄Π΅Π»Π°ΠΉΡ‚Π΅ это Π³Π»Π°Π³ΠΎΠ»ΠΎΠΌ. РаспространСнной ошибкой являСтся ΠΏΠΎΠΌΠ΅Ρ‚ΠΊΠ° ΠΊΠ½ΠΎΠΏΠΎΠΊ Β«ΠŸΠ΅Ρ€Π΅ΠΉΡ‚ΠΈΒ» для Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… дСйствий, Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ поиск, ΠΎΡ‚ΠΏΡ€Π°Π²ΠΊΠ° элСктронной ΠΏΠΎΡ‡Ρ‚Ρ‹ ΠΈ сохранСниС. Π―Ρ€Π»Ρ‹ΠΊΠΈ Ρ‚Π°ΠΊΠΆΠ΅ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ ΠΊΠΎΡ€ΠΎΡ‚ΠΊΠΈΠΌΠΈ ΠΈ ΠΏΠΎ сущСству; Π½Π΅Ρ‚ нСобходимости Π·Π°Π³Ρ€ΠΎΠΌΠΎΠΆΠ΄Π°Ρ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ интСрфСйс.

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

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