CSS ΠΌΠ΅Π½Ρ Π΄Π»Ρ Π½Π°ΡΠΈΠ½Π°ΡΡΠΈΡ / Π₯Π°Π±Ρ
ΠΠ°Π½Π½ΠΎΠ΅ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²ΠΎ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ ΠΠ°ΠΌ ΡΠΎΠ·Π΄Π°ΡΡ CSS ΠΌΠ΅Π½Ρ Π΄Π»Ρ Π²Π°ΡΠ΅Π³ΠΎ ΡΠ°ΠΉΡΠ°, ΠΎΠ½ΠΎ Π½Π΅ Π±ΡΠ΄Π΅Ρ ΠΎΠ±ΡΡΠ½ΡΠΌ, ΠΎΠ½ΠΎ Π±ΡΠ΄Π΅Ρ ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°ΡΡ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ, Π½Π΅ ΡΠΎΠΌΠ½Π΅Π²Π°ΠΉΡΠ΅ΡΡ. Π ΡΠ°ΠΊ ΠΏΡΠΈΡΡΡΠΏΠΈΠΌβ¦
Π€ΠΎΠ½ Π΄Π»Ρ ΠΌΠ΅Π½Ρ
ΠΠ»Ρ Π½Π°ΡΠ°Π»Π° ΡΠΎΠ·Π΄Π°Π΄ΠΈΠΌ background, Ρ ΠΊΠΎΠ½Π΅ΡΠ½ΠΎ Π½Π΅ ΠΌΠ°ΡΡΠ΅Ρ PhotoShopβa, Π½ΠΎ Π²ΠΎΡ ΡΡΠΎ Ρ ΠΌΠ΅Π½Ρ ΠΏΠΎΠ»ΡΡΠΈΠ»ΠΎΡΡ Π·Π° ΠΏΠ°ΡΡ ΠΌΠΈΠ½ΡΡ:
ΠΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΎΡΠΊΠΈ
Π‘ΠΎΠ·Π΄Π°Π΅ΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΊΠΎΡΠΎΡΡΠ΅ Ρ Π½Π°Ρ Π±ΡΠ΄ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΊΠ°ΠΊ ΡΡΡΠ»ΠΊΠΈ Π² ΠΌΠ΅Π½Ρ. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ Π²ΠΎΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΡ PhotoShopβΠΎΠΌ:
- Π‘ΠΎΠ·Π΄Π°Π΅ΠΌ Π½ΠΎΠ²ΡΠΉ ΡΠ°ΠΉΠ» ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ ΡΡΠ°ΠΊ 144x58px. (ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΡΠ»ΠΊΠΈ Π΄Π»Ρ ΠΏΠ΅ΡΠ²ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π² ΠΌΠ΅Π½Ρ)
- ΠΠ°ΠΏΠΎΠ»Π½ΡΠ΅ΠΌ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΌ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΡΠΌ ΡΠ΅ΠΉ ΠΏΡΠ½ΠΊΡ ΠΌΠ΅Π½Ρ (Ρ ΠΌΠ΅Π½Ρ ΡΡΠΎ Π»ΠΈΡΡ Π½Π°Π΄ΠΏΠΈΡΡ Π²ΡΠΏΠΎΠ»Π½Π΅Π½Π½Π°Ρ Π·Π°Π±Π°Π²Π½ΡΠΌ ΡΡΠΈΡΡΠΎΠΌ):
- ΠΠ°Π»Π΅Π΅ ΡΠ²Π΅Π»ΠΈΡΠΈΠΌ ΡΠ°Π·ΠΌΠ΅Ρ ΠΏΠΎΠ»ΠΎΡΠ½Π° Π² Π΄Π²Π° ΡΠ°Π·Π°
- Π Π΄ΠΎΡΠΈΡΡΠ΅ΠΌ Π²Π½Π΅ΡΠ½ΠΈΠΉ Π²ΠΈΠ΄ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΌΠ΅Π½Ρ Π΄Π»Ρ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ ΡΠΎΠ±ΡΡΠΈΡ hover
ΠΠ°ΠΊ ΡΠΈΡ ΠΊΠΎΠ½ΡΡΡΡΠΊΡΠΈΡ Π±ΡΠ΄Π΅Ρ ΡΠ°Π±ΠΎΡΠ°ΡΡ? ΠΠ° ΠΎΡΠ΅Π½Ρ ΠΏΡΠΎΡΡΠΎ β ΡΡΡΠ»ΠΊΠ΅ ΠΌΡ ΡΠ²Π½ΠΎ ΡΠΊΠ°Π·ΡΠ²Π°Π΅ΠΌ ΡΠ°Π·ΠΌΠ΅Ρ 144x58px, Π° Π½ΠΎ ΡΠΎΠ±ΡΡΠΈΠ΅ mouseover ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°Π΅ΠΌ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π²Π²Π΅ΡΡ : - Π‘ΠΎΠ·Π΄Π°Π΄ΠΈΠΌ Π½ΠΎΠ²ΡΠΉ ΡΠ°ΠΉΠ» Ρ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ»ΡΠ½ΡΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ ΠΈ ΡΠ΅ΠΊΡΡΠΎΠΌ β ΡΡΠΎ Π±ΡΠ΄Π΅Ρ Π½Π°ΡΠ° ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΊΠ° ΠΊ ΡΡΡΠ»ΠΊΠ΅
- ΠΠΎΠ²ΡΠΎΡΠΈΠΌ Π²ΡΠ΅ ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠΈΠ΅ ΠΏΡΠ½ΠΊΡΡ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π²ΡΠ΅Ρ
ΠΏΡΠ½ΠΊΡΠΎΠ² ΠΌΠ΅Π½Ρ, Π² ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ΅ Π°Π½Π°ΡΠΈΡ
ΠΌΠ°Π½ΠΈΠΏΡΠ»ΡΡΠΈΠΉ Ρ Π½Π°Ρ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΏΠΎΠ»ΡΡΠΈΡΡΡΡ Π²ΠΎΡ ΡΠ°ΠΊΠΎΠΉ Π½Π°Π±ΠΎΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ:
HTML ΠΊΠΎΠ΄
ΠΠ°ΠΊΠΎΠ½ΡΠΈΠ»ΠΈ ΡΡΡΠΎΠΈΡΡ ΠΈΠ· ΡΠ΅Π±Ρ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ΡΠΎΠ², ΠΏΠΎΡΠ° Π½Π°ΡΠΈΠ½Π°ΡΡ ΠΊΠΎΠ΄ΠΈΡΡ β ΡΠΎΠ·Π΄Π°Π΄ΠΈΠΌ Π½Π΅ Π½ΡΠΌΠ΅ΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠΏΠΈΡΠΎΠΊ β <ul>:
- ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ <ul> ΠΏΡΠΈΡΠ²ΠΎΠ΅ΠΈΠΌ id=Β«menuΒ»
- ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΡΡΡΠ»ΠΊΠ΅ <a> ΠΏΡΠΈΡΠ²ΠΎΠΈΠΌ ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ΅ ΠΈΠΌΡ ΠΊΠ»Π°ΡΡΠ°
- ΠΠ½ΡΡΡΡ ΡΡΠ³Π° <a> Π·Π°ΠΊΠΈΠ½Π΅ΠΌ ΠΏΡΡΡΠΎΠΉ ΡΡΠ³ <span> (ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΠΈΡΡΡΡ Π΄Π»Ρ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΎΠΊ ΠΊ ΡΡΡΠ»ΠΊΠ°ΠΌ)
<ul id=Β«menuΒ»>
<li><a href=Β»#Β» class=Β«homeΒ»>Home <span></span></a></li>
<li><a href=Β»#Β» class=Β«aboutΒ»>About <span></span></a></li>
<li><a href=Β»#Β» class=Β«rssΒ»>RSS <span></span></a></li>
</ul>
CSS ΠΊΠΎΠ΄
#menu
ΠΠ»Ρ Π½Π°ΡΠ°Π»Π° ΡΠ±ΠΈΡΠ°Π΅ΠΌ padding ΠΈ margin Ρ ΠΌΠ΅Π½Ρ, list-style Π²ΡΡΡΠ°Π²Π»ΡΠ΅ΠΌ Π² none, position ΡΠΊΠ°Π·ΡΠ²Π°Π΅ΠΌ ΠΊΠ°ΠΊ relative. Π£ΠΊΠ°Π·ΡΠ²Π°Π΅ΠΌ Π²ΡΡΠΎΡΡ ΠΈ ΡΠΈΡΠΈΠ½Ρ ΠΌΠ΅Π½Ρ (ΡΠΌ. ΡΠ°Π·ΠΌΠ΅ΡΡ menu-bg.jpg). ΠΠΎΠ±Π°Π²Π»ΡΠ΅ΠΌ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅.
#menu {
list-style: none;
padding: 0;
margin: 0;
width: 774px;
height: 210px;
background: url(images/menu-bg.jpg) no-repeat;
position: relative;
}
#menu span
ΠΠ»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² span ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡ display Π²ΡΡΡΠ°Π²Π»ΡΠ΅ΠΌ Π² none (ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π½Π΅ Π±ΡΠ΄ΡΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ). Π’Π°ΠΊ ΠΆΠ΅ Π²ΡΡΡΠ°Π²Π»ΡΠ΅ΠΌ position ΠΊΠ°ΠΊ absolute.
#menu span {
display: none;
position: absolute;
}
#menu a
ΠΠ»Ρ ΡΡΡΠ»ΠΎΠΊ Π½Π°ΠΌ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎ ΡΠΏΡΡΡΠ°ΡΡ ΡΠ΅ΠΊΡΡ, Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ text-indent ΠΏΡΠΈΡΠ²Π°ΠΈΠ²Π°Π΅ΠΌ Π½Π΅Π³Π°ΡΠΈΠ²Π½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ (-900%), ΠΈ ΡΠ΅ΠΊΡΡ Π±ΡΠ΄Π΅Ρ ΡΠΊΡΡΡ.
#menu a {
display: block;
text-indent: -900%;
position: absolute;
outline: none;
}
#menu a:hover
Π’Π΅ΠΏΠ΅ΡΡ ΠΌΡ Ρ
ΠΎΡΠΈΠΌ ΡΠ΄Π²ΠΈΠ½ΡΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ Π½Π° Π»ΠΈΠ½ΠΊΠ΅ ΠΏΠΎ ΡΠΎΠ±ΡΡΠΈΡ mouseover, Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ Π² CSS ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΠΊΠΎΠ΄:
#menu a:hover {
background-position: left bottom;
}
#menu a:hover span
Π’Π°ΠΊ ΠΆΠ΅ ΠΏΠΎ ΡΠΎΠ±ΡΡΠΈΡ mouseover Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΠΎΡΠΎΠ±ΡΠ°Π·ΠΈΡΡ ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΊΡ
#menu a:hover span {
display: block;
}
#menu . home
Π’Π΅ΠΏΠ΅ΡΡ Π½Π°ΠΌ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ ΡΠ°ΡΡΡΠ°Π²ΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΌΠ΅Π½Ρ. ΠΠ»Ρ Π½Π°ΡΠ°Π»Π° ΡΠΊΠ°ΠΆΠ΅ΠΌ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΈ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, Π° Π·Π°ΡΠ΅ΠΌ Π·Π°ΠΉΠΌΠ΅ΠΌΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ, Π±ΡΠ΄Π΅ΠΌ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ left ΠΈ top ΠΏΠΎΠΊΠ° Π½Π΅ ΠΏΠΎΡΡΠ²ΡΡΠ²ΡΠ΅ΠΌ ΠΌΠΎΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠ΄ΠΎΠ²Π»Π΅ΡΠ²ΠΎΡΠ΅Π½ΠΈΡ ΠΎΡ Π²Π½Π΅ΡΠ½Π΅Π³ΠΎ Π²ΠΈΠ΄Π° ΠΌΠ΅Π½Ρ:
#menu .home {
width: 144px;
height: 58px;
background: url(images/home.gif) no-repeat;
left: 96px;
top: 96px;
}
#menu .home span
Π’Π΅ΠΏΠ΅ΡΡ ΠΏΡΠΎΠ²Π΅Π΄Π΅ΠΌ ΠΏΠΎΠ΄ΠΎΠ±Π½ΡΡ ΠΎΠΏΠ΅ΡΠ°ΡΠΈΡ Π΄Π»Ρ Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΠ΅ΠΉ ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΊΠΈ
#menu .home span {
width: 86px;height: 14px;
background: url(images/home-over.gif) no-repeat;
left: 28px;
top: -20px;
}
#menu .about
ΠΠΎΠΏΠΈΡΡΠ΅ΠΌ Π²ΡΡ ΡΡΠΎ ΠΌΡ ΡΠ΄Π΅Π»Π°Π»ΠΈ Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° .home ΠΈ ΠΏΠ΅ΡΠ΅ΠΈΠΌΠ΅Π½ΠΎΠ²ΡΠ²Π°Π΅ΠΌ Π² . about. ΠΠΎΠ΄Π³ΠΎΠ½ΡΠ΅ΠΌ ΡΠ°Π·ΠΌΠ΅Ρ ΠΈ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, ΡΠ°ΠΊ ΠΆΠ΅ Π·Π°ΠΌΠ΅Π½ΡΠ΅ΠΌ ΡΠΎΠ½.
#menu .about {
width: 131px;
height: 51px;
background: url(images/about.gif) no-repeat;
left: 338px;
top: 97px;
}
#menu .about span {
width: 40px;
height: 12px;
background: url(images/about-over.gif) no-repeat;
left: 44px;
top: 54px;
}
#menu .rss
ΠΠΎΠ²ΡΠΎΡΠΈΠΌ Π΄Π»Ρ .rss
#menu .rss {
width: 112px;
height: 47px;
background: url(images/rss.gif) no-repeat;
left: 588px;
top: 94px;
}
#menu .rss span {
width: 92px;
height: 20px;
background: url(images/rss-over.gif) no-repeat;
left: 26px;
top: -20px;
}
ΠΡΡ Π² ΠΎΠ΄Π½ΠΎΠΌ
#menu {
list-style: none;
padding: 0;
margin: 0;
width: 774px;
height: 210px;
background: url(images/menu-bg.jpg) no-repeat;
position: relative;
}
#menu span {
display: none;
position: absolute;
}
#menu a {
display: block;
text-indent: -900%;
position: absolute;outline: none;
}
#menu a:hover {
background-position: left bottom;
}
#menu a:hover span {
display: block;
}
#menu .home {
width: 144px;
height: 58px;
background: url(images/home.gif) no-repeat;
left: 96px;
top: 73px;
}
#menu .home span {
width: 86px;
height: 14px;
background: url(images/home-over.gif) no-repeat;
left: 28px;
top: -20px;
}
#menu .about {
width: 131px;
height: 51px;
background: url(images/about.gif) no-repeat;
left: 338px;
top: 97px;
}
#menu .about span {
width: 40px;
height: 12px;
background: url(images/about-over.gif) no-repeat;
left: 44px;
top: 54px;
}
#menu .rss {
width: 112px;
height: 47px;
background: url(images/rss.gif) no-repeat;
left: 588px;
top: 94px;
}
#menu .rss span {
width: 92px;
height: 20px;
background: url(images/rss-over.gif) no-repeat;
left: 26px;
top: -20px;
}
ΠΡΠΎ Π²ΡΡ, ΠΏΡΠΎΡΠ΅ΡΡΠΈΡΠΎΠ²Π°ΡΡ ΠΌΠ΅Π½Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΡΡ, Π° ΡΠΊΠ°ΡΠ°ΡΡ ΠΏΡΠΈΠΌΠ΅Ρ ΡΡΡ.
ΠΠΎΠ»ΡΠ½ΡΠΉ ΠΏΠ΅ΡΠ΅Π²ΠΎΠ΄: http://www.webdesignerwall.com/tutorials/advanced-css-menu/
ΠΡΠΎΡΡΠΏΠΎΡΡ: CSS ΠΌΠ΅Π½Ρ Π² ΡΡΠΈΠ»Π΅ Web 2.0
ΠΠ΅Π½Ρ | HTML | CodeBasics
ΠΠ΅ΡΠ½ΡΠΌΡΡ ΠΊ ΠΏΡΠΈΠΌΠ΅ΡΡ ΠΈΠ· ΠΏΡΠΎΡΠ»ΡΡ ΡΡΠΎΠΊΠΎΠ²:
<header> <img src="/logo.png" alt="ΠΠΎΠ³ΠΎΡΠΈΠΏ"> <!-- ΠΠΎΠ³ΠΎΡΠΈΠΏ ΡΠ°ΠΉΡΠ° --> <div> <!-- ΠΠ΅Π½Ρ --> <ul> <li><a href="/">ΠΠ»Π°Π²Π½Π°Ρ</a></li> <li><a href="/about">Π Π½Π°Ρ</a></li> <li><a href="/contacts">ΠΠΎΠ½ΡΠ°ΠΊΡΡ</a></li> </ul> </div> </header>
Π Π½ΡΠΌ ΠΌΠ΅Π½Ρ ΡΠ°ΠΉΡΠ° ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΎΠ±ΡΡΠ½ΠΎΠ³ΠΎ ΡΠ΅Π³Π° <div>
Ρ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΎΡΠΎΠΌ menu
. ΠΠ°ΠΊ ΠΈΠ·Π²Π΅ΡΡΠ½ΠΎ, ΡΠ°ΠΊΠΎΠ΅ ΠΎΠ±ΠΎΠ·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π΄Π»Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ², Π½ΠΎ Π½Π΅ Π΄Π»Ρ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ². ΠΠ½ΠΈ Π½Π΅ ΠΏΠΎΠ½ΠΈΠΌΠ°ΡΡ, ΡΡΠΎ ΡΡΠΎ ΠΌΠ΅Π½Ρ, Π° Π½Π΅ ΠΏΡΠΎΡΡΠΎ ΠΎΠ±ΡΡΡΠΊΠ° Π΄Π»Ρ ΡΠΏΠΈΡΠΊΠ°.
ΠΠ»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΏΠΎΠ»Π½ΠΎΡΠ΅Π½Π½ΠΎΠ³ΠΎ ΠΌΠ΅Π½Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΠΏΠ°ΡΠ½ΡΠΉ ΡΠ΅Π³ <nav>
, Π·Π°Π΄Π°ΡΠ° ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ β ΡΠ°Π·ΠΌΠ΅ΡΠΈΡΡ ΠΎΠ±Π»Π°ΡΡΡ ΡΡΡΠ°Π½ΠΈΡΡ Ρ ΠΎΡΠ½ΠΎΠ²Π½ΡΠΌ ΠΌΠ΅Π½Ρ. Π’Π°ΠΊΠΆΠ΅ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ ΡΡΡΡΠΎΠΉΡΡΠ²Π° Π΄Π»Ρ ΡΡΠ΅Π½ΠΈΡ Ρ ΡΠΊΡΠ°Π½Π°, ΠΊΠΎΡΠΎΡΡΠΌΠΈ ΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ Π»ΡΠ΄ΠΈ ΡΠΎ ΡΠ»Π°Π±ΡΠΌ Π·ΡΠ΅Π½ΠΈΠ΅ΠΌ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ ΡΡΠΎΡ ΡΠ΅Π³, ΡΡΠΎΠ±Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ, ΡΡΠΎΠΈΡ Π»ΠΈ Π΅Π³ΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅.
ΠΠ°ΠΌΠ΅Π½ΠΈΠΌ <div></div>
Π½Π° ΠΈΠ·ΡΡΠ΅Π½Π½ΡΠΉ ΡΠ΅Π³ <nav>
:
<header> <img src="/logo.png" alt="ΠΠΎΠ³ΠΎΡΠΈΠΏ"> <!-- ΠΠΎΠ³ΠΎΡΠΈΠΏ ΡΠ°ΠΉΡΠ° --> <nav> <!-- ΠΠ΅Π½Ρ --> <ul> <li><a href="/">ΠΠ»Π°Π²Π½Π°Ρ</a></li> <li><a href="/about">Π Π½Π°Ρ</a></li> <li><a href="/contacts">ΠΠΎΠ½ΡΠ°ΠΊΡΡ</a></li> </ul> </nav> </header>
ΠΠ»Π΅ΠΌΠ΅Π½Ρ nav
, ΠΊΠ°ΠΊ ΠΈ header
Π½Π΅ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΡΠΌ Π΄Π»Ρ ΡΡΡΠ°Π½ΠΈΡΡ. ΠΠ³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π»Ρ Π»ΡΠ±ΠΎΠ³ΠΎ ΠΌΠ΅Π½Ρ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅, Π½ΠΎ Π΅ΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°ΡΠΈΠΉ:
- ΠΠ΅Ρ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ ΠΎΠ±ΠΎΡΠ°ΡΠΈΠ²Π°ΡΡ ΠΊΠ°ΠΆΠ΄ΠΎΠ΅ ΠΌΠ΅Π½Ρ Π² ΡΠ»Π΅ΠΌΠ΅Π½Ρ
nav
. Π ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΌ ΡΠ°ΠΊΠΎΠΉ ΠΎΠ±Π»Π°ΡΡΡΡ ΡΠΊΠ°Π·ΡΠ²Π°ΡΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΡΠ½ΠΎΠ²Π½ΡΠ΅ ΠΌΠ΅Π½Ρ. ΠΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅, ΡΠ°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ ΠΌΠ΅Π½Ρ Π² ΡΡΡΠ΅ΡΠ΅, Π½Π΅ ΠΎΠ±ΠΎΡΠ°ΡΠΈΠ²Π°ΡΡ Π² ΡΠ΅Π³<nav>
, Ρ ΠΎΡΡ ΡΡΠΎ Π½Π΅ Π·Π°ΠΏΡΠ΅ΡΠ΅Π½ΠΎ. - Π₯ΠΎΡΠΎΡΠΈΠΉ ΠΏΡΠΈΠΌΠ΅Ρ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ
nav
β Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ ΠΏΠΎ ΡΠ΅ΠΊΡΡΠ΅ΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅. nav
ΠΌΠΎΠΆΠ΅Ρ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΡ Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ ΡΡΡΠ»ΠΊΠΈ, Π½ΠΎ ΡΠ°ΠΊΠΆΠ΅ ΠΈ ΡΠ΅ΠΊΡΡ, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ Π΅ΡΡΡ ΡΡΡΠ»ΠΊΠΈ. ΠΡΠΈΠ΅Π½ΡΠΈΡΡΠΉΡΠ΅ΡΡ Π½Π° Π·Π΄ΡΠ°Π²ΡΠΉ ΡΠΌΡΡΠ». ΠΡΠ»ΠΈ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΉ Π΄Π»Ρ ΡΡΡΠ°Π½ΠΈΡΡ ΠΈΠ»ΠΈ Π²ΡΠ΅Π³ΠΎ ΡΠ°ΠΉΡΠ°, ΡΠΎ ΠΎΠ±Π΅ΡΠ½ΠΈΡΠ΅ Π΅Ρ Π² ΡΠ΅Π³
.
ΠΠ°Π΄Π°Π½ΠΈΠ΅
Π‘ΠΎΠ·Π΄Π°ΠΉΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠΊΡ Β«ΡΠ°ΠΏΠΊΠΈΒ» ΡΠ°ΠΉΡΠ°. Π Π°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΡΠ΅ Π²Π½ΡΡΡΠΈ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ ΠΈ ΠΌΠ΅Π½Ρ ΠΈΠ· Π΄Π²ΡΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ². ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΠ΅Π³ <nav>
ΠΈ ΠΌΠ°ΡΠΊΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠΏΠΈΡΠΎΠΊ
ΠΡΠ»ΠΈ Π²Ρ Π·Π°ΡΠ»ΠΈ Π² ΡΡΠΏΠΈΠΊ, ΡΠΎ ΡΠ°ΠΌΠΎΠ΅ Π²ΡΠ΅ΠΌΡ Π·Π°Π΄Π°ΡΡ Π²ΠΎΠΏΡΠΎΡ Π² Β«ΠΠ±ΡΡΠΆΠ΄Π΅Π½ΠΈΡΡ Β». ΠΠ°ΠΊ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ Π·Π°Π΄Π°ΡΡ Π²ΠΎΠΏΡΠΎΡ:
- ΠΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎ ΠΏΡΠΈΠ»ΠΎΠΆΠΈΡΠ΅ Π²ΡΠ²ΠΎΠ΄ ΡΠ΅ΡΡΠΎΠ², Π±Π΅Π· Π½Π΅Π³ΠΎ ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ Π½Π΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ½ΡΡΡ ΡΡΠΎ Π½Π΅ ΡΠ°ΠΊ, Π΄Π°ΠΆΠ΅ Π΅ΡΠ»ΠΈ Π²Ρ ΠΏΠΎΠΊΠ°ΠΆΠ΅ΡΠ΅ ΡΠ²ΠΎΠΉ ΠΊΠΎΠ΄.
ΠΡΠΎΠ³ΡΠ°ΠΌΠΌΠΈΡΡΡ ΠΏΠ»ΠΎΡ ΠΎ ΠΈΡΠΏΠΎΠ»Π½ΡΡΡ ΠΊΠΎΠ΄ Π² Π³ΠΎΠ»ΠΎΠ²Π΅, Π½ΠΎ ΠΏΠΎ ΠΏΠΎΠ»ΡΡΠ΅Π½Π½ΠΎΠΉ ΠΎΡΠΈΠ±ΠΊΠ΅ ΠΏΠΎΡΡΠΈ Π²ΡΠ΅Π³Π΄Π° ΠΏΠΎΠ½ΡΡΠ½ΠΎ, ΠΊΡΠ΄Π° ΡΠΌΠΎΡΡΠ΅ΡΡ.
Π’Π΅ΡΡΡ ΡΡΡΡΠΎΠ΅Π½Ρ ΡΠ°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, ΡΡΠΎ ΠΎΠ½ΠΈ ΠΏΡΠΎΠ²Π΅ΡΡΡΡ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ ΡΠ°Π·Π½ΡΠΌΠΈ ΡΠΏΠΎΡΠΎΠ±Π°ΠΌΠΈ ΠΈ Π½Π° ΡΠ°Π·Π½ΡΡ Π΄Π°Π½Π½ΡΡ . Π§Π°ΡΡΠΎ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Ρ ΠΎΠ΄Π½ΠΈΠΌΠΈ Π²Ρ ΠΎΠ΄Π½ΡΠΌΠΈ Π΄Π°Π½Π½ΡΠΌΠΈ, Π½ΠΎ Π½Π΅ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Ρ Π΄ΡΡΠ³ΠΈΠΌΠΈ. Π§ΡΠΎΠ±Ρ ΡΠ°Π·ΠΎΠ±ΡΠ°ΡΡΡΡ Ρ ΡΡΠΈΠΌ ΠΌΠΎΠΌΠ΅Π½ΡΠΎΠΌ, ΠΈΠ·ΡΡΠΈΡΠ΅ Π²ΠΊΠ»Π°Π΄ΠΊΡ Β«Π’Π΅ΡΡΡΒ» ΠΈ Π²Π½ΠΈΠΌΠ°ΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΡΠΌΠΎΡΡΠΈΡΠ΅ Π½Π° Π²ΡΠ²ΠΎΠ΄ ΠΎΡΠΈΠ±ΠΎΠΊ, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ Π΅ΡΡΡ ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΊΠΈ.
ΠΠΎΠΉ ΠΊΠΎΠ΄ ΠΎΡΠ»ΠΈΡΠ°Π΅ΡΡΡ ΠΎΡ ΡΠ΅ΡΠ΅Π½ΠΈΡ ΡΡΠΈΡΠ΅Π»Ρ π€ΠΡΠΎ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎ π, Π² ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠΈΡΠΎΠ²Π°Π½ΠΈΠΈ ΠΎΠ΄Π½Ρ Π·Π°Π΄Π°ΡΡ ΠΌΠΎΠΆΠ½ΠΎ Π²ΡΠΏΠΎΠ»Π½ΠΈΡΡ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎΠΌ ΡΠΏΠΎΡΠΎΠ±ΠΎΠ². ΠΡΠ»ΠΈ Π²Π°Ρ ΠΊΠΎΠ΄ ΠΏΡΠΎΡΠ΅Π» ΠΏΡΠΎΠ²Π΅ΡΠΊΡ, ΡΠΎ ΠΎΠ½ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΠ΅Ρ ΡΡΠ»ΠΎΠ²ΠΈΡΠΌ Π·Π°Π΄Π°ΡΠΈ.
Π ΡΠ΅Π΄ΠΊΠΈΡ ΡΠ»ΡΡΠ°ΡΡ Π±ΡΠ²Π°Π΅Ρ, ΡΡΠΎ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠ΄ΠΎΠ³Π½Π°Π½ΠΎ ΠΏΠΎΠ΄ ΡΠ΅ΡΡΡ, Π½ΠΎ ΡΡΠΎ Π²ΠΈΠ΄Π½ΠΎ ΡΡΠ°Π·Ρ.
ΠΡΠΎΡΠΈΡΠ°Π» ΡΡΠΎΠΊ β Π½ΠΈΡΠ΅Π³ΠΎ Π½Π΅ ΠΏΠΎΠ½ΡΡΠ½ΠΎ πΠ‘ΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΎΠ±ΡΡΠ°ΡΡΠΈΠ΅ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»Ρ, ΠΏΠΎΠ½ΡΡΠ½ΡΠ΅ Π΄Π»Ρ Π²ΡΠ΅Ρ
Π±Π΅Π· ΠΈΡΠΊΠ»ΡΡΠ΅Π½ΠΈΡ, Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΡΠ»ΠΎΠΆΠ½ΠΎ. ΠΡ ΠΎΡΠ΅Π½Ρ ΡΡΠ°ΡΠ°Π΅ΠΌΡΡ, Π½ΠΎ Π²ΡΠ΅Π³Π΄Π° Π΅ΡΡΡ ΡΡΠΎ ΡΠ»ΡΡΡΠ°ΡΡ. ΠΡΠ»ΠΈ Π²Ρ Π²ΡΡΡΠ΅ΡΠΈΠ»ΠΈ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π», ΠΊΠΎΡΠΎΡΡΠΉ Π²Π°ΠΌ Π½Π΅ΠΏΠΎΠ½ΡΡΠ΅Π½, ΠΎΠΏΠΈΡΠΈΡΠ΅ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ Π² Β«ΠΠ±ΡΡΠΆΠ΄Π΅Π½ΠΈΡΡ
Β». ΠΠ΄Π΅Π°Π»ΡΠ½ΠΎ, Π΅ΡΠ»ΠΈ Π²Ρ ΡΡΠΎΡΠΌΡΠ»ΠΈΡΡΠ΅ΡΠ΅ Π½Π΅ΠΏΠΎΠ½ΡΡΠ½ΡΠ΅ ΠΌΠΎΠΌΠ΅Π½ΡΡ Π² Π²ΠΈΠ΄Π΅ Π²ΠΎΠΏΡΠΎΡΠΎΠ². ΠΠ±ΡΡΠ½ΠΎ Π½Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π΄Π½Π΅ΠΉ Π΄Π»Ρ Π²Π½Π΅ΡΠ΅Π½ΠΈΡ ΠΏΡΠ°Π²ΠΎΠΊ.
ΠΡΡΠ°ΡΠΈ, Π²Ρ ΡΠΎΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΡΠ°ΡΡΠ²ΠΎΠ²Π°ΡΡ Π² ΡΠ»ΡΡΡΠ΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΠ²: Π²Π½ΠΈΠ·Ρ Π΅ΡΡΡ ΡΡΡΠ»ΠΊΠ° Π½Π° ΠΈΡΡ ΠΎΠ΄Π½ΡΠΉ ΠΊΠΎΠ΄ ΡΡΠΎΠΊΠΎΠ², ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠ°Π²ΠΈΡΡ ΠΏΡΡΠΌΠΎ ΠΈΠ· Π±ΡΠ°ΡΠ·Π΅ΡΠ°.
ΠΠΎΠ»Π΅Π·Π½ΠΎΠ΅
ΠΠ±ΠΎΡΠ°ΡΠΈΠ²Π°ΠΉΡΠ΅ Π² ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΡΠ½ΠΎΠ²Π½ΡΠ΅ ΠΌΠ΅Π½Ρ ΡΠ°ΠΉΡΠ° ΠΈΠ»ΠΈ ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΡ. ΠΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΠΌΠ΅Π½Ρ Π½Π΅ Π½ΡΠΆΠ΄Π°ΡΡΡΡ Π² ΠΎΠ±ΡΡΡΠΊΠ΅ Π² ΡΠ΅Π³
<nav>
ΠΠ°Π²ΠΈΠ³Π°ΡΠΈΡ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π² Π»ΡΠ±ΠΎΠΉ ΠΎΠ±Π»Π°ΡΡΠΈ ΡΡΡΠ°Π½ΠΈΡΡ, Π° Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ Π² ΡΠ°ΠΏΠΊΠ΅ ΡΠ°ΠΉΡΠ΅
βΠΡΠ΅Π΄ΡΠ΄ΡΡΠΈΠΉ
Π‘Π»Π΅Π΄ΡΡΡΠΈΠΉβ
ΠΠ°ΡΠ»ΠΈ ΠΎΡΠΈΠ±ΠΊΡ? ΠΡΡΡ ΡΡΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ? ΠΡΠ»ΡΠ΅ΠΊΠ²Π΅ΡΡΡ ΠΏΡΠΈΠ²Π΅ΡΡΡΠ²ΡΡΡΡΡ https://github.com/hexlet-basics
15 Tailwind Menu
ΠΠΎΠ»Π»Π΅ΠΊΡΠΈΡ Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΡΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ² Tailwind CSS menu ΠΎΡ Codepen ΠΈ Π΄ΡΡΠ³ΠΈΡ ΡΠ΅ΡΡΡΡΠΎΠ².
- ΠΠ΅Π½Ρ CSS
- ΠΠ΅Π½Ρ Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠΈ
- ΠΠ΅Π½Ρ JavaScript
- Π Π΅Π°Π³ΠΈΡΠΎΠ²Π°ΡΡ ΠΠ΅Π½Ρ
- ΠΠ΅Π½Ρ jQuery
Π ΠΊΠΎΠ΄Π΅
ΠΠ½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ ΠΌΠ΅Π½Ρ Π³Π°ΠΌΠ±ΡΡΠ³Π΅ΡΠΎΠ²
ΠΠΎΠ»Π»Π΅ΠΊΡΠΈΡ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΡ
Π·Π½Π°ΡΠΊΠΎΠ² Π³Π°ΠΌΠ±ΡΡΠ³Π΅Ρ-ΠΌΠ΅Π½Ρ Tailwind CSS. Π’ΠΎΠ»ΡΠΊΠΎ HTML, Π±Π΅Π· ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ CSS, Π±Π΅Π· JavaScript.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: β
ΠΠ΅ΡΡΠΈΡ ΠΏΠΎΠΏΡΡΠ½ΠΎΠ³ΠΎ Π²Π΅ΡΡΠ°: 3.0.18
Π ΠΊΠΎΠ΄Π΅
ΠΠ΅Π³Π°ΠΌΠ΅Π½Ρ
ΠΠ΅Π³Π°ΠΌΠ΅Π½Ρ Π½Π° ΡΠΈΡΡΠΎΠΌ CSS.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: β
ΠΠ΅ΡΡΠΈΡ ΠΏΠΎΠΏΡΡΠ½ΠΎΠ³ΠΎ Π²Π΅ΡΡΠ°: 2.2.19
Π ΠΊΠΎΠ΄Π΅
ΠΠ½ΠΈΠΌΠ°ΡΠΈΡ ΠΌΠ΅Π½Ρ Π³Π°ΠΌΠ±ΡΡΠ³Π΅ΡΠ°
ΠΠ½ΠΈΠΌΠ°ΡΠΈΡ ΠΎΡΠΊΡΡΡΠΈΡ ΠΈ Π·Π°ΠΊΡΡΡΠΈΡ ΠΌΠ΅Π½Ρ Π³Π°ΠΌΠ±ΡΡΠ³Π΅ΡΠ° Ρ ΠΏΠΎΠΌΠΎΡΡΡ TailwindCSS. ΠΠ΅Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ CSS.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: β
ΠΠ΅ΡΡΠΈΡ ΠΏΠΎΠΏΡΡΠ½ΠΎΠ³ΠΎ Π²Π΅ΡΡΠ°: 2.0.3
Π ΠΊΠΎΠ΄Π΅
ΠΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ ΠΠΎΠΏΡΡΠ½ΡΠΉ Π²Π΅ΡΠ΅Ρ
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: β
ΠΠ΅ΡΡΠΈΡ ΠΏΠΎΠΏΡΡΠ½ΠΎΠ³ΠΎ Π²Π΅ΡΡΠ°: 2. 0.3
Π ΠΊΠΎΠ΄Π΅
ΠΠ΅Π½Ρ Biings
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: β
ΠΠ΅ΡΡΠΈΡ ΠΏΠΎΠΏΡΡΠ½ΠΎΠ³ΠΎ Π²Π΅ΡΡΠ°: 2.0.0+
Π ΠΊΠΎΠ΄Π΅
Lo-Fi Tailwind CSS Mega Menu
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: β
ΠΠ΅ΡΡΠΈΡ ΠΏΠΎΠΏΡΡΠ½ΠΎΠ³ΠΎ Π²Π΅ΡΡΠ°: 1.8.10
Π ΠΊΠΎΠ΄Π΅
ΠΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ
ΠΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: β
ΠΠ΅ΡΡΠΈΡ ΠΏΠΎΠΏΡΡΠ½ΠΎΠ³ΠΎ Π²Π΅ΡΡΠ°: 1.4.6
Π ΠΊΠΎΠ΄Π΅
Π’Π΅ΠΌΠ½ΡΠΉ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΡΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ
Π’Π΅ΠΌΠ½ΡΠΉ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΡΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ Tailwind CSS.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: β
ΠΠ΅ΡΡΠΈΡ ΠΏΠΎΠΏΡΡΠ½ΠΎΠ³ΠΎ Π²Π΅ΡΡΠ°: 1. 4.6
Π ΠΊΠΎΠ΄Π΅
ΠΠ°Π½Π΅Π»Ρ ΠΌΠ΅Π½Ρ GSAP + Tailwind 3D
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: vue.js, gsap.js
ΠΠ΅ΡΡΠΈΡ ΠΏΠΎΠΏΡΡΠ½ΠΎΠ³ΠΎ Π²Π΅ΡΡΠ°: 1.4.6
Π ΠΊΠΎΠ΄Π΅
ΠΠ½ΠΎΠ³ΠΎΡΡΠΎΠ²Π½Π΅Π²ΠΎΠ΅ Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅Π΅ ΠΌΠ΅Π½Ρ Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΠ΅ΠΉ
ΠΠ»ΠΎΠΆΠ΅Π½Π½ΠΎΠ΅ Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅Π΅ ΠΌΠ΅Π½Ρ. ΠΠΎΠ»Π΅Π·Π½ΠΎ ΠΏΡΠΈ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΈ ΠΌΠ½ΠΎΠ³ΠΎΡΡΠΎΠ²Π½Π΅Π²ΠΎΠ³ΠΎ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ°. ΠΠΎΡΡ ΠΈΡΠΈΡΠ΅Π»ΡΠ½ΡΠΉ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΎΠ½Π½ΡΠΉ.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: β
ΠΠ΅ΡΡΠΈΡ ΠΏΠΎΠΏΡΡΠ½ΠΎΠ³ΠΎ Π²Π΅ΡΡΠ°: 1.2.0
Π ΠΊΠΎΠ΄Π΅
ΠΠ½ΠΎΠ³ΠΎΡΡΠΎΠ²Π½Π΅Π²ΡΠΉ ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠΈΠΉΡΡ ΡΠΏΠΈΡΠΎΠΊ
ΠΠ½ΠΎΠ³ΠΎΡΡΠΎΠ²Π½Π΅Π²ΡΠΉ ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠΈΠΉΡΡ ΡΠΏΠΈΡΠΎΠΊ Π΄Π»Ρ Tailwind CSS.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: β
ΠΠ΅ΡΡΠΈΡ ΠΏΠΎΠΏΡΡΠ½ΠΎΠ³ΠΎ Π²Π΅ΡΡΠ°: 1.2.0
Π ΠΊΠΎΠ΄Π΅
ΠΠ°ΡΠ°ΠΌΠ΅ΡΡΡ ΠΏΠ°ΠΏΠΊΠΈ
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: alpine. js
ΠΠ΅ΡΡΠΈΡ ΠΏΠΎΠΏΡΡΠ½ΠΎΠ³ΠΎ Π²Π΅ΡΡΠ°: 1.2.0
Π ΠΊΠΎΠ΄Π΅
ΠΡΠΎΡΡΠ°Ρ ΠΏΠ°Π½Π΅Π»Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ
ΠΡΠ΅Π½Ρ ΠΏΡΠΎΡΡΠ°Ρ ΠΏΠ°Π½Π΅Π»Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ Π΄Π»Ρ Π±ΡΡΡΡΠΎΠ³ΠΎ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π²Π΅Π±-ΡΠ°ΠΉΡΠΎΠ² ΠΈ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: β
ΠΠ΅ΡΡΠΈΡ ΠΏΠΎΠΏΡΡΠ½ΠΎΠ³ΠΎ Π²Π΅ΡΡΠ°: 0.3.0
Π ΠΊΠΎΠ΄Π΅
ΠΠΎΠ±ΠΈΠ»ΡΠ½Π°Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ Dribbble
ΠΠΎΠ±ΠΈΠ»ΡΠ½ΡΠΉ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΡΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ Dribbble Ρ Tailwind CSS. ΠΠ΅Π· Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ CSS.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: boxicons.css
ΠΠ΅ΡΡΠΈΡ ΠΏΠΎΠΏΡΡΠ½ΠΎΠ³ΠΎ Π²Π΅ΡΡΠ°: 1.1.2
Π ΠΊΠΎΠ΄Π΅
Airbnb-ΠΏΠΎΠ΄ΠΎΠ±Π½Π°Ρ ΠΏΠ°Π½Π΅Π»Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ
ΠΠ°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½Π°Ρ ΠΏΠ°Π½Π΅Π»Ρ Π² ΡΡΠΈΠ»Π΅ Airbnb Π΄Π»Ρ Tailwind CSS.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: β
ΠΠ΅ΡΡΠΈΡ ΠΏΠΎΠΏΡΡΠ½ΠΎΠ³ΠΎ Π²Π΅ΡΡΠ°: 0. 3.0
68 ΠΌΠ΅Π½Ρ JavaScript
ΠΠΎΠ»Π»Π΅ΠΊΡΠΈΡ Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΡΡ Π²Π°Π½ΠΈΠ»ΡΠ½ΡΡ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΡΡ ΠΌΠ΅Π½Ρ JavaScript ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ² ΠΊΠΎΠ΄Π°: ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΡ , Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΡ , Π²ΡΠΏΠ°Π΄Π°ΡΡΠΈΡ , Π»ΠΈΠΏΠΊΠΈΡ ΠΈ ΠΏΠΎΠ»Π½ΠΎΡΡΡΠ°Π½ΠΈΡΠ½ΡΡ . ΠΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠ΅ ΠΊΠΎΠ»Π»Π΅ΠΊΡΠΈΠΈ Π°ΠΏΡΠ΅Π»Ρ 2020 Π³ΠΎΠ΄Π°. 35 Π½ΠΎΠ²ΡΡ ΠΏΡΠ΅Π΄ΠΌΠ΅ΡΠΎΠ².
- ΠΠ΅Π½Ρ Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠΈ
- ΠΠ΅Π½Ρ CSS
- ΠΠ΅Π½Ρ jQuery
- Π Π΅Π°Π³ΠΈΡΠΎΠ²Π°ΡΡ ΠΠ΅Π½Ρ
- ΠΠ΅Π½Ρ ΠΏΠΎΠΏΡΡΠ½ΠΎΠ³ΠΎ Π²Π΅ΡΡΠ°
Π ΠΊΠΎΠ΄Π΅
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: β
Π ΠΊΠΎΠ΄Π΅
ΠΡΠ±ΠΎΡ Π²Π΅ΠΊΡΠΎΡΠ°/ΠΏΡΠΎΠ΅ΠΊΡΠ°
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: β
Π ΠΊΠΎΠ΄Π΅
Π¦Π΅Π»Π΅Π²Π°Ρ ΡΡΡΠ°Π½ΠΈΡΠ° ΡΡΡΠΈΡΡΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ Π²ΠΈΠ΄Π΅ΠΎ
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: β
Π ΠΊΠΎΠ΄Π΅
ΠΠΎΠΊΠΎΠ²Π°Ρ ΠΏΠ°Π½Π΅Π»Ρ Π’Π²ΠΈΡΡΠ΅ΡΠ°
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅ΡΠ°Π΅Ρ: Π½Π΅Ρ
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: gsap. js
Π ΠΊΠΎΠ΄Π΅
ΠΡΠ΄Π²ΠΈΠΆΠ½Π°Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ Ρ GSAP 3
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Opera, Safari
ΠΡΠ²Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: gsap.js
Π ΠΊΠΎΠ΄Π΅
ΠΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡ
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: β
Π‘ ΠΊΠΎΠ΄
ΠΠ°Π²ΠΈΠ³Π°ΡΠΈΡ Endless Wheel, ΡΠΎΠ·Π΄Π°Π½Π½Π°Ρ Ρ ΠΏΠΎΠΌΠΎΡΡΡ AlpineJS ΠΈ TailwindCSS
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: tailwind.css, alpine.js
Π ΠΊΠΎΠ΄Π΅
ΠΠ΅Π½Ρ Π΄Π»Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ Π²Π½ΡΡΡΠ΅Π½Π½Π΅ΠΉ ΡΡΡΠ°Π½ΠΈΡΡ Ρ ΡΠΎΠ½ΠΎΠ²ΡΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ ΡΠ΅ΡΠΊΠΈ
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: β
Π ΠΊΠΎΠ΄Π΅
ΠΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½Π°Ρ ΠΏΠ°Π½Π΅Π»Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: β
Π ΠΊΠΎΠ΄Π΅
ΠΠ½ΠΈΠΌΠ°ΡΠΈΡ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ ΠΏΠΎ ΠΌΠ΅Π½Ρ
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: gsap. js
Π ΠΊΠΎΠ΄Π΅
Π¦Π΅Π»Π΅Π²Π°Ρ ΡΡΡΠ°Π½ΠΈΡΠ° Π²Π΅Π±-ΡΠ°ΠΉΡΠ° Π΄Π»Ρ ΠΏΡΡΠ΅ΡΠ΅ΡΡΠ²ΠΈΠΉ/ΠΎΡΡΠ»Π΅ΠΆΠΈΠ²Π°Π½ΠΈΡ
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: β
Π ΠΊΠΎΠ΄Π΅
ΠΠΎΠ½ΡΠ΅ΠΊΡΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: β
Π ΠΊΠΎΠ΄Π΅
ΠΠΎΠ΄Π½Π°Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ
ΠΡΠΈΡΡΠ΄Π»ΠΈΠ²Π°Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ Ρ ΡΡΡΠ΅ΠΊΡΠ°ΠΌΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: β
Π ΠΊΠΎΠ΄Π΅
ΠΠ°Π²ΠΈΠ³Π°ΡΠΈΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
ΠΠ»ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ Π²ΡΡΡΠΏΠΈΡΠ΅Π»ΡΠ½ΠΎΠΉ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΠΌΠ΅Π½ΡΠ΅ΡΡΡ. ΠΡΡΠ»Π΅ΠΆΠΈΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΌΡΡΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ CSS. ΠΠΎΠ½ΡΡΡ ΡΠ΅ΠΊΡΡΠ° ΡΠ°ΡΠΊΡΡΠ²Π°Π΅ΡΡΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: β
Π ΠΊΠΎΠ΄Π΅
ΠΠ½ΠΈΠΌΠ°ΡΠΈΡ ΡΡΠ΅Ρ ΠΌΠ΅ΡΠ½ΠΎΠΉ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: β
Π ΠΊΠΎΠ΄Π΅
ΠΡΡΠ³Π°ΡΡΠ°Ρ Π»ΠΈΠΏΠΊΠ°Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: gsap. js
Π ΠΊΠΎΠ΄Π΅
ΠΠ°Π²ΠΈΠ³Π°ΡΠΈΡ Π² ΠΏΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½ΠΎΠΌ ΡΠ΅ΠΆΠΈΠΌΠ΅
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: β
Π ΠΊΠΎΠ΄Π΅
ΠΠ°Π²ΠΈΠ³Π°ΡΠΈΡ Stretch
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: gsap.js
Π ΠΊΠΎΠ΄Π΅
ΠΠΈΡΠ½Π°Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Splitting.js
ΠΠΎΠ±Π°Π²Π»Π΅Π½ Splitting.js, ΡΡΠΎΠ±Ρ Π²ΠΊΠ»ΡΡΠΈΡΡ Π΄ΡΡΠ³ΠΈΠ΅ Π³Π»ΡΠΏΡΠ΅ ΠΈΠ΄Π΅ΠΈ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: splitting.css, splitting.js
Π ΠΊΠΎΠ΄Π΅
ΠΠ·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΡΡΡΠ»ΠΊΠΈ
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: splitting.js
Π ΠΊΠΎΠ΄Π΅
ΠΠ·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΌΠ΅Π½Ρ
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: Π»ΠΎΠΊΠΎΠΌΠΎΡΠΈΠ²-scroll. css, imagesloaded.js, Π»ΠΎΠΊΠΎΠΌΠΎΡΠΈΠ²-scroll.js, gsap.js
Π ΠΊΠΎΠ΄Π΅
ΠΠ½ΠΈΠΌΠ°ΡΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΌΠ΅Π½Ρ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ
ΠΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Π΄Π»Ρ ΠΌΠ΅Π½Ρ, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΏΠΎΡΠ²Π»ΡΡΡΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΠ΅ΠΉ Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: β
Π ΠΊΠΎΠ΄Π΅
ΠΠ°Π²ΠΈΠ³Π°ΡΠΈΡ ΠΏΠΎ ΡΠ΅ΡΠΊΠ΅
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: gsap.js
Π ΠΊΠΎΠ΄Π΅
ΠΠΎΠ½ΡΠ΅ΠΊΡΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: β
Π ΠΊΠΎΠ΄Π΅
ΠΠ΅ΡΠΊΠΎΠ½Π΅ΡΠ½ΠΎ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΠΌΠΎΠ΅ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ
ΠΡΠ°ΡΠΊΠΈΠΉ ΠΎΠ±Π·ΠΎΡ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΠΌΠ΅Π½Ρ Ρ Π±Π΅ΡΠΊΠΎΠ½Π΅ΡΠ½ΠΎΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΠΎΠΉ, ΠΎΡΠ½ΠΎΠ²Π°Π½Π½ΠΎΠ΅ Π½Π° ΠΈΠ»Π»ΡΠ·ΠΈΠΈ ΡΠΈΠΊΠ»ΠΈΡΠ΅ΡΠΊΠΎΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΊΠ»ΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ².
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: β
Π ΠΊΠΎΠ΄Π΅
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½Π°Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΠ΅ΠΉ
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: font-awesome. css
Π ΠΊΠΎΠ΄Π΅
Π Π°ΡΡΠΈΡΡΠ΅ΠΌΠΎΠ΅ ΠΌΠ΅Π½Ρ
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: β
Π ΠΊΠΎΠ΄Π΅
ΠΠΎΠ΄ΡΠ΅ΡΠΊΠΈΠ²Π°Π½ΠΈΠ΅ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π½Π΅Ρ
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: β
Π ΠΊΠΎΠ΄Π΅
Π’Π΅ΠΊΡΡΠΎΠ²ΠΎΠ΅ ΠΌΠ΅Π½Ρ ΠΌΠΈΠ³Π°Π½ΠΈΡ Π² ΡΠ°Ρ ΠΌΠ°ΡΠ½ΠΎΠΌ ΠΏΠΎΡΡΠ΄ΠΊΠ΅
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π½Π΅Ρ
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: β
Π ΠΊΠΎΠ΄Π΅
SVG-Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ
Tinker Ρ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡΠΎΠΌ SVG, ΡΠ»Π΅ΠΌΠ΅Π½Ρ textPath
ΠΈ Π°ΡΡΠΈΠ±ΡΡ startOffset
Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΈΠ½ΡΡΠΈΠ³ΡΡΡΠ΅ΠΉ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ. ΠΠ½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½ΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ anime.js.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: Π°Π½ΠΈΠΌΠ΅.js
Π ΠΊΠΎΠ΄Π΅
ΠΠ΅Π½Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ ΠΏΠΎ ΠΊΡΡΠΎΡΠΊΠ°ΠΌ Π±ΡΠΌΠ°Π³ΠΈ
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: gsap. js
Π ΠΊΠΎΠ΄Π΅
ΠΠΎΠ»Π½ΠΎΡΡΡΠ°Π½ΠΈΡΠ½Π°Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π½Π΅Ρ
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: gsap.js
Π ΠΊΠΎΠ΄Π΅
ΠΠ°Π²ΠΈΠ³Π°ΡΠΈΡ ΠΏΠΎ ΠΎΠΊΠΎΠ½Π½ΠΎΠΉ ΡΡΠΎΡΠΊΠ΅
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: β
Π ΠΊΠΎΠ΄Π΅
ΠΠΎΠ»Π½ΠΎΡΡΡΠ°Π½ΠΈΡΠ½Π°Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½Π°Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ
ΠΠΎΠ½ΡΠ΅ΠΏΡΠΈΡ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΠΎΠ³ΠΎ ΠΌΠ΅Π½Ρ, Π² ΠΊΠΎΡΠΎΡΠΎΠΉ ΡΡΠΈ ΠΏΠΎΠ»ΠΎΡΡ Π·Π°ΠΏΠΎΠ»Π½ΡΡΡ ΡΠΊΡΠ°Π½. ΠΡΠΎ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ ΡΠ°ΠΊ, ΠΊΠ°ΠΊ Π±ΡΠ΄ΡΠΎ Π±Π»ΠΎΠΊΠΈ ΡΠΊΠ»Π°Π΄ΡΠ²Π°ΡΡΡΡ Π΄ΡΡΠ³ Π² Π΄ΡΡΠ³Π°. ΠΡΠΈ ΡΠ²ΠΎΡΠ°ΡΠΈΠ²Π°Π½ΠΈΠΈ ΠΌΠ΅Π½Ρ ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎΡΡΡ ΠΎΠ±ΡΠ°ΡΠ½Π°Ρ.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: β
Π ΠΊΠΎΠ΄Π΅
ΠΠΎΠ»Π½ΠΎΡΡΡΠ°Π½ΠΈΡΠ½Π°Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ
Π‘ΠΎΠ·Π΄Π°Π½Π° ΠΏΠΎΠ»Π½ΠΎΡΡΡΠ°Π½ΠΈΡΠ½Π°Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ anime.js ΠΈ Π½Π΅ΠΊΠΎΡΠΎΡΡΡ SVG.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π½Π΅Ρ
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: Π°Π½ΠΈΠΌΠ΅. js
Π ΠΊΠΎΠ΄Π΅
ΠΠ΅ΡΠ΅ΠΊΠΈΠ΄Π½Π°Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ
ΠΠ΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ΄ΡΠΎΡΠΌΠ°ΠΆΠΈΠ²Π°Π΅Ρ ΠΏΡΠΈ ΠΏΠ΅ΡΠ²ΠΎΠΌ ΠΏΠ΅ΡΠ΅Π²ΠΎΡΠΎΡΠ΅β¦
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π½Π΅Ρ
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: β
Π ΠΊΠΎΠ΄Π΅
ΠΠ»Π°Π²Π½Π°Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠ° Π»ΠΈΠΏΠΊΠΎΠΉ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ ΠΏΠΎ ΡΠΊΡΠΎΠ»Π»ΠΈΠ½Π³Ρ.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π½Π΅Ρ
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: β
Π ΠΊΠΎΠ΄Π΅
ΠΠ½ΠΈΠΌΠ°ΡΠΈΡ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ CSS
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π½Π΅Ρ
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: font-awesome.css
Π ΠΊΠΎΠ΄Π΅
ΠΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ Π² ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠΉ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ
ΠΠ΄Π΅Ρ ΡΡΠΎΠΉ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° ΡΠΎΡΡΠΎΠΈΡ Π² ΡΠΎΠΌ, ΡΡΠΎΠ±Ρ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΡΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅ Π±ΠΎΠ»ΡΡΠ΅ Π½Π΅ ΠΏΠΎΠΌΠ΅ΡΠ°ΡΡΡΡ Π² Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΡΠΉ ΡΡΠΈΠΊ/ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ. Π₯ΠΈΡΡΠΎΡΡΡ Π·Π°ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ Π² ΡΠΎΠΌ, ΡΡΠΎΠ±Ρ Π·Π°Π΄Π°ΡΡ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΡ Π·Π°Π΄Π°Π½Π½ΡΡ Π²ΡΡΠΎΡΡ ΠΈ ΡΠ°Π·ΡΠ΅ΡΠΈΡΡ ΠΏΠ΅ΡΠ΅Π½ΠΎΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°, Π½ΠΎ ΡΠΊΡΡΡΡ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅. ΠΠ°ΡΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ JavaScript, ΡΡΠΎΠ±Ρ ΠΏΡΠΎΠ²Π΅ΡΠΈΡΡ Π²ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅ Π±ΡΠ»ΠΈ Π·Π°Π²Π΅ΡΠ½ΡΡΡ, ΠΈ ΠΏΠΎΠΊΠ°Π·Π°ΡΡ ΠΈΡ
Π² ΡΡΠΈΠΊΠ΅/ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠΉ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: resizeobserver.js
Π ΠΊΠΎΠ΄Π΅
ΠΠ΅Π½Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ Ρ ΠΊΡΡΠ³ΠΎΠ²ΠΎΠΉ Π°Π½ΠΈΠΌΠ°ΡΠΈΠ΅ΠΉ
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π½Π΅Ρ
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: β
Π ΠΊΠΎΠ΄Π΅
ΠΠ·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ Ρ ΠΌΠ΅Π½Ρ
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π½Π΅Ρ
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: β
Π ΠΊΠΎΠ΄Π΅
ΠΠ°Π²ΠΈΠ³Π°ΡΠΈΡ ΠΈ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½Π°Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: Π°Π½ΠΈΠΌΠ΅.js
Π ΠΊΠΎΠ΄Π΅
Π©Π΅Π»ΡΠΊΠΎΠ²ΠΎΠ΅ ΠΌΠ΅Π½Ρ
Π©Π΅Π»ΡΠΊΠΎΠ²ΡΠ΅ ΠΌΠ΅Π½Ρ: Π΄ΠΎΡΡΡΠΏΠ½ΠΎΠ΅ ΠΈ ΠΏΠΎΡΡΠΎΡΠ½Π½ΠΎ ΡΠ»ΡΡΡΠ°Π΅ΠΌΠΎΠ΅ ΠΌΠ΅Π½Ρ Ρ ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠΈΠΌΠΈΡΡ ΡΠΏΠΈΡΠΊΠ°ΠΌΠΈ.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: β
Π ΠΊΠΎΠ΄Π΅
ΠΠ΅ΡΠ΅ΡΠ°ΡΠΊΠΈΠ²Π°Π΅ΠΌΠΎΠ΅ ΠΌΠ΅Π½Ρ Ρ ΠΏΡΠ΅Π΄Π²Π°ΡΠΈΡΠ΅Π»ΡΠ½ΡΠΌ ΠΏΡΠΎΡΠΌΠΎΡΡΠΎΠΌ ΡΠ΅ΡΠΊΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ
ΠΠ΅ΡΠ΅ΡΠ°ΡΠΊΠΈΠ²Π°Π΅ΠΌΠΎΠ΅ Π²ΡΡΡΠΎΠ΅Π½Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ Ρ ΡΠ°Π·ΡΠΎΠ·Π½Π΅Π½Π½ΡΠΌΠΈ ΡΡΠΊΠΈΠ·Π°ΠΌΠΈ ΠΏΡΠ΅Π΄Π²Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ΡΠ΅ΡΠΊΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: imagesloaded.js, charm.js, tweenmax.js, draggabilly.js
Π ΠΊΠΎΠ΄Π΅
ΠΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΠΎΠ΅ ΠΊΡΡΠ³ΠΎΠ²ΠΎΠ΅ ΠΌΠ΅Π½Ρ
ΠΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΠΎΠ΅ ΡΠ°Π΄ΠΈΠ°Π»ΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ Π² HTML, CSS ΠΈ JS.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: font-awesome.css
Π ΠΊΠΎΠ΄Π΅
ΠΡΠ΅Π°ΡΠΈΠ²Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ Π΄Π»Ρ Π³Π°ΠΌΠ±ΡΡΠ³Π΅ΡΠΎΠ²
ΠΠ°ΠΌΠ±ΡΡΠ³Π΅Ρ-ΠΌΠ΅Π½Ρ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ Π½ΠΎΠ²ΠΎΠ³ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π° CSS clip-path
.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge (ΡΠ°ΡΡΠΈΡΠ½ΠΎ), Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: β
Π ΠΊΠΎΠ΄Π΅
ΠΡΠ°ΡΠΈΠ²ΡΠΉ ΡΡΡΠ΅ΠΊΡ Π΄Π»Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ
ΠΡΠ»ΠΈΡΠ½ΡΠΉ ΡΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΈ ΡΠ΅Π»ΡΠΊΠ° Π΄Π»Ρ ΠΏΠ°Π½Π΅Π»ΠΈ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ ΠΈΠ»ΠΈ Π΄ΡΡΠ³ΠΈΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ².
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π½Π΅Ρ
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: β
Π ΠΊΠΎΠ΄Π΅
ΠΠ°Π²ΠΈΠ³Π°ΡΠΈΡ Ρ SVG
SVG ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΠΏΠ°Π½Π΅Π»ΠΈ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ. ΠΡΡΠ΅ΠΊΡΡ ΡΡΠ°Π±Π°ΡΡΠ²Π°ΡΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΈ ΠΊΠ»ΠΈΠΊΠ΅.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π½Π΅Ρ
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: tweenmax.js
Π ΠΊΠΎΠ΄Π΅
ΠΠ΅Π½ΡΠΎΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π½Π΅Ρ
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: β
Π ΠΊΠΎΠ΄Π΅
ΠΠ΅Π»Π΅ΠΉΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ
ΠΠΎΠ½ΡΠ΅ΠΏΡ ΠΆΠ΅Π»Π΅ΠΉΠ½ΠΎΠ³ΠΎ ΠΌΠ΅Π½Ρ Π² HTML, CSS ΠΈ JS.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge (ΡΠ°ΡΡΠΈΡΠ½ΠΎ), Firefox, Opera, Safari
ΠΡΠ²Π΅ΡΠ°Π΅Ρ: Π½Π΅Ρ
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: β
Π ΠΊΠΎΠ΄Π΅
ΠΠ½ΠΎΠΏΠΊΠΈ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ
ΠΠ½ΠΎΠΏΠΊΠΈ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ°.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π½Π΅Ρ
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: font-awesome. css
Π ΠΊΠΎΠ΄Π΅
ΠΠΎΠ΄ΠΎΠ²ΠΎΠ΅ ΠΌΠ΅Π½Ρ
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: β
Π ΠΊΠΎΠ΄Π΅
ΠΠ°Π½Π΅Π»ΠΈ ΠΌΠ΅Π½Ρ ΡΠ΅ΡΠΊΠΈ CSS
ΠΠ½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΠΏΠ°Π½Π΅Π»ΠΈ ΠΌΠ΅Π½Ρ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ ΡΠ΅ΡΠΊΠΈ CSS. Π©Π΅Π»ΠΊΠ½ΠΈΡΠ΅ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»Ρ Π² Π²Π΅ΡΡ Π½Π΅ΠΌ Π»Π΅Π²ΠΎΠΌ ΡΠ³Π»Ρ, ΡΡΠΎΠ±Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ Π΅Π³ΠΎ Π² Π΄Π΅ΠΉΡΡΠ²ΠΈΠΈ.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: β
Π ΠΊΠΎΠ΄Π΅
ΠΡΠΏΠ°Π΄Π°ΡΡΠ΅Π΅ ΠΌΠ΅Π½Ρ
ΠΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ΅ ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠ΅Π΅ΡΡ ΠΌΠ΅Π½Ρ.
Π ΠΊΠΎΠ΄Π΅
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½Π°Ρ Π±ΠΎΠΊΠΎΠ²Π°Ρ ΠΏΠ°Π½Π΅Π»Ρ/Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½Π°Ρ ΠΏΠ°Π½Π΅Π»Ρ
ΠΠ΅ΡΡΠΈΠΊΠ°Π»ΡΠ½Π°Ρ/Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½Π°Ρ Π°Π΄Π°ΠΏΡΠΈΠ²Π½Π°Ρ Π±ΠΎΠΊΠΎΠ²Π°Ρ ΠΏΠ°Π½Π΅Π»Ρ/Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½Π°Ρ ΠΏΠ°Π½Π΅Π»Ρ.
Π ΠΊΠΎΠ΄Π΅
ΠΠ°Π²ΠΈΠ³Π°ΡΠΈΡ Π²Π½Π΅ Ρ ΠΎΠ»ΡΡΠ° Ρ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Π°ΠΌΠΈ ΡΡΡΠ°Π½ΠΈΡ
ΠΠΎΠ»ΡΡΠ΅ ΡΠΊΡΠΏΠ΅ΡΠΈΠΌΠ΅Π½ΡΠΎΠ² Ρ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Π°ΠΌΠΈ ΠΈ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠ΅ΠΉ. Π Π΅ΡΠΈΠ» Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Π΄Π»Ρ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ΠΎΠ² ΡΡΡΠ°Π½ΠΈΡ.
Π ΠΊΠΎΠ΄Π΅
Π¨Π°Π±Π»ΠΎΠ½ Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ
Π¨Π°Π±Π»ΠΎΠ½ Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ Ρ Π²ΡΠΏΠ°Π΄Π°ΡΡΠΈΠΌ ΠΌΠ΅Π½Ρ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ Bootstrap.
Π ΠΊΠΎΠ΄Π΅
ΠΠ½Π΄ΠΈΠΊΠ°ΡΠΎΡΡ Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ
ΠΠΎΠΊΠΎΠ²ΠΎΠ΅ ΠΌΠ΅Π½Ρ Ρ ΠΈΠ½Π΄ΠΈΠΊΠ°ΡΠΎΡΠ°ΠΌΠΈ.
Π ΠΊΠΎΠ΄Π΅
ΠΡΡΠ³ΠΎΠ²Π°Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ
ΠΠΊΡΠΏΠ΅ΡΠΈΠΌΠ΅Π½ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ Π΄Π»Ρ ΡΠ΅Ρ Π½ΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ ΡΠ°ΠΉΡΠ°. Π‘ΠΎΠ·Π΄Π°Π½ Π½Π° ΠΏΠ»Π°ΡΡΠΎΡΠΌΠ΅ GreenSock Animation ΠΈ SVG.
Π ΠΊΠΎΠ΄Π΅
ΠΠΎΠ΄ΠΌΠ΅Π½Ρ Π Π°Π·Π²Π΅ΡΠ½ΡΡΡ
ΠΠ³ΡΠΈΠ²Π°Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ, ΡΠ°ΡΡΠΈΡΡΡΡΠ°Ρ ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ Π½Π° ΠΏΠ°Π½Π΅Π»ΠΈ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ² Π² Π²Π΅Π±-ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡΡ . ΠΠ΅ΡΠ΅Π²ΠΎΠ΄ΠΈΡ, Π·Π°ΡΡΡ Π°Π΅Ρ ΠΈ ΡΡΠ°Π½ΡΡΠΎΡΠΌΠΈΡΡΠ΅Ρ ΠΈΠΊΠΎΠ½ΠΊΠΈ SVG. ΠΠ΄ΠΎΡ Π½ΠΎΠ²Π»Π΅Π½Π½ΡΠΉ ΠΠΈΡΠ΄ΠΆΠΈΠ»ΠΎΠΌ ΠΠ°Π½Π°ΡΠΎΠΌ, ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ Π² ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ Π½Π° Π΄ΡΠΈΠ±Π±Π»Π΅.
Π ΠΊΠΎΠ΄Π΅
ΠΠ½ΠΎΠΏΠΊΠ° Π²ΠΊΠ»Π°Π΄ΠΊΠΈ Morphing ΡΠΎ ΡΠΏΠΈΡΠΊΠΎΠΌ
ΠΠ½ΠΎΠΏΠΊΠ° ΠΌΠΎΡΡΠΈΠ½Π³Π° Ρ Π²ΡΠΏΠ°Π΄Π°ΡΡΠΈΠΌ ΡΠΏΠΈΡΠΊΠΎΠΌ ΠΏΠΎΠ΄ Π½Π΅ΠΉ.
Π ΠΊΠΎΠ΄Π΅
Π’Π΅ΠΊΡΡΠΎΠ²ΡΠΉ ΡΠ΅Π΄Π°ΠΊΡΠΎΡ ES6/ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π½Π΅Ρ
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: font-awesome.css,
Π ΠΊΠΎΠ΄Π΅
ΠΡΡΠ΅ΠΊΡ ΠΏΠΎΠ΄ΡΠ²Π΅ΡΠΊΠΈ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ
ΠΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅ CSS, Π½ΠΎ Π²ΡΠ΅ ΡΠ°Π²Π½ΠΎ ΠΎΡΠ»ΠΈΡΠ½ΠΎ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ Π±Π΅Π· Π½ΠΈΡ
.