Π Π°Π·Π½ΠΎΠ΅

Slider css: Π‘Π»Π°ΠΉΠ΄Π΅Ρ€ для сайта Π½Π° чистом CSS ΠΈ JavaScript

11.04.2023

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

21 CSS Range Sliders

ΠšΠΎΠ»Π»Π΅ΠΊΡ†ΠΈΡ ΠΎΡ‚ΠΎΠ±Ρ€Π°Π½Π½Ρ‹Ρ… бСсплатных ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² ΠΊΠΎΠ΄Π° HTML ΠΈ CSS Range Slider . ОбновлСниС майской ΠΊΠΎΠ»Π»Π΅ΠΊΡ†ΠΈΠΈ 2019 Π³ΠΎΠ΄Π°. 5 Π½ΠΎΠ²Ρ‹Ρ… ΠΏΡ€Π΅Π΄ΠΌΠ΅Ρ‚ΠΎΠ².

  1. ΠŸΠΎΠ»Π·ΡƒΠ½ΠΊΠΈ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° JavaScript
  2. ΠŸΠΎΠ»Π·ΡƒΠ½ΠΊΠΈ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° jQuery
О кодС

ΠœΠ½ΠΎΠ³ΠΎΠ΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π½Ρ‹ΠΉ Π²Π²ΠΎΠ΄, Ρ‚ΠΎΠ»ΡŒΠΊΠΎ CSS

ΠŸΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ Π²Π²ΠΎΠ΄Π° Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° с ΠΎΡ‚ΠΌΠ΅Ρ‚ΠΊΠ°ΠΌΠΈ CSS с использованиСм ΠΎΠ±ΠΎΠ»ΠΎΡ‡ΠΊΠΈ с ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΌΠΈ свойствами CSS (ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½Ρ‹ΠΌΠΈ CSS) с ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΌ ΠΈ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΌ значСниями, Π½Π°ΠΏΠ΅Ρ‡Π°Ρ‚Π°Π½Π½Ρ‹ΠΌΠΈ ΠΏΠΎ краям. ВСкст минимального значСния выравниваСтся ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ, Π° максимальноС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ совпадаСт ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ. Π’Π΅ΠΊΡƒΡ‰Π΅Π΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ (Π²Ρ‹Ρ…ΠΎΠ΄Π½ΠΎΠΉ элСмСнт) всСгда сохраняСтся Π² Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠΌ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°, поэтому ΠΎΠ½ΠΎ Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠ΅Ρ€Π΅ΠΏΠΎΠ»Π½ΡΡ‚ΡŒΡΡ. ДСмонстрация ΠΏΡ€Π΅Π΄ΠΏΠΎΠ»Π°Π³Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ ΠΊΠ°ΠΊΠΎΠΉ-Ρ‚ΠΎ шаблон JS Π±ΡƒΠ΄Π΅Ρ‚ автоматичСски Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΡƒ, поэтому Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ всСх многочислСнных ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½Ρ‹Ρ… CSS/Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ² HTML Π½Π΅ Ρ‚Ρ€Π΅Π±ΡƒΠ΅Ρ‚ Ρ€ΡƒΡ‡Π½ΠΎΠΉ Ρ€Π°Π±ΠΎΡ‚Ρ‹.

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

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

Зависимости: β€”

О кодС

ΠŸΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° CSS

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

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

Зависимости: β€”

О кодС

НСоморфизм β€” ΠΏΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π°

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

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

Зависимости: β€”

О кодС

Π‘Ρ‚ΠΈΠ»ΡŒΠ½Ρ‹ΠΉ слайдСр Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π°

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

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

Зависимости: β€”

О кодС

ΠŸΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π°

ΠŸΡ€ΠΎΡΡ‚ΠΎΠΉ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° Π² HTML ΠΈ CSS.

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

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

Зависимости: β€”

О кодС

ΠŸΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° CSS

ΠŸΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° Ρ‚ΠΎΠ»ΡŒΠΊΠΎ для CSS. JS ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для измСнСния Ρ†Π²Π΅Ρ‚Π° ΠΈ ΠΌΠ΅Ρ‚ΠΊΠΈ %.

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

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

Зависимости: jquery.js

О кодС

Π Π°Π΄ΠΈΠΎΠΊΠ½ΠΎΠΏΠΊΠ° Dot-Slider

ΠŸΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° ΠΊΠ»ΠΈΠΊΠΎΠ² Π½Π° чистом CSS со ΡΠΊΠΎΠ»ΡŒΠ·ΡΡ‰ΠΈΠΌ Ρ‚ΠΎΡ‡Π΅Ρ‡Π½Ρ‹ΠΌ ΠΈΠ½Π΄ΠΈΠΊΠ°Ρ‚ΠΎΡ€ΠΎΠΌ, ΠΌΠ΅Ρ‚ΠΊΠ°ΠΌΠΈ, стилСм с условиСм достовСрности ΠΈ Π‘Π•Π— JS. Π Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π½Π° 100% Π½Π° сайтах с ограничСниями JS.

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

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

Зависимости: β€”

О кодС

ΠŸΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ Π”ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½

ΠŸΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° для вСса Π² HTML, CSS ΠΈ JavaScript.

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

Зависимости: β€”

О кодС

ΠšΡ€ΠΎΡΡ-Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π½Ρ‹ΠΉ Π²Π²ΠΎΠ΄ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° со сплошной Π½ΠΈΠΆΠ½Π΅ΠΉ Π·Π°Π»ΠΈΠ²ΠΊΠΎΠΉ

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ box-shadow Π½Π° псСвдоэлСмСнтС большого ΠΏΠ°Π»ΡŒΡ†Π° для создания Π·Π°Π»ΠΈΠ²ΠΊΠΈ Π² ΠΏΡ€Π΅Π΄Π΅Π»Π°Ρ… Π²Ρ…ΠΎΠ΄Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π°.

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

Зависимости: β€”

О кодС

ΠŸΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ минимального Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π°

Волько ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΉ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½ Π²Π²ΠΎΠ΄Π° CSS3.

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

Зависимости: β€”

О кодС

Ρ‚ΠΈΠΏ Π²Π²ΠΎΠ΄Π°=Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½ #99

НастраиваСмый ΠΏΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° с HTML, CSS ΠΈ JS.

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

Зависимости: β€”

О кодС

Ρ‚ΠΈΠΏ Π²Π²ΠΎΠ΄Π°=Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½ #98

ΠŸΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° β„– 98 Π² HTML, CSS, JS Аны Π’ΡŽΠ΄ΠΎΡ€.

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

Зависимости: β€”

О кодС

Ρ‚ΠΈΠΏ Π²Π²ΠΎΠ΄Π°=Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½ #96

ΠŸΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° β„– 96 Π² HTML, CSS, JS Аны Π’ΡŽΠ΄ΠΎΡ€.

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

Зависимости: β€”

О кодС

Ρ‚ΠΈΠΏ Π²Π²ΠΎΠ΄Π°=Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½ #94

ΠŸΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° # 94 Π² HTML ΠΈ CSS Аны Π’ΡŽΠ΄ΠΎΡ€.

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

Зависимости: β€”

О кодС

Ρ‚ΠΈΠΏ Π²Π²ΠΎΠ΄Π°=Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½ #91

ΠžΡ‚Π»ΠΈΡ‡Π½ΠΎΠ΅ исполнСниС ΠΈ Ρ…ΠΎΡ€ΠΎΡˆΠΈΠΉ Π²Ρ‹Π±ΠΎΡ€ для ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠΈ.

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

Зависимости: β€”

О кодС

Ρ‚ΠΈΠΏ Π²Π²ΠΎΠ΄Π°=Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½ #87

ΠšΡ€ΠΎΡΡΠ±Ρ€Π°ΡƒΠ·Π΅Ρ€Π½Ρ‹ΠΉ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° 1 элСмСнта.

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

Зависимости: β€”

О кодС

Π²Π²ΠΎΠ΄ [Ρ‚ΠΈΠΏ = β€˜Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½β€™]

Бтилизация элСмСнта InputRange Π±Π΅Π· extraDom ΠΈΠ»ΠΈ JS.

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

Зависимости: β€”

О кодС

Ρ‚ΠΈΠΏ Π²Π²ΠΎΠ΄Π°=Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½ #40

ΠŸΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° β„– 40 Π² HTML, CSS ΠΈ JS Аны Π’ΡŽΠ΄ΠΎΡ€.

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

Зависимости: β€”

О кодС

ΠŸΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π°

Π˜Π½Π΄ΠΈΠ²ΠΈΠ΄ΡƒΠ°Π»ΡŒΠ½Ρ‹ΠΉ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π°.

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

Зависимости: β€”

О кодС

Π’Π²ΠΎΠ΄ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π°: ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Ρ‚Π΅ΠΊΡƒΡ‰Π΅Π³ΠΎ значСния

Π’ Ρ€Π΅ΠΆΠΈΠΌΠ΅ Ρ€Π΅Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚Π΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° input , ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Β«inputΒ» JavaScript addEventListener .

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

Зависимости: β€”

О кодС

ΠŸΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° Ρ†Π΅Π½

ΠŸΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ Ρ†Π΅Π½ΠΎΠ²ΠΎΠ³ΠΎ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° 3D HTML5.

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

Зависимости: jquery.js

66 ярких ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² Π΄ΠΈΠ·Π°ΠΉΠ½Π° слайдСра Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° CSS (Π‘Π•Π‘ΠŸΠ›ΠΠ’ΠΠ«Π• дСмонстрации)

ΠŸΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ ΡˆΠ΅ΡΡ‚Π΅Ρ€Π½ΠΈ

ΠšΡ€Π΅Π°Ρ‚ΠΈΠ²Π½Ρ‹ΠΉ Π΄Π²ΡƒΡ…Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π½Ρ‹ΠΉ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΈΠΌΠΈΡ‚ΠΈΡ€ΡƒΠ΅Ρ‚ Π·ΡƒΠ±Ρ‡Π°Ρ‚ΠΎΠ΅ колСсо Π½Π° ΠΊΠ°ΠΆΠ΄ΠΎΠΌ ΠΊΠΎΠ½Ρ†Π΅ ΠΏΡ€ΠΈ скольТСнии ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠ°.

БдСлано с:

HTML

CSS

JavaScript

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

SCSS

JQuery

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

ΠŸΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° CSS

Π€Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚ ΠΊΠΎΠ΄Π° ΠΈΠ· 3-Ρ… ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠΎΠ² ΠΎΠ΄Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° с ΠΈΠ½Π΄ΠΈΠΊΠ°Ρ‚ΠΎΡ€ΠΎΠΌ значСния ΠΈ Ρ€Π°Π·Π½Ρ‹ΠΌ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ шага.

БдСлано с:

HTML

CSS

JavaScript

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

SCSS

JQuery

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

ΠŸΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ Π΄Π²ΠΎΠΉΠ½ΠΎΠ³ΠΎ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π°

Π­Ρ‚ΠΎΡ‚ Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚ ΠΊΠΎΠ΄Π° прСдставляСт собой минималистичный ΠΏΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ Π΄Π²ΠΎΠΉΠ½ΠΎΠ³ΠΎ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° с ΠΆΠ΅Π»Ρ‚ΠΎΠΉ Ρ‚Π΅ΠΌΠΎΠΉ ΠΈ ΠΈΠ½Π΄ΠΈΠΊΠ°Ρ‚ΠΎΡ€Π°ΠΌΠΈ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ.

Π‘Π΄Π΅Π»Π°Π½ΠΎ ΠΈΠ·:

HTML

CSS

JavaScript

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

JQuery

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

ΠŸΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° Verly

ΠžΡ‡Π΅Π½ΡŒ творчСский, Π½ΠΎ Π½Π΅ ΠΎΡ‡Π΅Π½ΡŒ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ΠΉ Π²Π²ΠΎΠ΄ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π°, ΠΈΠΌΠΈΡ‚ΠΈΡ€ΡƒΡŽΡ‰ΠΈΠΉ Π²ΠΈΡΡΡ‡ΡƒΡŽ полосу.

БдСлано с:

HTML

CSS

JavaScript

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

Verly Range Slider

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

Π’Ρ‹Ρ…ΠΎΠ΄Π½Ρ‹Π΅ Π΄Π°Π½Π½Ρ‹Π΅ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠ° Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π°

CodePen с простым ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠΎΠΌ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΈΠΌΠ΅Π΅Ρ‚ ΠΏΡƒΠ·Ρ‹Ρ€Π΅ΠΊ, ΡƒΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΉ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π² Π²Π΅Ρ€Ρ…Π½Π΅ΠΉ части ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Π°.

БдСлано с:

HTML

CSS

JavaScript

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

SCSS

JQuery

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

ΠŸΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ Π±ΡŽΠ΄ΠΆΠ΅Ρ‚Π°

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ ΠΊΠΎΠ΄Π° красивого Ρ‚Ρ€Π΅Ρ…ΠΌΠ΅Ρ€Π½ΠΎΠ³ΠΎ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠ° Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π°, ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‰Π΅Π³ΠΎ ваш Π±ΡŽΠ΄ΠΆΠ΅Ρ‚.

БдСлано с:

HTML

CSS

JavaScript

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

JQuery

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

ΠŸΠΎΠ»Π·ΡƒΠ½ΠΊΠΎΠ²Ρ‹ΠΉ эквалайзСр Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π°

Π­Ρ‚ΠΎΡ‚ Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚ ΠΊΠΎΠ΄Π° прСдставляСт собой Π½Π°Π±ΠΎΡ€ Π²Ρ…ΠΎΠ΄Π½Ρ‹Ρ… Π΄Π°Π½Π½Ρ‹Ρ… Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΈΠΌΠΈΡ‚ΠΈΡ€ΡƒΡŽΡ‚ эквалайзСр с ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ.

БдСлано с:

HTML

CSS

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

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

ΠŸΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° ΠΊΡƒΠ±Π°

ΠŸΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ творчСского Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅, подсвСчивая Π½Π°Π±ΠΎΡ€ свСтло-Π·Π΅Π»Π΅Π½Ρ‹Ρ… 3D-ΠΊΡƒΠ±ΠΎΠ².

БдСлано с:

HTML

CSS

JavaScript

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

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

НСйморфный Π΄ΠΈΠ·Π°ΠΉΠ½ слайдСра с ΠΎΠ΄Π½ΠΈΠΌ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½ΠΎΠΌ Π½Π° чистом CSS

Π’ΠΏΠ΅Ρ‡Π°Ρ‚Π»ΡΡŽΡ‰ΠΈΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ слайдСра с ΠΎΠ΄Π½ΠΈΠΌ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½ΠΎΠΌ Π² Π½Π΅ΠΎΠΌΠΎΡ€Ρ„Π½ΠΎΠΌ стилС ΠΈ Π±Π΅Π· использования JavaScript.

БдСлано с:

HTML

CSS

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

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

ΠŸΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° вращСния Ρ‚Π΅Π»Π΅Ρ„ΠΎΠ½Π°

Π­Ρ‚ΠΎΡ‚ Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚ ΠΊΠΎΠ΄Π° прСдставляСт собой Ρ‚Ρ€Π΅Ρ…ΠΌΠ΅Ρ€Π½Ρ‹ΠΉ Ρ‚Π΅Π»Π΅Ρ„ΠΎΠ½, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ вращаСтся с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ простого ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠ° Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π°.

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

HTML

CSS

JavaScript

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

SCSS

JQuery

GSAP

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

ΠŸΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° GSAP SVG

ΠšΡ€Π°ΡΠΈΠ²Ρ‹ΠΉ ΠΈΠ·ΠΎΠ³Π½ΡƒΡ‚Ρ‹ΠΉ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° с ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ΠΌ Ρ†Π²Π΅Ρ‚Π° Π² зависимости ΠΎΡ‚ полоТСния Ρ€ΡƒΡ‡ΠΊΠΈ.

БдСлано с:

HTML

CSS

JavaScript

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

JQuery

GSAP

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

НастраиваСмый ΠΏΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π°

ΠŸΡ€ΠΎΡΡ‚ΠΎΠΉ собствСнный ΠΈ настраиваСмый ΠΏΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° с Ρ€ΠΎΠ·ΠΎΠ²Ρ‹ΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‰ΠΈΠΉ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π²Π²ΠΎΠ΄ HTML ΠΈ чистый CSS.

БдСлано с:

HTML

CSS

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

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

ДинамичСский Ρ„ΠΎΠ½ сСтки с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠ° Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π°

Π­Ρ‚ΠΎΡ‚ Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚ ΠΊΠΎΠ΄Π° прСдставляСт собой динамичСский Ρ„ΠΎΠ½ сСтки, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ измСняСт Ρ€Π°Π·ΠΌΠ΅Ρ€ сСтки с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ простого ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠ° Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° с ΠΈΠ½Π΄ΠΈΠΊΠ°Ρ‚ΠΎΡ€ΠΎΠΌ значСния сСтки.

Π‘Π΄Π΅Π»Π°Π½ΠΎ ΠΈΠ·:

HTML

CSS

JavaScript

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

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

Π˜Π½Π΄ΠΈΠΊΠ°Ρ‚ΠΎΡ€ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠ° CSS

Π­Ρ‚ΠΎΡ‚ CodePen ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅Ρ‚ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ Π²Π²ΠΎΠ΄Π° с ΠΈΠ½Π΄ΠΈΠΊΠ°Ρ‚ΠΎΡ€ΠΎΠΌ ΠΎΠΊΡ€ΡƒΠ³Π»Π΅Π½Π½ΠΎΠ³ΠΎ значСния, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ отобраТаСтся ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ Ρ€Π°Π· ΠΏΡ€ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ значСния ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠ° Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π°.

БдСлано с:

HTML

CSS

JavaScript

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

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

Π‘Π»Π°ΠΉΠ΄Π΅Ρ€ для ΡˆΠ°Ρ€Π° SVG

Π­Ρ‚ΠΎΡ‚ Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚ ΠΊΠΎΠ΄Π° ΠΈΠΌΠ΅Π΅Ρ‚ ΠΎΠ΄ΠΈΠ½ Π²Ρ…ΠΎΠ΄Π½ΠΎΠΉ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½ с прСкрасной Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠ΅ΠΉ для ΠΏΡƒΠ·Ρ‹Ρ€ΡŒΠΊΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ½Π΄ΠΈΠΊΠ°Ρ‚ΠΎΡ€Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ отобраТаСтся ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ Ρ€Π°Π· ΠΏΡ€ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ значСния.

БдСлано с:

HTML

CSS

JavaScript

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

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

ПлоскиС ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠΈ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π°

Π€Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚ ΠΊΠΎΠ΄Π° 3 ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠΎΠ² Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° с плоским Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ ΠΈ красной Ρ‚Π΅ΠΌΠΎΠΉ с использованиСм Ρ‚ΠΎΠ»ΡŒΠΊΠΎ CSS.

БдСлано с:

HTML

CSS

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

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

Π’Ρ…ΠΎΠ΄Ρ‹ с нСсколькими Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π°ΠΌΠΈ

Π’ этом Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚Π΅ ΠΊΠΎΠ΄Π° ΠΌΡ‹ Π½Π°Ρ…ΠΎΠ΄ΠΈΠΌ Π½Π°Π±ΠΎΡ€ ΠΈΠ· 4 высококачСствСнных настраиваСмых ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠΎΠ² Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½ΠΎΠ² с Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹ΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ.

БдСлано с:

HTML

CSS

JavaScript

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

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

ΠœΠ½ΠΎΠ³ΠΎΠ΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π½Ρ‹ΠΉ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса jQuery

CodePen с ΠΌΠ½ΠΎΠ³ΠΎΠ΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π½Ρ‹ΠΌ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠΎΠΌ Π²Π²ΠΎΠ΄Π° с ΠΈΠ½Π΄ΠΈΠΊΠ°Ρ‚ΠΎΡ€Π°ΠΌΠΈ Π² ΠΎΠ±ΠΎΠΈΡ… ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°Ρ…, созданных с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ jQuery.

Π‘Π΄Π΅Π»Π°Π½ΠΎ ΠΈΠ·:

HTML

CSS

JavaScript

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

JQuery

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

ΠŸΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° Ρ†Π²Π΅Ρ‚ΠΎΠ² Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π°

Π­Ρ‚ΠΎΡ‚ Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚ ΠΊΠΎΠ΄Π° ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅Ρ‚ ΠΎΠ΄ΠΈΠ½ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π°, ΠΎΠ½ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅Ρ‚ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ для указания Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ значСния Π²Π²ΠΎΠ΄Π°.

БдСлано с:

HTML

CSS

JavaScript

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

SCSS

JQuery

CoffeeScript

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

ΠŸΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° Π² Ρ„ΠΎΡ€ΠΌΠ΅ Ρ€ΡƒΡ‡ΠΊΠΈ

Π­Ρ‚ΠΎΡ‚ CodePen прСдставляСт собой ΠΏΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° Π² Π²ΠΈΠ΄Π΅ Ρ€ΡƒΡ‡ΠΊΠΈ с ΠΎΠ΄Π½ΠΈΠΌ элСмСнтом Π²Π²ΠΎΠ΄Π° HTML ΠΈ ΠΏΠΎΡ‡Ρ‚ΠΈ Π±Π΅Π· JavaScript.

БдСлано с:

HTML

CSS

JavaScript

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

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

Чистый Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½ Π²Π²ΠΎΠ΄Π° CSS

ΠœΠΈΠ½ΠΈΠΌΠ°Π»ΠΈΡΡ‚ΠΈΡ‡Π½Ρ‹ΠΉ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° чистого CSS с красной Ρ‚Π΅ΠΌΠΎΠΉ ΠΈ ΠΈΠ½Π΄ΠΈΠΊΠ°Ρ‚ΠΎΡ€ΠΎΠΌ, ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΌ Ρ‚Π΅ΠΊΡƒΡ‰Π΅Π΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅.

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

HTML

CSS

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

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

ΠŸΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° с ΠΈΠ½Π΄ΠΈΠΊΠ°Ρ‚ΠΎΡ€ΠΎΠΌ значСния

Π€Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚ ΠΊΠΎΠ΄Π° Π±Π°Π·ΠΎΠ²ΠΎΠ³ΠΎ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠ° Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π°, созданного с использованиСм HTML, CSS ΠΈ JavaScript, с ΠΈΠ½Π΄ΠΈΠΊΠ°Ρ‚ΠΎΡ€ΠΎΠΌ значСния, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ слСдуСт Π·Π° ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»Π»Π΅Ρ€ΠΎΠΌ.

БдСлано с:

HTML

CSS

JavaScript

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

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

ΠŸΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ Ρ†Π΅Π½ΠΎΠ²ΠΎΠ³ΠΎ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π°

ΠŸΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ Π΄Π²ΠΎΠΉΠ½ΠΎΠ³ΠΎ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° с простой конструкциСй, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠΎΠΆΠ΅Ρ‚ Π·Π°Π΄Π°Π²Π°Ρ‚ΡŒ значСния с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ тСкстовых ΠΏΠΎΠ»Π΅ΠΉ.

БдСлано с:

HTML

CSS

JavaScript

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

Pug

Stylus

JQuery

0 View Code0 and 5 Demo 0 and 5 Demo

ΠŸΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ JQuery

Π­Ρ‚ΠΎΡ‚ CodePen создан с использованиСм Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ jQuery ΠΈ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅Ρ‚ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ Π΄Π²ΠΎΠΉΠ½ΠΎΠ³ΠΎ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° для установки Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ.

БдСлано с:

HTML

CSS

JavaScript

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

JQuery

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

ΠŸΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° CSS

ΠšΡ€Π΅Π°Ρ‚ΠΈΠ²Π½Ρ‹ΠΉ ΠΈ красочный ΠΏΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π² зависимости ΠΎΡ‚ своСго значСния мСняСт Ρ†Π²Π΅Ρ‚, Π° ΠΈΠ½Π΄ΠΈΠΊΠ°Ρ‚ΠΎΡ€, ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΉ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅, мСняСт Ρ€Π°Π·ΠΌΠ΅Ρ€.

БдСлано с:

HTML

CSS

JavaScript

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

SCSS

JQuery

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

ΠŸΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ Π΄Π²ΡƒΡ…Ρ‚ΠΎΡ‡Π΅Ρ‡Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π°

Π€Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚ ΠΊΠΎΠ΄Π° простого ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠ° Π΄Π²ΠΎΠΉΠ½ΠΎΠ³ΠΎ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π°, ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΉ 2 значСния, Π·Π°Π΄Π°Π½Π½Ρ‹Π΅ ΠΏΠΎ краям ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠ°.

БдСлано с:

HTML

CSS

JavaScript

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

JQuery

Bootstrap

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

Π’Π²ΠΎΠ΄ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° Neumorphism

Если Π²Π°ΠΌ Π½ΡƒΠΆΠ΅Π½ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Π΄ΠΈΠ·Π°ΠΉΠ½Π° слайдСра с ΠΎΠ΄Π½ΠΈΠΌ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½ΠΎΠΌ Π² стилС Neumorphism с использованиСм Ρ‚ΠΎΠ»ΡŒΠΊΠΎ CSS ΠΈ HTML, это ваш Π²Ρ‹Π±ΠΎΡ€.

БдСлано с:

HTML

CSS

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

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

Π˜Π½Π΄ΠΈΠΊΠ°Ρ‚ΠΎΡ€ вСса Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠ°

Π­Ρ‚ΠΎΡ‚ Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚ ΠΊΠΎΠ΄Π° прСдставляСт собой Π²Π²ΠΎΠ΄ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠ° Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° с простой конструкциСй для установки вСса ΠΈ с ΠΈΠ½Π΄ΠΈΠΊΠ°Ρ‚ΠΎΡ€ΠΎΠΌ ΠΎΠΊΡ€ΡƒΠ³Π»Π΅Π½Π½ΠΎΠ³ΠΎ значСния Π² ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ΅.

БдСлано с:

HTML

CSS

JavaScript

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

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

ΠŸΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ с нСсколькими Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π°ΠΌΠΈ CSS3

ΠŸΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ с нСсколькими Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π°ΠΌΠΈ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‰ΠΈΠΉ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ CSS ΠΈ HTML, с элСгантным Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ ΠΈ эффСктом навСдСния Π½Π° ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»Π»Π΅Ρ€Ρ‹ для отобраТСния настроСнного значСния.

БдСлано с:

HTML

CSS

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

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

ΠŸΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° с ΠΎΠ±Ρ€Π°Ρ‚Π½ΠΎΠΉ связью

ΠŸΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° с Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π½Ρ‹ΠΌ Ρ†Π²Π΅Ρ‚ΠΎΠΌ ΠΈ Ρ€ΡƒΡ‡ΠΊΠΎΠΉ, которая ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π²Π²ΠΎΠ΄Π° ΠΈ мСняСт свой Ρ†Π²Π΅Ρ‚ Π² зависимости ΠΎΡ‚ Π·ΠΎΠ½Ρ‹, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ ΠΎΠ½ находится.

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

SCSS

JQuery

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

ΠŸΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π°

Π€Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚ ΠΊΠΎΠ΄Π° простого, Π½ΠΎ Ρ…ΠΎΡ€ΠΎΡˆΠΎ ΠΏΡ€ΠΎΠ΄ΡƒΠΌΠ°Π½Π½ΠΎΠ³ΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠ° с ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠΉ ΠΎΡ€Π°Π½ΠΆΠ΅Π²ΠΎΠΉ Ρ‚Π΅ΠΌΠΎΠΉ.

БдСлано с:

HTML

CSS

JavaScript

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

SCSS

JQuery

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

ΠšΠΎΠΌΠΏΠ°ΠΊΡ‚Π½Ρ‹ΠΉ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π°

Π­Ρ‚ΠΎΡ‚ Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚ ΠΊΠΎΠ΄Π° прСдставляСт собой простой, Π½ΠΎ красивый встроСнный ΠΏΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ Π²Π²ΠΎΠ΄Π° с Ρ‚ΠΎΠ½ΠΊΠΈΠΌ эффСктом навСдСния.

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

HTML

CSS

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

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

ΠŸΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ ΡΠΊΠΎΠ»ΡŒΠ·ΡΡ‰Π΅Π³ΠΎ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π°

Π€Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚ ΠΊΠΎΠ΄Π° ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠ° творчСского Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° с рСгулятором Π² Π²ΠΈΠ΄Π΅ ΠΏΠΈΠ½Π³Π²ΠΈΠ½Π° с красивой Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠ΅ΠΉ ΠΏΡ€ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ значСния.

БдСлано с:

HTML

CSS

JavaScript

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

Stylus

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

Π‘ΠΊΡ€ΡƒΠ³Π»Π΅Π½Π½Ρ‹ΠΉ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π°

Π‘ΠΊΡ€ΡƒΠ³Π»Π΅Π½Π½Ρ‹ΠΉ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° Ρ‚Π΅ΠΌΠΏΠ΅Ρ€Π°Ρ‚ΡƒΡ€ с ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ ΠΈ ΠΈΠ½Π΄ΠΈΠΊΠ°Ρ‚ΠΎΡ€ΠΎΠΌ значСния, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ обновляСтся Π² соотвСтствии со Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠ°.

БдСлано с:

HTML

CSS

JavaScript

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

SCSS

JQuery

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

Π‘Ρ‚ΠΈΠ»ΡŒΠ½Ρ‹ΠΉ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π°

Π€Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚ ΠΊΠΎΠ΄Π°, ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΉ встроСнный ΠΏΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ Π²Π²ΠΎΠ΄Π° Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° с ярким Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ.

БдСлано с:

HTML

CSS

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

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

ΠŸΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса

Π­Ρ‚ΠΎΡ‚ простой ΠΏΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ Π²Π²ΠΎΠ΄Π° Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° создан Ρ‚ΠΎΠ»ΡŒΠΊΠΎ с использованиСм HTML ΠΈ CSS ΠΈ ΠΈΠΌΠ΅Π΅Ρ‚ ΠΈΠ½Π΄ΠΈΠΊΠ°Ρ‚ΠΎΡ€ значСния.

БдСлано с:

HTML

CSS

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

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

ΠŸΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ Ρ€Π°Π΄ΠΈΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π°

ΠŸΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ Ρ€Π°Π΄ΠΈΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° 360 градусов с Ρ€ΠΎΠ·ΠΎΠ²ΠΎΠΉ Ρ‚Π΅ΠΌΠΎΠΉ ΠΈ ΠΈΠ½Π΄ΠΈΠΊΠ°Ρ‚ΠΎΡ€ΠΎΠΌ Ρ‚ΠΎΡ‡Π½ΠΎΠ³ΠΎ значСния градуса Π² Ρ†Π΅Π½Ρ‚Ρ€Π΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса.

БдСлано с:

HTML

CSS

JavaScript

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

SCSS

Haml

CoffeeScript

  • Code

    JQuery ΠΈ JQuery0005

    ΠŸΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° SVG

    ΠŸΡ€ΠΈΠΌΠ΅Ρ€ ΠΊΠΎΠ΄Π° ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠ° Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° с простым Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ ΠΈ ΠΈΠ½Π΄ΠΈΠΊΠ°Ρ‚ΠΎΡ€ΠΎΠΌ значСния Π½Π° ΠΊΡ€Π°ΡŽ.

    БдСлано с:

    HTML

    CSS

    JavaScript

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

    SCSS

    GSAP

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

    ΠŸΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° Material Design

    ΠŸΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° с ΠΈΠ½Π΄ΠΈΠΊΠ°Ρ‚ΠΎΡ€ΠΎΠΌ значСния Π½Π° ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»Π»Π΅Ρ€Π΅ с Π·Π΅Π»Π΅Π½ΠΎΠΉ Ρ‚Π΅ΠΌΠΎΠΉ, Π²Π΄ΠΎΡ…Π½ΠΎΠ²Π»Π΅Π½Π½ΠΎΠΉ стилСм Material Design.

    Π‘Π΄Π΅Π»Π°Π½ΠΎ ΠΈΠ·:

    HTML

    CSS

    JavaScript

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

    PUG

    Stylus

    PUG

    COFFEESCRPT

    JQUERY

    VIESS ΠΈ DEMO

    Π­Π»Π΅ΠΌΠ΅Π½Ρ‚Ρ‹ управлСния ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠ°ΠΌΠΈ Chrome

    Π€Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚ ΠΊΠΎΠ΄Π° с Π½Π°Π±ΠΎΡ€ΠΎΠΌ ΠΈΠ· 5 ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠΎΠ² с ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ‹ΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ, Π½ΠΎ Ρ€Π°Π·Π½Ρ‹ΠΌΠΈ Ρ†Π²Π΅Ρ‚Π°ΠΌΠΈ ΠΈ элСгантным Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ.

    БдСлано с:

    HTML

    CSS

    JavaScript

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

    SCSS

    JQuery

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

    Π“Ρ€Π°Π½ΠΈΡ†Ρ‹ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠ° Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° с ΠΏΠ»Π°Π²Π°ΡŽΡ‰Π΅ΠΉ запятой

    Π€Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚ ΠΊΠΎΠ΄Π° Π²Π²ΠΎΠ΄Π° ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠ° с дСсятичными значСниями ΠΈ ΠΈΠ½Π΄ΠΈΠΊΠ°Ρ‚ΠΎΡ€ΠΎΠΌ для отобраТСния значСния.

    БдСлано с:

    HTML

    CSS

    JavaScript

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

    SCSS

    JQuery

    rangeslider.js

  • 0 Код 0 ΠΈ Demo 90

    ΠŸΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ с Π΄Π²ΠΎΠΉΠ½Ρ‹ΠΌ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½ΠΎΠΌ React JS

    Π­Ρ‚ΠΎΡ‚ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ Π΄Π²ΠΎΠΉΠ½ΠΎΠ³ΠΎ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»Π»Π΅Ρ€ΠΎΠ² ΠΈΠ»ΠΈ тСкстовых ΠΏΠΎΠ»Π΅ΠΉ, Π² ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… отобраТаСтся Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠ°.

    БдСлано с:

    HTML

    CSS

    JavaScript

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

    SCSS

    React JS

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

    Π’Π²ΠΎΠ΄ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π°

    ΠŸΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ ΠΎΠ΄Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° с ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ, большим ΠΈΠ½Π΄ΠΈΠΊΠ°Ρ‚ΠΎΡ€ΠΎΠΌ значСния ΠΈ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠ΅ΠΉ Π² ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ΅, ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ Π°ΠΊΡ‚ΠΈΠ²Π΅Π½.

    Π‘Π΄Π΅Π»Π°Π½ΠΎ ΠΈΠ·:

    HTML

    CSS

    JavaScript

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

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

    Адаптивный слайдСр

    ΠšΠΎΠ»Π»Π΅ΠΊΡ†ΠΈΡ ΠΈΠ· 4 слайдСров Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π°, ΠΎΠ΄ΠΈΠ½ Π΄Π²ΠΎΠΉΠ½ΠΎΠΉ ΠΈ ΠΎΠ΄ΠΈΠ½Π°Ρ€Π½Ρ‹ΠΉ, с Ρ€Π°Π·Π½Ρ‹ΠΌΠΈ Ρ†Π²Π΅Ρ‚ΠΎΠ²Ρ‹ΠΌΠΈ Ρ‚Π΅ΠΌΠ°ΠΌΠΈ ΠΈ красивой Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠ΅ΠΉ ΠΏΡ€ΠΈ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠΈ Ρ€ΡƒΡ‡ΠΊΠΈ.

    БдСлано с:

    HTML

    CSS

    JavaScript

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

    SCSS

    JQuery

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

    ΠŸΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° одноколСсного вСлосипСда

    ΠšΡ€Π΅Π°Ρ‚ΠΈΠ²Π½Ρ‹ΠΉ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π°, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ Ρ€ΡƒΡ‡ΠΊΠ° прСдставляСт собой одноколСсный вСлосипСд с приятной Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠ΅ΠΉ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ Ρ€Π°Π·, ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°Π΅Ρ‚Π΅ Π΅Π³ΠΎ.

    БдСлано с:

    HTML

    CSS

    JavaScript

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

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

    3D-ΠΏΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° Ρ†Π΅Π½

    Π’ этом Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚Π΅ ΠΊΠΎΠ΄Π° ΠΏΠΎΠΊΠ°Π·Π°Π½ ΠΎΠ΄ΠΈΠ½ 3D-ΠΏΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° для настройки вашСго Π±ΡŽΠ΄ΠΆΠ΅Ρ‚Π°.

    БдСлано с:

    HTML

    CSS

    JavaScript

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

    JQuery

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

    ΠŸΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° HTML

    CodePen с ΠΎΠ΄Π½ΠΈΠΌ Π²Ρ…ΠΎΠ΄Π½Ρ‹ΠΌ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠΎΠΌ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° ΠΈ с ΠΈΠ½Π΄ΠΈΠΊΠ°Ρ‚ΠΎΡ€ΠΎΠΌ значСния Π½Π° дСскрипторС.

    БдСлано с:

    HTML

    CSS

    JavaScript

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

    МСньшС

    JQuery

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

    ΠŸΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° громкости

    Π­Ρ‚ΠΎΡ‚ Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚ ΠΊΠΎΠ΄Π° ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ ΠΈΠ½Π΄ΠΈΠΊΠ°Ρ‚ΠΎΡ€ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° громкости приятного ΠΆΠ΅Π»Ρ‚ΠΎΠ³ΠΎ Ρ†Π²Π΅Ρ‚Π° ΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½ Π² стилС Π½Π΅ΠΎΠΌΠΎΡ€Ρ„ΠΈΠ·ΠΌΠ°.

    БдСлано с:

    HTML

    CSS

    JavaScript

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

    SCSS

    Мопс

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

    ΠŸΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° ΠΊΡƒΠ±Π°

    Π­Ρ‚ΠΎΡ‚ Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚ творчСского ΠΊΠΎΠ΄Π° ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ ΠΎΠ΄ΠΈΠ½ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° Π² Ρ„ΠΎΡ€ΠΌΠ΅ Ρ‚Ρ€Π΅Ρ…ΠΌΠ΅Ρ€Π½Ρ‹Ρ… ΠΊΡ€ΠΈΡΡ‚Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΊΡƒΠ±ΠΎΠ².

    БдСлано с:

    HTML

    CSS

    JavaScript

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

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

    Π”ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½ ΠΊΡ€Π΅Π΄ΠΈΡ‚Π°

    Π’Π²ΠΎΠ΄ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° для отобраТСния суммы ΠΊΡ€Π΅Π΄ΠΈΡ‚Π° с Ρ„ΠΈΠΎΠ»Π΅Ρ‚ΠΎΠ²Ρ‹ΠΌ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ΠΎΠΌ, ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‰ΠΈΠΌ Π°ΠΊΡ‚ΠΈΠ²Π½ΡƒΡŽ Π·ΠΎΠ½Ρƒ, ΠΈ красивой Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠΉ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠ΅ΠΉ Π½Π° Ρ€ΡƒΡ‡ΠΊΠ΅.

    БдСлано с:

    HTML

    CSS

    JavaScript

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

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

    ΠŸΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° со Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ Π² ΠΊΡ€ΡƒΠΆΠΊΠ΅

    ΠžΡ‡Π΅Π½ΡŒ простой ΠΏΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ для ΠΎΠ΄Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΈΠΌΠ΅Π΅Ρ‚ ΠΊΡ€ΡƒΠΆΠΎΠΊ со Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ Π² ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Π΅ ΠΈ отобраТаСтся ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ Ρ€Π°Π· ΠΏΡ€ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ значСния.

    Π‘Π΄Π΅Π»Π°Π½ΠΎ ΠΈΠ·:

    HTML

    CSS

    JavaScript

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

    SCSS

    JQuery

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

    ΠŸΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° с фиксированными значСниями

    Π€Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚ ΠΊΠΎΠ΄Π°, ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΉ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° с доступными фиксированными значСниями ΠΈ плоским Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ.

    БдСлано с:

    HTML

    CSS

    JavaScript

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

    SCSS

    JQuery

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

    ΠŸΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ с двумя Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π°ΠΌΠΈ

    Π­Ρ‚ΠΎΡ‚ CodePen дСмонстрируСт минималистичный ΠΏΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ с двумя Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π°ΠΌΠΈ ΠΈ Π»Π°ΠΊΠΎΠ½ΠΈΡ‡Π½Ρ‹ΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ.

    БдСлано с:

    HTML

    CSS

    JavaScript

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

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

    ΠŸΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° Π½Π° чистом CSS

    ΠŸΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° Π½Π° чистом CSS с красивым Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ ΠΈ большим ΠΈΠ½Π΄ΠΈΠΊΠ°Ρ‚ΠΎΡ€ΠΎΠΌ значСния.

    БдСлано с:

    HTML

    CSS

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

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

    ΠŸΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π°

    ΠŸΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° с простым Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ ΠΈ ΠΏΡƒΠ·Ρ‹Ρ€ΡŒΠΊΠΎΠΌ Π½Π° Ρ€ΡƒΡ‡ΠΊΠ΅, ΡƒΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΌ Π΅Π³ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅.

    БдСлано с:

    HTML

    CSS

    JavaScript

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

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

    ΠŸΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° с нСсколькими Ρ€ΡƒΡ‡ΠΊΠ°ΠΌΠΈ

    ΠŸΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ с нСсколькими Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π°ΠΌΠΈ с приятной Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠ΅ΠΉ Π½Π° Ρ€ΡƒΡ‡ΠΊΠ΅ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΈΠ»ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ Π½Π° Π½Π΅Π΅ ΠΈ ΠΎΡ‡Π΅Π½ΡŒ ΡΡ‚ΠΈΠ»ΡŒΠ½ΠΎΠΉ Ρ„ΠΈΠΎΠ»Π΅Ρ‚ΠΎΠ²ΠΎΠΉ Ρ‚Π΅ΠΌΠΎΠΉ.

    Π‘Π΄Π΅Π»Π°Π½ΠΎ ΠΈΠ·:

    HTML

    CSS

    JavaScript

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

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

    ΠœΠ½ΠΎΠ³ΠΎΠ΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π½Ρ‹ΠΉ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ

    Π€Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚ ΠΊΠΎΠ΄Π° ΠΌΠ½ΠΎΠ³ΠΎΠ΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π½ΠΎΠ³ΠΎ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠ° для установки ΠΏΠ΅Ρ€ΠΈΠΎΠ΄Π° с Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π½Ρ‹ΠΌ Ρ†Π²Π΅Ρ‚ΠΎΠΌ Π² Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠΉ Π·ΠΎΠ½Π΅.

    БдСлано с:

    HTML

    CSS

    JavaScript

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

    Stylus

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

    ΠŸΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ Π΄Π²ΠΎΠΉΠ½ΠΎΠ³ΠΎ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π°

    Π€Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚ ΠΊΠΎΠ΄Π° ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠ° Π΄Π²ΠΎΠΉΠ½ΠΎΠ³ΠΎ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° для Π²Ρ‹Π±ΠΎΡ€Π° ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚Π½Ρ‹Ρ… ΠΌΠ΅Ρ‚Ρ€ΠΎΠ², с красивым ΠΈ простым Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ.

    БдСлано с:

    HTML

    CSS

    JavaScript

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

    JQuery

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

    ΠŸΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° React

    ΠŸΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π°, созданный с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ React.js, с ΠΈΠ½Π΄ΠΈΠΊΠ°Ρ‚ΠΎΡ€ΠΎΠΌ значСния Π½Π° ΠΊΡ€Π°ΡŽ.

    БдСлано с:

    HTML

    CSS

    JavaScript

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

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

    ΠŸΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ Π΄Π²ΠΎΠΉΠ½ΠΎΠ³ΠΎ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° AngularJS

    Π­Ρ‚ΠΎΡ‚ CodePen ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ Π΄Π²ΠΎΠΉΠ½ΠΎΠ³ΠΎ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° с настраиваСмыми значСниями, созданными с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ AngularJS.

    БдСлано с:

    HTML

    CSS

    JavaScript

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

    AngularJS

    JQuery

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

    ΠŸΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ с нСсколькими Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π°ΠΌΠΈ с Alpine.js ΠΈ Tailwind CSS

    ΠŸΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ с двумя Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π°ΠΌΠΈ с ΠΈΠ½Π΄ΠΈΠΊΠ°Ρ‚ΠΎΡ€Π°ΠΌΠΈ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ Π½Π° ΠΊΠ°ΠΆΠ΄ΠΎΠΌ ΠΊΡ€Π°ΡŽ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°, созданный с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Tailwind.css ΠΈ Alpine.js.

    БдСлано с:

    HTML

    CSS

    JavaScript

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

    Alpine.js

    Tailwind CSS

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

    ΠŸΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° с ΠΏΡƒΠ·Ρ‹Ρ€Π΅ΠΌ Π»Π°ΠΉΠΊΠΎΠ²

    Π­Ρ‚ΠΎΡ‚ Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚ ΠΊΠΎΠ΄Π° прСдставляСт собой ΠΏΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ количСство Π»Π°ΠΉΠΊΠΎΠ² Π² ΠΏΡƒΠ·Ρ‹Ρ€Π΅ Π² ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ΅.

    БдСлано с:

    HTML

    CSS

    JavaScript

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

    Pug

    SCSS

    JQuery

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

    Π‘Π΄Π²ΠΈΠ³ Ρ‚Π΅ΠΌΡ‹ с ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠΎΠΌ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π°

    CodePen с ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠΎΠΌ ΠΎΠ΄Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ измСняСт Ρ‚Π΅ΠΌΡƒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса Π² зависимости ΠΎΡ‚ значСния ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠ°.

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

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