Статьи

7 из лучших утилит CSS3

При поиске инструментов CSS3 я обнаружил несколько бесплатных утилит, которые не были типичными генераторами кода или утилитами шрифтов . Надеюсь, вы найдете их такими же полезными, как и я …

CSS3 пожалуйста CSS3 Пожалуйста, скриншот

Из всех инструментов, утилит и генераторов я использую CSS3 Пожалуйста, больше всего. Концепция проста – он показывает элемент с редактируемыми свойствами CSS3. Это быстрое напоминание о синтаксисе и позволяет играть с различными настройками. Настоятельно рекомендуется.

CSSDesk Скриншот CSS Desk

CSSDesk – это инструмент, разработанный Джошем Пайлсом из pixelmatrixdesign.com . Это похоже на CSS3, пожалуйста; начальных стилей меньше, но интерфейс чище, и вы можете редактировать HTML.

CSSPrefixer Скриншот CSSPrefixer

Я принимаю, что префиксы вендоров необходимы, но они все еще являются проблемой. CSSPrefixer может сделать вашу жизнь проще – вставьте в коробку какой-нибудь нефиксированный код, и он вернет все необходимые альтернативы с префиксом поставщика.

Кроме того, вы можете установить приложение Python, чтобы добавить префиксы и минимизировать ваши CSS-файлы.

normalize.css normalize.css скриншот

На первый взгляд, normalize.css является еще одним сбросом CSS. Но вместо сброса стилей, он нормализует их, поэтому они согласованы во всех браузерах. Полезные значения по умолчанию сохраняются – например, поля на заголовках или входные границы.

normalize.css – отличная отправная точка CSS, и весь код комментируется, так что вы можете удалить ненужные функции.

CSS-Давка Скриншот CSS-Crush

Как и многие другие минификаторы CSS, CSS-Crush – это PHP-приложение, которое уменьшает размеры файлов для ускорения загрузки страниц. Тем не менее, у него есть несколько других хитростей в рукаве:

  • Переменные – определяют часто используемые шрифты, цвета или другие свойства
  • Автоматический анализ @import – все CSS-файлы объединены в один
  • Псевдонимы – CSS3-префиксные свойства поставщика могут быть созданы автоматически
  • Макросы – превращают фрагменты в более длинный код
  • Функции – используйте математические формулы в выражениях, например, ширина: процент (480, 960); трансформируется в ширину: 50%;
  • Изображения могут быть импортированы и преобразованы в URI данных.

Ceaser CSS Easing Animation Tool Скриншот Ceaser

CSS3-переходы удивительны, но немногие из нас выходят за рамки простых или линейных вариантов. Ceaser – это простой в использовании инструмент, который предлагает широкий спектр возможностей анимации. Выберите стандартный или предустановленный тип замедления, настройте кривую и скопируйте код.

Когда я могу использовать … скриншот caniuse.com

caniuse.com является одним из самых полезных ресурсов HTML5 и CSS3 в Интернете. Выполните поиск любого свойства или имени API, чтобы определить, какие браузеры для ПК и мобильных устройств поддерживают эту функцию. Инструмент также предоставляет ссылки на соответствующие инструменты веб-сайта и учебные пособия. Добавьте это в закладки сейчас!

Я пропустил ваш любимый инструмент CSS3?