Π Π°Π·Π½ΠΎΠ΅

Π₯Π»Π΅Π±Π½Ρ‹Π΅ ΠΊΡ€ΠΎΡˆΠΊΠΈ css: Как ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Ρ…Π»Π΅Π±Π½Ρ‹Π΅ ΠΊΡ€ΠΎΡˆΠΊΠΈ

20.07.2023

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

Bootstrap Breadcrumb – ΠšΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ для создания Ρ…Π»Π΅Π±Π½Ρ‹Ρ… ΠΊΡ€ΠΎΡˆΠ΅ΠΊ

Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ ΠΌΡ‹ познакомимся с процСссом создания Ρ…Π»Π΅Π±Π½Ρ‹Ρ… ΠΊΡ€ΠΎΡˆΠ΅ΠΊ (Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΎΠ½Π½Ρ‹Ρ… Ρ†Π΅ΠΏΠΎΡ‡Π΅ΠΊ) для страниц сайта Π½Π° Bootstrap 3 ΠΈ 4 вСрсии.

НазначСниС Ρ…Π»Π΅Π±Π½Ρ‹Ρ… ΠΊΡ€ΠΎΡˆΠ΅ΠΊ

Π₯Π»Π΅Π±Π½Ρ‹Π΅ ΠΊΡ€ΠΎΡˆΠΊΠΈ (Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΎΠ½Π½Ρ‹Π΅ Ρ†Π΅ΠΏΠΎΡ‡ΠΊΠΈ, breadcrumbs) – это элСмСнт интСрфСйса, ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½Π½Ρ‹ΠΉ для создания Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠΉ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ ΠΏΠΎ сайту.

Π˜Ρ… основноС Π½Π°Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ – это ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ Ρ‚Π΅ΠΊΡƒΡ‰Π΅Π΅ мСстополоТСниС ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ Π² иСрархичСской структурС сайта ΠΈ ΠΎΠ±Π΅ΡΠΏΠ΅Ρ‡ΠΈΡ‚ΡŒ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΡŽ ΠΏΠΎ Π½Π΅ΠΉ.

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

Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Ρ…Π»Π΅Π±Π½Ρ‹Π΅ ΠΊΡ€ΠΎΡˆΠΊΠΈ – это Π΅Ρ‰Ρ‘ ΠΎΠ΄ΠΈΠ½ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ Π² структурС сайта ΠΈ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒΡΡ ΠΏΠΎ Π΅Π³ΠΎ страницам.

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Ρ…Π»Π΅Π±Π½Ρ‹Ρ… ΠΊΡ€ΠΎΡˆΠ΅ΠΊ Π² Bootstrap

Π’ Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠ΅ Bootstrap созданиС Ρ…Π»Π΅Π±Π½Ρ‹Ρ… ΠΊΡ€ΠΎΡˆΠ΅ΠΊ осущСствляСтся с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° Breadcrumb. По сути этот ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ – это просто Π½Π°Π±ΠΎΡ€ стилСй, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½ΡƒΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Ρ‘Π½Π½ΠΎΠΉ HTML Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ΅ Ρ‡Π΅Ρ€Π΅Π· классы.

HTML ΠΊΠΎΠ΄ Ρ…Π»Π΅Π±Π½Ρ‹Ρ… ΠΊΡ€ΠΎΡˆΠ΅ΠΊ Π² Bootstrap 4:

<ol>
  <li><a href="#">ΠšΠ°Ρ‚Π°Π»ΠΎΠ³</a></li>
  <li><a href="#">Π‘ΠΌΠ°Ρ€Ρ‚Ρ„ΠΎΠ½Ρ‹</a></li>
  <li>6.47" Π‘ΠΌΠ°Ρ€Ρ‚Ρ„ΠΎΠ½ Huawei P30 Pro 256 Π“Π‘ Ρ‡Π΅Ρ€Π½Ρ‹ΠΉ</li>
</ol>

Из ΠΊΠΎΠ΄Π° Π²ΠΈΠ΄Π½ΠΎ, Ρ‡Ρ‚ΠΎ процСсс создания Ρ…Π»Π΅Π±Π½Ρ‹Ρ… ΠΊΡ€ΠΎΡˆΠ΅ΠΊ состоит ΠΈΠ· добавлСния Π½Π° страницу элСмСнта <ol> с классом breadcrumb. Π”Π°Π»Π΅Π΅ Π² <ol> Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΠΎΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ Π½ΡƒΠΆΠ½ΠΎΠ΅ количСство элСмСнтов <li> с классом breadcrumb-item. Π­Ρ‚ΠΈ элСмСнты Π±ΡƒΠ΄ΡƒΡ‚ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡ‚ΡŒ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΎΠ½Π½ΡƒΡŽ Ρ†Π΅ΠΏΠΎΡ‡ΠΊΡƒ Π΄ΠΎ Ρ‚Π΅ΠΊΡƒΡ‰Π΅ΠΉ страницы. ПослС этого Π² <li> Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΠΎΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ <a> с Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠΌ href

ΠΈ тСкстом.

Если Ρ…Π»Π΅Π±Π½Ρ‹Π΅ ΠΊΡ€ΠΎΡˆΠΊΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π·Π°ΠΊΠ°Π½Ρ‡ΠΈΠ²Π°Ρ‚ΡŒΡΡ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ΠΌ Ρ‚Π΅ΠΊΡƒΡ‰Π΅ΠΉ страницы, Ρ‚ΠΎ Π² этом случаС Π² послСдний элСмСнт <li> Π½ΡƒΠΆΠ½ΠΎ просто ΠΏΠΎΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ Π΅Ρ‘ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊ Π½Π΅ΠΌΡƒ класс active. Π‘ΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ссылку Π² этом случаС Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ, Ρ‚.ΠΊ. Π² Π½Π΅ΠΉ Π½Π΅Ρ‚ Π½ΠΈΠΊΠ°ΠΊΠΎΠ³ΠΎ смысла, Π΄Π° ΠΈ с Ρ‚ΠΎΡ‡ΠΊΠΈ зрСния SEO это Π½Π΅ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ.

Π’ Bootstrap 3 Ρ…Π»Π΅Π±Π½Ρ‹Π΅ ΠΊΡ€ΠΎΡˆΠΊΠΈ ΡΠΎΠ·Π΄Π°ΡŽΡ‚ΡΡ Π°Π½Π°Π»ΠΎΠ³ΠΈΡ‡Π½ΠΎ (посрСдством Π½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ списка) Π·Π° ΠΈΡΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ΠΌ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ ΠΊ элСмСнтам

li Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ класс breadcrumb-item:

<ol>
  <li><a href="#">ΠšΠ°Ρ‚Π°Π»ΠΎΠ³</a></li>
  <li><a href="#">Π‘ΠΌΠ°Ρ€Ρ‚Ρ„ΠΎΠ½Ρ‹</a></li>
  <li>6.47" Π‘ΠΌΠ°Ρ€Ρ‚Ρ„ΠΎΠ½ Huawei P30 Pro 256 Π“Π‘ Ρ‡Π΅Ρ€Π½Ρ‹ΠΉ</li>
</ol>

Для свСдСния, Ρ€Π°Π·Π΄Π΅Π»ΠΈΡ‚Π΅Π»ΡŒ элСмСнтов списка Π² Bootstrap CSS (Β«bootstrap.cssΒ») добавляСтся Π½Π° страницу Ρ‡Π΅Ρ€Π΅Π· псСвдоэлСмСнт ::before ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ:

/* Bootstrap 3 */
.breadcrumb > li + li:before {
  padding: 0 5px;
  color: #ccc;
  content: "/\00a0";
}

/* Bootstrap 4 */
.
breadcrumb-item + .breadcrumb-item::before { display: inline-block; padding-right: 0.5rem; color: #6c757d; content: "/"; }

ΠŸΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ Ρ…Π»Π΅Π±Π½Ρ‹Ρ… ΠΊΡ€ΠΎΡˆΠ΅ΠΊ:

<!-- Bootstrap 4 -->
<ol>
  <li><a href="#">Главная</a></li>
  <li><a href="#">Ноутбуки, ΠΏΠ»Π°Π½ΡˆΠ΅Ρ‚Ρ‹, ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Ρ‹</a></li>
  <li><a href="#">Ноутбуки</a></li>
  <li><a href="#">Ноутбуки Apple MacBook</a></li>
  <li><a href="#">Apple</a></li>
</ol>
<!-- Bootstrap 4 --> <ol> <li><a href="#">ΠšΠ°Ρ‚Π°Π»ΠΎΠ³</a></li> <li><a href="#">ΠšΠΎΠΌΠΏΠ»Π΅ΠΊΡ‚ΡƒΡŽΡ‰ΠΈΠ΅, ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Ρ‹ ΠΈ Π½ΠΎΡƒΡ‚Π±ΡƒΠΊΠΈ</a></li> <li><a href="#">ΠŸΠ΅Ρ€ΠΈΡ„Π΅Ρ€ΠΈΡ ΠΈ аксСссуары</a></li> <li><a href="#">ΠœΡ‹ΡˆΠΈ</a></li> <li>ΠšΠΎΠΌΠΏΠ°ΠΊΡ‚Π½Π°Ρ ΠΌΡ‹ΡˆΡŒ проводная Defender Patch MS-759 Ρ‡Π΅Ρ€Π½Ρ‹ΠΉ</li> </ol>

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Ρ…Π»Π΅Π±Π½Ρ‹Ρ… ΠΊΡ€ΠΎΡˆΠ΅ΠΊ со своим ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅ΠΌ

На сайтС, построСнном Π½Π° Bootstrap, ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅ Ρ…Π»Π΅Π±Π½Ρ‹Ρ… ΠΊΡ€ΠΎΡˆΠ΅ΠΊ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²Ρ‹ΠΏΠΎΠ»Π½ΡΡ‚ΡŒ Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ стилСй, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΈΠ΄ΡƒΡ‚ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ с этим Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΎΠΌ.

ΠŸΡ€ΠΈ нСобходимости Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°ΠΏΠΈΡΠ°Ρ‚ΡŒ свои.

Но ΠΏΠ΅Ρ€Π΅Π΄ Ρ‚Π΅ΠΌ ΠΊΠ°ΠΊ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒ ΠΊ ΠΈΡ… созданию ΠΆΠ΅Π»Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ ΡƒΠ±Ρ€Π°Ρ‚ΡŒ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ Breadcrumb ΠΈΠ· Bootstrap. Π­Ρ‚ΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ‚ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΡƒΠΌΠ΅Π½ΡŒΡˆΠΈΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€ CSS Ρ„Π°ΠΉΠ»Π° этого Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠ°. Π’ ΠΏΡ€ΠΎΡ‚ΠΈΠ²Π½ΠΎΠΌ случаС Ρƒ вас Π² Β«bootstrap.cssΒ» останутся стили, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½Π° сайтС Π²Ρ‹ Π½ΠΈΠ³Π΄Π΅ Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅. Как ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ сборку ΠΏΠΎΠ΄ свой ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΠΎ описано Π² этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ (Ссли Π²Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ Bootstrap 3, Ρ‚ΠΎ здСсь).

НапримСр рассмотрим ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Ρ…Π»Π΅Π±Π½Ρ‹Π΅ ΠΊΡ€ΠΎΡˆΠΊΠΈ со ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅ΠΌ:

HTML структуру ΠΊΡ€ΠΎΡˆΠ΅ΠΊ оставим ΠΊΠ°ΠΊ Π² Bootstrap 4:

<ol>
  <li><a href="#">ΠšΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹</a></li>
  <li><a href="#">pdoTools</a></li>
  <li>ΠŸΠ°Ρ€ΡΠ΅Ρ€</li>
</ol>

НапишСм стили:

/* ΠΏΡ€ΠΈΠΌΠ΅Ρ€ стилСй */
.breadcrumb {
  list-style: none;
  display: flex;
  padding-left: 0px;
}

.breadcrumb-item>a,
.breadcrumb-item.active {
  color: #fff;
  display: block;
  background: #7b1fa2;
  text-decoration: none;
  position: relative;
  height: 34px;
  line-height: 34px;
  padding: 0 10px 0 5px;
  text-align: center;
  margin-right: 23px;
  user-select: none;
}

.
breadcrumb-item:first-child>a { padding-left: 15px; border-top-left-radius: 4px; border-bottom-left-radius: 4px; } .breadcrumb-item:last-child>a, .breadcrumb-item.active { border-top-right-radius: 4px; border-bottom-right-radius: 4px; margin-right: 0; padding-right: 15px; } .breadcrumb-item:first-child>a::before, .breadcrumb-item:last-child>a::after { border: none; } .breadcrumb-item>a::before, .breadcrumb-item>a::after, .breadcrumb-item.active::before { content: ""; position: absolute; top: 0; border: 0 solid #7b1fa2; border-width: 17px 10px; width: 0; height: 0; } .breadcrumb-item>a::before, .breadcrumb-item.active::before { left: -20px; border-left-color: transparent; } .breadcrumb-item>a::after { left: 100%; border-color: transparent; border-left-color: #7b1fa2; } .
breadcrumb-item>a:hover { background-color: #6a1b9a; } .breadcrumb-item>a:hover::before { border-color: #6a1b9a; border-left-color: transparent; } .breadcrumb-item>a:hover::after { border-left-color: #6a1b9a; } .breadcrumb-item.active { color: #6a1b9a; background-color: #f3e5f5; } .breadcrumb-item.active::before { border-color: #f3e5f5; border-left-color: transparent; }

Π‘Π°Π·ΠΎΠ²Ρ‹Π΅ Ρ…Π»Π΅Π±Π½Ρ‹Π΅ ΠΊΡ€ΠΎΡˆΠΊΠΈ CSS

Главная Β» ΠŸΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ°

ΠŸΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ°

На Ρ‡Ρ‚Π΅Π½ΠΈΠ΅ 5 ΠΌΠΈΠ½ ΠŸΡ€ΠΎΡΠΌΠΎΡ‚Ρ€ΠΎΠ² 143 ΠžΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½ΠΎ

Primer CSS ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ Π½Π°ΠΌ Ρ‚Π°ΠΊ ΠΌΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ², ΠΈΒ BreadcrumbsΒ β€” ΠΎΠ΄ΠΈΠ½ ΠΈΠ·Β Π½ΠΈΡ…. В этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ ΠΌΡ‹Β ΡƒΠ·Π½Π°Π΅ΠΌ ΠΎΒ ΠΏΠ°Π½ΠΈΡ€ΠΎΠ²ΠΎΡ‡Π½Ρ‹Ρ… сухарях. Π₯Π»Π΅Π±Π½Ρ‹Π΅ ΠΊΡ€ΠΎΡˆΠΊΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ для указания мСстополоТСния Ρ‚Π΅ΠΊΡƒΡ‰Π΅ΠΉ страницы Π²Β Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΎΠ½Π½ΠΎΠΉ ΠΈΠ΅Ρ€Π°Ρ€Ρ…ΠΈΠΈ. Для прСдставлСния ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°, Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€ΠΈΡ€ΡƒΡŽΡ‰Π΅Π³ΠΎ Ρ€Π°Π·Π΄Π΅Π»Π΅Π½Π½Ρ‹Π΅ ΠΏΡƒΡ‚ΠΈ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ Ρ…Π»Π΅Π±Π½Ρ‹Π΅ ΠΊΡ€ΠΎΡˆΠΊΠΈ. 18.0.0/dist/primer.css»/>

</head>

Β 

<bodystyle="margin:100px">

Β Β Β Β <divclass="text-center">

Β Β Β Β Β Β Β Β <h2class="color-fg-success"> GeeksforGeeks </h2>

Β Β Β Β Β Β Β Β <h4><u>Primer CSS Breadcrumbs</u></h4><br/>

Β Β Β Β </div>

Β 

Β Β Β Β <divclass="d-flex flex-justify-center">

Β Β Β Β Β Β Β Β <divaria-label="Breadcrumb">

Β Β Β Β Β Β Β Β Β Β Β Β <ol>

Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β <liclass="breadcrumb-item">

Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β <ahref="#">Home Section</a>

Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β </li>

Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β <liclass="breadcrumb-item">

Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β <ahref="#">Previous Section</a>

Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β </li>

Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β <liclass="breadcrumb-item breadcrumb-item-selected">

Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β <ahref="#"aria-current="page">Section selected</a>

Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β </li>

Β Β Β Β Β Β Β Β Β Β Β Β </ol>

Β Β Β Β Β Β Β Β </div>

Β Β Β Β </div>Β Β Β Β 

Β Β Β Β <br/>

Β Β Β Β <divclass="d-flex flex-justify-center">

Β Β Β Β Β Β Β Β <divaria-label="Breadcrumb">

Β Β Β Β Β Β Β Β Β Β Β Β <ol>

Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β <liclass="breadcrumb-item">

Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β <ahref="#">Home</a>

Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β </li>

Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β <liclass="breadcrumb-item">

Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β <ahref="#">Geeks for Geeks</a>

Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β </li>

Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β <liclass="breadcrumb-item breadcrumb-item-selected">

Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β <ahref="#"aria-current="page">Articles</a>

Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β </li>

Β Β Β Β Β Β Β Β Β Β Β Β </ol>

Β Β Β Β Β Β Β Β </div>

Β Β Β Β </div>

</body>

Β Β Β 

</html>

Π’Ρ‹Ρ…ΠΎΠ΄:

20 Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΎΠ½Π½Ρ‹Ρ… ΠΊΡ€ΠΎΡˆΠ΅ΠΊ CSS

ΠšΠΎΠ»Π»Π΅ΠΊΡ†ΠΈΡ бСсплатных ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΎΠ½Π½ΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π° HTML ΠΈ CSS (простых, Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Ρ…, многострочных, свСрнутых ΠΈ Ρ‚. Π΄.) ΠΈΠ· codepen ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΡ… рСсурсов. ОбновлСниС Π΄Π΅ΠΊΠ°Π±Ρ€ΡŒΡΠΊΠΎΠΉ ΠΊΠΎΠ»Π»Π΅ΠΊΡ†ΠΈΠΈ 2019 Π³ΠΎΠ΄Π°. 5 Π½ΠΎΠ²Ρ‹Ρ… ΠΏΡ€Π΅Π΄ΠΌΠ΅Ρ‚ΠΎΠ².

  1. ΠŸΠ°Π½ΠΈΡ€ΠΎΠ²ΠΎΡ‡Π½Ρ‹Π΅ сухари Bootstrap
О кодС

Π”ΠΈΠ·Π°ΠΉΠ½ ΠΏΠ°Π½ΠΈΡ€ΠΎΠ²ΠΎΡ‡Π½Ρ‹Ρ… сухарСй

Π”ΠΈΠ·Π°ΠΉΠ½ Ρ…Π»Π΅Π±Π½Ρ‹Ρ… ΠΊΡ€ΠΎΡˆΠ΅ΠΊ (пСрСкос, радиус Π³Ρ€Π°Π½ΠΈΡ†Ρ‹, эффСкт Ρ‰Π΅Π»Ρ‡ΠΊΠ°).

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π½Π΅Ρ‚

Зависимости: —

О кодС

ΠŸΠ°Π½ΠΈΡ€ΠΎΠ²ΠΎΡ‡Π½Ρ‹Π΅ сухари

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π½Π΅Ρ‚

Зависимости: —

О кодС

ΠŸΠ°Π½ΠΈΡ€ΠΎΠ²ΠΎΡ‡Π½Ρ‹Π΅ сухари ΠšΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π΄Π°

Зависимости: —

О кодС

ЭкспСримСнт с Ρ…Π»Π΅Π±Π½Ρ‹ΠΌΠΈ ΠΊΡ€ΠΎΡˆΠΊΠ°ΠΌΠΈ

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π΄Π°

Зависимости: —

О кодС

Π Π΅Ρ„Π°ΠΊΡ‚ΠΎΡ€ΠΈΠ½Π³ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса β€” Ρ…Π»Π΅Π±Π½Ρ‹Π΅ ΠΊΡ€ΠΎΡˆΠΊΠΈ

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π½Π΅Ρ‚

Зависимости: —

О кодС

ΠŸΠ°Π½ΠΈΡ€ΠΎΠ²ΠΎΡ‡Π½Ρ‹Π΅ сухари для Π½Π°Ρ€Π΅Π·ΠΊΠΈ CSS

Π₯Π»Π΅Π±Π½Ρ‹Π΅ ΠΊΡ€ΠΎΡˆΠΊΠΈ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‚ ΠΈΠ΅Ρ€Π°Ρ€Ρ…ΠΈΡŽ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΊΠΎΡ€Π½Π΅ΠΌ сайта ΠΈ Ρ‚Π΅ΠΊΡƒΡ‰ΠΈΠΌ мСстополоТСниСм ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ.

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π½Π΅Ρ‚

Зависимости: —

О кодС

Π’Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Π°Ρ хлСбная ΠΊΡ€ΠΎΡˆΠΊΠ°

ΠŸΡ€ΠΎΡΡ‚Ρ‹Π΅ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹Π΅ Ρ…Π»Π΅Π±Π½Ρ‹Π΅ ΠΊΡ€ΠΎΡˆΠΊΠΈ CSS

.

О кодС

Π₯Π»Π΅Π±Π½Ρ‹Π΅ ΠΊΡ€ΠΎΡˆΠΊΠΈ с Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉΡΡ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠ΅ΠΉ

НС ΡΡ‚Π΅ΡΠ½ΡΠΉΡ‚Π΅ΡΡŒ Π½Π°ΡΡ‚Ρ€Π°ΠΈΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ ΠΏΠΎ своСму ΡƒΡΠΌΠΎΡ‚Ρ€Π΅Π½ΠΈΡŽ. Π¦Π²Π΅Ρ‚Π°, Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹, Ρ‚Π΅Π½ΠΈ, Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ ΠΈ Ρ‚. Π΄. Π‘Π΄Π΅Π»Π°Π½ΠΎ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Bootstrap .

О кодС

ΠŸΠ°Π½ΠΈΡ€ΠΎΠ²ΠΎΡ‡Π½Ρ‹Π΅ сухари с Β«ΡƒΠΌΠ½Ρ‹ΠΌΒ» ΠΌΠ½ΠΎΠ³ΠΎΡ‚ΠΎΡ‡ΠΈΠ΅ΠΌ (Flex)

ΠŸΠΎΡΠΊΡΠΏΠ΅Ρ€ΠΈΠΌΠ΅Π½Ρ‚ΠΈΡ€ΡƒΠΉΡ‚Π΅ с Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠΌ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ, ΠΊΠ°ΠΊ Ρ…Π»Π΅Π±Π½Ρ‹Ρ… ΠΊΡ€ΠΎΡˆΠ΅ΠΊ Π²Π΅Π΄ΡƒΡ‚ сСбя, ΠΊΠΎΠ³Π΄Π° для Π½ΠΈΡ… Π½Π΅ ΠΎΡΡ‚Π°Π»ΠΎΡΡŒ мСста.

О кодС

Навигация ΠΏΠΎ Ρ…Π»Π΅Π±Π½Ρ‹ΠΌ ΠΊΡ€ΠΎΡˆΠΊΠ°ΠΌ

Π’ этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ, Ρ‡Ρ‚ΠΎ происходит, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ приблиТаСтся ΠΊ ΠΊΠ½ΠΎΠΏΠΊΠ΅ «Назад». Π₯Π»Π΅Π±Π½Ρ‹Π΅ ΠΊΡ€ΠΎΡˆΠΊΠΈ Ρ€Π°ΡΡˆΠΈΡ€ΡΡŽΡ‚ΡΡ ΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŽ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒΡΡ практичСски Π² любоС Π΄Ρ€ΡƒΠ³ΠΎΠ΅ мСсто Π² курсС, минимально воздСйствуя Π½Π° пространство.

ДСмонстрационноС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅: Ρ…Π»Π΅Π±Π½Ρ‹Π΅ ΠΊΡ€ΠΎΡˆΠΊΠΈ CSS

Ρ…Π»Π΅Π±Π½Ρ‹Π΅ ΠΊΡ€ΠΎΡˆΠΊΠΈ CSS

Ρ…Π»Π΅Π±Π½Ρ‹Π΅ ΠΊΡ€ΠΎΡˆΠΊΠΈ с настраиваСмыми свойствами CSS Π² качСствС API.
Π‘Π΄Π΅Π»Π°Π½ΠΎ Бтасом ΠœΠ΅Π»ΡŒΠ½ΠΈΠΊΠΎΠ²Ρ‹ΠΌ
15 июня 2017 г.

ΡΠΊΠ°Ρ‡Π°Ρ‚ΡŒ Π΄Π΅ΠΌΠΎ ΠΈ ΠΊΠΎΠ΄

ДСмонстрационноС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅: ΠœΠ½ΠΎΠ³ΠΎΡΡ‚Ρ€ΠΎΡ‡Π½Ρ‹Π΅ стрСлки Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ

ΠœΠ½ΠΎΠ³ΠΎΡΡ‚Ρ€ΠΎΡ‡Π½Ρ‹Π΅ стрСлки Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ

АдаптивныС многострочныС стрСлки Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ чистого CSS.
Π‘Π΄Π΅Π»Π°Π½ΠΎ Π“Π»ΠΈΠ½Π½ΠΎΠΌ Π‘ΠΌΠΈΡ‚ΠΎΠΌ
30 мая 2017 г.

ΡΠΊΠ°Ρ‡Π°Ρ‚ΡŒ Π΄Π΅ΠΌΠΎ ΠΈ ΠΊΠΎΠ΄

ДСмонстрационный GIF: Ρ…Π»Π΅Π±Π½Ρ‹Π΅ ΠΊΡ€ΠΎΡˆΠΊΠΈ

Ρ…Π»Π΅Π±Π½Ρ‹Π΅ ΠΊΡ€ΠΎΡˆΠΊΠΈ

Ρ…Π»Π΅Π±Π½Ρ‹Π΅ ΠΊΡ€ΠΎΡˆΠΊΠΈ HTML ΠΈ CSS.
Π‘Π΄Π΅Π»Π°Π½ΠΎ Дэни Бантос
15 июля 2016 г.

ΡΠΊΠ°Ρ‡Π°Ρ‚ΡŒ Π΄Π΅ΠΌΠΎ ΠΈ ΠΊΠΎΠ΄

ДСмонстрационноС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅: Breadcrumb, Progress Tracker

Π₯Π»Π΅Π±Π½Ρ‹Π΅ ΠΊΡ€ΠΎΡˆΠΊΠΈ, Ρ‚Ρ€Π΅ΠΊΠ΅Ρ€ прогрСсса

Π₯Π»Π΅Π±Π½Ρ‹Π΅ ΠΊΡ€ΠΎΡˆΠΊΠΈ Material Design, Ρ‚Ρ€Π΅ΠΊΠ΅Ρ€ прогрСсса.
Автор Шьям Π§Π΅Π½
30 июля 2015 г.

ΡΠΊΠ°Ρ‡Π°Ρ‚ΡŒ Π΄Π΅ΠΌΠΎ ΠΈ ΠΊΠΎΠ΄

ДСмонстрационноС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅: Π‘Π²Π΅Ρ€Π½ΡƒΡ‚Ρ‹Π΅ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΎΠ½Π½Ρ‹Π΅ ΠΊΡ€ΠΎΡˆΠΊΠΈ

Π‘Π²Π΅Ρ€Π½ΡƒΡ‚Ρ‹Π΅ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΎΠ½Π½Ρ‹Π΅ ΠΊΡ€ΠΎΡˆΠΊΠΈ

Бписок Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΎΠ½Π½Ρ‹Ρ… Ρ†Π΅ΠΏΠΎΡ‡Π΅ΠΊ свСрнут, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ тСкст ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ просмотра для всСх страниц, ΠΊΡ€ΠΎΠΌΠ΅ Ρ‚Π΅ΠΊΡƒΡ‰Π΅ΠΉ, с ΠΏΠΎΠ»Π½Ρ‹ΠΌ тСкстом, ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅ΠΌΡ‹ΠΌ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ/фокусС.
Π‘Π΄Π΅Π»Π°Π½ΠΎ Π‘ΠΊΠ°ΠΉ
4 ΠΌΠ°Ρ€Ρ‚Π° 2015 Π³.

ΡΠΊΠ°Ρ‡Π°Ρ‚ΡŒ Π΄Π΅ΠΌΠΎ ΠΈ ΠΊΠΎΠ΄

ДСмонстрационноС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅: АдаптивныС Ρ…Π»Π΅Π±Π½Ρ‹Π΅ ΠΊΡ€ΠΎΡˆΠΊΠΈ

АдаптивныС Ρ…Π»Π΅Π±Π½Ρ‹Π΅ ΠΊΡ€ΠΎΡˆΠΊΠΈ

АдаптивныС Ρ…Π»Π΅Π±Π½Ρ‹Π΅ ΠΊΡ€ΠΎΡˆΠΊΠΈ Π½Π° чистом CSS.
Π‘Π΄Π΅Π»Π°Π½ΠΎ ΠžΠ»ΠΈΠ²Π΅Ρ€ΠΎΠΌ ΠšΠ½ΠΎΠ±Π»ΠΈΡ…ΠΎΠΌ
2 апрСля 2014 Π³.

ΡΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

Demo GIF: Tiny CSS3 Breadcrumb

Tiny CSS3 Breadcrumb

ΠšΡ€ΠΎΡˆΠ΅Ρ‡Π½Π°Ρ круглая хлСбная ΠΊΡ€ΠΎΡˆΠΊΠ° CSS3.
Π‘Π΄Π΅Π»Π°Π½ΠΎ Π Π΅Π½ΠΎ Π’Π΅Ρ€Ρ‚Ρ€Π΅
4 октября 2013 Π³.

ΡΠΊΠ°Ρ‡Π°Ρ‚ΡŒ Π΄Π΅ΠΌΠΎ ΠΈ ΠΊΠΎΠ΄

ДСмонстрационноС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅: Π Π°ΡΡˆΠΈΡ€ΡΠ΅ΠΌΡ‹Π΅ Ρ…Π»Π΅Π±Π½Ρ‹Π΅ ΠΊΡ€ΠΎΡˆΠΊΠΈ

Π Π°ΡΡˆΠΈΡ€ΡΠ΅ΠΌΡ‹Π΅ Ρ…Π»Π΅Π±Π½Ρ‹Π΅ ΠΊΡ€ΠΎΡˆΠΊΠΈ

ИдСально ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для страниц с Π΄Π»ΠΈΠ½Π½Ρ‹ΠΌΠΈ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°ΠΌΠΈ.
Π‘Π΄Π΅Π»Π°Π½ΠΎ Π€Π΅Π»ΠΈΠΏΠ΅ М ΠŸΠ΅Ρ€Π΅Ρ
3 октября 2013 Π³.

ΡΠΊΠ°Ρ‡Π°Ρ‚ΡŒ Π΄Π΅ΠΌΠΎ ΠΈ ΠΊΠΎΠ΄

ДСмонстрационноС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅: плоская навигационная ΠΊΡ€ΠΎΡˆΠΊΠ° CSS3

навигационная ΠΊΡ€ΠΎΡˆΠΊΠ° CSS3

плоская навигационная Ρ†Π΅ΠΏΠΎΡ‡ΠΊΠ° HTML ΠΈ CSS3.
Π‘Π΄Π΅Π»Π°Π½ΠΎ Π Π΅Π½ΠΎ Π’Π΅Ρ€Ρ‚Ρ€Π΅
30 сСнтября 2013 Π³.

ΡΠΊΠ°Ρ‡Π°Ρ‚ΡŒ Π΄Π΅ΠΌΠΎ ΠΈ ΠΊΠΎΠ΄

ДСмонстрационноС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅: навигационная Ρ†Π΅ΠΏΠΎΡ‡ΠΊΠ° Π½Π° чистом CSS3

навигационная Ρ†Π΅ΠΏΠΎΡ‡ΠΊΠ° Π½Π° чистом CSS3

Навигация ΠΏΠΎ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΎΠ½Π½ΠΎΠΉ Ρ†Π΅ΠΏΠΎΡ‡ΠΊΠ΅ с использованиСм чистого CSS3.
Π‘Π΄Π΅Π»Π°Π½ΠΎ АркСв
16 апрСля 2013 Π³.

ΡΠΊΠ°Ρ‡Π°Ρ‚ΡŒ Π΄Π΅ΠΌΠΎ ΠΈ ΠΊΠΎΠ΄

42 ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹Ρ… ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° Π΄ΠΈΠ·Π°ΠΉΠ½Π° Ρ…Π»Π΅Π±Π½Ρ‹Ρ… ΠΊΡ€ΠΎΡˆΠ΅ΠΊ CSS (Π‘Π•Π‘ΠŸΠ›ΠΠ’ΠΠ«Π™ ΠΊΠΎΠ΄)

Навигация ΠΏΠΎ Ρ…Π»Π΅Π±Π½Ρ‹ΠΌ ΠΊΡ€ΠΎΡˆΠΊΠ°ΠΌ Pixel perfect

Бимпатичная хлСбная ΠΊΡ€ΠΎΡˆΠΊΠ° Π² Ρ‚Π΅ΠΌΠ½ΠΎΠΌ Ρ€Π΅ΠΆΠΈΠΌΠ΅ с 2 Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Π°ΠΌΠΈ ΠΈ приятным эффСктом навСдСния Π½Π° Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ элСмСнты.

БдСлано с:

HTML

CSS

Зависимости:

ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠΎΠ΄ ΠΈ Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€Π°Ρ†ΠΈΡŽ

ΠŸΠ°Π½ΠΈΡ€ΠΎΠ²ΠΎΡ‡Π½Ρ‹Π΅ сухари с Π·Π°ΠΊΡ€ΡƒΠ³Π»Π΅Π½Π½Ρ‹ΠΌΠΈ ΡƒΠ³Π»Π°ΠΌΠΈ

Π—Π°ΠΊΡ€ΡƒΠ³Π»Π΅Π½Π½Ρ‹Π΅ ΡƒΠ³Π»Ρ‹ Π΄Π΅Π»Π°ΡŽΡ‚ ваш Π΄ΠΈΠ·Π°ΠΉΠ½ Π±ΠΎΠ»Π΅Π΅ Π΄Ρ€ΡƒΠΆΠ΅Π»ΡŽΠ±Π½Ρ‹ΠΌ.

БдСлано с:

HTML

CSS

Зависимости:

ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠΎΠ΄ ΠΈ Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€Π°Ρ†ΠΈΡŽ

ΠŸΡ€ΠΎΡΡ‚Π°Ρ хлСбная ΠΊΡ€ΠΎΡˆΠΊΠ° Skew

ΠŸΡ€ΠΎΡΡ‚Π°Ρ, Π½ΠΎ эффСктивная хлСбная ΠΊΡ€ΠΎΡˆΠΊΠ°, ΠΈΠΌΠ΅Π΅Ρ‚ 2 Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Π°, Π² ΠΎΠ±ΠΎΠΈΡ… ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ свойство CSS skew.

БдСлано с:

HTML

CSS

Зависимости:

ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠΎΠ΄ ΠΈ Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€Π°Ρ†ΠΈΡŽ

Навигация ΠΏΠΎ Ρ†Π΅ΠΏΠΎΡ‡ΠΊΠ°ΠΌ Π½Π° чистом CSS

Π’ этом Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚Π΅ ΠΊΠΎΠ΄Π° Π²Ρ‹ Π½Π°ΠΉΠ΄Π΅Ρ‚Π΅ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΡŽ ΠΏΠΎ Ρ†Π΅ΠΏΠΎΡ‡ΠΊΠ°ΠΌ с простым эффСктом навСдСния, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‰ΠΈΠΌ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ чистый CSS.

БдСлано с:

HTML

CSS

Зависимости:

ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠΎΠ΄ ΠΈ Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€Π°Ρ†ΠΈΡŽ

Flat CSS3 Breadcrumb

Π•Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ CodePen с эффСктивной, Π½ΠΎ чистой Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠ΅ΠΉ ΠΏΠΎ Ρ†Π΅ΠΏΠΎΡ‡ΠΊΠ°ΠΌ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ Π² плоском стилС.

Π‘Π΄Π΅Π»Π°Π½ΠΎ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ:

HTML

CSS

Зависимости:

ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠΎΠ΄ ΠΈ Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€Π°Ρ†ΠΈΡŽ

Π Π΅Ρ„Π°ΠΊΡ‚ΠΎΡ€ΠΈΠ½Π³ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса β€” Ρ…Π»Π΅Π±Π½Ρ‹Π΅ ΠΊΡ€ΠΎΡˆΠΊΠΈ

Π€Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚ ΠΊΠΎΠ΄Π° минималистичной, Π½ΠΎ элСгантной Ρ…Π»Π΅Π±Π½ΠΎΠΉ ΠΊΡ€ΠΎΡˆΠΊΠΈ с Ρ†Π²Π΅Ρ‚ΠΎΠ²ΠΎΠΉ ΠΏΠ°Π»ΠΈΡ‚Ρ€ΠΎΠΉ Π² ΠΎΡ‚Ρ‚Π΅Π½ΠΊΠ°Ρ… сСрого ΠΈ Π»Π΅Π³ΠΊΠΈΠΌ эффСктом навСдСния.

БдСлано с:

HTML

CSS

Зависимости:

ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠΎΠ΄ ΠΈ Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€Π°Ρ†ΠΈΡŽ

БтрСловидная хлСбная ΠΊΡ€ΠΎΡˆΠΊΠ°

Π­Ρ‚ΠΎΡ‚ CodePen ΠΈΠ· стрСловидной Ρ…Π»Π΅Π±Π½ΠΎΠΉ ΠΊΡ€ΠΎΡˆΠΊΠΈ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ Π΄Π°ΠΆΠ΅ с простым стилСм ΠΈ нСбольшим количСством ΠΊΠΎΠ΄Π° ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ±ΠΈΡ‚ΡŒΡΡ ΠΎΡ‡Π΅Π½ΡŒ Ρ…ΠΎΡ€ΠΎΡˆΠ΅Π³ΠΎ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π°.

БдСлано с:

HTML

CSS

Зависимости:

ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠΎΠ΄ ΠΈ Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€Π°Ρ†ΠΈΡŽ

Π’Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Π°Ρ навигационная Ρ†Π΅ΠΏΠΎΡ‡ΠΊΠ°

Π’Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Π°Ρ навигационная Ρ†Π΅ΠΏΠΎΡ‡ΠΊΠ° β€” это Π΄Ρ€ΡƒΠ³ΠΎΠΉ творчСский способ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΏΡƒΡ‚ΡŒ ΠΊ страницС, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ Π²Ρ‹ Π½Π°Ρ…ΠΎΠ΄ΠΈΡ‚Π΅ΡΡŒ, Π½Π΅ занимая слишком ΠΌΠ½ΠΎΠ³ΠΎ мСста.

БдСлано с:

HTML

CSS

Зависимости:

Pug

Stylus

ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠΎΠ΄ ΠΈ Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€Π°Ρ†ΠΈΡŽ

Π₯Π»Π΅Π±Π½Ρ‹Π΅ ΠΊΡ€ΠΎΡˆΠΊΠΈ с Ρ†Π²Π΅Ρ‚Π°ΠΌΠΈ Material Design

Π’ этом CodePen Ρƒ вас Π΅ΡΡ‚ΡŒ Ρ‚Ρ€Π΅ΠΊΠ΅Ρ€ прогрСсса/стСппСр/Ρ…Π»Π΅Π±Π½Ρ‹Π΅ ΠΊΡ€ΠΎΡˆΠΊΠΈ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‰ΠΈΠ΅ Ρ†Π²Π΅Ρ‚Π° Material Design ΠΈ Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠ΅ состояниС ΠΏΡ€ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ.

БдСлано с:

HTML

CSS

JavaScript

Зависимости:

Pug

Stylus

TypeScript

90 002 ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠΎΠ΄ ΠΈ Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€Π°Ρ†ΠΈΡŽ

Tiny CSS3 Round Breadcrumb

Π€Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚ ΠΊΠΎΠ΄Π° Π·Π°ΠΊΡ€ΡƒΠ³Π»Π΅Π½Π½ΠΎΠΉ Ρ…Π»Π΅Π±Π½ΠΎΠΉ ΠΊΡ€ΠΎΡˆΠΊΠΈ с ΠΏΠ»Π°Π²Π½Ρ‹ΠΌ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ΠΌ отобраТаСтся ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора.

Бостав:

HTML

CSS

Зависимости:

ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠΎΠ΄ ΠΈ Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€Π°Ρ†ΠΈΡŽ

Π₯Π»Π΅Π±Π½Ρ‹Π΅ ΠΊΡ€ΠΎΡˆΠΊΠΈ со стрСлками

Π’ этом Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚Π΅ ΠΊΠΎΠ΄Π° Ρƒ нас Π΅ΡΡ‚ΡŒ 4 красивых Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Π° Ρ…Π»Π΅Π±Π½Ρ‹Ρ… ΠΊΡ€ΠΎΡˆΠ΅ΠΊ со стрСлочками, 2 свСтлых ΠΈ 2 Ρ‚Π΅ΠΌΠ½Ρ‹Ρ….

БдСлано с:

HTML

CSS

Зависимости:

ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠΎΠ΄ ΠΈ Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€Π°Ρ†ΠΈΡŽ

Π‘Ρ‚ΠΈΠ»ΡŒ Ρ…Π»Π΅Π±Π½Ρ‹Ρ… ΠΊΡ€ΠΎΡˆΠ΅ΠΊ, созданный с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Force Framework

CodePen ΠΈΠ· 7 Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ² Ρ†Π²Π΅Ρ‚Π½Ρ‹Ρ… Ρ…Π»Π΅Π±Π½Ρ‹Ρ… ΠΊΡ€ΠΎΡˆΠ΅ΠΊ, созданных с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS-Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠ° ΠΏΠΎΠ΄ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ΠΌ Force.

БдСлано с:

HTML

CSS

Зависимости:

Force framework

ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠΎΠ΄ ΠΈ Π΄Π΅ΠΌΠΎ

ПошаговоС/Ρ…Π»Π΅Π±Π½Ρ‹Π΅ ΠΊΡ€ΠΎΡˆΠΊΠΈ для ΠΎΠΏΠ»Π°Ρ‚Ρ‹ ΠΊΡ€Π΅Π΄ΠΈΡ‚Π½ΠΎΠΉ ΠΊΠ°Ρ€Ρ‚ΠΎΠΉ

Π­Ρ‚ΠΎ скорСС ΠΏΠΎΡˆΠ°Π³ΠΎΠ²Ρ‹ΠΉ ΠΈΠ½Π΄ΠΈΠΊΠ°Ρ‚ΠΎΡ€ ΠΎΠΏΠ»Π°Ρ‚Ρ‹ ΠΊΡ€Π΅Π΄ΠΈΡ‚Π½ΠΎΠΉ ΠΊΠ°Ρ€Ρ‚ΠΎΠΉ, Π½ΠΎ Π΅Π³ΠΎ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π² качСствС ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΎΠ½Π½ΠΎΠΉ ΠΊΡ€ΠΎΡˆΠΊΠΈ.

БдСлано с:

HTML

CSS

JavaScript

Зависимости:

ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠΎΠ΄ ΠΈ Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€Π°Ρ†ΠΈΡŽ

Навигационная Ρ†Π΅ΠΏΠΎΡ‡ΠΊΠ° с Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΌΡΡ списком

Π€Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚ ΠΊΠΎΠ΄Π° Π±Π°Π·ΠΎΠ²ΠΎΠΉ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΎΠ½Π½ΠΎΠΉ Ρ†Π΅ΠΏΠΎΡ‡ΠΊΠΈ со встроСнным Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΌΡΡ списком, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ отобраТаСтся ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора.

БдСлано с:

HTML

CSS

Зависимости:

Tachyons CSS Toolkit

Bootstrap

ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠΎΠ΄ ΠΈ Π΄Π΅ΠΌΠΎ

ΠœΠ½ΠΎΠ³ΠΎΡΡ‚Ρ€ΠΎΡ‡Π½Π°Ρ хлСбная ΠΊΡ€ΠΎΡˆΠΊΠ° Pure CSS

НуТна Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Π°Ρ информация ΠΎ Π²Π°ΡˆΠΈΡ… Ρ…Π»Π΅Π±Π½Ρ‹Ρ… ΠΊΡ€ΠΎΡˆΠΊΠ°Ρ…? Π£ этого Π΅ΡΡ‚ΡŒ многострочная функция для добавлСния Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… Π΄Π°Π½Π½Ρ‹Ρ….

БдСлано с:

HTML

CSS

Зависимости:

ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠΎΠ΄ ΠΈ Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€Π°Ρ†ΠΈΡŽ

ПлоскиС ΠΊΠ½ΠΎΠΏΠΊΠΈ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ

3 Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Π° с Ρ€Π°Π·Π½Ρ‹ΠΌΠΈ Ρ†Π²Π΅Ρ‚Π°ΠΌΠΈ плоской Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ ΠΈ эффСктом стрСлки ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ.

БдСлано с:

HTML

CSS

Зависимости:

ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠΎΠ΄ ΠΈ Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€Π°Ρ†ΠΈΡŽ

Bootstrap Breadcrumb, созданный с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Material Design ΠΈ Bootstrap 4

Если Π²Ρ‹ ΠΏΠΎΠΊΠ»ΠΎΠ½Π½ΠΈΠΊ Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠ° Bootstrap, Π² этом Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚Π΅ ΠΊΠΎΠ΄Π° Π²Ρ‹ Π½Π°ΠΉΠ΄Π΅Ρ‚Π΅ 12 Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ² Ρ†Π²Π΅Ρ‚Π½Ρ‹Ρ… Ρ…Π»Π΅Π±Π½Ρ‹Ρ… ΠΊΡ€ΠΎΡˆΠ΅ΠΊ с Ρ€Π°Π·Π½Ρ‹ΠΌΠΈ раздСлитСлями.

БдСлано с:

HTML

CSS

Зависимости:

Font Awesome

ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠΎΠ΄ ΠΈ Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€Π°Ρ†ΠΈΡŽ

Topcoatish Breadcrumb

хлСбная ΠΊΡ€ΠΎΡˆΠΊΠ° с Ρ‚Π΅ΠΌΠ½Ρ‹ΠΌ ΠΈ свСтлым Ρ€Π΅ΠΆΠΈΠΌΠ°ΠΌΠΈ, Π° Ρ‚Π°ΠΊΠΆΠ΅ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ с панСлью поиска, которая открываСтся ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора.

БдСлано с:

HTML

CSS

Зависимости:

ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠΎΠ΄ ΠΈ Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€Π°Ρ†ΠΈΡŽ

Плоская хлСбная ΠΊΡ€ΠΎΡˆΠΊΠ° с Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠ΅ΠΉ навСдСния

Π’ этом CodePen Π²Ρ‹ Π½Π°ΠΉΠ΄Π΅Ρ‚Π΅ красочныС Ρ…Π»Π΅Π±Π½Ρ‹Π΅ ΠΊΡ€ΠΎΡˆΠΊΠΈ с ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠΉ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠ΅ΠΉ, ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ Π½Π°Π²ΠΎΠ΄ΠΈΡ‚Π΅ ΠΌΡ‹ΡˆΡŒ Π½Π° ΠΎΠ΄ΠΈΠ½ ΠΈΠ· элСмСнтов.

БдСлано с:

HTML

CSS

Зависимости:

ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠΎΠ΄ ΠΈ Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€Π°Ρ†ΠΈΡŽ

Π₯лСбная ΠΊΡ€ΠΎΡˆΠΊΠ° с Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠ΅ΠΉ свСртывания

Π₯лСбная ΠΊΡ€ΠΎΡˆΠΊΠ° сворачивания Π½Π° чистом CSS, которая ΠΈΠΌΠ΅Π΅Ρ‚ довольно ΠΏΠ»Π°Π²Π½ΡƒΡŽ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ отобраТСния Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° элСмСнта ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ.

БдСлано с:

HTML

CSS

Зависимости:

ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠΎΠ΄ ΠΈ Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€Π°Ρ†ΠΈΡŽ

АдаптивныС ΠΏΠ°Π½ΠΈΡ€ΠΎΠ²ΠΎΡ‡Π½Ρ‹Π΅ сухари

Π’Π°ΠΌ Π½ΡƒΠΆΠ½Ρ‹ ΠΏΠ°Π½ΠΈΡ€ΠΎΠ²ΠΎΡ‡Π½Ρ‹Π΅ сухари Ρ€Π°Π·Π½Ρ‹Ρ… Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ²? Π’ этом CodePen Π²Ρ‹ Π½Π°ΠΉΠ΄Π΅Ρ‚Π΅ 3 Ρ€Π°Π·ΠΌΠ΅Ρ€Π° Π±Π°Π·ΠΎΠ²ΠΎΠΉ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠΉ Ρ…Π»Π΅Π±Π½ΠΎΠΉ ΠΊΡ€ΠΎΡˆΠΊΠΈ.

БдСлано с:

HTML

CSS

Зависимости:

ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠΎΠ΄ ΠΈ Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€Π°Ρ†ΠΈΡŽ

ΠŸΠ°Π½ΠΈΡ€ΠΎΠ²ΠΎΡ‡Π½Ρ‹Π΅ сухари Π² минималистском стилС

Если Π²Ρ‹ ΠΈΡ‰Π΅Ρ‚Π΅ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ ΡƒΡ‚ΠΎΠ½Ρ‡Π΅Π½Π½ΠΎΠ΅, Π½ΠΎ эффСктивноС, эта панировочная ΡΡƒΡ…Π°Ρ€ΡŒ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ вашим Π²Ρ‹Π±ΠΎΡ€ΠΎΠΌ.

БдСлано с:

HTML

CSS

Зависимости:

ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠΎΠ΄ ΠΈ Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€Π°Ρ†ΠΈΡŽ

ΠŸΡ€ΠΎΡΡ‚Π°Ρ навигационная Ρ†Π΅ΠΏΠΎΡ‡ΠΊΠ°

Π­Ρ‚ΠΎΡ‚ простой Π΄ΠΈΠ·Π°ΠΉΠ½ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΎΠ½Π½ΠΎΠΉ ΠΊΡ€ΠΎΡˆΠΊΠΈ создан с использованиСм Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠ° Aqua CSS ΠΈ ΠΈΠΌΠ΅Π΅Ρ‚ приятный эффСкт ΠΏΠ»Π°Π²Π½ΠΎΠΉ Π»ΠΈΠ½ΠΈΠΈ навСдСния для Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… ссылок.

БдСлано с:

HTML

CSS

Зависимости:

Aqua CSS

ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠΎΠ΄ ΠΈ Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€Π°Ρ†ΠΈΡŽ

Ribbon Breadcrumb Trail

Π€Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚ ΠΊΠΎΠ΄Π° со старой Π»Π΅Π½Ρ‚ΠΎΡ‡Π½ΠΎΠΉ Ρ†Π΅ΠΏΠΎΡ‡ΠΊΠΎΠΉ ΠΈ нСбольшим ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ΠΌ Ρ„ΠΎΠ½Π° ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора Π½Π° Π΅Π³ΠΎ элСмСнты.

БдСлано с:

HTML

CSS

Зависимости:

ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠΎΠ΄ ΠΈ Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€Π°Ρ†ΠΈΡŽ

Π Π°ΡΡˆΠΈΡ€ΡΡŽΡ‰Π°ΡΡΡ навигационная Ρ†Π΅ΠΏΠΎΡ‡ΠΊΠ° со стрСлкой

Если Ρƒ вас нСдостаточно мСста для размСщСния Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΎΠ½Π½ΠΎΠΉ ΠΊΡ€ΠΎΡˆΠΊΠΈ, Π²Π°ΠΌ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠ΄ΠΎΠΉΡ‚ΠΈ этот Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚ ΠΊΠΎΠ΄Π° вСрсии с Ρ€Π°ΡΡˆΠΈΡ€ΡΠ΅ΠΌΠΎΠΉ стрСлкой.

БдСлано с:

HTML

CSS

Зависимости:

ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠΎΠ΄ ΠΈ Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€Π°Ρ†ΠΈΡŽ

Π’ΠΎΡ‡Π΅Ρ‡Π½Ρ‹Π΅ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΎΠ½Π½Ρ‹Π΅ ΠΊΡ€ΠΎΡˆΠΊΠΈ

Π­Ρ‚ΠΎ наклонная вСрсия Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΎΠ½Π½Ρ‹Ρ… Ρ†Π΅ΠΏΠΎΡ‡Π΅ΠΊ с ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ Ρ†Π²Π΅Ρ‚ΠΎΠΌ ΠΈ Ρ‚ΠΈΠΏΠΎΠ³Ρ€Π°Ρ„ΠΈΠΊΠΎΠΉ, Π° Ρ‚Π°ΠΊΠΆΠ΅ с эффСктом навСдСния, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΠ²Π°Π΅Ρ‚ поля элСмСнтов.

БдСлано с:

HTML

CSS

Зависимости:

ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠΎΠ΄ ΠΈ Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€Π°Ρ†ΠΈΡŽ

Навигационная Ρ†Π΅ΠΏΠΎΡ‡ΠΊΠ° с ΠΊΠΎΠ½Ρ‚ΡƒΡ€Π°ΠΌΠΈ

Навигационная Ρ†Π΅ΠΏΠΎΡ‡ΠΊΠ° с ΠΎΠ±Π²Π΅Π΄Π΅Π½Π½Ρ‹ΠΌΠΈ, Π½Π°ΠΊΠ»ΠΎΠ½Π΅Π½Π½Ρ‹ΠΌΠΈ элСмСнтами ΠΈ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ эффСктом навСдСния.

БдСлано с:

HTML

CSS

Зависимости:

ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠΎΠ΄ ΠΈ Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€Π°Ρ†ΠΈΡŽ

ГрадиСнтная навигационная Ρ†Π΅ΠΏΠΎΡ‡ΠΊΠ°

Π­Ρ‚ΠΎΡ‚ Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚ ΠΊΠΎΠ΄Π° содСрТит ΡΡ‚Ρ€Π΅Π»ΠΎΠ²ΠΈΠ΄Π½ΡƒΡŽ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΎΠ½Π½ΡƒΡŽ Ρ†Π΅ΠΏΠΎΡ‡ΠΊΡƒ с красивым Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π½Ρ‹ΠΌ Ρ†Π²Π΅Ρ‚ΠΎΠ²Ρ‹ΠΌ стилСм.

БдСлано с:

HTML

CSS

Зависимости:

Haml

SCSS

ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠΎΠ΄ ΠΈ Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€Π°Ρ†ΠΈΡŽ

Π Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ Ρ€Π°Π·Π΄Π΅Π»ΠΈΡ‚Π΅Π»ΠΈ Ρ…Π»Π΅Π±Π½Ρ‹Ρ… ΠΊΡ€ΠΎΡˆΠ΅ΠΊ

Π’ этом CodePen ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ Π½Π°ΠΉΡ‚ΠΈ 4 Ρ…Π»Π΅Π±Π½Ρ‹Ρ… ΠΊΡ€ΠΎΡˆΠΊΠΈ с ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ‹ΠΌ стилСм, Π½ΠΎ с Ρ€Π°Π·Π½Ρ‹ΠΌΠΈ раздСлитСлями.

БдСлано с:

HTML

CSS

Зависимости:

ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠΎΠ΄ ΠΈ Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€Π°Ρ†ΠΈΡŽ

Π Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ Ρ€Π°Π·Π΄Π΅Π»ΠΈΡ‚Π΅Π»ΠΈ Ρ…Π»Π΅Π±Π½Ρ‹Ρ… ΠΊΡ€ΠΎΡˆΠ΅ΠΊ

Π•Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ CodePen, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΈΠΌΠ΅Π΅Ρ‚ 5 Ρ…Π»Π΅Π±Π½Ρ‹Ρ… ΠΊΡ€ΠΎΡˆΠ΅ΠΊ с ΠΏΠΎΡ…ΠΎΠΆΠΈΠΌ стилСм, Π½ΠΎ с Π΄Ρ€ΡƒΠ³ΠΈΠΌ Ρ€Π°Π·Π΄Π΅Π»ΠΈΡ‚Π΅Π»Π΅ΠΌ.

БдСлано с:

HTML

CSS

Зависимости:

ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠΎΠ΄ ΠΈ Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€Π°Ρ†ΠΈΡŽ

БвСрнутая навигационная Ρ†Π΅ΠΏΠΎΡ‡ΠΊΠ°

Если мСста Π½Π° вашСм Π²Π΅Π±-сайтС ΠΌΠ°Π»ΠΎ, эта свСрнутая навигационная Ρ†Π΅ΠΏΠΎΡ‡ΠΊΠ°, которая Ρ€Π°ΡΡˆΠΈΡ€ΡΠ΅Ρ‚ΡΡ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ указатСля ΠΌΡ‹ΡˆΠΈ Π½Π° элСмСнты, ΠΌΠΎΠΆΠ΅Ρ‚ ΡƒΠ΄ΠΎΠ²Π»Π΅Ρ‚Π²ΠΎΡ€ΠΈΡ‚ΡŒ ваши потрСбности.

БдСлано с:

HTML

CSS

Зависимости:

ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠΎΠ΄ ΠΈ Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€Π°Ρ†ΠΈΡŽ

Наклонная хлСбная ΠΊΡ€ΠΎΡˆΠΊΠ°

3 Ρ…Π»Π΅Π±Π½Ρ‹Π΅ ΠΊΡ€ΠΎΡˆΠΊΠΈ с ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ‹ΠΌ Π½Π°ΠΊΠ»ΠΎΠ½ΠΎΠΌ, Π½ΠΎ с Ρ€Π°Π·Π½ΠΎΠΉ ΡΡ‚Π΅ΠΏΠ΅Π½ΡŒΡŽ сТатия, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Ρ€Π°ΡΡˆΠΈΡ€ΡΡŽΡ‚ΡΡ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° Π½ΠΈΡ… курсора.

БдСлано с:

HTML

CSS

Зависимости:

ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠΎΠ΄ ΠΈ Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€Π°Ρ†ΠΈΡŽ

Π”ΠΈΠ·Π°ΠΉΠ½ Ρ…Π»Π΅Π±Π½Ρ‹Ρ… ΠΊΡ€ΠΎΡˆΠ΅ΠΊ (ΠŸΠ΅Ρ€Π΅ΠΊΠΎΡ, Радиус Π³Ρ€Π°Π½ΠΈΡ†Ρ‹, эффСкт Ρ‰Π΅Π»Ρ‡ΠΊΠ°)

Π•Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚ ΠΊΠΎΠ΄Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΈΠΌΠ΅Π΅Ρ‚ 3 ΠΏΠΎΡ…ΠΎΠΆΠΈΡ… Ρ…Π»Π΅Π±Π½Ρ‹Ρ… ΠΊΡ€ΠΎΡˆΠΊΠΈ, Π½ΠΎ с Ρ€Π°Π·Π½Ρ‹ΠΌΠΈ уровнями Π½Π°ΠΊΠ»ΠΎΠ½Π° ΠΈ Π»Π΅Π³ΠΊΠΈΠΌ эффСктом навСдСния, созданным Ρ‚ΠΎΠ»ΡŒΠΊΠΎ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ HTML ΠΈ CSS.

БдСлано с:

HTML

CSS

Зависимости:

ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠΎΠ΄ ΠΈ Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€Π°Ρ†ΠΈΡŽ

«Π₯Π»Π΅Π±Π½Ρ‹Π΅ ΠΊΡ€ΠΎΡˆΠΊΠΈ» для оформлСния Π·Π°ΠΊΠ°Π·Π°

«Π₯Π»Π΅Π±Π½Ρ‹Π΅ ΠΊΡ€ΠΎΡˆΠΊΠΈ», ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ Π½Π° кассу, с ΠΈΠΊΠΎΠ½ΠΊΠ°ΠΌΠΈ ΠΈ красочным эффСктом навСдСния Π½Π° элСмСнты.

БдСлано с:

HTML

CSS

Зависимости:

ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠΎΠ΄ ΠΈ Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€Π°Ρ†ΠΈΡŽ

Бписок интСрСсных стилСй Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΎΠ½Π½Ρ‹Ρ… Ρ†Π΅ΠΏΠΎΡ‡Π΅ΠΊ

Π­Ρ‚ΠΎΡ‚ Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚ ΠΊΠΎΠ΄Π° содСрТит 9 Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… стилСй Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΎΠ½Π½Ρ‹Ρ… Ρ†Π΅ΠΏΠΎΡ‡Π΅ΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹ ΠΌΠΎΠ³Π»ΠΈ Π½Π°ΠΉΡ‚ΠΈ Ρ‚ΠΎΡ‚, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ соотвСтствуСт вашим потрСбностям ΠΈ ΡΡ‚ΠΈΠ»ΡŽ.

БдСлано с:

HTML

CSS

Зависимости:

ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠΎΠ΄ ΠΈ Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€Π°Ρ†ΠΈΡŽ

Розовая ΠΊΡ€ΠΎΡˆΠΊΠ°

Если Ρ€ΠΎΠ·ΠΎΠ²Ρ‹ΠΉ β€” ваш Π»ΡŽΠ±ΠΈΠΌΡ‹ΠΉ Ρ†Π²Π΅Ρ‚, эта ΠΊΡ€ΠΎΡˆΠΊΠ° для вас со Π·Π½Π°Ρ‡ΠΊΠ°ΠΌΠΈ ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ΠΌ Ρ†Π²Π΅Ρ‚Π° Ρ„ΠΎΠ½Π° ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° Π½Π΅Π΅ курсора.

БдСлано с:

HTML

CSS

Зависимости:

ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠΎΠ΄ ΠΈ Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€Π°Ρ†ΠΈΡŽ

Chevron Breadcrumbs

Π­Ρ‚ΠΎΡ‚ Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚ ΠΊΠΎΠ΄Π° содСрТит Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΡŽ Π² стилС ΡˆΠ΅Π²Ρ€ΠΎΠ½Π° с Ρ‚ΠΎΠ½ΠΊΠΈΠΌ сСрым стилСм.

БдСлано с:

HTML

CSS

Зависимости:

Мопс

SCSS

ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠΎΠ΄ ΠΈ Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€Π°Ρ†ΠΈΡŽ

ΠΠ°Ρ…Π°Π»ΡŒΠ½Ρ‹Π΅ Ρ…Π»Π΅Π±Π½Ρ‹Π΅ ΠΊΡ€ΠΎΡˆΠΊΠΈ

ΠšΡ€Π΅Π°Ρ‚ΠΈΠ²Π½ΠΎ оформлСнная хлСбная ΠΊΡ€ΠΎΡˆΠΊΠ° с приятной Ρ†Π²Π΅Ρ‚ΠΎΠ²ΠΎΠΉ ΠΏΠ°Π»ΠΈΡ‚Ρ€ΠΎΠΉ ΠΈ ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора Π½Π° тСкст.

БдСлано с:

HTML

CSS

Зависимости:

ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠΎΠ΄ ΠΈ Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€Π°Ρ†ΠΈΡŽ

Π Π°ΡΡˆΠΈΡ€ΡΠ΅ΠΌΠ°Ρ навигационная Ρ†Π΅ΠΏΠΎΡ‡ΠΊΠ°

Π•Ρ‰Π΅ ΠΎΠ΄Π½Π° Ρ€Π°ΡΡˆΠΈΡ€ΡΠ΅ΠΌΠ°Ρ навигационная Ρ†Π΅ΠΏΠΎΡ‡ΠΊΠ° для случаСв, ΠΊΠΎΠ³Π΄Π° пространство Π² вашСм Π²Π΅Π±-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½ΠΎ, ΠΎΡ‡Π΅Π½ΡŒ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ, ΠΊΠΎΠ³Π΄Π° элСмСнты ΠΈΠΌΠ΅ΡŽΡ‚ Π΄Π»ΠΈΠ½Π½Ρ‹ΠΉ тСкст.

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

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