Як це працює?

Акордеон JS + CSS 0

Акордеон JS + CSS

Акордеон слугує для того, щоб можна було перемикатися між частинами великої кількості контетну. В даному уроці ми будемо розробляти з вами акордеон на JS + CSS. See the Pen Акордеон by Vladislav Groniuk (@vladislav-groniuk)...

модальне вікно 0

Як створити модальне вікно на чистому JavaScript

В даному уроці я навчу вас створювати модальне вікно за допомогою JavaScript. Let’s GO! Ось який буде результат: See the Pen Модальне вікно by Vladislav Groniuk (@vladislav-groniuk) on CodePen. Крок 1) Додаємо HTML: <!–...

checkbox 0

Стилізуємо чекбокси і радіокнопки

В даному уроці я розкажу вам, як можна стилізувати стандартні стилі checkbox і радіокнопок, так як багато сучасних дизайнів сайтів не використовують стилі за замовчуванням. See the Pen Стилізація чекбоксів by Vladislav Groniuk (@vladislav-groniuk)...

Pop-up форма входу 0

Pop-up форма входу

В даному уроці я навчу вас створювати модальне вікно(pop-up вікно) з формою для входу на чистому JavaScript+CSS. See the Pen Pop-up форма входу by Vladislav Groniuk (@vladislav-groniuk) on CodePen. Як створити форму для входу...

Progress Bar(Прогрес бар) 0

Progress Bar(Прогрес бар)

В даному уроці ви дізнаєтеся, як створити Progress Bar, використовуючи JavaScript. Створення Progress Bar Крок 1) Додайте HTML: <div id=”myProgress”> <div id=”myBar”></div> </div> Крок 2) Додайте CSS: #myProgress { width: 100%; background-color: grey; }...

Паралакс ефект 0

Паралакс ефект

Паралакс – це сучасна тенденція веб-сайту, де фоновий вміст (тобто зображення) переміщується з різною швидкістю, ніж вміст переднього плану під час прокрутки. Нижче, ви можете побачити різницю між веб-сайтом з і без паралакса. Веб-сайт...

Image grid 0

Сітка зображень (Image grid)

Сітка зображення (Image grid) В даному уроці ви дізнаєтесь, як створювати сітку зображень, або як її ще називають image grid, в якій може бути розміщино 1, 2 або 4 зображення в один ряд:  ...

Створення галереї з нуля на JavaScript 0

Створення галереї з нуля на JavaScript

Галерея слайд-шоу Галерея слайд-шоу використовується для перемикання слайдів. Їх можна перемикати за допомогою мініатюр внизу або стрілок вперед/назад.   Розробка галереї слайд-шоу Крок 1) Додати HTML: <!– Контейнер для картинок галереї –> <div class=”container”>...

Слайд-шоу 0

Слайд-шоу

Дізнайтеся, як створити слайд-шоу за допомогою CSS і JavaScript. Слайд-шоу використовується для перемикання різних елементів, зазвичай зображень:   Створення слайд-шоу Крок 1) Додати HTML: <!– Контейнер для слайдшоу –> <div class=”slideshow-container”> <!– Зображення на...

Повідомити про помилку

Текст, який буде надіслано нашим редакторам: