Css ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΌΠ΅Π½ΡΠ΅Ρ ΡΠ²Π΅Ρ: html — Π¦Π²Π΅Ρ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ, ΠΎΡΠ»ΠΈΡΠ½ΡΠΉ ΠΎΡ ΠΊΠ»Π°ΡΡΠ° Π² css
Π‘ΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅
ΠΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡ :hover | htmlbook.ru
Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | |
6.0+ | 8.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ |
ΠΡΠ°ΡΠΊΠ°Ρ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ
ΠΠ΅ΡΡΠΈΠΈ CSS
ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅
ΠΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΡΡΠΈΠ»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° Π½Π΅Π³ΠΎ ΠΊΡΡΡΠΎΡΠ° ΠΌΡΡΠΈ, Π½ΠΎ ΠΏΡΠΈ ΡΡΠΎΠΌ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π΅ΡΠ΅ Π½Π΅ Π°ΠΊΡΠΈΠ²ΠΈΡΠΎΠ²Π°Π½, ΠΈΠ½ΡΠΌΠΈ ΡΠ»ΠΎΠ²Π°ΠΌΠΈ ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΌΡΡΠΈ Π½Π΅ Π½Π°ΠΆΠ°ΡΠ°.
Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ
ΡΠ»Π΅ΠΌΠ΅Π½Ρ:hover { … }
ΠΠ½Π°ΡΠ΅Π½ΠΈΡ
ΠΠ΅Ρ.
ΠΡΠΈΠΌΠ΅Ρ 1
HTML5CSS2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>hover</title>
<style>
a:link {
color: #0000d0; /* Π¦Π²Π΅Ρ ΡΡΡΠ»ΠΎΠΊ */
padding: 2px; /* ΠΠΎΠ»Ρ Π²ΠΎΠΊΡΡΠ³ ΡΠ΅ΠΊΡΡΠ° */
}
a:hover {
background: #786b59; /* Π¦Π²Π΅Ρ ΡΠΎΠ½Π° ΠΏΠΎΠ΄ ΡΡΡΠ»ΠΊΠΎΠΉ */
color: #ffe; /* Π¦Π²Π΅Ρ ΡΡΡΠ»ΠΊΠΈ */
}
</style>
</head>
<body>
<p><a href="1.html">Π‘ΡΡΠ»ΠΊΠ° 1</a></p>
<p><a href="2.html">Π‘ΡΡΠ»ΠΊΠ° 2</a></p>
<p><a href="3.html">Π‘ΡΡΠ»ΠΊΠ° 3</a></p>
</body>
</html>
Π Π΄Π°Π½Π½ΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡ :hover ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΠΊ ΡΡΡΠ»ΠΊΠ΅ (ΡΠ΅Π³Ρ <a>), ΠΏΡΠΈ ΡΡΠΎΠΌ ΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΡΠ²Π΅Ρ ΡΡΡΠ»ΠΊΠΈ ΠΈ ΡΠΎΠ½Π° ΠΏΠΎΠ΄ Π½Π΅ΠΉ. Π Π΅Π·ΡΠ»ΡΡΠ°Ρ ΠΏΡΠΈΠΌΠ΅ΡΠ° ΠΏΠΎΠΊΠ°Π·Π°Π½ Π½Π° ΡΠΈΡ.Β 1.
Π ΠΈΡ. 1. Π Π΅Π·ΡΠ»ΡΡΠ°Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡΠ° :hover Π΄Π»Ρ ΡΡΡΠ»ΠΎΠΊ
ΠΡΠΈΠΌΠ΅Ρ 2
HTML5CSS2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hover</title>
<style>
ul {
width: 180px; /* Π¨ΠΈΡΠΈΠ½Π° ΠΌΠ΅Π½Ρ */
list-style: none; /* ΠΠ»Ρ ΡΠΏΠΈΡΠΊΠ° ΡΠ±ΠΈΡΠ°Π΅ΠΌ ΠΌΠ°ΡΠΊΠ΅ΡΡ */
margin: 0; /* ΠΠ΅Ρ ΠΎΡΡΡΡΠΏΠΎΠ² Π²ΠΎΠΊΡΡΠ³ */
padding: 0; /* Π£Π±ΠΈΡΠ°Π΅ΠΌ ΠΏΠΎΠ»Ρ Π²ΠΎΠΊΡΡΠ³ ΡΠ΅ΠΊΡΡΠ° */
font-family: Arial, sans-serif; /* Π ΡΠ±Π»Π΅Π½ΡΠΉ ΡΡΠΈΡΡ Π΄Π»Ρ ΡΠ΅ΠΊΡΡΠ° ΠΌΠ΅Π½Ρ */
font-size: 10pt; /* Π Π°Π·ΠΌΠ΅Ρ Π½Π°Π·Π²Π°Π½ΠΈΠΉ Π² ΠΏΡΠ½ΠΊΡΠ΅ ΠΌΠ΅Π½Ρ */
}
li ul {
position: absolute; /* ΠΠΎΠ΄ΠΌΠ΅Π½Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΡΡΡΡ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ */
display: none; /* Π‘ΠΊΡΡΠ²Π°Π΅ΠΌ ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ */
margin-left: 165px; /* Π‘Π΄Π²ΠΈΠ³Π°Π΅ΠΌ ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ Π²ΠΏΡΠ°Π²ΠΎ */
margin-top: -2em; /* Π‘Π΄Π²ΠΈΠ³Π°Π΅ΠΌ ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ Π²Π²Π΅ΡΡ
*/
}
li a {
display: block; /* Π‘ΡΡΠ»ΠΊΠ° ΠΊΠ°ΠΊ Π±Π»ΠΎΡΠ½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ */
padding: 5px; /* ΠΠΎΠ»Ρ Π²ΠΎΠΊΡΡΠ³ Π½Π°Π΄ΠΏΠΈΡΠΈ */
text-decoration: none; /* ΠΠΎΠ΄ΡΠ΅ΡΠΊΠΈΠ²Π°Π½ΠΈΠ΅ Ρ ΡΡΡΠ»ΠΎΠΊ ΡΠ±ΠΈΡΠ°Π΅ΠΌ */
color: #666; /* Π¦Π²Π΅Ρ ΡΠ΅ΠΊΡΡΠ° */
border: 1px solid #ccc;/* Π Π°ΠΌΠΊΠ° Π²ΠΎΠΊΡΡΠ³ ΠΏΡΠ½ΠΊΡΠΎΠ² ΠΌΠ΅Π½Ρ */
background-color: #f0f0f0; /* Π¦Π²Π΅Ρ ΡΠΎΠ½Π° */
border-bottom: none; /* ΠΡΠ°Π½ΠΈΡΡ ΡΠ½ΠΈΠ·Ρ Π½Π΅ ΠΏΡΠΎΠ²ΠΎΠ΄ΠΈΠΌ */
}
li a:hover {
color: #ffe; /* Π¦Π²Π΅Ρ ΡΠ΅ΠΊΡΡΠ° Π°ΠΊΡΠΈΠ²Π½ΠΎΠ³ΠΎ ΠΏΡΠ½ΠΊΡΠ° */
background-color: #5488af; /* Π¦Π²Π΅Ρ ΡΠΎΠ½Π° Π°ΠΊΡΠΈΠ²Π½ΠΎΠ³ΠΎ ΠΏΡΠ½ΠΊΡΠ° */
}
li:hover ul {
display: block; /* ΠΡΠΈ Π²ΡΠ΄Π΅Π»Π΅Π½ΠΈΠΈ ΠΏΡΠ½ΠΊΡΠ° ΠΊΡΡΡΠΎΡΠΎΠΌ ΠΌΡΡΠΈ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ */
}
.brd {
border-bottom: 1px solid #ccc; /* ΠΠΈΠ½ΠΈΡ ΡΠ½ΠΈΠ·Ρ */
}
</style>
</head>
<body>
<ul>
<li><a href="russian.html">Π ΡΡΡΠΊΠ°Ρ ΠΊΡΡ
Π½Ρ</a>
<ul>
<li><a href="linkr1.html">ΠΠ΅ΡΡΡΡΠΎΠ³Π°Π½ΠΎΠ²</a></li>
<li><a href="linkr2.html">ΠΡΡΡ Ρ ΡΠ±Π»ΠΎΠΊΠ°ΠΌΠΈ</a></li>
<li><a href="linkr3.html">ΠΡΡΠΏΠ΅Π½ΠΈΠΊ Π½ΠΎΠ²Π³ΠΎΡΠΎΠ΄ΡΠΊΠΈΠΉ</a></li>
<li><a href="linkr4.html">Π Π°ΠΊΠΈ ΠΏΠΎ-ΡΡΡΡΠΊΠΈ</a></li>
</ul>
</li>
<li><a href="ukrainian.html">Π£ΠΊΡΠ°ΠΈΠ½ΡΠΊΠ°Ρ ΠΊΡΡ
Π½Ρ</a>
<ul>
<li><a href="linku1.html">ΠΠ°ΡΠ΅Π½ΠΈΠΊΠΈ</a></li>
<li><a href="linku2.html">ΠΠ°ΡΠΊΠΎΠ΅ ΠΏΠΎ-Ρ
Π°ΡΡΠΊΠΎΠ²ΡΠΊΠΈ</a></li>
<li><a href="linku3.html">ΠΠ°ΠΏΡΡΡΠ½ΡΠΊ ΡΠ΅ΡΠ½ΠΈΠ³ΠΎΠ²ΡΠΊΠΈΠΉ</a></li>
<li><a href="linku4.html">ΠΠΎΡΠ°ΠΏΡΡ Ρ ΠΏΠΎΠΌΠΈΠ΄ΠΎΡΠ°ΠΌΠΈ</a></li>
</ul>
</li>
<li><a href="caucasus.html">ΠΠ°Π²ΠΊΠ°Π·ΡΠΊΠ°Ρ ΠΊΡΡ
Π½Ρ</a>
<ul>
<li><a href="linkc1.html">Π‘ΡΠΏ-Ρ
Π°ΡΡΠΎ</a></li>
<li><a href="linkc2.html">ΠΠΈΠ»ΠΈΠ±Π΄ΠΆ</a></li>
<li><a href="linkc3.html">Π§ΠΈΡ
ΠΈΡΡΠΌΠ°</a></li>
<li><a href="linkc4.html">Π¨Π°ΡΠ»ΡΠΊ</a></li>
</ul>
</li>
<li><a href="asia.html">ΠΡΡ
Π½Ρ Π‘ΡΠ΅Π΄Π½Π΅ΠΉ ΠΠ·ΠΈΠΈ</a></li>
</ul>
</body>
</html>
Π Π΄Π°Π½Π½ΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡ :hover Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΡΡΡ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠΏΠΈΡΠΊΠ° (ΡΠ΅Π³ <li>) Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π΄Π²ΡΡ ΡΡΠΎΠ²Π½Π΅Π²ΠΎΠ³ΠΎ ΠΌΠ΅Π½Ρ. Π Π΅Π·ΡΠ»ΡΡΠ°Ρ ΠΏΡΠΈΠΌΠ΅ΡΠ° ΠΏΠΎΠΊΠ°Π·Π°Π½ Π½Π° ΡΠΈΡ.Β 2.
Π ΠΈΡ. 2. ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ :hover Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΌΠ΅Π½Ρ
ΠΡΠ°ΡΠ·Π΅ΡΡ
Π Π±ΡΠ°ΡΠ·Π΅ΡΠ΅ Internet ExplorerΒ Π΄ΠΎ Π²Π΅ΡΡΠΈΠΈΒ 6.0 Π²ΠΊΠ»ΡΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡ :hover ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΡΠΎΠ»ΡΠΊΠΎ Π΄Π»Ρ ΡΡΡΠ»ΠΎΠΊ.
ΠΡΠΎΡΠΌΠ»ΡΠΉΡΠ΅ ΡΡΠΈΠ»ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ, ΡΠΎΠΊΡΡΠ° ΠΈ Π°ΠΊΡΠΈΠ²Π½ΠΎΠ³ΠΎ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ ΠΏΠΎ-ΡΠ°Π·Π½ΠΎΠΌΡ / Π₯Π°Π±Ρ
Π ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΌΠ½ΠΎΠ³ΠΈΡ
Π»Π΅Ρ Ρ ΠΎΡΠΎΡΠΌΠ»ΡΠ» ΡΠΎΡΡΠΎΡΠ½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² :hover
, :focus
ΠΈ :active
ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎ. ΠΠ΅ ΠΏΠΎΠΌΠ½Ρ ΡΠΎΡΠ½ΠΎ, ΠΊΠΎΠ³Π΄Π° ΠΈΠΌΠ΅Π½Π½ΠΎ Π½Π°ΡΠ°Π» ΡΡΠΎ Π΄Π΅Π»Π°ΡΡ. ΠΠΎ ΡΡΠΎ Π΄Π°Π»Π΅ΠΊΠΎ Π½Π΅ Π»ΡΡΡΠΈΠΉ ΠΏΠΎΠ΄Ρ
ΠΎΠ΄. ΠΠΎΡΠ΅ΠΌΡ, ΠΏΠΎΡΡΠ°ΡΠ°ΡΡΡ ΠΎΠ±ΡΡΡΠ½ΠΈΡΡ Π² ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅.
ΠΠΎΡ ΠΏΡΠΈΠΌΠ΅Ρ ΠΊΠΎΠ΄Π°, ΠΊΠΎΡΠΎΡΡΠΉ Π²ΡΠ΅Π³Π΄Π° ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π».
.selector {
&:hover,
&:focus,
&:active {
...
}
}
ΠΠΎΠ³Π΄Π° Ρ ΡΡΠ°Π» ΡΠ΄Π΅Π»ΡΡΡ Π±ΠΎΠ»ΡΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΡ Π΄ΠΎΡΡΡΠΏΠ½ΠΎΡΡΠΈ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ° ΠΏΡΠΈ ΡΠ°Π±ΠΎΡΠ΅ Ρ ΠΊΠ»Π°Π²ΠΈΠ°ΡΡΡΡ (ΡΠΎΡΡΠΎΡΠ½ΠΈΡ ΡΠΎΠΊΡΡΠ° Π² ΡΠ°ΡΡΠ½ΠΎΡΡΠΈ), ΠΏΡΠΈΡΠ΅Π» ΠΊ Π²ΡΠ²ΠΎΠ΄Ρ, ΡΡΠΎ ΠΌΡ Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°ΡΡ ΡΠ°Π·Π½ΡΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ².
ΠΠ°Π²Π΅Π΄Π΅Π½ΠΈΠ΅, ΡΠΎΠΊΡΡ ΠΈ Π°ΠΊΡΠΈΠ²Π½ΠΎΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ Π΄ΠΎΠ»ΠΆΠ½Ρ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°ΡΡΡΡ ΠΏΠΎ-ΡΠ°Π·Π½ΠΎΠΌΡ.
ΠΡΠΈΡΠΈΠ½Π° ΠΏΡΠΎΡΡΠ°: ΠΡΠΎ ΡΠ°Π·Π½ΡΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ!
Π‘Π΅Π³ΠΎΠ΄Π½Ρ Ρ Ρ ΠΎΡΡ ΠΏΡΠΎΠ΄Π΅ΠΌΠΎΠ½ΡΡΡΠΈΡΠΎΠ²Π°ΡΡ Π²Π°ΠΌ Π²ΠΎΠ»ΡΠ΅Π±Π½ΡΠΉ ΡΠΏΠΎΡΠΎΠ± ΠΎΡΠΎΡΠΌΠΈΡΡ Π²ΡΠ΅ ΡΡΠΈ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ Π±Π΅Π· ΠΎΡΠΎΠ±ΡΡ ΡΡΠΈΠ»ΠΈΠΉ.
ΠΠ°Π²Π°ΠΉΡΠ΅ Π½Π°ΡΠ½ΡΠΌ Ρ :hover
.
Π‘ΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ (:hover)
:hover
ΡΡΠ°Π±Π°ΡΡΠ²Π°Π΅Ρ, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π½Π°Π²ΠΎΠ΄ΠΈΡ Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΊΡΡΡΠΎΡ ΠΌΡΡΠΈ.
ΠΠ±ΡΡΠ½ΠΎ ΡΡΠΎ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ Π·Π°ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ Π² ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ ΡΠ²Π΅ΡΠ° ΡΠΎΠ½Π° background-color
ΠΈ/ΠΈΠ»ΠΈ ΡΠ΅ΠΊΡΡΠ° color
. Π Π°Π·Π»ΠΈΡΠΈΡ Π½Π΅ ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎ Π΄ΠΎΠ»ΠΆΠ½Ρ Π±ΡΡΡ ΠΎΡΠ΅Π²ΠΈΠ΄Π½ΡΠΌΠΈ, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ ΠΈ ΡΠ°ΠΊ Π·Π½Π°ΡΡ, ΡΡΠΎ Π½Π°Π²Π΅Π»ΠΈ ΠΊΡΡΡΠΎΡ Π½Π° ΠΊΠ°ΠΊΠΎΠΉ-ΡΠΎ ΡΠ»Π΅ΠΌΠ΅Π½Ρ.
button {
background-color: #dedede;
}
button:hover {
background-color: #aaa;
}
Π‘ΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΡ ΡΠΎΠΊΡΡΠ° (:focus)
:focus
ΡΡΠ°Π±Π°ΡΡΠ²Π°Π΅Ρ, ΠΊΠΎΠ³Π΄Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠΎΠ»ΡΡΠ°Π΅Ρ ΡΠΎΠΊΡΡ. ΠΡΠΎ Π΄ΠΎΡΡΠΈΠ³Π°Π΅ΡΡΡ Π΄Π²ΡΠΌΡ ΡΠΏΠΎΡΠΎΠ±Π°ΠΌΠΈ:
- ΠΏΡΠΈ Π²ΡΠ±ΠΎΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ Β«TabΒ»
- ΠΏΡΠΈ ΡΠ΅Π»ΡΠΊΠ΅ Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΌΡΡΡΡ
Π ΡΠΎΠΊΡΡΠ½ΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ ΠΎΡΠ½ΠΎΡΡΡΡΡ:
- Π‘ΡΡΠ»ΠΊΠΈ (
<a>
) - ΠΠ½ΠΎΠΏΠΊΠΈ (
<button>
) - ΠΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠΎΡΠΌΡ (
<input>
,<textarea>
ΠΈ Ρ.Π΄) - ΠΠ»Π΅ΠΌΠ΅Π½ΡΡ Ρ Π°ΡΡΠΈΠ±ΡΡΠΎΠΌ
tabindex
Π‘Π»Π΅Π΄ΡΠ΅Ρ ΠΏΠΎΠΌΠ½ΠΈΡΡ ΠΎ Π½Π΅ΠΊΠΎΡΠΎΡΡΡ Π²Π°ΠΆΠ½ΡΡ ΠΌΠΎΠΌΠ΅Π½ΡΠ°Ρ :
- ΠΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ Π½Π΅ ΠΌΠΎΠ³ΡΡ Π²ΡΠ±ΡΠ°ΡΡ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ Β«TabΒ» ΡΠ»Π΅ΠΌΠ΅Π½Ρ Ρ Π°ΡΡΠΈΠ±ΡΡΠΎΠΌ
tabindex="-1"
, Π½ΠΎ ΠΌΠΎΠ³ΡΡ ΠΊΠ»ΠΈΠΊΠ½ΡΡΡ ΠΏΠΎ Π½Π΅ΠΌΡ ΠΌΡΡΡΡ. ΠΠ»ΠΈΠΊ Π²ΡΠ·ΡΠ²Π°Π΅Ρ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ ΡΠΎΠΊΡΡΠ°. - Π Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ
Safari ΠΈ Firefox Mac OS ΠΊΠ»ΠΈΠΊ Π½Π΅ Π²ΡΠ·ΡΠ²Π°Π΅Ρ ΡΠΎΠΊΡΡ Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ²
<button>
- ΠΡΠΈ ΠΊΠ»ΠΈΠΊΠ΅ Π½Π° ΡΡΡΠ»ΠΊΡ <a>, ΡΠΎΠΊΡΡ ΠΎΡΡΠ°ΡΡΡΡ Π½Π° Π½Π΅ΠΉ, ΠΏΠΎΠΊΠ° Π½Π°ΠΆΠ°ΡΠ° ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΌΡΡΠΈ. ΠΠΎΠ³Π΄Π° Π²Ρ ΠΎΡΠΏΡΡΠΊΠ°Π΅ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΡ, ΡΠΎΠΊΡΡ ΠΏΠ΅ΡΠ΅Π½Π°ΠΏΡΠ°Π²Π»ΡΠ΅ΡΡΡ Π² Π΄ΡΡΠ³ΠΎΠ΅ ΠΌΠ΅ΡΡΠΎ, Π΅ΡΠ»ΠΈ Π² Π°ΡΡΠΈΠ±ΡΡΠ΅
href
ΡΠΊΠ°Π·Π°Π½ ΡΡΡΠ΅ΡΡΠ²ΡΡΡΠΈΠΉ Π½Π° ΡΡΠΎΠΉ ΠΆΠ΅ ΡΡΡΠ°Π½ΠΈΡΠ΅id
Π‘ΡΠΈΠ»ΠΈΠ·ΡΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ ΡΠΎΠΊΡΡΠ°, ΠΌΡ Π±ΠΎΠ»ΡΡΠ΅ Π·Π°Π±ΠΎΡΠΈΠΌΡΡ ΠΎ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡ , ΡΠ°Π±ΠΎΡΠ°ΡΡΠΈΡ Ρ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠΎΠΌ Ρ ΠΊΠ»Π°Π²ΠΈΠ°ΡΡΡΡ, ΡΠ΅ΠΌ ΠΎ ΡΠ΅Ρ , ΠΊΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΠΌΡΡΡ.
ΠΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ Π½Π°ΠΆΠΈΠΌΠ°ΡΡ Β«TabΒ», ΠΎΠ½ΠΈ Π½Π΅ Π·Π½Π°ΡΡ, ΠΊ ΠΊΠ°ΠΊΠΎΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΏΠ΅ΡΠ΅ΠΉΠ΄Π΅Ρ ΡΠΎΠΊΡΡ, Π° ΠΌΠΎΠ³ΡΡ Π»ΠΈΡΡ ΠΏΡΠ΅Π΄ΠΏΠΎΠ»Π°Π³Π°ΡΡ. ΠΠΎΡ ΠΏΠΎΡΠ΅ΠΌΡ Π½Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π·Π°ΠΌΠ΅ΡΠ½ΠΎΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ β ΡΡΠΎΠ±Ρ ΠΏΡΠΈΠ²Π»Π΅ΡΡ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π½Π° ΡΡΠΎΠΊΡΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ.
Π Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²Π΅ ΡΠ»ΡΡΠ°Π΅Π² ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅ ΡΠΎΠΊΡΡΠ° ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π²ΠΏΠΎΠ»Π½Π΅ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΈΡ. ΠΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°ΡΡ Π΅Π³ΠΎ ΠΏΠΎ-ΡΠ²ΠΎΠ΅ΠΌΡ, ΠΏΠΎΠΌΠ½ΠΈΡΠ΅ ΠΎΠ± ΡΡΠΈΡ ΡΠ΅ΡΡΡΡΡ ΠΌΠΎΠΌΠ΅Π½ΡΠ°Ρ :
- ΠΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΎΠ±Π²ΠΎΠ΄ΠΊΠΈ (outline)
- Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΉ
- ΠΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅
background-color
- ΠΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅
color
ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ² background-color
ΠΈ color
ΡΠ°ΡΡΠΎ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΡΡ ΠΏΡΠΈ :hover
, ΠΈΠΌΠ΅Π΅Ρ ΡΠΌΡΡΠ» ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ :focus
ΠΎΡΠΎΡΠΌΠ»ΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΎΠ±Π²ΠΎΠ΄ΠΊΠΈ ΠΈΠ»ΠΈ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ.
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΊΠΎΠΌΠ±ΠΈΠ½Π°ΡΠΈΠΈ ΡΠ²ΠΎΠΉΡΡΠ² outline
, border
ΠΈ box-shadow
Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΡ
ΡΡΠΈΠ»Π΅ΠΉ ΡΠΎΠΊΡΡΠ°. ΠΠ°ΠΊ ΡΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ, Ρ ΠΎΠΏΠΈΡΠ°Π» Π² ΡΡΠ°ΡΡΠ΅ «Creating a custom focus style».
button {
background-color: #dedede;
}
button:hover {
background-color: #aaa;
}
button:focus {
outline: none;
box-shadow: 0 0 0 3px lightskyblue;
}
Π‘ΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΡ Π°ΠΊΡΠΈΠ²Π½ΠΎΠ³ΠΎ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ (:active)
ΠΡΠΈ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΠΈ Ρ ΡΠ΅ΠΌ-ΡΠΎ Π² ΡΠ΅Π°Π»ΡΠ½ΠΎΠΉ ΠΆΠΈΠ·Π½ΠΈ, Π²Ρ ΠΎΠΆΠΈΠ΄Π°Π΅ΡΠ΅ ΡΠ²ΠΎΠ΅Π³ΠΎ ΡΠΎΠ΄Π° ΠΎΡΠΊΠ»ΠΈΠΊ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΏΡΠΈ Π½Π°Π΄Π°Π²Π»ΠΈΠ²Π°Π½ΠΈΠΈ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡ, Π²Ρ ΠΎΠΆΠΈΠ΄Π°Π΅ΡΠ΅, ΡΡΠΎ ΠΎΠ½Π° Π½Π°ΠΆΠΌΡΡΡΡ.
ΠΠ° Π²Π΅Π±-ΡΠ°ΠΉΡΠ°Ρ
ΡΡΠΎΡ ΠΎΡΠΊΠ»ΠΈΠΊ ΡΠ°ΠΊΠΆΠ΅ ΠΏΠΎΠ»Π΅Π·Π΅Π½. ΠΠΎΠΆΠ½ΠΎ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°ΡΡ ΠΌΠΎΠΌΠ΅Π½Ρ Β«Π½Π°ΠΆΠ°ΡΠΈΡ ΠΊΠ½ΠΎΠΏΠΊΠΈΒ» Ρ ΠΏΠΎΠΌΠΎΡΡΡ :active
. ΠΡΠ·ΡΠ²Π°Π΅ΡΡΡ ΡΡΠΎ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅, ΠΊΠΎΠ³Π΄Π° Π²Ρ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΡΠ΅ΡΠ΅ Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ. ΠΠΎΠ΄ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ΠΌ Π² Π΄Π°Π½Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΠΏΠΎΠ΄ΡΠ°Π·ΡΠΌΠ΅Π²Π°Π΅ΡΡΡ:
- Π£Π΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅ Π»Π΅Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΌΡΡΠΈ Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ΅ (Π΄Π°ΠΆΠ΅ ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ Π½Π΅ Π² ΡΠΎΠΊΡΡΠ΅)
- Π£Π΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΏΡΠΎΠ±Π΅Π»Π° (Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠ°Ρ )
button:active {
background-color: #333;
border-color: #333;
color: #eee;
}
ΠΠ²Π΅ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΡΡΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΏΡΠΈΠ½ΡΡΡ ΠΊ ΡΠ²Π΅Π΄Π΅Π½ΠΈΡ:
- Π£Π΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅ ΠΏΡΠΎΠ±Π΅Π»Π° Π²ΡΠ·ΡΠ²Π°Π΅Ρ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅
:active
Ρ ΠΊΠ½ΠΎΠΏΠΎΠΊ (<button>), Π½ΠΎ ΠΏΡΠΈ ΡΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠΈ Enter ΡΡΠΎΠ³ΠΎ Π½Π΅ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ - Enter Π·Π°ΠΏΡΡΠΊΠ°Π΅Ρ ΡΡΡΠ»ΠΊΠΈ Π½ΠΎ Π½Π΅ Π²ΡΠ·ΡΠ²Π°Π΅Ρ Π°ΠΊΡΠΈΠ²Π½ΠΎΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅. ΠΡΠΎΠ±Π΅Π» Π½Π΅ Π·Π°ΠΏΡΡΠΊΠ°Π΅Ρ ΡΡΡΠ»ΠΊΠΈ Π²ΠΎΠΎΠ±ΡΠ΅
Π‘ΡΠΈΠ»ΠΈ ΡΡΡΠ»ΠΎΠΊ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ
Π‘ΡΡΠ»ΠΊΠΈ ΠΈΠΌΠ΅ΡΡ ΡΡΠΈΠ»ΠΈ Π°ΠΊΡΠΈΠ²Π½ΠΎΠ³ΠΎ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. ΠΡΠΈ Π½Π°ΠΆΠ°ΡΠΈΠΈ ΠΎΠ½ΠΈ ΡΡΠ°Π½ΠΎΠ²ΡΡΡΡ ΠΊΡΠ°ΡΠ½ΡΠΌΠΈ
ΠΠ·Π°ΠΈΠΌΠΎΡΠ²ΡΠ·Ρ ΠΌΠ΅ΠΆΠ΄Ρ :active ΠΈ :focus
ΠΡΠΈ ΡΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠΈ Π»Π΅Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΡ ΠΌΡΡΠΈ Π½Π° ΡΠΎΠΊΡΡΠΈΡΡΠ΅ΠΌΠΎΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ΅, Π²ΡΠ·ΡΠ²Π°Π΅ΡΡΡ Π΅Π³ΠΎ Π°ΠΊΡΠΈΠ²Π½ΠΎΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅. ΠΠΎ ΠΎΠ΄Π½ΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎ Ρ ΡΡΠΈΠΌ Π²ΡΠ·ΡΠ²Π°Π΅ΡΡΡ ΠΈ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ ΡΠΎΠΊΡΡΠ°.
ΠΠΎΠ³Π΄Π° Π²Ρ ΠΎΡΠΏΡΡΠΊΠ°Π΅ΡΠ΅ Π»Π΅Π²ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ ΠΌΡΡΠΈ, ΡΠΎΠΊΡΡ ΠΎΡΡΠ°ΡΡΡΡ Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ΅.
ΠΡΠΎ ΠΎΡΠ½ΠΎΡΠΈΡΡΡ ΠΊ Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²Ρ ΡΠΎΠΊΡΡΠΈΡΡΠ΅ΠΌΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², ΠΊΡΠΎΠΌΠ΅ ΡΡΡΠ»ΠΎΠΊ ΠΈ ΠΊΠ½ΠΎΠΏΠΎΠΊ.
ΠΠ»Ρ ΡΡΡΠ»ΠΎΠΊ:
- ΠΡΠΈ ΡΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠΈ Π»Π΅Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΌΡΡΠΈ Π² Firefox ΠΈ Chrome Π²ΡΠ·ΡΠ²Π°ΡΡΡΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ
:active
ΠΈ:focus
. Π Safari β ΡΠΎΠ»ΡΠΊΠΎ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅:active
(ΠΏΡΠΎΠ²Π΅ΡΠ΅Π½ΠΎ ΡΠΎΠ»ΡΠΊΠΎ Π½Π° Mac OS) - ΠΡΠ»ΠΈ ΠΎΡΠΏΡΡΡΠΈΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ ΠΌΡΡΠΈ,
:focus
ΠΎΡΡΠ°ΡΡΡΡ Π½Π° ΡΡΡΠ»ΠΊΠ΅ (Π΅ΡΠ»ΠΈ Π°ΡΡΠΈΠ±ΡΡhref
Π½Π΅ ΡΡΡΠ»Π°Π΅ΡΡΡ Π½Π°id
Π½Π° ΡΡΠΎΠΉ ΠΆΠ΅ ΡΡΡΠ°Π½ΠΈΡΠ΅). Π Safari ΡΠΎΠΊΡΡ Π²ΠΎΠ·Π²ΡΠ°ΡΠ°Π΅ΡΡΡ Π½Π°<body>
ΠΠ»Ρ ΠΊΠ½ΠΎΠΏΠΎΠΊ:
- ΠΠΎΠ³Π΄Π° Π²Ρ ΡΠ΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΠ΅ Π»Π΅Π²ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ ΠΌΡΡΠΈ: ΠΎΠ±Π° ΡΠΎΡΡΠΎΡΠ½ΠΈΡ
:active
ΠΈ:focus
Π²ΡΠ·ΡΠ²Π°ΡΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π² Chrome. Π‘ΠΎΡΡΠΎΡΠ½ΠΈΠ΅:focus
ΡΠΎΠ²ΡΠ΅ΠΌ Π½Π΅ Π²ΡΠ·ΡΠ²Π°Π΅ΡΡΡ Π² Safari ΠΈ Firefox (Mac). Π― Π½Π°ΠΏΠΈΡΠ°Π» ΠΏΡΠΎ ΡΡΠΎ ΡΡΡΠ°Π½Π½ΠΎΠ΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ Π·Π΄Π΅ΡΡ.
ΠΡΠ»ΠΈ Π½ΡΠΆΠ½ΠΎ, ΡΡΠΎΠ±Ρ ΠΊΠ»ΠΈΠΊΠΈ Π²ΡΠ·ΡΠ²Π°Π»ΠΈ ΡΠΎΠΊΡΡ Π΄Π»Ρ ΠΊΠ½ΠΎΠΏΠΎΠΊ, Π½ΡΠΆΠ½ΠΎ ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ°Π½ΡΡΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΡΠΎΡ JavaScript (Π΄Π»Ρ ΡΠ΅Π³ΠΎ ΡΡΠΎ Π½ΡΠΆΠ½ΠΎ, ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠΎΡΠΈΡΠ°ΡΡ Π² ΡΡΠ°ΡΡΠ΅, ΡΡΡΠ»ΠΊΡ Π½Π° ΠΊΠΎΡΠΎΡΡΡ Ρ ΡΠΊΠ°Π·Π°Π» Π²ΡΡΠ΅).
document.addEventListener('click', event => {
if (event.target.matches('button')) {
event.target.focus()
}
})
ΠΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΡΡΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π° ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ Π½Π°ΠΆΠ°ΡΠΈΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ Π½Π° ΡΠ»Π΅Π΄ΡΡΡΠ΅Π΅:
- ΠΡΠΈ ΡΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΌΡΡΠΈ,
:active
Π²ΡΠ·ΡΠ²Π°Π΅ΡΡΡ Π²ΠΎ Π²ΡΠ΅Ρ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ ,:focus
ΡΠΎΠ»ΡΠΊΠΎ Π² Chrome - ΠΡΠ»ΠΈ ΠΎΡΠΏΡΡΡΠΈΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ ΠΌΡΡΠΈ, Π²ΡΠ·ΡΠ²Π°Π΅ΡΡΡ
:focus
Π² Safari ΠΈ Firefox (Mac OS).:focus
ΠΎΡΡΠ°ΡΡΡΡ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠ΅ Π²ΠΎ Π²ΡΠ΅Ρ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ
ΠΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΎΠΊ Π² Safari ΠΏΠΎΡΠ»Π΅ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ ΡΡΠ°Π³ΠΌΠ΅Π½ΡΠ° JS-ΠΊΠΎΠ΄Π°
Π’Π΅ΠΏΠ΅ΡΡ, ΠΊΠΎΠ³Π΄Π° Π²Ρ Π·Π½Π°Π΅ΡΠ΅ Π²ΡΡ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΠ΅ ΠΎ ΡΠΎΡΡΠΎΡΠ½ΠΈΡΡ hover, focus ΠΈ active, Ρ Ρ ΠΎΡΡ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡΠΈΡΡ ΠΎ ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΠΈ Π²ΡΠ΅Ρ ΡΡΡΡ
ΠΠΎΠ»ΡΠ΅Π±Π½Π°Ρ ΠΊΠΎΠΌΠ±ΠΈΠ½Π°ΡΠΈΡ
ΠΠΎΠ»ΡΠ΅Π±Π½Π°Ρ ΠΊΠΎΠΌΠ±ΠΈΠ½Π°ΡΠΈΡ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΠΌ ΠΏΠΎΠ»ΡΡΠ°ΡΡ ΠΎΡΠΊΠ»ΠΈΠΊ, ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ΠΈ Π½Π°Π²ΠΎΠ΄ΡΡ, ΡΠΎΠΊΡΡΠΈΡΡΡΡΡΡ ΠΈΠ»ΠΈ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΡΡΡ Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ. ΠΠΎΡ ΠΊΠΎΠ΄, ΠΊΠΎΡΠΎΡΡΠΉ Π²Π°ΠΌ Π½ΡΠΆΠ΅Π½:
.element:hover,
.element:active {
/* ΠΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ²Π΅Ρ ΡΠΎΠ½Π°/ΡΠ΅ΠΊΡΡΠ° */
}
.element:focus {
/* ΠΠΎΠΊΠ°Π·Π°ΡΡ ΠΎΠ±Π²ΠΎΠ΄ΠΊΡ */
}
ΠΠ»Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ ΠΌΡΡΠΈ:
- ΠΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π½Π°Π²ΠΎΠ΄ΠΈΡ Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΠΌΠ΅Π½ΡΠ΅ΡΡΡ
background-color
(ΠΈ/ΠΈΠ»ΠΈcolor
). ΠΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ ΠΎΡΠΊΠ»ΠΈΠΊ. - ΠΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΊΠ»ΠΈΠΊΠ°Π΅Ρ Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅ΡΡΡ ΠΎΠ±Π²ΠΎΠ΄ΠΊΠ° ΡΠΎΠΊΡΡΠ°. ΠΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ ΠΎΡΠΊΠ»ΠΈΠΊ.
ΠΠ»Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ ΠΊΠ»Π°Π²ΠΈΠ°ΡΡΡΡ:
- ΠΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π²ΡΠ±ΠΈΡΠ°Π΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ Tab, ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅ΡΡΡ ΠΎΠ±Π²ΠΎΠ΄ΠΊΠ° ΡΠΎΠΊΡΡΠ°. ΠΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ ΠΎΡΠΊΠ»ΠΈΠΊ.
- ΠΠΎΠ³Π΄Π° ΠΎΠ½ΠΈ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΡΡΡ Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ, ΠΌΠ΅Π½ΡΠ΅ΡΡΡ
background-color
(ΠΈ/ΠΈΠ»ΠΈcolor
). ΠΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ ΠΎΡΠΊΠ»ΠΈΠΊ.
ΠΡΡΡΠ΅Π΅ ΠΈΠ· ΠΎΠ±ΠΎΠΈΡ ΠΌΠΈΡΠΎΠ²!
- Π― Π½Π΅ ΠΏΡΠΎΠ²Π΅ΡΡΠ» ΡΡΠ°ΡΠ΅Π»ΡΠ½ΠΎ ΠΌΠ°Π³ΠΈΡΠ΅ΡΠΊΡΡ ΠΊΠΎΠΌΠ±ΠΈΠ½Π°ΡΠΈΡ.ΠΡΠΎ Π»ΠΈΡΡ Π°ΡΠ³ΡΠΌΠ΅Π½Ρ Π² ΠΏΠΎΠ»ΡΠ·Ρ ΡΡΠΎΠΉ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΠΈ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΠΈ. ΠΡΠ΄Ρ ΠΏΡΠΈΠ·Π½Π°ΡΠ΅Π»Π΅Π½, Π΅ΡΠ»ΠΈ Π²Ρ ΠΏΠΎΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΌΠ½Π΅ ΠΏΡΠΎΠ²Π΅ΡΠΈΡΡ Π΅Ρ ΠΈ Π΄Π°Π΄ΠΈΡΠ΅ Π·Π½Π°ΡΡ ΠΎ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΡΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ°Ρ .
- ΠΡΠ»ΠΈ Π±ΡΠ΄Π΅ΡΠ΅ ΠΏΡΠΎΠ²Π΅ΡΡΡΡ, Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ Codepen. Π‘ΠΎΡΡΠΎΡΠ½ΠΈΠ΅ ΡΠΎΠΊΡΡΠ° Π΄Π»Ρ ΡΡΡΠ»ΠΎΠΊ Π² Codepen Π²Π΅Π΄ΡΡ ΡΠ΅Π±Ρ ΠΎΡΠ΅Π½Ρ ΡΡΡΠ°Π½Π½ΠΎ. ΠΡΠ»ΠΈ Π½Π°Π²Π΅ΡΡΠΈ ΠΊΡΡΡΠΎΡ Π½Π° ΡΡΡΠ»ΠΊΡ, ΠΎΠ±Π²ΠΎΠ΄ΠΊΠ° ΡΠΎΠΊΡΡΠ° ΡΠ΄Π°Π»ΠΈΡΡΡ. ΠΠΎΡΠ΅ΠΌΡ? Π― Π½Π΅ Π·Π½Π°Ρ. ΠΠΎΡΠΎΠΉ ΠΌΠ½Π΅ ΠΊΠ°ΠΆΠ΅ΡΡΡ, ΡΡΠΎ Π»ΡΡΡΠ΅ Π²ΡΠ΅Π³ΠΎ ΠΏΡΠΎΠ²Π΅ΡΡΡΡ ΠΏΠΎΠ΄ΠΎΠ±Π½ΡΠ΅ Π²Π΅ΡΠΈ Π±Π΅Π· ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΡ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ². ΠΡΠΎΡΡΠΎ ΡΡΠ°ΡΡΠ΅ Π΄ΠΎΠ±ΡΡΠ΅ HTML, CSS, JS.
ΠΠ΅ Π²ΠΎΠ»ΡΠ΅Π±Π½Π°Ρ (Π½ΠΎ ΠΌΠΎΠΆΠ΅Ρ Π΄Π°ΠΆΠ΅ Π»ΡΡΡΠ΅) ΠΊΠΎΠΌΠ±ΠΈΠ½Π°ΡΠΈΡ
ΠΠ°ΠΊ Ρ ΡΠΏΠΎΠΌΡΠ½ΡΠ» Π²ΡΡΠ΅, ΠΊΠ»ΠΈΠΊΠΈ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΈΠΌΠ΅ΡΡ ΡΡΡΠ°Π½Π½ΠΎΠ΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ Π² Safari ΠΈ Firefox Π½Π° Mac OS. ΠΡΠ»ΠΈ Π²Ρ Π΄ΠΎΠ±Π°Π²ΠΈΠ»ΠΈ ΡΡΠ°Π³ΠΌΠ΅Π½Ρ JavaScript-ΠΊΠΎΠ΄Π°, ΠΊΠΎΡΠΎΡΡΠΉ Ρ ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π» Π²ΡΡΠ΅, ΠΌΠ°Π³ΠΈΡΠ΅ΡΠΊΠ°Ρ ΠΊΠΎΠΌΠ±ΠΈΠ½Π°ΡΠΈΡ Π²ΡΡ Π΅ΡΠ΅ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ. ΠΠΎ Π½Π΅ ΠΈΠ΄Π΅Π°Π»ΡΠ½ΠΎ.
ΠΠΎΡ ΡΡΠΎ ΠΏΡΠΎΠΈΠ·ΠΎΠΉΠ΄ΡΡ Π² Safari ΠΈ Firefox Π½Π° Mac OS:
- ΠΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π΄Π΅ΡΠΆΠΈΡ ΠΊΠ½ΠΎΠΏΠΊΡ ΠΌΡΡΠΈ Π½Π°ΠΆΠ°ΡΠΎΠΉ, Π½ΠΈΡΠ΅Π³ΠΎ Π½Π΅ ΠΌΠ΅Π½ΡΠ΅ΡΡΡ
- ΠΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ ΠΎΡΠΏΡΡΠΊΠ°ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ, ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠΎΠ»ΡΡΠ°Π΅Ρ ΡΠΎΠΊΡΡ
ΠΡΠ»ΠΈ Π²Ρ ΡΡΠΈΡΠ°Π΅ΡΠ΅, ΡΡΠΎ ΡΡΠΎΠ³ΠΎ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ, ΡΠΎ Π²ΠΎΠ»ΡΠ΅Π±Π½Π°Ρ ΠΊΠΎΠΌΠ±ΠΈΠ½Π°ΡΠΈΡ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ. ΠΠΎΠΆΠ΅ΡΠ΅ Π½Π° ΡΡΠΎΠΌ ΠΈ ΠΎΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡΡ.
ΠΠΎ Π΅ΡΠ»ΠΈ Π²Ρ ΡΡΠΈΡΠ°Π΅ΡΠ΅ ΡΠ°ΠΊΠΎΠ΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ Π½Π΅Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ Π΄ΠΎΡΡΡΠΏΠ½ΡΠΌ, ΠΌΠΎΠΆΠ΅Ρ Π²ΠΎΠ·Π½ΠΈΠΊΠ½ΡΡΡ ΠΆΠ΅Π»Π°Π½ΠΈΠ΅ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°ΡΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ :hover
, :focus
ΠΈ :active
ΠΏΠΎ ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎΡΡΠΈ.
.element:hover {
/* ΠΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ²Π΅Ρ ΡΠΎΠ½Π°/ΡΠ΅ΠΊΡΡΠ° */
}
.element:active {
/* ΠΠ½ΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ Π² ΡΠ²Π΅ΡΠ΅ ΡΠΎΠ½Π° ΠΈ ΡΠ΅ΠΊΡΡΠ° */
}
.element:focus {
/* ΠΠΎΠΊΠ°Π·Π°ΡΡ ΠΎΠ±Π²ΠΎΠ΄ΠΊΡ */
}
ΠΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π² Safari, Π΅ΡΠ»ΠΈ Π±ΡΠ»ΠΈ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Π½Ρ Π²ΡΠ΅ ΡΡΠΈ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ
ΠΠΎΡ ΠΈ Π²ΡΡ! ΠΠ»Π°Π³ΠΎΠ΄Π°ΡΡ Π·Π° ΡΡΠ΅Π½ΠΈΠ΅ ΠΈ Π½Π°Π΄Π΅ΡΡΡ, ΡΠ΅Π³ΠΎΠ΄Π½Ρ Π²Ρ ΡΠ·Π½Π°Π»ΠΈ ΡΡΠΎ-ΡΠΎ Π½ΠΎΠ²ΠΎΠ΅.
20 ΡΠ΄ΠΈΠ²ΠΈΡΠ΅Π»ΡΠ½ΡΡ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ Π½Π° ΡΠΈΡΡΠΎΠΌ CSS
ΠΈΡΡΠΎΡΠ½ΠΈΠΊ: 20 Amazing Pure CSS Animated Buttons
Π°Π²ΡΠΎΡ: Brenda Stokes Barron The Digital Inkwell
ΠΡΡΡΠΏΠ»Π΅Π½ΠΈΠ΅
ΠΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΠΏΡΠΈΠ΄Π°ΡΡ ΡΠ²ΠΎΠ΅ΠΌΡ Π²Π΅Π±-ΡΠ°ΠΉΡΡ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Π±ΠΎΠ»ΡΡΠ΅ ΠΈΠ·ΡΡΠ΅ΡΡΠ²Π°, Π²Π°ΠΌ Π½Π°Π²Π΅ΡΠ½ΡΠΊΠ° Π·Π°Ρ ΠΎΡΠ΅ΡΡΡ ΠΈΡΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΡ ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ CSS. ΠΡΠΈ ΡΠ°ΡΡΠΈ ΠΊΠΎΠ΄Π° Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ ΡΠ»ΠΎΠΉ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΠΎΡΡΠΈ Π²Π°ΡΠ΅ΠΌΡ ΡΠ°ΠΉΡΡ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΎΡΠ΅Π½ΡΡ Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²ΠΎ ΠΏΠΎΡΠ΅ΡΠΈΡΠ΅Π»Π΅ΠΉ ΡΠ°ΠΉΡΠ°. ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, ΠΈΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π»Ρ ΠΏΡΠΈΠ΄Π°Π½ΠΈΡ ΠΎΡΡΡΠ΅Π½ΠΈΡ Π΄ΠΈΠ½Π°ΠΌΠΈΠΊΠΈ ΠΈ Π΄Π°Π»ΡΠ½Π΅ΠΉΡΠ΅ΠΉ ΠΏΠΎΠΌΠΎΡΠΈ Π² ΡΠΊΡΠ΅ΠΏΠ»Π΅Π½ΠΈΠΈ Π²Π°ΡΠ΅Π³ΠΎ Π±ΡΠ΅Π½Π΄Π°. ΠΠΈΠΆΠ΅ ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½ ΡΠΏΠΈΡΠΎΠΊ ΠΈΠ· 20 ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ CSS, ΠΊΠΎΡΠΎΡΡΠ΅ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π½Π° ΡΠ²ΠΎΠΉ ΡΠ°ΠΉΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΠΏΡΠΎΡΡΠΎΠ³ΠΎ CSS.
1. Stylish Animated CSS Buttons for Bloggers
See the Pen
Stylish Animated CSS Buttons For Blogger. by Prio-Softβ’ (@priosoft)
on CodePen.
ΠΡΠΎΡ Π½Π°Π±ΠΎΡ ΡΡΠΈΠ»ΡΠ½ΡΡ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ CSS ΠΈΠ΄Π΅Π°Π»ΡΠ½ΠΎ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΈΡ Π΄Π»Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Π±Π»ΠΎΠ³Π³Π΅ΡΠ°ΠΌΠΈ. ΠΠ½ΠΈ ΠΏΡΠ΅Π΄Π»Π°Π³Π°ΡΡ ΡΠΈΡΠΎΠΊΠΈΠΉ ΡΠΏΠ΅ΠΊΡΡ ΡΡΡΠ΅ΠΊΡΠΎΠ² ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ°, ΠΎΡ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π½ΠΈΡ ΡΠ²Π΅ΡΠ° ΠΏΠΎ ΠΊΠ½ΠΎΠΏΠΊΠ΅ ΡΠ»Π΅Π²Π° Π½Π°ΠΏΡΠ°Π²ΠΎ (ΠΈ Π½Π°ΠΎΠ±ΠΎΡΠΎΡ), ΡΠ²Π΅ΡΡ Ρ Π²Π½ΠΈΠ·, ΡΡΠΎ ΠΏΠΎΠ΄ΡΠ΅ΡΠΊΠΈΠ²Π°Π΅Ρ ΠΊΠΎΠ½ΡΡΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π΄ΡΡΠ³ΠΎΠ΅.
Stylish Animated CSS Buttons for Bloggers.
2. Animated CSS Buttons
See the Pen
animated-css-buttons by Naved khan (@Navedkhan012)
on CodePen.
ΠΡΠΎΡ Π½Π°Π±ΠΎΡ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ CSS ΠΎΠ±Π»Π°Π΄Π°Π΅Ρ ΠΏΡΠΎΡΡΠΎΡΠΎΠΉ, ΠΊΠΎΡΠΎΡΠ°Ρ Π΄Π΅Π»Π°Π΅Ρ ΠΈΡ ΠΎΡΠ΅Π½Ρ ΡΠ΄ΠΎΠ±Π½ΡΠΌΠΈ Π² ΡΠ°ΠΌΡΡ ΡΠ°Π·Π½ΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ°Ρ . ΠΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° ΡΡΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π·Π°ΠΏΠΎΠ»Π½ΡΡΡΡΡ ΡΠ²Π΅ΡΠΎΠΌ ΠΏΠΎΠ΄ ΡΠ³Π»Π°ΠΌΠΈ, ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ ΡΡΡΠ΅ΠΊΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ, Π·Π°Π»ΠΈΠ²ΠΊΠΈ ΡΠ·ΠΎΡΠΎΠΌ ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π΄ΡΡΠ³ΠΎΠ΅.
Animated CSS Buttons.
3. More Animated CSS Buttons
See the Pen
Animated CSS Buttons by an (@annguyn)
on CodePen.
ΠΡΠΎΡ Π½Π°Π±ΠΎΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ CSS ΠΎΡΠ΅Π½Ρ ΠΏΡΠΎΡΡ, Π½ΠΎ ΠΈΠΌΠ΅Π½Π½ΠΎ ΡΡΠΎ Π΄Π΅Π»Π°Π΅Ρ ΠΈΡ ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°ΡΠ΅Π»ΡΠ½ΡΠΌΠΈ. ΠΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΠΎΡΡΠΈ Π½Π° ΡΠ²ΠΎΠΉ ΡΠ°ΠΉΡ, ΡΡΠΎ Π±Π΅Π·ΠΎΠΏΠ°ΡΠ½Π°Ρ ΡΡΠ°Π²ΠΊΠ°.
More Animated CSS Buttons
4. CSS3 Buttons
See the Pen
css 3 buttons by Oleg Semenov (@wemonsh)
on CodePen.
Π’Π΅ΠΏΠ΅ΡΡ ΡΡΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ CSS3 ΠΏΡΠ΅Π΄Π»Π°Π³Π°ΡΡ ΠΊΠ»Π°ΡΡΠ½ΡΠ΅ ΡΡΡΠ΅ΠΊΡΡ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Π°. ΠΠ΅ΠΊΠΎΡΠΎΡΡΠ΅ Π·Π°ΠΏΠΎΠ»Π½ΡΡΡΡΡ ΡΠ²Π΅ΡΠΎΠΌ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ, Π½ΠΎ Π΄ΡΡΠ³ΠΈΠ΅ ΡΠ°Π·Π²ΠΈΠ²Π°ΡΡ ΡΡΡΠ΅ΠΊΡ ΠΏΠ°Π΄Π°ΡΡΠ΅ΠΉ ΡΠ΅Π½ΠΈ, ΠΊΠΎΡΠΎΡΡΠΉ Π·Π°ΡΡΠ°Π²Π»ΡΠ΅Ρ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΊΠ°Π·Π°ΡΡΡΡ ΠΎΡΠΎΡΠ²Π°Π½Π½ΡΠΌΠΈ ΠΎΡ ΡΠΊΡΠ°Π½Π°.
CSS3 Buttons
5. Simple CSS Buttons Animation
See the Pen
Simple CSS buttons animation by Michael Domanych (@mhouse)
on CodePen.
ΠΠ°ΠΊ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΈΠ· Π½Π°Π·Π²Π°Π½ΠΈΡ ΡΡΠΎΠ³ΠΎ Π½Π°Π±ΠΎΡΠ° ΠΊΠ½ΠΎΠΏΠΎΠΊ, ΡΡΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ CSS ΠΏΡΠΎΡΡΡ ΠΈ ΠΏΠΎΠ½ΡΡΠ½Ρ Π² ΡΠ²ΠΎΠ΅ΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅. ΠΠ½ΠΈ ΠΏΡΠ΅Π΄Π»Π°Π³Π°ΡΡ ΡΠΊΠΎΠ»ΡΠ·ΡΡΠΈΠΉ ΡΠ²Π΅Ρ ΡΠΎ Π²ΡΠ΅Ρ ΡΡΠΎΡΠΎΠ½, Π° ΡΠ°ΠΊΠΆΠ΅ Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΎΡ ΡΠ΅Π½ΡΡΠ°.
Simple CSS Buttons Animation
6. CSS + SVG Button Animation
See the Pen
CSS + SVG Button Animation by ClΓ©ment (@clmntclmnt)
on CodePen.
ΠΠΎΡ ΠΎΠ΄ΠΈΠ½ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½Π°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ°, Π½ΠΎ Π΅Π΅ ΡΡΡΠ΅ΠΊΡ, Π½Π΅ΡΠΎΠΌΠ½Π΅Π½Π½ΠΎ, ΡΠ±Π΅Π΄ΠΈΡΠ΅Π»ΡΠ½ΡΠΉ. ΠΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° ΡΡΠ° ΠΊΠ½ΠΎΠΏΠΊΠ° Π·Π°ΠΏΠΎΠ»Π½ΡΠ΅ΡΡΡ ΡΠ²Π΅ΡΠΎΠΌ ΠΎΡ ΡΡΠΎΡΠΎΠ½ Π΄ΠΎ ΡΠ΅ΡΠ΅Π΄ΠΈΠ½Ρ, Π·Π°ΡΠ΅ΠΌ Π²ΠΎΠΊΡΡΠ³ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ ΠΊΠΎΠ½ΡΡΠ°ΡΡΠ½ΡΠΉ ΡΠ²Π΅ΡΠ½ΠΎΠΉ ΠΊΠΎΠ½ΡΡΡ.
CSS + SVG Button Animation.
7. Animation with Cubic Bezier
See the Pen
animation with cubic bezier by Franca (@franca_)
on CodePen.
ΠΡΠ° Π·Π°Π±Π°Π²Π½Π°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° Π΄ΠΎΠ±Π°Π²ΠΈΡ Π½Π°ΡΡΠΎΡΡΠΈΠΉ ΡΡΠΈΠ»Ρ Π»ΡΠ±ΠΎΠΌΡ Π²Π΅Π±-ΡΠ°ΠΉΡΡ. ΠΠΎΠ³Π΄Π° Π²Ρ Π½Π°Π²ΠΎΠ΄ΠΈΡΠ΅ ΠΊΡΡΡΠΎΡ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡ, ΡΠ΅ΠΊΡΡ Π²Π½ΡΡΡΠΈ Π½Π΅Π΅ ΠΌΠ΅Π½ΡΠ΅Ρ ΡΠ²Π΅Ρ.
Animation with Cubic Bezier.
8. Pure CSS Button
See the Pen
Pure CSS Button (animation with clip-path) by Marco AntΓ΄nio (@thismarcoantonio)
on CodePen.
ΠΡΠ° ΠΊΠ½ΠΎΠΏΠΊΠ° Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΎΡΠ»ΠΈΡΠ°Π΅ΡΡΡ ΠΎΡ ΠΎΡΡΠ°Π»ΡΠ½ΠΎΠΉ ΡΠ°ΡΡΠΈ ΡΡΠΎΠ³ΠΎ ΡΠΏΠΈΡΠΊΠ°. ΠΠ½ ΠΈΠΌΠ΅Π΅Ρ ΠΏΡΡΡ ΠΎΠ±ΡΠ΅Π·ΠΊΠΈ, Π±Π»Π°Π³ΠΎΠ΄Π°ΡΡ ΠΊΠΎΡΠΎΡΠΎΠΌΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° Π½Π° ΡΠ΅ΠΊΡΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΠΊΡΡΠ³Π° ΡΠΊΠΎΠ»ΡΠ·ΠΈΡ ΠΏΠΎ ΡΡΡΠ΅Π»ΠΊΠ΅, ΠΏΡΠ΅Π²ΡΠ°ΡΠ°Ρ Π·Π°ΠΎΡΡΡΠ΅Π½Π½ΡΠΉ ΠΊΠΎΠ½Π΅Ρ Π² ΡΠΎΡΠΊΡ.
Pure CSS Button
9. Blobs Button
See the Pen
Blobs button by Hilary (@hilwat)
on CodePen.
ΠΠ°ΠΊ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΈΠ· Π½Π°Π·Π²Π°Π½ΠΈΡ, ΠΊΠ½ΠΎΠΏΠΊΠ° Blobs Π·Π°ΠΏΠΎΠ»Π½ΡΠ΅ΡΡΡ ΡΠ°Π·Π½ΠΎΡΠ²Π΅ΡΠ½ΡΠΌΠΈ ΠΊΠ°ΠΏΠ»ΡΠΌΠΈ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ°. ΠΡΠΎ ΠΎΡΠ»ΠΈΡΠ½ΡΠΉ Π²ΡΠ±ΠΎΡ Π΄Π»Ρ ΡΠ΅Ρ , ΠΊΡΠΎ Ρ ΠΎΡΠ΅Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΡΠΈΡ ΠΎΡΠΈ ΠΈΠ»ΠΈ Π²Π΅ΡΠ΅Π»ΡΡ Π½Π° ΡΠ²ΠΎΠΈ ΡΠ°ΠΉΡΡ.
Blobs Button
10. Simple CSS Button Hover Effects
See the Pen
Simple CSS Button Hover Effects by Natalia Reshetnikova (@natalia-reshetnikova)
on CodePen.
ΠΠΎΡ Π΅ΡΠ΅ ΠΎΠ΄ΠΈΠ½ Π½Π°Π±ΠΎΡ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ Π·Π°Π½ΠΈΠΆΠ΅Π½Π½ΡΡ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ, ΠΊΠΎΡΠΎΡΡΠ΅ Π²ΡΠ΅ Π΅ΡΠ΅ ΠΌΠΎΠ³ΡΡ ΠΎΠΊΠ°Π·Π°ΡΡ ΡΠ΅Π°Π»ΡΠ½ΠΎΠ΅ Π²Π»ΠΈΡΠ½ΠΈΠ΅. ΠΠ΅ΠΊΠΎΡΠΎΡΡΠ΅ ΡΡΡΠ΅ΠΊΡΡ Π²ΠΊΠ»ΡΡΠ°ΡΡ Π² ΡΠ΅Π±Ρ ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ° ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΡΠ°ΠΌΡ ΠΊΠ½ΠΎΠΏΠΊΡ, ΡΠ°Π·Π΄Π΅Π»ΡΡΡΡΡΡΡ Π½Π° X-ΠΎΠ±ΡΠ°Π·Π½ΡΡ ΡΠΎΡΠΌΡ, ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠ²Π΅ΡΠ°.
Simple CSS Button Hover Effects.
11. CSS Button with Hover Effect
See the Pen
CSS Button With Hover Effect by Raj Kamal Chenumalla (@avvign)
on CodePen.
ΠΠΎΡ Π΅ΡΠ΅ ΠΎΠ΄Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠ°, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π΅Ρ ΡΡΠΏΠ΅Ρ ΠΏΡΠΎΡΡΠΎΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½. ΠΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Ρ Π½Π΅Π³ΠΎ ΡΠ°Π·Π²ΠΈΠ²Π°Π΅ΡΡΡ Π°ΡΡΠ°, ΠΊΠΎΡΠΎΡΠ°Ρ Π±ΡΡΡΡΠΎ ΠΈΡΡΠ΅Π·Π°Π΅Ρ. Π’ΠΎΠ½ΠΊΠΈΠΉ, Π½ΠΎ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΡΠΉ.
CSS Button with Hover Effect.
12. 100 Days CSS Button N 045
See the Pen
100 days css Button NΒ° 045 by Vitor Siqueira (@vitor-siqueira)
on CodePen.
ΠΡΠ° ΠΏΡΠΎΡΡΠ°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΈΠΌΠ΅Π΅Ρ ΡΡΡΠ΅ΠΊΡ, ΠΊΠΎΠ³Π΄Π° ΠΊΠΎΠ½ΡΡΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΡΡΠΈΠ»ΠΈΠ²Π°Π΅ΡΡΡ Π² ΡΠ²Π΅ΡΠ΅ ΠΈ ΠΏΡΠ΅ΡΠ»Π΅Π΄ΡΠ΅Ρ Π΅Π΅ Π³ΡΠ°Π½ΠΈΡΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° Π½Π΅Π΅ ΠΊΡΡΡΠΎΡΠ°.
100 Days CSS Button N 045.
13. Pure CSS Buttons
See the Pen
Pure CSS Buttons by Ishaan Saxena (@ishaansaxena)
on CodePen.
ΠΠΎΡ Π΅ΡΠ΅ ΠΎΠ΄ΠΈΠ½ Π½Π°Π±ΠΎΡ ΡΡΠΏΠ΅Ρ ΠΏΡΠΎΡΡΡΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ CSS. ΠΠ½ΠΈ Π·Π°ΠΏΠΎΠ»Π½ΡΡΡΡΡ ΡΠ²Π΅ΡΠΎΠΌ ΡΠΎ Π²ΡΠ΅Ρ ΡΡΠΎΡΠΎΠ½ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΈ ΠΌΠΎΠ³ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ ΠΊΠ°ΠΊ Π·Π½Π°ΡΠΊΠΈ.
Pure CSS Buttons.
14. Auto Width CSS Button Flip
See the Pen
Auto Width Css Button Flip by Alex Moore (@MoorLex)
on CodePen.
ΠΠ°ΠΊΠΎΠΉ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΠΉ Π²Π°ΡΠΈΠ°Π½Ρ! ΠΠΎΠ³Π΄Π° Π²Ρ Π½Π°Π²ΠΎΠ΄ΠΈΡΠ΅ ΠΊΡΡΡΠΎΡ ΠΌΡΡΠΈ Π½Π° ΡΡΡ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ, ΠΎΠ½Π°, ΠΊΠ°ΠΆΠ΅ΡΡΡ, Π½Π°ΠΊΠ»ΠΎΠ½ΡΠ΅ΡΡΡ Π²ΠΏΠ΅ΡΠ΅Π΄, ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Ρ Π΄ΡΡΠ³ΠΎΠΉ ΡΠ΅ΠΊΡΡ Π½Π° Β«ΠΎΠ±ΡΠ°ΡΠ½ΠΎΠΉ ΡΡΠΎΡΠΎΠ½Π΅Β» ΠΊΠ½ΠΎΠΏΠΊΠΈ.
Auto Width CSS Button Flip.
15. Collection of Button Hover Effects
See the Pen
Collection of Button Hover Effects by David Conner (@davidicus)
on CodePen.
Hereβs another set of animated CSS buttons that use fun hover effects to make a statement. Outline effects, fills, and color shifts make up the majority of the effects used here.
Collection of Button Hover Effects.
16. Pure CSS Button with Ring Indicator
See the Pen
Pure CSS Button with Ring Indicator by Cole McCombs (@mccombsc)
on CodePen.
ΠΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΠΏΡΠΈΠ²Π»Π΅ΡΡ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΊ ΠΏΡΠΈΠ·ΡΠ²Ρ ΠΊ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ ΠΈΠ»ΠΈ ΡΠ΅ΠΌΡ-ΡΠΎ Π² ΡΡΠΎΠΌ ΡΠΎΠ΄Π΅, ΡΡΠ° ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΈΠ΄Π΅Π°Π»ΡΠ½ΡΠΌ Π²ΡΠ±ΠΎΡΠΎΠΌ. ΠΠ½ ΠΏΠΎΡΡΠΎΡΠ½Π½ΠΎ ΠΈΠ·Π»ΡΡΠ°Π΅Ρ ΠΊΠΎΠ»ΡΡΠΎ ΠΈΠ· ΡΠ²ΠΎΠ΅Π³ΠΎ ΡΠ΅Π½ΡΡΠ°, ΠΎΠ±ΡΠ°ΡΠ°Ρ Π½Π° Π½Π΅Π³ΠΎ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅. ΠΠ°ΡΠ΅ΠΌ, ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ, ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΏΠΎΠ΄ΡΠ²Π΅ΡΠΈΠ²Π°Π΅ΡΡΡ ΠΈ ΡΠ»Π΅Π³ΠΊΠ° ΠΏΠΎΠ΄Π½ΠΈΠΌΠ°Π΅ΡΡΡ.
Pure CSS Button with Ring Indicator
17. CSS3 Button Hover Effects with FontAwesome
See the Pen
CSS3 Button Hover Effects with FontAwesome by foxeisen (@foxeisen)
on CodePen.
ΠΡΠΎΡ Π½Π°Π±ΠΎΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΡΡΡΠ΅ΠΊΡΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Π² ΡΠΎΡΠ΅ΡΠ°Π½ΠΈΠΈ Ρ FontAwesome Π΄Π»Ρ Π½Π΅ΠΊΠΎΡΠΎΡΡΡ Π²Π΅ΡΠ½ΡΡ Π²Π°ΡΠΈΠ°Π½ΡΠΎΠ² Π΄ΠΈΠ·Π°ΠΉΠ½Π°. ΠΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° Π½Π° ΡΡΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ ΡΡΡΠ΅Π»ΠΊΠ° Π²ΠΌΠ΅ΡΡΠΎ ΡΠ΅ΠΊΡΡΠ°, ΡΠ΅ΠΊΡΡΠΎΠ²ΠΎΠ΅ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΡΡΡΠ΅Π»ΠΊΠΈ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠ΅ ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π΄ΡΡΠ³ΠΎΠ΅.
CSS3 Button Hover Effects with FontAwesome
18. CSS3 3D Flip Button
See the Pen
CSS3 3d flip button by Sean Michael (@seansean11)
on CodePen.
Π ΠΎΡΠ»ΠΈΡΠΈΠ΅ ΠΎΡ Π²ΡΠ΅Ρ Π΄ΡΡΠ³ΠΈΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ Π² ΡΡΠΎΠΌ ΡΠΏΠΈΡΠΊΠ΅, 3D Flip Button CSS3 ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅Ρ ΡΡΡΠ΅ΠΊΡ ΠΏΡΠΈ Π½Π°ΠΆΠ°ΡΠΈΠΈ Π½Π° Π½Π΅Π΅. ΠΠ°ΠΊ ΡΠΎΠ»ΡΠΊΠΎ Π²Ρ Π½Π°ΠΆΠΌΠ΅ΡΠ΅, ΠΊΠ½ΠΎΠΏΠΊΠ° ΡΠ²Π΅ΡΠ½Π΅ΡΡΡ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠΊΠ°Π·Π°ΡΡ Π½ΠΎΠ²ΡΠΉ ΡΠ΅ΠΊΡΡ ΠΈ Π·Π½Π°ΡΠΊΠΈ. ΠΡΠΎ ΠΎΡΠ»ΠΈΡΠ½ΡΠΉ ΡΠΏΠΎΡΠΎΠ± ΡΠΊΠ°Π·Π°ΡΡ, ΡΡΠΎ ΡΠΎΡΠΌΠ° Π±ΡΠ»Π° ΠΎΡΠΏΡΠ°Π²Π»Π΅Π½Π°, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ.
CSS3 3D Flip Button
19. Button Fun
See the Pen
Button Fun by Jack Cuthbert (@JackCuthbert)
on CodePen.
ΠΠΎΡ Π΅ΡΠ΅ ΠΎΠ΄ΠΈΠ½ ΠΎΡΠ»ΠΈΡΠ½ΡΠΉ Π²Π°ΡΠΈΠ°Π½Ρ ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΠ΄ΠΎΠΉΠ΄Π΅Ρ ΡΠ΅ΠΌ, ΠΊΡΠΎ ΠΈΡΠ΅Ρ Π±ΠΎΠ»Π΅Π΅ ΡΠ΄Π΅ΡΠΆΠ°Π½Π½ΡΠΉ Π²ΠΈΠ΄. ΠΠΎΠ³Π΄Π° Π²Ρ Π½Π°Π²ΠΎΠ΄ΠΈΡΠ΅ ΠΊΡΡΡΠΎΡ Π½Π° ΡΡΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΡΠ΅ΠΊΡΡ ΠΈ ΠΊΠΎΠ½ΡΡΡ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡ ΡΠ²Π΅Ρ Ρ ΡΡΡΠ΅ΠΊΡΠΎΠΌ Π°ΡΡΡ.
Button Fun
20. Button Shine Effect
See the Pen
Button Shine Effect by Dan Mensinger (@dmensinger)
on CodePen.
ΠΠΎΡΠ»Π΅Π΄Π½ΡΡ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½Π°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° CSS Π² Π½Π°ΡΠ΅ΠΌ ΡΠΏΠΈΡΠΊΠ΅ — ΡΡΠΎ ΡΡΡΠ΅ΠΊΡ Button Shine. ΠΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΌΠ΅Π½ΡΠ΅Ρ ΡΠ²Π΅Ρ ΠΈ ΠΊΠ°ΠΆΠ΅ΡΡΡ ΡΠ²Π΅ΡΡΡΠ΅ΠΉΡΡ, ΠΊΠ°ΠΊ Π±ΡΠ΄ΡΠΎ ΡΠ²Π΅Ρ ΠΏΡΠΎΡΠ΅Π» Π½Π°Π΄ Π΅Π΅ ΠΏΠΎΠ²Π΅ΡΡ Π½ΠΎΡΡΡΡ. ΠΡΠΎ ΠΏΡΠΎΡΡΠΎ ΠΈ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΠΎ, ΠΈΠ΄Π΅Π°Π»ΡΠ½ΡΠΉ ΡΡΠΎΠ²Π΅Π½Ρ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΠΎΡΡΠΈ, ΡΡΠΎΠ±Ρ Π²ΡΠ·Π²Π°ΡΡ ΠΈΠ½ΡΠ΅ΡΠ΅Ρ ΠΊ Π²Π°ΡΠ΅ΠΌΡ ΡΠ°ΠΉΡΡ.
Button Shine Effect.
π
ΠΠ΅Π½ΡΠ΅ΠΌ ΡΠ²Π΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΏΠΎ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΌΡΡΠΊΠΈ. ΠΡΠΎΡΡΠΎΠΉ ΠΏΡΠΈΠΌΠ΅Ρ, ΠΏΡΠΎΡΡΠΎΠΉ CSS
Π Π΄Π°Π½Π½ΠΎΠΉ ΡΡΠ°ΡΡΠ΅ Π½Π° ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ, ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ Π½Π° ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ»ΡΠ½ΠΎΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ΅ ΡΠ°ΠΉΡΠ° ΡΠΌΠ΅Π½Ρ ΡΠ²Π΅ΡΠ°, Π΅ΡΠ»ΠΈ Π½Π° Π½Π΅Π³ΠΎ Π±ΡΠ» Π½Π°Π²Π΅Π΄Π΅Π½ ΠΊΡΡΡΠΎΡ ΠΌΡΡΠΊΠΈ.
ΠΠ΅Π»Π°Π΅ΡΡΡ Π΄Π°Π½Π½Π°Ρ «ΡΡΡΠΊΠ°» ΠΏΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ ΡΡΠΈΠ»Π΅ΠΉ CSS, Ρ.Π΅. ΠΏΡΠΈΠ΄Π΅ΡΡΡ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΡΡΠΎΡΠ΅ΠΊ ΡΠ΅ΠΊΡΡΠ° Π² ΡΠ°ΠΉΠ» ΡΡΠΈΠ»Π΅ΠΉ ΡΠ°Π±Π»ΠΎΠ½Π°, Π° ΡΠ°ΠΊ ΠΆΠ΅ ΠΏΡΠΎΡΠ²ΠΈΡΡ ΡΠ²ΠΎΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ΡΡΠΊΠΈΠ΅ ΡΠΏΠΎΡΠΎΠ±Π½ΠΎΡΡΠΈ. Π― ΠΏΠΎΠ΄ΡΠΊΠ°ΠΆΡ ΡΡΠΎ ΠΈΠΌΠ΅Π½Π½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ.
ΠΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΎ 17.01.2019
ΠΠ½ΠΈΠΌΠ°Π½ΠΈΠ΅! ΠΠΎΠ²ΡΠΉ Π°ΠΏΠ΄Π΅ΠΉΡ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ Π·Π°ΡΠΎΡΠ΅Π½Π½ΠΎΠΉ ΠΏΠΎΠ΄ SEO + PageSpeed ΡΠ΅ΠΌΡ Π΄Π»Ρ ΡΠ°ΠΉΡΠ° WP Romb — ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎ Π±ΡΡΡΡΠΎ ΠΈ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎ ΡΠ΄ΠΎΠ±Π½ΠΎ. ΠΠ°ΡΡΡΠΎΠΉ ΠΏΠΎΠ΄ ΡΠ΅Π±Ρ ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ Π·Π° ΠΏΠ°ΡΡ ΠΌΠΈΠ½ΡΡ ΠΈ ΡΠΎΠ±ΠΈΡΠ°ΠΉ ΡΡΡΡΡΠΈ ΡΡΠ°ΡΠΈΠΊΠ°. ΠΡΡ Π½Π° ΡΡΡΡΠΊΠΎΠΌ + ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΡ + ΡΠ΅Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ°.
ΠΠ°Π²Π°ΠΉΡΠ΅ ΡΡΠ°Π·Ρ Π΄Π»Ρ Π½Π°Π³Π»ΡΠ΄Π½ΠΎΡΡΠΈ ΠΏΡΠΈΠΌΠ΅Ρ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠ½ΡΠ»ΠΈ ΠΎ ΡΠ΅ΠΌ ΡΠ΅ΡΡ. ΠΡΠΎΠ²Π΅Π΄ΠΈΡΠ΅ ΠΌΡΡΠΊΠΎΠΉ ΠΏΠΎ ΠΏΡΠ½ΠΊΡΠ°ΠΌ ΠΌΠ΅Π½Ρ:
ΠΠ°ΠΊ ΡΠΎΠ»ΡΠΊΠΎ ΠΌΡΡΠΊΠ° ΠΎΠΊΠ°Π·ΡΠ²Π°Π΅ΡΡΡ Π½Π°Π²Π΅Π΄Π΅Π½Π° Π½Π° Π»ΡΠ±ΠΎΠ΅ ΠΏΠΎΠ»Π΅ Π² ΡΠΏΠΈΡΠΊΠ΅ — ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ ΡΠΌΠ΅Π½Π° Π·Π°Π΄Π½Π΅Π³ΠΎ ΡΠΎΠ½Π° ΡΡΡΠΎΠΊΠΈ, Π° ΡΠ°ΠΊ ΠΆΠ΅ ΡΠ²Π΅Ρ ΡΠ΅ΠΊΡΡΠ°/ΡΡΡΠ»ΠΊΠΈ Π² Π½Π°Π·Π²Π°Π½ΠΈΠΈ ΡΡΠ±ΡΠΈΠΊΠΈ ΡΠ°ΠΉΡΠ°.
ΠΠΎΡ ΡΠ°ΠΊ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΠΊΠΎΠ΄ Π΄Π°Π½Π½ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°:
<div> <a href=»https://mojwp.ru/category/birzi-ssylok»>ΠΠΈΡΠΆΠΈ ΡΡΡΠ»ΠΎΠΊ</a> <a href=»https://mojwp.ru/category/plugins»>ΠΡΠ΅ ΠΏΠ»Π°Π³ΠΈΠ½Ρ WordPress</a> <a href=»https://mojwp.ru/category/poleznoe»>ΠΡΡΠΊΠΈΠ΅ ΠΏΠΎΠ»Π΅Π·Π½ΠΎΡΡΠΈ</a> <a href=»https://mojwp.ru/category/ukrashenie»>Π£ΠΊΡΠ°ΡΠ°Π΅ΠΌ ΡΠ°ΠΉΡ</a> <a href=»https://mojwp.ru/category/hak»>Π₯Π°ΠΊΠΈ WordPress</a> </div>
<div> <a href=»https://mojwp.ru/category/birzi-ssylok»>ΠΠΈΡΠΆΠΈ ΡΡΡΠ»ΠΎΠΊ</a> <a href=»https://mojwp.ru/category/plugins»>ΠΡΠ΅ ΠΏΠ»Π°Π³ΠΈΠ½Ρ WordPress</a> <a href=»https://mojwp.ru/category/poleznoe»>ΠΡΡΠΊΠΈΠ΅ ΠΏΠΎΠ»Π΅Π·Π½ΠΎΡΡΠΈ</a> <a href=»https://mojwp.ru/category/ukrashenie»>Π£ΠΊΡΠ°ΡΠ°Π΅ΠΌ ΡΠ°ΠΉΡ</a> <a href=»https://mojwp.ru/category/hak»>Π₯Π°ΠΊΠΈ WordPress</a> </div> |
Π ΠΌΠΎΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Π²ΠΈΠ΄ΠΈΠΌ ΡΡΠΎ ΡΡΡΠ΅ΠΊΡ ΡΡΠ°Π±Π°ΡΡΠ²Π°Π΅Ρ Π½Π° ΠΎΠ±ΡΡΠ½ΠΎΠΉ ΡΡΡΠ»ΠΊΠ΅. ΠΠΌΠ΅ΡΡΠΎ Π½Π΅Π΅ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ <div>
, <li>
ΠΈ ΠΏΡΠΎΡΠΈΠ΅ ΠΏΠΎΠ΄Ρ
ΠΎΠ΄ΡΡΠΈΠ΅ ΡΠ΅Π³ΠΈ.
Π§ΡΠΎΠ±Ρ ΡΠΊΠ°Π·Π°ΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΡ, ΡΡΠΎ ΡΡΡΠ΅ΠΊΡ Π½ΡΠΆΠ½ΠΎ Π²ΡΠΏΠΎΠ»Π½ΡΡΡ Π½Π° ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΡΡ
ΡΡΡΠ»ΠΊΠ°Ρ
, Ρ Π²Π·ΡΠ» ΠΈΡ
Π² ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΠΉ <div>ΡΡΡ ΡΡΡΠ»ΠΊΠΈ<div>
. Π£ Π²Π°Ρ ΡΡΠΎ ΡΠΎΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΡΠΎΠ·Π΄Π°Π½Π½ΡΠΉ Π²Π°ΠΌΠΈ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ, ΠΈΠ»ΠΈ ΡΠΆΠ΅ Π³ΠΎΡΠΎΠ²ΡΠΉ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π²ΠΈΠ΄ΠΆΠ΅Ρ Π² ΡΠ°ΠΉΠ΄Π±Π°ΡΠ΅).
ΠΡΠ°ΠΊΡΠΈΠΊΠ°
Π’Π΅ΠΏΠ΅ΡΡ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π·Π°Π΄Π°ΡΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ ΠΏΠΎ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΌΡΡΠΊΠΈ. ΠΠ°ΠΊ ΡΠΆΠ΅ Π³ΠΎΠ²ΠΎΡΠΈΠ»ΠΎΡΡ Π²ΡΡΠ΅ — Π΄Π΅Π»Π°Π΅ΠΌ Π²ΡΠ΅ ΠΏΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ ΡΡΠΈΠ»Π΅ΠΉ CSS (ΡΠ°ΠΉΠ» ΡΠ°Π±Π»ΠΎΠ½Π° ΠΌΠΎΠΆΠ΅Ρ Π½Π°Π·ΡΠ²Π°ΡΡΡΡ style.css, css.css, core.css ΠΈΠ»ΠΈ Π΅ΡΠ΅ ΠΊΠ°ΠΊ-ΡΠΎ).
.catside a:hover {background: #0078BF; color: #fff;}
.catside a:hover {background: #0078BF; color: #fff;} |
ΠΠ°Π½Π½ΠΎΠΉ ΡΡΡΠΎΠΊΠΎΠΉ ΠΌΡ ΡΠΊΠ°Π·Π°Π»ΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΡ ΠΌΠ΅Π½ΡΡΡ ΡΠ²Π΅Ρ Π·Π°Π΄Π½Π΅Π³ΠΎ ΡΠΎΠ½Π° ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΌΡΡΠΊΠΈ Π½Π° ΡΠΈΠ½ΠΈΠΉ (#0078BF) ΠΈ ΡΠΊΠ°Π·Π°Π»ΠΈ ΡΡΠΎ ΡΠ²Π΅Ρ ΡΡΠΈΡΡΠ° Π΄ΠΎΠ»ΠΆΠ΅Π½ ΡΡΠ°ΡΡ Π±Π΅Π»ΡΠΌ (#fff). Π‘Π°ΠΌΠ° «ΡΡΡΠΊΠ°», ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡΠ°Ρ ΠΏΠΎΠ½ΡΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΡ, ΡΡΠΎ ΡΡΠΎ Π½ΡΠΆΠ½ΠΎ Π΄Π΅Π»Π°ΡΡ ΠΏΠΎ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΌΡΡΠΊΠΈ — ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡ hover (ΠΎ Π½Π΅ΠΌ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΡΠΈΡΠ°ΡΡ ΠΠΠΠ‘Π¬).
Π§ΡΡΡ ΠΏΠΎΠ½ΡΡΠ½Π΅Π΅: ΠΌΡ ΡΠΊΠ°Π·Π°Π»ΠΈ ΡΡΠΎ ΡΡΡΠ»ΠΊΠ° a
Π΄ΠΎΠ»ΠΆΠ½Π° Π½Π°Ρ
ΠΎΠ΄ΠΈΡΡΡΡ Π²Π½ΡΡΡΠΈ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° Ρ ΠΊΠ»Π°ΡΡΠΎΠΌ .catside
. ΠΠ°Π»Π΅Π΅ ΠΌΡ Π΄ΠΎΠ±Π°Π²ΠΈΠ»ΠΈ ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡ hover ΠΈ ΠΎΡΠΎΡΠΌΠΈΠ»ΠΈ ΠΏΠΎ ΠΏΡΠ°Π²ΠΈΠ»Π°ΠΌ CSS.
ΠΠΎΡΠ»Π΅ΡΠ»ΠΎΠ²ΠΈΠ΅
Π Π΄Π°Π½Π½ΠΎΠΉ ΡΡΠ°ΡΡΠ΅ Ρ ΠΏΠΎΠΊΠ°Π·Π°Π» ΠΊΠ°ΠΊ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΡΠΌΠ΅Π½Π° ΡΠ²Π΅ΡΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π½Π° ΡΠ°ΠΌΠΎΠΌ ΠΎΠ±ΡΡΠ½ΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅. ΠΡΠ»ΠΈ Ρ ΠΎΡΠΈΡΠ΅ ΡΠ°Π·Π²ΠΈΠ²Π°ΡΡΡΡ Π΄Π°Π»Π΅Π΅, ΡΠΎ ΠΏΠΎΡΠΈΡΠ°ΠΉΡΠ΅ ΠΏΡΠΎΡΠΈΠ»ΡΠ½ΡΡ Π»ΠΈΡΠ΅ΡΠ°ΡΡΡΡ ΠΈ ΡΠΏΡΠ°Π²ΠΎΡΠ½ΠΈΠΊΠΈ ΠΏΠΎ CSS.
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ hover ΠΌΠΎΠΆΠ½ΠΎ, ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ, Π΄Π»Ρ Π²ΡΠ΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π½Π° ΡΠ°ΠΉΡΠ΅: Π±Π»ΠΎΠΊΠΈ, ΡΠ΅ΠΊΡΡ, ΡΡΡΠ»ΠΊΠΈ. ΠΡΠΎΡΠ²ΠΈΡΠ΅ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΡΠ°Π½ΡΠ°Π·ΠΈΠΈ ΠΈ ΠΏΠΎΠΉΠΌΠ΅ΡΠ΅ ΠΊΠ°ΠΊ ΡΡΡΡΠΎΠ΅Π½ΠΎ Ρ Π²Π°Ρ Π½Π° ΡΠ°ΠΉΡΠ΅ ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎΠ΅. ΠΠΎΡΠ»Π΅ ΡΡΠΎΠ³ΠΎ ΡΠΌΠΎΠΆΠ΅ΡΠ΅ Π΅Π³ΠΎ ΡΠΊΡΠ°ΡΠΈΡΡ ΠΈΠ»ΠΈ ΡΠΌΠ΅Π½ΠΈΡΡ ΡΠ°ΡΡΠΈΡΠ½ΠΎ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅.
ΠΠΏΡΡΡ ΠΆΠ΅ ΠΎ ΠΏΠΎΠΊΠ°Π·Π°Π½Π½ΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅: Π² Π½Π΅ΠΌ Π½Π΅ ΡΡΠΈΡΡΠ²Π°ΡΡΡΡ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΡ Π±Π»ΠΎΠΊΠ° (ΠΎΡΡΡΡΠΏΡ, ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ°, ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ° ΠΈ ΠΏΡΠΎΡΠ΅Π΅). ΠΡΠΎ Π²ΡΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ·Π½Π°ΡΡ ΠΈΠ· ΠΌΠΎΠΈΡ ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠΈΡ ΡΡΠ°ΡΠ΅ΠΉ Π½Π° Π±Π»ΠΎΠ³Π΅, Π»ΠΈΠ±ΠΎ Π²ΠΎΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ ΠΊΠΎΠ½ΡΠΎΠ»ΡΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ° F12 Π² Π²Π°ΡΠ΅ΠΌ Π±ΡΠ°ΡΠ·Π΅ΡΠ΅ (ΠΊΠ°ΠΊ ΠΈΠΌ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ ΡΠΌΠΎΡΡΠΈΡΠ΅ Π²ΠΈΠ΄Π΅ΠΎ Π½Π° ΠΌΠΎΠ΅ΠΌ ΠΊΠ°Π½Π°Π»Π΅ YOUTUBE).
ΠΠ°ΠΌΠ΅Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠΈ submit Π² ΡΠΎΡΠΌΠ΅ html
Π¦Π΅Π»Ρ:
Π‘Π΅Π³ΠΎΠ΄Π½Ρ Π½Π°ΡΠ° Π·Π°Π΄Π°ΡΠ° Π·Π°ΠΌΠ΅Π½Π° ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ Β«ΠΎΡΠΏΡΠ°Π²ΠΈΡΡΒ» Π½Π° ΠΊΡΠ°ΡΠΈΠ²ΡΡ. ΠΠ½ΠΎΠΏΠΊΠ° Π²ΡΠΏΠΎΠ»Π½ΡΠ΅Ρ ΠΎΡΠΏΡΠ°Π²ΠΊΡ ΡΠΎΡΠΌΡ ΠΈ ΠΈΠΌΠ΅Π΅Ρ ΡΠΈΠΏ Β«submitΒ». ΠΠΎΠΆΠ½ΠΎ ΠΊΠΎΠ½Π΅ΡΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠΈΠΏ Ρ Β«submitΒ» Π½Π° Β«imageΒ» ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡ Β«srcΒ», Π½ΠΎ Π½Π°ΡΠ° Π·Π°Π΄Π°ΡΠ° Π½Π° ΡΠ΅Π³ΠΎΠ΄Π½Ρ ΡΡΠΎ ΠΎΡΡΠ°Π²ΠΈΡΡ ΡΠΈΠΏ Β«submitΒ» Π½Π° ΠΌΠ΅ΡΡΠ΅ ΠΈ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ½ΠΎ Π½Π°ΡΠΈΡΠΎΠ²Π°ΡΡ ΠΊΡΠ°ΡΠΈΠ²ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ.
Β
ΠΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅:
ΠΠ»Ρ ΡΠ΅Π³ΠΎ ΡΡΠΎ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΠΈΡΡΡΡ? ΠΡΡ ΠΏΡΠΎΡΡΠΎ, Π΄Π»Ρ ΠΏΡΠΈΠ΄Π°Π½ΠΈΡ ΡΡΡΠ΅ΡΠΈΡΠ½ΠΎΠ³ΠΎ Π²ΠΈΠ΄Π° ΡΠΎΠΉ ΡΠ°ΠΌΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠ΅.
ΠΠΎΡ Π΄Π»Ρ ΡΡΠ°Π²Π½Π΅Π½ΠΈΡ.Β ΠΠ°Π³Π»ΡΠ΄Π½ΠΎ Π²ΠΈΠ΄Π½ΠΎ, ΡΡΠΎ Π²ΡΠΎΡΠ°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° ΡΠΌΠΎΡΡΠΈΡΡΡ Π»ΡΡΡΠ΅.
Β
Π Π΅ΡΠ΅Π½ΠΈΠ΅:
ΠΠ»Ρ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ Π΄Π°Π½Π½ΠΎΠΉ ΡΠ΅Π»ΠΈ ΠΊΠ°ΠΊ ΠΈ Π³ΠΎΠ²ΠΎΡΠΈΠ»ΠΎΡΡ ΠΌΡ Π±ΡΠ΄Π΅ΠΌ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ Β«inputΒ» Ρ ΡΠΈΠΏΠΎΠΌ Β«submitΒ». ΠΡΡ Π½Π°ΠΌ ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΠΈΡΡΡ ΠΎΠΏΠΈΡΠ°ΡΡ Π½ΠΎΠ²ΡΠΉ ΠΊΠ»Π°ΡΡ Π² ΡΠ°Π±Π»ΠΈΡΠ΅ ΡΡΠΈΠ»Π΅ΠΉ Β«*.cssΒ»
ΠΠΎΡ ΠΊΠΎΠ΄ Π΄Π»Ρ html-ΡΠ°ΠΉΠ»Π°:
<input type=»submit» name=»submit» value=»ΠΠΏΠ»Π°ΡΠΈΡΡ» />
Π Π²ΠΎΡ ΠΈ css:
.superbutton {
width:150px;
height:40px;
border-radius:20px;
background:#459DE5;
color:#fff;
font-size:18px;
cursor:pointer;
}
Β
Β
Π£ΠΊΡΠ°ΡΠ°Π΅ΠΌ:
ΠΠ»Ρ ΡΠΊΡΠ°ΡΠ΅Π½ΠΈΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠ΅Π΄Π»ΠΎΠΆΠΈΡΡ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡ ΡΠ²Π΅Ρ ΡΠΎΠ½Π° ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ. ΠΠ°ΠΊ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ΡΡ ΡΠΎΠ²Π΅ΡΡΡΡ ΠΌΠ΅Π½ΡΡΡ ΡΠ²Π΅Ρ Π½Π΅ ΠΊΠ°ΡΠ΄ΠΈΠ½Π°Π»ΡΠ½ΠΎ, Π° Π²ΡΠ΅Π³ΠΎ Π»ΠΈΡΡ Π½Π° ΡΠΎΠ½ ΡΠ²Π΅ΡΠ»Π΅Π΅ ΠΈΠ»ΠΈ ΡΠ΅ΠΌΠ½Π΅Π΅. Π― ΠΏΡΠΈ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΠΈ Π·Π°Π΄Π°ΡΠΈ ΠΏΡΠ΅Π΄ΠΏΠΎΡΠ΅Π» Π·Π°ΡΠ΅ΠΌΠ½ΠΈΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ Π² css Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΠΌ:
.superbutton:hover{
background:#358DE5;
}
Β Π’Π΅ΠΏΠ΅ΡΡ ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΎΠΆΠΈΠ»Π°. ΠΠ° ΡΡΠ°ΡΠΈΡΠ½ΠΎΠΉ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ΅ ΡΠ°Π·Π½ΠΎΡΡΡ ΡΠ²Π΅ΡΠΎΠ² Π½Π΅ ΡΠ°ΠΊ Π·Π°ΠΌΠ΅ΡΠ½Π° ΠΊΠΎΠ³Π΄Π° ΡΡ Π½Π°Π²ΠΎΠ΄ΠΈΡΡ ΠΌΡΡΡ ΠΈ ΡΠ²Π΅Ρ Π² ΡΡΠΆΠ΅ ΡΠ΅ΠΊΡΠ½Π΄Ρ ΠΌΠ΅Π½ΡΠ΅ΡΡΡ Π½Π°ΠΊΠ»Π°Π΄ΡΠ²Π°Ρ Π±ΠΎΠ»Π΅Π΅ ΡΠ΅ΠΌΠ½ΡΠΉ ΠΎΡΡΠ΅Π½ΠΎΠΊ.
Β
ΠΡΠΎΠ±Π»Π΅ΠΌΠ° ΡΠ°ΠΌΠΊΠΈ Π²ΠΎΠΊΡΡΠ³ ΠΊΠ½ΠΎΠΏΠΊΠΈ:
Π Π²ΡΡ Π²ΡΠΎΠ΄Π΅ Π½ΠΈΡΠ΅Π³ΠΎ ΠΈ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ Π½ΠΈΡΠ΅Π³ΠΎ ΠΈ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΡΠ΅ΠΌΠ½Π΅Π΅Ρ, Π½ΠΎ ΠΏΡΠΈ Π½Π°ΠΆΠ°ΡΠΈΠΈ ΠΌΡ Π²ΠΈΠ΄ΠΈΠΌ ΡΠΆΠ°ΡΠ½ΡΡ ΡΠ°ΠΌΠΊΡ. ΠΡΡ ΡΡΡ ΡΠ°ΠΌΠΊΡ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°Π±Π»ΡΠ΄Π°ΡΡ Π΅ΡΠ»ΠΈ Π½Π°ΡΠ° ΠΊΠ½ΠΎΠΏΠΊΠ° Π½Π°Ρ
ΠΎΠ΄ΠΈΡΡΡ Π² ΡΠΎΠΊΡΡΠ΅, Π² ΡΠΎΠΌ ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎ ΠΊΠ½ΠΎΠΏΠΊΠ΅ Tab ΠΏΠ΅ΡΠ΅Π±ΠΈΡΠ°Π΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅.
ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ ΠΌΡ ΠΏΡΠΎΠΏΠΈΡΠ΅ΠΌ Π² css Π΅ΡΡ 2 ΠΏΡΠ΅Π²Π΄ΠΎ ΠΊΠ»Π°ΡΡΠ°, ΠΊΠ°ΠΊ ΠΈ Β«hoverΒ». ΠΡΠΎ ΠΊΠ»Π°ΡΡΡ Β«activeΒ» ΠΊΠΎΡΠΎΡΡΠΉ ΠΎΡΠ²Π΅ΡΠ°Π΅Ρ Π·Π° Π²ΠΈΠ΄ ΠΏΡΠΈ Π½Π°ΠΆΠ°ΡΠΈΠΈ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡ ΠΈ ΠΊΠ»Π°ΡΡ Β«focusΒ» ΠΏΡΠΈ ΡΠΎΠΊΡΡΠ΅ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠ΅. ΠΠΎ Π΅ΡΡΡ ΠΎΠ΄Π½Π° ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΡΡΡ, ΡΠ°ΠΊ ΠΊΠ°ΠΊ Ρ Π½Π°Ρ input ΠΈ ΠΏΡΠΈΡΠ²ΠΎΠ΅Π½Π½ΡΠΉ Π΅ΠΌΡ ΠΊΠ»Π°ΡΡ, ΡΠΎ active ΠΏΡΠΎΠΏΠΈΡΡΠ²Π°ΡΡ Π½Π΅ ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎ.
ΠΠΎΡ ΠΊΠΎΠ΄:
. superbutton:focus{
outline:none;
}
Please enable JavaScript to view the comments powered by Disqus.
Π₯ΠΎΠ²Π΅Ρ Π½Π° ΠΊΠ°ΡΡΠΎΡΠΊΠ°Ρ ΠΈ ΠΏΠ»ΠΈΡΠΊΠ°Ρ // ΠΠ½ΠΈΠΌΠ°ΡΠΈΡ Π² Π²Π΅Π±Π΅
ΠΠΠΠ£ΠΠ―Π ΠΠ«Π ΠΠ ΠΠΠΠ« Π₯ΠΠΠΠ ΠΠ€Π€ΠΠΠ’Π ΠΠΠ― ΠΠΠ Π’ΠΠ§ΠΠ Π ΠΠΠΠ’ΠΠ
Π£Π»ΡΡΡΠ°Π΅Ρ ΡΠΈΡΠ°Π±Π΅Π»ΡΠ½ΠΎΡΡΡ ΡΠ΅ΠΊΡΡΠ° Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΈ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ
ΠΠΊΡΠ΅Π½ΡΠΈΡΡΠ΅Ρ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° ΠΊΠ°ΡΡΠΎΡΠΊΠ΅, Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅Ρ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΠΎΡΡΡ
Π’Π΅ΠΊΡΡ Π½Π΅ ΠΏΠ΅ΡΠ΅Π±ΠΈΠ²Π°Π΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈ ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ
ΠΠΎΠ±Π°Π²ΠΈΡ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΠΎΡΡΡ ΠΈ ΠΏΡΠΈΠ²Π»Π΅ΡΠ΅Ρ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π·ΡΠΈΡΠ΅Π»Ρ
ΠΠ΅Π»Π°Π΅Ρ ΠΊΠ°ΡΡΠΎΡΠΊΡ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΠΎΠΉ, ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΈΡ Π΄Π»Ρ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΈ ΡΠΎΠ²Π°ΡΠΎΠ²
ΠΠΎΠ±Π°Π²Π»ΡΠ΅Ρ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΠΎΡΡΡ ΠΈ ΡΠΏΡΠ°Π²Π»ΡΠ΅Ρ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ΠΌ Π·ΡΠΈΡΠ΅Π»Ρ
ΠΠΎΡΠ²Π»Π΅Π½ΠΈΠ΅ ΡΠ΅Π½ΠΈ
ΠΠ°ΡΠ΅ΠΌΠ½Π΅Π½ΠΈΠ΅ ΡΠΈΠ»ΡΡΡΠ°
ΠΠΎΡΠ²Π»Π΅Π½ΠΈΠ΅ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ°
ΠΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΠΌΠ°ΡΡΡΠ°Π±Π°
Π‘ΠΌΠ΅Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΠ»ΠΈΡΠΊΠΈ
Π‘ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΊΠ°ΡΡΠΎΡΠΊΠΈ
ΠΡΠ°Π²ΠΈΠ»ΡΠ½ΡΠΉ ΠΊΡΡΡΠΎΡ Π½Π°Β Π°ΠΊΡΠΈΠ²Π½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°Ρ
English language version:
βCorrect Cursor onΒ Active Elementsβ
ΠΠ°Β Π²ΡΠ΅Ρ
Π°ΠΊΡΠΈΠ²Π½ΡΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°Ρ
ΠΏΠΎΒ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΌΠ΅Π½ΡΡΡΡΡ ΠΊΡΡΡΠΎΡ. ΠΒ Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²Π΅ ΡΠ»ΡΡΠ°Π΅Π² ΡΡΠΎ Π±ΡΠ΄Π΅Ρ cursor: pointer
.
ΠΠΎΠ΄ Π°ΠΊΡΠΈΠ²Π½ΡΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ ΠΏΠΎΠ΄ΡΠ°Π·ΡΠΌΠ΅Π²Π°ΡΡΡΡ ΡΡΡΠ»ΠΊΠΈ, ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΡΠ΅Π»Π΅ΠΊΡΡ, Π»Π΅ΠΉΠ±Π»Ρ Π²ΠΌΠ΅ΡΡΠ΅ ΡΒ ΡΠ΅ΠΊΠ±ΠΎΠΊΡΠ°ΠΌΠΈ ΠΈΠ»ΠΈ ΡΠ°Π΄ΠΈΠΎΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌΠΈ ΠΈΒ Π΄ΡΡΠ³ΠΈΠ΅ Π°Π½Π°Π»ΠΎΠ³ΠΈΡΠ½ΡΠ΅Β ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ.
Β«ΠΠΊΡΠΈΠ²Π½ΡΠΌΠΈΒ» ΡΠ°ΠΊΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π΄ΠΎΠ»ΠΆΠ½Ρ Π½Π°Π·ΡΠ²Π°ΡΡΡΡ, ΠΊΠΎΠ³Π΄Π° Π½Π°ΠΆΠ°ΡΠΈΠ΅ Π½Π°Β ΠΏΠΎΠ΄ΠΎΠ±Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π²ΡΠ·ΡΠ²Π°Π΅Ρ ΠΊΠ°ΠΊΠΎΠ΅-Π»ΠΈΠ±ΠΎ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, Π²Π΅Π΄ΡΡΠΈΠΉ Π½Π°Β ΡΠ΅ΠΊΡΡΡΡ ΡΡΡΠ°Π½ΠΈΡΡ ΠΏΡΠ½ΠΊΡ ΠΌΠ΅Π½Ρ, Π²ΡΠ±ΡΠ°Π½Π½Π°Ρ ΡΠ°Π΄ΠΈΠΎΠΊΠ½ΠΎΠΏΠΊΠ° ΠΈΠ»ΠΈ Π·Π°Π΄ΠΈΠ·Π΅ΠΉΠ±Π»Π΅Π½Π½ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΈΒ ΡΡΡΠ»ΠΊΠΈΒ β Π½Π΅Β Π°ΠΊΡΠΈΠ²Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΠΈΒ ΠΏΠΎΒ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Π½Π°Β Π½ΠΈΡ Π½ΠΈΡΠ΅Π³ΠΎ Π½Π΅Β Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΌΠ΅Π½ΡΡΡΡΡ.
ΠΠ½Π΅ ΠΊΠ°Π·Π°Π»ΠΎΡΡ, ΡΡΠΎ ΡΡΠΎ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ ΠΎΡΠ΅Π²ΠΈΠ΄Π½ΠΎ, ΠΎΠ΄Π½Π°ΠΊΠΎ, ΠΎΠΊΠ°Π·Π°Π»ΠΎΡΡ, ΡΡΠΎ ΠΎΡΠ΅Π½Ρ ΠΌΠ½ΠΎΠ³ΠΈΠ΅ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ ΡΡΠΈΡΠ°ΡΡ ΠΈΠ½Π°ΡΠ΅. ΠΠ½ΠΈΠΌΠ°ΡΠ΅Π»ΡΠ½ΠΎ ΠΏΡΠΎΡΠΈΡΠ°Π² Π²ΡΠ΅ ΡΠΎΡΠΊΠΈ Π·ΡΠ΅Π½ΠΈΡ, ΡΒ ΡΠ°ΠΊ ΠΈΒ Π½Π΅Β Π½Π°ΡΡΠ» Π½ΠΈΒ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΡΠ΅ΡΡΡΠ·Π½ΠΎΠ³ΠΎ Π°ΡΠ³ΡΠΌΠ΅Π½ΡΠ° ΠΏΡΠΎΡΠΈΠ² Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ ΡΠΌΠ΅Π½Ρ ΠΊΡΡΡΠΎΡΠ° ΠΏΠΎΒ Ρ ΠΎΠ²Π΅ΡΡ Π²ΡΠ΅ΠΌ Π°ΠΊΡΠΈΠ²Π½ΡΠΌΒ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ.
ΠΒ ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅ ΡΒ ΡΠ½Π°ΡΠ°Π»Π° ΡΠ°ΡΠΏΠΈΡΡ ΡΠ²ΠΎΠΈ Π°ΡΠ³ΡΠΌΠ΅Π½ΡΡΒ Π·Π°, ΠΏΠΎΡΠ»Π΅ ΡΠ΅Π³ΠΎ ΠΏΡΠΎΠΉΠ΄ΡΡΡ ΠΏΠΎΒ Π°ΡΠ³ΡΠΌΠ΅Π½ΡΠ°ΠΌ ΠΏΡΠΎΡΠΈΠ², ΠΎΠ±ΡΡΡΠ½ΡΡ, ΠΏΠΎΡΠ΅ΠΌΡΒ ΠΆΠ΅ ΡΡΠΈΡ Π°ΡΠ³ΡΠΌΠ΅Π½ΡΠΎΠ² ΠΎΠΊΠ°Π·Π°Π»ΠΎΡΡ Π½Π΅Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΡΡΠΎΠ±Ρ ΠΌΠ΅Π½ΡΒ ΠΏΠ΅ΡΠ΅ΡΠ±Π΅Π΄ΠΈΡΡ.
ΠΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²Π° ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ
cursor:pointer
ΠΠ±ΡΠ°ΡΠ½Π°Ρ ΡΠ²ΡΠ·Ρ
ΠΠΈΡΠ½ΠΎ Π΄Π»Ρ ΠΌΠ΅Π½Ρ ΠΎΡΠ½ΠΎΠ²Π½Π°Ρ ΠΏΠΎΠ»ΡΠ·Π° ΠΎΡΒ ΡΠΌΠ΅Π½Ρ ΠΊΡΡΡΠΎΡΠ°Β β ΠΎΠ±ΡΠ°ΡΠ½Π°Ρ ΡΠ²ΡΠ·Ρ. ΠΒ ΠΈΠ΄Π΅Π°Π»Π΅ ΡΒ ΠΊΠ°ΡΡΠΎΠΌΠ½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±ΡΡΡ ΠΏΡΠΎΠΏΠΈΡΠ°Π½ΠΎ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ. Π‘ΠΊΠ°ΠΆΠ΅ΠΌ, ΠΏΠΎΠ΄ΡΠ²Π΅ΡΠΊΠ° ΡΠΎΠ½Π° ΠΈΠ»ΠΈ ΡΠΌΠ΅Π½Π° ΡΠ²Π΅ΡΠ° ΡΠ΅ΠΊΡΡΠ°. ΠΠΎΒ Π²Β ΡΠ΅Π°Π»ΡΠ½ΠΎΠΉ ΠΆΠΈΠ·Π½ΠΈ ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ΅Ρ ΠΈΠ»ΠΈ Π²ΠΎΠ²ΡΠ΅ ΠΎΡΡΡΡΡΡΠ²ΠΎΠ²Π°ΡΡ (Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ Π½Π΅Β Π½Π°ΡΠΈΡΠΎΠ²Π°Π», Π°Β Π²Π΅ΡΡΡΠ°Π»ΡΡΠΈΠΊ Π½Π΅Β ΠΏΠΎΠ΄ΡΠΌΠ°Π»), ΠΈΠ»ΠΈ Π±ΡΡΡ Π½Π΅Β ΠΎΡΠΎΠ±ΠΎ Π·Π°ΠΌΠ΅ΡΠ½ΡΠΌ, Π½Π΅Β ΠΏΡΠΈΠ²ΡΡΠ½ΡΠΌ ΠΈΠ»ΠΈ ΡΡΠ°Π±Π°ΡΡΠ²Π°ΡΡ Π½Π΅Β ΠΌΠΎΠΌΠ΅Π½ΡΠ°Π»ΡΠ½ΠΎ. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, ΠΎΠ±ΡΠ°ΡΠ½ΠΎΠΉ ΡΠ²ΡΠ·ΠΈ ΠΌΠΎΠΆΠ΅Ρ ΠΈΠ»ΠΈ Π½Π΅Β Π±ΡΡΡ, ΠΈΠ»ΠΈ ΠΎΠ½Π° Π±ΡΠ΄Π΅Ρ Π½Π΅Β ΡΠΎΠ²ΡΠ΅ΠΌ ΠΎΡΠ΅Π²ΠΈΠ΄Π½Π°.
ΠΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅Β ΠΆΠ΅ ΠΊΡΡΡΠΎΡΠ°Β β Π²ΡΠ΅Π³Π΄Π° ΠΌΠΎΠΌΠ΅Π½ΡΠ°Π»ΡΠ½ΠΎ ΠΈΒ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎ. ΠΠ»ΠΈΠΊ, ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ Π·Π°Β Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠ΅ΠΌ, Π±ΡΠ΄Π΅Ρ ΠΈΠ½ΡΡΠΈΡΠΈΠ²Π½ΡΠΌ, ΡΠΎΠ³Π΄Π° ΠΊΠ°ΠΊ Π²Β ΠΏΡΠΎΡΠΈΠ²Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΠΌΠΎΠ·Π³Ρ ΠΏΡΠΈΠ΄ΡΡΡΡ Π»ΠΈΠ±ΠΎ ΡΠΎΠΏΠΎΡΡΠ°Π²ΠΈΡΡ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΊΡΡΡΠΎΡΠ° ΡΒ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ, Π»ΠΈΠ±ΠΎ ΡΠ°ΡΠΏΠΎΠ·Π½Π°ΡΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΠΈΒ ΡΡΠ°ΠΊΡΠΎΠ²Π°ΡΡ Π΅Π³ΠΎ ΠΊΠ°ΠΊ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠ΅ Π½Π°Β Π°ΠΊΡΠΈΠ²Π½ΡΡ ΠΎΠ±Π»Π°ΡΡΡ Π½ΡΠΆΠ½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
ΠΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΠΊΡΡΡΠΎΡΠ°Β β ΡΠ°ΠΌΠ°Ρ Π΅ΡΡΠ΅ΡΡΠ²Π΅Π½Π½Π°Ρ, Π·Π°ΠΌΠ΅ΡΠ½Π°Ρ ΠΈΒ ΠΏΠΎΠ½ΡΡΠ½Π°Ρ ΠΎΠ±ΡΠ°ΡΠ½Π°Ρ ΡΠ²ΡΠ·Ρ, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π²Β ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ΅.
ΠΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ Π³ΡΠ°Π½ΠΈΡ Π°ΠΊΡΠΈΠ²Π½ΠΎΠΉ ΠΎΠ±Π»Π°ΡΡΠΈ
ΠΠΎΒ ΠΌΠ½ΠΎΠ³ΠΈΡ ΡΠ»ΡΡΠ°ΡΡ ΠΈΠΌΠ΅Π΅Ρ ΡΠΌΡΡΠ» ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΡΠ²Π°ΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΠΌ ΠΎΒ ΡΠΎΠΌ, ΡΡΠΎ Β«Π²ΠΎΡ ΡΠΆΠ΅ ΡΠ΅ΠΉΡΠ°Ρ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΆΠ°ΡΡΒ». Π§Π°ΡΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Ρ ΠΎΡΠ΅ΡΡ ΡΠ²Π΅Π»ΠΈΡΠΈΡΡ ΠΊΠ»ΠΈΠΊΠ°Π±Π΅Π»ΡΠ½ΡΡ ΠΎΠ±Π»Π°ΡΡΡ Π΄Π»Ρ ΡΠ΅Ρ ΠΈΠ»ΠΈ ΠΈΠ½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ Π΄Π»Ρ ΠΊΠ°ΠΊΠΎΠΉ-Π½ΠΈΠ±ΡΠ΄Ρ Π½Π΅Π±ΠΎΠ»ΡΡΠΎΠΉ ΠΈΠΊΠΎΠ½ΠΊΠΈ ΠΈΠ»ΠΈ ΠΏΡΠ½ΠΊΡΠΎΠ² ΠΌΠ΅Π½Ρ, Π½Π°Ρ ΠΎΠ΄ΡΡΠΈΠΌΡΡ ΠΏΠΎΒ ΠΊΡΠ°ΡΠΌ ΡΠΊΡΠ°Π½Π°. ΠΒ ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΌΠ΅Π½ΡΡΡΠ΅Π³ΠΎΡΡ ΠΊΡΡΡΠΎΡΠ° ΡΠ°ΡΡΠΊΠ°ΠΆΠ΅Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΠΌ ΠΎΒ ΡΠΎΠΌ, ΠΊΠΎΠ³Π΄Π° ΡΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΆΠ°ΡΡ Π½Π°Β ΡΠΎΡ ΠΈΠ»ΠΈ ΠΈΠ½ΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ.
ΠΒ Π½Π΅ΠΊΠΎΡΠΎΡΡΡ ΡΠ»ΡΡΠ°ΡΡ , ΠΊΠΎΠ³Π΄Π° Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π±ΡΠ΄ΡΡ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡΡ ΡΡΠ΄ΠΎΠΌ, ΠΎΠ΄Π½ΠΎΠΉ ΡΠΌΠ΅Π½Ρ ΠΊΡΡΡΠΎΡΠ° Π½Π΅Β Π±ΡΠ΄Π΅Ρ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ Π΄Π»Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ ΡΠΊΠ°Π·Π°ΡΡ Π½Π°Π΄ ΠΊΠ°ΠΊΠΈΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ ΠΊΡΡΡΠΎΡΒ β Π²Β ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ Π½ΡΠΆΠ½ΠΎ ΠΌΠ΅Π½ΡΡΡ Π΅ΡΡ ΠΈΒ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠ΅Π³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°: ΠΌΠ΅Π½ΡΡΡ Π΅ΠΌΡ ΡΠΎΠ½, ΡΠ²Π΅Ρ ΡΠ΅ΠΊΡΡΠ° ΠΈΠ»ΠΈ ΡΡΠΎ-ΡΠΎ Π΅ΡΡ. ΠΠΎΒ ΡΡΠΎ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ Π΄Π΅Π»Π°ΡΡ Π²Β Π»ΡΠ±ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅.
Π’Π°ΠΊ ΠΈΠ»ΠΈ ΠΈΠ½Π°ΡΠ΅, Π΅ΡΠ»ΠΈ ΠΏΠΎΠ΄ΡΠΊΠ°Π·Π°ΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΠΌ ΠΎΒ ΡΠΎΠΌ, ΠΊΠΎΠ³Π΄Π° ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠΎΡ ΠΈΠ»ΠΈ ΠΈΠ½ΠΎΠΉ Π°ΠΊΡΠΈΠ²Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ ΠΏΡΠΈΠ²ΡΠΊΠ½ΡΡ ΠΊΒ ΡΡΠΎΠΌΡ, ΠΈΒ Π²Β ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΡΠ°Π· ΠΏΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ° ΠΈΠΌ ΠΏΡΠΈΠ΄ΡΡΡΡ ΠΌΠ΅Π½ΡΡΠ΅ ΡΠ΅Π»ΠΈΡΡΡΡΒ β ΠΎΠ½ΠΈΒ Π±ΡΠ΄Π΅Ρ ΠΏΡΠΈΠΌΠ΅ΡΠ½ΠΎ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΡΡ, Π³Π΄Π΅ Π½Π°Ρ ΠΎΠ΄ΡΡΡΡ Π³ΡΠ°Π½ΠΈΡΡ ΠΎΠ±Π»Π°ΡΡΠΈ, Π²Β ΠΊΠΎΡΠΎΡΡΡ ΠΈΠΌ Π½ΡΠΆΠ½ΠΎ ΠΊΠ»ΠΈΠΊΠ½ΡΡΡ. ΠΠ΅Π΄Ρ Π²Β ΡΡΠΎΡΠΎΠ½Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΊΡΡΡΠΎΡ, ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΠΌ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ Π±ΡΠ΄Π΅Ρ ΠΊΠ»ΠΈΠΊΠ½ΡΡΡ ΡΠΎΠ³Π΄Π°, ΠΊΠΎΠ³Π΄Π° ΠΊΡΡΡΠΎΡ ΠΎΠΊΠ°ΠΆΠ΅ΡΡΡ ΠΎΠΊΠΎΠ»ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΒ ΠΏΡΠΎΡΠΈΠ²Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅, Π΄Π»Ρ ΠΊΠ»ΠΈΠΊΠ°, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΏΠΎΒ ΠΌΠ°Π»Π΅Π½ΡΠΊΠΎΠΉ ΠΈΠΊΠΎΠ½ΠΊΠ΅ ΠΈΠ»ΠΈ ΡΠ΅ΠΊΠ±ΠΎΠΊΡΡ, ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΠΌ ΠΏΡΠΈΠ΄ΡΡΡΡ ΠΊΠ°ΠΆΠ΄ΡΠΉ ΡΠ°Π· ΡΠ΅Π»ΠΈΡΡΡΡ Π²Β ΠΌΠ΅Π½ΡΡΡΡ ΠΎΠ±Π»Π°ΡΡΡ.
ΠΡΡΠ°ΡΠΈ, ΠΊΡΠΎ-ΡΠΎ ΠΌΠΎΠΆΠ΅Ρ ΡΡΠ²Π΅ΡΠΆΠ΄Π°ΡΡΒ ΡΠΎ, ΡΡΠΎ ΠΎΠ±Π»Π°ΡΡΡ ΠΊΠ»ΠΈΠΊΠ° Π΄ΠΎΠ»ΠΆΠ½Π° ΠΏΡΠΎΡ ΠΎΠ΄ΠΈΡΡ ΠΏΠΎΒ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΡΠΌ Π³ΡΠ°Π½ΠΈΡΠ°ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, Π½ΠΎΒ ΡΒ ΠΌΠΎΠ³Ρ ΡΒ ΡΡΠΈΠΌ ΠΏΠΎΡΠΏΠΎΡΠΈΡΡ, Ρ ΠΎΡΡ ΡΡΠΎ ΡΠΆΠ΅ ΡΠ΅ΠΌΠ° Π΄Π»Ρ ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎΠΉ ΡΡΠ°ΡΡΠΈ.
ΠΡΠ³ΡΠΌΠ΅Π½ΡΡ ΠΏΡΠΎΡΠΈΠ² ΡΠΌΠ΅Π½Ρ ΠΊΡΡΡΠΎΡΠ°
ΠΠ°ΠΊΒ Π±Ρ ΡΒ Π½ΠΈΒ ΠΈΡΠΊΠ°Π», ΡΒ Π½Π΅Β ΡΠΌΠΎΠ³ Π½Π°ΠΉΡΠΈ Π΄ΠΎΡΡΠΎΠΉΠ½ΡΡ Π°ΡΠ³ΡΠΌΠ΅Π½ΡΠΎΠ² ΠΏΡΠΎΡΠΈΠ² ΡΠΌΠ΅Π½Ρ ΠΊΡΡΡΠΎΡΠ° Π½Π°Π΄ Π°ΠΊΡΠΈΠ²Π½ΡΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ. ΠΠΎΠ»ΡΡΠ°Ρ ΡΠ°ΡΡΡ Π½Π°ΠΉΠ΄Π΅Π½Π½ΡΡ ΠΊΠΎΠ½ΡΡΠ°ΡΠ³ΡΠΌΠ΅Π½ΡΠΎΠ² ΠΌΠΎΠΆΠ½ΠΎ ΠΎΠΏΠΈΡΠ°ΡΡ ΡΡΠ°Π·ΠΎΠΉ Β«Π½Π΅Β Π½ΡΠΆΠ½ΠΎ Π»ΠΎΠΌΠ°ΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠ΅ ΠΏΡΠΈΠ²ΡΡΠΊΠΈΒ».
ΠΠ°ΡΠ½Ρ ΡΒ ΡΠΎΠ³ΠΎ, ΡΡΠΎ ΡΠ°ΡΡΠΌΠ°ΡΡΠΈΠ²Π°ΡΡ ΠΏΡΠΈΠ²ΡΡΠΊΠΈ Π²Β ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ Π°ΡΠ³ΡΠΌΠ΅Π½ΡΠ°Β β Π½Π΅Π»ΡΠ·Ρ. ΠΡΠΈΠ²ΡΡΠΊΠ°Β β ΡΡΠΎ Π²ΡΠ΅Π³ΠΎ Π»ΠΈΡΡ Π·Π½Π°ΠΊ ΡΠΎΠ³ΠΎ, ΡΡΠΎ ΠΊΠ°ΠΊΠΎΠΉ-Π»ΠΈΠ±ΠΎ ΠΈΠ·Β Π²Π°ΡΠΈΠ°Π½ΡΠΎΠ² Π±ΡΠ» ΠΊΠΎΠ³Π΄Π°-ΡΠΎ, ΠΏΠΎΒ ΠΊΠ°ΠΊΠΈΠΌ-ΡΠΎ ΠΏΡΠΈΡΠΈΠ½Π°ΠΌ, Π²ΡΠ±ΡΠ°Π½ ΠΈΒ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π»ΡΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ½Π½ΠΎΠΉ Π³ΡΡΠΏΠΏΠΎΠΉ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ ΡΠ°ΡΠ΅ Π΄ΡΡΠ³ΠΈΡ . ΠΡΠΈΠ²ΡΡΠΊΠ° ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π²Π°ΠΆΠ½Π° ΡΠΎΠ»ΡΠΊΠΎ Π²Β ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ΅ ΡΠΎΠ³ΠΎ, ΡΡΠΎ ΠΏΠΎΠ²Π»Π΅ΡΡΡ Π΅ΡΒ Π½Π°ΡΡΡΠ΅Π½ΠΈΠ΅, Π±ΡΠ΄Π΅ΡΒ Π»ΠΈ ΠΎΠ½ΠΎ Π΄Π΅ΡΡΡΡΠΊΡΠΈΠ²Π½ΡΠΌ ΠΈΠ»ΠΈ Π²ΡΠ΅Π³ΠΎ Π»ΠΈΡΡ Π²ΡΠ·ΠΎΠ²Π΅Ρ Π½Π΅Π±ΠΎΠ»ΡΡΠΎΠΉ Π΄ΠΈΡΠΊΠΎΠΌΡΠΎΡΡ Π½Π°Β Π²ΡΠ΅ΠΌΡ ΠΎΡΠ²ΡΠΊΠ°Π½ΠΈΡ ΠΎΡΒ Π½Π΅Ρ.
ΠΠ°Π»ΡΡΠ΅ Π½Π°Π΄ΠΎ ΡΡΠ°Π·Ρ ΠΎΡΠΌΠ΅ΡΠΈΡΡ, ΡΡΠΎ Π½Π΅Β Π²ΡΠ΅ ΠΏΡΠΈΠ²ΡΡΠΊΠΈ ΠΏΠΎΠ»Π΅Π·Π½ΡΠ΅. ΠΡΠ»ΠΈ ΠΈΠ΄ΡΠΈ Π½Π°Β ΠΏΠΎΠ²ΠΎΠ΄Ρ ΡΒ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ ΠΈΒ Π΄Π°Π²Π°ΡΡ ΠΈΠΌΒ ΡΠΎΠ»ΡΠΊΠΎΒ ΡΠΎ, ΠΊΒ ΡΠ΅ΠΌΡ ΠΎΠ½ΠΈ ΠΏΡΠΈΠ²ΡΠΊΠ»ΠΈ, ΡΠΎΒ ΠΏΡΠΎΠ³ΡΠ΅ΡΡ ΠΎΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ. Π§Π°ΡΡΠΎ ΡΒ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ ΡΠΎΡΠΌΠΈΡΡΡΡΡΡ ΠΏΡΠΈΠ²ΡΡΠΊΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΠΌΒ ΡΠΎΠ»ΡΠΊΠΎ ΠΌΠ΅ΡΠ°ΡΡ. ΠΒ ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΡΡΠΊΠΎΠ³ΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠ° ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎΠΉ ΠΏΡΠΈΠ²ΡΡΠΊΠΈ ΠΌΠΎΠΆΠ½ΠΎ Π²Π·ΡΡΡ ΠΏΠΎΠ΄ΠΏΠΈΡΠΈ ΠΊΒ ΡΠ΅ΠΊΠ±ΠΎΠΊΡΠ°ΠΌ ΠΈΠ»ΠΈ ΡΠ°Π΄ΠΈΠΎΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌ. ΠΠ΅Π½ΠΈΠ²ΡΠ΅ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ Π³ΠΎΠ΄Π°ΠΌΠΈ Π·Π°Π±ΡΠ²Π°Π»ΠΈ ΡΠ²ΡΠ·ΡΠ²Π°ΡΡ ΡΠ΅ΠΊΡΡ ΠΈΒ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠ΅ ΠΊΠΎΠ½ΡΡΠΎΠ»Ρ, ΠΈΠ·-Π·Π° ΡΠ΅Π³ΠΎ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ ΠΎΠ±ΡΡΠ½ΠΎ Π΄Π°ΠΆΠ΅ ΠΈΒ Π½Π΅Β ΠΏΡΡΠ°ΡΡΡΡ ΠΊΠ»ΠΈΠΊΠ°ΡΡ Π½Π°Β ΡΠ΅ΠΊΡΡ, ΡΡΠ°ΡΡ ΡΠ²ΠΎΡ Π²ΡΠ΅ΠΌΡ ΠΈΒ ΡΡΠΈΠ»ΠΈΡ Π½Π°Β ΠΏΠΎΠΏΡΡΠΊΠΈ ΠΏΠΎΠΏΠ°ΡΡΡ ΠΏΠΎΒ ΠΌΠ°Π»Π΅Π½ΡΠΊΠΈΠΌ ΠΎΠ±Π»Π°ΡΡΡΠΌ ΠΊΠΎΠ½ΡΡΠΎΠ»ΠΎΠ². ΠΡΠΎ ΠΎΡΠ»ΠΈΡΠ½ΡΠΉ ΠΏΡΠΈΠΌΠ΅Ρ ΠΏΠΎΡΠ΅ΠΌΡ ΠΈΠΌΠ΅Π΅Ρ ΡΠΌΡΡΠ» Π½Π΅Β ΠΏΡΠΎΡΡΠΎ ΡΠ²ΡΠ·Π°ΡΡ ΠΊΠΎΠ½ΡΡΠΎΠ» ΡΒ Π»Π΅ΠΉΠ±Π»ΠΎΠΌ, Π½ΠΎΒ ΠΈΒ Π²ΡΠ΅ΠΌΠΈ Π΄ΠΎΡΡΡΠΏΠ½ΡΠΌΠΈ ΡΠΏΠΎΡΠΎΠ±Π°ΠΌΠΈ ΡΠ°ΡΡΠΊΠ°Π·Π°ΡΡ ΠΎΠ±Β ΡΡΠΎΠΌ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ.
ΠΡΠ³ΡΠΌΠ΅Π½ΡΡ Β«ΠΏΠΎ ΠΏΡΠΈΠ²ΡΡΠΊΠ΅Β» ΠΌΠΎΠΆΠ½ΠΎ ΡΠ°Π·Π΄Π΅Π»ΠΈΡΡ Π½Π°Β Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΊΠ°ΡΠ΅Π³ΠΎΡΠΈΠΉ. Π―Β ΠΏΠΎΠΏΡΠΎΠ±ΡΡ ΠΎΡΠ²Π΅ΡΠΈΡΡ Π½Π°Β Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΡΠ°ΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠ΅ Π°ΡΠ³ΡΠΌΠ΅Π½ΡΡ ΠΏΡΠΎΡΠΈΠ² ΡΠΌΠ΅Π½Ρ ΠΊΡΡΡΠΎΡΠ° Π½Π°Π΄ Π°ΠΊΡΠΈΠ²Π½ΡΠΌΠΈ ΠΎΠ±Π»Π°ΡΡΡΠΌΠΈ.
Β«ΠΒ ΠΠ‘Β ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΠΎΠ±ΡΡΠ½ΡΠΉ ΠΊΡΡΡΠΎΡΒ»
ΠΒ ΠΎΠΏΠ΅ΡΠ°ΡΠΈΠΎΠ½Π½ΡΡ ΡΠΈΡΡΠ΅ΠΌΠ°Ρ ΠΏΡΠ΅ΠΎΠ±Π»Π°Π΄Π°ΡΡΠΈΠΉ ΠΊΡΡΡΠΎΡΒ β ΠΎΠ±ΡΡΠ½Π°Ρ ΡΡΡΠ΅Π»ΠΊΠ°. ΠΡΡΡΠΎΡ Π½Π°Π΄ ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌΠΈ ΠΈΠ»ΠΈ Π΄ΡΡΠ³ΠΈΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ ΡΠΎΡΠΌ ΠΎΠ±ΡΡΠ½ΠΎ Π½Π΅Β ΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ. ΠΠ΄Π½Π°ΠΊΠΎ, ΡΡΡ ΡΡΠΎΠΈΡ Π·Π°Π΄Π°ΡΡΡΡ Π²ΠΎΠΏΡΠΎΡΠΎΠΌ: Π°Β Ρ ΠΎΡΠΎΡΠΎΒ Π»ΠΈ ΡΡΠΎ? ΠΡΠΈΠ²ΡΡΠ½ΠΎΒ β Π΄Π°. ΠΠΎΒ ΡΠ΄ΠΎΠ±Π½ΠΎΒ Π»ΠΈ? Π―Β Π±Ρ Π½Π΅Β ΠΎΡΠΊΠ°Π·Π°Π»ΡΡ ΠΎΡΒ Π±ΠΎΠ»Π΅Π΅ ΡΠ²Π½ΠΎΠΉ ΠΎΠ±ΡΠ°ΡΠ½ΠΎΠΉ ΡΠ²ΡΠ·ΠΈ Π²ΠΎΒ ΠΌΠ½ΠΎΠ³ΠΈΡ Π΄Π΅ΡΠΊΡΠΎΠΏΠ½ΡΡ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡΡ Β β ΠΎΡΠ΅Π½Ρ ΡΠ°ΡΡΠΎ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ ΡΠΎΠ²ΡΠ΅ΠΌ Π·Π°Π±ΡΠ²Π°ΡΡ ΠΏΡΠΎ Ρ ΠΎΠ²Π΅Ρ ΠΈΒ ΠΏΡΠΈΡ ΠΎΠ΄ΠΈΡΡΡ Π΄ΠΎΠ³Π°Π΄ΡΠ²Π°ΡΡΡΡ ΠΎΒ ΠΊΠ»ΠΈΠΊΠ°Π±Π΅Π»ΡΠ½ΠΎΠΉ ΠΎΠ±Π»Π°ΡΡΠΈ Π½Π°ΡΠ³Π°Π΄.
ΠΡΡΠ°ΡΠΈ, Π΅ΡΠ»ΠΈ Π³ΠΎΠ²ΠΎΡΠΈΡΡ ΠΏΡΠΎ Π΄Π΅ΡΠΊΡΠΎΠΏ, ΡΠΎΒ ΡΡΠΎΠΈΡ ΡΠΏΠΎΠΌΡΠ½ΡΡΡ ΠΈΒ ΡΠ°ΠΊΠΎΠΉ ΡΠ°ΡΡΡΡ ΡΠ°Π·Π½ΠΎΠ²ΠΈΠ΄Π½ΠΎΡΡΡ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ ΠΊΠ°ΠΊ ΠΈΠ³ΡΡ. ΠΒ ΠΈΠ³ΡΠ°Ρ
ΠΊΡΡΡΠΎΡ ΠΏΠΎΡΡΠΈ Π²ΡΠ΅Π³Π΄Π° ΠΊΠ°ΡΡΠΎΠΌΠ½ΡΠΉ, ΠΈΒ ΠΎΡΠ΅Π½Ρ ΡΠ°ΡΡΠΎ ΠΈΠΌΠ΅Π½Π½ΠΎ ΠΎΠ½Β ΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π°Β ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ Π°ΠΊΡΠΈΠ²Π½ΡΠ΅ ΠΎΠ±Π»Π°ΡΡΠΈ. ΠΠΎΠΆΠ½ΠΎ ΠΏΡΠΎΠ²Π΅ΡΡΠΈ ΠΏΠ°ΡΠ°Π»Π»Π΅Π»ΠΈ ΠΌΠ΅ΠΆΠ΄Ρ ΠΈΠ³ΡΠ°ΠΌΠΈ ΠΈΒ Π²Π΅Π±-ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡΠΌΠΈΒ β ΠΈ, Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ, Π²Β Π²Π΅Π±-ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡΡ
Π²ΡΡ ΡΠ°ΡΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π²ΡΡΡΠ΅ΡΠΈΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ
ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΡΡ
ΠΊΡΡΡΠΎΡΠΎΠ²Β β Π΄Π»Ρ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΈΠ»ΠΈ Π΄Π»Ρ ΠΈΡ
Β ΠΏΠ΅ΡΠ΅ΡΠ°ΡΠΊΠΈΠ²Π°Π½ΠΈΡ. Π’Π°ΠΊ ΠΏΠΎΡΠ΅ΠΌΡΒ ΠΆΠ΅ Π²Β ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ Π΄ΡΡΠ³ΠΈΠ΅ Π°ΠΊΡΠΈΠ²Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΈΠΌΠ΅ΡΡ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΠΉ ΠΊΡΡΡΠΎΡ? Π Π°Π· ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΊΡΡΡΠΎΡΠ° Π΄Π»Ρ Β«ΠΊΠ½ΠΎΠΏΠΎΠΊΒ», Β«ΡΠ΅Π»Π΅ΠΊΡΠΎΠ²Β» ΠΈΠ»ΠΈ Β«ΡΠ΅ΠΊΠ±ΠΎΠΊΡΠΎΠ²Β» Π½Π΅Ρ, ΡΠΎΒ ΠΊΒ ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌ ΠΏΠΎΠ΄ΠΎΠΉΠ΄ΡΡ cursor: pointer
, ΡΠ°Π½Π΅Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π²ΡΠΈΠΉΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π΄Π»Ρ ΡΡΡΠ»ΠΎΠΊ. ΠΡΠ°Π²Π΄Π°, ΡΠ»ΡΡΠ°ΠΉ ΡΒ ΡΠ΅ΠΊΠ±ΠΎΠΊΡΠ°ΠΌΠΈ ΠΈΒ ΡΠ°Π΄ΠΈΠΎΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌΠΈ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΎΡΠΎΠ±ΡΠΉ: Π΅ΡΠ»ΠΈ Π²ΠΎΠΊΡΡΠ³ Π½ΠΈΡ
, ΡΒ ΠΏΠΎΠ΄ΠΏΠΈΡΡΡ, ΠΏΠΎΒ Ρ
ΠΎΠ²Π΅ΡΡ ΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΡΠΎΠ½, ΡΠΎΒ ΠΊΡΡΡΠΎΡ-ΡΡΠΊΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΒ Π½Π΅Β Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ. ΠΠ΄Π½Π°ΠΊΠΎ, Π½Π°Π΄ΠΎ Π½Π΅Β Π·Π°Π±ΡΡΡ ΡΠΌΠ΅Π½ΠΈΡΡ ΠΊΡΡΡΠΎΡ Π΄Π»Ρ ΡΠΎΠΏΡΠΎΠ²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠ΅ΠΊΡΡΠ° Π½Π° default
, Π²Π΅Π΄Ρ ΠΊΡΡΡΠΎΡ-ΡΡΡΠ΅Π»ΠΊΠ° ΠΊΠ°ΠΊ ΡΠ°Π· ΡΠ°ΡΠ΅ Π²ΡΠ΅Π³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ Π²ΡΠ±ΠΎΡΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ². ΠΠΎΒ Π²ΠΎΡ Π΅ΡΠ»ΠΈ Π²ΡΠ±ΠΎΡ ΡΠ΅ΠΊΠ±ΠΎΠΊΡΠ° ΠΈΠ»ΠΈ ΡΠ°Π΄ΠΈΠΎΠΊΠ½ΠΎΠΏΠΊΠΈ Π²ΡΠ·ΠΎΠ²Π΅Ρ ΠΊΠ°ΠΊΠΈΠ΅-ΡΠΎ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ Π½Π°Β ΡΡΡΠ°Π½ΠΈΡΠ΅ (ΡΠΊΠ°ΠΆΠ΅ΠΌ, ΡΠ°ΡΠΊΡΡΡΠΈΠ΅ ΡΠ°ΡΡΠΈ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½Π°), ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΈΒ ΠΊΡΡΡΠΎΡ-ΡΡΠΊΡ Π΄Π»Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ ΡΠΊΠ°Π·Π°ΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΠΌ ΠΎΒ ΡΠΎΠΌ, ΡΡΠΎ Β«ΡΠ΅ΠΉΡΠ°Ρ ΡΡΠΎ-ΡΠΎ ΠΏΡΠΎΠΈΠ·ΠΎΠΉΠ΄ΡΡΒ».
Β«Π―Β Π²ΠΈΠΆΡ ΠΊΡΡΡΠΎΡΒ β ΡΡΠΈΡΠ°Ρ ΡΡΠΎ ΡΡΡΠ»ΠΊΠΎΠΉΒ»
ΠΡΠΎΡ Π°ΡΠ³ΡΠΌΠ΅Π½Ρ ΡΠ°ΠΊΠΆΠ΅ Π²ΡΡΡΠ΅ΡΠ°Π΅ΡΡΡ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΡΠ°ΡΡΠΎ. Π Π°Π½ΡΡΠ΅, ΠΊΠΎΠ³Π΄Π° Π²Π΅Π±-ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ Π΅ΡΡ Π½Π΅Β Π±ΡΠ»ΠΎ, Π²ΡΠ΅ ΡΠ°ΠΉΡΡ Π±ΡΠ»ΠΈ Π²ΡΠ΅Π³ΠΎ Π»ΠΈΡΡ ΡΠ²ΡΠ·Π°Π½Π½ΡΠ΅ ΡΡΡΠ»ΠΊΠ°ΠΌΠΈ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΡ. ΠΒ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡΡ ΠΏΠΎΠ΄ΠΎΠ±Π½ΡΡ ΡΠ²ΡΠ·Π΅ΠΉ ΠΏΠΎΡΡΠΈ Π½Π΅Β Π±ΡΠ»ΠΎ, Π½ΠΎΒ Π²Β HTML ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΡΠΈΡΠ»ΠΎΡΡ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ, ΠΈΒ ΠΏΡΠΎ Π½Π΅Π³ΠΎ Π½Π°Π΄ΠΎ Π±ΡΠ»ΠΎ ΠΊΠ°ΠΊ-ΡΠΎ ΡΠ°ΡΡΠΊΠ°Π·Π°ΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΠΌ. ΠΡΠΎ ΡΠ΄Π΅Π»Π°Π»ΠΈ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ΠΌ ΠΏΠΎΠ΄ΡΡΡΠΊΠΈΠ²Π°Π½ΠΈΡ, ΡΠΈΠ½Π΅Π³ΠΎ ΡΠ²Π΅ΡΠ° ΠΈΒ ΠΊΡΡΡΠΎΡΠ°. ΠΡΠΈ ΡΡΠΎΠΌ, Π΄Π»Ρ ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΈΒ ΠΏΡΠΎΡΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π»ΠΈΡΡ ΡΠΈΡΡΠ΅ΠΌΠ½ΡΠ΅ ΠΊΠΎΠ½ΡΡΠΎΠ»Ρ, ΠΈΒ Π½ΠΈΠΊΠ°ΠΊΠΎΠ³ΠΎ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΡ Π΄Π»Ρ Π½ΠΈΡ Π½Π΅Β Π΄ΠΎΠ±Π°Π²ΠΈΠ»ΠΈ.
Π¨Π»ΠΈ Π³ΠΎΠ΄Ρ, ΡΠ°ΠΉΡΡ ΡΡΠ°Π½ΠΎΠ²ΠΈΠ»ΠΈΡΡ Π²ΡΡ Π½Π°ΡΡΡΠ΅Π½Π½Π΅Π΅, Π½Π°Β ΡΡΡΠ°Π½ΠΈΡΠ°Ρ ΠΏΠΎΡΠ²Π»ΡΠ»ΠΈΡΡ ΡΠ°Π·Π½ΡΠ΅ ΠΊΠ°ΡΡΠΎΠΌΠ½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, Π²Β ΡΠΎΠΌ ΡΠΈΡΠ»Π΅ ΠΈΒ ΡΡΡΠ»ΠΊΠΈ, ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Π½Π½ΡΠ΅ ΠΏΠΎΠ΄ ΠΊΠ½ΠΎΠΏΠΊΠΈ. Π, Π²Β Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²Π΅ ΡΠ»ΡΡΠ°Π΅Π², Π½ΠΈΠΊΡΠΎ Π½Π΅Β ΡΠ±ΠΈΡΠ°Π» ΡΡΡΠ»ΠΎΡΠ½ΠΎΠ΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅Β β ΠΈΒ Π½Π°Β ΡΠ°ΠΊΠΈΡ ΠΊΠ½ΠΎΠΏΠΊΠ°Ρ ΡΠΌΠ΅Π½Π° ΠΊΡΡΡΠΎΡΠ° ΠΎΡΡΠ°Π²Π°Π»Π°ΡΡ. ΠΡΠ»ΠΈ ΡΠ΅ΠΉΡΠ°Ρ ΠΏΠΎΡΠΌΠΎΡΡΠ΅ΡΡ Π½Π°Β Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²ΠΎ ΠΏΠΎΠ΄ΠΎΠ±Π½ΡΡ ΠΊΠ°ΡΡΠΎΠΌΠ½ΡΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ, ΡΠ΄Π΅Π»Π°Π½Π½ΡΡ ΡΡΡΠ»ΠΊΠ°ΠΌΠΈ, Π½Π°Β Π½ΠΈΡ Π²ΡΠ΅Ρ ΠΎΡΡΠ°Π»ΠΎΡΡ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ΡΡΡΠ»ΠΎΠΊ.
Β«Π‘ΡΡΠ»ΠΊΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡΠΊΡΡΡΡ Π²Β Π½ΠΎΠ²ΠΎΠΌ ΠΎΠΊΠ½Π΅ ΠΈΒ Π²ΡΠ·Π²Π°ΡΡ Π΄Π»Ρ Π½Π΅Ρ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½ΡΒ»
ΠΡΒ Π΄Π°Β β ΡΡΡΠ»ΠΊΠ° ΡΡΠΎ Π½Π΅Β ΠΊΠ½ΠΎΠΏΠΊΠ°, Π°Β ΠΊΠ½ΠΎΠΏΠΊΠ°Β β Π½Π΅Β ΡΡΡΠ»ΠΊΠ°. ΠΠΎΒ ΠΈΠ·Β ΡΡΠΎΠ³ΠΎ Π½Π΅Β ΡΠ»Π΅Π΄ΡΠ΅Ρ, ΡΡΠΎ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΈΒ ΡΡΡΠ»ΠΎΠΊ ΠΏΠΎΒ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΎΡΠ»ΠΈΡΠ°ΡΡΡΡ.
ΠΠΈΠΊΡΠΎ Π½Π΅Β Π±ΡΠ΄Π΅Ρ ΠΎΠΆΠΈΠ΄Π°ΡΡ ΡΒ ΠΊΠ½ΠΎΠΏΠΎΠΊ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠ΅ΠΉ ΠΎΡΠΊΡΡΡΡ Π²Β Π½ΠΎΠ²ΠΎΠΌ ΠΎΠΊΠ½Π΅ ΠΈΠ»ΠΈ ΡΠΊΠΎΠΏΠΈΡΠΎΠ²Π°ΡΡ Π°Π΄ΡΠ΅Ρ. ΠΒ ΠΊΠ°ΠΆΠ΄ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΠΈΒ ΠΊΠ½ΠΎΠΏΠΊΠ°, ΠΈΒ ΡΡΡΠ»ΠΊΠ° Π±ΡΠ΄ΡΡ ΠΈΠΌΠ΅ΡΡ ΡΠ²ΠΎΠΉ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡ, Π²Β ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ ΠΌΠΎΠ³ΡΡ ΠΈΠ»ΠΈ ΠΎΠΆΠΈΠ΄Π°ΡΡ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΡ ΡΡΡΠ»ΠΊΠΈ, ΠΈΠ»ΠΈΒ ΠΆΠ΅ ΡΡΠΎΠ³ΠΎ Π½Π΅Β ΠΎΠΆΠΈΠ΄Π°ΡΡ. ΠΠ΅Π²Π°ΠΆΠ½ΠΎ ΠΊΠ°ΠΊΠΎΠΉ Π±ΡΠ΄Π΅Ρ Π²Β ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΠΊΡΡΡΠΎΡΒ β Π΅ΡΠ»ΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ ΡΠ²ΠΈΠ΄ΡΡ ΠΊΡΡΡΠΎΡ Π²Β ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ΅ ΡΡΡΠ»ΠΊΠΈ (Π°Β ΠΌΠ½ΠΎΠ³ΠΈΠ΅ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ΡΡ ΡΠ΅ΠΉΡΠ°Ρ ΡΡΡΡΒ Π»ΠΈ Π½Π΅Β Π²ΡΡ ΡΠΈΡΡΡΡ Π²Β Π²ΠΈΠ΄Π΅ ΠΊΠ½ΠΎΠΏΠΎΠΊ), ΠΎΠ½ΠΈΒ Π±ΡΠ΄Π΅Ρ ΠΎΠ±ΡΠ°ΡΠ°ΡΡΡΡ ΡΒ Π½Π΅ΠΉ ΠΊΠ°ΠΊ ΡΒ ΡΡΡΠ»ΠΊΠΎΠΉ Π½Π΅Β Π·Π°Π΄ΡΠΌΡΠ²Π°ΡΡΡ. Π, Π½Π°ΠΎΠ±ΠΎΡΠΎΡ, Π΅ΡΠ»ΠΈ ΡΠ°ΠΌ Π±ΡΠ΄Π΅Ρ ΠΊΠ½ΠΎΠΏΠΊΠ°, Π°Β ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ Π½Π΅Β Π±ΡΠ΄Π΅Ρ ΠΎΠΆΠΈΠ΄Π°ΡΡ ΡΡΡΠ»ΠΊΠΈ, Π²ΡΡ Π±ΡΠ΄Π΅Ρ Π²Β ΠΏΠΎΡΡΠ΄ΠΊΠ΅. ΠΡΠ»ΠΈ ΠΎΠ½ΠΈΒ Π·Π°Ρ ΠΎΡΡΡ ΠΏΡΠΈΠΊΡΠ΅ΠΏΠΈΡΡ ΡΠ°ΠΉΠ»Β β ΠΈΡ Π½Π΅Β ΡΠΌΡΡΠΈΡ, ΡΡΠΎ ΡΠ°ΠΌ, Π²Π½Π΅Π·Π°ΠΏΠ½ΠΎ, ΠΊΡΡΡΠΎΡ-ΡΡΠΊΠ°. ΠΡΠ»ΠΈ ΠΎΠ½ΠΈΒ Π·Π°Ρ ΠΎΡΡΡ Π½Π°ΠΉΡΠΈ ΡΡΠΎ-ΡΠΎ ΡΠ΅ΡΠ΅Π· ΠΏΠΎΠΈΡΠΊΠΎΠ²ΡΡ ΡΠΎΡΠΌΡ, ΠΈΡ Π½Π΅Β ΡΠΌΡΡΠΈΡ, ΡΡΠΎ ΡΠ°ΠΌ Π½Π°Β ΠΊΠ½ΠΎΠΏΠΊΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΠ»ΡΡ ΠΊΡΡΡΠΎΡ. ΠΠ½ΠΈΒ ΠΏΡΠΎΡΡΠΎ Π½Π°Β Π½Π΅Ρ Π½Π°ΠΆΠΌΡΡ. ΠΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ ΠΌΠΎΠ³ΡΡ Π²ΠΎΠ·ΠΌΡΡΠΈΡΡΡΡ ΡΠ°Π·Π²Π΅ ΡΡΠΎ Π² ΡΠ»ΡΡΠ°ΡΡ ΠΊΠΎΠ³Π΄Π° ΠΊΠ½ΠΎΠΏΠΊΠ° Π±ΡΠ΄Π΅Ρ Π·Π°ΠΌΠ°ΡΠΊΠΈΡΠΎΠ²Π°Π½Π° ΠΏΠΎΠ΄ ΡΡΡΠ»ΠΊΡ, Π½Π΅Β Π½Π°Ρ ΠΎΠ΄ΡΡΡ ΠΏΡΠΈ ΡΡΠΎΠΌ Π²Β ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ΅ ΡΠΎΡΠΌΡ.
ΠΠ°Π»ΡΡΠ΅Β β Π±ΠΎΠ»ΡΡΠ΅. ΠΡΠ΅Π½Ρ ΡΠ°ΡΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π²ΡΡΡΠ΅ΡΠΈΡΡ ΡΡΡΠ»ΠΊΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π΅Β ΡΠ²Π»ΡΡΡΡΡ ΡΡΡΠ»ΠΊΠ°ΠΌΠΈΒ β ΡΒ ΠΏΠΎΡΠ΅ΠΌΡ-ΡΠΎ Π½Π΅Β ΡΠ»ΡΡΠ°Π» Π²ΠΎΠ·ΠΌΡΡΠ΅Π½ΠΈΠΉ Π½Π°ΡΡΡΡ ΡΠΎΠ³ΠΎ, ΡΡΠΎ ΡΒ ΠΏΠΎΠ΄ΠΎΠ±Π½ΡΡ ΠΏΡΠ΅Π²Π΄ΠΎ-ΡΡΡΠ»ΠΎΠΊ ΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΠΏΠΎΒ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΊΡΡΡΠΎΡ. Π Π°Π·Π»ΠΈΡΠ½ΡΠ΅ Π²ΡΠΏΠ°Π΄ΡΡΠΊΠΈ, ΡΠΈΠ»ΡΡΡΡ, ΡΠ°ΡΠΊΡΡΠ²Π°ΡΠΊΠΈ ΠΊΠ°ΡΠΎΠ², Π·Π°ΠΊΡΡΠ²Π°ΡΡΠΈΠ΅ ΠΊΡΠ΅ΡΡΠΈΠΊΠΈ, ΡΡΡΠ»ΠΊΠΈ Β«ΠΎΡмСна» β Π½Π°Β ΠΌΠ½ΠΎΠ³ΠΈΡ ΡΠ°ΠΉΡΠ°Ρ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΉΡΠΈ ΠΎΠ³ΡΠΎΠΌΠ½ΠΎΠ΅ ΡΠΈΡΠ»ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΡΒ ΠΈΠ·ΠΌΠ΅Π½ΡΠ½Π½ΡΠΌ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ΠΌ, Π½ΠΎΒ Π²Π΅Π·Π΄Π΅ Π½Π°Β ΠΏΠΎΠ΄ΠΎΠ±Π½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°Ρ ΠΎΡΡΠ°ΡΡΡΡ ΡΠΌΠ΅Π½Π° ΠΊΡΡΡΠΎΡΠ° ΠΏΠΎΒ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ. ΠΠΎΡΠ΅ΠΌΡΒ Π±Ρ Π²Β ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ Π½Π΅Β Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΊΡΡΡΠΎΡ ΠΊΒ ΠΊΠ½ΠΎΠΏΠΊΠ΅ ΠΈΠ»ΠΈ ΡΠ΅Π»Π΅ΠΊΡΡ, ΡΠ΅ΠΌ ΠΎΠ½ΠΈ Π±ΡΠ΄Π΅Ρ ΠΎΡΠ»ΠΈΡΠ°ΡΡΡΡ ΠΎΡΒ Π²ΡΠ΅Ρ ΡΡΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ²?
ΠΡΡΠ°ΡΠΈ, Π²ΠΎΡ ΠΎΡΠ»ΠΈΡΠ½ΡΠΉ ΠΏΡΠΈΠΌΠ΅Ρ ΠΏΠ΅ΡΠ΅Π΄ΠΎΠ²ΠΎΠ³ΠΎ ΡΠ΅ΡΠ²ΠΈΡΠ°Β Π³+:
ΠΡΠ»ΠΈ Ρ ΠΎΡΠΈΡΠ΅, ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΠΏΡΠΎΠ±ΠΎΠ²Π°ΡΡ Π΄ΠΎΠ³Π°Π΄Π°ΡΡΡΡ, ΠΊΠ°ΠΊΠΈΠ΅ ΠΈΠ·Β ΠΎΡΠΌΠ΅ΡΠ΅Π½Π½ΡΡ ΡΠΈΡΡΠ°ΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΈΠ·Π½Π°ΡΠ°Π»ΡΠ½ΠΎ ΡΠ²Π»ΡΡΡΡΡ ΡΡΡΠ»ΠΊΠ°ΠΌΠΈ, ΠΊΠ°ΠΊΠΈΠ΅ Π½Π΅Ρ; ΡΒ ΠΊΠ°ΠΊΠΈΡ Π΅ΡΡΡ ΠΊΡΡΡΠΎΡ-ΠΏΠΎΠΈΠ½ΡΠ΅Ρ, Π°Β ΡΒ ΠΊΠ°ΠΊΠΈΡ Β β Π½Π΅Ρ. ΠΒ ΡΡΠΎ Π²ΠΎΠΎΠ±ΡΠ΅ ΠΏΡΠΎΠΈΠ·ΠΎΠΉΠ΄ΡΡ Π΅ΡΠ»ΠΈ Π½Π°Β ΡΠΎΡ ΠΈΠ»ΠΈ ΠΈΠ½ΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π°Π²Π΅ΡΡΠΈ ΠΊΡΡΡΠΎΡ, Π°Β ΠΏΠΎΡΠΎΠΌ ΠΈΒ Π½Π°ΠΆΠ°ΡΡ. Π§ΡΡΡ ΠΏΠΎΠ·ΠΆΠ΅ ΡΒ Π΄Π°ΠΌ ΠΎΡΠ²Π΅Ρ, Π°Β ΠΏΠΎΠΊΠ° ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΡ.
ΠΡΠ»ΠΈ ΠΏΡΡΠΌΠΎΠ»ΠΈΠ½Π΅ΠΉΠ½ΠΎ Π³ΠΎΠ²ΠΎΡΠΈΡΡ, ΡΡΠΎ Β«Π²ΡΡ, ΡΒ ΡΠ΅Π³ΠΎ Π΅ΡΡΡ href
Β β Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΈΠΌΠ΅ΡΡ ΠΊΡΡΡΠΎΡ-ΠΏΠΎΠΈΠ½ΡΠ΅Ρ, Π°Β ΡΠΎ, ΡΒ ΡΠ΅Π³ΠΎ Π½Π΅ΡΒ β Π½Π΅Β Π΄ΠΎΠ»ΠΆΠ½ΠΎΒ», ΡΠΎΒ ΠΌΠΎΠ³ΡΡ Π²ΠΎΠ·Π½ΠΈΠΊΠ½ΡΡΡ Π½Π΅ΠΊΡΠ°ΡΠΈΠ²ΡΠ΅ ΠΏΡΠΎΡΠΈΠ²ΠΎΡΠ΅ΡΠΈΠ²ΡΠ΅ ΡΠ»ΡΡΠ°ΠΈ: Π²Β ΡΠ°Π·Π½ΡΡ
ΠΌΠ΅ΡΡΠ°Ρ
Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΠΎ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΡΠ΄Π΅Π»Π°Π½Π° ΠΈΒ ΡΡΡΠ»ΠΊΠ°. ΠΡΠ»ΠΈ ΡΒ ΡΠ°ΠΊΠΈΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π±ΡΠ΄Π΅Ρ ΡΠ°Π·Π»ΠΈΡΠ°ΡΡΡΡ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΏΠΎΒ Ρ
ΠΎΠ²Π΅ΡΡ, ΡΠΎΒ ΡΡΠΎ Π±ΡΠ΄Π΅Ρ ΡΠΌΡΡΠ°ΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ Π±ΠΎΠ»ΡΡΠ΅, ΡΠ΅ΠΌ Π΅ΡΠ»ΠΈΒ Π±Ρ ΡΒ Π½ΠΈΡ
Π±ΡΠ»ΠΎ Π»ΡΠ±ΠΎΠ΅, Π½ΠΎΒ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎΠ΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅. ΠΡΡΠ³ΠΎΠΉ ΡΠ»ΡΡΠ°ΠΉΒ β ΠΊΠΎΠ³Π΄Π° ΡΡΠ΄ΠΎΠΌ Π½Π°Ρ
ΠΎΠ΄ΡΡΡΡ ΠΈΒ ΠΊΠ½ΠΎΠΏΠΊΠ° (button
ΠΈΠ»ΠΈ input
), ΠΈΒ ΠΏΡΠ΅Π²Π΄ΠΎ-ΡΡΡΠ»ΠΊΠ°. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠ°ΡΡΠΎ Π΄Π΅Π»Π°ΡΡ ΠΏΠΎΠΏΠ°ΠΏΡ ΡΒ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ Β«ΠΠΊΒ» ΠΈΒ ΡΡΡΠ»ΠΊΠΎΠΉ Β«ΠΎΡΠΌΠ΅Π½Π°Β». Π’ΡΡ ΠΏΠΎΠ»ΡΡΠ°Π΅ΡΡΡ ΡΠ°ΠΊ, ΡΡΠΎ ΡΒ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΊΡΡΡΠΎΡΠ° Π½Π΅Ρ, Π°Β ΡΒ ΡΡΡΠ»ΠΊΠΈ (ΠΊΠΎΡΠΎΡΠ°Ρ ΡΡΡΠ»ΠΊΠΎΠΉ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΡΠΈΡΠ²ΠΎΡΡΠ΅ΡΡΡ)Β β ΠΊΡΡΡΠΎΡ Π΅ΡΡΡ. Π―Β ΡΡΠΈΡΠ°Ρ, ΡΡΠΎ ΠΏΠΎΠ΄ΠΎΠ±Π½ΡΠ΅ Π½Π΅ΠΎΠ΄Π½ΠΎΡΠΎΠ΄Π½ΠΎΡΡΠΈ ΡΠΎΠ»ΡΠΊΠΎ ΠΌΠ΅ΡΠ°ΡΡ. ΠΠΎΒ ΠΈΠ·Β Π΄Π²ΡΡ
Π²Π°ΡΠΈΠ°Π½ΡΠΎΠ² ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½ΠΈΡ ΠΊΒ ΠΎΠ±ΡΠ΅ΠΌΡ Π·Π½Π°ΠΌΠ΅Π½Π°ΡΠ΅Π»Ρ ΠΊΡΠΎ Π²ΡΠ±Π΅ΡΠ΅Ρ ΠΎΡΡΡΡΡΡΠ²ΠΈΠ΅ ΠΊΡΡΡΠΎΡΠ° ΠΏΠΎΒ Ρ
ΠΎΠ²Π΅ΡΡ ΡΒ ΡΡΡΠ»ΠΊΠΈ?
Π’Π΅ΠΏΠ΅ΡΡ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΡΠΈΡΡΠ°ΡΠΈΡ ΡΒ ΠΎΡΠΊΠ»ΡΡΡΠ½Π½ΡΠΌ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ΠΌ. Π§ΡΠΎ, Π΅ΡΠ»ΠΈ ΠΌΡΒ Π·Π°Π΄ΠΈΠ·Π΅ΠΉΠ±Π»ΠΈΠΌ ΠΊΠ°ΠΊΡΡ-ΡΠΎ ΠΊΠ½ΠΎΠΏΠΊΡ? ΠΠ½Π° ΠΏΠ΅ΡΠ΅ΡΡΠ°Π½Π΅Ρ Π½Π°ΠΆΠΈΠΌΠ°ΡΡΡΡ. ΠΒ Π΅ΡΠ»ΠΈ Π·Π°Π΄ΠΈΠ·Π΅ΠΉΠ±Π»ΠΈΠΌ ΡΡΡΠ»ΠΊΡ? ΠΠΎ-Ρ ΠΎΡΠΎΡΠ΅ΠΌΡ, ΠΌΡΒ Π΄ΠΎΠ»ΠΆΠ½Ρ Π±ΡΠ΄Π΅ΠΌ ΡΠ±ΡΠ°ΡΡ ΠΈΒ ΠΊΡΡΡΠΎΡ. ΠΡΠ΅Π΄ΡΡΠ°Π²ΠΈΠΌ: ΡΠ½Π°ΡΠ°Π»Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ ΡΡΠ°Π»ΠΊΠΈΠ²Π°ΡΡΡΡ ΡΒ Π·Π°Π΄ΠΈΠ·Π΅ΠΉΠ±Π»Π΅Π½Π½ΠΎΠΉ ΡΡΡΠ»ΠΊΠΎΠΉ Π±Π΅Π· ΠΊΡΡΡΠΎΡΠ°, ΠΏΠΎΡΠΎΠΌ ΠΊΠ°ΠΊΠΈΠΌ-ΡΠΎ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ΠΌ Π΅ΡΒ ΡΠ°Π·Π΄ΠΈΠ·Π΅ΠΉΠ±Π»ΠΈΠ²Π°ΡΡ ΠΈΒ Π²ΠΈΠ΄ΡΡ ΡΠΌΠ΅Π½ΠΈΠ²ΡΠΈΠΉΡΡ ΠΊΡΡΡΠΎΡ. ΠΠΎΡΠΎΠΌ Π³Π΄Π΅-ΡΠΎ Π²Β ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ΅ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ Π²ΠΈΠ΄ΡΡ ΠΊΠ°ΡΡΠΎΠΌΠ½ΡΡ ΡΠ΅ΡΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ Π±Π΅Π· ΠΊΡΡΡΠΎΡΠ°Β β ΠΊΠ°ΠΊ Π²Β ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΠΌ ΠΏΠΎΠ½ΡΡΡ, ΡΡΠΎ ΠΎΠ½Π° Π½Π΅Β Π·Π°Π΄ΠΈΠ·Π΅ΠΉΠ±Π»Π΅Π½Π½Π°?
ΠΒ ΠΈΡΠΎΠ³Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ±ΡΠ°ΡΡ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ² ΠΊΠΎΠ½ΡΠ»ΠΈΠΊΡΠΎΠ² ΠΊΠ½ΠΎΠΏΠΎΠΊ, ΡΡΡΠ»ΠΎΠΊ, ΠΈΡ Β ΡΠΎΡΡΠΎΡΠ½ΠΈΠΉ ΠΈΒ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΡ. ΠΠΎΠ΄ΠΎΠ±Π½ΡΠ΅ ΡΠ°Π·Π½ΠΎΠ³Π»Π°ΡΠΈΡ Π±ΡΠ΄ΡΡ Π²ΠΎΠ·Π½ΠΈΠΊΠ°ΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π²Β ΡΠ»ΡΡΠ°ΡΡ ΠΊΠΎΠ³Π΄Π° ΠΊΡΡΡΠΎΡ ΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΡΡΡΠΎΠ³ΠΎ ΡΒ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ²-ΡΡΡΠ»ΠΎΠΊ, Π΅ΡΠ»ΠΈΒ ΠΆΠ΅ ΠΏΡΠΈΡΠ°Π²Π½ΡΡΡ ΡΠΌΠ΅Π½Ρ ΠΊΡΡΡΠΎΡΠ° ΠΊΒ Π»ΡΠ±ΠΎΠΉ ΡΠΌΠ΅Π½Π΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ (ΠΊΠΎΠ³Π΄Π° Π»ΠΎΠ³ΠΈΡΠ½ΠΎ Π±ΡΠ»ΠΎΒ Π±Ρ ΠΌΠ΅Π½ΡΡΡ ΡΠΎΠ½/ΡΠ²Π΅Ρ/ΡΡΠΎ-ΡΠΎ Π΅ΡΡ), ΡΠΎΒ ΡΡΠΈΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌ Π½Π΅Β Π±ΡΠ΄Π΅Ρ.
ΠΠ΅ΡΠ½ΡΠΌΡΡ ΠΊΒ ΠΈΠ»Π»ΡΡΡΡΠ°ΡΠΈΠΈ ΠΈΠ·Β Π³+:
ΠΡΠ°ΠΊ, ΡΠΏΠΈΡΠΎΠΊ ΡΒ ΡΠ°Π·ΡΡΡΠ½Π΅Π½ΠΈΡΠΌΠΈ Π³Π΄Π΅ ΠΊΠ°ΠΊΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ:
ΠΠ΅ΡΠΌΠ°Π»ΠΈΠ½ΠΊ ΠΏΠΎΡΡΠ°, ΠΎΠΊ. Π‘ΡΡΠ»ΠΊΠ° Π΅ΡΡΡ, ΠΏΠΎΒ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΏΠΎΡΠ²Π»ΡΡΡΡΡ ΠΏΠΎΠ΄ΡΡΡΠΊΠΈΠ²Π°Π½ΠΈΠ΅ ΠΈΒ ΠΊΡΡΡΠΎΡ.
ΠΡΠΎ Π²ΠΎΠ²ΡΠ΅ Π½Π΅Β ΡΡΡΠ»ΠΊΠ°, ΠΏΡΠΎΡΡΠΎ ΡΠ΅ΠΊΡΡ π
ΠΡΠΎ ΠΏΡΠ΅Π²Π΄ΠΎΡΡΡΠ»ΠΊΠ°, ΡΡΡΠ»ΠΊΠΈ Π½Π΅Ρ, ΠΏΠΎΒ Ρ ΠΎΠ²Π΅ΡΡΒ β ΠΈΒ ΠΏΠΎΠ΄ΡΡΡΠΊΠΈΠ²Π°Π½ΠΈΠ΅ ΠΈΒ ΠΊΡΡΡΠΎΡ. ΠΠΎ ΠΊΠ»ΠΈΠΊΡ ΠΏΠΎΡΠ²ΠΈΡΡΡ Π΄ΡΠΎΠΏΠ΄Π°ΡΠ½.
ΠΠ½Π°Π»ΠΎΠ³ΠΈΡΠ½ΠΎΒ β ΠΏΡΠΎΡΡΠΎ ΠΊΠΎΠ½ΡΡΠΎΠ», Π±Π΅Π· ΡΡΡΠ»ΠΊΠΈ, ΠΏΠΎΒ Ρ ΠΎΠ²Π΅ΡΡ ΠΌΠ΅Π½ΡΡΡΡΡ ΡΠ²Π΅Ρ ΠΈΒ ΠΊΡΡΡΠΎΡ.
ΠΠΏΡΡΡ Π½Π΅Β ΡΡΡΠ»ΠΊΠ°. ΠΒ ΡΡΠΎΠΌ ΡΠ½ΠΈΠΏΠΏΠ΅ΡΠ΅ ΡΡΡΠ»ΠΊΠΎΠΉ ΡΠ²Π»ΡΡΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΈΒ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ°.
Π’ΡΡ ΠΈΒ ΡΠ·Π΅ΡΠΏΠΈΠΊ, ΠΈΒ ΠΈΠΌΡΒ β ΡΡΡΠ»ΠΊΠΈ. ΠΠ²Π΅, Π½Π΅Β ΡΠ²ΡΠ·Π°Π½Π½ΡΠ΅, Π½ΠΎΒ Π²Π΅Π΄ΡΡΠΈΠ΅ Π²Β ΠΎΠ΄Π½ΠΎ ΠΌΠ΅ΡΡΠΎ, Π½Π°Β ΠΎΠ±Π΅ΠΈΡ ΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΠΊΡΡΡΠΎΡ ΠΏΠΎΒ Ρ ΠΎΠ²Π΅ΡΡ, ΡΒ ΡΠ΅ΠΊΡΡΠ° ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ ΠΏΠΎΠ΄ΡΡΡΠΊΠΈΠ²Π°Π½ΠΈΠ΅.
ΠΡΠ΅Π²Π΄ΠΎΡΡΡΠ»ΠΊΠ°Β β Π±Π΅Π· Ρ ΡΠ΅ΡΠ°. ΠΠ°ΠΊ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΎ, ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ ΠΏΠΎΠ΄ΡΡΡΠΊΠΈΠ²Π°Π½ΠΈΠ΅ ΠΈΒ ΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΠΊΡΡΡΠΎΡ.
ΠΠ°Π·Π°Π»ΠΎΡΡΒ Π±ΡΒ β ΠΊΠ½ΠΎΠΏΠΊΠ°. ΠΠΎΒ Ρ ΠΎΠ²Π΅ΡΡ ΠΊΡΡΡΠΎΡ Π½Π΅Β ΠΌΠ΅Π½ΡΠ΅ΡΡΡ, Π½ΠΎΒ β Π²Π½Π΅Π·Π°ΠΏΠ½ΠΎΒ β ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ Π²ΡΠΏΠ°Π΄ΡΡΠΊΠ°. ΠΠΎΒ Ρ ΠΎΠ²Π΅ΡΡ.
ΠΠΊ, Π΄ΠΎΠΏΡΡΡΠΈΠΌ, Β«ΡΠΈΡΡΠ΅ΠΌΠ½ΡΠΉΒ» ΡΠ»Π΅ΠΌΠ΅Π½Ρ (Ρ ΠΎΡΡ ΠΈΒ ΠΊΠ°ΡΡΠΎΠΌΠ½ΡΠΉ)Β β ΠΊΠ½ΠΎΠΏΠΊΠ°Β β Π½Π΅Β ΠΈΠΌΠ΅Π΅Ρ ΠΊΡΡΡΠΎΡΠ°. ΠΠΎΒ ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ ΡΡΡ ΠΎΠ±ΠΎΠ·Π½Π°ΡΠ΅Π½ ΡΠ΅ΠΊΠ±ΠΎΠΊΡ (ΠΊΠΎΡΠΎΡΡΠΉ ΡΠΎΠΆΠ΅, ΠΏΠΎΒ ΡΠΎΠΉΒ ΠΆΠ΅ Π»ΠΎΠ³ΠΈΠΊΠ΅, Β«ΡΠΈΡΡΠ΅ΠΌΠ½ΡΠΉΒ») ΡΒ ΠΏΠΎΠ΄ΠΏΠΈΡΡΡ. ΠΠΎΒ ΡΡΡ, Π²Π½Π΅Π·Π°ΠΏΠ½ΠΎ, Ρ ΠΎΡΡ ΡΡΡΠ»ΠΊΠΈ-ΡΠΎ ΠΈΒ Π½Π΅Ρ, ΠΊΡΡΡΠΎΡ ΠΏΠΎΒ Ρ ΠΎΠ²Π΅ΡΡ ΠΌΠ΅Π½ΡΠ΅ΡΡΡ. ΠΠ»ΡΡ Π΅Π»Π΅ Π·Π°ΠΌΠ΅ΡΠ½ΠΎ ΠΏΠΎΠ΄ΡΠ²Π΅ΡΠΈΠ²Π°Π΅ΡΡΡ ΡΠ΅ΠΊΠ±ΠΎΠΊΡ.
Π§ΡΠΎ ΡΡΡ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΊΠ°Π·Π°ΡΡ? ΠΠΈΠΊΠ°ΠΊΠΎΠΉ ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ, ΠΊΡΡΠ° ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ½ΡΡ ΠΎΡΠΈΠ±ΠΎΠΊ ΠΈΒ ΠΎΡΡΡΡΡΡΠ²ΠΈΠ΅ ΠΊΡΡΡΠΎΡΠ° Π½Π°Β ΠΊΠ½ΠΎΠΏΠΊΠ΅. ΠΡΠ²ΠΎΠ΄Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ°ΠΌΠΈ.
ΠΠΎΠΎΠ±ΡΠ΅, ΠΎΡΠ΅Π½Ρ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎ Ρ ΠΎΠ΄ΠΈΡΡ ΠΏΠΎΒ ΡΠ°Π·Π½ΡΠΌ ΡΠ΅ΡΠ²ΠΈΡΠ°ΠΌ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΉ ΠΈΒ ΠΏΠΎΠ΄ΠΌΠ΅ΡΠ°ΡΡ ΠΏΠΎΠ΄ΠΎΠ±Π½ΡΠ΅ ΠΌΠΎΠΌΠ΅Π½ΡΡΒ β Π½ΠΈΠΊΡΠΎ Π½Π΅Β Π±Π΅Π·Π³ΡΠ΅ΡΠ΅Π½ ΠΈΒ Π²ΡΠ΅Π³Π΄Π° ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΉΡΠΈ ΠΊΒ ΡΠ΅ΠΌΡ ΠΏΡΠΈΠ΄ΡΠ°ΡΡΡΡ, Π½ΠΎ, Π²Β ΠΊΠΎΠ½Π΅ΡΠ½ΠΎΠΌ ΡΡΡΡΠ΅, Π΅ΡΠ»ΠΈ Π²ΡΡ Π²Π½ΠΈΠΌΠ°ΡΠ΅Π»ΡΠ½ΠΎ Π°Π½Π°Π»ΠΈΠ·ΠΈΡΠΎΠ²Π°ΡΡ, ΡΠΎΒ ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ ΡΡΠ½ΠΎ ΠΊΠ°ΠΊΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π΄Π»Ρ ΡΠ΅Π³ΠΎ ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½ ΠΈΒ Π½ΡΠΆΠ½ΠΎΒ Π»ΠΈ ΡΡΠΎ-ΡΠΎ ΡΒ Π½ΠΈΠΌ Π΄Π΅Π»Π°ΡΡ ΠΏΠΎΒ Ρ ΠΎΠ²Π΅ΡΡ.
Β«ΠΒ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ Π½Π°ΠΏΠΈΡΠ°Π½ΠΎβ¦Β»
SelenIT ΠΏΡΠΈΠ²ΠΎΠ΄ΠΈΡ ΡΠ°ΠΊΠΎΠΉ Π°ΡΠ³ΡΠΌΠ΅Π½Ρ, ΡΡΠΎ Π²Β ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡΡ CSS2.1 ΠΈΒ CSS3 Basic UI ΡΠΊΠ°Π·Π°Π½ΠΎ: Β«The cursor isΒ aΒ pointer that indicates aΒ linkΒ». ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, ΠΎΠ½Β ΡΡΡΠ»Π°Π΅ΡΡΡΒ Π½Π° ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΠ΅ ΠΠ΅ΡΠ°ΡΠ° Π’Π°Π»ΡΠ±ΠΎ, Π²Β ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΎΠ½Β ΠΎΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ Π²Β ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈΠ·Β ΡΠ΅ΡΡΠΎΠ² ΠΊΒ CSS 2.1. ΠΠ΄Π½Π°ΠΊΠΎ, Π²ΡΡΠ΄Β Π»ΠΈ ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎΠ΅ ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΊΠ°ΠΊ-Π»ΠΈΠ±ΠΎ ΡΡΠ°ΠΊΡΠΎΠ²Π°ΡΡ Π²Β ΠΏΠΎΠ»ΡΠ·Ρ ΠΎΡΡΡΡΡΡΠ²ΠΈΡ ΠΊΡΡΡΠΎΡΠ° ΡΒ ΠΊΠ½ΠΎΠΏΠΎΠΊ. ΠΠΎΠ½ΡΠ΅ΠΊΡΡ ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΡΒ β ΡΠ΅ΡΡΡ ΠΊΒ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡΠΌ, ΠΈΒ Π΅ΡΠ»ΠΈ Π²Β ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ Π½Π°ΠΏΠΈΡΠ°Π½ΠΎ ΠΎΒ ΡΠΎΠΌ, ΡΡΠΎ Β«ΠΊΡΡΡΠΎΡ-ΠΏΠΎΠΈΠ½ΡΠ΅Ρ ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ Π½Π°Β ΡΡΡΠ»ΠΊΡΒ», ΡΠΎΒ ΡΡΠΎ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΈΒ Π²Β ΡΠ΅ΡΡΠ°Ρ Π·Π½Π°ΡΠΈΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΡΡΠΎ.
ΠΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠ΅ 2018-10-16: ΠΠΎΡΠ»Π΅ Π΄ΠΎΠ»Π³ΠΎΠΉ Π±ΠΈΡΠ²Ρ Π² ΠΈΡΡΡΡ CSSWG, Ρ Π½Π°Ρ ΠΏΠΎΠ»ΡΡΠΈΠ»ΠΎΡΡ ΠΏΡΠΎΡΠΎΠ»ΠΊΠ½ΡΡΡ Π±ΠΎΠ»Π΅Π΅ ΠΊΠΎΡΡΠ΅ΠΊΡΠ½ΡΡ ΡΠΎΡΠΌΡΠ»ΠΈΡΠΎΠ²ΠΊΡ Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ Π΄Π΅Π»Π°!
ΠΒ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ Π½Π΅Β ΡΠΊΠ°Π·Π°Π½ΠΎ, ΡΡΠΎ ΡΡΠΎΡ ΠΊΡΡΡΠΎΡ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ Π΄Π»Ρ ΡΠ΅Π³ΠΎ-Π»ΠΈΠ±ΠΎ Π΅ΡΡ. Π£ΠΊΠ°Π·Π°Π½ΠΎ, ΡΠΊΠΎΡΠ΅Π΅, Π΅Π³ΠΎ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΠΏΠΎΒ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. ΠΠ°Β ΠΌΠ΅ΡΡΠ΅ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ² ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΉ ΡΒ Π±Ρ ΠΈΠ·ΠΌΠ΅Π½ΠΈΠ» ΡΡΠΎΡ ΠΌΠΎΠΌΠ΅Π½Ρ Π½Π° Β«The cursor isΒ aΒ pointer that indicates anΒ element that can beΒ clickedΒ» (ΠΏΠΎΒ Π°Π½Π°Π»ΠΎΠ³ΠΈΠΈ ΡΒ ΡΠ΅ΠΌ, ΡΡΠΎ ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π»ΠΎΡΡ Π²Β ΡΠ΅ΡΡΠ΅) ΠΈΠ»ΠΈ Π°Π½Π°Π»ΠΎΠ³ΠΈΡΠ½ΠΎΠ΅, Π±ΠΎΠ»Π΅Π΅ ΠΎΠ±ΡΠ΅Π΅, Π²ΡΡΠΊΠ°Π·ΡΠ²Π°Π½ΠΈΠ΅.
ΠΡΠΎ ΠΌΠ΅ΡΡΠΎ Π²Β ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ ΡΠ°ΠΊ ΠΈΒ ΡΡΠ½Π΅ΡΡΡ ΠΊΠ°ΠΊ ΠΌΠΈΠ½ΠΈΠΌΡΠΌ ΡΒ 1997 Π³ΠΎΠ΄Π°, Π½ΠΎΒ Π²Π΅Π± ΡΒ ΡΠΎΠ³ΠΎ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ ΡΠΈΠ»ΡΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΠ»ΡΡ ΠΈΒ ΡΠΆΠ΅ Π½Π΅Π»ΡΠ·Ρ Π³ΠΎΠ²ΠΎΡΠΈΡΡ ΠΎΒ ΡΠΎΠΌ, ΡΡΠΎ Β«ΠΊΡΡΡΠΎΡ-ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ Π½Π°Β ΡΡΡΠ»ΠΊΡΒ», ΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ Π΅Π³ΠΎ ΡΠΆΠ΅ ΠΎΡΠ΅Π½Ρ ΡΠ°ΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ ΠΈΒ Π΄Π»Ρ ΠΌΠ½ΠΎΠ³ΠΈΡ Π΄ΡΡΠ³ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ².
Β«ΠΠ΅ΡΡΠ°Π½ΠΈΠ΅Β»
ΠΠ½Π΅ ΡΡΡ ΠΏΠΎΠ΄ΡΠΊΠ°Π·Π°Π»ΠΈ Π΅ΡΡ ΠΎΠ΄ΠΈΠ½ Π°ΡΠ³ΡΠΌΠ΅Π½Ρ: Π΅ΡΠ»ΠΈ Π½Π°Β ΡΡΡΠ°Π½ΠΈΡΠ΅ ΠΌΠ½ΠΎΠ³ΠΎ Π°ΠΊΡΠΈΠ²Π½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², ΡΠΎΒ ΠΏΡΠΈ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡ Π±ΡΠ΄Π΅Ρ ΠΏΠΎΡΡΠΎΡΠ½Π½ΠΎ Β«ΠΌΠ΅ΡΡΠ°ΡΡΒ», ΠΌΠ΅Π½ΡΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ ΡΒ ΠΎΠ±ΡΡΠ½ΠΎΠ³ΠΎ Π½Π°Β ΠΏΠΎΠΈΠ½ΡΠ΅Ρ.
ΠΠΎΒ ΡΠ°ΠΊΠΎΠΉ Π°ΡΠ³ΡΠΌΠ΅Π½ΡΒ β Π½Π΅Β ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ° ΠΊΡΡΡΠΎΡΠ° Π½Π°Β Π°ΠΊΡΠΈΠ²Π½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°Ρ . Β«ΠΠ΅ΡΡΠ°Π½ΠΈΠ΅Β» ΠΊΡΡΡΠΎΡΠ° Π±ΡΠ΄Π΅Ρ Π²ΡΠ΅Π³ΠΎ Π»ΠΈΡΡ ΡΠΈΠΌΠΏΡΠΎΠΌΠΎΠΌ, Π°Β ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌΠΈ:
ΠΠΊΡΠΈΠ²Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Ρ Π½Π΅Β Π²ΠΏΠ»ΠΎΡΠ½ΡΡ Π΄ΡΡΠ³ ΠΊΒ Π΄ΡΡΠ³Ρ. ΠΒ ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅, Π²ΠΎ-ΠΏΠ΅ΡΠ²ΡΡ , ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΠΌ Π±ΡΠ΄Π΅Ρ ΡΠ»ΠΎΠΆΠ½Π΅Π΅ ΠΏΠΎΠΏΠ°ΡΡΡ ΠΏΠΎΒ Π½ΡΠΆΠ½ΠΎΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, Π²ΠΎ-Π²ΡΠΎΡΡΡ , Β«ΠΌΠ΅ΡΡΠ°Π½ΠΈΠ΅Β», ΡΠΊΠΎΡΠ΅Π΅ Π²ΡΠ΅Π³ΠΎ, Π±ΡΠ΄Π΅Ρ ΠΏΡΠΎΡΠ²Π»ΡΡΡΡΡ Π½Π΅Β ΡΠΎΠ»ΡΠΊΠΎ Π²Β ΡΠΌΠ΅Π½Π΅ ΠΊΡΡΡΠΎΡΠ°, Π½ΠΎΒ ΠΈΒ Π²Β ΡΠΌΠ΅Π½Π΅ ΡΠΎΠ½Π°, ΡΠ΅ΠΊΡΡΠ°, ΠΈΠ»ΠΈ ΡΠ΅Π³ΠΎ-ΡΠΎ Π΅ΡΡ. ΠΠΎ-Ρ ΠΎΡΠΎΡΠ΅ΠΌΡ, Π²ΡΠ΅ ΠΎΠ΄Π½ΠΎΡΠΎΠ΄Π½ΡΠ΅ Π°ΠΊΡΠΈΠ²Π½ΡΠ΅ ΠΎΠ±Π»Π°ΡΡΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π΄ΠΎΠ»ΠΆΠ½Ρ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡΡ ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ Π±Π»ΠΈΠΆΠ΅ Π΄ΡΡΠ³ ΠΊΒ Π΄ΡΡΠ³Ρ.
ΠΡΡΠ³Π°Ρ, Π±ΠΎΠ»Π΅Π΅ ΡΠ΅Π΄ΠΊΠ°Ρ, ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ°Β β Π·Π°Ρ Π»Π°ΠΌΠ»ΡΠ½Π½ΠΎΡΡΡ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ°. ΠΡΠ»ΠΈ ΡΒ Π²Π°Ρ Π²ΡΡ ΡΡΡΠ°Π½ΠΈΡΠ° ΡΡΡΠΊΠ°Π½Π° Π²ΡΠ΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΡΠΌΠΈ Π°ΠΊΡΠΈΠ²Π½ΡΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ, ΡΠΎΒ ΡΡΠΎ Π·Π½Π°ΡΠΈΡ, ΡΡΠΎ ΠΏΠΎΡΠ° Π·Π°Π΄ΡΠΌΠ°ΡΡΡΡ Π²ΡΠ΅Β Π»ΠΈ ΠΎΠ½ΠΈ ΡΡΡ Π½ΡΠΆΠ½Ρ ΠΏΡΡΠΌΠΎ ΡΠ΅ΠΉΡΠ°Ρ, ΠΈΒ Π½Π΅Β ΡΡΠΎΠΈΡΒ Π»ΠΈ ΡΡΠΎ-ΡΠΎ ΡΠΏΡΠΎΡΡΠΈΡΡ ΠΈΠ»ΠΈ ΡΠΏΠΎΡΡΠ΄ΠΎΡΠΈΡΡ.
ΠΡΠΎΠ³ΠΎ
ΠΡΠ»ΠΈ ΡΠ°ΡΡΠΌΠ°ΡΡΠΈΠ²Π°ΡΡ ΠΈΠ΄Π΅Π°Π»ΡΠ½ΡΡ ΡΠΈΡΡΠ°ΡΠΈΡ, ΡΠΎΒ ΠΊΠ°ΠΆΠ΄ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΊΠ°ΠΊ-ΡΠΎ ΠΌΠ΅Π½ΡΡΡΡΡ ΠΏΠΎΒ Ρ ΠΎΠ²Π΅ΡΡ, ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΡΠ²Π°Ρ, ΡΡΠΎ ΡΒ Π½ΠΈΠΌ ΠΌΠΎΠΆΠ½ΠΎ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΎΠ²Π°ΡΡ. ΠΠΎΒ Π΄Π°ΠΆΠ΅ Π²Β ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ Π½ΡΠΆΠ½ΠΎ ΠΌΠ΅Π½ΡΡΡ ΠΏΠΎΒ Ρ ΠΎΠ²Π΅ΡΡ ΠΈΒ ΠΊΡΡΡΠΎΡΒ β ΠΈΠ½Π°ΡΠ΅ ΠΈΠ½ΠΎΠ³Π΄Π° ΠΌΠΎΠ³ΡΡ Π²ΠΎΠ·Π½ΠΈΠΊΠ½ΡΡΡ Π½Π΅ΠΎΠ΄Π½ΠΎΠ·Π½Π°ΡΠ½ΠΎΡΡΠΈ Π²Β ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ΅. Π‘ΠΌΠ΅Π½Ρ ΠΊΡΡΡΠΎΡΠ°, ΠΏΡΠΈ ΡΡΠΎΠΌ, ΡΠ°ΡΡΠΎ Π±ΡΠ΄Π΅Ρ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ Π΄Π»Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ Ρ ΠΎΡΡ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ, Π½ΠΎΒ ΡΠ»ΡΡΡΠΈΡΡ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΒ β Π΅ΡΠ»ΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ Π½Π°ΡΠΈΡΠΎΠ²Π°Π» ΠΊΠ°ΠΊΠΎΠΉ-ΡΠΎ ΠΊΠΎΠ½ΡΡΠΎΠ», ΠΊΠΎΡΠΎΡΡΠΉ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ Π½Π΅Β ΠΎΡΠΎΠ±ΠΎ ΠΊΠ»ΠΈΠΊΠ°Π±Π΅Π»ΡΠ½ΡΠΌ, ΡΠΎΒ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΡΠΌΠ΅Π½Ρ ΠΊΡΡΡΠΎΡΠ° Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΡΡΠΎΡ ΠΌΠΎΠΌΠ΅Π½Ρ ΠΈΡΠΏΡΠ°Π²ΠΈΡ (Π½ΠΎΒ Π»ΡΡΡΠ΅ ΠΏΠΎΡΠ»Π΅ ΡΡΠΎΠ³ΠΎ Π²ΡΡ ΡΠ°Π²Π½ΠΎ Π½Π°ΠΏΠΈΡΠ°ΡΡ ΠΎΠ±Β ΡΡΠΎΠΉ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ΅ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ΡΠ°ΠΌ, ΡΡΠΎΠ±Ρ ΠΎΠ½ΠΈΒ Π½Π°ΡΠΈΡΠΎΠ²Π°Π» Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ½ΡΡΠ½ΠΎΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅).
ΠΡΒ Π°Β ΠΊΠ°ΠΊΠΈΡ -ΡΠΎ ΠΊΡΠΈΡΠΈΡΠ½ΡΡ Π½Π΅Π΄ΠΎΡΡΠ°ΡΠΊΠΎΠ² ΡΒ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ ΠΊΡΡΡΠΎΡΠ° ΠΏΠΎΒ Ρ ΠΎΠ²Π΅ΡΡ ΠΏΡΠΎΡΡΠΎ Π½Π΅ΡΒ β Π΄Π°ΠΆΠ΅ Π΅ΡΠ»ΠΈ ΠΊΠ°ΠΊΠΈΡ -ΡΠΎ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ ΡΡΠΎ ΠΌΠΎΠΆΠ΅Ρ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΡΠΌΡΡΠ°ΡΡΒ β Π±Γ³Π»ΡΡΠ΅ΠΌΡ ΡΠΈΡΠ»Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ ΡΡΠΎ ΠΎΠ±Π»Π΅Π³ΡΠΈΡ ΠΆΠΈΠ·Π½Ρ.
ΠΠ°, ΠΊΠΎΠ½Π΅ΡΠ½ΠΎ, Π΅ΡΠ»ΠΈ ΡΒ ΠΊΠΎΠ³ΠΎ-ΡΠΎ Π΅ΡΡΡ ΡΠ΅ΠΌ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΡ ΠΈΠ»ΠΈ ΠΎΠΏΡΠΎΠ²Π΅ΡΠ³Π½ΡΡΡ ΡΠ°ΡΡΡ Π²ΡΡΠΊΠ°Π·Π°Π½Π½ΡΡ ΠΌΠ½ΠΎΠΉ ΡΡΠ²Π΅ΡΠΆΠ΄Π΅Π½ΠΈΠΉΒ β ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΡΠ΅ ΡΠΈΡΡΡ, Π·Π°ΠΌΠ΅ΡΡ ΠΈΒ Π°ΡΠ³ΡΠΌΠ΅Π½ΡΡ ΠΏΡΠΈΠ²Π΅ΡΡΡΠ²ΡΡΡΡΡ. ΠΡΠ΅ ΠΌΠ΅ΡΡΠ°, Π³Π΄Π΅ ΡΒ ΠΏΠΈΡΡ ΠΎΒ ΡΠΎΠΌ, ΡΡΠΎ Β«ΠΊΠΎΠΌΡ-ΡΠΎ ΡΡΠΎ ΠΎΠ±Π»Π΅Π³ΡΠΈΡ ΠΆΠΈΠ·Π½Ρ» β ΡΠΈΡΡΠΎ ΡΠΌΠΎΠ·ΡΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΠΈΒ Π½Π΅Β ΠΏΠΎΠ΄ΡΠ²Π΅ΠΆΠ΄ΡΠ½Π½ΡΠ΅ ΡΠΈΡΡΠ°ΠΌΠΈ. ΠΠΎΒ Π²ΡΡ Π³ΠΎΠ²ΠΎΡΠΈΡ Π·Π°Β ΡΠΎ, ΡΡΠΎ ΡΠ°ΠΊ ΠΎΠ½ΠΎ ΠΈΒ Π΅ΡΡΡΒ β ΡΠ°ΠΊ ΡΡΠΎ ΡΠΏΠΎΡΠΈΡΡ ΡΒ ΡΡΠΈΠΌ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΠΎΡΠ»Π΅ A/B-ΡΠ΅ΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΈΒ ΡΡΠ°Π²Π½Π΅Π½ΠΈΡ Π΅Π³ΠΎ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠΎΠ².
Π‘ΡΡΠ»ΠΊΠΈ
ΠΠ°ΠΌΠ΅ΡΠΊΠ° ΠΡΠΈΡΠ° ΠΠΎΠΉΠ΅ΡΠ° ΠΎΒ ΡΠΎΠΌ, ΠΊΠ°ΠΊ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΡΡΠ»ΠΊΠΈ ΠΊΠ»ΠΈΠΊΠ°Π±Π΅Π»ΡΠ½ΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ.
ΠΒ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΡΡ ΠΏΡΠΈΠ²ΠΎΠ΄ΡΡΡΡ Π²ΡΡ ΡΠ΅Β ΠΆΠ΅ Π΄ΠΎΠ²ΠΎΠ΄Ρ ΠΏΡΠΎ ΠΏΡΠΈΠ²ΡΡΠΊΠΈ ΠΈΒ ΠΎΠΏΠ΅ΡΠ°ΡΠΈΠΎΠ½Π½ΡΠ΅ ΡΠΈΡΡΠ΅ΠΌΡ, ΠΏΠ»ΡΡ ΠΊΠΎΠ½ΡΠ΅ΡΠ²Π°ΡΠΈΠ²Π½ΡΠ΅, Π½Π΅Β ΠΏΠΎΠ΄ΠΊΡΠ΅ΠΏΠ»ΡΠ½Π½ΡΠ΅ Π°ΡΠ³ΡΠΌΠ΅Π½ΡΠ°ΠΌΠΈ Π²Π·Π³Π»ΡΠ΄Ρ Π½Π°Β ΡΠΎ, ΡΡΠΎ ΡΠΎΠ»ΡΠΊΠΎ ΡΡΡΠ»ΠΊΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΈΠΌΠ΅ΡΡ ΠΊΡΡΡΠΎΡ-ΠΏΠΎΠΈΠ½ΡΠ΅Ρ.
ΠΠ°ΠΌΠ΅ΡΠΊΠ° ΠΠΌΠΈΡΡΠΈΡ Π€Π°Π΄Π΅Π΅Π²Π° ΠΏΡΠΎ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠ΅ ΠΊΡΡΡΠΎΡΠ°
ΠΒ ΡΡΠΎΠΉ Π·Π°ΠΌΠ΅ΡΠΊΠ΅ ΠΠΌΠΈΡΡΠΈΠΉ ΠΏΡΠΈΡ ΠΎΠ΄ΠΈΡ ΠΊΒ Π·Π°ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ Β«ΠΡΠ»ΠΈ ΡΠΈΠΏ ΠΊΡΡΡΠΎΡΠ° Π½Π΅Π²Π΅ΡΠ½ΡΠΉ, ΡΠΎΒ Π½ΡΠΆΠ½ΠΎ Π·Π°Π΄Π°Π²Π°ΡΡ Π΅Π³ΠΎ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ CSS-ΡΠ²ΠΎΠΉΡΡΠ²Π°
cursor
Β», ΠΏΡΠΈΠ²ΠΎΠ΄Ρ Π²Β ΠΏΡΠΈΠΌΠ΅Ρ ΠΊΠ°ΡΡΠΎΠΌΠ½ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΈΒ ΠΏΠ»Π΅ΠΉΡΡ ΠΎΠ»Π΄Π΅ΡΡ Π΄Π»Ρ ΠΈΠ½ΠΏΡΡΠΎΠ².Π‘Π»Π°ΠΉΠ΄Ρ Π΄ΠΎΠΊΠ»Π°Π΄Π° ΠΠ°Π΄ΠΈΠΌΠ° ΠΠ°ΠΊΠ΅Π΅Π²Π° Β«ΠΠΌΠΈ ΡΡΠ΄Π°!Β»
ΠΠΎΠΊΠ»Π°Π΄ Π±ΠΎΠ»ΡΡΠ΅ ΠΎΒ ΡΠΎΠΌ, ΡΡΠΎ ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π΄ΠΎΠ»ΠΆΠ½Π° ΠΎΡΡΠ°ΠΆΠ°ΡΡΡΡ Π²Β ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΡ html-ΡΠ΅Π³Π°Ρ , Π½ΠΎΒ Π²Β ΠΎΠ΄Π½ΠΎΠΌ ΠΌΠ΅ΡΡΠ΅ ΠΠ°Π΄ΠΈΠΌ ΠΏΠΈΡΠ΅Ρ ΠΏΡΠΎ ΠΊΠ½ΠΎΠΏΠΊΡ: Β«ΠΠ΅Π»Π°ΡΡ Π»Π°ΠΏΡ
cursor:pointer
ΡΠΎΠ²ΡΠ΅ΠΌ Π½Π΅Β Π½ΡΠΆΠ½ΠΎΒ» ΠΈΒ Π½Π΅Β ΠΏΡΠΈΠ²ΠΎΠ΄ΠΈΡ Π½ΠΈΠΊΠ°ΠΊΠΈΡ Π°ΡΠ³ΡΠΌΠ΅Π½ΡΠΎΠ² Π²Β ΠΏΠΎΠ»ΡΠ·Ρ ΡΡΠΎΠ³ΠΎ ΡΡΠ²Π΅ΡΠΆΠ΄Π΅Π½ΠΈΡ. ΠΠ°Π΄Π΅ΡΡΡ, ΠΏΡΠΎΡΠΈΡΠ°Π² ΡΡΡ ΡΡΠ°ΡΡΡ, ΠΠ°Π΄ΠΈΠΌ ΠΈΠ»ΠΈ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ ΡΠ²ΠΎΠΉ Π²Π·Π³Π»ΡΠ΄ ΠΏΠΎΒ ΡΡΠΎΠΌΡ Π²ΠΎΠΏΡΠΎΡΡ, ΠΈΠ»ΠΈ Π½Π°ΠΏΠΈΡΠ΅Ρ Π°ΡΠ³ΡΠΌΠ΅Π½ΡΡ Π²Β ΠΏΠΎΠ»ΡΠ·Ρ ΡΠ²ΠΎΠ΅Π³ΠΎ Π²ΡΡΠΊΠ°Π·ΡΠ²Π°Π½ΠΈΡ.
ΠΠΏΡΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½ΠΎ
Ρ ΠΌΠ΅ΡΠΊΠ°ΠΌΠΈ: #Practical #Design #Accessibility
CSS: ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»Ρ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ°
ΠΡΠΈΠΌΠ΅Ρ
ΠΡΠ±ΠΎΡ ΠΈ ΡΡΠΈΠ»Ρ ΡΡΡΠ»ΠΊΠΈ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° Π½Π΅Π΅ ΠΊΡΡΡΠΎΡΠ°:
Π°: ΠΏΠ°ΡΠ΅Π½ΠΈΠ΅
{
ΡΠ²Π΅Ρ ΡΠΎΠ½Π°: ΠΆΠ΅Π»ΡΡΠΉ;
}
ΠΠΎΠΏΡΠΎΠ±ΡΠΉ ΡΠ°ΠΌ »
ΠΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΡ «ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ ΡΠ°ΠΌΠΈ» Π½ΠΈΠΆΠ΅.
ΠΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅
Π‘Π΅Π»Π΅ΠΊΡΠΎΡ : hover
ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ Π²ΡΠ±ΠΎΡΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° Π½ΠΈΡ
ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ ΠΌΡΡΠΈ.
Π‘ΠΎΠ²Π΅Ρ: Π‘Π΅Π»Π΅ΠΊΡΠΎΡ: hover ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π»Ρ Π²ΡΠ΅Ρ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², Π° Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ
ΠΏΠΎ ΡΡΡΠ»ΠΊΠ°ΠΌ.
Π‘ΠΎΠ²Π΅Ρ: ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΠ΅Π»Π΅ΠΊΡΠΎΡ: link Π΄Π»Ρ ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΠΈ ΡΡΡΠ»ΠΎΠΊ Π½Π°
Π½Π΅ΠΏΠΎΡΠ΅ΡΠ΅Π½Π½ΡΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ, ΡΠ΅Π»Π΅ΠΊΡΠΎΡ: ΠΏΠΎΡΠ΅ΡΠ΅Π½Π½ΡΠΉ Π΄Π»Ρ ΡΡΠΈΠ»Ρ
ΡΡΡΠ»ΠΊΠΈ Π½Π° ΠΏΠΎΡΠ΅ΡΠ΅Π½Π½ΡΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ, ΠΈ
: Π°ΠΊΡΠΈΠ²Π½ΡΠΉ ΡΠ΅Π»Π΅ΠΊΡΠΎΡ Π΄Π»Ρ ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΠΈ Π°ΠΊΡΠΈΠ²Π½ΠΎΠΉ ΡΡΡΠ»ΠΊΠΈ.
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅: : hover ΠΠΠΠΠΠ ΡΡΠΎΡΡΡ ΠΏΠΎΡΠ»Π΅: link ΠΈ: loaded (Π΅ΡΠ»ΠΈ ΠΎΠ½ΠΈ ΠΏΡΠΈΡΡΡΡΡΠ²ΡΡΡ) Π² ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠΈ CSS, ΡΡΠΎΠ±Ρ Π±ΡΡΡ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΡΠΌ!
ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° Π±ΡΠ°ΡΠ·Π΅ΡΠ°
Π§ΠΈΡΠ»Π° Π² ΡΠ°Π±Π»ΠΈΡΠ΅ ΡΠΊΠ°Π·ΡΠ²Π°ΡΡ ΠΏΠ΅ΡΠ²ΡΡ Π²Π΅ΡΡΠΈΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°, ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ ΡΠ΅Π»Π΅ΠΊΡΠΎΡ.
Π‘Π΅Π»Π΅ΠΊΡΠΎΡ | |||||
---|---|---|---|---|---|
: ΠΏΠ°ΡΠ΅Π½ΠΈΠ΅ | 4,0 | 7,0 | 2,0 | 3,1 | 9,6 |
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅: Π IE Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±ΡΡΡ ΠΎΠ±ΡΡΠ²Π»Π΅Π½
ΡΡΠΎΠ±Ρ ΡΠ΅Π»Π΅ΠΊΡΠΎΡ: hover ΡΠ°Π±ΠΎΡΠ°Π» Ρ Π΄ΡΡΠ³ΠΈΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ, ΠΊΡΠΎΠΌΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° .
Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ CSS
: hover {
css Π΄Π΅ΠΊΠ»Π°ΡΠ°ΡΠΈΠΈ ;
}
ΠΠ΅ΠΌΠΎ
ΠΡΡΠ³ΠΈΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΡ
ΠΡΠΈΠΌΠ΅Ρ
ΠΡΠ±ΠΎΡ ΠΈ ΡΡΠΈΠ»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°
,
ΠΈ
ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° Π½Π΅Π³ΠΎ ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ ΠΌΡΡΠΈ:
p: hover, h2: hover, a: hover {
background-color: yellow;
}
ΠΠΎΠΏΡΠΎΠ±ΡΠΉ ΡΠ°ΠΌ »
ΠΡΠΈΠΌΠ΅Ρ
ΠΡΠ±ΠΎΡ ΠΈ ΡΡΠΈΠ»Ρ Π½Π΅ΠΏΠΎΡΠ΅ΡΠ΅Π½Π½ΡΡ , ΠΏΠΎΡΠ΅ΡΠ΅Π½Π½ΡΡ , Π½Π°Π²Π΅Π΄Π΅Π½Π½ΡΡ ΠΈ Π°ΠΊΡΠΈΠ²Π½ΡΡ ΡΡΡΠ»ΠΎΠΊ:
/ * Π½Π΅ΠΏΠΎΡΠ΅ΡΠ΅Π½Π½Π°Ρ ΡΡΡΠ»ΠΊΠ° * /
a: ΡΡΡΠ»ΠΊΠ° {
ΡΠ²Π΅Ρ: Π·Π΅Π»Π΅Π½ΡΠΉ;
}
/ * ΠΏΠΎΡΠ΅ΡΠ΅Π½Π½Π°Ρ ΡΡΡΠ»ΠΊΠ° * /
a: ΠΏΠΎΡΠ΅ΡΠΈΠ» {
ΡΠ²Π΅Ρ: Π·Π΅Π»Π΅Π½ΡΠΉ;
}
/ * Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΊΡΡΡΠΎΡΠ° ΠΌΡΡΠΈ Π½Π° ΡΡΡΠ»ΠΊΡ * /
a: Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠ΅ {
ΡΠ²Π΅Ρ: ΠΊΡΠ°ΡΠ½ΡΠΉ;
}
/ * Π²ΡΠ±ΡΠ°Π½Π½Π°Ρ ΡΡΡΠ»ΠΊΠ° * /
Π°: Π°ΠΊΡΠΈΠ²Π½ΡΠΉ {
ΡΠ²Π΅Ρ: ΠΆΠ΅Π»ΡΡΠΉ;
}
ΠΠΎΠΏΡΠΎΠ±ΡΠΉ ΡΠ°ΠΌ »
ΠΡΠΈΠΌΠ΅Ρ
Π‘ΡΠΈΠ»ΠΈ ΡΡΡΠ»ΠΎΠΊ Ρ ΡΠ°Π·Π½ΡΠΌΠΈ ΡΡΠΈΠ»ΡΠΌΠΈ:
Π°.ex1: hover, a.ex1: active {
ΡΠ²Π΅Ρ: ΠΊΡΠ°ΡΠ½ΡΠΉ;
}
a.ex2: hover, a.ex2: active {
font-size: 150%;
}
ΠΠΎΠΏΡΠΎΠ±ΡΠΉ ΡΠ°ΠΌ »
ΠΡΠΈΠΌΠ΅Ρ
ΠΠ°Π²Π΅Π΄ΠΈΡΠ΅ ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ ΠΌΡΡΠΈ Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ , ΡΡΠΎΠ±Ρ ΠΎΡΠΎΠ±ΡΠ°Π·ΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
div {
Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: Π½Π΅Ρ;
}
span: hover + div {
display: block;
}
ΠΠΎΠΏΡΠΎΠ±ΡΠΉ ΡΠ°ΠΌ »
ΠΡΠΈΠΌΠ΅Ρ
ΠΠΎΠΊΠ°Π·Π°ΡΡ ΠΈ ΡΠΊΡΡΡΡ ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠ΅Π΅ΡΡ ΠΌΠ΅Π½Ρ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° ΠΌΡΡΠΈ:
ul {
Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠΉ;
ΠΌΠ°ΡΠΆΠ°: 0;
ΠΎΡΡΡΡΠΏ: 0;
}
ul li {display: inline-block;}
ul li: hover {background: # 555;}
ul li: hover ul {display: block;}
ul li ul {
ΠΏΠΎΠ·ΠΈΡΠΈΡ: Π°Π±ΡΠΎΠ»ΡΡΠ½Π°Ρ;
ΡΠΈΡΠΈΠ½Π°: 200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: Π½Π΅Ρ;
}
ul li ul li {
ΡΠΏΡΠ°Π²ΠΎΡΠ½Π°Ρ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ: # 555;
Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: Π±Π»ΠΎΠΊ;
}
ul li ul li a {display: block! Important;}
ul li ul li: hover {background: # 666;}
ΠΠΎΠΏΡΠΎΠ±ΡΠΉ ΡΠ°ΠΌ »
Π‘Π²ΡΠ·Π°Π½Π½ΡΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ
Π£ΡΠ΅Π±Π½ΠΈΠΊ
CSS: ΡΡΡΠ»ΠΊΠΈ CSS
Π£ΡΠ΅Π±Π½ΠΎΠ΅ ΠΏΠΎΡΠΎΠ±ΠΈΠ΅ ΠΏΠΎ CSS: ΠΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡΡ CSS
ΠΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ²Π΅Ρ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ
Π‘ΠΏΠ°ΡΠΈΠ±ΠΎ Π·Π° ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΡΠ΅ΠΊΠΎΠ²!
ΠΡΠΎΡ CSS Π·Π°ΡΡΠ°Π²ΠΈΡ ΡΡΡΠ»ΠΊΠΈ ΠΌΠ΅Π½Ρ ΠΌΠ΅Π½ΡΡΡ ΡΠ²Π΅Ρ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° Π½ΠΈΡ :
.ΠΏΠ΅ΡΠ²ΠΈΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ ul a: hover,
.menu-primary ul a: Π°ΠΊΡΠΈΠ²Π½ΡΠΉ,
.menu-primary ul a: focus {
ΡΠ²Π΅Ρ ΡΠΈΠ½ΠΈΠΉ;
}
Π Π΅ΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅, ΡΡΠΎΠ±Ρ ΠΎΠ½ΠΈ ΠΎΡΡΠ°Π²Π°Π»ΠΈΡΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠ³ΠΎ ΡΠ²Π΅ΡΠ° ΠΏΠΎΡΠ»Π΅ ΠΏΠΎΡΠ΅ΡΠ΅Π½ΠΈΡ, Π²Ρ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΡΠΎΡ CSS:
.menu-primary ul a: visit {
ΡΠ²Π΅Ρ ΡΠΈΠ½ΠΈΠΉ;
}
ΠΠΎΠ»ΡΡΠΎΠ΅ ΡΠΏΠ°ΡΠΈΠ±ΠΎ, Ρ ΠΌΠ΅Π½Ρ Π΅ΡΡΡ Π΅ΡΠ΅ 2 Π½Π΅Π±ΠΎΠ»ΡΡΠΈΡ Π²ΠΎΠΏΡΠΎΡΠ°.
— Π£ ΠΌΠ΅Π½Ρ Π½Π΅Π±ΠΎΠ»ΡΡΠ°Ρ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ°, ΠΊΠΎΠ³Π΄Π° Ρ ΠΌΠ΅Π½ΡΡ ΡΠ²Π΅Ρ ΡΠΎΠ½Π° ΡΠ²ΠΎΠ΅Π³ΠΎ Π²Π΅Π±-ΡΠ°ΠΉΡΠ° Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ»Π΅Π΄ΡΡΡΠ΅Π³ΠΎ ΠΊΠΎΠ΄Π°
ΠΊΡΠ·ΠΎΠ²,
.Π²ΡΠ΄Π΅ΡΠΆΠΊΠ°
.ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΉ,
.menu-primary ul,
#ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΡΠ°ΠΉΡΠ° {
ΡΠΎΠ½: # 000;
}
Π’Π°ΠΊΠΆΠ΅ ΠΌΠ΅Π½ΡΠ΅Ρ ΡΠΎΠ½ ΠΏΠΎΡΡΠΎΠ² Π½Π° Π³Π»Π°Π²Π½ΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅ ΡΠ°ΠΉΡΠ° Π² ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠΉ Π²Π΅ΡΡΠΈΠΈ. ΠΡ Π·Π½Π°Π΅ΡΠ΅, ΠΊΠ°ΠΊ Ρ ΠΌΠΎΠ³Ρ ΡΡΠΎ ΠΈΡΠΏΡΠ°Π²ΠΈΡΡ?
— ΠΡΠΎΡΠΎΠΉ Π²ΠΎΠΏΡΠΎΡ: Ρ Ρ ΠΎΡΠ΅Π» Π±Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ ΠΊΠ°ΠΊ ΡΠΈΠΎΠ»Π΅ΡΠΎΠ²ΡΠΉ ΡΠΈΠ»ΡΡΡ Ρ Π½ΠΈΠ·ΠΊΠΎΠΉ Π½Π΅ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΡΡΡΡ Π½Π° ΠΈΠ·Π±ΡΠ°Π½Π½ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΡ Π½Π° Π³Π»Π°Π²Π½ΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅ (ΠΊΠΎΡΠΎΡΠ°Ρ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Π° ββΠΊΠ°ΠΊ Π°ΡΡ ΠΈΠ² Π±Π»ΠΎΠ³Π°), ΠΈ Ρ Ρ ΠΎΡΡ, ΡΡΠΎΠ±Ρ ΡΠΈΠ»ΡΡΡ ΠΈΡΡΠ΅Π·Π°Π», ΠΊΠΎΠ³Π΄Π° Π²Ρ Π½Π°Π²ΠΎΠ΄ΠΈΡΠ΅ Π½Π° Π½Π΅Π³ΠΎ ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ ΠΌΡΡΠΈ, Ρ Π½Π΅ Π·Π½Π°Ρ, ΡΡΠ½ΠΎ Π»ΠΈ, Ρ Π°-Ρ Π°.
Π ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ?
ΠΠΎΠ»ΡΡΠΎΠ΅ ΡΠΏΠ°ΡΠΈΠ±ΠΎ π
ΠΠΎΡ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½Π½Π°Ρ Π²Π΅ΡΡΠΈΡ ΡΡΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π°, ΠΊΠΎΡΠΎΡΠ°Ρ Π½Π΅ ΠΏΠΎΠ²Π»ΠΈΡΠ΅Ρ Π½Π° ΡΠΎΠ½ ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΠΉ Π½Π° Π³Π»Π°Π²Π½ΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅:
ΠΊΡΠ·ΠΎΠ²,
.ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΉ,
.menu-primary ul,
#ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΡΠ°ΠΉΡΠ° {
ΡΠΎΠ½: # 000;
}
ΠΡΡΠ³Π°Ρ Π½Π°ΡΡΡΠΎΠΉΠΊΠ° Π½Π° ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΠΏΡΠΎΡΡΠ° Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΏΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ:
.featured-image: ΠΏΠΎΡΠ»Π΅ {
ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅: '';
ΠΏΠΎΠ·ΠΈΡΠΈΡ: Π°Π±ΡΠΎΠ»ΡΡΠ½Π°Ρ;
Π²Π΅ΡΡ
: 0;
ΡΠΏΡΠ°Π²Π°: 0;
Π²Π½ΠΈΠ·Ρ: 0;
ΡΠ»Π΅Π²Π°: 0;
ΡΠΎΠ½: ΡΠΈΠΎΠ»Π΅ΡΠΎΠ²ΡΠΉ;
Π½Π΅ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΡΡΡ: 0,5;
ΠΏΠ΅ΡΠ΅Ρ
ΠΎΠ΄: Π½Π΅ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΡΡΡ 0,2 Ρ;
}
.featured-image: hover: after {
Π½Π΅ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΡΡΡ: 0;
}
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π·Π°ΠΌΠ΅Π½ΠΈΡΡ Β«ΡΠΈΠΎΠ»Π΅ΡΠΎΠ²ΡΠΉΒ» Π½Π° Π΄ΡΡΠ³ΠΎΠΉ ΠΎΡΡΠ΅Π½ΠΎΠΊ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ΅ΡΡΠ½Π°Π΄ΡΠ°ΡΠ΅ΡΠΈΡΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π°. ΠΠ΅ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΡΡΡ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Π° ββΠ½Π° 50% (0.5), ΠΈ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½ ΠΎΡ 0,1 Π΄ΠΎ 1, ΡΡΠΎΠ±Ρ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅. ΠΠ°ΠΊΠΎΠ½Π΅Ρ, Ρ Π΄ΠΎΠ±Π°Π²ΠΈΠ» ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄, ΠΊΠΎΡΠΎΡΡΠΉ Π΄Π»ΠΈΡΡΡ 0,2 ΡΠ΅ΠΊΡΠ½Π΄Ρ, ΡΡΠΎΠ±Ρ ΠΎΠ½ Π²ΡΠ³Π»ΡΠ΄Π΅Π» Π±ΠΎΠ»Π΅Π΅ ΠΏΠ»Π°Π²Π½ΡΠΌ, ΠΈ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ 0,2 ΡΠ΅ΠΊΡΠ½Π΄Ρ, ΡΡΠΎΠ±Ρ ΡΠ΄Π΅Π»Π°ΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΠΌΠ΅Π΄Π»Π΅Π½Π½Π΅Π΅ ΠΈΠ»ΠΈ Π΄Π»ΠΈΠ½Π½Π΅Π΅, Π΅ΡΠ»ΠΈ Ρ ΠΎΡΠΈΡΠ΅.
- ΠΡΠΎΡ ΠΎΡΠ²Π΅Ρ Π±ΡΠ» ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ 1 Π³ΠΎΠ΄, 11 ΠΌΠ΅ΡΡΡΠ΅Π² Π½Π°Π·Π°Π΄ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΌ Ben Sibley.
Π‘ΡΠΈΠ»Ρ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ, ΡΠΎΠΊΡΡΠ° ΠΈ Π°ΠΊΡΠΈΠ²Π½ΠΎΠ³ΠΎ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ ΠΏΠΎ-ΡΠ°Π·Π½ΠΎΠΌΡ
16 ΠΎΠΊΡΡΠ±ΡΡ 2019
Π― ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Π» : hover
, : focus
ΠΈ : active
Π³ΠΎΠ΄Π°ΠΌΠΈ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎ.ΠΠ΅ ΠΌΠΎΠ³Ρ Π²ΡΠΏΠΎΠΌΠ½ΠΈΡΡ, ΠΊΠΎΠ³Π΄Π° Ρ Π½Π°ΡΠ°Π»Π° ΡΠ°ΠΊ ΡΠΊΠ»Π°Π΄ΡΠ²Π°ΡΡ. ΠΠΎΡ ΠΊΠΎΠ΄, ΠΊΠΎΡΠΎΡΡΠΉ Ρ Π²ΡΠ΅Π³Π΄Π° ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ:
// ΠΠ΅ Π»ΡΡΡΠΈΠΉ ΠΏΠΎΠ΄Ρ
ΠΎΠ΄. Π― ΠΎΠ±ΡΡΡΠ½Ρ ΠΏΠΎΡΠ΅ΠΌΡ Π² ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅
.selector {
&: Π½Π°Π²Π΅ΡΡΠΈ,
&: ΡΠΎΠΊΡΡ,
&: active {
// Π‘ΡΠΈΠ»ΠΈ Π·Π΄Π΅ΡΡ
}
}
ΠΠΎ ΠΌΠ΅ΡΠ΅ ΡΠΎΠ³ΠΎ ΠΊΠ°ΠΊ Ρ ΡΠ΄Π΅Π»ΡΠ» Π±ΠΎΠ»ΡΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΡ Π΄ΠΎΡΡΡΠΏΠ½ΠΎΡΡΠΈ ΠΊΠ»Π°Π²ΠΈΠ°ΡΡΡΡ (ΠΈ, ΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎ, ΡΠ΄Π΅Π»ΡΠ» Π±ΠΎΠ»ΡΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΡ ΡΠΎΠΊΡΡΠΈΡΠΎΠ²ΠΊΠ΅), Ρ Π½Π°ΡΠ°Π» Π΄ΡΠΌΠ°ΡΡ, ΡΡΠΎ ΠΌΡ Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎ ΠΎΡΠΎΡΠΌΠ»ΡΡΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠ΅, ΡΠΎΠΊΡΡ ΠΈ Π°ΠΊΡΠΈΠ²Π½ΡΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ.
ΠΠ°Π²Π΅Π΄Π΅Π½ΠΈΠ΅, ΡΠΎΠΊΡΡ ΠΈ Π°ΠΊΡΠΈΠ²Π½ΠΎΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΈΠΌΠ΅ΡΡ ΡΠ°Π·Π½ΡΠ΅ ΡΡΠΈΠ»ΠΈ.
ΠΡΠΈΡΠΈΠ½Π° ΠΏΡΠΎΡΡΠ°: ΡΡΠΎ ΡΠ°Π·Π½ΡΠ΅ Π³ΠΎΡΡΠ΄Π°ΡΡΡΠ²Π°!
Π‘Π΅Π³ΠΎΠ΄Π½Ρ Ρ Ρ ΠΎΡΡ ΠΏΠΎΠΊΠ°Π·Π°ΡΡ Π²Π°ΠΌ Π²ΠΎΠ»ΡΠ΅Π±Π½ΡΠΉ ΡΠΏΠΎΡΠΎΠ± Π»Π΅Π³ΠΊΠΎ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°ΡΡ Π²ΡΠ΅ ΡΡΠΈ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ.
ΠΠ°ΡΠ½Π΅ΠΌ Ρ : Π½Π°Π²Π΅Π΄ΠΈΡΠ΅ ΠΊΡΡΡΠΎΡ Π½Π°
.
Π‘ΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΠΉ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ
: hover
ΡΡΠ°Π±Π°ΡΡΠ²Π°Π΅Ρ, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π½Π°Π²ΠΎΠ΄ΠΈΡ ΠΊΡΡΡΠΎΡ ΠΌΡΡΠΈ Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ.
Π‘ΠΎΡΡΠΎΡΠ½ΠΈΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΎΠ±ΡΡΠ½ΠΎ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½Ρ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ΠΌ ΡΠ²Π΅ΡΠ° ΡΠΎΠ½Π°
(ΠΈ / ΠΈΠ»ΠΈ ΡΠ²Π΅ΡΠ°
) . Π Π°Π·Π½ΠΈΡΠ° Π² ΡΠΎΡΡΠΎΡΠ½ΠΈΡΡ
Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½Π° Π±ΡΡΡ ΠΎΡΠ΅Π²ΠΈΠ΄Π½ΠΎΠΉ, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ ΡΠΆΠ΅ Π·Π½Π°ΡΡ, ΡΡΠΎ ΠΎΠ½ΠΈ Π½Π° ΡΡΠΎ-ΡΠΎ ΠΎΡΠΈΠ΅Π½ΡΠΈΡΡΡΡΡΡ.
ΠΊΠ½ΠΎΠΏΠΊΠ° {
ΡΠ²Π΅Ρ ΡΠΎΠ½Π°: #dedede;
}
button: hover {
ΡΠ²Π΅Ρ ΡΠΎΠ½Π°: #aaa;
}
Π‘ΠΎΡΡΠΎΡΠ½ΠΈΡ ΡΠΎΠΊΡΡΠ° ΡΡΠΈΠ»Π΅ΠΉ
: ΡΠΎΠΊΡΡ
Π°ΠΊΡΠΈΠ²ΠΈΡΡΠ΅ΡΡΡ, ΠΊΠΎΠ³Π΄Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠΎΠ»ΡΡΠ°Π΅Ρ ΡΠΎΠΊΡΡ. ΠΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΌΠΎΠ³ΡΡ ΠΏΠΎΠ»ΡΡΠ°ΡΡ ΡΠΎΠΊΡΡ Π΄Π²ΡΠΌΡ ΡΠΏΠΎΡΠΎΠ±Π°ΠΌΠΈ:
- ΠΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ΡΡ Π² ΡΠΎΠΊΡΡΠΈΡΡΠ΅ΠΌΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
- ΠΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ Π½Π°ΠΆΠΈΠΌΠ°ΡΡ Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ, Π½Π° ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΠΎΠΆΠ½ΠΎ ΡΡΠΎΠΊΡΡΠΈΡΠΎΠ²Π°ΡΡΡΡ
Π€ΠΎΠΊΡΡΠΈΡΡΠ΅ΠΌΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ:
- Π‘ΡΡΠ»ΠΊΠΈ (
- ΠΠ½ΠΎΠΏΠΊΠΈ (
- ΠΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠΎΡΠΌΡ (
input
,textarea
ΠΈ Ρ. Π.) - ΠΠ»Π΅ΠΌΠ΅Π½ΡΡ Ρ
tabindex
ΠΠΎΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π²Π°ΠΆΠ½ΡΡ ΠΌΠΎΠΌΠ΅Π½ΡΠΎΠ², Π½Π° ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΎΠ±ΡΠ°ΡΠΈΡΡ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅:
- ΠΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ Π½Π΅ ΠΌΠΎΠ³ΡΡ ΠΏΠ΅ΡΠ΅ΠΉΡΠΈ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Ρ
tabindex = "- 1"
, Π½ΠΎ ΠΌΠΎΠ³ΡΡ ΡΠ΅Π»ΠΊΠ½ΡΡΡ ΠΏΠΎ Π½Π΅ΠΌΡ. Π©Π΅Π»ΡΠΎΠΊ Π²ΡΠ·ΡΠ²Π°Π΅Ρ ΡΠΎΠΊΡΡ. - Π Safari ΠΈ Firefox (Mac) ΡΠ΅Π»ΡΠΊΠΈ Π½Π΅ ΡΠΎΠΊΡΡΠΈΡΡΡΡΡΡ Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ΅
- ΠΡΠΈ Π½Π°ΠΆΠ°ΡΠΈΠΈ Π½Π° ΡΡΡΠ»ΠΊΡ (
href
ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ Π½Π° Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΡΠΉid
Π½Π° ΡΠΎΠΉ ΠΆΠ΅ ΡΡΡΠ°Π½ΠΈΡΠ΅.
Π§ΡΠΎΠ±Ρ ΡΡΠΎΠΊΡΡΠΈΡΠΎΠ²Π°ΡΡΡΡ, ΠΌΡ Π±ΠΎΠ»ΡΡΠ΅ Π·Π°Π±ΠΎΡΠΈΠΌΡΡ ΠΎ ΡΠΎΠΌ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ΠΈΠ»ΠΈ ΠΏΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ°Π±ΡΠ»ΡΡΠΈΠΈ, ΡΠ΅ΠΌ Π½Π°ΠΆΠΈΠΌΠ°Π»ΠΈ Π½Π° Π½ΠΈΡ .
ΠΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΏΠΎΠΏΠ°Π΄Π°Π΅Ρ Π½Π° Π²ΠΊΠ»Π°Π΄ΠΊΡ, ΠΎΠ½ Π½Π΅ Π·Π½Π°Π΅Ρ, Π½Π° ΡΡΠΎ Π±ΡΠ΄Π΅Ρ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ ΡΠΎΠΊΡΡ. ΠΠΌ ΠΎΡΡΠ°Π΅ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π΄ΠΎΠ³Π°Π΄ΡΠ²Π°ΡΡΡΡ. ΠΠΎΡ ΠΏΠΎΡΠ΅ΠΌΡ Π½Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π·Π°ΠΌΠ΅ΡΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΊ ΡΡΠΎΠΊΡΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ .
Π Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²Π΅ ΡΠ»ΡΡΠ°Π΅Π² ΡΡΠΈΠ»Ρ ΡΠΎΠΊΡΡΠ° ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΈΡ.ΠΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠΉ ΡΠΎΠΊΡΡ, ΠΏΠΎΠ΄ΡΠΌΠ°ΠΉΡΠ΅ ΠΎΠ± ΡΡΠΈΡ ΡΠ΅ΡΡΡΠ΅Ρ Π²Π΅ΡΠ°Ρ :
- ΠΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΊΠΎΠ½ΡΡΡΠ°
- Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ Ρ Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΠ΅ΠΌ
- ΠΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠ²Π΅ΡΠ° ΡΠΎΠ½Π°
- ΠΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠ²Π΅ΡΠ°
ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΠ²Π΅Ρ ΡΠΎΠ½Π°
ΠΈ ΡΠ²Π΅Ρ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠ²Π΅ΡΠ°
ΡΠ°ΡΡΠΎ ΡΠΎΠΏΡΠΎΠ²ΠΎΠΆΠ΄Π°ΡΡ : hover
, ΠΈΠΌΠ΅Π΅Ρ ΡΠΌΡΡΠ», ΡΡΠΎ ΠΊΠΎΠ½ΡΡΡΡ ΠΈΠ»ΠΈ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ ΡΠΎΠΏΡΠΎΠ²ΠΎΠΆΠ΄Π°ΡΡ : focus
.
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΊΠΎΠΌΠ±ΠΈΠ½Π°ΡΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ² ΠΊΠΎΠ½ΡΡΡ
, Π³ΡΠ°Π½ΠΈΡΠ°
ΠΈ box-shadow
Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠ΄ΠΎΠ±Π½ΡΡ
ΡΡΠΈΠ»Π΅ΠΉ ΡΠΎΠΊΡΡΠ°.Π― ΡΠ°ΡΡΠΊΠ°Π·ΡΠ²Π°Ρ, ΠΊΠ°ΠΊ ΡΡΠΎ ΡΠ΄Π΅Π»Π°ΡΡ, Π² ΡΠ°Π·Π΄Π΅Π»Π΅ Β«Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎΠ³ΠΎ ΡΡΠΈΠ»Ρ ΡΠΎΠΊΡΡΠ°Β».
ΠΊΠ½ΠΎΠΏΠΊΠ° {
ΡΠ²Π΅Ρ ΡΠΎΠ½Π°: #dedede;
}
button: hover {
ΡΠ²Π΅Ρ ΡΠΎΠ½Π°: #aaa;
}
button: focus {
Π½Π°Π±ΡΠΎΡΠΊΠΈ: Π½Π΅Ρ;
box-shadow: 0 0 0 3px lightskyblue;
}
Π‘ΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΡ Π°ΠΊΡΠΈΠ²Π½ΡΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΠΉ
ΠΠΎΠ³Π΄Π° Π²Ρ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΡΠ΅ΡΠ΅ Ρ Π²Π΅ΡΠ°ΠΌΠΈ Π² ΡΠ΅Π°Π»ΡΠ½ΠΎΠΉ ΠΆΠΈΠ·Π½ΠΈ, Π²Ρ ΠΎΠΆΠΈΠ΄Π°Π΅ΡΠ΅ ΠΊΠ°ΠΊΠΎΠΉ-ΡΠΎ ΠΎΠ±ΡΠ°ΡΠ½ΠΎΠΉ ΡΠ²ΡΠ·ΠΈ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π΅ΡΠ»ΠΈ Π²Ρ Π½Π°ΠΆΠΌΠ΅ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΡ, Π²Ρ ΠΎΠΆΠΈΠ΄Π°Π΅ΡΠ΅, ΡΡΠΎ ΠΎΠ½Π° Π±ΡΠ΄Π΅Ρ Π½Π°ΠΆΠ°ΡΠ°.
ΠΡΠΎΡ ΠΎΡΠ·ΡΠ² ΠΏΠΎΠ»Π΅Π·Π΅Π½ ΠΈ Π΄Π»Ρ Π²Π΅Π±-ΡΠ°ΠΉΡΠΎΠ².ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°ΡΡ ΠΌΠΎΠΌΠ΅Π½Ρ Β«Π½Π°ΠΆΠ°ΡΠΈΡ ΠΊΠ½ΠΎΠΏΠΊΠΈΒ» Ρ ΠΏΠΎΠΌΠΎΡΡΡ : active
. : Π°ΠΊΡΠΈΠ²Π½ΡΠΉ ΡΡΠΈΠ³Π³Π΅Ρ
ΡΡΠ°Π±Π°ΡΡΠ²Π°Π΅Ρ ΠΏΡΠΈ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΠΈ Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ . ΠΠ΄Π΅ΡΡ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ:
- Π£Π΄Π΅ΡΠΆΠΈΠ²Π°Ρ Π»Π΅Π²ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ ΠΌΡΡΠΈ Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ΅ (Π΄Π°ΠΆΠ΅ Π½Π° Π½Π΅ΡΡΠΎΠΊΡΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΌ)
- Π£Π΄Π΅ΡΠΆΠΈΠ²Π°Π½ΠΈΠ΅ ΠΊΠ»Π°Π²ΠΈΡΠΈ ΠΏΡΠΎΠ±Π΅Π»Π° (Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠ°Ρ )
ΠΊΠ½ΠΎΠΏΠΊΠ°: Π°ΠΊΡΠΈΠ²Π½Π° {
ΡΠ²Π΅Ρ ΡΠΎΠ½Π°: # 333;
ΡΠ²Π΅Ρ Π³ΡΠ°Π½ΠΈΡΡ: # 333;
ΡΠ²Π΅Ρ: #eee;
}
ΠΠ²Π΅ ΡΡΡΠ°Π½Π½ΡΠ΅ Π²Π΅ΡΠΈ, Π½Π° ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΎΠ±ΡΠ°ΡΠΈΡΡ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅:
- Π£Π΄Π΅ΡΠΆΠΈΠ²Π°Ρ Π½Π°ΠΆΠ°ΡΠΎΠΉ ΠΊΠ»Π°Π²ΠΈΡΡ ΠΏΡΠΎΠ±Π΅Π»Π°, Π°ΠΊΡΠΈΠ²ΠΈΡΡΠ΅Ρ
: Π°ΠΊΡΠΈΠ²Π΅Π½
Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠ°Ρ , Π½ΠΎ ΡΠ΄Π΅ΡΠΆΠΈΠ²Π°Π½ΠΈΠ΅ ΠΊΠ»Π°Π²ΠΈΡΠΈ Enter — Π½Π΅Ρ. - ΠΠ²Π΅ΡΡΠΈ ΡΡΠΈΠ³Π³Π΅ΡΠ½ΡΠ΅ ΡΡΡΠ»ΠΊΠΈ, Π½ΠΎ Π½Π΅ ΡΠΎΠ·Π΄Π°ΡΡ Π°ΠΊΡΠΈΠ²Π½ΠΎΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅. ΠΡΠΎΠ±Π΅Π» Π²ΠΎΠΎΠ±ΡΠ΅ Π½Π΅ Π·Π°ΠΏΡΡΠΊΠ°Π΅Ρ ΡΡΡΠ»ΠΊΠΈ.
Π‘ΡΠΈΠ»ΠΈ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π΄Π»Ρ ΡΡΡΠ»ΠΎΠΊ
Π‘ΡΡΠ»ΠΊΠΈ ΠΈΠΌΠ΅ΡΡ Π°ΠΊΡΠΈΠ²Π½ΡΠΉ ΡΡΠΈΠ»Ρ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. ΠΠ½ΠΈ ΡΡΠ°Π½ΠΎΠ²ΡΡΡΡ ΠΊΡΠ°ΡΠ½ΡΠΌΠΈ ΠΏΡΠΈ Π½Π°ΠΆΠ°ΡΠΈΠΈ.
ΠΠ·Π°ΠΈΠΌΠΎΡΠ²ΡΠ·Ρ ΠΌΠ΅ΠΆΠ΄Ρ Π°ΠΊΡΠΈΠ²Π½ΠΎΡΡΡΡ ΠΈ ΡΠΎΠΊΡΡΠΎΠΌ
ΠΠΎΠ³Π΄Π° Π²Ρ ΡΠ΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΠ΅ Π»Π΅Π²ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ ΠΌΡΡΠΈ Π½Π° ΡΠΎΠΊΡΡΠΈΡΡΠ΅ΠΌΠΎΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ΅, Π²Ρ Π·Π°ΠΏΡΡΠΊΠ°Π΅ΡΠ΅ Π°ΠΊΡΠΈΠ²Π½ΠΎΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ . ΠΡ ΡΠ°ΠΊΠΆΠ΅ Π·Π°ΠΏΡΡΠΊΠ°Π΅ΡΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ ΡΠΎΠΊΡΡΠ° ΠΎΠ΄Π½ΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎ.
ΠΠΎΠ³Π΄Π° Π²Ρ ΠΎΡΠΏΡΡΠΊΠ°Π΅ΡΠ΅ Π»Π΅Π²ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ ΠΌΡΡΠΈ, ΡΠΎΠΊΡΡ ΠΎΡΡΠ°Π΅ΡΡΡ Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ΅
π Π²Π΅ΡΠ½ΠΎ Π΄Π»Ρ Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², Π½Π° ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΡΡΠΎΠΊΡΡΠΈΡΠΎΠ²Π°ΡΡΡΡ, ΠΊΡΠΎΠΌΠ΅ ΡΡΡΠ»ΠΎΠΊ ΠΈ ΠΊΠ½ΠΎΠΏΠΎΠΊ.
ΠΠ»Ρ ΡΡΡΠ»ΠΎΠΊ:
- ΠΠΎΠ³Π΄Π° Π²Ρ ΡΠ΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΠ΅ Π»Π΅Π²ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ ΠΌΡΡΠΈ: ΡΡΠΈΠ³Π³Π΅ΡΡ
: Π°ΠΊΡΠΈΠ²Π½Ρ
ΠΈ: ΡΠΎΠΊΡΡ
ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ Π² Firefox ΠΈ Chrome ΠΠΊΡΠΈΠ²Π½Ρ ΡΠΎΠ»ΡΠΊΠΎ ΡΡΠΈΠ³Π³Π΅ΡΡ Π² Safari (ΠΏΡΠΎΠ²Π΅ΡΠ΅Π½ΠΎ ΡΠΎΠ»ΡΠΊΠΎ Π½Π° Mac) - ΠΠΎΠ³Π΄Π° Π²Ρ ΠΎΡΠΏΡΡΠΊΠ°Π΅ΡΠ΅ Π»Π΅Π²ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ ΠΌΡΡΠΈ:
: ΡΠΎΠΊΡΡ
ΠΎΡΡΠ°Π΅ΡΡΡ Π½Π° ΡΡΡΠ»ΠΊΠ΅ (Π΅ΡΠ»ΠΈhref
ΡΡΡΠ»ΠΊΠΈ Π½Π΅ ΡΠΎΠ²ΠΏΠ°Π΄Π°Π΅Ρ Ρid
Π½Π° ΡΠΎΠΉ ΠΆΠ΅ ΡΡΡΠ°Π½ΠΈΡΠ΅).Π Safari ΡΠΎΠΊΡΡ Π²ΠΎΠ·Π²ΡΠ°ΡΠ°Π΅ΡΡΡ ΠΊ
ΠΠ»Ρ ΠΊΠ½ΠΎΠΏΠΎΠΊ:
- ΠΠΎΠ³Π΄Π° Π²Ρ ΡΠ΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΠ΅ Π»Π΅Π²ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ ΠΌΡΡΠΈ: ΡΡΠΈΠ³Π³Π΅ΡΡ
: Π°ΠΊΡΠΈΠ²Π½Ρ
ΠΈ: ΡΠΎΠΊΡΡ
ΡΠΎΡΡΠΎΡΠ½ΠΈΡ ΡΠΎΠ»ΡΠΊΠΎ Π² Chrome. ΠΠ΅ Π·Π°ΠΏΡΡΠΊΠ°Π΅Ρ: ΡΠΎΠΊΡΡ
Π²ΠΎΠΎΠ±ΡΠ΅ Π² Safari ΠΈ Firefox (Mac). Π― ΠΏΠΈΡΠ°Π» ΠΎΠ± ΡΡΠΎΠΌ ΡΡΡΠ°Π½Π½ΠΎΠΌ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠΈ Π·Π΄Π΅ΡΡ.
ΠΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅, ΡΡΠΎΠ±Ρ ΠΊΠ»ΠΈΠΊΠΈ ΡΠΎΠΊΡΡΠΈΡΠΎΠ²Π°Π»ΠΈΡΡ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠ°Ρ , Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΡΠΎΡ JavaScript ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ°Π½ΡΡΠ΅. (Π§ΡΠΎ ΠΊΠ°ΡΠ°Π΅ΡΡΡ ΡΠΎΠ³ΠΎ, ΠΏΠΎΡΠ΅ΠΌΡ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠΎΡΠΈΡΠ°ΡΡ ΡΡΠ°ΡΡΡ, Π½Π° ΠΊΠΎΡΠΎΡΡΡ Ρ ΡΡΡΠ»Π°Π»ΡΡ Π²ΡΡΠ΅, Π΄Π»Ρ ΠΏΠΎΠ»ΡΡΠ΅Π½ΠΈΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎΠΉ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ).
document.addEventListener ('click', event => {
if (event.target.matches ('button')) {
event.target.focus ()
}
})
ΠΠΎΡΠ»Π΅ ΠΏΠΎΠ»ΡΡΠ΅Π½ΠΈΡ ΡΡΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π° ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΏΡΠΈ Π½Π°ΠΆΠ°ΡΠΈΠΈ ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ:
- ΠΠΎΠ³Π΄Π° Π²Ρ ΡΠ΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΠ΅ Π»Π΅Π²ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ ΠΌΡΡΠΈ: Π·Π°ΠΏΡΡΠΊΠ°Π΅Ρ
: Π°ΠΊΡΠΈΠ²Π΅Π½
Π²ΠΎ Π²ΡΠ΅Ρ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ . Π’ΡΠΈΠ³Π³Π΅ΡΡ: ΡΠΎΠΊΡΡ
ΡΠΎΠ»ΡΠΊΠΎ Π½Π° Chrome. - ΠΠΎΠ³Π΄Π° Π²Ρ ΠΎΡΠΏΡΡΠΊΠ°Π΅ΡΠ΅ Π»Π΅Π²ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ ΠΌΡΡΠΈ: Π’ΡΠΈΠ³Π³Π΅ΡΡ
: ΡΠΎΠΊΡΡ
Π½Π° Safari ΠΈ Firefox (Mac).: ΡΠΎΠΊΡΡ
ΠΎΡΡΠ°Π΅ΡΡΡ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠ΅ Π΄Π»Ρ Π΄ΡΡΠ³ΠΈΡ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ².
ΠΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π² Safari ΠΏΠΎΡΠ»Π΅ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ ΡΡΠ°Π³ΠΌΠ΅Π½ΡΠ° ΠΊΠΎΠ΄Π° JavaScript Π²ΡΡΠ΅.
Π’Π΅ΠΏΠ΅ΡΡ Π²Ρ Π·Π½Π°Π΅ΡΠ΅ ΠΎ ΡΠΎΡΡΠΎΡΠ½ΠΈΡΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ, ΡΠΎΠΊΡΡΠ° ΠΈ Π°ΠΊΡΠΈΠ²Π½ΡΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΠΉ, Ρ Ρ ΠΎΡΡ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡΠΈΡΡ ΠΎ ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΠΈ Π²ΡΠ΅Ρ ΡΡΠ΅Ρ .
ΠΠΎΠ»ΡΠ΅Π±Π½ΠΎΠ΅ ΡΠΎΡΠ΅ΡΠ°Π½ΠΈΠ΅
ΠΠΎΠ»ΡΠ΅Π±Π½Π°Ρ ΠΊΠΎΠΌΠ±ΠΈΠ½Π°ΡΠΈΡ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΠΌ ΠΏΠΎΠ»ΡΡΠ°ΡΡ ΠΎΠ±ΡΠ°ΡΠ½ΡΡ ΡΠ²ΡΠ·Ρ, ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ΠΈ Π½Π°Π²ΠΎΠ΄ΡΡ ΠΊΡΡΡΠΎΡ, ΡΠΎΠΊΡΡΠΈΡΡΡΡΡΡ ΠΈ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΡΡΡ Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ. ΠΠΎΡ ΠΊΠΎΠ΄, ΠΊΠΎΡΠΎΡΡΠΉ Π²Π°ΠΌ Π½ΡΠΆΠ΅Π½:
. ΠΠ»Π΅ΠΌΠ΅Π½Ρ: hover,
.element: active {
/ * ΠΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ²Π΅Ρ ΡΠΎΠ½Π° / ΡΠ΅ΠΊΡΡΠ° * /
}
.element: focus {
/ * ΠΠΎΠΊΠ°Π·Π°ΡΡ ΡΡ
Π΅ΠΌΡ / *
}
ΠΠ»Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ ΠΌΡΡΠΈ:
- ΠΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π½Π°Π²ΠΎΠ΄ΠΈΡ ΠΊΡΡΡΠΎΡ Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ,
ΡΠ²Π΅Ρ ΡΠΎΠ½Π°
(ΠΈ / ΠΈΠ»ΠΈΡΠ²Π΅Ρ
) ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅ΡΡΡ.ΠΠ½ΠΈ ΠΏΠΎΠ»ΡΡΠ°ΡΡ ΠΎΠ±ΡΠ°ΡΠ½ΡΡ ΡΠ²ΡΠ·Ρ. - ΠΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΡΠ΅Π»ΠΊΠ°Π΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ ΠΊΠΎΠ½ΡΡΡ ΡΠΎΠΊΡΡΠ°. ΠΠ½ΠΈ ΠΏΠΎΠ»ΡΡΠ°ΡΡ ΠΎΠ±ΡΠ°ΡΠ½ΡΡ ΡΠ²ΡΠ·Ρ.
ΠΠ»Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ ΠΊΠ»Π°Π²ΠΈΠ°ΡΡΡΡ:
- ΠΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π²Ρ ΠΎΠ΄ΠΈΡ Π² ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ ΠΊΠΎΠ½ΡΡΡ ΡΠΎΠΊΡΡΠ°. ΠΠ½ΠΈ ΠΏΠΎΠ»ΡΡΠ°ΡΡ ΠΎΠ±ΡΠ°ΡΠ½ΡΡ ΡΠ²ΡΠ·Ρ.
- ΠΠΎΠ³Π΄Π° ΠΎΠ½ΠΈ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΡΡΡ Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ,
ΡΠ²Π΅Ρ ΡΠΎΠ½Π°
(ΠΈ / ΠΈΠ»ΠΈ ΡΠ²Π΅Ρ
ΠΡΡΡΠ΅Π΅ ΠΈΠ· ΠΎΠ±ΠΎΠΈΡ ΠΌΠΈΡΠΎΠ²!
- Π― Π½Π΅ ΡΠ΅ΡΡΠΈΡΠΎΠ²Π°Π» ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΠΌΠ°Π³ΠΈΡΠ΅ΡΠΊΡΡ ΠΊΠΎΠΌΠ±ΠΈΠ½Π°ΡΠΈΡ. ΠΡΠΎ ΠΏΡΠΎΠ²Π΅ΡΠΊΠ° ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎΡΡΠΈ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΠΈ. ΠΡΠ΄Ρ ΠΏΡΠΈΠ·Π½Π°ΡΠ΅Π»Π΅Π½, Π΅ΡΠ»ΠΈ Π²Ρ ΠΏΠΎΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΌΠ½Π΅ Ρ ΡΠ΅ΡΡΠ°ΠΌΠΈ ΠΈ Π΄Π°Π΄ΠΈΡΠ΅ ΠΌΠ½Π΅ Π·Π½Π°ΡΡ, ΠΊΠ°ΠΊ Π΄Π΅Π»Π°.
- ΠΡΠ»ΠΈ Π²Ρ Π·Π°ΠΏΡΡΠΊΠ°Π΅ΡΠ΅ ΡΠ΅ΡΡΡ, Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ Codepen. Π‘ΠΎΡΡΠΎΡΠ½ΠΈΡ ΡΠΎΠΊΡΡΠ° Π΄Π»Ρ ΡΡΡΠ»ΠΎΠΊ Π½Π° Codepen ΡΡΡΠ°Π½Π½ΡΠ΅. ΠΡΠ»ΠΈ Π²Ρ Π½Π°Π²ΠΎΠ΄ΠΈΡΠ΅ ΠΊΡΡΡΠΎΡ Π½Π° ΡΡΡΠ»ΠΊΡ, ΠΊΠΎΠ½ΡΡΡ ΡΠΎΠΊΡΡΠ° ΡΠ΄Π°Π»ΡΠ΅ΡΡΡ. ΠΠΎΡΠ΅ΠΌΡ? Π― Π½Π΅ Π·Π½Π°Ρ. ΠΠ½ΠΎΠ³Π΄Π° Ρ Π΄ΡΠΌΠ°Ρ, ΡΡΠΎ Π»ΡΡΡΠ΅ Π²ΡΠ΅Π³ΠΎ ΠΏΡΠΎΡΠ΅ΡΡΠΈΡΠΎΠ²Π°ΡΡ ΠΏΠΎΠ΄ΠΎΠ±Π½ΡΠ΅ Π²Π΅ΡΠΈ Π±Π΅Π· ΠΊΠ°ΠΊΠΈΡ -Π»ΠΈΠ±ΠΎ Π½Π΅ΠΎΠ±ΡΡΠ½ΡΡ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ². ΠΡΠΎΡΡΠΎ ΡΡΠ°ΡΡΠΉ HTML, CSS, JS.
ΠΠ΅ΠΌΠ°Π³ΠΈΡΠ΅ΡΠΊΠ°Ρ (Π½ΠΎ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π»ΡΡΡΠ΅) ΠΊΠΎΠΌΠ±ΠΈΠ½Π°ΡΠΈΡ
ΠΠ°ΠΊ Ρ ΡΠΆΠ΅ ΡΠΏΠΎΠΌΠΈΠ½Π°Π» Π²ΡΡΠ΅, Π½Π°ΠΆΠ°ΡΠΈΠ΅ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠΈ Π²Π΅Π΄Π΅Ρ ΡΠ΅Π±Ρ ΡΡΡΠ°Π½Π½ΠΎ Π² Safari ΠΈ Firefox (Mac).ΠΡΠ»ΠΈ Π²Ρ Π΄ΠΎΠ±Π°Π²ΠΈΠ»ΠΈ ΡΡΠ°Π³ΠΌΠ΅Π½Ρ ΠΊΠΎΠ΄Π° JavaScript, ΠΊΠΎΡΠΎΡΡΠΉ Ρ Π²Π°ΠΌ ΠΏΠΎΠΊΠ°Π·Π°Π», Π²ΠΎΠ»ΡΠ΅Π±Π½Π°Ρ ΠΊΠΎΠΌΠ±ΠΈΠ½Π°ΡΠΈΡ Π²ΡΠ΅ Π΅ΡΠ΅ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ. ΠΠΎ ΡΡΠΎ Π½Π΅ ΠΈΠ΄Π΅Π°Π»ΡΠ½ΠΎ.
ΠΠ»Ρ Safari ΠΈ Firefox (Mac) ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ ΡΠ»Π΅Π΄ΡΡΡΠ΅Π΅:
- ΠΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ ΡΠ΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ ΠΌΡΡΠΈ Π½Π°ΠΆΠ°ΡΠΎΠΉ, Π½ΠΈΡΠ΅Π³ΠΎ Π½Π΅ ΠΌΠ΅Π½ΡΠ΅ΡΡΡ.
- ΠΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ ΠΏΠΎΠ΄Π½ΠΈΠΌΠ°ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ ΠΌΡΡΠΈ, ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠΎΠ»ΡΡΠ°Π΅Ρ ΡΠΎΠΊΡΡ
ΠΡΠ»ΠΈ Π²Ρ Π΄ΡΠΌΠ°Π΅ΡΠ΅, ΡΡΠΎ ΡΡΠΎΠ³ΠΎ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ, ΡΠΎ Π²ΠΎΠ»ΡΠ΅Π±Π½Π°Ρ ΠΊΠΎΠΌΠ±ΠΈΠ½Π°ΡΠΈΡ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΎΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡΡ Π·Π΄Π΅ΡΡ.
ΠΠΎ Π΅ΡΠ»ΠΈ Π²Ρ Π΄ΡΠΌΠ°Π΅ΡΠ΅, ΡΡΠΎ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠ΅ΠΉ Π½Π΅Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ, Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°ΡΡ : hover
, : focus
ΠΈ : active
ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎ.
.element: hover {
/ * ΠΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ²Π΅Ρ ΡΠΎΠ½Π° / ΡΠ΅ΠΊΡΡΠ° * /
}
.element: active {
/ * ΠΡΠ΅ ΠΎΠ΄Π½ΠΎ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠ²Π΅ΡΠ° ΡΠΎΠ½Π° / ΡΠ΅ΠΊΡΡΠ° * /
}
.element: focus {
/ * ΠΠΎΠΊΠ°Π·Π°ΡΡ ΡΡ
Π΅ΠΌΡ / *
}
ΠΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π² Safari, Π΅ΡΠ»ΠΈ Π²Ρ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Π»ΠΈ Π²ΡΠ΅ ΡΡΠΈ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ.
ΠΠΎΡ ΠΈ Π²ΡΠ΅! ΠΠ°Π΄Π΅ΡΡΡ, Π²Ρ ΡΠ·Π½Π°Π»ΠΈ ΡΡΠΎ-ΡΠΎ ΡΠ΅Π³ΠΎΠ΄Π½Ρ!
ΠΡΠ»ΠΈ Π²Π°ΠΌ ΠΏΠΎΠ½ΡΠ°Π²ΠΈΠ»Π°ΡΡ ΡΡΠ° ΡΡΠ°ΡΡΡ, ΡΠ°ΡΡΠΊΠ°ΠΆΠΈΡΠ΅ ΠΎ Π½Π΅ΠΉ Π΄ΡΡΠ³Ρ! ΠΠΎΠ΄Π΅Π»ΠΈΡΠ΅ΡΡ ΡΡΠΈΠΌ Π² Π’Π²ΠΈΡΡΠ΅ΡΠ΅. ΠΡΠ»ΠΈ Π²Ρ Π·Π°ΠΌΠ΅ΡΠΈΠ»ΠΈ ΠΎΠΏΠ΅ΡΠ°ΡΠΊΡ, Ρ Π±ΡΠ΄Ρ ΠΏΡΠΈΠ·Π½Π°ΡΠ΅Π»Π΅Π½, Π΅ΡΠ»ΠΈ Π²Ρ ΡΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΡΠ°Π²ΠΈΡΡ Π΅Π΅ Π½Π° GitHub. Π‘ΠΏΠ°ΡΠΈΠ±ΠΎ!
: hover — CSS: ΠΊΠ°ΡΠΊΠ°Π΄Π½ΡΠ΅ ΡΠ°Π±Π»ΠΈΡΡ ΡΡΠΈΠ»Π΅ΠΉ
ΠΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡ : hover
CSS ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΠ΅Ρ, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΡΠ΅Ρ Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠΊΠ°Π·ΡΠ²Π°ΡΡΠ΅Π³ΠΎ ΡΡΡΡΠΎΠΉΡΡΠ²Π°, Π½ΠΎ Π½Π΅ ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎ Π°ΠΊΡΠΈΠ²ΠΈΡΡΠ΅Ρ Π΅Π³ΠΎ.ΠΠ±ΡΡΠ½ΠΎ ΠΎΠ½ Π·Π°ΠΏΡΡΠΊΠ°Π΅ΡΡΡ, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π½Π°Π²ΠΎΠ΄ΠΈΡ ΠΊΡΡΡΠΎΡ Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ (ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ ΠΌΡΡΠΈ).
a: hover {
ΠΎΡΠ°Π½ΠΆΠ΅Π²ΡΠΉ ΡΠ²Π΅Ρ;
}
Π‘ΡΠΈΠ»ΠΈ, ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠ΅ ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡΠΎΠΌ : Π°ΠΊΡΠΈΠ²Π½ΡΠΉ
, Π±ΡΠ΄ΡΡ ΠΏΠ΅ΡΠ΅ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Ρ Π»ΡΠ±ΡΠΌ ΠΏΠΎΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡΠΎΠΌ, ΡΠ²ΡΠ·Π°Π½Π½ΡΠΌ ΡΠΎ ΡΡΡΠ»ΠΊΠ°ΠΌΠΈ (: ΡΡΡΠ»ΠΊΠ°
, : ΠΏΠΎΡΠ΅ΡΠ΅Π½Π½ΡΠΉ
ΠΈΠ»ΠΈ : Π°ΠΊΡΠΈΠ²Π½ΡΠΉ
), ΠΊΠΎΡΠΎΡΡΠΉ ΠΈΠΌΠ΅Π΅Ρ ΠΏΠΎ ΠΊΡΠ°ΠΉΠ½Π΅ΠΉ ΠΌΠ΅ΡΠ΅ ΡΠ°ΠΊΡΡ ββΠΆΠ΅ ΡΠΏΠ΅ΡΠΈΡΠΈΡΠ½ΠΎΡΡΡ. Π§ΡΠΎΠ±Ρ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ ΠΎΡΠΎΡΠΌΠΈΡΡ ΡΡΡΠ»ΠΊΠΈ, ΠΏΠΎΠΌΠ΅ΡΡΠΈΡΠ΅ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ : hover
ΠΏΠΎΡΠ»Π΅ ΠΏΡΠ°Π²ΠΈΠ» : ΡΡΡΠ»ΠΊΠ°
ΠΈ : ΠΏΠΎΡΠ΅ΡΠ΅Π½ΠΎ
, Π½ΠΎ ΠΏΠ΅ΡΠ΅Π΄ ΠΏΡΠ°Π²ΠΈΠ»ΠΎΠΌ : active
, ΠΊΠ°ΠΊ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΎ Π² LVHA-order : : link
— : ΠΏΠΎΡΠ΅ΡΠ΅Π½ΠΎ
— : Π½Π°Π²Π΅Π΄ΠΈΡΠ΅ ΠΊΡΡΡΠΎΡ Π½Π°
— : Π°ΠΊΡΠΈΠ²Π½ΠΎ
.
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅ : ΠΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡ : hover
Π²ΡΠ·ΡΠ²Π°Π΅Ρ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ Π½Π° ΡΠ΅Π½ΡΠΎΡΠ½ΡΡ
ΡΠΊΡΠ°Π½Π°Ρ
. Π Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ° ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡ : hover
ΠΌΠΎΠΆΠ΅Ρ Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ ΡΠΎΠ²ΠΏΠ°Π΄Π°ΡΡ, ΡΠΎΠ²ΠΏΠ°Π΄Π°ΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π½Π° ΠΌΠ³Π½ΠΎΠ²Π΅Π½ΠΈΠ΅ ΠΏΠΎΡΠ»Π΅ ΠΊΠ°ΡΠ°Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΈΠ»ΠΈ ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠ°ΡΡ ΡΠΎΠ²ΠΏΠ°Π΄Π΅Π½ΠΈΠ΅ Π΄Π°ΠΆΠ΅ ΠΏΠΎΡΠ»Π΅ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΏΠ΅ΡΠ΅ΡΡΠ°Π» ΠΊΠ°ΡΠ°ΡΡΡΡ ΠΈ ΠΏΠΎΠΊΠ° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π½Π΅ ΠΊΠΎΡΠ½Π΅ΡΡΡ Π΄ΡΡΠ³ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΠ΅Π±-ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ ΡΠ±Π΅Π΄ΠΈΡΡΡΡ, ΡΡΠΎ ΠΊΠΎΠ½ΡΠ΅Π½Ρ Π΄ΠΎΡΡΡΠΏΠ΅Π½ Π½Π° ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ
Ρ ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½Π½ΡΠΌΠΈ ΠΈΠ»ΠΈ ΠΎΡΡΡΡΡΡΠ²ΡΡΡΠΈΠΌΠΈ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡΠΌΠΈ Π·Π°Π²ΠΈΡΠ°Π½ΠΈΡ.
ΠΠ°Π·ΠΎΠ²ΡΠΉ ΠΏΡΠΈΠΌΠ΅Ρ
HTML
ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ Π½Π°Π²Π΅ΡΡΠΈ ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ ΠΌΡΡΠΈ Π½Π° ΡΡΡ ΡΡΡΠ»ΠΊΡ.
CSS
a {
ΡΠ²Π΅Ρ ΡΠΎΠ½Π°: ΡΠΈΠ½ΠΈΠΉ;
ΠΏΠ΅ΡΠ΅Ρ
ΠΎΠ΄: ΡΠ²Π΅Ρ ΡΠΎΠ½Π° .5s;
}
a: hover {
ΡΠ²Π΅Ρ ΡΠΎΠ½Π°: Π·ΠΎΠ»ΠΎΡΠΎ;
}
Π Π΅Π·ΡΠ»ΡΡΠ°Ρ
ΠΠ°Π»Π΅ΡΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ
ΠΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡ : hover
ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π³Π°Π»Π΅ΡΠ΅ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Ρ ΠΏΠΎΠ»Π½ΠΎΡΠ°Π·ΠΌΠ΅ΡΠ½ΡΠΌΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ ΠΌΡΡΠΈ Π½Π° ΡΡΠΊΠΈΠ·. Π‘ΠΌ. ΠΡΡ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ Π΄Π»Ρ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΠΉ ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΊΠΈ.
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅: ΠΠ»Ρ Π°Π½Π°Π»ΠΎΠ³ΠΈΡΠ½ΠΎΠ³ΠΎ ΡΡΡΠ΅ΠΊΡΠ°, Π½ΠΎ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡΠ° : checked
(ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΠΊ ΡΠΊΡΡΡΡΠΌ ΡΠ°Π΄ΠΈΠΎΠ±ΠΎΠΊΡΠ°ΠΌ), ΡΠΌ. ΠΡΡ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ, Π²Π·ΡΡΡΡ ΡΠΎ ΡΠΏΡΠ°Π²ΠΎΡΠ½ΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΡ: checked.
Π’Π°Π±Π»ΠΈΡΡ BCD Π·Π°Π³ΡΡΠΆΠ°ΡΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅
ΠΊΠ°ΠΊ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ²Π΅Ρ Π½Π° Π±Π΅Π»ΡΠΉ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡ
ΠΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ²Π΅Ρ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ html
CSS Buttons, ΠΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠ²Π΅ΡΠ° ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Β· html css. ΠΠΎΠ±ΡΡΠΉ Π΄Π΅Π½Ρ! Π― ΠΏΠΎΠ½ΠΈΠΌΠ°Ρ, ΡΡΠΎ ΡΡΠΎΡ Π²ΠΎΠΏΡΠΎΡ Π·Π°Π΄Π°Π²Π°Π»ΠΈ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ°Π·. Π― ΠΏΡΠΎΡΠΌΠΎΡΡΠ΅Π» Π·Π΄Π΅ΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ΅ΠΌ, Π½ΠΎ 1. ΠΠ²Π΅Π΄ΠΈΡΠ΅ «style =» Π² ΡΠ΅Π³Π΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ HTML, ΡΡΠΎΠ±Ρ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΡΠΈΠ»Ρ ΠΊΠ½ΠΎΠΏΠΊΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΏΡΠΎΡΡΠΎΠ³ΠΎ HTML. 2. ΠΠ²Π΅Π΄ΠΈΡΠ΅ Β«background-color:Β», Π·Π° ΠΊΠΎΡΠΎΡΡΠΌ ΡΠ»Π΅Π΄ΡΠ΅Ρ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ ΡΠ²Π΅ΡΠ° ΠΈΠ»ΠΈ ΡΠ΅ΡΡΠ½Π°Π΄ΡΠ°ΡΠ΅ΡΠΈΡΠ½ΡΠΉ ΠΊΠΎΠ΄ Π² ΡΠ°Π·Π΄Π΅Π»Π΅ ΡΡΠΈΠ»Ρ Π²Π°ΡΠ΅Π³ΠΎ ΡΠ΅Π³Π° ΠΊΠ½ΠΎΠΏΠΊΠΈ HTML ΠΈΠ»ΠΈ CSS, Π·Π° ΠΊΠΎΡΠΎΡΡΠΌ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΡΠΎΡΠΊΠ° Ρ Π·Π°ΠΏΡΡΠΎΠΉ.3.
ΠΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠ²Π΅ΡΠ° ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ°, ΠΠΎΠΆΠ΅Ρ Π»ΠΈ ΠΊΡΠΎ-Π½ΠΈΠ±ΡΠ΄Ρ ΠΏΠΎΠΌΠΎΡΡ ΠΌΠ½Π΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ²Π΅Ρ ΡΠΎΠ½Π° ΠΌΠΎΠ΅ΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ. input [type = Β«submitΒ»]: hover {ΡΠ²Π΅Ρ ΡΠΎΠ½Π°: ΡΠΈΠ½ΠΈΠΉ; }. Cirediallo ΠΠ°Ρ ΡΡΠΈΠ»Ρ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ: a.buttonStyle: hover {background: # 383; } Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, ΠΎΠ½ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΠΎ Π΄Π»Ρ ΡΠ΅Π³Π° . ΠΠ·ΠΌΠ΅Π½ΠΈΡΠ΅ ΡΠ²ΠΎΠΉ ΡΡΠΈΠ»Ρ Π½Π° be.buttonStyle: hover {background: # 383; } Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, Π²Ρ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΡΠ΅ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠ΅ ΡΠΎΠ»ΡΠΊΠΎ Π½Π° ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΡΠΉ ΠΊΠ»Π°ΡΡ. Π’ΠΎΠ³Π΄Π° ΡΡΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ. Π‘ΠΌ. ΠΡΠΎΡ jsFiddle Π΄Π»Ρ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΈ.
ΠΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠ²Π΅ΡΠ° Π²Π²ΠΎΠ΄Π° (ΠΊΠ½ΠΎΠΏΠΊΠΈ) Π² ΡΠ΅ΠΆΠΈΠΌΠ΅ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ, ΠΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠ²Π΅ΡΠ° ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ.ΠΠ΄ΠΈΠ½ ΠΈΠ· ΡΠΏΠΎΡΠΎΠ±ΠΎΠ² ΡΠ΄Π΅Π»Π°ΡΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π²Π°ΡΠ΅Π³ΠΎ ΡΠ°Π±Π»ΠΎΠ½Π° Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΡΠΌΠΈ ΠΈ ΡΠΈΡΠΌΠ΅Π½Π½ΡΠΌΠΈ, Π½ΠΎ ΠΈ ΠΏΡΠΈΠ³Π»Π°ΡΠΈΡΡ Π²Π°Ρ. ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΠ΅Π»Π΅ΠΊΡΠΎΡ: hover, ΡΡΠΎΠ±Ρ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΡΠΈΠ»Ρ ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΠΊΠΎΠ³Π΄Π° Π²Ρ Π½Π°Π²ΠΎΠ΄ΠΈΡΠ΅ Π½Π° Π½Π΅Π΅ ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ ΠΌΡΡΠΈ. Π‘ΠΎΠ²Π΅Ρ: ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ transition-duration, ΡΡΠΎΠ±Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ ΡΠΊΠΎΡΠΎΡΡΡ ΡΡΡΠ΅ΠΊΡΠ° «Π·Π°Π²ΠΈΡΠ°Π½ΠΈΡ»: ΠΡΠΈΠΌΠ΅Ρ
ΠΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ²Π΅Ρ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΏΡΠΈ Π·Π°Π³ΡΡΠ·ΠΊΠ΅ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ
ΠΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ²Π΅Ρ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡ Ρ Π½Π°ΡΡΡΠΎΠΉΠΊΠΎΠΉ Bootstrap, Π¦Π²Π΅Ρ Π΄Π»Ρ Π²Π°ΡΠΈΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ Π±Π΅ΡΠ΅ΡΡΡ ΠΈΠ· ΠΊΠ»Π°ΡΡΠΎΠ² btn-x (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, btn-primary, btn- success), ΠΏΠΎΡΡΠΎΠΌΡ, Π΅ΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΡΡΠΎΠ±Ρ Π²ΡΡΡΠ½ΡΡ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ²Π΅ΡΠ°, Π½Π°ΠΏΠΈΡΠ°Π² ΠΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ²Π΅Ρ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠ΅ Ρ Π½Π°ΡΡΡΠΎΠΉΠΊΠΎΠΉ Bootstrap.ΠΠ°Π΄Π°ΡΡ Π²ΠΎΠΏΡΠΎΡ Π·Π°Π΄Π°Π½ 5 Π»Π΅Ρ 10 ΠΌΠ΅ΡΡΡΠ΅Π² Π½Π°Π·Π°Π΄. ΠΠΊΡΠΈΠ²Π½Π° 9 ΠΌΠ΅ΡΡΡΠ΅Π² Π½Π°Π·Π°Π΄. ΠΡΠΎΡΠΌΠΎΡΡΠ΅Π»ΠΈ 119 ΡΡΡ. Π Π°Π· 34. 11. Π― ΠΏΡΡΠ°ΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ
ΠΡΠ½ΠΎΠ²Π½Π°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ°: ΡΠ²Π΅Ρ ΡΠΎΠ½Π° ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ?!, ΠΡΠ΅ΠΌ ΠΏΡΠΈΠ²Π΅Ρ! ΠΠ° ΠΏΠ°Π½Π΅Π»ΠΈ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ Ρ ΡΠΎΠ·Π΄Π°Π» ΠΎΡΠ½ΠΎΠ²Π½ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ. Π€ΠΎΠ½ ΡΡΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΈΠΌΠ΅Π΅Ρ (ΠΊΠ°ΠΊ ΠΈ ΡΠ»Π΅Π΄ΠΎΠ²Π°Π»ΠΎ ΠΎΠΆΠΈΠ΄Π°ΡΡ) ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΉ ΡΠ²Π΅Ρ, ΠΊΠΎΡΠΎΡΡΠΉ Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠ» Π² ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠΈ. Scss Π¦Π²Π΅Ρ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠΈ: ΠΈΠ½ΠΎΠ³Π΄Π° Π½Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π½Π°ΡΡΡΠΎΠΈΡΡ ΡΠ²Π΅Ρ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΡΠ²Π΅ΡΠΎΠ² Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠΈ, Π° ΠΈΠ½ΠΎΠ³Π΄Π° Π½Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ Π΄ΡΡΠ³ΠΈΠ΅ ΡΡΠΈΠ»ΠΈ. ΠΡΠ΅ ΡΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ ΠΎΡΠ΅Π½Ρ Π»Π΅Π³ΠΊΠΎ, Π΅ΡΠ»ΠΈ ΠΏΠΎΠ΄ΠΎΠΉΡΠΈ ΠΊ Π΄Π΅Π»Ρ Π΄ΠΎΠ»ΠΆΠ½ΡΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ.ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ ΠΏΠ΅ΡΠ΅ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΠ΅ ΠΊΠ»Π°ΡΡΡ Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠΈ css.
Buttons Β· Bootstrap, 5 ΠΏΡΠΎΡΡΡΡ ΡΠΏΠΎΡΠΎΠ±ΠΎΠ² ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΡΠΈΠ»ΠΈ ΠΊΠ½ΠΎΠΏΠΎΠΊ Bootstrap ΠΠ°ΡΠ΅ΠΌ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΡΠ²Π΅Π»ΠΈΡΠΈΡΡ ΡΠΎΠ»ΡΠΈΠ½Ρ Π³ΡΠ°Π½ΠΈΡΡ ΠΈ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ²Π΅Ρ, ΡΡΠΎΠ±Ρ ΠΎΠ½ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΎΠ²Π°Π» Π³ΡΠ°Π½ΠΈΡΠ΅. ΠΠ°ΠΊΠΎΠ½Π΅Ρ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΡΡΡΠ΅ΠΊΡΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ, ΠΈΠ·ΠΌΠ΅Π½ΠΈΠ² ΡΠ²Π΅Ρ ΠΈ ΠΊΠ°ΠΊ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ²Π΅Ρ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π² HTML. ΠΠ· ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠΈ Π²Ρ ΡΠ·Π½Π°Π΅ΡΠ΅, ΠΊΠ°ΠΊ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ²Π΅Ρ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π² HTML. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ²Π΅Ρ ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΠΎΠ±ΡΡΠ½ΡΠΉ HTML ΠΈΠ»ΠΈ CSS (ΠΊΠ°ΡΠΊΠ°Π΄Π½ΡΠ΅ ΡΠ°Π±Π»ΠΈΡΡ ΡΡΠΈΠ»Π΅ΠΉ) Π² HTML5.
Css button hover effects
ΠΠ°ΠΊ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°ΡΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS, ΠΠΎΠ±Π°Π²ΡΡΠ΅ ΡΡΡΠ΅ΠΊΡ Β«Π½Π°ΠΆΠ°ΡΠΈΡΒ» ΠΏΡΠΈ ΡΠ΅Π»ΡΠΊΠ΅: Click. ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ ΡΠ°ΠΌΠΈ Β»ΠΠΎΠ±Π°Π²ΠΈΡΡ ΡΡΡΠ΅Π»ΠΊΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ: Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΠ΅ΡΠ΅ΠΉΠ΄ΠΈΡΠ΅ ΠΊ Π½Π°ΡΠ΅ΠΌΡ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²Ρ ΠΏΠΎ ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌ CSS, ΡΡΠΎΠ±Ρ ΡΠ·Π½Π°ΡΡ Π±ΠΎΠ»ΡΡΠ΅ ΠΎ ΡΡΠΈΠ»ΡΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ. ΠΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅. Π‘Π΅Π»Π΅ΠΊΡΠΎΡ: hover ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ Π²ΡΠ±ΠΎΡΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° Π½ΠΈΡ ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ ΠΌΡΡΠΈ. Π‘ΠΎΠ²Π΅Ρ: Π‘Π΅Π»Π΅ΠΊΡΠΎΡ: hover ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π»Ρ Π²ΡΠ΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², Π° Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ Π΄Π»Ρ ΡΡΡΠ»ΠΎΠΊ. Π‘ΠΎΠ²Π΅Ρ: ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΠ΅Π»Π΅ΠΊΡΠΎΡ: link Π΄Π»Ρ ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΠΈ ΡΡΡΠ»ΠΎΠΊ Π½Π° Π½Π΅ΠΏΠΎΡΠ΅ΡΠ΅Π½Π½ΡΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ, ΡΠ΅Π»Π΅ΠΊΡΠΎΡ: visit Π΄Π»Ρ ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΠΈ ΡΡΡΠ»ΠΎΠΊ Π½Π° ΠΏΠΎΡΠ΅ΡΠ΅Π½Π½ΡΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ ΠΈ ΡΠ΅Π»Π΅ΠΊΡΠΎΡ: active Π΄Π»Ρ ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΠΈ Π°ΠΊΡΠΈΠ²Π½ΠΎΠΉ ΡΡΡΠ»ΠΊΠΈ.
Hover.css, ΠΠΎΠ»Π»Π΅ΠΊΡΠΈΡ CSS3-ΡΡΡΠ΅ΠΊΡΠΎΠ² Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ ΠΊ ΡΡΡΠ»ΠΊΠ°ΠΌ, ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌ, Π»ΠΎΠ³ΠΎΡΠΈΠΏΠ°ΠΌ, SVG, ΠΈΠ·Π±ΡΠ°Π½Π½ΡΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌ ΠΈ Ρ. Π. ΠΠ΅Π³ΠΊΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ ΠΊ Π²Π°ΡΠΈΠΌ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ, ΠΈΠ·ΠΌΠ΅Π½ΡΡΡ ΠΈΠ»ΠΈ ΠΡΠ΅ ΡΡΡΠ΅ΠΊΡΡ Hover.css ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ ΠΎΠ΄ΠΈΠ½ ΡΠ»Π΅ΠΌΠ΅Π½Ρ (Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΡ ΠΏΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², Π³Π΄Π΅ ΡΡΠΎ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ), ΡΠ²Π»ΡΡΡΡΡ ΡΠ°ΠΌΠΎΠ΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΡΠΌΠΈ, ΠΏΠΎΡΡΠΎΠΌΡ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π»Π΅Π³ΠΊΠΎ ΠΊΠΎΠΏΠΈΡΠΎΠ²Π°ΡΡ ΠΈ Π²ΡΡΠ°Π²Π»ΡΡΡ ΠΈΡ ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ CSS ΠΠ΅ΡΠ·ΠΎΡΡΡ ΠΈ ΠΠΠΠ¬Π¨Π Π²ΠΊΡΡΠΎΠ². ΠΠ½ΠΎΠ³ΠΈΠ΅ ΡΡΡΠ΅ΠΊΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ ΡΡΠ½ΠΊΡΠΈΠΈ CSS3, ΡΠ°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Ρ, ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π½ΠΈΡ ΠΈ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ. Π‘ΡΠ°ΡΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ ΡΡΠΈ ΡΡΠ½ΠΊΡΠΈΠΈ, ΠΌΠΎΠ³ΡΡ ΠΏΠΎΡΡΠ΅Π±ΠΎΠ²Π°ΡΡ
25 CSS-ΡΡΡΠ΅ΠΊΡΠΎΠ² Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ, ΠΠΎΠ»Π»Π΅ΠΊΡΠΈΡ ΠΎΡΠΎΠ±ΡΠ°Π½Π½ΡΡ Π²ΡΡΡΠ½ΡΡ Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΡΡ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ² ΠΊΠΎΠ΄Π° HTML ΠΈ CSS Π΄Π»Ρ ΡΡΡΠ΅ΠΊΡΠΎΠ² Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΊΡΡΡΠΎΡΠ°.ΠΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠ΅ ΡΠ΅Π½ΡΡΠ±ΡΡΡΠΊΠΎΠΉ ΠΊΠΎΠ»Π»Π΅ΠΊΡΠΈΠΈ 2018 Π³. 3 Π½ΠΎΠ²ΠΈΠ½ΠΊΠΈ. Π‘Π΅Π³ΠΎΠ΄Π½Ρ Π²Ρ Π½Π°ΡΡΠΈΡΠ΅ΡΡ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ ΡΡΡΠ΅ΠΊΡΠΎΠ² Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡ. ΠΡΠΈ ΡΡΡΠ΅ΠΊΡΡ Π±ΡΠ΄ΡΡ ΠΎΡΠ΅Π½Ρ ΠΏΠΎΠ»Π΅Π·Π½Ρ Π² Π±ΡΠ΄ΡΡΠ΅ΠΌ, ΠΊΠΎΠ³Π΄Π° Π²Ρ Π±ΡΠ΄Π΅ΡΠ΅ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ, Π΄ΡΡΠ³ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π½Π° ΡΠΎΡΠΌΠ΅ ΠΈ Ρ. Π. ΠΠ°ΡΠ΅ΠΌ Π²Ρ ΡΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΡΠ±ΡΠ°ΡΡ ΠΈΠ΄Π΅Π°Π»ΡΠ½ΡΠΉ ΡΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ Π²Π°ΡΠΈΠΌΠΈ ΠΏΠΎΡΡΠ΅Π±Π½ΠΎΡΡΡΠΌΠΈ. ΠΡΠΈ ΡΡΡΠ΅ΠΊΡΡ ΠΎΡΠ½ΠΎΠ²Π°Π½Ρ Π½Π° Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ CSS, ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Π°Ρ ΠΈ ΠΎΡΠ½ΠΎΠ²Π½ΡΡ ΠΊΠΎΠΌΠ°Π½Π΄Π°Ρ . ΠΡΠ°ΠΊ, ΡΠ΅Π³ΠΎΠ΄Π½Ρ Ρ
Π¦Π²Π΅Ρ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ Squarespace
ΠΠ°ΠΊ ΡΠΎΠ·Π΄Π°ΡΡ ΡΡΡΠ΅ΠΊΡΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π² Squarespace // Squarespace, ΠΊΠΎΠ΄ Π³ΠΎΡΠΎΠ², ΠΏΠΎΡΠΌΠΎΡΡΠΈΡΠ΅ ΠΊΡΠ°ΡΠΊΠΎΠ΅ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²ΠΎ ΠΈ Π²ΠΎΠ·ΡΠΌΠΈΡΠ΅ ΡΠ΅ ΠΊΠΎΠ΄Ρ CSS, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠΊΠΎΠΏΠΈΡΡΠΉΡΠ΅ ΠΈ Π²ΡΡΠ°Π²ΡΡΠ΅ Π½ΠΈΠΆΠ΅! Π Squarespace Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ΅ΠΆΠΈΠΌ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π°.Π ΡΡΠΎΠΌ ΠΏΠΎΡΡΠ΅ Π²Ρ ΡΠ·Π½Π°Π΅ΡΠ΅, ΠΊΠ°ΠΊ ΡΡΠΎ ΡΠ΄Π΅Π»Π°ΡΡ. ΠΠ΄ΠΈΠ½ ΠΈΠ· ΡΠΏΠΎΡΠΎΠ±ΠΎΠ² ΡΠ΄Π΅Π»Π°ΡΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π²Π°ΡΠ΅Π³ΠΎ ΡΠ°Π±Π»ΠΎΠ½Π° Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΡΠΌΠΈ ΠΈ ΡΠΈΡΠΌΠ΅Π½Π½ΡΠΌΠΈ, Π½ΠΎ ΠΈ ΠΏΡΠΈΠ³Π»Π°ΡΠΈΡΡ Π²Π°ΡΡ Π°ΡΠ΄ΠΈΡΠΎΡΠΈΡ ΡΠ΅Π»ΠΊΠ½ΡΡΡ ΠΌΡΡΡΡ — ΡΡΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°ΡΠ΅Π»ΡΠ½ΡΠΉ ΡΠ΅ΠΆΠΈΠΌ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΊΡΡΡΠΎΡΠ°.
ΠΠ°ΠΊ ΠΌΠ½Π΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ²Π΅Ρ Π±Π»ΠΎΠΊΠ° ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ?, Π― Π΄ΠΎΠ±Π°Π²ΠΈΠ» ΡΠ΅ΡΠ½ΡΠΉ Π±Π»ΠΎΠΊ ΠΊΠ½ΠΎΠΏΠΎΠΊ Ρ Π±Π΅Π»ΡΠΌ ΡΠ΅ΠΊΡΡΠΎΠΌ Π½Π° ΠΎΠ΄Π½ΠΎΠΉ ΠΈΠ· ΡΠ²ΠΎΠΈΡ ΡΡΡΠ°Π½ΠΈΡ, Π½ΠΎ Ρ Ρ ΠΎΡΡ, ΡΡΠΎΠ±Ρ ΡΡΠΎ Π±ΡΠ»ΠΎ. Sqs-block-button .sqs-block-button -element — small: hover {background-color: Π²ΡΠ΅ Π·Π½Π°Π½ΠΈΡ ΠΈ ΠΎΠ±ΡΡΠ΅Π½ΠΈΠ΅, Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΡΠ΅ Π΄Π»Ρ Π΄ΠΎΡΡΠΈΠΆΠ΅Π½ΠΈΡ ΡΡΠΏΠ΅Ρ Π° Ρ Π½ΠΎΠ²ΡΠΌ ΡΠ²Π΅ΡΠΎΠΌ ΠΊΠ½ΠΎΠΏΠΊΠΈ Squarespace — ΠΠ·ΠΌΠ΅Π½ΠΈΡΠ΅ ΡΠ²Π΅Ρ ΡΠΎΠ½Π° ΠΊΠ½ΠΎΠΏΠΊΠΈ.Π¦Π²Π΅Ρ ΡΠ΅ΠΊΡΡΠ° ΠΊΠ½ΠΎΠΏΠΊΠΈ — ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠ²Π΅ΡΠ° ΡΠ΅ΠΊΡΡΠ°. Π¨ΡΠΈΡΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ — ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΡΠΈΡΡΠ°. Π Π°Π·ΠΌΠ΅Ρ ΡΠ΅ΠΊΡΡΠ° Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ Π΄Π»Ρ ΠΊΠ½ΠΎΠΏΠΎΠΊ Π±Π»ΠΎΠΊΠ° ΡΠΎΡΠΌΡ ΠΈ Π±Π»ΠΎΠΊΠ° Π½ΠΎΠ²ΠΎΡΡΠ½ΠΎΠΉ ΡΠ°ΡΡΡΠ»ΠΊΠΈ. Π‘ΠΎΠ²Π΅Ρ: ΠΠ»Ρ ΡΡΠΈΠ»Ρ Outline ΡΠ΅ΠΊΡΡ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ ΠΊΠ°ΠΊ ΡΠ΅ΡΠ½ΡΠΉ ΠΈΠ»ΠΈ Π±Π΅Π»ΡΠΉ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ°, Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΠ²Π΅ΡΠ° ΠΊΠ½ΠΎΠΏΠΊΠΈ.
ΠΠ°ΠΊ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΊ ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌ Squarespace, ΠΠ»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π½ΡΠΉ ΡΠ²Π΅Ρ ΡΠ΅ΠΊΡΡΠ°. Π¨ΡΠΈΡΡ. ΠΠΎ ΡΡΠΎ, Π΅ΡΠ»ΠΈ Π²Π°ΠΌ Π½ΡΠΆΠ½Π° Π±ΠΎΠ»Π΅Π΅ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ½Π°Ρ ΠΈ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½Π°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ°, ΡΠ΅ΠΌ ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π΅Ρ Squarespace? ΠΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΠΏΠΎΡΡΡΠΎΠΈΡΡ Π²ΡΡΠΎΠΊΠΈΠΉ ΡΠ²Π΅Ρ ΠΊΠ½ΠΎΠΏΠΊΠΈ.Π¦Π²Π΅Ρ ΡΠ΅ΠΊΡΡΠ°. ΠΠ»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π½ΡΠΉ ΡΠ²Π΅Ρ ΠΊΠ½ΠΎΠΏΠΊΠΈ (Π΄Π»Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π½Π°Π΄ ΡΠ°Π·Π΄Π΅Π»Π°ΠΌΠΈ Π±Π°Π½Π½Π΅ΡΠ°) ΠΠ»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π½ΡΠΉ ΡΠ²Π΅Ρ ΡΠ΅ΠΊΡΡΠ°. Π¨ΡΠΈΡΡ. ΠΠΎ ΡΡΠΎ, Π΅ΡΠ»ΠΈ Π²Π°ΠΌ Π½ΡΠΆΠ½Π° Π±ΠΎΠ»Π΅Π΅ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ½Π°Ρ ΠΈ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½Π°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ°, ΡΠ΅ΠΌ ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π΅Ρ Squarespace? ΠΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΡΠΎΠ·Π΄Π°ΡΡ Π²Π΅Π±-ΡΠ°ΠΉΡ Ρ Π²ΡΡΠΎΠΊΠΎΠΉ ΠΊΠΎΠ½Π²Π΅ΡΡΠΈΠ΅ΠΉ, Π²Π°ΠΆΠ½ΠΎ, ΡΡΠΎΠ±Ρ ΠΏΡΠΈΠ·ΡΠ²Ρ ΠΊ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ ΠΏΠΎΡΠ²Π»ΡΠ»ΠΈΡΡ. ΠΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΡΡΡΠ΅ΠΊΡΠ° Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΊ ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌ — ΠΎΡΠ»ΠΈΡΠ½ΡΠΉ ΡΠΏΠΎΡΠΎΠ±
Π’Π΅ΡΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ
ΠΠ½ΠΎΠΏΠΊΠΈ Ρ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ, text-align: center; ΡΠ΅ΠΊΡΡΠΎΠ²ΠΎΠ΅ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅: Π½Π΅Ρ; display: ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΠ΅Π»Π΅ΠΊΡΠΎΡ: hover, ΡΡΠΎΠ±Ρ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΡΠΈΠ»Ρ ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΠΊΠΎΠ³Π΄Π° Π²Ρ Π½Π°Π²ΠΎΠ΄ΠΈΡΠ΅ Π½Π° Π½Π΅Π΅ ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ ΠΌΡΡΠΈ.Π‘ΠΎΠ²Π΅Ρ: ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅. Π‘Π΅Π»Π΅ΠΊΡΠΎΡ: hover ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ Π²ΡΠ±ΠΎΡΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° Π½ΠΈΡ ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ ΠΌΡΡΠΈ. Π‘ΠΎΠ²Π΅Ρ: Π‘Π΅Π»Π΅ΠΊΡΠΎΡ: hover ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π»Ρ Π²ΡΠ΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², Π° Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ Π΄Π»Ρ ΡΡΡΠ»ΠΎΠΊ. Π‘ΠΎΠ²Π΅Ρ: ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΠ΅Π»Π΅ΠΊΡΠΎΡ: link Π΄Π»Ρ ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΠΈ ΡΡΡΠ»ΠΎΠΊ Π½Π° Π½Π΅ΠΏΠΎΡΠ΅ΡΠ΅Π½Π½ΡΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ, ΡΠ΅Π»Π΅ΠΊΡΠΎΡ: visit Π΄Π»Ρ ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΠΈ ΡΡΡΠ»ΠΎΠΊ Π½Π° ΠΏΠΎΡΠ΅ΡΠ΅Π½Π½ΡΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ ΠΈ ΡΠ΅Π»Π΅ΠΊΡΠΎΡ: active Π΄Π»Ρ ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΠΈ Π°ΠΊΡΠΈΠ²Π½ΠΎΠΉ ΡΡΡΠ»ΠΊΠΈ.
ΠΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ ΡΠ΅ΠΊΡΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° ΠΌΡΡΠΈ, ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π΄Π»Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΡ: .ΠΠ½ΠΎΠΏΠΊΠ° ΡΠ΅Π½ΠΈ Π’Π΅Π½Ρ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ. ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ box-shadow, ΡΡΠΎΠ±Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠ΅Π½ΠΈ ΠΊ ΠΊΠ½ΠΎΠΏΠΊΠ΅: Example.button1 {box-shadow: 0 8px 16px 0 rgba (0,0,0,0.2), 0 6px 20px 0 rgba (0
Button Hover Test, xxxxxxxxxx. 7. 1.
ovde ide
. 5.
ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠΈΠΉΡΡ ΡΠΏΠΈΡΠΎΠΊ p >. ΠΡΠΈΠ²Π΅Ρ Π²ΡΠ΅ΠΌ! ΠΡΠΎ ΠΌΠΎΠΉ ΠΊΠΎΠ΄: test xxx ΠΠΎΠ³Π΄Π° Ρ Π·Π°ΠΏΡΡΠΊΠ°Ρ Π΅Π³ΠΎ, Ρ ΠΏΠΎΠ»ΡΡΠ°Ρ ΡΠ½ΠΈΠΌΠΎΠΊ ΡΠΊΡΠ°Π½Π° β 1. ΠΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½Π° ΠΏΡΠΈΠΊΡΠ΅ΠΏΠ»Π΅Π½Π½ΠΎΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΈ. ΠΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡ Β«ΠΡΠΏΡΠ°Π²ΠΈΡΡΒ» Ρ ΠΏΠΎΠ»ΡΡΠ°Ρ ΡΠ΅ΠΌΡ ΠΏΠΎΠ΄ΠΊΠ°ΡΡΠ° ΡΡΠ°ΡΠ΅ΠΉ
ΠΠ°ΠΊ Π΄Π»Ρ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠ²Π΅ΡΠ° ΠΊΠ½ΠΎΠΏΠΊΠΈ squarespace
ΠΠ½ΠΎΠΏΠΊΠΈ ΡΡΠΈΠ»Π΅ΠΉ — Π‘ΠΏΡΠ°Π²ΠΊΠ° Squarespace, Π‘ΡΠ°Π½Π΄Π°ΡΡΠ½ΡΠΌ ΡΡΠΈΠ»Π΅ΠΌ Π΄Π»Ρ Π²ΡΠ΅Ρ ΠΊΠ½ΠΎΠΏΠΎΠΊ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΊΠ½ΠΎΠΏΠΊΠ° Ρ Π±Π΅Π»ΡΠΌ ΡΠ΅ΠΊΡΡΠΎΠΌ / ΡΠ΅ΡΠ½ΡΠΌ ΡΠΎΠ½ΠΎΠΌ Π, ΠΈ ΡΠ²Π΅Ρ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ ΡΠ²Π΅Ρ ΡΠ΅ΠΊΡΡΠ° Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠ΅.background-color Π±ΡΠ΄Π΅Ρ Button Color — ΠΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ²Π΅Ρ ΡΠΎΠ½Π° ΠΊΠ½ΠΎΠΏΠΊΠΈ. Π¦Π²Π΅Ρ ΡΠ΅ΠΊΡΡΠ° ΠΊΠ½ΠΎΠΏΠΊΠΈ — ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠ²Π΅ΡΠ° ΡΠ΅ΠΊΡΡΠ°. Π¨ΡΠΈΡΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ — ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΡΠΈΡΡΠ°. Π Π°Π·ΠΌΠ΅Ρ ΡΠ΅ΠΊΡΡΠ° Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ Π΄Π»Ρ ΠΊΠ½ΠΎΠΏΠΎΠΊ Π±Π»ΠΎΠΊΠ° ΡΠΎΡΠΌΡ ΠΈ Π±Π»ΠΎΠΊΠ° Π½ΠΎΠ²ΠΎΡΡΠ½ΠΎΠΉ ΡΠ°ΡΡΡΠ»ΠΊΠΈ. Π‘ΠΎΠ²Π΅Ρ: ΠΠ»Ρ ΡΡΠΈΠ»Ρ Outline ΡΠ΅ΠΊΡΡ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ ΠΊΠ°ΠΊ ΡΠ΅ΡΠ½ΡΠΉ ΠΈΠ»ΠΈ Π±Π΅Π»ΡΠΉ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ°, Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΠ²Π΅ΡΠ° ΠΊΠ½ΠΎΠΏΠΊΠΈ.
ΠΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠ²Π΅ΡΠΎΠ² — Π‘ΠΏΡΠ°Π²ΠΊΠ° Squarespace, ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ²Π΅ΡΠ° ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΠΈΠ·ΠΌΠ΅Π½ΠΈΠ² ΡΠ²Π΅ΡΠΎΠ²ΡΡ ΡΠ΅ΠΌΡ Π΄Π»Ρ ΡΠ°Π·Π΄Π΅Π»Π°, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΎΠ½Π° Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ.ΠΠ»ΠΎΠΊΠΈ ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΈ Π±Π»ΠΎΠΊΠΈ ΡΠΎ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠΌΠΈ ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌΠΈ Π²ΡΠΎΠ΄Π΅ Π‘ΠΏΠ°ΡΠΈΠ±ΠΎ! ΠΡΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎ ΡΡΠ°Π±ΠΎΡΠ°Π»ΠΎ. ΠΠ½Π΅ ΡΠ°ΠΊΠΆΠ΅ Π½ΡΠΆΠ½ΠΎ Π±ΡΠ»ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ²Π΅Ρ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ, Π½ΠΎ Ρ ΡΠ°Π·ΠΎΠ±ΡΠ°Π»ΡΡ. ΠΠ»Ρ ΡΠ΅Ρ , ΠΊΡΠΎ ΠΌΠΎΠΆΠ΅Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ ΡΡΠΎ ΠΏΠΎΠ·ΠΆΠ΅, Π²ΠΎΡ ΠΊΠΎΠ΄, ΠΊΠΎΡΠΎΡΡΠΉ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π» Π΄Π»Ρ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠ²Π΅ΡΠ° Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ: .form-wrapper input [type = submit]: hover {background: # ffffb3; } Π‘ΠΏΠ°ΡΠΈΠ±ΠΎ, ΠΎΠΏΠΎ!
ΠΠ°ΠΊ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΡΠΈΠ»Ρ ΡΠΎΠ»ΡΠΊΠΎ Π΄Π»Ρ ΠΎΠ΄Π½ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ ?, ΠΠ°ΠΊ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ²Π΅Ρ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π² ΠΊΠ²Π°Π΄ΡΠ°ΡΠ½ΠΎΠΌ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²Π΅? Π ΠΏΠΎΠ»Π΅ Β«Π’Π΅ΠΊΡΡΒ» Π²Π²Π΅Π΄ΠΈΡΠ΅ ΡΠ΅ΠΊΡΡ Π΄Π»Ρ ΠΌΠ΅ΡΠΊΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ.ΠΡ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΠΌ, ΡΡΠΎΠ±Ρ ΡΠ΅ΠΊΡΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π½Π΅ ΠΏΡΠ΅Π²ΡΡΠ°Π» 25 ΡΠΈΠΌΠ²ΠΎΠ»ΠΎΠ². Π ΠΏΠΎΠ»Π΅ URL ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Π° ΠΏΠΎ ΠΊΠ»ΠΈΠΊΡ Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ Π²Π΅Π±-Π°Π΄ΡΠ΅Ρ ΠΈΠ»ΠΈ ΡΠ΅Π»ΠΊΠ½ΠΈΡΠ΅, ΡΡΠΎΠ±Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ ΡΠΈΠΏΡ ΡΡΡΠ»ΠΎΠΊ. ΠΠ°ΡΡΡΠΎΠΉΡΠ΅ ΡΠ°Π·ΠΌΠ΅Ρ ΠΈ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ. ΠΠ°ΠΆΠΌΠΈΡΠ΅ ΠΡΠΈΠΌΠ΅Π½ΠΈΡΡ, ΡΡΠΎΠ±Ρ ΡΠΎΡ ΡΠ°Π½ΠΈΡΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ. Π‘ΡΠΈΠ»Ρ ΠΊΠ½ΠΎΠΏΠΊΠΈ. ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΠ΅Π΄Π°ΠΊΡΠΎΡ Π±Π»ΠΎΠΊΠ° ΠΊΠ½ΠΎΠΏΠΎΠΊ, ΡΡΠΎΠ±Ρ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ°Π·ΠΌΠ΅Ρ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΈ
ΠΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ²Π΅Ρ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ javascript
ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ²Π΅Ρ ΡΠΎΠ½Π° ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ ΠΌΡΡΠΈ, ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ²Π΅Ρ ΡΠΎΠ½Π° ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΠΊΠΎΠ³Π΄Π° ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ ΠΌΡΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ Π½Π° Π½Π΅Π΅, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ Javascript, Π½ΠΎ ΠΠ°ΠΌΠ½ΠΎΠ³ΠΎ Π±ΠΎΠ»Π΅Π΅ ΠΏΡΠΎΡΡΠΎΠΉ ΡΠΏΠΎΡΠΎΠ± — Π²ΠΎΠΎΠ±ΡΠ΅ Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Javascript, Π° Π²ΠΌΠ΅ΡΡΠΎ ΡΡΠΎΠ³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ CSS.
Javascript change color ΠΊΠ½ΠΎΠΏΠΊΠΈ, Π½Π°Π²ΠΎΠ΄Ρ ΠΊΡΡΡΠΎΡ ΠΠΠ, ΠΠ΅Ρ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ Π² javascript, ΠΏΡΠΎΡΡΠΎ ΠΏΠΎΠ΄ΠΎΠΉΠ΄Π΅Ρ css. Π’Π°ΠΊΠΆΠ΅, Π΅ΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΡΠΎΡ ΡΠ°Π½ΠΈΡΡ ΡΠ²Π΅Ρ, ΠΏΡΠΈ Π½Π°ΠΆΠ°ΡΠΈΠΈ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠΉ ΠΊΠ»Π°ΡΡ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ. jQuery (function ($) ΠΠ½Π΅ Π½ΡΠΆΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ²Π΅Ρ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ°.ΠΠΎΡ ΠΌΠΎΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅, Π½ΠΎ ΠΎΠ½ΠΎ Π½Π΅ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ. a.button {display: -moz-inline-stack; Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠΉ Π±Π»ΠΎΠΊ; ΡΠΈΡΠΈΠ½Π°: 391 ΠΏΠΈΠΊΡ; Π²ΡΡΠΎΡΠ°: 62 ΠΏΠΈΠΊΡ;
ΠΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠ²Π΅ΡΠ° ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ°, ΠΠΎΡΠΎΡΠ΅ Π³ΠΎΠ²ΠΎΡΡ, ΡΡΠΎ ΠΌΠΎΠΉ Π²ΡΠΎΡΠΎΠΉ Π΄Π΅Π½Ρ ΠΈΠ·ΡΡΠ΅Π½ΠΈΡ HTML5, CSS3 ΠΈ javascript. Π― ΡΠΆΠ΅ ΡΠ΅ΠΉΡΠ°Ρ Ρ ΠΎΡΡ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΌΠ΅Π½Ρ Ρ Π±Π»Π΅ΡΡΡΡΠΈΠΌΠΈ ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌΠΈ. img: hover. ΠΡΠΎΡ ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π² ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΈ, ΡΡΠΎΠ±Ρ Π΄Π°ΡΡ ΠΆΠ΅Π»ΡΡΠΉ ΡΠ²Π΅Ρ ΡΠΎΠ½Π° ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° (ΠΊΠΎΠ³Π΄Π° ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ ΠΌΡΡΠΈ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π½Π°Π΄ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ). # img-display. ΠΡΠΎ ΡΠ°Π·Π΄Π΅Π»Π΅Π½ΠΈΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π±ΡΠ»ΠΎ ΡΠΎΠ·Π΄Π°Π½ΠΎ ΡΠ°Π½Π΅Π΅, ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°Π΅Ρ ΠΏΠΎΠ΄ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌΠΈ ΠΎΡΡΡΡΠΏ Π² 10 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ.# ΡΠ΅ΠΊΡΡΠΎΠ²ΡΠΉ Π΄ΠΈΡΠΏΠ»Π΅ΠΉ. ΠΡ ΡΠΎΠΆΠ΅ Ρ ΠΎΡΠΈΠΌ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°ΡΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ°, Π½Π΅ ΡΠ°ΠΊ Π»ΠΈ? Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, ID ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΠΊ ΡΠ΅ΠΊΡΡΡ
ΠΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ²Π΅Ρ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° inline css
ΠΠ°ΠΊ Π½Π°ΠΏΠΈΡΠ°ΡΡ: hover Π²ΠΎ Π²ΡΡΡΠΎΠ΅Π½Π½ΠΎΠΌ CSS ?, Π’Π°ΠΊΠΆΠ΅ ΡΠΌ. Π Π°Π·Π΄Π΅Π» Β«ΠΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠ°Π±Π»ΠΈΡΡ ΡΡΠΈΠ»Π΅ΠΉΒ» Π΄Π»Ρ Π½Π΅ΠΊΠΎΡΠΎΡΡΡ ΡΠ΅ΠΎΡΠ΅ΡΠΈΡΠ΅ΡΠΊΠΈΡ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ ΠΏΠΎ ΡΡΠΎΠΌΡ Π²ΠΎΠΏΡΠΎΡΡ. ΠΠ½Π΅ ΠΎΠ½ ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΠΈΠ»ΡΡ Π΄Π»Ρ Π½Π΅ΠΊΠΎΡΠΎΡΡΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ, ΠΌΠ΅ΡΠΎΠ΄ ΡΠ°ΠΊΠΎΠΉ: Π Π΄Π°Π½Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠΉ ΠΊΠΎΠ΄: «background-color: red;» ΡΡΠΎ ΡΠ²Π΅Ρ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»Ρ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ, ΠΏΠΎΠΌΠ΅ΡΡΠΈΡΠ΅ ΡΡΠ΄Π° Π½ΡΠΆΠ½ΡΠΉ ΡΠ²Π΅Ρ. CSS Inline-block CSS Align CSS Combinators ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ background-color, ΡΡΠΎΠ±Ρ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ²Π΅Ρ ΡΠΎΠ½Π° ΠΊΠ½ΠΎΠΏΠΊΠΈ: ΡΠ΅Π»Π΅ΠΊΡΠΎΡ hover Π΄Π»Ρ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΡΠΈΠ»Ρ
ΠΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ²Π΅Ρ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° ΡΠΎ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠΌ css ?, ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΠΏΡΠΈΠΌΠ΅Ρ Π²Π·ΡΡ ΠΈΠ· stackoverflow: ΠΠ°ΠΊ Π½Π°ΠΏΠΈΡΠ°ΡΡ: hover Π²ΠΎ Π²ΡΡΡΠΎΠ΅Π½Π½ΠΎΠΌ CSS ?, h3> a: hover Π²ΠΎ Π²ΡΡΡΠΎΠ΅Π½Π½ΠΎΠΌ CSS h3>. GeeksforGeeks a>. Body>. ΠΠ°ΠΊ ΠΏΡΠ΅Π΄ΠΎΡΠ²ΡΠ°ΡΠΈΡΡ ΡΠ°Π·ΡΡΠ²Ρ ΡΡΡΠΎΠΊ Π² ΡΠΏΠΈΡΠΊΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS? ΠΠ°ΠΊ ΡΠ±ΡΠ°ΡΡ ΠΏΡΠΎΠ±Π΅Π» ΠΌΠ΅ΠΆΠ΄Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ inline-block? 6 Π»ΡΡΡΠΈΡ
ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠΎΠ² CSS, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ»Π΅Π΄ΡΠ΅Ρ Π·Π½Π°ΡΡ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°ΡΠ΅Π»ΡΠ½ΡΡ
Π²Π΅Π±-ΡΠ°ΠΉΡΠΎΠ²; ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ ΠΌΠ΅ΠΆΠ΄Ρ Π΄Π²ΡΠΌΡ ΡΡΡΠΎΠΊΠ°ΠΌΠΈ Π² ΡΠ°Π±Π»ΠΈΡΠ΅ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ CSS? Π ΡΠ΅ΠΌ ΡΠ°Π·Π½ΠΈΡΠ° ΠΌΠ΅ΠΆΠ΄Ρ display: inline ΠΈ display: inline-block Π² CSS? ΠΠ°ΠΊ Π½Π°ΠΏΠΈΡΠ°ΡΡ: Π½Π°Π²Π΅ΡΡΠΈ ΠΊΡΡΡΠΎΡ Π½Π° Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠΉ CSS? ΠΠΎΠ³Π΄Π° ΠΌΡ Π²ΡΠ±ΠΈΡΠ°Π΅ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠΎ Π΅Π³ΠΎ ΠΡΠΈ ΡΠ°ΠΊΠΎΠΌ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π΅ ΡΡΡΡΠΎΠΉΡΡΠ² Π²Π²ΠΎΠ΄Π°, ΠΊΠΎΡΠΎΡΡΠΉ Ρ Π½Π°Ρ Π΅ΡΡΡ ΡΠ΅Π³ΠΎΠ΄Π½Ρ, ΡΡΠΈ ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡΡ ΡΠ°ΠΊΠΆΠ΅ Π²Π΅Π΄ΡΡ ΡΠ΅Π±Ρ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΠΎ-ΡΠ°Π·Π½ΠΎΠΌΡ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΠΎΠ³ΠΎ, Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΡΠ΅Ρ Π»ΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΌΡΡΠΈ π, ΠΊΠ»Π°Π²ΠΈΠ°ΡΡΡΡ β¨οΈ ΠΈΠ»ΠΈ ΡΠ΅Π½ΡΠΎΡΠ½ΠΎΠ³ΠΎ ΡΠΊΡΠ°Π½Π° π±, ΡΡΠΎ ΠΌΠΎΠΆΠ΅Ρ Π·Π°ΡΡΡΠ΄Π½ΠΈΡΡ ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΈ ΠΊΠΎΠ³Π΄Π° ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°ΡΡ ΡΡΠΈ ΡΠΈΡΡΠ°ΡΠΈΠΈ. ΠΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡ Π’ΠΈΠΏΠΈΡΠ½ΡΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠΌ ΡΡΠΎΠ³ΠΎ ΡΠ²Π»ΡΠ΅ΡΡΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΊΡΡΡΠΎΡΠ° ΠΌΡΡΠΈ Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ. ΠΡΠ»ΠΈ Π½Π°Π²Π΅ΡΡΠΈ ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ ΠΌΡΡΠΈ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡ Π½ΠΈΠΆΠ΅, Π²Ρ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅, ΡΡΠΎ ΠΎΠ½Π° ΡΡΠ°Π½Π΅Ρ ΠΆΠ΅Π»ΡΠΎΠΉ. ΠΡΠ»ΠΈ ΡΡ Π½Π°Π²Π΅Π΄Π΅ΡΡΡΡ Π½Π°Π΄ΠΎ ΠΌΠ½ΠΎΠΉ, Ρ ΡΡΠ°Π½Ρ ΠΆΠ΅Π»ΡΡΠΌ ΠΠ° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠΌ ΡΡΡΡΠΎΠΉΡΡΠ²Π΅ π±, ΠΏΠΎ ΡΡΡΠΈ, Π΅ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠ΄Π½ΠΎ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΡΠΏΠΎΠ»Π½ΠΈΡΡ Ρ Π»ΡΠ±ΡΠΌ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ, — ΡΡΠΎ ΠΊΠΎΡΠ½ΡΡΡΡΡ / ΡΠ΅Π»ΠΊΠ½ΡΡΡ Π΅Π³ΠΎ. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π·Π°ΠΌΠ΅ΡΠΈΡΡ, ΡΡΠΎ Π΅ΡΠ»ΠΈ Π²Ρ Π½Π°ΠΆΠΌΠ΅ΡΠ΅ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡ Π²ΡΡΠ΅, ΠΎΠ½Π° ΡΠ°ΠΊΠΆΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ ΡΠ²Π΅Ρ, Π½Π΅ΡΠΌΠΎΡΡΡ Π½Π° ΡΠΎ, ΡΡΠΎ Π²Ρ Π½Π΅ Β«ΠΏΡΠΎΡΡΠΎΒ» Π½Π°Π²ΠΎΠ΄ΠΈΡΠ΅ Π½Π° Π½Π΅Π΅ ΠΊΡΡΡΠΎΡ.ΠΡΠΎ ΡΠ²ΡΠ·Π°Π½ΠΎ Ρ ΡΠ΅ΠΌ, ΡΡΠΎ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ
ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ
ΡΠΎΠ±ΡΡΠΈΡ, Π·Π°ΠΏΡΡΠΊΠ°ΡΡΠΈΠ΅ ΡΡΠΈ ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡΡ, ΠΌΠΎΠ³ΡΡ ΡΠ»ΠΈΠ²Π°ΡΡΡΡ. ΠΡ ΡΠ°ΠΊΠΆΠ΅ ΡΠ²ΠΈΠ΄ΠΈΠΌ ΠΠ°ΠΊΠΎΠ½Π΅Ρ, Π΄Π»Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ ΠΊΠ»Π°Π²ΠΈΠ°ΡΡΡΠ½ΡΡ
ΡΡΡΡΠΎΠΉΡΡΠ² β¨οΈ ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡ ΠΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡ ΠΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΠΌΡΡΠΈ π ΠΈΠ»ΠΈ Π°Π½Π°Π»ΠΎΠ³ΠΈΡΠ½ΠΎΠ³ΠΎ ΡΠΊΠ°Π·ΡΠ²Π°ΡΡΠ΅Π³ΠΎ ΡΡΡΡΠΎΠΉΡΡΠ²Π° ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡ ΠΠ°ΠΆΠΌΠΈ Π½Π° ΠΌΠ΅Π½Ρ! ΠΠ»Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ ΠΊΠ»Π°Π²ΠΈΠ°ΡΡΡΡ β¨οΈ ΡΠΎΠΊΡΡΠΈΡΠΎΠ²ΠΊΠ° Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ΅ ΠΎΡΠ΅Π½Ρ ΠΏΠΎΡ
ΠΎΠΆΠ° Π½Π° Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΊΡΡΡΠΎΡΠ° Π½Π° Π½Π΅Π³ΠΎ Π΄Π»Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ ΠΌΡΡΠΈ. ΠΠ½Π΅ Π½ΡΠ°Π²ΠΈΡΡΡ Π΄ΡΠΌΠ°ΡΡ ΠΎ ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡΠ΅ ΠΠ»Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ ΡΠ΅Π½ΡΠΎΡΠ½ΡΡ
ΡΠΊΡΠ°Π½ΠΎΠ² π± ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡ ΠΠ°ΠΊΠΎΠ½Π΅Ρ, ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡ ΠΡΠ»ΠΈ Π²Ρ Π±ΡΡΡΡΠΎ Π½Π°ΠΆΠΌΠ΅ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΡ Π½ΠΈΠΆΠ΅, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π½Π΅ Π·Π°ΠΌΠ΅ΡΠΈΡΡ ΠΊΡΠ°ΡΠΊΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠ²Π΅ΡΠ°, Π½ΠΎ Π΅ΡΠ»ΠΈ Π²Ρ Π½Π°ΠΆΠΌΠ΅ΡΠ΅ ΠΈ ΡΠΎΡ
ΡΠ°Π½ΠΈΡΠ΅, Π²Ρ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅, ΠΊΠΎΠ³Π΄Π° ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡ. ΠΠ°ΠΆΠΌΠΈ Π½Π° ΠΌΠ΅Π½Ρ! ΠΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡ ΠΠ° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ
ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ
π±, ΡΠ°ΠΊΠΈΡ
ΠΊΠ°ΠΊ ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡ ΠΡ, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π·Π°ΠΌΠ΅ΡΠΈΠ»ΠΈ, ΡΡΠΎ ΡΡΠ»ΠΎΠ²ΠΈΡ, Π² ΠΊΠΎΡΠΎΡΡΡ
ΠΌΠΎΠΆΠ΅Ρ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ ΠΊΠ°ΠΆΠ΄ΡΠΉ ΠΈΠ· ΡΡΠΈΡ
ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡΠΎΠ², Π½Π΅ ΠΈΡΠΊΠ»ΡΡΠ°ΡΡ Π΄ΡΡΠ³ Π΄ΡΡΠ³Π°. Π€Π°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ, Π² Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²Π΅ ΡΠ»ΡΡΠ°Π΅Π², ΠΊΠΎΠ³Π΄Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠ΅Π»ΠΊΠ°ΡΡ ΠΌΡΡΡΡ, Π²ΡΠΏΠΎΠ»Π½ΡΡΡΡΡ Π²ΡΠ΅ ΡΡΠΈ ΡΡΠ»ΠΎΠ²ΠΈΡ — ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ ΠΌΡΡΠΈ Π½Π°Ρ
ΠΎΠ΄ΠΈΡΡΡ Π½Π°Π΄ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ, ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π°Ρ
ΠΎΠ΄ΠΈΡΡΡ Π² ΡΠΎΠΊΡΡΠ΅ ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π°ΠΊΡΠΈΠ²ΠΈΡΡΠ΅ΡΡΡ. ΠΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΏΡΠΎΠ²Π΅ΡΠΈΡΡ ΡΡΠΎ, ΡΠΎΠ»ΡΠΊΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΠ² ΡΠΎΠ½ ΠΊΠ½ΠΎΠΏΠΊΠΈ, Π΅ΡΠ»ΠΈ Π²ΡΠΏΠΎΠ»Π½ΡΡΡΡΡ Π²ΡΠ΅ ΡΡΠΈ ΡΡΠ»ΠΎΠ²ΠΈΡ. ΠΡΠ»ΠΈ Π²Ρ Π½Π°ΠΆΠΌΠ΅ΡΠ΅ ΠΈ ΡΠ΄Π΅ΡΠΆΠΈΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΡ Π½ΠΈΠΆΠ΅, Π²Ρ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅, ΡΡΠΎ ΠΎΠ½Π° ΡΡΠ°Π½Π΅Ρ ΠΆΠ΅Π»ΡΠΎΠΉ. ΠΠΎ Π΅ΡΠ»ΠΈ Π²Ρ Π½Π°ΠΆΠΌΠ΅ΡΠ΅ ΠΈ ΡΠ΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΠ΅, ΠΎΡΠ²ΠΎΠ΄Ρ ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ ΠΌΡΡΠΈ ΠΎΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Π½Π° Π½Π΅Π³ΠΎ, Π²Ρ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅, ΡΡΠΎ ΠΎΠ½ ΠΏΠΎΡΠ΅ΡΡΠ΅Ρ ΡΠ²Π΅Ρ. Π©Π΅Π»ΠΊΠ½ΠΈΡΠ΅ ΠΌΠ΅Π½Ρ, ΡΠ΄Π΅ΡΠΆΠΈΠ²Π°ΠΉΡΠ΅, Π·Π°ΡΠ΅ΠΌ ΠΏΠ΅ΡΠ΅ΡΠ°ΡΠΈΡΠ΅ ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ ΠΌΡΡΠΈ ΠΡΠ° Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΠΊΠΎΠΌΠ±ΠΈΠ½ΠΈΡΠΎΠ²Π°ΡΡ ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡΡ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ»Π΅Π·Π½ΠΎΠΉ Π΄Π»Ρ ΡΠΎΡΠ½ΠΎΠΉ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΌΡ Ρ
ΠΎΡΠΈΠΌ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°ΡΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ. Π ΡΠ²ΡΠ·ΠΈ Ρ ΡΠ΅ΠΌ, ΡΡΠΎ ΡΡΠΈ ΡΡΠ»ΠΎΠ²ΠΈΡ ΠΌΠΎΠ³ΡΡ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ ΠΈ ΡΠ°ΡΡΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ ΠΎΠ΄Π½ΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎ, ΠΏΠΎΡΡΠ΄ΠΎΠΊ, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΌΡ Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΠΌ ΡΡΠΈ ΡΡΠΈΠ»ΠΈ, Π²Π°ΠΆΠ΅Π½. ΠΠΎΠΏΡΡΡΠΈΠΌ, Ρ Π½Π°Ρ Π΅ΡΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΡΡΠΈΠ»ΠΈ: ΠΠΈΠ΄Π½Ρ Π±ΡΠ΄ΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΡΡΠΈΠ»ΠΈ: hover ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ ΠΏΠΎΠ»ΡΡΠΈΡΡ ΡΡΠΈΠ»ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ, ΡΠΎΠΊΡΡ ΠΈ Π°ΠΊΡΠΈΠ²Π½ΡΠ΅ ΡΡΠΈΠ»ΠΈ ΠΠΎΠ³Π΄Π° Π²Ρ Π½Π°Π²ΠΎΠ΄ΠΈΡΠ΅ ΠΊΡΡΡΠΎΡ ΠΈ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΡΠ΅ΡΠ΅ Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ Π²ΡΡΠ΅, ΡΠΎΠ»ΡΠΊΠΎ ΡΡΠΈΠ»ΠΈ, ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½Π½ΡΠ΅ ΠΊ ΠΠΎΡ ΠΏΠΎΡΠ΅ΠΌΡ Π²Π°ΠΆΠ½ΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ ΡΡΠΈ ΡΡΠΈΠ»ΠΈ Π² ΡΠΎΠΌ ΠΏΠΎΡΡΠ΄ΠΊΠ΅, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΎΠ½ΠΈ ΠΎΠ±ΡΡΠ½ΠΎ Π²ΡΡΡΠ΅ΡΠ°ΡΡΡΡ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π±ΡΠ»ΠΎ ΠΏΠΎΠ½ΡΡΠ½ΠΎ, ΠΊΠΎΠ³Π΄Π° ΡΠ°ΡΠΏΠΎΠ·Π½Π°Π΅ΡΡΡ Π½ΠΎΠ²ΠΎΠ΅ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΠ΅. ΠΠ±ΡΡΠ½ΠΎ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΡΠ½Π°ΡΠ°Π»Π° Π½Π°Π²ΠΎΠ΄ΠΈΡ ΠΊΡΡΡΠΎΡ Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ, Π·Π°ΡΠ΅ΠΌ ΠΏΠ΅ΡΠ΅Π²ΠΎΠ΄ΠΈΡ Π΅Π³ΠΎ Π² ΡΠΎΠΊΡΡ, Π° Π·Π°ΡΠ΅ΠΌ Π°ΠΊΡΠΈΠ²ΠΈΡΡΠ΅Ρ Π΅Π³ΠΎ. ΠΡΠ°ΠΊ, Π»ΡΡΡΠΈΠΉ ΡΠΏΠΎΡΠΎΠ± ΡΠΏΠΎΡΡΠ΄ΠΎΡΠΈΡΡ ΡΡΠΈΠ»ΠΈ ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡΠ°: ΠΡΠ΅ ΡΡΠΈΠ»ΠΈ Π±ΡΠ΄ΡΡ Π²ΠΈΠ΄Π½Ρ ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ ΠΏΠΎΠ»ΡΡΠΈΡΡ ΡΡΠΈΠ»ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ, ΡΠΎΠΊΡΡ ΠΈ Π°ΠΊΡΠΈΠ²Π½ΡΠ΅ ΡΡΠΈΠ»ΠΈ ΠΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡΡ ΠΡΠ΅ ΡΡΠ°ΡΡΠΈ
ΠΠΎΠ³Π΄Π° ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡΡ: hover,: focus ΠΈ: active?
.class
ΠΈΠ»ΠΈ #id
, ΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ ΠΏΡΠ΅Π΄ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠ΅ Π½Π΅ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅ΠΌΡΠ΅ Π°ΡΡΠΈΠ±ΡΡΡ, Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠ΅ Π² DOM. Π‘ ΠΏΠΎΠΌΠΎΡΡΡ ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡΠΎΠ² ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ Π²ΡΠ±ΠΈΡΠ°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ, ΠΊΠΎΡΠΎΡΠΎΠΉ Π΅ΡΠ΅ Π½Π΅Ρ Π² DOM, ΠΈ ΠΊΠΎΡΠΎΡΠ°Ρ ΠΌΠΎΠΆΠ΅Ρ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡΡΡ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΡΠ΅Ρ ΡΠΎ ΡΡΡΠ°Π½ΠΈΡΠ΅ΠΉ.: hover
, : focus
ΠΈ : active
— ΡΡΠΎ ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡΡΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠΌΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ. ΠΠ°ΠΆΠ΄ΡΠΉ ΠΈΠ· Π½ΠΈΡ
ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΠ΅Ρ ΠΎΡΠ΅Π½Ρ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΠΎΠΉ ΡΠΎΡΠΊΠ΅ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π±ΡΠ΄Π΅Ρ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΎΠ²Π°ΡΡ Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΡΡΠ»ΠΊΠΎΠΉ, ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ ΠΈΠ»ΠΈ ΠΏΠΎΠ»Π΅ΠΌ Π²Π²ΠΎΠ΄Π°. ΠΠΎΠ³Π΄Π°
: ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠ΅
: hover
, ΡΠ°ΠΊΠΆΠ΅ Π½Π°Π·ΡΠ²Π°Π΅ΠΌΡΠΉ Β«ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡΠΎΠΌ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΡΠΊΠ°Π·Π°ΡΠ΅Π»ΡΒ», ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ, ΠΊΠΎΠ³Π΄Π° ΡΠΊΠ°Π·ΡΠ²Π°ΡΡΠ΅Π΅ ΡΡΡΡΠΎΠΉΡΡΠ²ΠΎ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΡΠ΅Ρ Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ, Π½Π΅ ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎ Π΅Π³ΠΎ Π°ΠΊΡΠΈΠ²ΠΈΡΡΡ.
ΠΊΠ½ΠΎΠΏΠΊΠ°: Π½Π°Π²Π΅Π΄ΠΈΡΠ΅ ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ ΠΌΡΡΠΈ {ΡΠ²Π΅Ρ ΡΠΎΠ½Π°: # ffdb3a; }
: focus
ΠΈ : Π°ΠΊΡΠΈΠ²Π½ΡΠ΅ ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡΡ
.: hover
Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ Π·Π°ΠΏΡΡΠΊΠ°Π΅ΡΡΡ. ΠΠ»Π°Π²ΠΈΠ°ΡΡΡΠ° Π½Π΅ ΡΡΠΈΡΠ°Π΅ΡΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²ΠΎΠΌ Β«ΡΠΊΠ°Π·Π°ΡΠ΅Π»ΡΒ» ΠΈ ΠΏΠΎΡΡΠΎΠΌΡ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ ΠΊ ΡΡΠΎΠΌΡ ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ. ΠΠΎΠ³Π΄Π°
: ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΡΠΎΠΊΡΡ
: focus
ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ, ΠΊΠΎΠ³Π΄Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π°Ρ
ΠΎΠ΄ΠΈΡΡΡ Π² ΡΠΎΡΡΠΎΡΠ½ΠΈΠΈ, Π³ΠΎΡΠΎΠ²ΠΎΠΌ ΠΊ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΡ, Ρ.Π΅.Π΅. ΠΎΠ½ ΠΈΠΌΠ΅Π΅Ρ ΡΠΎΠΊΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π° Π²Π²ΠΎΠ΄Π°. ΠΠΎΠ³Π΄Π° ΡΡΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΠΌΠΎ, ΡΠ°Π·Π½ΡΠ΅ ΡΡΡΡΠΎΠΉΡΡΠ²Π° Π²Π²ΠΎΠ΄Π° ΠΎΡΠ΅Π½Ρ ΡΠΈΠ»ΡΠ½ΠΎ ΡΠ°Π·Π»ΠΈΡΠ°ΡΡΡΡ.: focus
Π±ΡΠ΄Π΅Ρ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ ΠΏΠΎΡΠ»Π΅ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π½Π°ΡΠ°Π» Π°ΠΊΡΠΈΠ²ΠΈΡΠΎΠ²Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΠΈ, ΡΡΠΎ Π²Π°ΠΆΠ½ΠΎ, ΠΎΠ½ Π±ΡΠ΄Π΅Ρ ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠ°ΡΡ ΠΎΡΡΠ°Π²Π°ΡΡΡΡ Π² ΡΠΎΠΊΡΡΠ΅, ΠΏΠΎΠΊΠ° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π½Π΅ Π°ΠΊΡΠΈΠ²ΠΈΡΡΠ΅Ρ Π΄ΡΡΠ³ΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π΅ΡΠ»ΠΈ Π²Ρ Π½Π°ΠΆΠΌΠ΅ΡΠ΅ ΠΌΡΡΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ Π½ΠΈΠΆΠ΅, Π²Ρ Π·Π°ΠΌΠ΅ΡΠΈΡΠ΅, ΡΡΠΎ ΠΎΠ½Π° ΡΡΠ°Π½Π΅Ρ ΠΆΠ΅Π»ΡΠΎΠΉ, ΠΊΠ°ΠΊ ΡΠΎΠ»ΡΠΊΠΎ Π²Ρ Π½Π°ΡΠ½Π΅ΡΠ΅ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ Ρ ΠΊΠ»ΠΈΠΊΠΎΠΌ. ΠΠ½ΠΎΠΏΠΊΠ° Π²Π΅ΡΠ½Π΅ΡΡΡ Π² ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ, ΡΠΎΠ»ΡΠΊΠΎ Π΅ΡΠ»ΠΈ Π²Ρ Π½Π°ΠΆΠΌΠ΅ΡΠ΅ Π³Π΄Π΅-Π½ΠΈΠ±ΡΠ΄Ρ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅.
ΠΊΠ½ΠΎΠΏΠΊΠ°: ΡΠΎΠΊΡΡ {ΡΠ²Π΅Ρ ΡΠΎΠ½Π°: # ffdb3a; }
: focus
ΠΊΠ°ΠΊ ΠΎ ΡΠΎΡΡΠΎΡΠ½ΠΈΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΊΡΡΡΠΎΡΠ° Π΄Π»Ρ ΠΊΠ»Π°Π²ΠΈΠ°ΡΡΡΠ½ΡΡ
ΡΡΡΡΠΎΠΉΡΡΠ², ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΠΎΠ½ ΡΠΈΠ³Π½Π°Π»ΠΈΠ·ΠΈΡΡΠ΅Ρ ΠΎΠ± Π°Π½Π°Π»ΠΎΠ³ΠΈΡΠ½ΠΎΠΌ Π½Π°ΠΌΠ΅ΡΠ΅Π½ΠΈΠΈ Π΄Π»Ρ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΡ.: focus
ΡΠ½ΠΎΠ²Π° ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π½Π°ΠΆΠΈΠΌΠ°Π΅Ρ Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ. ΠΠ΄Π½Π°ΠΊΠΎ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΎΡΠΌΠ΅ΡΠΈΡΡ, ΡΡΠΎ ΡΡΠΎ Π½Π΅ ΠΎΡΠ½ΠΎΡΠΈΡΡΡ ΠΊ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠΌΡ Π±ΡΠ°ΡΠ·Π΅ΡΡ Safari. ΠΠΎΠ³Π΄Π°
: ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ Π°ΠΊΡΠΈΠ²Π½ΡΠΉ
: active
ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ Π² ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΏΠ΅ΡΠΈΠΎΠ΄Π°, ΠΊΠΎΠ³Π΄Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π°ΠΊΡΠΈΠ²ΠΈΡΡΠ΅ΡΡΡ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΏΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΠΌΡΡΠΈ π ΡΡΠΎ Π±ΡΠ΄Π΅Ρ Π²ΡΠ΅ΠΌΡ ΠΌΠ΅ΠΆΠ΄Ρ Π½Π°ΠΆΠ°ΡΠΈΠ΅ΠΌ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΌΡΡΠΈ ΠΈ Π΅Π΅ ΠΎΡΠΏΡΡΠΊΠ°Π½ΠΈΠ΅ΠΌ.
ΠΊΠ½ΠΎΠΏΠΊΠ°: Π°ΠΊΡΠΈΠ²Π½Π° {ΡΠ²Π΅Ρ ΡΠΎΠ½Π°: # ffdb3a; }
: active
ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΡΠ°ΠΊΠΈΠΌ ΠΆΠ΅ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ Π΄Π»Ρ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΡ Ρ ΠΌΡΡΡΡ ΠΈ ΠΊΠ»Π°Π²ΠΈΠ°ΡΡΡΠΎΠΉ.: focus
, ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡ : active
ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΠΏΡΠΈ ΠΊΠ°ΡΠ°Π½ΠΈΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. Π ΠΎΠΏΡΡΡ ΠΆΠ΅, ΡΡΠΎ Π²ΠΎΠΎΠ±ΡΠ΅ Π½Π΅ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π² ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠΌ Π±ΡΠ°ΡΠ·Π΅ΡΠ΅ Safari. ΠΠ±ΡΠ΅Π΄ΠΈΠ½Π΅Π½ΠΈΠ΅
: hover
, : focus
ΠΈ : active
button: hover: focus: active {
ΡΠ²Π΅Ρ ΡΠΎΠ½Π°: # ffdb3a;
}
ΠΠΎΡΡΠ΄ΠΎΠΊ ΡΡΠΈΠ»Π΅ΠΉ —
: Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠ΅
, Π·Π°ΡΠ΅ΠΌ : ΡΠΎΠΊΡΡ
, Π·Π°ΡΠ΅ΠΌ : Π°ΠΊΡΠΈΠ²Π½ΡΠΉ
ΠΊΠ½ΠΎΠΏΠΊΠ°: Π°ΠΊΡΠΈΠ²Π½Π° {
ΡΠ²Π΅Ρ ΡΠΎΠ½Π°: Π·Π΅Π»Π΅Π½ΡΠΉ;
}
button: focus {
ΡΠ²Π΅Ρ ΡΠΎΠ½Π°: ΡΠΈΠ½ΠΈΠΉ;
}
button: hover {
ΡΠ²Π΅Ρ ΡΠΎΠ½Π°: ΠΊΡΠ°ΡΠ½ΡΠΉ;
}
: hover
, Π±ΡΠ΄ΡΡ ΠΏΡΠ΅ΠΎΠ±Π»Π°Π΄Π°ΡΡ, ΠΏΠΎΠΊΠ° Π²Ρ Π²ΡΠ΅ Π΅ΡΠ΅ Π½Π°Π²Π΅Π΄Π΅ΡΠ΅ Π½Π° Π½Π΅Π³ΠΎ ΠΊΡΡΡΠΎΡ.ΠΠ°ΠΊ ΠΌΡ Π²ΠΈΠ΄Π΅Π»ΠΈ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ Π²ΡΠ΅ ΡΡΠΈ ΡΠΎΠ±ΡΡΠΈΡ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ Π²ΠΎ Π²ΡΠ΅ΠΌΡ ΡΠΈΠΏΠΈΡΠ½ΠΎΠ³ΠΎ ΡΠΎΠ±ΡΡΠΈΡ ΡΠ΅Π»ΡΠΊΠ°, ΠΊΠ°ΡΠΊΠ°Π΄ Π²ΡΡΡΠΏΠ°Π΅Ρ Π²ΠΎ Π²Π»Π°Π΄Π΅Π½ΠΈΠ΅ ΠΈ ΠΏΠΎΠ±Π΅ΠΆΠ΄Π°Π΅Ρ ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΠΉ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠΉ ΡΡΠΈΠ»Ρ.: hover
, Π·Π°ΡΠ΅ΠΌ : focus
, Π·Π°ΡΠ΅ΠΌ : active
.
button: hover {
ΡΠ²Π΅Ρ ΡΠΎΠ½Π°: Π·Π΅Π»Π΅Π½ΡΠΉ;
}
button: focus {
ΡΠ²Π΅Ρ ΡΠΎΠ½Π°: ΡΠΈΠ½ΠΈΠΉ;
}
button: active {
ΡΠ²Π΅Ρ ΡΠΎΠ½Π°: ΠΊΡΠ°ΡΠ½ΡΠΉ;
}
ΠΠ±Π·ΠΎΡ
: hover
, : focus
ΠΈ : active
ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Ρ Π½ΠΈΠΌΠΈ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΡΠ΅Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ. Π Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΠΎΠ³ΠΎ ΡΡΡΡΠΎΠΉΡΡΠ²Π° ΡΡΠΈ ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡΡ ΡΡΠ°Π½ΠΎΠ²ΡΡΡΡ Π°ΠΊΡΠΈΠ²Π½ΡΠΌΠΈ Π² ΡΠ°Π·Π½ΡΡ
ΡΠΎΡΠΊΠ°Ρ
(ΠΈΠ»ΠΈ Π½Π΅ Π°ΠΊΡΠΈΠ²ΠΈΡΡΡΡΡΡ Π²ΠΎΠΎΠ±ΡΠ΅).
: ΠΏΠ°ΡΠ΅Π½ΠΈΠ΅ | : ΡΠΎΠΊΡΡ | : Π°ΠΊΡΠΈΠ²Π½ΡΠΉ | |
---|---|---|---|
ΠΡΡΡ π | ΠΡΡΡ | ΠΡΡΡ | ΠΡΡΡ |
ΠΠ»Π°Π²ΠΈΠ°ΡΡΡΠ° β¨οΈ | ΠΠ΅Ρ | ΠΡΡΡ | ΠΡΡΡ |
Π‘Π΅Π½ΡΠΎΡΠ½ΡΠΉ ΡΠΊΡΠ°Π½ π± | ΠΠ° (ΠΏΠΎ ΡΠ΅Π»ΡΠΊΡ) | ΠΠ° * (ΠΏΡΠΈ Π½Π°ΠΆΠ°ΡΠΈΠΈ) | ΠΠ° * (ΠΏΡΠΈ Π½Π°ΠΆΠ°ΡΠΈΠΈ) |
* ΠΠ΅ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ (iOS) Safari
ΠΠ°ΠΊ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ²Π΅ΡΠ° Π·Π½Π°ΡΠΊΠΎΠ² ΠΈ ΡΠ²Π΅ΡΠ° ΡΠΎΠ½Π° ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ°
ΠΠΎΠ΄ΠΏΠΈΡΠΈΡΠ΅ΡΡ Π½Π° Π½Π°ΡΡ ΡΠ°ΡΡΡΠ»ΠΊΡ Π½ΠΎΠ²ΠΎΡΡΠ΅ΠΉ.
Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Ρ ΠΎΡΠΎΡΠ΅Π³ΠΎ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΎΠΏΡΡΠ° ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ ΡΠ΅ΡΠΊΠΎΠ΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ²Π»ΡΡΡΡΡ ΡΡΡΠ»ΠΊΠ°ΠΌΠΈ ΠΈΠ»ΠΈ ΠΈΠ½ΡΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ Π΄ΠΎΡΡΡΠΏΠ½Ρ Π΄Π»Ρ Π½Π°ΠΆΠ°ΡΠΈΡ. ΠΡΠ»ΠΈ Π²Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ Π·Π½Π°ΡΠΊΠΈ, ΠΎΠ΄ΠΈΠ½ ΠΈΠ· ΡΠΏΠΎΡΠΎΠ±ΠΎΠ² ΡΠ΄Π΅Π»Π°ΡΡ ΡΡΠΎ — ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ²Π΅Ρ ΡΠΎΠ½Π° ΠΈ ΡΠ²Π΅Ρ Π·Π½Π°ΡΠΊΠ° ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ°.
ΠΠΈΠΏΠ΅ΡΡΡΡΠ»ΠΊΠΈ — ΡΠ°ΠΌΡΠ΅ ΡΡΠ½Π΄Π°ΠΌΠ΅Π½ΡΠ°Π»ΡΠ½ΡΠ΅ ΡΡΡΠΎΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ Π±Π»ΠΎΠΊΠΈ ΡΠ΅ΡΠΈ. ΠΡΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, Ρ ΠΊΠΎΡΠΎΡΡΠΌΠΈ Π»ΡΠ΄ΠΈ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΡΡΡ Π±ΠΎΠ»ΡΡΠ΅ Π²ΡΠ΅Π³ΠΎ. Π Π°Π½ΡΡΠ΅ Π΄Π»Ρ ΠΎΠ±ΠΎΠ·Π½Π°ΡΠ΅Π½ΠΈΡ ΡΡΡΠ»ΠΎΠΊ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π»ΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΡΠ΅ΠΊΡΡ ΠΈ ΡΠΈΠ½ΠΈΠΉ ΡΠ²Π΅Ρ. Π ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎΠΌ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ Π±ΡΡΡ Π±ΠΎΠ»Π΅Π΅ ΠΊΡΠ΅Π°ΡΠΈΠ²Π½ΡΠΌΠΈ ΠΏΡΠΈ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠ΅ ΡΡΡΠ»ΠΎΠΊ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ Π·Π½Π°ΡΠΊΠΎΠ², Π½ΠΎ ΠΌΡ Π΄ΠΎΠ»ΠΆΠ½Ρ Π³Π°ΡΠ°Π½ΡΠΈΡΠΎΠ²Π°ΡΡ, ΡΡΠΎ ΡΠ΄ΠΎΠ±ΡΡΠ²ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΡΡΡΠ»ΠΎΠΊ Π½Π΅ ΠΏΠΎΡΡΡΠ°Π΄Π°Π΅Ρ.ΠΡΠΈ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠ΅ ΡΡΡΠ»ΠΎΠΊ Π½Π° Π·Π½Π°ΡΠΊΠΈ ΠΌΡ Π΄ΠΎΠ»ΠΆΠ½Ρ ΡΠ΄Π΅Π»Π°ΡΡ ΠΎΡΠ΅Π²ΠΈΠ΄Π½ΡΠΌ, ΡΡΠΎ ΠΎΠ½ΠΈ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½Ρ. ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΡΡΠ΅ΠΊΡΠΎΠ² Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Π΄Π»Ρ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠ²Π΅ΡΠ° Π·Π½Π°ΡΠΊΠ° ΠΈ ΡΠΎΠ½Π° — Ρ ΠΎΡΠΎΡΠΈΠΉ ΡΠΏΠΎΡΠΎΠ± ΡΠΊΠ°Π·Π°ΡΡ, ΡΡΠΎ Π½Π° Π½ΠΈΡ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΆΠΈΠΌΠ°ΡΡ.
Π ΡΡΠΎΠΌ ΡΡΠΎΠΊΠ΅ ΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ Π·Π½Π°ΡΠΊΠΈ FontAwesome. ΠΠΊΠΎΠ½ΠΎΡΠ½ΡΠ΅ ΡΡΠΈΡΡΡ ΠΈΠ΄Π΅Π°Π»ΡΠ½ΠΎ ΠΏΠΎΠ΄Ρ
ΠΎΠ΄ΡΡ Π΄Π»Ρ ΡΠ°Π±ΠΎΡΡ, ΠΊΠΎΠ³Π΄Π° Π²Ρ Ρ
ΠΎΡΠΈΡΠ΅ Π»Π΅Π³ΠΊΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ²Π΅ΡΠ° ΡΡΡΠ»ΠΎΠΊ. ΠΡΠ΅, ΡΡΠΎ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ, ΡΡΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΠΈΡ
ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ color
Π² Π²Π°ΡΠ΅ΠΌ ΡΠ°ΠΉΠ»Π΅ CSS. ΠΡΠ»ΠΈ Π²Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ SVG Π²ΠΌΠ΅ΡΡΠΎ FontAwesome, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π»Π΅Π³ΠΊΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ²Π΅Ρ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° fill
.ΠΠ»Ρ ΡΠ°ΠΉΠ»ΠΎΠ² ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ PNG ΠΈ JPEG Π²Π°ΠΌ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²ΠΈΡΡ Π΄Π²Π° Π½Π°Π±ΠΎΡΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Ρ ΡΠ°Π·Π½ΡΠΌΠΈ ΡΠ²Π΅ΡΠ°ΠΌΠΈ Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Π·Π½Π°ΡΠΊΠ°, ΠΎΠ΄ΠΈΠ½ Π΄Π»Ρ ΠΎΠ±ΡΡΠ½ΠΎΠ³ΠΎ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ ΠΈ ΠΎΠ΄ΠΈΠ½ Π΄Π»Ρ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ. ΠΠΎΡ ΠΏΠΎΡΠ΅ΠΌΡ ΡΡΡΠ»ΠΊΠΈ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΡΠΈΡΡΠΎΠ² Π·Π½Π°ΡΠΊΠΎΠ² ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ SVG Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΡΠ°ΠΊΡΠΈΡΠ½Π΅Π΅:
// ΠΡΠΈΠΌΠ΅Ρ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠ²Π΅ΡΠ° ΡΡΠΈΡΡΠ° Π·Π½Π°ΡΠΊΠ°
.ΠΈΠΊΠΎΠ½Π° {
ΡΠ²Π΅Ρ: # 000;
}
.icon: hover {
ΡΠ²Π΅Ρ: #fff
}
// ΠΡΠΈΠΌΠ΅Ρ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠ²Π΅ΡΠ° ΠΈΠΊΠΎΠ½ΠΊΠΈ SVG
.ΠΈΠΊΠΎΠ½Π° {
Π·Π°ΠΏΠΎΠ»Π½ΠΈΡΡ: # 000;
}
.icon: hover {
Π·Π°ΠΏΠΎΠ»Π½ΠΈΡΡ: #fff
}
ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΌΡ Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ ΡΠ΅Π³ΠΈ a Π΄Π»Ρ ΡΡΡΠ»ΠΎΠΊ ΠΈ Π²ΠΌΠ΅ΡΡΠΎ ΡΡΠΎΠ³ΠΎ ΠΏΠΎΠ»Π°Π³Π°Π΅ΠΌΡΡ Π½Π° ΡΡΠ½ΠΊΡΠΈΡ Javascript onclick
, Π½Π°ΠΌ ΡΠ°ΠΊΠΆΠ΅ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎ ΡΠΊΠ°Π·ΡΠ²Π°ΡΡ ΡΡΡΠ»ΠΊΠΈ, ΠΈΠ·ΠΌΠ΅Π½ΡΡ ΠΊΡΡΡΠΎΡ.ΠΡΠΎ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎ Π²Π°ΠΆΠ½ΠΎ Π΄Π»Ρ Π΄Π°Π»ΡΡΠΎΠ½ΠΈΠΊΠΎΠ², ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΎΠ½ΠΈ Π½Π΅ ΡΠΌΠ΅ΡΡ ΡΠ°Π·Π»ΠΈΡΠ°ΡΡ ΡΠ²Π΅ΡΠ°, ΠΈΠΌ Π½ΡΠΆΠ½Ρ Π΄ΡΡΠ³ΠΈΠ΅ ΠΈΠ½Π΄ΠΈΠΊΠ°ΡΠΎΡΡ Π΄Π»Ρ ΡΡΡΠ»ΠΎΠΊ. ΠΠ°ΠΌ Π½ΡΠΆΠ½ΠΎ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΠΊΡΡΡΠΎΡ
Π½Π° ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ
, ΡΡΠΎΠ±Ρ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° Π½Π° ΡΡΡΠ»ΠΊΡ ΠΊΡΡΡΠΎΡ ΠΌΠ΅Π½ΡΠ» ΡΠΎΡΠΌΡ ΡΠΎ ΡΡΡΠ΅Π»ΠΊΠΈ Π½Π° ΡΡΠΊΡ, Π΄Π°Π²Π°Ρ ΠΏΠΎΠ½ΡΡΡ, ΡΡΠΎ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΅Π»ΠΊΠ½ΡΡΡ.
.ct-icon-box .ct-icon-box {
ΠΊΡΡΡΠΎΡ: ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ;
}
ΠΠ½Π΅ΡΠ½ΠΈΠ΅ ΡΡΡΠ»ΠΊΠΈ
ΠΠ°ΡΠ½Π΅ΠΌ Ρ Π²ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΡΡ ΡΡΡΠ»ΠΎΠΊ Π½Π° ΠΈΡΡΠΎΡΠ½ΠΈΠΊΠΈ Bootstrap ΠΈ FontAwesome Π² HTML-ΡΠ°ΠΉΠ»:
HTML
ΠΠΈΠΆΠ΅ Ρ Π½Π°Ρ Π΅ΡΡΡ ΠΊΠΎΠ΄ Π΄Π»Ρ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° Bootstrap Ρ ΡΡΠ΅ΠΌΡ ΡΡΡΠ»ΠΊΠ°ΠΌΠΈ. ΠΠ°ΠΌΠ΅Π½ΠΈΡΠ΅ #
Π² Π°ΡΡΠΈΠ±ΡΡΠ΅ onclick
Π½Π° Π°Π΄ΡΠ΅Ρ ΡΡΡΠ»ΠΊΠΈ, ΠΊΠΎΡΠΎΡΡΠΉ Π²Ρ Ρ
ΠΎΡΠΈΡΠ΅ ΠΏΠΎΠΌΠ΅ΡΡΠΈΡΡ.Π‘ΠΊΠΎΠΏΠΈΡΡΠΉΡΠ΅ ΠΈ Π²ΡΡΠ°Π²ΡΡΠ΅ ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΡΠΉ Π½ΠΈΠΆΠ΅ ΠΊΠΎΠ΄ ΠΈ Π½Π΅ ΡΡΠ΅ΡΠ½ΡΠΉΡΠ΅ΡΡ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°ΡΡ ΠΌΠ°ΠΊΠ΅Ρ ΠΈ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΡΡΡΠ»ΠΎΠΊ ΠΏΠΎ ΡΠ²ΠΎΠ΅ΠΌΡ ΡΡΠΌΠΎΡΡΠ΅Π½ΠΈΡ:
ΠΠΎΠ²ΠΎΡΡΠΈ
Π‘ΠΎΠ±ΡΡΠΈΡ
ΠΠ°Π»Π΅ΡΠ΅Ρ
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ Ρ Π½Π°Ρ Π΅ΡΡΡ Π·Π½Π°ΡΠΎΠΊ ΠΈ ΠΎΠΏΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠΉ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Ρ ΡΠ΅Π³ΠΎΠΌ h4 ΠΏΠΎΠ΄ Π·Π½Π°ΡΠΊΠΎΠΌ Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΡΡΡΠ»ΠΊΠΈ.ΠΡΠΎ ΡΠ²ΡΠ·Π°Π½ΠΎ Ρ ΡΠ΅ΠΌ, ΡΡΠΎ Π·Π½Π°ΡΠΊΠΈ ΡΠ°ΠΌΠΈ ΠΏΠΎ ΡΠ΅Π±Π΅ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ Π½Π΅Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΠΎΠΏΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠΌΠΈ Π΄Π»Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ, ΠΏΠΎΡΡΠΎΠΌΡ ΠΌΡ ΡΠ°ΠΊΠΆΠ΅ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅ΠΌ ΡΠ΅ΠΊΡΡ, ΡΡΠΎΠ±Ρ ΠΏΡΠΎΡΡΠ½ΠΈΡΡ, ΠΎ ΡΠ΅ΠΌ ΡΡΡΠ»ΠΊΠ°. Π‘ΠΎΠ³Π»Π°ΡΠ½ΠΎ Π³ΡΡΠΏΠΏΠ΅ Nielsen Norman, Π·Π½Π°ΡΠΊΠΈ Π½ΡΠΆΠ΄Π°ΡΡΡΡ Π² ΡΠ΅ΠΊΡΡΠΎΠ²ΠΎΠΉ ΠΌΠ΅ΡΠΊΠ΅, ΡΡΠΎΠ±Ρ ΠΏΡΠΎΡΡΠ½ΠΈΡΡ ΠΈΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅.
CSS
ΠΠΎΡ ΠΏΠΎΠ»Π½ΡΠΉ ΠΊΠΎΠ΄ CSS. Π£ Π½Π°Ρ Π΅ΡΡΡ div Ρ ΠΈΠΌΠ΅Π½Π΅ΠΌ ΠΊΠ»Π°ΡΡΠ° .ct-icon-box
, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ Π²ΡΠ΅ ΠΏΠΎΠ»Ρ Π·Π½Π°ΡΠΊΠΎΠ². ΠΠ°ΠΆΠ΄ΠΎΠ΅ ΠΏΠΎΠ»Π΅ Π·Π½Π°ΡΠΊΠ° Π² div Ρ ΠΈΠΌΠ΅Π½Π΅ΠΌ ΠΊΠ»Π°ΡΡΠ° .ct-icon-box
. ΠΠ°ΠΌ Π½Π΅ Π½ΡΠΆΠ½ΠΎ ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎ Π²ΡΠ±ΠΈΡΠ°ΡΡ Π·Π½Π°ΡΠΊΠΈ ΠΈ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ, ΡΡΠΎΠ±Ρ Π·Π°Π΄Π°ΡΡ ΠΈΡ
ΡΠ²Π΅Ρ.ΠΡ ΠΏΡΠΎΡΡΠΎ Π²ΡΠ±ΠΈΡΠ°Π΅ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½Ρ .ct-icon-box
, ΠΈ ΠΊΠΎΠ³Π΄Π° ΠΌΡ Π΄Π°Π΅ΠΌ Π΅ΠΌΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²Π΅ΡΠ°, ΠΎΠ½ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΡΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΊΠ°ΠΊ Π΄Π»Ρ Π·Π½Π°ΡΠΊΠ°, ΡΠ°ΠΊ ΠΈ Π΄Π»Ρ ΡΠ²Π΅ΡΠ° Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°:
.ct-icon-box .ct-icon-box {
padding-top: 8 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠΈΡΠΈΠ½Π°: 50%;
ΠΏΠ»ΡΡΡ Π½Π°Π»Π΅Π²ΠΎ;
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅;
Π³ΡΠ°Π½ΠΈΡΠ°: 2px solid #ccc;
ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½Π°Ρ Π²ΡΡΠΎΡΠ°: 267 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: Π²ΡΡΡΠΎΠ΅Π½Π½Π°Ρ ΡΠ°Π±Π»ΠΈΡΠ°;
Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ°: ΡΠ΅Π½ΡΡ;
ΡΠ²Π΅Ρ: # 292929;
Π½ΠΈΠΆΠ½Π΅Π΅ ΠΏΠΎΠ»Π΅: -2 ΠΏΠΈΠΊΡΠ΅Π»Ρ;
ΠΊΡΡΡΠΎΡ: ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ;
}
.ct-icon-box: hover {
ΡΠΎΠ½: # d60e96;
ΡΠ²Π΅Ρ: #fff;
}
.ct-icon-box {
ΠΌΠ°ΡΠΆΠ°: 65 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ Π°Π²ΡΠΎ;
ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π°: 525 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΠΏΠ΅ΡΠ΅Π»ΠΈΠ²: Π°Π²ΡΠΎ;
ΡΡΠ½ΠΎ: ΠΎΠ±Π°;
}
.ct-icon-box .ct-icon-box__header {
ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ°: 22 ΠΏΠΈΠΊΡΠ΅Π»Ρ;
ΡΠ΅ΠΊΡΡ-ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π½ΠΈΠ΅: ΠΏΡΠΎΠΏΠΈΡΠ½ΡΠ΅ Π±ΡΠΊΠ²Ρ;
}
section h4 {
font-weight: 600;
ΠΌΠ΅ΠΆΠ±ΡΠΊΠ²Π΅Π½Π½ΡΠΉ ΠΈΠ½ΡΠ΅ΡΠ²Π°Π»: 0,5 ΠΏΠΈΠΊΡΠ΅Π»Ρ;
}
.ct-icon-box .ct-icon-box.bottom-all {
ΡΠΈΡΠΈΠ½Π°: 99.5%;
ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½Π°Ρ Π²ΡΡΠΎΡΠ°: 250 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Π½ΠΈΠΆΠ½Π΅Π΅ ΠΏΠΎΠ»Π΅: 2 ΠΏΠΈΠΊΡΠ΅Π»Ρ;
}
@media only screen ΠΈ (min-width: 480px) {
.ct-icon-box .ct-icon-box.top-right,
.ct-icon-box .ct-icon-box.bottom-right {
ΠΌΠ°ΡΠΆΠ° ΡΠ»Π΅Π²Π°: -2 ΠΏΠΈΠΊΡΠ΅Π»Ρ;
}
}
.ct-icon-box .ct-icon-box> .ct-icon-box .ct-icon-box__inner,
.ct-icon-box .ct-icon-box> .inner {
Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: ΡΠ°Π±Π»ΠΈΡΠ°-ΡΡΠ΅ΠΉΠΊΠ°;
ΡΠΈΡΠΈΠ½Π°: 100%;
Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ΅ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅: ΠΏΠΎ ΡΠ΅Π½ΡΡΡ;
}
.container {
ΠΌΠ°ΡΠΆΠ°: 0 Π°Π²ΡΠΎ;
}
Π Π²ΠΎΡ ΠΈ Π³ΠΎΡΠΎΠ²ΡΠ΅ ΡΡΡΠ»ΠΊΠΈ Π½Π° ΠΈΠΊΠΎΠ½ΠΊΡ.