Генератор CSS-коду – дуже зручний інструмент, який може заощадити веб-розробнику чимало часу, а також уберегти від зайвих помилок. Крім того, ваш код стане більш читабельним. У цій статті ми підібрали низку корисних на наш погляд генераторів CSS-коду.

CSS Click Chart

CSS CheatSheet

Spritebox

Pixel Map Generator

Clean CSS

CSS Animate

Ну що, парубки, анімація? Використовуйте та грайте з переходами до CSS.

UI Gradients

WAIT! Animate

Створення кастомних пауз між CSS-анімаціями ніколи не було простим завданням. Але за допомогою цієї програми складність процедури зводиться до нуля.

CSS3 Generator

CSS Type Set

Чи хотіли подивитися, як виглядають різні шрифти? Зайдіть на CSS Type Set. Все, що потрібно - ввести текст і вибрати параметри шрифту.

Enjoy CSS

Flexy Boxes

Якщо ви не можете розібратися з flexbox, то вам варто спробувати Flexy Boxes . У цьому додатку можна порівняти різні версії flexbox та інтерпретації синтаксису.

Генератор CSS-коду – дуже зручний інструмент, який може заощадити веб-розробнику чимало часу, а також уберегти від зайвих помилок. Крім того, ваш код стане більш читабельним. У цій статті ми підібрали низку корисних на наш погляд генераторів CSS-коду.

CSS Click Chart

CSS CheatSheet

Spritebox

Pixel Map Generator

Clean CSS

CSS Animate

Ну що, парубки, анімація? Використовуйте та грайте з переходами до CSS.

UI Gradients

WAIT! Animate

Створення кастомних пауз між CSS-анімаціями ніколи не було простим завданням. Але за допомогою цієї програми складність процедури зводиться до нуля.

CSS3 Generator

CSS Type Set

Чи хотіли подивитися, як виглядають різні шрифти? Зайдіть на CSS Type Set. Все, що потрібно - ввести текст і вибрати параметри шрифту.

Enjoy CSS

Flexy Boxes

Якщо ви не можете розібратися з flexbox, то вам варто спробувати Flexy Boxes . У цьому додатку можна порівняти різні версії flexbox та інтерпретації синтаксису.

a! А Ви користуєтесь генераторами CSS3або HTML5? Якщо ні, то може варто спробувати 🙂 Просто уявіть, можна відмовитися від ручного опису стилів для кнопок, кутів у блоках, тіней, градієнтів, якщо хтось використовує і так далі, так само HTML5. Навіщо писати один і той же код щоразу при створенні нового проекту, коли можна «забити» параметри в віконці натиснути кнопочку і отримати готовий вихідний код, а якщо треба, то й пофіксувати його!
У цій статті покажу Вам вибірку з таких генераторів. Переважно це будуть генератори CSS3 та парочка для HTML5. Щоб перейти на сайт сервісу - Тиснемо на назву сервісу!

CSS3 генератори:

CSS3.me

Один із найкращих генераторів. Автором є Eric Hoffman. Є можливість змінити і встановити заокруглення, тінь, градієнт і прозорість - ефекти, що найчастіше використовуються.

CSS3 Maker

Є практично все і ще трохи. Ви можете налаштувати @font face, анімацію, тінь блоків, тінь тексту, обертання тексту, трансформацію, градієнти, закруглення та багато іншого.

CSS3 Generator

Має приблизно такий самий функціонал як і попередній генератор. Потрібно вибрати з списку, що цікавить пункт, і ввести первинні дані.

Webestools Shadow Generator

Генератор тіней. Налаштовуються лише тіні: колір, усунення, розмиття, внутрішня чи зовнішня тінь тощо.

Генератори кнопок

CSS3 Button Generator

Кумедний генератор. Справа одна велика кнопка – результат маніпуляцій, а зліва налаштування. Ви можете маніпулювати тінями, кордоном, кольором тощо. Перетягування повзунків чудово підходять для людей, які є новачками у сайтобудуванні. Добре, що можна відразу бачити реакцію на Вашу дію, з цього можна зрозуміти яке налаштування за що відповідає.

CSS3-Tricks Button Maker

Цей генератор кнопочок трохи простіший. Весь процес створення кнопки побудований на перетягуванні повзунків. Тут ставка робиться на тлі, тобто гра із квітами кнопки.

CSS3 Button.net

Ось ще хороший генератор кнопок. Можна налаштувати фон кнопки, кордон, тінь зовнішню, внутрішню тінь, розмір, колір тексту та тінь тексту. При внесенні змін до блоку праворуч відразу змінюється код.

Border Image та Radius генератор

Border-Radius

Досить скромний функціонал: можна налаштувати лише закруглення кутів, зате кожного кута окремо.

Border-image

Трохи складний в освоєнні, але якщо необхідно зробити як межу (border) зображення, то цей інструмент якраз! Вибираєте своє зображення, повзунками вибираєте розміри кордону, можна навіть для кожного кордону збільшити фон ... також спосіб повторення зображення. А код генерується знизу.

CSS3 генератор градієнта

Colorzilla Gradient Editor

Ось класний генератор градієнта. Є велика кількість готових наборів кольорів, але можна і самому вибирати. Встановлюється тип градієнта: горизонтальний, вертикальний тощо. Навіть підтримка для IE є.

HTML5 генератори

HTML5 ★ BOILERPLATE

За допомогою цього генератори Ви отримуєте заготівлю шаблону повністю оптимізовану для різних браузерів. Мені дуже сподобався цей генератор, тепер користуватимуся ним. Щоб ознайомитися з усіма «фішками» відвідайте цей проект, тим більше там все російською.

HTML5 генератор Shikiryu трохи складніше ніж попередній. Дозволяє ввести нам заголовок та опис сторінки, підключити фреймворк css, стилі кнопок css, бібліотеку, аналітику тощо.

Initializr є генератором HTML5 шаблонів, які допоможуть вам розпочати роботу з новим проектом. Initializr створює для вас чистий шаблон, що настроюється. Опціями, що вибираються є: первинний каркас, серверні опції (.htaccess, nginx.conf, web.config), підключення jquery, аналітики google, вибір між і тд.

Це звичайний генератор. Нам пропонують вибрати які елементи будуть присутні на сторінці, а також вказати пару опцій.

На цьому все, якщо ви знаєте хороші генератори HTML5 або CSS3, не соромтеся пишіть про них у коментарях 🙂

Щоб залишатися в курсі свіжих статей та уроків, підписуйтесь на

Цей простий on-line генератор сторінок сайту дозволяє створювати сторінки Вашого сайту як у звичайному текстовому редакторі. Він вміє генерувати всі необхідні html-теги в тілі web-сторінки. Цей генератор html-коду тіла сторінок сайту багаторазово прискорить створення сторінок сайту.

Деякі зауваження щодо використання генератора сторінок сайту

Цей генератор сторінок сайту є візуальним у тому сенсі, що він генерує такий html-код сторінки, щоб у тому браузері, в якому Ви знаходитесь при роботі з цим генератором, сторінка відображалася так само, як Ви її бачите у вікні редактора. Даний редактор-генератор генерує лише коди розмітки, тобто лише HTML. Він не призначений для створення скриптів такими мовами програмування, як JavaScript або PHP.

Цей редактор призначений для веб-майстрів-початківців, які тільки приступають до вивчення мови розмітки HTML. Але він буде корисним і досвідченим сайтобудівникам для швидкого створення маленьких сторінок або шаблонів сторінок. Початківців веб-майстрів тут привабить можливість швидкого порівняння внесених до дизайну сторінки змін з тим, як це відображається на зміні html-розмітки сторінки. Таке оперативне порівняння дозволяє вивчити HTML максимально швидко та ефективно.

Даний редактор не призначений для роботи з дуже великим текстом та великою кількістю "важких" картинок. Якщо Ви хочете в цьому редакторі створити web-сторінку з дуже великим текстом та/або з картинками великого об'єму, то краще створіть спочатку повний шаблон web-сторінки, скопіюйте отриманий HTML-код у файл web-сторінки і тільки потім вставляйте туди довгий текст і посилання на картинки. Пам'ятайте, що цей редактор не є професійним редактором і призначений, в першу чергу, для любителів і веб-майстрів-початківців. Його основне призначення – це допомогти початківцям у навчанні сайтобудування.

Інструкція по використанню

Якщо Ви колись користувалися редакторами текстів типу MS Word, то у Вас не буде жодних труднощів із освоєнням цього генератора веб-сторінок. Цей редактор можна використовувати або для створення тіла web-сторінки з нуля або для виправлення вже існуючої web-сторінки, щоб внести до неї зміни.

Якщо Ви починаєте створювати свою сторінку з нуля, то Вам треба стерти мій початковий текст у вікні редактора та почати вводити туди свій текст, картинки та робити своє форматування. Коли робота буде закінчена, треба в нижній частині екрана редактора натиснути кнопку "Code" і скопіювати отриманий код у файл Вашої web-сторінки. І зберегти цей файл. Зверніть увагу, що копіювати отримані коди треба тільки в тіло web-сторінки, тобто між тегами і

. Самі теги bodyредактором не утворюються.

Якщо Ви хочете редагувати якусь вже готову web-сторінку, наприклад, створену не Вами або яку Ви створили давно, то Вам треба в нижній частині екрана редактора натиснути на кнопку "Code", видалити з вікна редактора всі мої початкові коди та скопіювати туди коди із файлу web-сторінки. Зверніть увагу, що копіювати коди потрібно лише з тіла існуючої web-сторінки, тобто тільки те, що знаходиться між тэгами і

. Самі теги bodyкопіювати до редактора не треба. Потім вам треба знову перейти в режим візуального редагування. Для цього потрібно натиснути кнопку "Design" у нижній частині вікна редактора і почати вносити зміни до зовнішнього вигляду сторінки.

Зрозуміло, що редагувати тіло web-сторінки можна в цьому редакторі подвійно. Або в режимі Design редагувати візуально або в режимі Code редагувати відразу в кодах. Тому для веб-майстрів-початківців це редактор дуже корисний для навчання. Ви можете внести якісь невеликі зміни до web-сторінки у візуальному режимі і тут же подивитися, як змінився при цьому код, переключившись у режим редагування коду. Або, навпаки, Ви можете внести якісь невеликі зміни до коду web-сторінки в режимі редагування коду і тут же подивитися, як змінитись Ваша web-сторінка, переключившись у режим візуального редагування (або в режим перегляду за допомогою кнопки "Preview") .

Звичайне редагування тексту

У верхньому рядку меню є кнопки загального редагування тексту. Вони мають стандартні позначення, які прийняті до будь-яких інших редакторів тексту. Тому лише коротко пробіжимося ними.

Все працює дуже просто. Ви або виділяєте якусь частину тексту і натискаєте кнопку верхнього меню, щоб ця частина тексту була відформатована відповідним чином. Або якщо нічого не виділено, то відбувається переключення в режим відповідної кнопки, тобто, якщо далі набиратимете текст, то текст набиратиметься в режимі тієї кнопки, яку Ви щойно включили.

Також, як і в будь-якому текстовому редакторі, є режими, які застосовуються лише для абзацу в цілому та режими, які можна застосувати до частини абзацу.

Короткий опис усіх кнопок верхньої частини меню в порядку їх розташування:

• Параграф. Вибирає рівень заголовка. Застосовується для абзацу загалом.
• Шрифт.
• Розмір шрифту.
• Колір шрифт.
• Жирний шрифт.
• Похилий шрифт.
• Підкреслений шрифт.
• Закреслений шрифт.
• Вирівнювання вліво. Застосовується для абзацу загалом.
• Центрування. Застосовується для абзацу загалом.
• Вирівнювання праворуч. Застосовується для абзацу загалом.
• Двостороннє вирівнювання. Застосовується для абзацу загалом.
• Горизонтальні лінії. Це не абзацна річ і не для частини абзацу. Це просто вставка горизонтальної лінії на всю ширину.
• Верхній індекс.
• Нижній індекс

Основне html-редагування

У середньому рядку меню є як кнопки для типового редагування web-сторінки, так і кнопки звичайних редакторів.

Опис усіх кнопок верхньої частини меню в порядку їх розташування:

• Створення гіперпосилання. Обов'язково потрібно виділити мишкою той текст або картинку, при натисканні на які Ви хочете, щоб відбувся перехід на іншу web-сторінку. Після виділення тиснете на кнопку меню і відкриваєте віконце, в якому Ви повинні задати адресу, куди йтиме перехід (URL) та умови переходу (target). Ви можете встановити такі умови:
  • Порожньо. За замовчуванням нова сторінка відкриється у тому самому вікні.
  • _blank. Нова сторінка буде відображатися у новому вікні браузера (або в новій вкладці браузера, залежно від конкретних налаштувань браузера).
  • _parent. Нова сторінка виводитиметься у батьківському вікні (або вкладці) браузера. Якщо батьківського вікна (або вклпдки) немає, це аналог умови _self.
  • _self. Нова сторінка буде виводитися в те саме вікно, в якому знаходиться посилання. Це аналог режиму "Пусто".
  • _top. Якщо сторінка сайту з кадрами (тобто розбита на кілька вікон), то нова сторінка виводитиметься у вікно браузера. У звичайному випадку це також аналог режиму _self.
  Зверніть увагу, що задавати адресу нової сторінки, куди веде гіперпосилання, треба в повному вигляді, типу "http://site.ru"або "http://site.ru/page.html". Інакше при спробі повторного редагування цього гіперпосилання цей редактор не знайде адреси сайту і за умовчанням підставить адресу мого сайту "http://сайт"прямо перед ім'ям вашої сторінки.
• Скасування гіперпосилання. Виділяєте текст гіперпосилання ПОВНІСТТЮ. Якщо виділите лише частину тексту гіперпосилання, то невиділена частина залишиться гіперпосиланням. Наприклад, якщо виділили лише центральну частину тексту гіперпосилання, то утворюється два гіперпосилання з однаковою адресою на невиділених текстах.
• Вставлення картинки. Ставіть курсор у те місце, де має бути картинка і тиснете на кнопку. У вікні, що відкрилося, задаєте шлях до картинки (Image URL), опис картинки (Image Description), вирівнювання картинки на сторінці (Alignment), ширину кордону (Border) і відступи картинки від тексту (або інших елементів на сторінці по горизонталі і по вертикалі (HSpace) , VSpace) Вирівнювання картинки Ви можете задати наступним чином:
  • Порожньо. За промовчанням це вирівнювання по лівому краю.
  • BaseLine. Текст (та інші елементи сторінки), що знаходиться з картинкою в одному абзаці, буде розташовуватися так, як вирішили творці Вашого браузера.
  • Top. Текст (та інші елементи сторінки), що знаходиться з картинкою в одному абзаці, буде вирівняний по верхній частині картинки.
  • Middle. Текст (та інші елементи сторінки), що знаходиться з картинкою в одному абзаці, буде вирівняний по центру картинки.
  • Dottom. Текст (та інші елементи сторінки), що знаходиться з картинкою в одному абзаці, буде вирівняний по нижній частині картинки.
  • TextTop. Текст (та інші елементи сторінки), що знаходиться з картинкою в одному абзаці, буде розміщений над картинкою. (Підтримується не всіма браузерами.)
  • Absolute Middle. (Підтримується не всіма браузерами.)
  • Absolute Bottom. (Підтримується не всіма браузерами.)
  • Left. Картинка буде розміщена ліворуч від тексту (та інших елементів сторінки), що знаходиться з картинкою в одному абзаці.
  • Right. Картинка буде розміщена праворуч від тексту (та інших елементів сторінки), що знаходиться з картинкою в одному абзаці.
  Вставлене зображення далі вже неможливо буде редагувати у візуальному редакторі. Тому для подальшого редагування зображення перейдіть до режиму редагування коду. Для видалення картинки треба клікнути мишкою і натиснути кнопку Delete (Del) на клавіатурі.
• Скасування форматування. Скасує форматування, яке було зроблено за допомогою кнопок верхнього рядка меню, які відносяться до форматування частини абзацу. Працює так само, як і кнопки верхнього меню, коли треба скасувати форматування, тобто виділяємо потрібний шматок тексту та натискаємо на цю кнопку. Зручність цієї кнопки полягає в тому, що вона одним натисканням відразу прибирає все форматування всіх видів, які були у виділеному фрагменті.
• Створення та редагування таблиці. Кнопка застосовується, щоб створити таблицю у місці розташування курсору чи відредагувати виділену таблицю. Під час створення таблиці треба задати такі параметри:
  • Rows – число рядків.
  • Columns – число стовпців.
  • Width – ширина таблиці. Задається або у відсотках від ширини екрана або пікселі.
  • Border – ширина кордонів осередків. Якщо залишити значення 0, межі осередків нічого очікувати видно.
  • CellSpacing – відстань у пікселях між осередками таблиці.
  • CellPadding - відстань у пікселях від межі комірки до тексту всередині комірки.
  • Alignment – ​​вирівнювання таблиці на сторінки:
    • Default. За промовчанням, як задали розробники Вашого браузера.
    • Left. Таблиця притиснута до лівого краю сторінки.
    • Центр. Таблиця розташована у центрі web-сторінки.
    • Right. Таблиця притиснута до правого краю сторінки.
  Для видалення таблиці треба виділити її кордон, клацнувши мишкою по кордоні, і надати клавіатурі кнопку Delete (Del). Для редагування таблиці треба поставити курсор у будь-яке місце таблиці (або виділити частину таблиці або всю таблицю) і знову натиснути кнопку меню. При цьому для редагування Вам доступні всі параметри, окрім числа рядків та стовпців. Наступні 6 кнопок середнього рядка меню призначені для редагування числа рядків та стовпців у вже створеній таблиці. Коли курсор стоїть на таблиці, ці шість кнопок доступні для натискання.
• Створити один стовпець ліворуч від курсору. Якщо виділено кілька стовпців, то вважається, що курсор стоїть на останньому стовпці, який було виділено.
• Створити один стовпець праворуч від курсору. Якщо виділено кілька стовпців, то вважається, що курсор стоїть на останньому стовпці, який було виділено.
• Створити один рядок вище курсора. Якщо виділено кілька рядків, то вважається, що курсор стоїть на останньому рядку, який був виділений.
• Створити один рядок нижче курсора. Якщо виділено кілька рядків, то вважається, що курсор стоїть на останньому рядку, який був виділений.
• Видалити один стовпець курсора. Якщо виділено кілька стовпців, то вважається, що курсор стоїть на останньому стовпці, який було виділено.
• Видалити один рядок курсора. Якщо виділено кілька рядків, то вважається, що курсор стоїть на останньому рядку, який був виділений.
• Створити нумерований перелік. Або виділяєте якісь абзаци і натискаєте на кнопку меню. Всі ці абзаци стають елементами нумерованого списку. Або ставите у потрібне місце курсор, натискаєте на цю кнопку меню і далі всі абзаци, які Ви вводите, автоматично стають елементами нумерованого списку.
• Створити простий перелік. Виділяєте якісь абзаци і натискаєте на кнопку меню. Всі ці абзаци стають елементами простого списку без нумерації.
• Видалення відступу. Курсор повинен стояти на абзаці, відступи якого хочемо видалити. Можна виділити весь абзац або лише його частину.
• Створення відступу. Курсор повинен стояти на тому абзаці, який хоче створити відступ зліва. Можна виділити весь абзац або лише його частину. Відступ створюється для всього абзацу в цілому (а не лише для першого рядка).
• Відкочування всіх змін назад. Поки Ви не натиснули на кнопку "Code" або "Preview", Ви можете видалити всі зроблені зміни і повернутися до стану, який був останній раз під час перегляду коду або перегляду сторінки.
• Відновлення всіх прибраних змін наперед. Якщо Ви зробили зворотний відкат змін більше, ніж потрібно, можете відновити прибрані зміни. Так само якщо після відкату змін Ви переходили в режим "code" або "Preview", то відновити зміни вже не зможете.
• Знищити виділене з одночасним копіюванням виділеного в "кишеню" Windows. (Ctrl+X)
• Копіювати виділене в "кишеню" Windows. (Ctrl+C)
• Вставити вміст "кишені" Windows у місце, де стоїть курсор. (Ctrl+V)

Додаткове html-редагування

У третьому рядку меню знаходяться в основному кнопки для створення та редагування форм, а також деяких додаткових можливостей будь-якого редактора.

Список кнопок третього рядка меню в порядку їх розташування:

• Створити форму. Треба у відкритому вікні ввести ім'я форми, адресу скрипта, який оброблятиме дані цієї форми та метод передачі даних (post або get).
• Створити Check Box. У відкритому вікні вводьте назву цієї форми вибору, значення, що приймається при виборі і вказуєте, чи галочка вибору чи спочатку в цій формі.
• Створити радіо-кнопку. У відкритому вікні введіть назву цієї форми вибору, значення, яке приймається при виборі і вказуєте, чи ця кнопка обрана спочатку чи ні. При створенні меню з radio-кнопок, не забувайте, що всі radio-кнопки одного і того ж меню повинні мати те саме назву.
• Створити майданчик для введення тексту. У відкритому вікні введіть назву майданчика для введення тексту, ширину майданчика числом символів, число рядків майданчика, розташування абзаців та смуг прокручування та початковий текст у цьому полі.
• Створити кнопку "Виконати". У вікні пишемо ім'я кнопки і той, текст, який буде написаний на цій кнопці.
• Створити кнопку "Виконати" у вигляді картинки. У вікні пишемо ім'я кнопки і адресу тієї картинки, яка буде грати роль кнопки.
• Створити кнопку очищення заповненої форми та повернення всіх значень за замовчуванням. У вікні пишемо ім'я кнопки і той, текст, який буде написаний на цій кнопці.
• Створити приховане поле. У вікні пишемо ім'я прихованого поля і його значення.
• Створити поле для введення пароля зірочками. У вікні, що відкрилося, пишемо ім'я поля пароля, довжину поля і максимальну кількість символів пароля, яке зможе ввести користувач при введенні свого пароля.
• Створити текстове поле. У вікні пишемо ім'я текстового поля, його розмір в символах, скільки максимум символів може ввести користувач і початковий текст в цьому полі.
• Надіслати на друк.
• Виділити все.

Доброго вам дня! Відразу пояснюся з приводу оформлення посту: одного разу, наткнувшись на , мене не дуже порадувало безмірна кількість інформації та навігаційних елементів у представлених генераторах, і ще більше - їх інтерфейс користувача! Обурило те, що інструменти для роботи зі стилями- самі не витримані в рамках можливостей, які вони надають… як так?!

Коли займаєшся творчістю, хочеться мати підручні засоби та інструменти на освоєння та роботу з якими витрачаєш мінімумзусиль та часу. В результаті всього цього, прийшла думка: відібрати найкращіінструменти та організуватиїх для частого використання (а-ля навігаційне меню, такий собі Quick Launch).

Сподіваюся, для багатьох ноу-хау стане добрим помічником у процесі веб-розробки.

CSS-генератори:

• CSS3.me- Простий, елегантний і в той же час багатофункціональний CSS-генератор, з гарним доменом
• CSS3Maker.com- дуже великий функціонал для роботи з новими функціями CSS3, крос-браузерність, гнучкість та повний набір всього необхідного;
• CSS3Generator.com- нічого зайвого, для любителів класики та простоти, одним словом "old school";
• Colorzilla.com- генератор градієнтів для створення красивих фонових зображень, за допомогою більшості браузерів і без застосування картинок (чистий CSS).

WEB-інструменти:

• Button builder- Інструмент для конструювання кнопок, з витримкою в ритмі Web 2.0. Серед функціоналу можна відзначити можливість налаштування: внутрішніх відступів, розміру тексту, закругленості кутів та вибору кольорів градієнта;
• Form builder- конструктор форми, що дозволяє налаштувати зовнішній вигляд як форми загалом, і окремі її елементи;
• Icon builder- відчуйте себе вільним художником, створюючи нові іконки для своїх кнопок, меню і фавіконів;
• Ribbon builder- для створення стильних стрічок на чистому CSS, скористайтеся даним інструментом, з широким спектром налаштувань та опцій.

Зображення у вигляді кнопок (іконок) на початку статті - клікабельні!

Якщо маєте пропозиції чи знаєте цікаві інструменти, які можуть підтримати цю ідею – прошу висловлюватись. Прохання не кидати мотлох, у складання полювання додавати тільки ексклюзив. Дякую.