Как Π² html ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ слайдСр: Как ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ слайдСр Π² HTML Π½Π° своСм сайтС: краткая инструкция

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

27 слайдСров CSS ΠΈ HTML для сравнСния ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡Π΅ΠΊ ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ³ΠΎ Π΄Ρ€ΡƒΠ³ΠΎΠ³ΠΎ

ΠœΡ‹ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠ°Π΅ΠΌ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΡƒ ΠΊΠΎΠ΄Π° CSS ΠΈ HTML, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠΎΠΆΠ½ΠΎ Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π½Π° нашСм Π²Π΅Π±-сайтС, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΈΠ΄Π°Ρ‚ΡŒ Π΅ΠΌΡƒ особый ΡˆΡ‚Ρ€ΠΈΡ…, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ‚ ΠΎΡ‚Π»ΠΈΡ‡ΠΈΡ‚ΡŒ Π΅Π³ΠΎ ΠΎΡ‚ ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Ρ…. Благодаря элСмСнту управлСния + c ΠΈ элСмСнту управлСния + v ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ Ρƒ нас Π΅ΡΡ‚ΡŒ ΠΊΠΎΠ΄, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ сдСлаСт Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚ Π³ΠΎΡ‚ΠΎΠ²Ρ‹ΠΌ для ΠΏΡƒΠ±Π»ΠΈΠΊΠ°Ρ†ΠΈΠΈ Π² Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ послС Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… Π΄Π½Π΅ΠΉ ΠΈΠ»ΠΈ нСдСль тСстирования.

ΠŸΡ€ΠΈΡˆΠ»ΠΎ врСмя для 27 слайдСров Π² HTML ΠΈ CSS, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ позволят Π½Π°ΠΌ ΠΏΠΎΠ΄Π³ΠΎΡ‚ΠΎΠ²ΠΈΡ‚ΡŒ Ρ‚ΠΎ пространство, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ ΠΌΡ‹ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ ΠΈΠ½Ρ‚Π΅Π³Ρ€ΠΈΡ€ΡƒΠ΅ΠΌ большой объСм ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° Π² нСсколько ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚ΠΎΠ² пиксСлСй. Π­Ρ‚ΠΈ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠΈ Π²Π°Ρ€ΡŒΠΈΡ€ΡƒΡŽΡ‚ΡΡ ΠΎΡ‚ ΠΊΠ°Ρ€Ρ‚Ρ‹, ΡΡ€Π°Π²Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ, полноэкранный, ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹ΠΉ ΠΈ самый простой, Π½ΠΎ Π² Ρ‚ΠΎ ΠΆΠ΅ врСмя ΠΎΡ‡Π΅Π½ΡŒ элСгантный. ΠœΡ‹ собираСмся ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ 27 ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½ΠΈΠΊΠΎΠ³ΠΎ Π½Π΅ оставят Ρ€Π°Π²Π½ΠΎΠ΄ΡƒΡˆΠ½Ρ‹ΠΌ, особСнно покупатСля ΠΈΠ»ΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ проходят Ρ‡Π΅Ρ€Π΅Π· ваш сайт, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΎΡ‡ΠΈΡ‚Π°Ρ‚ΡŒ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚, ΠΊΡƒΠΏΠΈΡ‚ΡŒ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚ ΠΈΠ»ΠΈ просто ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΡΡ€Π°Π²Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΡ€Π°Π²Π½ΠΈΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π΄ΠΎ ΠΈ послС.

ИндСкс

  • 1 Π‘ΠΊΡ€ΠΈΠ½Ρ‹ Π½Π° ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠ°Ρ…
  • 2 Π‘Π»Π°ΠΉΠ΄Π΅Ρ€ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΎΠ½Π½Ρ‹Ρ… ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡Π΅ΠΊ
  • 3 Π‘Π»Π°ΠΉΠ΄Π΅Ρ€ ΡΡ€Π°Π²Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ изобраТСния
  • 4 Π‘Ρ€Π°Π²Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ слайдСр Π±Π΅Π· JavaScript
  • 5 ВрСхслойный слайдСр для сравнСния ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ
  • 6 Π‘Π»Π°ΠΉΠ΄Π΅Ρ€ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Vanilla JS
  • 7 Π Π°Π·Π΄Π΅Π»ΠΈΡ‚ΡŒ экран ΠΏΠΎ Π΄ΠΈΠ°Π³ΠΎΠ½Π°Π»ΠΈ
  • 8 ΠŸΠΎΠ»Π½ΠΎΡΠΊΡ€Π°Π½Π½Ρ‹ΠΉ слайдСр
  • 9 Π“ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹ΠΉ слайдСр с параллаксом
  • 10 ΠŸΠ»Π°Π²Π½Ρ‹ΠΉ слайдСр 3D пСрспСктивы
  • 11 ΠŸΠΎΠ»Π½ΠΎΡΠΊΡ€Π°Π½Π½Ρ‹ΠΉ слайдСр гСроя
  • 12 Π‘Π»Π°ΠΉΠ΄Π΅Ρ€ VELO.JS с Ρ€Π°ΠΌΠΊΠ°ΠΌΠΈ
  • 13 Адаптивный Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ слайдСр CSS с ΠΌΠΈΠ½ΠΈΠ°Ρ‚ΡŽΡ€Π°ΠΌΠΈ
  • 14 Flexbox слайдСра ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ
  • 15 Π Π°Π·ΠΌΡ‹Ρ‚ΠΈΠ΅ Π² Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΠΈ с Ρ„ΠΈΠ»ΡŒΡ‚Ρ€Π°ΠΌΠΈ SVG
  • 16 Анимированный слайдСр
  • 17 Π‘Π»Π°ΠΉΠ΄Π΅Ρ€ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ с ΠΏΠ°Ρ‚Ρ‚Π΅Ρ€Π½Π°ΠΌΠΈ SVG
  • 18 ΠŸΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ простого слоя
  • 19 ΠŸΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ Π½Π° чистом CSS
  • 20 ΠšΠ΅ΠΊΡΡ‹ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ CSS слайдСр
  • 21 Π­Ρ„Ρ„Π΅ΠΊΡ‚ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ слайдСра
  • 22 Π‘Π»Π°ΠΉΠ΄Π΅Ρ€ слайдСра
  • 23 Π‘Π»Π°ΠΉΠ΄Π΅Ρ€ Parallax New York
  • 24 Π’ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅Π΅ ΠΎΠΊΠ½ΠΎ слайдСра
  • 25 Π‘Π»Π°ΠΉΠ΄Π΅Ρ€ с эффСктом ряби
  • 26 Π‘Π»Π°ΠΉΠ΄Π΅Ρ€ с ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ просмотром изобраТСния
  • 27 ΠŸΠΎΠ»Π·ΡƒΠ½ΠΊΠΈ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Ρ‹

ΠžΡ‡Π΅Π½ΡŒ ΠΈΠ½Ρ‚ΡƒΠΈΡ‚ΠΈΠ²Π½ΠΎ понятный слайдСр Π² HTML ΠΈ CSS, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ с Π²ΠΎΠ·ΡŒΠΌΠΈΡ‚Π΅ ΡΠ΅Ρ€ΠΈΡŽ ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡Π΅ΠΊ Π½Π° свой сайт ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠ΅Ρ€Π΅Π΄Π°ΡŽΡ‚ΡΡ ΠΎΡ‚ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΊ Π΄Ρ€ΡƒΠ³ΠΎΠΌΡƒ с Π²Π΅Π»ΠΈΠΊΠΎΠ»Π΅ΠΏΠ½ΠΎΠΉ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠ΅ΠΉ. ИмСнно анимация ΠΈ Ρ„ΠΎΠ½ΠΎΠ²Ρ‹ΠΉ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ ΠΏΡ€ΠΈΠ΄Π°ΡŽΡ‚ этот Ρ‚ΠΎΠ½ΠΊΠΈΠΉ ΡˆΡ‚Ρ€ΠΈΡ… этому HTML- ΠΈ CSS-ΠΊΠΎΠ΄Ρƒ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Ρ‚Π°ΠΊΠΆΠ΅ выдСляСтся нСбольшим количСством JavaScript. Π­Π»Π΅Π³Π°Π½Ρ‚Π½Ρ‹ΠΉ β€” Ρ‚Π°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ ΠΎΠΏΠΈΡΠ°Ρ‚ΡŒ этот качСствСнный слайдСр.

ΠŸΠΎΠ΄ΠΏΠΈΡˆΠΈΡ‚Π΅ΡΡŒ Π½Π° наш Youtube-ΠΊΠ°Π½Π°Π»

Π­Ρ‚ΠΎΡ‚ слайдСр ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΎΠ½Π½ΠΎΠΉ ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠΈ Ρ‚Π°ΠΊΠΆΠ΅ прСдставляСт собой ΠΊΠΎΠ΄ Π² HTML, CSS ΠΈ JavaScript. Π­Ρ‚ΠΎ скорСС ΠΎ сСрия ΠΊΠ°Ρ€Ρ‚ это Π½Π΅ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Π΅Ρ‚ особого внимания ΠΊ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, хотя Π΅Π΅ простота β€” Π΅Π΅ Π²Π΅Π»ΠΈΡ‡Π°ΠΉΡˆΠ°Ρ Ρ†Π΅Π½Π½ΠΎΡΡ‚ΡŒ. Π•Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ слайдСр ΠΈΠ· этого списка.

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

ΠžΡ‚Π»ΠΈΡ‡Π½ΠΎΠ΅ качСство этого слайдСра Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ поставляСтся Π±Π΅Π· JavaScript, поэтому Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠΎΠ΄ CSS ΠΈ HTML Π½Π° своСм Π²Π΅Π±-сайтС, Ρ‡Ρ‚ΠΎΠ±Ρ‹ провСсти Π΅Ρ‰Π΅ ΠΎΠ΄Π½ΠΎ сравнСниС. Π’Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ‡Π΅Ρ€Π½Ρ‹ΠΉ ящик Π²Π½ΠΈΠ·Ρƒ изобраТСния, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠ΄Π²ΠΈΠ½ΡƒΡ‚ΡŒ Π΅Π³ΠΎ с ΠΎΠ΄Π½ΠΎΠΉ стороны Π½Π° Π΄Ρ€ΡƒΠ³ΡƒΡŽ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ сравнСниС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ. НС Ρ‚Π°ΠΊΠΎΠΉ ΠΈΠ½Ρ‚ΡƒΠΈΡ‚ΠΈΠ²Π½ΠΎ понятный, ΠΊΠ°ΠΊ ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰ΠΈΠΉ, Π½ΠΎ ΠΎΡ‡Π΅Π½ΡŒ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ΠΉ Π±Π΅Π· JavaScript.

Π‘Π°ΠΌΠΎ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ Π³ΠΎΠ²ΠΎΡ€ΠΈΡ‚ само Π·Π° сСбя, слайдСр ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, позволяСт ΡΡ€Π°Π²Π½ΠΈΠ²Π°Ρ‚ΡŒ Π΄ΠΎ Ρ‚Ρ€Π΅Ρ… ΠΎΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ

. ΠŸΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½Ρ‹ΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€: ΠΎΠ΄ΠΈΠ½ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ Π³ΠΎΠ»ΠΎΠ²Ρƒ Π² ΠΏΡ€ΠΎΡ„ΠΈΠ»ΡŒ, Π΄Ρ€ΡƒΠ³ΠΎΠΉ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ ΠΌΡ‹ΡˆΡ†Ρ‹, Π° Π΄Ρ€ΡƒΠ³ΠΎΠΉ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ кости. Для своСй Ρ€Π°Π±ΠΎΡ‚Ρ‹ ΠΎΠ½ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ HTML, CSS ΠΈ JavaScript.

Π•Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ ΡΡ€Π°Π²Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ слайдСр ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ с большой ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ с ΠΎΠ΄Π½ΠΎΠΉ стороны Π½Π° Π΄Ρ€ΡƒΠ³ΡƒΡŽ. ΠœΠΈΠ½ΠΈΠΌΠ°Π»ΠΈΡΡ‚ΠΈΡ‡Π½Ρ‹ΠΉ, с нСбольшим количСством JavaScript ΠΈ ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΌ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹ΠΌ ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅ΠΌ. Одно ΠΈΠ· самых ярких для сравнСния ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ.

Este слайдСр ΡΡ€Π°Π²Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ изобраТСния Он создан Envato Tuts ΠΈ отличаСтся Ρ‚Π΅ΠΌ, Ρ‡Ρ‚ΠΎ слайдСр располоТСн ΠΏΠΎ Π΄ΠΈΠ°Π³ΠΎΠ½Π°Π»ΠΈ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹Π·Ρ‹Π²Π°Ρ‚ΡŒ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ Ρ‚ΠΈΠΏΡ‹ ΠΎΡ‰ΡƒΡ‰Π΅Π½ΠΈΠΉ ΠΏΡ€ΠΈ сравнСнии Π΄Π²ΡƒΡ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ. Он ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ JavaScript, CSS ΠΈ HTML, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π±Ρ‹Ρ‚ΡŒ высококачСствСнным ΡΡ€Π°Π²Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ слайдСром.

ΠœΡ‹ дошли Π΄ΠΎ части полноэкранных слайдСров, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΡ‚ΡŒΡΡ с ΠŸΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ Transition характСризуСтся ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΎΠΌ

осущСствляСтся анимация большого эффСкта. Если Π²Ρ‹ ΠΏΠ»Π°Π½ΠΈΡ€ΡƒΠ΅Ρ‚Π΅ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ изобраТСния Π² полноэкранном Ρ€Π΅ΠΆΠΈΠΌΠ΅ ΠΈ ΠΏΡ€ΠΈ этом Π΄Π΅Π»Π°Π΅Ρ‚Π΅ это ΠΎΡ‡Π΅Π½ΡŒ остороТно, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ JavaScript, CSS ΠΈ HTML.

Для Π»ΡŽΠ±ΠΈΡ‚Π΅Π»ΠΈ эффСкта параллакса этот слайдСр с Swiper.js, HTML ΠΈ CSS. Помимо возмоТности ΡΠΊΠΎΠ»ΡŒΠ·ΠΈΡ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π΄Π²ΡƒΡ… ΠΊΠ½ΠΎΠΏΠΎΠΊ, располоТСнных с ΠΊΠ°ΠΆΠ΄ΠΎΠΉ стороны, Π½Π° ΠΏΡ€Π°Π²ΠΎΠΉ сторонС Ρƒ нас Π΅ΡΡ‚ΡŒ Π² ΠΌΠΈΠ½ΠΈΠ°Ρ‚ΡŽΡ€Π΅ всС изобраТСния ΠΏΠΎΠ»Π½ΠΎΠΉ карусСли. Π”Ρ€ΡƒΠ³ΠΎΠΉ ΠΈ качСствСнный Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹ΠΉ слайдСр, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π½Π΅ оставит Ρ€Π°Π²Π½ΠΎΠ΄ΡƒΡˆΠ½Ρ‹ΠΌ Π½ΠΈ ΠΎΠ΄Π½ΠΎΠ³ΠΎ посСтитСля нашСго сайта.

Адаптивный слайдСр, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΡΠ»Π΅Π΄ΠΈΡ‚ΡŒ Π·Π° двиТСниями указатСля ΠΌΡ‹ΡˆΡŒ. Он способСн Π²Ρ‹Π·Π²Π°Ρ‚ΡŒ большой эффСкт пСрспСктивы, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠΎΠΆΠ΅Ρ‚ Π²Ρ‹Π·Π²Π°Ρ‚ΡŒ Ρƒ посСтитСля ΡΠΌΠ΅ΡˆΠ°Π½Π½Ρ‹Π΅ чувства. Если Π²Ρ‹ Π·Π½Π°Π΅Ρ‚Π΅, ΠΊΠ°ΠΊ Π΅Π³ΠΎ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΡ€ΠΈΠ΄Π°Ρ‚ΡŒ Π½Π°ΡˆΠ΅ΠΌΡƒ сайту ΠΎΡ€ΠΈΠ³ΠΈΠ½Π°Π»ΡŒΠ½Ρ‹ΠΉ ΠΈ Ρ‚ΠΎΠ½ΠΊΠΈΠΉ ΡˆΡ‚Ρ€ΠΈΡ…. Код JavaScript, CSS ΠΈ HTML Π½Π΅ ΠΏΡ€ΠΎΠΏΡƒΡ‰Π΅Π½.

ΠŸΠΎΠ»Π½ΠΎΡΠΊΡ€Π°Π½Π½Ρ‹ΠΉ слайдСр с ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ гСроя Π² HTML, CSS ΠΈ JavaScript. Π•ΡΡ‚ΡŒ эффСкт отскока Π² ΠΊΠ°ΠΆΠ΄ΠΎΠΉ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ это Π΄Π°Π΅Ρ‚ это, ΠΈ Π² Ρ†Π΅Π»ΠΎΠΌ ΠΌΡ‹ сталкиваСмся с качСствСнным полноэкранным слайдСром, ΠΊΠ°ΠΊ ΠΈ ΠΎΡΡ‚Π°Π»ΡŒΠ½Π°Ρ Ρ‡Π°ΡΡ‚ΡŒ списка.

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

ΠŸΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΈΠΌ ΠΊ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠ°ΠΌ Адаптивный CSS для ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройств ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎΠ΅ качСство, ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎΠ΅ этому. Π‘ΠΏΡ€Π°Π²Π° Ρƒ вас Π±ΡƒΠ΄Π΅Ρ‚ ряд ΠΌΠΈΠ½ΠΈΠ°Ρ‚ΡŽΡ€, ΠΏΡ€ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… начнСтся Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ ΠΏΠ°Π΄Π΅Π½ΠΈΠ΅ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ. ΠžΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΉ эффСкт, ΠΊΠΎΠ³Π΄Π° ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ CSS, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ слайдСр ΠΈΠ· Π»ΡƒΡ‡ΡˆΠΈΡ… ΠΈΠ· этого списка.

Π”Ρ€ΡƒΠ³ΠΎΠΉ Адаптивный слайдСр ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, созданный с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ JavaScript

ΠΈ Ρ‡Ρ‚ΠΎ Π±Ρ‹Ρ‚ΡŒ довольно элСгантным β€” Π±ΠΎΠ»Π΅Π΅ Ρ‡Π΅ΠΌ просто. ΠšΠΎΡ€ΠΎΡ‚ΠΊΠΎ, просто ΠΈ минималистично, Π½Π΅ Π±ΠΎΠ»Π΅Π΅ Ρ‚ΠΎΠ³ΠΎ. Π•ΠΌΡƒ Π΅ΡΡ‚ΡŒ мСсто Π² этом спискС слайдСров Flexbox.

ЭкспСримСнт, ΠΌΠΎΠ΄Π΅Π»ΠΈΡ€ΡƒΡŽΡ‰ΠΈΠΉ дСйствиС Ρ€Π°Π·ΠΌΡ‹Ρ‚ΠΈΠ΅ двиТСния ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ Ρ€Π°Π·, ΠΊΠΎΠ³Π΄Π° слайд Π°ΠΊΡ‚ΠΈΠ²ΠΈΡ€ΠΎΠ²Π°Π½. Он ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ Ρ„ΠΈΠ»ΡŒΡ‚Ρ€ размытия SVG ΠΏΠΎ Гауссу ΠΈ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΊΠ»ΡŽΡ‡ΠΈ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ CSS. Код, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹ΠΉ Π² JavaScript, ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½ ΠΈΡΠΊΠ»ΡŽΡ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ для Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° ΠΈ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ слайдСра.

Анимированный слайдСр ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹ΠΉ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ JavaScript, HTML ΠΈ CSS. Π£ нас Π΅ΡΡ‚ΡŒ стрСлки с ΠΏΡ€Π°Π²ΠΎΠΉ стороны, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ Π½Π°ΠΌ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒΡΡ ΠΏΠΎ изобраТСниям с изящной ΠΈ Π»Π°ΠΊΠΎΠ½ΠΈΡ‡Π½ΠΎΠΉ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠ΅ΠΉ. На ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΈΠ· слайдов достигаСтся ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΉ эффСкт, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰ΠΈΠΉ Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚ΡŒ сСбя. ΠžΡ‡Π΅Π½ΡŒ Π°ΠΊΡ‚ΡƒΠ°Π»ΡŒΠ½ΠΎ Π² Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ.

Π•Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Ρ‚Π΅Ρ… экспСримСнтов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΡ‹Ρ‚Π°ΡŽΡ‚ΡΡ

ΠΏΠ΅Ρ€Π΅Π½ΠΎΡΠΈΡ‚ΡŒ ΡˆΠ°Π±Π»ΠΎΠ½Ρ‹ svg Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ нСсколько ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ маски для слайдСра CSS. Π‘ΠΎΠ·Π΄Π°Π΅Ρ‚ ΠΏΠΎΡ€Π°Π·ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ эффСкт размытия с ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎΠΉ ΠΎΡ‚Π΄Π΅Π»ΠΊΠΎΠΉ. Π•Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Ρ‚Π΅Ρ… ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹Π·Ρ‹Π²Π°ΡŽΡ‚ Ρƒ посСтитСля нашСго сайта Π΄ΠΎΠ±Ρ€Ρ‹Π΅ чувства.

ΠŸΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ с ΠΎΠ΄Π½ΠΈΠΌ большС Ρ‡Π΅ΠΌ Π²Ρ‹Π΄Π°ΡŽΡ‰Π°ΡΡΡ анимация ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ этот Π²ΠΎΠ»Π½ΠΎΠ²ΠΎΠΉ эффСкт ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ Ρ€Π°Π·, ΠΊΠΎΠ³Π΄Π° ΠΌΡ‹ Π½Π°ΠΆΠΈΠΌΠ°Π΅ΠΌ Π½Π° Π·Π½Π°Ρ‡ΠΎΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠ΄Π²ΠΈΠ½ΡƒΡ‚ΡŒ Π½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅. Π’Ρ‹ΠΏΠΎΠ»Π½Π΅Π½Π½Ρ‹ΠΉ Π² HTML, CSS ΠΈ JavaScript, ΠΎΠ½ становится Π΅Ρ‰Π΅ ΠΎΠ΄Π½ΠΈΠΌ слайдСром ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ.

Π•Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· ΠΏΡ€ΠΎΡΡ‚Π΅ΠΉΡˆΠΈΡ… слайдСров β€” чистый CSS. Одно ΠΈΠ· Π΅Π³ΠΎ прСимущСств β€” ΠΏΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Π²Π½ΠΈΠ·Ρƒ слСва ряд Ρ‚ΠΎΡ‡Π΅ΠΊ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π±ΡƒΠ΄ΡƒΡ‚ ΡΠ»ΡƒΠΆΠΈΡ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌΠΈ для доступа ΠΊ ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡƒ ΠΈΠ· ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π±ΡƒΠ΄ΡƒΡ‚ ΠΏΡ€ΠΎΡ…ΠΎΠ΄ΠΈΡ‚ΡŒ ΠΏΠ΅Ρ€Π΅Π΄ Π½Π°ΠΌΠΈ Π±Π΅Π· ΠΊΠ°ΠΊΠΎΠΉ-Π»ΠΈΠ±ΠΎ ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎΠΉ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ.

El самый сладкий слайдСр Π² спискС ΠΈ Ρ‡Ρ‚ΠΎ это Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π² CSS ΠΈ HTML. Π­Ρ‚ΠΎ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· самых особСнных блюд ΠΈΠ· всСго списка, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ справа прСдставлСны Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹ кСксов. НаТмитС Π½Π° ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Π½ΠΈΡ…, ΠΈ появится кСкс с прСкрасной Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠ΅ΠΉ, которая заканчиваСтся Π²Π΅Π»ΠΈΠΊΠΎΠ»Π΅ΠΏΠ½Ρ‹ΠΌ эффСктом отскока. Π‘Π΅Π· сомнСния, ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Π»ΡƒΡ‡ΡˆΠΈΡ….

Один ΠΈΠ· самых элСгантных слайдСров Π² Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΈ ΠΊΠ°ΠΊΠΎΠΉ удаСтся ΠΏΠΎΡ€Π°Π·ΠΈΡ‚ΡŒ нас ΠΏΡ€ΠΈ ΠΏΠ΅Ρ€Π²ΠΎΠΌ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ. Π‘ ΠΏΠ΅Ρ€Π²ΠΎΠ³ΠΎ ΠΌΠΎΠΌΠ΅Π½Ρ‚Π° появлСния Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ Π΅Π΅ ΠΊΠΎΠ΄ HTML, CSS ΠΈ JavaScript удивляСт. Π•Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Π»ΡƒΡ‡ΡˆΠΈΡ… элСмСнтов стиля ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΠΈΠ·ΠΌΠ°.

Un слайдСр ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ простой класс добавлСния ΠΈ ΠΎΠ½ характСризуСтся ΠΎΡ‡Π΅Π½ΡŒ ΠΏΠ»Π°Π²Π½ΠΎΠΉ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠ΅ΠΉ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΡ‚Π°Ρ‚ΡŒ ΠΎΠ΄Π½ΠΈΠΌ ΠΈΠ· Ρ„Π°Π²ΠΎΡ€ΠΈΡ‚ΠΎΠ² Π² этом спискС. Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚ΡŒΡΡ Π² мобильной вСрсии Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π°, это ΠΎΠ΄Π½ΠΎ ΠΈΠ· Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹Ρ… условий. ΠžΡ‚Π»ΠΈΡ‡Π½ΠΎ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎ.

Одно ΠΈΠ· самых Π±ΠΎΠ»ΡŒΡˆΠΈΡ… прСимущСств этого слайдСр параллакса Π² CSS Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ. Π­Ρ‚ΠΎ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΡˆΡ€ΠΈΡ„Ρ‚, Π΅Π³ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€, Ρ†Π²Π΅Ρ‚ ΠΈ ΡΠΊΠΎΡ€ΠΎΡΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ. ΠŸΠ΅Ρ€Π²Π°Ρ Π±ΡƒΠΊΠ²Π° ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Π³ΠΎΡ€ΠΎΠ΄Π° Π² Π½ΠΎΠ²ΠΎΠΉ строкС массива JavaScript появляСтся Π½Π° Π½ΠΎΠ²ΠΎΠΌ слайдС. Π•Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Ρ†Π΅Π½Π½Ρ‹Ρ… слайдСров этого поста.

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

Un полноэкранный слайдСр с высоким эффСктом с плоскими Ρ†Π²Π΅Ρ‚Π°ΠΌΠΈ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ вСсь Π΅Π³ΠΎ сок. JavaScript, HTML ΠΈ CSS для Π΄Ρ€ΡƒΠ³ΠΎΠ³ΠΎ слайдСра с ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ эффСктом.

SLIDER GSAP с ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ просмотром Π±ΡƒΠ΄ΡƒΡ‰ΠΈΡ… слайдов ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π±ΡƒΠ΄Π΅Ρ‚ прСдставлСн ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŽ. ИдСально ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для модСлирования Π½Π° ΠΌΠΎΠ΄Π½ΠΎΠΌ ΠΈΠ»ΠΈ дизайнСрском сайтС.

ΠœΡ‹ Π·Π°ΠΊΠ°Π½Ρ‡ΠΈΠ²Π°Π΅ΠΌ список качСствСнный слайдСр с ΠΏΠΎΠΌΠΏΠ΅Π·Π½Ρ‹ΠΌ эффСктом

ΠΈ ΡΠ΅Ρ€ΠΈΡŽ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΡΠ΄Π΅Π»Π°ΡŽΡ‚ наш сайт особСнным. Π­Ρ„Ρ„Π΅ΠΊΡ‚ параллакса ΠΌΠΎΠΆΠ½ΠΎ Π°ΠΊΡ‚ΠΈΠ²ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ.

НС пропуститС это Π΄Ρ€ΡƒΠ³ΠΎΠΉ список ΠΊΠΎΠ΄ΠΎΠ² CSS для ΠΊΠ½ΠΎΠΏΠΎΠΊ.


Как ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ слайдСр с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ animation ΠΈ keyframes? HTML ΠΈ CSS

Вопрос Π·Π°Π΄Π°Π½

Π˜Π·ΠΌΠ΅Π½Ρ‘Π½ 1 Π³ΠΎΠ΄ 8 мСсяцСв Π½Π°Π·Π°Π΄

ΠŸΡ€ΠΎΡΠΌΠΎΡ‚Ρ€Π΅Π½ 304 Ρ€Π°Π·Π°

Π‘Π»Π°ΠΉΠ΄Π΅Ρ€ ΠΈΠ· 8 ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ. НуТно, Ρ‡Ρ‚ΠΎΠ± автоматичСски каТдая ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° 3 сСкунды стояла Π½Π° мСстС ΠΈ Π»ΠΈΡΡ‚Π°Π»Π°ΡΡŒ Π² Ρ‚Π΅Ρ‡Π΅Π½ΠΈΠ΅ 2 сСкунд. И Ρ‚Π°ΠΊ 8 Ρ€Π°Π·. Π—Π΄Π΅ΡΡŒ Π½ΡƒΠΆΠ½ΠΎ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ ΠΏΡ€ΠΎΠΏΠΈΡΠ°Ρ‚ΡŒ ΠΊΠΎΠ΄
@keyframes slider, Π½ΠΎ Π½Π΅ знаю ΠΊΠ°ΠΊ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ.

<div>
    <figure>
        <img src="static/1.jpg">
        <img src="static/2.jpg">
        <img src="static/3.jpg">
        <img src="static/4.jpg">
        <img src="static/5.jpg">
        <img src="static/6.jpg">
        <img src="static/7.jpg">
        <img src="static/8.jpg">
    </figure>
</div>
#slider{
    overflow: hidden;
    width: 800px;
    height: 500px;
    border: 2px solid rebeccapurple;
    margin: 0 auto;
}
#slider figure{
    position: relative;
    width: 800%;
    margin: 0;
    left: 0;
    animation: 40s slider infinite;
}
#slider figure img{
    float: left;
    width: 20%;
}
@keyframes slider{
    0% { left: 0; }
    20% { left: 0; }
    33.3% { left: -100%; }
    53.3% { left: -100%; }
    66. 6% { left: -200%; }
    86.6% { left: -200%; }
    66.6% { left: -300%; }
    79.9% { left: -300%; }
    100% { left: 0; }
}
  • html
  • css
  • анимация
  • слайдСр

ΠŸΠΎΠ»ΡƒΡ‡ΠΈΠ»ΠΎΡΡŒ. 3 сСкунды ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° стоит Π½Π° мСстС, Π·Π° 2 сСкунды пСрСлистываСтся.

3 / 40 x 100 = 7.5

2 / 40 x 100 = 5

0% + 7.5 + 5 + 7.5 + 5 + 7.5 + 5 + 7.5 + 5 + 7.5 + 5 + 7.5 + 5 + 7.5 + 5 + 7.5 + 5 = 100%

ΠŸΠΎΠΏΡ€Π°Π²Π»Π΅Π½Ρ‹ Π΄Π²Π° сСлСктора CSS Π½Π° ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π΅:

#slider figure img
{
    float: left;
    width: 800px;
}
@keyframes slider
{
    0% { left: 0; }
    7.5% { left: 0; }
    12.5% { left: -100%; }
    20% { left: -100%; }
    25% { left: -200%; }
    32.5% { left: -200%; }
    37.5% { left: -300%; }
    45% { left: -300%; }
    50% { left: -400%; }
    57.5% { left: -400%; }
    62.5% { left: -500%; }
    70% { left: -500%; }
    75% { left: -600%; }
    82.5% { left: -600%; }
    87.5% { left: -700%; }
    95% { left: -700%; }
    100% { left: 0; }
}

1

Π—Π°Ρ€Π΅Π³ΠΈΡΡ‚Ρ€ΠΈΡ€ΡƒΠΉΡ‚Π΅ΡΡŒ ΠΈΠ»ΠΈ Π²ΠΎΠΉΠ΄ΠΈΡ‚Π΅

РСгистрация Ρ‡Π΅Ρ€Π΅Π· Google

РСгистрация Ρ‡Π΅Ρ€Π΅Π· Facebook

РСгистрация Ρ‡Π΅Ρ€Π΅Π· ΠΏΠΎΡ‡Ρ‚Ρƒ

ΠžΡ‚ΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ Π±Π΅Π· рСгистрации

ΠŸΠΎΡ‡Ρ‚Π°

НСобходима, Π½ΠΎ Π½ΠΈΠΊΠΎΠΌΡƒ Π½Π΅ показываСтся

ΠžΡ‚ΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ Π±Π΅Π· рСгистрации

ΠŸΠΎΡ‡Ρ‚Π°

НСобходима, Π½ΠΎ Π½ΠΈΠΊΠΎΠΌΡƒ Π½Π΅ показываСтся

НаТимая Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ Β«ΠžΡ‚ΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ ΠΎΡ‚Π²Π΅Ρ‚Β», Π²Ρ‹ ΡΠΎΠ³Π»Π°ΡˆΠ°Π΅Ρ‚Π΅ΡΡŒ с нашими ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΌ соглашСниСм, ΠΏΠΎΠ»ΠΈΡ‚ΠΈΠΊΠΎΠΉ ΠΊΠΎΠ½Ρ„ΠΈΠ΄Π΅Π½Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ ΠΈ ΠΏΠΎΠ»ΠΈΡ‚ΠΈΠΊΠΎΠΉ ΠΎ ΠΊΡƒΠΊΠΈ

β€” HTML: язык гипСртСкстовой Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ

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

ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ этот Π²ΠΈΠ΄ Π²ΠΈΠ΄ΠΆΠ΅Ρ‚Π° Π½Π΅Ρ‚ΠΎΡ‡Π΅Π½, Π΅Π³ΠΎ слСдуСт ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π² Ρ‚ΠΎΠΌ случаС, Ссли Ρ‚ΠΎΡ‡Π½ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ элСмСнта управлСния Π½Π΅ Π²Π°ΠΆΠ½ΠΎ.

Если Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ Ρ‚ΠΈΠΏ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½ , ΠΎΠ½ отступит ΠΈ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π΅Π³ΠΎ ΠΊΠ°ΠΊ Π²Π²ΠΎΠ΄ тСкста .

ΠŸΡ€ΠΎΠ²Π΅Ρ€ΠΊΠ°

ΠŸΡ€ΠΎΠ²Π΅Ρ€ΠΊΠ° шаблона нСдоступна; ΠΎΠ΄Π½Π°ΠΊΠΎ Π²Ρ‹ΠΏΠΎΠ»Π½ΡΡŽΡ‚ΡΡ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ Ρ„ΠΎΡ€ΠΌΡ‹ автоматичСской ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΊΠΈ:

  • Если Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ установлСно Π½Π° Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Π°Π½ΠΎ Π² Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ число с ΠΏΠ»Π°Π²Π°ΡŽΡ‰Π΅ΠΉ запятой, ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΊΠ° Π·Π°Π²Π΅Ρ€ΡˆΠ°Π΅Ρ‚ΡΡ ошибкой, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ Π²Π²ΠΎΠ΄ страдаСт ΠΎΡ‚ Π½Π΅ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎΠ³ΠΎ Π²Π²ΠΎΠ΄Π°.
  • Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ мСньшС ΠΌΠΈΠ½ . По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ 0.
  • Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΡ€Π΅Π²Ρ‹ΡˆΠ°Ρ‚ΡŒ max . По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ 100.
  • Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΊΡ€Π°Ρ‚Π½ΠΎ ΡˆΠ°Π³Ρƒ . По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ 1.

Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅

Атрибут Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ содСрТит строку, ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‰ΡƒΡŽ строковоС прСдставлСниС Π²Ρ‹Π±Ρ€Π°Π½Π½ΠΎΠ³ΠΎ числа. Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ Π±Ρ‹Π²Π°Π΅Ρ‚ пустой строкой ( "" ). Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ находится Π½Π° ΠΏΠΎΠ»ΠΏΡƒΡ‚ΠΈ ΠΌΠ΅ΠΆΠ΄Ρƒ Π·Π°Π΄Π°Π½Π½Ρ‹ΠΌ ΠΌΠΈΠ½ΠΈΠΌΡƒΠΌΠΎΠΌ ΠΈ максимумом, Ссли Ρ‚ΠΎΠ»ΡŒΠΊΠΎ максимум Π½Π΅ мСньшС ΠΌΠΈΠ½ΠΈΠΌΡƒΠΌΠ°, ΠΈ Π² этом случаС ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ устанавливаСтся Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ 9.0003 ΠΌΠΈΠ½ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚. Алгоритм опрСдСлСния значСния ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ:

 defaultValue =
  диапазонЭлСм.макс < диапазонЭлСм.мин
    ? Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π­Π»Π΅ΠΌ.ΠΌΠΈΠ½.
    : диапазонЭлСм.мин + (диапазонЭлСм.макс - диапазонЭлСм.мин) / 2;
 

ΠŸΡ€ΠΈ ΠΏΠΎΠΏΡ‹Ρ‚ΠΊΠ΅ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π½ΠΈΠΆΠ΅ минимального, ΠΎΠ½ΠΎ устанавливаСтся Π½Π° минимальноС. Π’ΠΎΡ‡Π½ΠΎ Ρ‚Π°ΠΊ ΠΆΠ΅ ΠΏΠΎΠΏΡ‹Ρ‚ΠΊΠ° ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π²Ρ‹ΡˆΠ΅ максимального ΠΏΡ€ΠΈΠ²ΠΎΠ΄ΠΈΡ‚ ΠΊ Ρ‚ΠΎΠΌΡƒ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ установлСно Π½Π° максимальноС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅.

Π’ Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΊ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π°ΠΌ, ΠΎΠ±Ρ‰ΠΈΠΌ для всСх элСмСнта, Π²Ρ…ΠΎΠ΄Ρ‹ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° ΠΏΡ€Π΅Π΄Π»Π°Π³Π°ΡŽΡ‚ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹.

list

Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° list являСтся id элСмСнта , располоТСнного Π² Ρ‚ΠΎΠΌ ΠΆΠ΅ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π΅. прСдоставляСт список ΠΏΡ€Π΅Π΄ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Ρ… Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€Π΅Π΄Π»ΠΎΠΆΠΈΡ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŽ для этого Π²Π²ΠΎΠ΄Π°. Π›ΡŽΠ±Ρ‹Π΅ значСния Π² спискС, нСсовмСстимыС с Ρ‚ΠΈΠΏΠΎΠΌ , Π½Π΅ Π²ΠΊΠ»ΡŽΡ‡Π°ΡŽΡ‚ΡΡ Π² ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅ΠΌΡ‹Π΅ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹. ΠŸΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²Π»Π΅Π½Π½Ρ‹Π΅ значСния ΡΠ²Π»ΡΡŽΡ‚ΡΡ рСкомСндациями, Π° Π½Π΅ трСбованиями: ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ ΠΈΠ· этого ΠΏΡ€Π΅Π΄ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠ³ΠΎ списка ΠΈΠ»ΠΈ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ Π΄Ρ€ΡƒΠ³ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅.

Π‘ΠΌ. Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ Π³Π°Π»ΠΎΡ‡Π΅ΠΊ Π½ΠΈΠΆΠ΅ для ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ Π² Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π΅ ΠΎΠ±ΠΎΠ·Π½Π°Ρ‡Π°ΡŽΡ‚ΡΡ Π² ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅ΠΌΡ‹Ρ… Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ….

макс.

НаибольшСС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π² Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π΅ допустимых Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ. Если Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ , Π²Π²Π΅Π΄Π΅Π½Π½ΠΎΠ΅ Π² элСмСнт, ΠΏΡ€Π΅Π²Ρ‹ΡˆΠ°Π΅Ρ‚ это Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅, элСмСнт Π½Π΅ ΠΏΡ€ΠΎΡ…ΠΎΠ΄ΠΈΡ‚ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΊΡƒ ограничСния. Если Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° max Π½Π΅ являСтся числом, Ρ‚ΠΎ элСмСнт Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ‚ максимального значСния.

Π­Ρ‚ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ большС ΠΈΠ»ΠΈ Ρ€Π°Π²Π½ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΡŽ ΠΌΠΈΠ½ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚. Π‘ΠΌ. Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ HTML max .

ΠΌΠΈΠ½.

НаимСньшСС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π² Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π΅ допустимых Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ. Если Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ элСмСнта мСньшС этого значСния, элСмСнт Π½Π΅ ΠΏΡ€ΠΎΡ…ΠΎΠ΄ΠΈΡ‚ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΊΡƒ ограничСния. Если для min ΡƒΠΊΠ°Π·Π°Π½ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Π½Π΅ являСтся допустимым числом, Π²Ρ…ΠΎΠ΄Π½Ρ‹Π΅ Π΄Π°Π½Π½Ρ‹Π΅ Π½Π΅ ΠΈΠΌΠ΅ΡŽΡ‚ минимального значСния.

Π­Ρ‚ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ мСньшС ΠΈΠ»ΠΈ Ρ€Π°Π²Π½ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΡŽ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° max . Π‘ΠΌ. Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ HTML min .

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅: Если значСния min ΠΈ max Ρ€Π°Π²Π½Ρ‹ ΠΈΠ»ΠΈ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ max мСньшС значСния min , ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π½Π΅ смоТСт Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ с Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½ΠΎΠΌ.

step

Атрибут step β€” это число, ΡƒΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‰Π΅Π΅ ΡΡ‚Π΅ΠΏΠ΅Π½ΡŒ Π΄Π΅Ρ‚Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅. Π”Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ значСния, ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠ΅ ΡƒΠΊΠ°Π·Π°Π½Π½ΠΎΠΌΡƒ ΡˆΠ°Π³ΠΎΠ²ΠΎΠΌΡƒ ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π»Ρƒ ( ΠΌΠΈΠ½ , Ссли ΡƒΠΊΠ°Π·Π°Π½ΠΎ, Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π² ΠΏΡ€ΠΎΡ‚ΠΈΠ²Π½ΠΎΠΌ случаС ΠΈΠ»ΠΈ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰Π΅Π΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ, Ссли Π½ΠΈ ΠΎΠ΄Π½ΠΎ ΠΈΠ· Π½ΠΈΡ… Π½Π΅ ΡƒΠΊΠ°Π·Π°Π½ΠΎ).

Атрибут шага Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ установлСн Π½Π° любоС строковоС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ . Π­Ρ‚ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ шага ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π» шага Π½Π΅ подразумСваСтся, ΠΈ любоС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΎ Π² ΡƒΠΊΠ°Π·Π°Π½Π½ΠΎΠΌ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π΅ (Π·Π° ΠΈΡΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ΠΌ Π΄Ρ€ΡƒΠ³ΠΈΡ… ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½ΠΈΠΉ, Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ min ΠΈ max ). Π‘ΠΌ. Π¨Π°Π³ настройки для любого ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° значСния , Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ·Π½Π°Ρ‚ΡŒ, ΠΊΠ°ΠΊ это Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π² ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅ΠΌΡ‹Ρ… Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ….

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅: Когда Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅, Π²Π²Π΅Π΄Π΅Π½Π½ΠΎΠ΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΌ, Π½Π΅ соотвСтствуСт пошаговой ΠΊΠΎΠ½Ρ„ΠΈΠ³ΡƒΡ€Π°Ρ†ΠΈΠΈ, ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ Π°Π³Π΅Π½Ρ‚ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΎΠΊΡ€ΡƒΠ³Π»ΠΈΡ‚ΡŒ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π΄ΠΎ блиТайшСго допустимого значСния, прСдпочитая ΠΎΠΊΡ€ΡƒΠ³Π»ΡΡ‚ΡŒ числа Π² Π±ΠΎΠ»ΡŒΡˆΡƒΡŽ сторону, ΠΊΠΎΠ³Π΄Π° Π΅ΡΡ‚ΡŒ Π΄Π²Π° ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎ Π±Π»ΠΈΠ·ΠΊΠΈΡ… Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Π°.

Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ шага ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ для Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° Π²Ρ…ΠΎΠ΄ΠΎΠ² Ρ€Π°Π²Π½ΠΎ 1, Ρ‡Ρ‚ΠΎ позволяСт Π²Π²ΠΎΠ΄ΠΈΡ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ†Π΅Π»Ρ‹Π΅ числа, , Ссли Π½Π΅ , основаниС шага Π½Π΅ являСтся Ρ†Π΅Π»Ρ‹ΠΌ числом; Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Ссли Π²Ρ‹ установитС min Π½Π° -10 ΠΈ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π½Π° 1,5, Ρ‚ΠΎ шаг , Ρ€Π°Π²Π½Ρ‹ΠΉ 1, ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‚Π°ΠΊΠΈΠ΅ значСния, ΠΊΠ°ΠΊ 1,5, 2,5, 3,5,… Π² ΠΏΠΎΠ»ΠΎΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠΌ Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠΈ ΠΈ -0,5, -1,5, -2,5,… Π² ΠΎΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠΌ Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠΈ. Π‘ΠΌ. Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ шага HTML .

orient

Аналогично нСстандартному свойству CSS -moz-orient, Π²Π»ΠΈΡΡŽΡ‰Π΅ΠΌΡƒ Π½Π° ΠΈ элСмСнтов, Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ ориСнтация опрСдСляСт ΠΎΡ€ΠΈΠ΅Π½Ρ‚Π°Ρ†ΠΈΡŽ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠ° Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π°. ЗначСния Π²ΠΊΠ»ΡŽΡ‡Π°ΡŽΡ‚ ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ , Ρ‡Ρ‚ΠΎ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½ отобраТаСтся ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ, ΠΈ ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ , Π³Π΄Π΅ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½ отобраТаСтся ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ.

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅: Π‘Π»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ Π²Π²ΠΎΠ΄Π° Π½Π΅ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ ΠΊ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Ρƒ Π²Π²ΠΎΠ΄Π°: accept , alt , checked , dirname , formaction , formenctype , formmethod , formnovalidate , formtarget , height , maxlength , minlength , нСсколько , шаблон , Π·Π°ΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒ , Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‡Ρ‚Π΅Π½ΠΈΠ΅ , трСбуСтся , Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΈ источник . Π›ΡŽΠ±ΠΎΠΉ ΠΈΠ· этих Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ², Ссли ΠΎΠ½ Π²ΠΊΠ»ΡŽΡ‡Π΅Π½, Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΠ³Π½ΠΎΡ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ.

Π₯отя Ρ‚ΠΈΠΏ Π½ΠΎΠΌΠ΅Ρ€Π° позволяСт ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ Π²Π²ΠΎΠ΄ΠΈΡ‚ΡŒ число с Π½Π΅ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌΠΈ ограничСниями, Π·Π°ΡΡ‚Π°Π²Π»ΡΡŽΡ‰ΠΈΠΌΠΈ ΠΈΡ… Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π±Ρ‹Ρ‚ΡŒ ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΌ ΠΈ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΌ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ, ΠΎΠ½ Ρ‚Ρ€Π΅Π±ΡƒΠ΅Ρ‚, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ΠΈ Π²Π²ΠΎΠ΄ΠΈΠ»ΠΈ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅. 9Π”ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½ 0003 Π’ΠΈΠΏ Π²Π²ΠΎΠ΄Π° позволяСт Π·Π°ΠΏΡ€Π°ΡˆΠΈΠ²Π°Ρ‚ΡŒ Ρƒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π² Ρ‚Π΅Ρ… случаях, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŽ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Π΄Π°ΠΆΠ΅ всС Ρ€Π°Π²Π½ΠΎ β€” ΠΈΠ»ΠΈ ΠΎΠ½ Π½Π΅ Π·Π½Π°Π΅Ρ‚ β€” ΠΊΠ°ΠΊΠΎΠ΅ ΠΈΠΌΠ΅Π½Π½ΠΎ Π²Ρ‹Π±Ρ€Π°Π½Π½ΠΎΠ΅ числовоС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅.

НСсколько ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² ситуаций, Π² ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ Π²Ρ…ΠΎΠ΄Ρ‹ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π°:

  • Π­Π»Π΅ΠΌΠ΅Π½Ρ‚Ρ‹ управлСния Π·Π²ΡƒΠΊΠΎΠΌ, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ Π³Ρ€ΠΎΠΌΠΊΠΎΡΡ‚ΡŒ ΠΈ баланс ΠΈΠ»ΠΈ элСмСнты управлСния Ρ„ΠΈΠ»ΡŒΡ‚Ρ€Π°ΠΌΠΈ.
  • Π­Π»Π΅ΠΌΠ΅Π½Ρ‚Ρ‹ управлСния ΠΊΠΎΠ½Ρ„ΠΈΠ³ΡƒΡ€Π°Ρ†ΠΈΠ΅ΠΉ Ρ†Π²Π΅Ρ‚Π°, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ Ρ†Π²Π΅Ρ‚ΠΎΠ²Ρ‹Π΅ ΠΊΠ°Π½Π°Π»Ρ‹, ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΡΡ‚ΡŒ, ΡΡ€ΠΊΠΎΡΡ‚ΡŒ ΠΈ Ρ‚. Π΄.
  • Π­Π»Π΅ΠΌΠ΅Π½Ρ‚Ρ‹ управлСния ΠΊΠΎΠ½Ρ„ΠΈΠ³ΡƒΡ€Π°Ρ†ΠΈΠ΅ΠΉ ΠΈΠ³Ρ€Ρ‹, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ ΡΠ»ΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ, расстояниС видимости, Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΌΠΈΡ€Π° ΠΈ Ρ‚. Π΄.
  • Π”Π»ΠΈΠ½Π° пароля для ΠΏΠ°Ρ€ΠΎΠ»Π΅ΠΉ, сгСнСрированных ΠΌΠ΅Π½Π΅Π΄ΠΆΠ΅Ρ€ΠΎΠΌ ΠΏΠ°Ρ€ΠΎΠ»Π΅ΠΉ.

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

Π£ΠΊΠ°Π·Π°Π½ΠΈΠ΅ ΠΌΠΈΠ½ΠΈΠΌΡƒΠΌΠ° ΠΈ максимума

По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ минимальноС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Ρ€Π°Π²Π½ΠΎ 0, Π° максимальноС β€” 100. Если это Π½Π΅ Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π»Π΅Π³ΠΊΠΎ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹, ΠΈΠ·ΠΌΠ΅Π½ΠΈΠ² значСния ΠΌΠΈΠ½ ΠΈ/ΠΈΠ»ΠΈ макс Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ². Π­Ρ‚ΠΎ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ Π»ΡŽΠ±Ρ‹Π΅ значСния с ΠΏΠ»Π°Π²Π°ΡŽΡ‰Π΅ΠΉ запятой.

НапримСр, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π·Π°ΠΏΡ€ΠΎΡΠΈΡ‚ΡŒ Ρƒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΎΡ‚ -10 Π΄ΠΎ 10, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ:

 
 

Настройка стСпСни Π΄Π΅Ρ‚Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ значСния

По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ ΡΡ‚Π΅ΠΏΠ΅Π½ΡŒ Π΄Π΅Ρ‚Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ Ρ€Π°Π²Π½Π° 1, Ρ‡Ρ‚ΠΎ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ всСгда являСтся Ρ†Π΅Π»Ρ‹ΠΌ числом. Π§Ρ‚ΠΎΠ±Ρ‹ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΡΡ‚Π΅ΠΏΠ΅Π½ΡŒ Π΄Π΅Ρ‚Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ шага . НапримСр, Ссли Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π±Ρ‹Π»ΠΎ Π½Π° ΠΏΠΎΠ»ΠΏΡƒΡ‚ΠΈ ΠΌΠ΅ΠΆΠ΄Ρƒ 5 ΠΈ 10, Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ 9.0003 шаг ΠΎΡ‚ Π΄ΠΎ 0,5:

Установка Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° шага
 
 
Установка шага «любой»

Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΏΡ€ΠΈΠ½ΡΡ‚ΡŒ любоС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅, нСзависимо ΠΎΡ‚ Ρ‚ΠΎΠ³ΠΎ, Π΄ΠΎ ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… Π·Π½Π°ΠΊΠΎΠ² послС запятой ΠΎΠ½ΠΎ простираСтся, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ любоС для Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° шага :

HTML
 

Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅:

JavaScript
 константноС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ = document. querySelector("#value")
константный Π²Π²ΠΎΠ΄ = document.querySelector("#pi_input")
Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅.textContent = Π²Π²ΠΎΠ΄.Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅
input.addEventListener (Β«Π²Π²ΠΎΠ΄Β», (событиС) => {
  Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅.textContent = событиС.Ρ†Π΅Π»ΡŒ.Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅
})
 

Π’ этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ ΠΌΠΎΠΆΠ΅Ρ‚ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ любоС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΎΡ‚ 0 Π΄ΠΎ Ο€ Π±Π΅Π· ΠΊΠ°ΠΊΠΈΡ…-Π»ΠΈΠ±ΠΎ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½ΠΈΠΉ Π½Π° Π΄Ρ€ΠΎΠ±Π½ΡƒΡŽ Ρ‡Π°ΡΡ‚ΡŒ Π²Ρ‹Π±Ρ€Π°Π½Π½ΠΎΠ³ΠΎ значСния. JavaScript ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ, ΠΊΠ°ΠΊ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ измСняСтся, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ взаимодСйствуСт с Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½ΠΎΠΌ.

Π”ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ Π΄Π΅Π»Π΅Π½ΠΈΠΉ

Π§Ρ‚ΠΎΠ±Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ дСлСния ΠΊ элСмСнту управлСния Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½ΠΎΠΌ, Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚Π΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ списка , присвоив Π΅ΠΌΡƒ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ элСмСнта , ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ опрСдСляСт ΡΠ΅Ρ€ΠΈΡŽ Π΄Π΅Π»Π΅Π½ΠΈΠΉ Π½Π° элСмСнтС управлСния. КаТдая Ρ‚ΠΎΡ‡ΠΊΠ° прСдставлСна ​​с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ элСмСнта со Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ , установлСнным Π² Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π°, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ Π΄ΠΎΠ»ΠΆΠ½Π° Π±Ρ‹Ρ‚ΡŒ нарисована ΠΌΠ΅Ρ‚ΠΊΠ°.

HTML
 
<список Π΄Π°Π½Π½Ρ‹Ρ…>
Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚

ИспользованиС ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈ Ρ‚ΠΎΠ³ΠΎ ΠΆΠ΅ списка Π΄Π°Π½Π½Ρ‹Ρ… для Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… элСмСнтов управлСния Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½ΠΎΠΌ

Π§Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·Π±Π΅ΠΆΠ°Ρ‚ΡŒ повторСния ΠΊΠΎΠ΄Π°, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ‚ΠΎΡ‚ ΠΆΠ΅ для Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… элСмСнтов ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΡ… Ρ‚ΠΈΠΏΠ°.

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅: Если Π²Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΎΡ‚ΠΎΠ±Ρ€Π°Π·ΠΈΡ‚ΡŒ ΠΌΠ΅Ρ‚ΠΊΠΈ, ΠΊΠ°ΠΊ Π² ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ Π½ΠΈΠΆΠ΅, Π²Π°ΠΌ потрСбуСтся список Π΄Π°Π½Π½Ρ‹Ρ… для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Π²Ρ…ΠΎΠ΄Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π°.

HTML
 

<список Π΄Π°Π½Π½Ρ‹Ρ…>
Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚

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

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠΌΠ΅Ρ‚ΠΈΡ‚ΡŒ дСлСния, Π·Π°Π΄Π°Π² элСмСнтам label Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹. Однако содСрТимоС ярлыка Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ CSS, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΡ‚ΠΎΠ±Ρ€Π°Π·ΠΈΡ‚ΡŒ ΠΌΠ΅Ρ‚ΠΊΠΈ ΠΈ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ ΠΈΡ… Ρ€Π°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΡ‚ΡŒ. Π’ΠΎΡ‚ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· способов ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ это.

HTML
 
<список Π΄Π°Π½Π½Ρ‹Ρ…>
CSS
 список Π΄Π°Π½Π½Ρ‹Ρ… {
  дисплСй: гибкий;
  flex-Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅: столбСц;
  Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ содСрТимого: ΠΏΡ€ΠΎΠ±Π΅Π» ΠΌΠ΅ΠΆΠ΄Ρƒ;
  Ρ€Π΅ΠΆΠΈΠΌ письма: Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ-lr;
  ΡˆΠΈΡ€ΠΈΠ½Π°: 200 пиксСлСй;
}
Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ {
  Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅: 0;
}
Π²Π²ΠΎΠ΄[Ρ‚ΠΈΠΏ="Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½"] {
  ΡˆΠΈΡ€ΠΈΠ½Π°: 200 пиксСлСй;
  ΠΌΠ°Ρ€ΠΆΠ°: 0;
}
 
Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ элСмСнтов управлСния Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΌ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½ΠΎΠΌ

По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‚ Π²Ρ…ΠΎΠ΄Π½Ρ‹Π΅ Π΄Π°Π½Π½Ρ‹Π΅ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° Π² Π²ΠΈΠ΄Π΅ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠΎΠ² с Ρ€ΡƒΡ‡ΠΊΠΎΠΉ, ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°Π΅ΠΌΠΎΠΉ Π²Π»Π΅Π²ΠΎ ΠΈ Π²ΠΏΡ€Π°Π²ΠΎ.

Π§Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ Ρ€ΡƒΡ‡ΠΊΠ° ΡΠΊΠΎΠ»ΡŒΠ·ΠΈΡ‚ Π²Π²Π΅Ρ€Ρ… ΠΈ Π²Π½ΠΈΠ·, установитС CSS внСшний Π²ΠΈΠ΄ свойство Π½Π° слайдСр-Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒ ΠΈ Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ нСстандартный Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ ориСнтация для Firefox.

ΠšΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΡŒ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π°

Рассмотрим этот ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΡŒ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π°:

 
 

Π­Ρ‚ΠΎΡ‚ элСмСнт управлСния являСтся Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹ΠΌ (ΠΏΠΎ ΠΊΡ€Π°ΠΉΠ½Π΅ΠΉ ΠΌΠ΅Ρ€Π΅, Π² Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²Π΅, Ссли Π½Π΅ Π²ΠΎ всСх основных Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ…; Π΄Ρ€ΡƒΠ³ΠΈΠ΅ ΠΌΠΎΠ³ΡƒΡ‚ ΠΎΡ‚Π»ΠΈΡ‡Π°Ρ‚ΡŒΡΡ).

ИспользованиС свойства внСшнСго Π²ΠΈΠ΄Π°

Бвойство внСшнСго Π²ΠΈΠ΄Π° ΠΈΠΌΠ΅Π΅Ρ‚ нСстандартноС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ slider-vertical , Ρ‡Ρ‚ΠΎ Π΄Π΅Π»Π°Π΅Ρ‚ слайдСры Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΌΠΈ.

ΠœΡ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ Ρ‚ΠΎΡ‚ ΠΆΠ΅ HTML, Ρ‡Ρ‚ΠΎ ΠΈ Π² ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰ΠΈΡ… ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°Ρ…:

 
 

ΠœΡ‹ ориСнтируСмся Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½Π° Π²Ρ…ΠΎΠ΄Π½Ρ‹Π΅ Π΄Π°Π½Π½Ρ‹Π΅ с Ρ‚ΠΈΠΏΠΎΠΌ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π°:

 input[type="range"] {
  внСшний Π²ΠΈΠ΄: слайдСр-Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒ;
}
 
ИспользованиС Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° ориСнтация

Волько Π² Firefox сущСствуСт нСстандартноС свойство ориСнтация .

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ Ρ‚ΠΎΡ‚ ΠΆΠ΅ HTML, Ρ‡Ρ‚ΠΎ ΠΈ Π² ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰ΠΈΡ… ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°Ρ…, ΠΌΡ‹ добавляСм Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ со Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ :

 
 
Ρ€Π΅ΠΆΠΈΠΌ письма: bt-lr

Бвойство Ρ€Π΅ΠΆΠΈΠΌ письма ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ Π½Π΅ слСдуСт ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для измСнСния направлСния тСкста Π² цСлях ΠΈΠ½Ρ‚Π΅Ρ€Π½Π°Ρ†ΠΈΠΎΠ½Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ ΠΈΠ»ΠΈ Π»ΠΎΠΊΠ°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ, Π½ΠΎ Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Ρ… эффСктов.

ΠœΡ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ Ρ‚ΠΎΡ‚ ΠΆΠ΅ HTML, Ρ‡Ρ‚ΠΎ ΠΈ Π² ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰ΠΈΡ… ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°Ρ…:

 
 

ΠœΡ‹ ориСнтируСмся Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½Π° Π²Ρ…ΠΎΠ΄Ρ‹ с Ρ‚ΠΈΠΏΠΎΠΌ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π°, измСняя Ρ€Π΅ΠΆΠΈΠΌ записи со значСния ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Π½Π° bt-lr ΠΈΠ»ΠΈ снизу Π²Π²Π΅Ρ€Ρ… ΠΈ слСва Π½Π°ΠΏΡ€Π°Π²ΠΎ:

 input[type="range"] {
  Ρ€Π΅ΠΆΠΈΠΌ письма: bt-lr;
}
 
Π‘ΠΎΠ±ΠΈΡ€Π°Π΅ΠΌ всС вмСстС

Π’Π°ΠΊ ΠΊΠ°ΠΊ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΈΠ· ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½Ρ‹Ρ… Π²Ρ‹ΡˆΠ΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π² Ρ€Π°Π·Π½Ρ‹Ρ… Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ…, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ ΠΈΡ… всС Π² ΠΎΠ΄ΠΈΠ½ ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π·Π°ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Π΅Π³ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π² Ρ€Π°Π·Π½Ρ‹Ρ… Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ…:

ΠœΡ‹ сохраняСм Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ ориСнтация со Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ для Firefox:

 
 

ΠœΡ‹ нацСливаСмся Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½Π° Π²Π²ΠΎΠ΄ s с Ρ‚ΠΈΠΏΠΎΠΌ ΠΈΠ· Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° ΠΈ ориСнтация , установлСнная Π½Π° Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ , ΠΈΠ·ΠΌΠ΅Π½ΠΈΠ² Ρ€Π΅ΠΆΠΈΠΌ записи со значСния ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Π½Π° bt- lr ΠΈΠ»ΠΈ снизу Π²Π²Π΅Ρ€Ρ… -свСрху ΠΈ слСва Π½Π°ΠΏΡ€Π°Π²ΠΎ, для вСрсий Edge Π΄ΠΎ Blink, ΠΈ Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ внСшний Π²ΠΈΠ΄ : slider-vertical , ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ поддСрТиваСтся Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ… Blink ΠΈ Webkit:

 input[type="range"][orient="vertical "] {
  Ρ€Π΅ΠΆΠΈΠΌ письма: bt-lr;
  внСшний Π²ΠΈΠ΄: слайдСр-Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒ;
}
 
Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π‘Ρ‚Ρ€ΠΎΠΊΠ°, содСрТащая строковоС прСдставлСниС Π²Ρ‹Π±Ρ€Π°Π½Π½ΠΎΠ³ΠΎ числового значСния; ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΊΠ°ΠΊ число Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π² Π²ΠΈΠ΄Π΅ числа.
Бобытия ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΈ Π²Π²ΠΎΠ΄
ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅ΠΌΡ‹Π΅ ΠΎΠ±Ρ‰ΠΈΠ΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ Π°Π²Ρ‚ΠΎΠ·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ , список , макс , ΠΌΠΈΠ½ ΠΈ шаг
Атрибуты IDL список , Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΈ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΊΠ°ΠΊ число
Π˜Π½Ρ‚Π΅Ρ€Ρ„Π΅ΠΉΡ DOM

HTMLInputElement

ΠœΠ΅Ρ‚ΠΎΠ΄Ρ‹ шаг Π²Π½ΠΈΠ·() ΠΈ stepUp()
НСявная Ρ€ΠΎΠ»ΡŒ ARIA ΠΏΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ
БпСцификация
Π‘Ρ‚Π°Π½Π΄Π°Ρ€Ρ‚ HTML
# range-state-(type=range)

Π’Π°Π±Π»ΠΈΡ†Ρ‹ BCD Π·Π°Π³Ρ€ΡƒΠΆΠ°ΡŽΡ‚ΡΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅ с Π²ΠΊΠ»ΡŽΡ‡Π΅Π½Π½Ρ‹ΠΌ JavaScript. Π’ΠΊΠ»ΡŽΡ‡ΠΈΡ‚Π΅ JavaScript для просмотра Π΄Π°Π½Π½Ρ‹Ρ….

  • HTML-Ρ„ΠΎΡ€ΠΌΡ‹
  • ΠΈ интСрфСйс HTMLInputElement , основанный Π½Π°
  • <Ρ‚ΠΈΠΏ Π²Π²ΠΎΠ΄Π°="число">
  • validState.rangeOverflow ΠΈ validState.rangeUnderflow
  • Π£ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ нСсколькими ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π°ΠΌΠΈ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ConstantSourceNode
  • Бтилизация элСмСнта Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π°
  • Π‘ΠΎΠ²ΠΌΠ΅ΡΡ‚ΠΈΠΌΠΎΡΡ‚ΡŒ свойств CSS

ΠžΠ±Π½Π°Ρ€ΡƒΠΆΠΈΠ»ΠΈ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡƒ с содСрТаниСм этой страницы?

  • ΠžΡ‚Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΡƒΠΉΡ‚Π΅ страницу Π½Π° GitHub.
  • Π‘ΠΎΠΎΠ±Ρ‰ΠΈΡ‚ΡŒ ΠΎ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ΅ с содСрТимым.
  • ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ исходный ΠΊΠΎΠ΄ Π½Π° GitHub.

Π₯ΠΎΡ‚ΠΈΡ‚Π΅ ΠΏΡ€ΠΈΠ½ΡΡ‚ΡŒ участиС?

Π£Π·Π½Π°ΠΉΡ‚Π΅, ΠΊΠ°ΠΊ внСсти свой Π²ΠΊΠ»Π°Π΄.

ПослСдний Ρ€Π°Π· эта страница Π±Ρ‹Π»Π° ΠΈΠ·ΠΌΠ΅Π½Π΅Π½Π° участниками MDN.

67 ярких ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² Π΄ΠΈΠ·Π°ΠΉΠ½Π° слайдСра Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° 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

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

ΠŸΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° 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

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

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

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

БдСлано с:

HTML

CSS

JavaScript

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

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

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

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

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

HTML

CSS

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

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

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

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

БдСлано с:

HTML

CSS

JavaScript

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

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

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

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

БдСлано с:

HTML

CSS

JavaScript

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

Pug

Stylus

JQuery

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

ΠŸΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ 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

90 002 JQuery

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

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

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

БдСлано с:

HTML

CSS

JavaScript

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

SCSS

GSAP

ΠŸΡ€ΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠΎΠ΄ ΠΈ дСмонстрация

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

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

БдСлано с:

HTML

CSS

JavaScript

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

Мопс

Бтилус

Мопс

900 02 CoffeeScript

JQuery

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

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

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

БдСлано с:

HTML

CSS

JavaScript

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

SCSS

JQuery

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

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

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

БдСлано с:

HTML

CSS

JavaScript

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

SCSS

JQuery

rangeslider.js 900 09

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

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

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

БдСлано с:

HTML

CSS

JavaScript

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

SCSS

React JS

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

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

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

Бостав:

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

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

ИзмСнСниС Ρ‚Π΅ΠΌΡ‹ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠ° Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π°

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

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

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