Login
Frontend

Тули для полегшення верстки

20 Oct 2022

Тули, які можуть полегшити вам верстку.

Генератори розмітки:

  1. CSS Grid Generator - генератор грід сітки, може допомогти при складній сітці, якщо така є по дизайну.
  2. HTML Table Generator - генератор таблиць, може знадобитися інколи.

Анімації:

  1. Granim.js - классна бібліотека, яка дозволяє зробити плаваючий градієнт на фоні за допомогою js та canvas.
  2. AOS - бібліотека для анімування трансормацій блоків чи текту при скролі.
  3. ScrollMagic - дуже класна бібліотека для анімацій при скороллі будь якої складності. Наявна зрозуміла документація з багатьма прикладами, за якими можна зробити все що тільки може бути для сайтів.
  4. GSAP - дуже потужна бібліотека, з якою можливо зробити анімації будь якої складності.
  5. Rellax - проста бібліотека для ефекту паралаксу деоративних фігур.
  6. simplePARALLAX - бібліотека для ефекту паралакса для фотографій.
  7. Tilt - бібліотека для анімування 3d трансформації карточок під час взаємодії з курсором. Є 2 версії - на чистому JS та jQuery.
  8. Typed.js - бібліотека для анімування імітації введення тексту.

Генератори CSS:

  1. CSS clip-path maker - генератор простих фігур за допомогою властивості clip-path.
  2. Fancy-Border-Radius - генератор бордер радіуса для складних фігур, інколи може знадобитися.
  3. CSS Gradient Generator - генератор градієнтів, може інколи знадобитися.
  4. CSS Filter Generator - генератор фільтрів і оверлеїв, є можливість додати своє зображення і підібрати для нього фільтр швидко.
  5. CSS Box Shadow Generator - простий та наглядний генератор тіней.
  6. Drop Shadow Generator - простий та наглядний генератор тіней за допомогою властивості filter: drop-shadow, підійде для тіні для png чи svg картинок з прозорістю.
  7. Animations CSS Generator - простий та наглядний генератор CSS анімації.
  8. Autoprefixer - додає префікси для підтримки старих версій браузерів. Може знадобитися на старих проєктах, на нових уже не актуальний.
  9. Input range slider CSS styler across browsers - наглядний генератор стилів для стандартного input range. Генерує як стилі для всіх браузерів, так і функцію для стилізації прогресу.

Валідатори input:

  1. AutoNumeric - валідатор усіх можливих номерних інпутів. Посилання на CDN: link
  2. Cleave.js - валідатор інпутів текстових, телефонних, банковських карт. Посилання на CDN: link

Все для роботи з відео:

  1. HTML5 Video Events and API - наглядний інструмент для роботи зі стандартним відеоплеєром.
2