Создать код радиуса границы CSS3
Инструменты CSS3
- Инструмент радиуса границы CSS3
- Инструмент теневого кода окна CSS3
- Инструмент тени текста CSS3
- Инструмент кода градиента CSS3
Используйте этот онлайн-генератор кода радиуса границы CSS3 , чтобы добавить закругленные углы к вашим HTML-элементам.
Свойство border-radius поддерживается в IE9+, Firefox 4+, Chrome, Safari 5+ и Opera.
Сделать все углы равными
↖ Радиус границы:
↗ Вверху справа:
↘ Внизу справа:
↙ Внизу слева:
Код CSS
Ссылка на эту страницу: «Инструмент радиуса границы CSS3»
Вы можете сослаться на этот инструмент, используя этот код HTML. Просто скопируйте и вставьте его на свою страницу:
org/css3/border-radius/">
Создать код радиуса границы CSS3
Если у вас возникли проблемы с использованием этого генератора радиуса границы CSS3 , пожалуйста свяжись со мной.
28 августа 2022 г.
Человеку (лицам), нападающему на этот сайт: пожалуйста, прекратите
У меня нет ни ресурсов, ни интереса, чтобы дать отпор. Поэтому, если вы удалите его, он будет просто недоступен для многих законных пользователей. Если у этих атак есть причина, дайте мне знать.
15 августа 2022 г.
Исправлен инструмент стеганографии (ошибки сервера)
За последние несколько недель вы, возможно, видели одну или две ошибки сервера в инструменте стеганографии. Эти периодические ошибки были побочным продуктом недавнего перемещения сервера и теперь исправлены.
15 июля 2022 г.
Вывод из эксплуатации хостинг-сервера через (почти) 10 лет
После того, как предыдущий сервер стабильно работал почти десять (!) лет, пришло время вывести эту машину из эксплуатации.
Итак, ManyTools теперь перемещен в новый блестящий кластер хостинга. Вы можете/должны заметить некоторые улучшения скорости. Если вы заметите какие-либо проблемы или нарушения, я буду рад, если вы сообщите мне, чтобы я мог их проверить.
27 сентября 2017 г.
Выход из Coinhive (майнинг биткойнов в браузере)
Благодарим вас за отзыв о нашем (кратком) тесте майнинга биткойнов в браузере. Это казалось хорошим способом поддержать этот веб-сайт, но оказалось слишком тяжелым бременем для наших посетителей. Поэтому мы решили удалить его. Приносим свои извинения за причиненные неудобства.
18 августа 2017 г.
Миграция на HTTPS
Рад сообщить, что теперь Manytools полностью поддерживает Chrome-62, спасибо Google! Безопасное соединение требовалось очень давно. Сегодня мы наконец добрались до обновления сайта для работы на HTTPS. –
(Начиная с октября 2017 г. в Chrome (версия 62) отображается предупреждение «НЕ БЕЗОПАСНО», когда пользователи вводят текст в форму на странице HTTP, а также для всех страниц HTTP в режиме инкогнито.
)
CSS Generators — Smashing Magazine
- 20 минут чтения
- CSS, Генераторы, Инструменты, Обзоры новостей
- Поделиться в Twitter, LinkedIn
Об авторе
Ежедневно переключаясь между тремя языками, Айрис известна своей любовью к лингвистике, искусству, веб-дизайну и типографике, а также своей золотой жилой … Больше о Iris ↬ В новой короткой серии сообщений мы расскажем о некоторых полезных инструментах и методах для разработчиков и дизайнеров. На этот раз речь пойдет о генераторах CSS: от теней CSS до смягчения градиентов, наложений CSS и рисунков CSS.На прошлой неделе мы рассмотрели инструменты аудита CSS, а на этой неделе мы рассмотрим полезные генераторы для всего CSS: от градиентов до теней и кривых Безье, треугольников и шкал шрифтов. Всего несколько полезных инструментов для вашего пояса инструментов, которые всегда будут под рукой.
Генератор теней CSS
Ищете инструмент, который будет автоматически генерировать код CSS для действительно гладких многослойных теней ? Что ж, вам понравится SmoothShadow.
Вдохновленный статьей, написанной Тобиасом Ахлином Бьерроме, этот отличный инструмент был создан, чтобы помочь любому сгенерировать нужный код на месте.
После того, как вы попробуете его, будет трудно не использовать его. Небольшой инструмент позволяет визуально создавать многослойную гладкую коробчатую тень, а также настраивать альфа-канал, смещение и размытие с помощью отдельных кривых смягчения. И стало еще лучше: создатель инструмента Филипп Брамм также выпустил SmoothShadow в качестве плагина для Figma, так что вы можете оптимизировать свой рабочий процесс так, как всегда хотели.
Генератор радиуса границы CSS
Когда мы думаем о border-radius , мы обычно думаем о нескольких простых значениях — возможно, 8px или 11px, или, может быть, 16px. Тем не менее, border-radius может быть довольно причудливым, и генератор fancy-border-radius позволяет легко их генерировать.
Инструмент обеспечивает визуализацию не только простых круглых форм, но и органических форм, используя комбинацию восьми значений. По сути, мы создаем перекрывающиеся эллипсы, которые создают окончательную форму. Инструмент также доступен как инструмент командной строки, поэтому вы также можете запускать его локально.
Генератор кубических кривых Безье
Иногда анимация кажется неправильной, не так ли? Возможно, продолжительность отключена, или смягчение причудливое, и выяснение этого может занять довольно много времени. С кубическим Безье Леа Веру вы можете просматривать и сравнивать анимации , замедлять их и даже настраивать визуально. А затем скопируйте и вставьте фрагмент CSS, чтобы сразу же подключить его к вашему проекту.
Идеальные кубические кривые Безье (Большой превью) А если вам нужна базовая или сложная CSS-анимация @keyframe, Keyframes.app предоставляет визуальный редактор временной шкалы , похожий на программное обеспечение для редактирования видео.
Вы можете добавлять шаги, изменять размер и положение, применять преобразования и изменения цвета, а также использовать CSS для копирования и вставки. Ну и не забудьте панель анимации в Chrome и Firefox для отладки.
Ослабление градиентов
При работе с градиентами мы часто полагаемся на линейные градиенты, переходя от одного цвета к другому. Однако линейные градиенты имеют четкие края в начале или конце. Есть способ немного улучшить градиенты с помощью функций плавности. Итак, Андреас Ларсен создал небольшой редактор Easing Gradients Editor, который позволяет нам создавать и предварительно просматривать плавные градиенты в CSS. Инструмент также доступен в виде плагина Sketch и плагина PostCSS. Вы можете использовать палитру цветов, но, к сожалению, пока не можете добавить фактическое значение цвета HEX.
Линейные градиенты имеют четкие края в начале или конце, и мы можем исправить это с помощью функций плавности. (Большой предварительный просмотр)Цветовые палитры для визуализации данных
Иногда для очень специфической задачи требуется очень специфический тип цвета.
Например, если вы работаете над проектом визуализации данных — т.е. круговые диаграммы, сгруппированные гистограммы, карты — вам, вероятно, понадобится набор цветов, которые визуально равноудалены . Вот когда палитра цветов данных LearnUI может стать очень полезной. В таких случаях лучше использовать 9Диапазон оттенков 0015, , чтобы пользователи могли быстрее определять различия. Действительно, легче отличить желтый от оранжевого , чем синий от синего, но на 15% светлее .
С помощью этого инструмента вы выбираете, сколько цветов вам нужно и нужен ли вам светлый или темный цвет фона, а также выбираете, хотите ли вы палитру по умолчанию, палитру одного оттенка или расходящуюся цветовую шкалу. Получив его, вы можете скопировать шестнадцатеричные значения и экспортировать их в формате SVG для использования в Sketch, Figma или Adobe XD.
LearnUI также предоставляет доступный генератор цвета и довольно необычный генератор градиента с различными типами градиента, интерполяцией, углом, замедлением и желаемой плавностью градиента.
Больше после прыжка! Продолжить чтение можно ниже ↓
Познакомьтесь с Smashing Online Workshops по интерфейсу и UX , с практическими выводами, живыми сессиями, видеозаписями и дружескими вопросами и ответами. О дизайн-системах, UX, веб-производительности и CSS/JS. С Брэдом Фростом, Стефани Троет и многими другими.
Перейти к семинарам ↬
От цветовых оттенков CSS к треугольникам и поддельным данным
Представьте, что вам просто нужно найти стили треугольников CSS для элементов и псевдоэлементов. Или, возможно, немного усовершенствовать цветовую палитру, исследуя оттенков и оттенков данного цвета.
Или, возможно, создайте линейный и радиальный градиент CSS для раздела страницы. Нет необходимости делать все вручную или пытаться найти эти фрагменты CSS по всему Интернету. Вы всегда можете найти их на Омацури.
Omatsuri означает фестиваль на японском языке, и сайт представляет собой прекрасный маленький фестиваль браузерных инструментов с открытым исходным кодом для повседневного использования. На сайте вы найдете генератор треугольников, генератор цветовых оттенков, генератор градиента, разделители страниц, компрессор SVG, преобразователь SVG → JSX , генератор поддельных данных, курсоры CSS и коды событий клавиатуры. Спроектирован и построен Виталием Ртищевым и Владом Шиловым. Также доступен исходный код сайта.
Наложение CSS с генератором высокой контрастности
Если вы хотите, чтобы текст лучше выделялся на фоне изображения, есть небольшая хитрость: вы можете использовать наложение CSS с линейным градиентом с определенной непрозрачностью поверх изображения, чтобы улучшить цветовой контраст.
Spotify, например, использует эту технику.
Хотя для всего этого требуется всего одна строка кода, остается еще один вопрос, на который нужно ответить: как определить непрозрачность, используемую для наложения? Поиск оптимального наложения поможет вам это выяснить. Вы загружаете изображение, вводите свой текст и выбираете наложение и цвета текста, и инструмент показывает вам предварительный просмотр того, как выглядит наложение применительно к вашему изображению, а также оптимальную прозрачность наложения. Маленькая деталь, которая имеет большое значение.
Генератор цветовой палитры CSS
Существует множество фантастических инструментов для создания вашей цветовой палитры, но Coolors.co — это небольшой изящный инструмент, который делает достаточно для создания палитр и изучения различных оттенков цвета. Вы можете создать палитру из фотографии или коллаж из фотографий, проверить на дальтонизм и быстро настроить оттенок, насыщенность, яркость и температуру.
Очевидно, что он также имеет трендовые цветовые палитры.
Вы также можете создать палитру градиентов между двумя цветами, а также создать и экспортировать собственный градиент в формате CSS. Инструмент доступен в виде приложения для iOS, надстройки Adobe и расширения для Chrome.
Еще один генератор цвета, также доступный в виде приложения для iOS, надстройки Adobe и расширения для Chrome. (Большой предварительный просмотр)И если вам нужно что-то более сложное для градиентов в вашем наборе инструментов, CSSGradient.io — это еще один инструмент для всех ваших потребностей в градиентах — будь то линейные или радиальные градиенты, цветовые оттенки или градиентные фоны.
Кроме того, Gradient Generator создает от 1 до 40 ступенчатых градиентов из двух выбранных вами цветов. Каждый градиент автоматически представляется в форматах HEX, HSL и RGB — все, что вам нужно сделать, это просто щелкнуть значение, и оно сразу же будет скопировано в буфер обмена.
Генератор цветовых градиентов CSS
Ручной подбор цветов для создания цветового градиента требует опыта проектирования и хорошего понимания цветовой гармонии. Если вам нужен градиент для фона или элементов пользовательского интерфейса, но вы не чувствуете себя достаточно уверенно, чтобы справиться с задачей самостоятельно (или если вы спешите), генератор цветового градиента, созданный ребятами из My Brand New Logo, имеет прикрою.
Генератор цветовых градиентов (большой предварительный просмотр)На основе алгоритмов цветовых градиентов генератор создает хорошо сбалансированные градиенты на основе выбранного вами цвета. Существует четыре различных стиля градиентов: от тонкого до эффекта перламутра и интенсивного, глубокого цветового градиента. Вы можете настроить градиент с помощью ползунков и, как только вы будете довольны результатом, скопируйте и вставьте сгенерированный код CSS, чтобы использовать его в своем проекте.
Генератор шкалы шрифтов CSS
А что, если вы хотите создать надежную типографскую систему, которая хорошо работает как на мобильных устройствах, так и на настольных компьютерах? Обычно вы полагаетесь на установленные типографские шкалы, которые обеспечивают типографскую иерархию для всего, от абзацев до подписей и заголовков.
Type-Scale от Джереми Черча — фантастический небольшой инструмент, который поможет вам построить типографскую шкалу и экспортировать ее в CSS. Небольшие масштабы обычно хорошо подходят для просмотра на мобильных устройствах, средние масштабы хорошо подходят для просмотра на настольных компьютерах, а большие масштабы могут хорошо работать для маркетинговых сайтов.
Инструмент предоставляет 8 предопределенных шкал гармонического типа (но вы также можете определить собственную), от Major Third до Perfect Fifth, и генерирует последовательность размеров шрифта с определенным геометрическим коэффициентом приращения. Вы можете настроить такие параметры, как высота строки и вес тела, уточнить текст предварительного просмотра и получить сгенерированный CSS — или отредактировать его с помощью образца шрифта на CodePen. Кроме того, вы также можете проверить старый добрый ModularScale.
com Тима Брауна.
Еще один прекрасный инструмент — калькулятор типографской шкалы от Jean-Lou Desire, который, в отличие от инструментов Тима и Джереми, создает модульную шкалу, используя три определяющих свойства (начальный член, коэффициент приращения и количество размеров в шкала) аналогична музыкальной гамме. Результатом является более плавный размер для дизайнеров с несколькими дополнительными параметрами для составления большего количества значений, например. для небольших примечаний или больших цитат.
Калькулятор высоты строки
Если вы строите шкалу шрифта на основе базовой сетки, необходимо ответить на сложный вопрос: какова правильная высота строки для каждого размера текста в вашей шкале? Калькулятор Good Line-Height от Fran Pérez посчитает за вас.
Рассчитайте идеальную высоту линии для базовой сетки. (Большое превью) Для расчета результатов нужно ввести всего три параметра: размер шрифта, множитель и высоту строки сетки.
Размер шрифта является ключом к тому, чтобы ваш текст хорошо располагался на базовой сетке, независимо от размера текста, множитель дает вам контроль над расстоянием между строками, а высота строки сетки определяет высоту каждой строки в вашей базовой сетке.
Генератор жидких заголовков
Благодаря clip() , вы можете установить размер шрифта, который увеличивается вместе с окном просмотра, но не становится ниже или выше минимального и максимального размера шрифта, который вы определяете. Чтобы помочь вам найти идеальные значения CSS для плавного заголовка и контролировать его масштабирование в разных окнах просмотра, Эрик Андре Якобсен создал инструмент «Гибкая типографика».
clip() , чтобы ваши заголовки были плавными. (Большой предварительный просмотр) Вы вводите минимальный и максимальный размер шрифта, а также минимальную и максимальную ширину области просмотра, и инструмент вычисляет не только clip() для вас, но также показывает демонстрацию того, как выглядят спецификации применительно к реальному заголовку.
Еще один полезный генератор, который поможет вам определить правило clip() для вашего проекта, принадлежит Максиму Рудье. Он работает аналогично инструменту Эрика, но также позволяет вам выбрать семейство шрифтов и диапазон, который вы настраиваете с помощью ползунка, вместо того, чтобы вводить конкретные минимальные и максимальные значения.
CSS Capsize Generator
Чтобы свести к минимуму дезориентацию и дорогостоящие сдвиги макета во время загрузки, нам нужно сопоставить резервный шрифт с веб-шрифтом. Сопоставитель стиля шрифта Моники Динкулеску позволяет нам свести к минимуму резкое смещение, сопоставив запасной шрифт и предполагаемую высоту и ширину x веб-шрифта, и мы могли бы использовать f-mods, чтобы сделать то же самое с новыми свойствами CSS.
Небольшой инструмент, который регулирует размер шрифта, чтобы высота заглавных букв была кратна вашей сетке. (Большой предварительный просмотр) По умолчанию многие шрифты поставляются с предопределенными полями и интерлиньяжами, поэтому, если резервный шрифт и веб-шрифт различаются, весь макет значительно изменится.
Capsize регулирует размер шрифта, чтобы высота заглавных букв была кратной вашей сетке. Это достигается путем обрезки пространства над заглавными буквами и под базовой линией. Таким образом, сохраняя одинаковую высоту строки в резервном шрифте и веб-шрифте, инструмент генерирует «магические числа», чтобы обеспечить плавное переключение.
Генератор сложных селекторов CSS
Представьте, что вам нужно создать таблицу элементов. Возможно, вы захотите оставить их в одном ряду, если есть 3 или меньше элементов, но затем охватить две полные строки для 6 и 8 элементов, будучи просто списком карточек с 10 элементами и более. Как бы вы его построили? Хотя многие из этих ситуаций можно исправить с помощью CSS Grid и Flexbox, иногда вы можете столкнуться с довольно сложной ситуацией, для которой потребуется довольно сложный селектор CSS.
Для создания сложных селекторов, которые в значительной степени зависят от точного количества дочерних элементов или братьев и сестер в контейнере.
(большой превью)Для этой цели Дрю Миннс создал генератор для селекторов количества — сложных селекторов CSS, которые позволяют применять стили к элементам на основе количества родственных элементов. Например, когда вы хотите применить стили ко всем элементам, когда имеется , по крайней мере, 5 элементов и одноуровневых элементов, или не более 10, или, возможно, от 3 до 5 элементов.
Конечный селектор может быть непростым для понимания, поэтому стоит убедиться, что вы предоставили правильное объяснение в коде того, на что он должен нацеливаться.
CSS
clip-path Generator Благодаря свойству clip-path мы можем создавать сложные формы в CSS, вырезая элемент до базовой формы, будь то простой круг, причудливый многоугольник или даже SVG-источник. Конструктор клипов CSS Clippy — это визуальный инструмент, который помогает вам создавать и настраивать пути клипов прямо в браузере.
(Большой предварительный просмотр)Для начала вы выбираете фигуру и демонстрационный фон в меню Clippy. Затем вы можете перетаскивать точки фигуры, чтобы создать любую понравившуюся вам фигуру — CSS с цветовой кодировкой не только мгновенно отразит ваши изменения, но и выделит их, чтобы помочь вам понять, как ваш выбор влияет на код.
Если вся штука clip-path все еще кажется вам немного абстрактной или если вы ищете классный пример того, как использовать ее в реальном проекте, обязательно ознакомьтесь с всплывающим эффектом, который Микаэль Ainalem создан с clip-path .
Генератор CSS Grid Layout Generator
CSS Grid Layout может быть довольно простым, но иногда вам может понадобиться поиграть со свойствами Grid, чтобы выяснить, какое поведение будет правильным для вашего макета. Для начала мы можем использовать CSS Grid Generator Сары Драснер, Griddy Дрю Миннса, CSS Grid Cheat Sheet Generator Али Алаа и LayoutIt от LenioLabs — все они позволяют вам определять сетку и контейнеры в сетке, а также промежутки и он сразу генерирует CSS.
Если вам нужно больше рекомендаций по Flexbox, Flexbox Patterns содержит множество примеров, с которыми можно поиграть.
Или вы можете использовать одну строку решений CSS. Уна Кравец создала 1-Line Layouts, набор из десяти современных методов компоновки CSS и размеров. Начиная с самой большой загадки из всех (центрирование) и охватывая все, от классического макета Святого Грааля и «Деконструированного блина» до применения clip() и соблюдения соотношения сторон, коллекция Уны полна маленьких лакомых кусочков, которые связаны между собой. чтобы сделать вашу жизнь как разработчика проще.
Каждый метод поставляется с демонстрацией, CodePen, с которым можно повозиться, и информацией о поддержке браузерами. Уна также записала видео , в котором она более подробно объясняет каждое однострочное чудо. Независимо от того, новичок вы или профессионал, этот ресурс обязательно вам пригодится.
Генератор составных сеток CSS
Составные сетки обеспечивают невероятную гибкость и широкие возможности для творчества. Состоящие из двух или более сеток любого типа (столбчатых, модульных, симметричных и асимметричных) на одной странице, они могут занимать отдельные области или перекрываться.
Генератор составных сеток (Большой предварительный просмотр)Небольшой инструмент, который поможет вам создавать составные сетки и экономить время, рисуя бесконечные варианты, теперь исходит от Мишель Баркер: генератор составных сеток. Все, что вам нужно сделать, это ввести количество столбцов для каждой из ваших сеток, и они будут объединены в составную сетку. Отличное дополнение к вашему цифровому набору инструментов. И если вам нужно создать модульную сетку, сетку с несколькими столбцами или сетку рукописи для вашего проекта печати, Modular Grid Calculator предоставит подробное объяснение того, как это сделать в InDesign.
CSS-фильтры и генератор режимов наложения
Фильтр CSS drop-shadow имеет отличную поддержку, но довольно недооценен — настоящий позор, учитывая тот факт, что он может сэкономить вам много времени, разбираясь с box-shadow .
Как объясняет Мишель Баркер в своем блоге, drop-shadow позволяет вам использовать значения для x-offset, y-offset, радиуса размытия и цвета — так же, как его более заметный брат box-shadow . Однако есть одно большое преимущество: тень соответствует не ограничивающей рамке элемента (с которой часто начинается взлом при использовании box-shadow ), а непрозрачным частям изображения. Идеально, если вы хотите применить тень к прозрачному логотипу PNG или SVG, например, или даже к обрезанной фигуре.
Существует множество фильтров CSS, поэтому, если вам нужно найти именно тот набор фильтров, который подходит для вашего проекта, воспользуйтесь редактором фильтров CSS от Mads Stoumann для тестирования всех 9 фильтров.0015 поддерживает фильтры , а также некоторые подарки, которые также предоставил Мэдс. Очевидно, что CSS тоже генерируется на лету.
Помимо фильтров, существует множество вариантов режимов наложения CSS.
Если вы хотите просмотреть, как некоторые визуальные эффекты могут работать вместе, вы можете использовать CSS Duotone Generator Рика Мецгера. Инструмент включает параметры масштабирования, интервала, размытия и непрозрачности изображения, а также все режимы наложения для изображений переднего плана и фона. Конечно, инструмент также генерирует HTML и CSS.
Еще после прыжка! Продолжить чтение можно ниже ↓
Познакомьтесь с Smashing Online Workshops по интерфейсу и UX , с практическими выводами, живыми сессиями, видеозаписями и дружескими вопросами и ответами. О дизайн-системах, UX, веб-производительности и CSS/JS. С Брэдом Фростом, Стефани Троет и многими другими.
Перейти к семинарам ↬
Генератор заполнителей размытого изображения
Заполнитель изображения — это эффективный способ улучшить воспринимаемую производительность сайта при загрузке изображения.
В своем стремлении найти самые быстрые и красивые заполнители изображений для Интернета, Джо Белл решил сам найти решение. Результат: Плейсхолдер.
Плайсхолдер, основанный на наборе помощников Node.js, превращает ваши изображения в легкие размытые изображения-заполнители. Есть несколько подходов на выбор: CSS (который рекомендуется), SVG, Base 64, Blurhash и экспериментальный Blurhash в CSS.
Генератор героев
Вы устали создавать одного и того же героя снова и снова? Генератор героев Сары Драснер здесь, чтобы помочь. Он позволяет создавать отзывчивых героев всего за несколько кликов в зависимости от ваших предпочтений.
Легко создавайте героев. (Большой предварительный просмотр) Вы сами решаете, какой градиент вы хотите применить к главному изображению, уменьшению градиента и интервалу между заголовками. И если вы хотите включить кнопку, генератор также предоставит вам возможность настроить цвета кнопки (включая цвет при наведении и градиент) и радиус кнопки.
Как только вы будете довольны результатом, вы можете скопировать и вставить код и сразу же использовать его в своем проекте. Настоящая экономия времени!
Генератор карт изображений
Карты изображений позволяют создавать интерактивные области на изображении. Если вы хотите создать карту изображения, но не хотите возиться с координатами для определения интерактивных областей, вам поможет imagemaps.net.
Создавайте аннотированные интерактивные изображения. (Большой предварительный просмотр) Сайт имеет графический пользовательский интерфейс, упрощающий процесс. После того, как вы загрузили свое изображение, вы можете использовать инструменты «Перо», «Прямоугольник» и «Многоугольник», чтобы нарисовать области, на которые можно щелкнуть. Чтобы настроить их и, самое главное, придать им функциональность, вы можете дать каждому региону имя, назначить ему ссылку и настроить его цвет, высоту и ширину. Щелчок по кнопке «Экспорт» предоставляет вам карту HTML и код React, которые вы можете скопировать и вставить в свой проект.
Генератор анимаций CSS
Довольно легко определить разницу между анимацией, которая выглядит немного не так, и анимацией, которая сделана просто хорошо. Но настройка анимации ключевых кадров или переходов вручную может занять довольно много времени. Animista предоставляет библиотеку анимаций и переходов , которую вы можете использовать из коробки. Существует множество предустановок для входов и выходов, выделения текста, действий кнопок и фоновых эффектов. После того, как вы определили анимацию, вы можете скопировать и вставить фрагмент CSS анимации вместе с кодом, сгенерированным Autoprefixer.
Обширная библиотека анимаций и переходов. (Большой предварительный просмотр) CSS Wand предоставляет анимаций наведения и загрузки , но вы также можете использовать анимацию Ladda (кнопки со встроенными индикаторами загрузки) и Eric Spinners (с интеграцией Vue.js). И, возможно, вы хотели бы добавить причудливый поворот в переходах при наведении с помощью Boop! — просто помните о масштабировании с помощью псевдоэлементов и уважайте предпочтения пользователей, которые выбирают уменьшение движения.
3D Генератор параллелепипедов CSS
Джей Томпкинс известен своими забавными 3D-творениями CSS. Может быть, вы уже видели его вертолет, который волшебным образом перемещается при движении мыши? Основой для вертолета и других подобных экспериментов являются адаптивные кубоиды CSS, которыми можно управлять с помощью настраиваемых свойств CSS с ограниченной областью действия.
Генератор для простого создания анимированных 3D-кубоидов. (Большой предварительный просмотр)Теперь, если вы хотите воплотить в жизнь свои 3D-идеи, Jhey’s 3D CSS Cuboid Generator поможет вам. Просто отрегулируйте ползунки, чтобы определить высоту, ширину, глубину и оттенок вашего прямоугольного параллелепипеда, и у вас уже есть код, необходимый для того, чтобы вещи вращались, скручивались, скользили или что-то еще, что вы планируете. Развлекайся!
Генератор рисунков CSS
Мы можем воплотить в жизнь самые сложные макеты с помощью CSS, но мы также можем создавать игривые рисунки и рисунки.
Юань Чуан создал веб-компонент для рисунков с помощью CSS . Компонент включает в себя множество служебных функций и сокращенных свойств, с которыми можно поиграть. В результате компонент генерирует сетку из div вместе с простым CSS. Исходный код также доступен на GitHub.
Полезные маленькие помощники веб-разработчиков
Если вам нужно еще несколько инструментов, к счастью, есть много старых добрых веб-разработчиков, которые собрали свои любимые полезных инструментов в одном месте под названием Tiny Helpers. Поддерживаемый Стефаном Юдисом, вы обязательно найдете всевозможные инструменты: от API, специальных возможностей и цвета до шрифтов, производительности, регулярных выражений, SVG и Unicode.
Конечно, на других платформах есть много других материалов, таких как очень полезная ветка Twitter Джоша В.