Какие CSS-генераторы можно использовать в 2021 году / Хабр
CSS генераторы экономят время и сокращают количество ошибок в коде. Они позволяют автоматизировать многие задачи, которые опытным верстальщикам или фронтендерам уже кажутся скучными. В то же время, они могут облегчить работу над задачами, которые сложны для начинающих специалистов.
Схема работы таких генераторов проста: достаточно ввести через простой визуальный интерфейс нужные вам параметры и на выходе получить готовые CSS-стили. Далее полученный код нужно скопировать и добавить в свой проект.
Известный full-stack разработчик Марко Денич предлагает свою подборку лучших CSS-генераторов. Возможно, о каких-то из них вы не знали, и, познакомившись с ними сейчас, начнёте использовать в работе.
1. Neumorphism/Soft UI generator
Neumorphism позволяет создавать градиенты и тени. Кроме того, с ним легко подобрать и сгенерировать цвета для вашего сайта.
Подробнее
2.
Smooth Shadow generatorЭто генератор теней, позволяющий через удобный UI менять параметры свойства box-shadow. В CSS3 свойство box-shadow отвечает за эффекты тени, которые возможны для большинства элементов веб-страницы. Инструмент, в частности, позволяет настраивать такие параметры, как вертикальное смещение, размытие, растяжение и прозрачность.
Подробнее
3. Fancy Border Radius Generator
Генератор позволяет рисовать сложные фигуры с закруглёнными углами. На выходе мы получаем набор значений свойства border-radius.
Подробнее
4. Easing Gradients
Позволяет создавать нелинейные градиенты и использовать модифицированные цветовые пространства.
Подробнее
5. Data Viz Color Palette Generator
Инструмент имеет удобный визуальный интерфейс с множеством настроек.Подробнее
6. CSS Grid Generator
Визуальный интерфейс очень простой, поэтому быстро накидать сетку не составит труда. Помимо таких базовых функций, как ввод количества строк, столбцов и отступов, есть возможность перетаскивать в ячейки div-блоки.
Подробнее
7. CSS Accordion Slider Generator
Бесплатный онлайн-сервис, позволяющий настроить через UI и сгенерировать горизонтальные и вертикальные аккордеон-слайдеры на HTML и CSS, без использования javaScript.
Подробнее
8. CSS clip-path maker
Простой онлайн-инструмент для обрезки картинок по заданному трафарету.
Подробнее
9. Get Waves
Генератор создает svg-вектор с заливкой волнообразной формы. Форму волны можно выбирать из трёх вариантов — синусоидальная, прямоугольная и пилообразная.
Также можно указывать размер волны и направление. В инструмент встроен рандомайзер, который выдаёт волны со случайными размерами, но с сохранением выбранной формы.
Подробнее
Согласны ли вы с выбором автора? Какие CSS-генераторы нравятся вам?
На правах рекламы
Эпичные серверы для размещения сайтов и не только!Быстрые VDS на базе новейших процессоров AMD EPYC и NVMe хранилища для размещения проектов любой сложности, от корпоративных сетей и игровых проектов до лендингов и VPN.
Лучшие CSS-генераторы / Полезное / Сайты и биржи фриланса. Обзоры фриланс бирж. Новости. Советы. Фриланс для начинающих. FREELANCE.TODAY
Сегодня мы рассмотрим полезные генераторы для CSS: от градиентов до треугольников и шкал шрифтов. Просто несколько полезных инструментов для вас, чтобы были под рукой.
CSS-генератор теней
Ищете инструмент, который автоматически генерирует CSS-код для действительно гладких, многослойных теней? Что ж, вам понравится SmoothShadow.
Плагин SmoothShadow Figma от Филиппа Брамма
После того, как вы попробуете этот инструмент, будет сложно не использовать его. Он позволяет визуально создавать слоистую гладкую тень блока, а также настраивать альфа-канал, смещение и размытие с помощью отдельных кривых плавности. Создатель инструмента Филипп Браммтакже выпустил SmoothShadow как плагин дляFigma.
Генератор границ и радиусов
Если нужно использовать border-radius, мы обычно думаем о нескольких простых значениях — возможно, 8 пикселей или 11 пикселей, а может быть, 16 пикселей. Однако border-radius может быть нестандартным, и генератор fancy-border-radiusпозволяет легко генерировать подобные. Инструмент обеспечивает визуализацию не только простых круглых форм, но и органических форм с помощью комбинации восьми значений. По сути, мы создаем перекрывающиеся эллипсы, образующие окончательную форму.
Граница радиуса органической ячейки ( превью в большом разрешении)
Генератор кубических кривых Безье
Иногда анимация кажется неправильной, не так ли? Возможно, длительность отключена или ослабление необычное, и на выяснение этого может уйти довольно много времени. С кубическим безьеLea Verou вы можете просматривать и сравнивать анимации, замедлять их и даже настраивать визуально. А затем скопируйте и вставьте фрагмент CSS, чтобы сразу подключить его к своему проекту.
Совершенные кубические кривые Безье ( превью в большом разрешении)
А если вам нужны базовые или сложные CSS-анимации @keyframe, Keyframes.appпредоставляет визуальный редактор временной шкалы, аналогичный программному обеспечению для редактирования видео. Вы можете добавлять шаги, изменять размер и положение, применять преобразования и изменения цвета. И не забудьте также панель «Анимация» в Chromeи Firefoxдля отладки.
Ослабляющие градиенты
С градиентами мы часто полагаемся на линейные градиенты, переходящие от одного цвета к другому. Однако у линейных градиентов есть резкие края в начале и в конце. Есть способ немного улучшить градиенты с помощью функций плавности. Поэтому Андреас Ларсен создал небольшой редактор Easing Gradients Editor, который позволяет нам создавать и предварительно просматривать градиенты замедления в CSS. Инструмент также доступен в виде плагинаи PostCSS плагина. Вы можете использовать палитру цветов, но, к сожалению, пока не можете добавить фактическое значение цвета.
У линейных градиентов есть четкие края в начале и в конце, и мы можем исправить это с помощью функций плавности.
Цветовые палитры визуализации данных
Иногда вам нужен особый цвет для очень конкретной задачи. Например, если вы работаете над проектом визуализации данных — например, круговыми диаграммами, сгруппированными столбчатыми диаграммами, картами — вам, вероятно, понадобится серия цветов, которые визуально равноудалены.
Доступная и яркая цветовая схема с использованием ряда оттенков для более быстрого выявления различий.
С помощью этого инструмента вы выбираете, сколько цветов вам нужно и нужен ли вам светлый или темный цвет фона, и хотите ли вы использовать палитру по умолчанию, палитру одного оттенка или расходящуюся цветовую шкалу. Получив цвет, вы можете копировать шестнадцатеричные значения и экспортировать их как SVG для использования в Sketch, Figma или Adobe XD.
Проверка доступности заголовков и основного текста.
LearnUI также предоставляет доступный генератор цветови интересный генератор градиентов.
Генератор цветовых оттенков и псевдоэлементов
Представьте, что вам просто нужно найти стили треугольников CSS для элементов и псевдоэлементов.
Или, возможно, немного уточнить цветовую палитру, исследуя оттенки данного цвета. Или, возможно, сгенерировать линейный и радиальный градиент CSS для раздела страницы. Нет необходимости делать все это вручную или пытаться найти эти CSS-фрагменты в Интернете. Вы всегда можете найти их на Omatsuri.«Омацури» в переводе с японского означает «фестиваль», и этот сайт представляет собой прекрасный небольшой фестиваль браузерных инструментов с открытым исходным кодом для повседневного использования. На сайте вы найдете генератор треугольников, генератор цветовых оттенков, генератор градиентов, разделители страниц, компрессор SVG, преобразователь SVG → JSX, генератор псевдоэлементов, курсоры CSS и коды событий клавиатуры. Спроектирован и построен Виталием Ртищевым и Владом Шиловым. Также доступен исходный код сайта.
CSS-наложение с генератором высокой контрастности
Если вы хотите, чтобы текст лучше выделялся на фоне фонового изображения, есть небольшая хитрость: вы можете использовать linear-gradient наложение CSS с определенной непрозрачностью поверх изображения для улучшения цветового контраста.
Spotify, например, использует эту технику.
Наложение линейного градиента CSS ( большое превью)
Хотя для всего этого требуется всего одна строка кода, остается ответить на один вопрос: как определить прозрачность наложения? Overlay Finderпоможет вам выяснить. Вы загружаете изображение, вводите текст и выбираете цвет наложения и текста, а инструмент показывает вам предварительный просмотр того, как наложение выглядит при применении к вашему изображению, а также оптимальную непрозрачность наложения. Маленькая деталь, имеющая большое значение.
Генератор цветовой палитры
Существует множество фантастических инструментов для создания вашей цветовой палитры, но Coolors.co — это небольшой отличный инструмент, который делает ровно столько, чтобы создавать палитры и исследовать различные оттенки цвета. Вы можете создать палитру из фотографии или коллаж из фотографий, быстро настроить оттенок, насыщенность, яркость и температуру. Здесь также есть модные цветовые палитры.
Генератор цветовой палитры CSS для поиска нужных градиентов.
Вы также можете создать палитру градиентамежду двумя цветами и создать и экспортировать свой собственный градиент ввиде CSS. Инструмент доступен в виде приложения для iOS, надстройки Adobe и расширения Chrome.
Еще один генератор цвета, также доступный в виде приложения для iOS, надстройки Adobe и расширения Chrome.
И если вам нужно что-то более сложное для градиентов в вашем наборе инструментов, CSSGradient.io — еще один инструмент для всех ваших потребностей в градиентах — будь то линейные или радиальные градиенты, цветовые оттенкиили градиентный фон.
Кроме того, Gradient Generatorгенерирует от 1 до 40 ступенчатых градиентов из двух цветов по вашему выбору. Каждый градиент автоматически представлен в форматах HEX, HSL и RGB — все, что вам нужно сделать, это просто щелкнуть значение, и оно сразу же будет скопировано в буфер обмена.
Генератор цветовых градиентов
Выбор цветов для создания цветового градиента требует опыта в дизайне и хорошего понимания цветовой гармонии.
Если вам нужен градиент для фона или элементов пользовательского интерфейса, но вы не чувствуете себя достаточно уверенно, чтобы справиться с задачей самостоятельно (или если вы спешите), генератор цветовых градиентов, созданный людьми из My Brand New Logo, вас прикроет.
Генератор цветовых градиентов
Генератор создает хорошо сбалансированные градиенты на основе выбранного вами цвета. Существует четыре различных стиля градиентов: от тонкого перламутрового до интенсивного, глубокого цветового градиента. Вы можете настроить градиент с помощью ползунков и, когда вы будете довольны результатом, скопируйте и вставьте сгенерированный код CSS, чтобы использовать его в своем проекте.
Генератор шкалы шрифтов
Так что, если вы хотите создать надежную типографскую систему, которая будет хорошо работать как на мобильных устройствах, так и на настольных компьютерах? Обычно вы полагаетесь на установленные типографские шкалы, которые обеспечивают типографскую иерархию для всего, от абзацев до подписей и заголовков.
Type-Scaleот Джереми Черча — это фантастический маленький инструмент, который помогает вам создать типографский масштаб и экспортировать его в CSS. Маленькие масштабы обычно хорошо подходят для просмотра на мобильных устройствах, средние масштабы могут хорошо работать для просмотра на компьютере, а большие масштабы могут хорошо работать для маркетинговых сайтов.
Фантастический маленький инструмент, который поможет вам создать типографский масштаб и экспортировать его в CSS.
Инструмент предоставляет 8 предопределенных шкал гармоничного шрифта (но вы также можете определить собственную шкалу), от Major Third до Perfect Fifth, и генерировать последовательность размеров шрифта с определенным геометрическим коэффициентом приращения. Вы можете настроить такие параметры, как line-height и вес тела, уточнить текст предварительного просмотра и получить сгенерированный CSS — или отредактировать его с помощью образца шрифта на CodePen. Кроме того, вы также можете проверить старый добрый ModularScale.
comТима Брауна.
Модульная гамма с использованием подобных структур, таких как музыкальная гамма.
CSS Capsize Generator
Чтобы свести к минимуму дезориентацию и дорогостоящие сдвиги макета во время загрузки, нам нужно сопоставить резервный шрифт с веб-шрифтом. Средство сопоставления стилей шрифтов Моники Динкулеску позволяет нам минимизировать резкий сдвиг, сопоставляя резервный шрифт и предполагаемую высоту и ширину веб-шрифта, и мы могли бы использовать f-моды,чтобы сделать то же самое с новыми свойствами CSS.
Небольшой инструмент, который регулирует размер шрифта так, чтобы высота заглавных букв была кратна вашей сетке.
По умолчанию многие шрифты имеют заранее определенные поля и отступы, поэтому, если резервный шрифт и веб-шрифт отличаются, весь макет значительно изменится. Capsizeрегулирует размер шрифта, так что высота заглавных букв кратна вашей сетке. Это достигается путем обрезки пространства над прописными буквами и под базовой линией.
Таким образом, сохраняя одинаковую высоту строки в резервном шрифте и в веб-шрифте, инструмент генерирует «магические числа», чтобы гарантировать плавность переключения.
Генератор сложных селекторов
Представьте, что вам нужно создать таблицу предметов. Возможно, вы захотите оставить их в одной строке, если есть 3 или меньше элементов, но тогда они будут охватывать две полные строки для 6 и 8 элементов, оставаясь при этом просто списком карточек с 10 элементами и более. Как построить такую таблицу? Хотя многие из этих ситуаций можно исправить с помощью CSS Grid и Flexbox, иногда вы можете столкнуться с довольно сложной ситуацией, для которой потребуется довольно сложный селектор CSS.
С этой целью Дрю Миннс построил генератор для селекторов количества — сложных селекторов CSS, которые позволяют применять стили к элементам в зависимости от количества. clip-path генератор
Благодаря свойству clip-path мы можем создавать сложные формы в CSS, обрезая элемент до базовой формы, будь то простой круг, причудливый многоугольник или даже источник SVG.
Clippy — это визуальный инструмент, который позволяет создавать и настраивать клип-дорожку прямо в вашем браузере.
Генератор траекторий для сложных форм в CSS.
Для начала вы выбираете форму и демонстрационный фон в меню Clippy. Затем вы можете перетащить точки фигуры, чтобы создать любую форму, которая вам нравится — CSS с цветовым кодированием не только мгновенно отразит ваши изменения, но и выделит их, чтобы помочь вам понять, как ваш выбор влияет на код.
Генератор макета сетки
Макет сетки CSS может быть довольно простым, но иногда вам может потребоваться поиграть со свойствами сетки, чтобы выяснить, какое поведение будет правильным для вашего макета. Для начала мы можем использовать CSS Grid GeneratorСары Драснер , CSS Grid Cheat Sheet Generator отАли Алаа и LayoutIt от LenioLabs — все они позволяют вам определять сетку и контейнеры в сетке, а также пробелы и он сразу же генерирует CSS. Если вам нужно больше рекомендаций по Flexbox, Flexbox Patternsсодержит множество примеров, с которыми можно поиграть.
Генератор CSS Grid Layout: отличный небольшой инструмент для экспериментов с вашим CSS Grid Layout.
Или вы можете использовать одну строку решений CSS. Уна Кравец создала однострочные макеты, коллекцию из десяти современных CSS-макетов и методов изменения размера.
Генератор составных сеток
Составные сеткипредлагают огромную гибкость и простор для творчества. Состоящие из двух или более сеток любого типа (столбцов, модульных, симметричных и асимметричных) на одной странице, они могут занимать отдельные области или перекрываться.
Генератор составных сеток
Небольшой инструмент, который поможет вам создавать составные сетки и сэкономить время на рисовании бесконечных вариаций, теперь принадлежит Мишель Баркер: генератор составных сеток. Все, что вам нужно сделать, это ввести количество столбцов для каждой сетки, и они будут объединены в составную сетку. Отличное дополнение к вашему цифровому набору инструментов.
А если вам нужно создать модульную сетку, сетку из нескольких столбцов, Калькулятор модульной сетки предоставит подробное объяснение того, как это сделать в InDesign.
CSS-фильтры и генератор режимов наложения
Фильтр CSS drop-shadow имеет отличную поддержку, но его довольно недооценивают — настоящий позор, учитывая тот факт, что он может сэкономить вам много времени на взлом box-shadow.
Box-shadow против drop-shadow
Как объясняет Мишель Баркер в своем блоге, drop-shadow позволяет использовать значения для смещения по оси x, смещения по оси Y, радиуса размытия и цвета — точно так же, как его более известный брат box-shadow. Однако есть одно большое преимущество: тень соответствует не ограничивающей рамке элемента (с которой часто начинается взлом при использовании box-shadow), а непрозрачным частям изображения. Идеально, если вы хотите применить тень к прозрачному логотипу PNG или SVG, например, или даже к обрезанной форме.
Генератор заполнителей размытых изображений
Заполнитель изображения — это эффективный способ улучшить воспринимаемую производительность сайта при загрузке изображения.
В своем стремлении найти самые быстрые и привлекательные плакаты с изображениями для Интернета Джо Белл решил сам придумать решение. Результат: Plaiceholder.
Генератор заполнителей размытых изображений.
Plaiceholder, использующий набор помощников Node.js, превращает ваши изображения в легкие, размытые изображения-заполнители. Есть несколько подходов на выбор: CSS (который рекомендуется), SVG, Base 64, Blurhashи экспериментальный Blurhash to CSS.
Генератор CSS-анимаций
Довольно легко отличить анимацию, которая выглядит немного неаккуратно, от анимации, которая сделана хорошо. Но настройка анимации ключевых кадров или переходов вручную может занять довольно много времени. Animista предоставляет библиотеку анимаций и переходов, которые вы можете использовать прямо из коробки. Существует множество предустановок для входов и выходов, выделения текста, действий кнопок и фоновых эффектов. После того, как вы определили анимацию, вы можете скопировать и вставить фрагмент CSS анимации вместе с кодом, сгенерированным Autoprefixer.
Обширная библиотека анимаций и переходов.
CSS Wand обеспечивает анимацию наведения и загрузки, но вы также можете использовать анимацию Ladda (кнопки со встроенными индикаторами загрузки) и Eric Spinners (с интеграцией Vue.js). И, возможно, вы хотели бы добавить причудливую изюминку переходам при наведении с помощью Boop! — просто помните о масштабировании с помощью псевдоэлементов и уважайте предпочтения движения для пользователей, которые выбирают уменьшенное движение.
Генератор рисунков
Мы можем воплотить в жизнь самые сложные макеты с помощью CSS, но мы также можем создавать и рисунки. Юань Чуань создал веб-компонент для рисования шаблонов с помощью CSS. Компонент включает в себя множество служебных функций и сокращенных свойств, с которыми можно поиграть. В результате компонент генерирует сетку divs вместе с простым CSS. Исходный код также доступен на GitHub.
Рисовать дудлы с помощью CSS? Конечно, спасибо Юань Чуаню.
Полезные маленькие помощники веб-разработчиков
Если вам нужно еще несколько инструментов, к счастью, есть много старых добрых веб-разработчиков, которые собирают свои любимые полезные инструменты в одном месте под названием Tiny Helpers. Здесь вы обязательно найдете всевозможные инструменты: от API, специальных возможностей и цвета до шрифтов, производительности, регулярных выражений, SVG и Unicode.
Растущее хранилище дружелюбных крошечных помощников для веб-разработчиков.
Конечно, на других платформах есть много других, таких как очень полезная ветка в Твиттере Джоша У. Комо,а также Стефана Джудиса. Что бы вы ни хотели найти, что поможет вам выполнять работу лучше и быстрее, вы обязательно найдете это там!
Существуют буквально сотниресурсов, и мы надеемся, что некоторые из перечисленных здесь окажутся полезными в вашей повседневной работе — и, что наиболее важно, помогут вам избежать некоторых трудоемких рутинных задач.
Источник
Создавайте потрясающие дизайны с помощью этих 7 генераторов форм CSS | от Noah Front End Developer | Март 2023 г.
Изображение Дэвида с Pixabay1. SVG Wave — это бесплатный онлайн-инструмент, который позволяет легко создавать настраиваемые уникальные волны SVG для ваших проектов. Всего несколькими щелчками мыши вы можете создавать потрясающие динамичные волны, которые можно использовать в качестве фона, заголовков или других декоративных элементов. Просто выберите предпочтительный стиль волны, настройте параметры по своему вкусу и загрузите файл SVG для использования в своем проекте. Никаких дизайнерских навыков или программного обеспечения не требуется! Попробуйте SVG Wave сегодня и поднимите свои проекты на новый уровень.
2. Shape Divider — это удобный онлайн-инструмент, который позволяет веб-разработчикам, дизайнерам и блогерам создавать уникальные и индивидуальные разделители для своих веб-сайтов. Имея на выбор множество фигур, вы можете легко настроить размер, толщину и цвет фигур в соответствии с темой и стилем вашего веб-сайта. Интерфейс инструмента с перетаскиванием упрощает процесс размещения разделителей именно там, где они необходимы, а код SVG можно легко загрузить и интегрировать на веб-сайт.
Shape Divider предлагает гибкое и простое решение для создания визуально привлекательных разделителей веб-сайтов.
3. Генератор волн SVG от Softr — это удобный онлайн-инструмент, который позволяет создавать собственные волны SVG для использования в дизайне вашего веб-сайта. Он предлагает ряд стилей волны, включая синусоиду, треугольник, пилообразную, квадратную и шумовую, и вы можете настроить амплитуду, частоту и количество точек, чтобы создать идеальную волну для вашего веб-сайта. Благодаря возможности загрузить код SVG или скопировать его непосредственно в буфер обмена, интеграция ваших пользовательских волн SVG на ваш веб-сайт станет легкой задачей. Этот инструмент является простым в использовании и универсальным инструментом для создания уникальных и визуально привлекательных волновых рисунков.
4. Генератор SVG Shape от Softr — это простой, но мощный онлайн-инструмент, который позволяет создавать собственные уникальные формы для вашего веб-сайта. Независимо от того, являетесь ли вы веб-разработчиком или дизайнером, вы можете использовать этот инструмент, чтобы добавить креативные и привлекательные формы в дизайн вашего веб-сайта.
Он имеет ряд доступных вариантов, включая такие формы, как квадраты, круги, треугольники и многое другое. Вы можете настроить размер, положение и цвет фигур в соответствии с темой и стилем вашего сайта. Интуитивно понятный интерфейс позволяет легко создавать и настраивать фигуры, а когда вы будете довольны своим дизайном, вы сможете загрузить код SVG и добавить его на свой веб-сайт всего за несколько кликов. Это удобный и гибкий инструмент, который предлагает бесконечные возможности для создания красивых и привлекательных форм веб-сайтов.
5. Fancy-Border-Radius — это простой, но мощный онлайн-инструмент, который позволяет веб-разработчикам и дизайнерам создавать уникальные и креативные стили для своих веб-сайтов. С Fancy-Border-Radius вы можете выбирать из множества вариантов, включая прямоугольники со скругленными углами, круги, эллипсы, многоугольники и многое другое. Вы также можете настроить размер фигуры, положение и стиль границы в соответствии с вашими потребностями дизайна.
Интуитивно понятный интерфейс перетаскивания позволяет легко создавать различные стили границ и экспериментировать с ними, а код CSS можно копировать одним щелчком мыши. В целом, Fancy-Border-Radius — полезный и удобный инструмент для создания привлекательных и визуально привлекательных границ для веб-сайтов.
6. Shape Dividers — это простой в использовании онлайн-инструмент, который поможет вам создать красивые разделители веб-сайтов без каких-либо дизайнерских навыков. Платформа предоставляет библиотеку различных форм разделителей, таких как кривые, волны и зигзаги, которые вы можете настроить, изменив их размер, толщину и цвет в соответствии со стилем вашего веб-сайта. Интерфейс перетаскивания позволяет размещать разделители в любом месте вашего веб-сайта, что упрощает создание уникальных разделов страницы, которые выделяются. Закончив проектирование, вы можете загрузить код SVG и добавить его на свой веб-сайт всего за несколько кликов. Это гибкий и удобный инструмент для создания визуально привлекательных разделителей веб-сайтов.
7. Get-Waves — это онлайн-инструмент, который позволяет создавать собственные и уникальные волны SVG для дизайна вашего сайта. Благодаря простому и интуитивно понятному интерфейсу вы можете легко настроить амплитуду, длину и частоту волны, а также выбрать цветовую схему в соответствии с темой вашего сайта. Вы также можете просмотреть свой дизайн волны в режиме реального времени и настроить его, пока не будете довольны результатом. Когда вы будете удовлетворены, вы можете загрузить код SVG и добавить его на свой веб-сайт всего за несколько кликов. Getwaves.io — это удобный и гибкий инструмент, который предлагает бесконечные возможности для создания красивых и привлекательных дизайнов веб-сайтов с волнами SVG.
Присоединяйтесь к Medium по моей реферальной ссылке — Noah
Прочитайте все истории Ноя (и тысяч других авторов на Medium). Ваш членский взнос напрямую поддерживает Ноя и…
medium.com
👀Купите мне кофе ☕ 90 90 ❤ «Спасибо за вашу поддержку» 0005 👇Дополнительный интерфейс- Инструменты UX Noah Front End Developer UI UX
Список просмотра
43 рассказа
8 лучших бесплатных веб-сайтов для создания CSS-форм
Вот список из лучших бесплатных онлайн-сайтов для создания CSS-форм .
Генератор форм CSS — это инструмент, который позволяет создавать собственные фигуры. Хотя CSS (каскадные таблицы стилей) позволяет создавать различные фигуры, инструмент для создания фигур может упростить и ускорить эту задачу. Он предоставляет удобный интерфейс, в котором вы можете сосредоточиться на форме, а не на коде.
В этом посте рассказывается о 8 бесплатных веб-сайтах, где вы можете создавать фигуры CSS онлайн. Эти инструменты поставляются с коллекцией, охватывающей различные формы. Вы можете выбрать форму, которую хотите использовать. Затем вы можете просто изменить его размер, просто перетаскивая его точки. Если вы хотите предварительно просмотреть форму с фоновым изображением, вы также можете это сделать. Таким образом, вы можете настроить форму в соответствии с вашими потребностями. Некоторые из этих инструментов позволяют создавать собственные многоугольники. Это означает, что вы можете добавлять или удалять точки, чтобы создать любую желаемую форму за пределами предлагаемой коллекции.
С учетом сказанного давайте пройдемся по сообщению, чтобы подробно проверить эти инструменты.
Мой любимый онлайн-генератор форм CSS
Мой любимый веб-сайт в этом списке для создания форм CSS онлайн должен быть Codepen.io . Этот инструмент имеет коллекцию из 37 форм, поэтому вы можете легко найти форму, соответствующую вашим потребностям. Если нет, вы можете создать собственную фигуру и получить для нее путь SVG. Вы можете добавить пользовательские/избранные формы в предустановку фигур и сохранить предустановку в виде кода для последующего использования.
Вы можете ознакомиться с другими нашими списками лучших бесплатных онлайн-сайтов с инструментом CSS Inliner Tool, онлайн-сайтов с генератором радиуса границы CSS и онлайн-сайтов с генератором спрайтов CSS.
Обзорная таблица:
| Веб-сайты | Коллекция форм | Фон | Код |
|---|---|---|---|
| Codepen.io | 37 | Изображение | CSS, предустановка |
CSSPortal. com | 27 | Пользовательское изображение | CSS, WebKit |
| 10015.io | 23 | Пользовательское изображение | CSS |
| BennettFeely.com | 27 | Пользовательское изображение | CSS |
| WebDevPuneet.com | 27 | Изображение/цвет | CSS |
| Unused-CSS.com | 17 | Изображение/цвет | CSS |
| UpLabs.com | 4 | Изображение | CSS |
| Alextade.me | Н/Д | Пользовательское изображение | CSS |
Codepen.io
Codepen.io — бесплатный веб-сайт для размещения фрагментов кода. На этом сайте есть бесплатный редактор CSS clip-path. Этот инструмент по умолчанию имеет 37 форм. Он имеет набор инструкций в верхней части. В инструкциях рассказывается, как добавлять/удалять точки на фигуре.
Это означает, что вы можете не только изменять размер фигуры, но и добавлять и удалять столько точек, сколько хотите. Это позволяет сделать любую нестандартную форму с помощью этого инструмента. Вы также можете сохранить новые фигуры в предустановке, расширив коллекцию фигур. Если вы вносите изменения в исходную форму (без изменения точек), также воспроизводится анимация до и после. Что касается кода, этот инструмент дает вам SVG-код фигуры вместе с путем клипа CSS. Он также показывает предустановленный код, поэтому вы можете легко копировать и сохранять свои пользовательские / любимые формы и загружать их обратно, когда это необходимо.
Особенности:
- Количество форм : Коллекция из 37+ форм.
- Пользовательский полигон : Выполнимо.
- Фон фигуры : Изображение с возможностью загрузки/импорта изображения.
- Дополнительная функция : создание набора пользовательских форм.
- Код CSS : Код пути клипа, код SVG и предустановленный код формы.
Домашняя страница
CSSPortal.com
CSSPortal.com — это бесплатный веб-сайт, предлагающий инструменты CSS и другие ресурсы. У него есть бесплатный онлайн-инструмент для создания CSS-форм. Этот инструмент имеет набор из 27 фигур с пользовательским полигоном. Он показывает фигуры в сетке в правой части экрана. Когда вы выбираете фигуру, она показывает интерактивный предварительный просмотр на экране с фоновым изображением. В зависимости от формы вы получаете такое же количество регулируемых точек, как и количество углов в форме. Вы можете просто изменить положение этих точек, чтобы настроить форму. Вы также можете загрузить любое изображение в качестве фона для идеального выреза. В конце концов, вы можете задать размеры формы и получить для нее код CSS clip-path.
Особенности:
- Количество фигур : Коллекция из 27 фигур.
- Пользовательский полигон : Выполнимо.
- Фон фигуры : Изображение с возможностью загрузки/импорта изображения.
- Код CSS : Код Clip-path и код, совместимый с WebKit.
Домашняя страница
10015.io
10015.io содержит бесплатный онлайн-инструмент для создания CSS-форм. Этот инструмент имеет набор из 23 различных типов фигур, охватывающих также пользовательский полигон. Вы можете выбрать форму и настроить ее в соответствии с вашими предпочтениями. Вы также можете установить ширину и высоту фигуры в пикселях. Он показывает образец изображения на фоне формы. Вы также можете добавить свое собственное изображение, добавив к нему URL-адрес. Таким образом, вы можете настроить форму так, чтобы она наилучшим образом соответствовала изображению, которое вы хотите использовать. Под фигурой вы получаете код CSS clip-path для фигуры. Вы можете скопировать его оттуда и использовать там, где вы собираетесь его использовать.
Особенности:
- Количество форм : Коллекция из 23 фигур.
- Пользовательский полигон : Выполнимо.
- Фон фигуры : Изображение с возможностью импорта изображения через URL.
- Код CSS : Код пути клипа.
Домашняя страница
BennettFeely.com
BennettFeely.com также имеет бесплатный инструмент для создания CSS-фигур онлайн. Этот инструмент имеет большую область холста с набором фигур с правой стороны. Он охватывает в общей сложности 27 форм, включая пользовательский многоугольник. Вы можете просто выбрать фигуру, чтобы просмотреть ее на холсте, где вы можете взаимодействовать с углами, чтобы соответствующим образом изменить ее размер. У него есть образец изображения в фоновом режиме, но вы можете получить любое изображение по вашему выбору, используя URL-адрес. Инструмент также позволяет изменять размер демо. Это может пригодиться, когда вам нужно быть очень осторожным с мелкими деталями, разрешением или пикселизацией.
Этот инструмент дает вам код CSS clip-path, который вы можете скопировать и использовать.
Особенности:
- Количество фигур : Коллекция из 27 фигур.
- Пользовательский полигон : Выполнимо.
- Фон фигуры : изображение с возможностью импорта через URL-адрес.
- Код CSS : Код пути клипа.
Домашняя страница
WebDevPuneet.com
WebDevPuneet.com — еще один бесплатный веб-сайт для онлайн-генерации фигур CSS. Инструмент на этом веб-сайте дает вам прокручиваемый список из 27 фигур вверху. Это также включает в себя пользовательскую форму многоугольника, которую вы можете использовать для создания своей собственной формы. Оставшись в форме, вы получаете возможность импортировать собственное фоновое изображение. Вы можете просто добавить URL-адрес и получить изображение. При этом вы можете изменить размер формы на экране. После этого вы можете просто выбрать и скопировать оттуда код пути клипа.
Особенности:
- Количество фигур : Коллекция из 27 фигур.
- Пользовательский полигон : Выполнимо.
- Фон фигуры : Изображение с возможностью загрузки/импорта изображения.
- Код CSS : Код Clip-path и код, совместимый с WebKit.
Домашняя страница
Unused-CSS.com
Unused-CSS.com — еще один бесплатный веб-сайт с онлайн-генератором форм CSS. Этот инструмент поможет вам создать clip-path для 17 различных фигур. Он перечисляет фигуры ниже в прокручиваемом горизонтальном списке. Вы можете выбрать фигуру оттуда, чтобы перенести ее на холст. Фигуры загружаются сплошным цветом. Вы можете изменить цвет по своему вкусу, а также можете загрузить файл изображения в качестве фона. При этом вы можете изменить размер фигуры, используя количество точек в форме. Вы также можете удалять точки из формы, но не можете добавлять новые.
Это позволяет в некоторой степени создавать пользовательские формы. Вы можете соответствующим образом настроить форму, а затем получить для нее код CSS.
Особенности:
- Количество фигур : Коллекция из 17 фигур.
- Пользовательский полигон : Частично выполнимо.
- Фон формы : сплошной цвет с возможностью загрузки изображения.
- Код CSS : Код Clip-path и код, совместимый с WebKit.
Домашняя страница
UpLabs.com
UpLabs.com содержит бесплатный инструмент, который можно использовать для создания форм CSS в режиме онлайн. Это простой инструмент, который сначала поддерживает в общей сложности 4 формы. Но это позволяет вам добавлять больше узлов из этих фигур. Это позволяет вам сделать любую возможную форму многоугольника. Помимо форм, в качестве фона используется демо-изображение, которое нельзя заменить. Этот инструмент показывает код CSS clip-path на экране по мере изменения формы.
Когда вы довольны формой, вы можете просто скопировать код оттуда.
Особенности:
- Количество форм : Набор из 4 фигур.
- Пользовательский полигон : Выполнимо.
- Фон фигуры : Демонстрационное изображение.
- Код CSS : Код пути клипа.
Домашняя страница
Alextade.me
Alextade.me — еще один веб-сайт с бесплатным онлайн-генератором форм CSS. Этот инструмент имеет самый длительный процесс создания фигур CSS. Вместо того, чтобы позволить вам перемещать точки, он показывает поле для каждой точки. Вы можете изменить положение этой точки, используя соответствующее поле. Вы можете добавлять и удалять коробки, чтобы сделать желаемую форму. Этот подход позволяет создать любую форму многоугольника, но требует значительно больше времени. Но это хороший инструмент, который можно использовать для экспериментального изучения clip-path.