Статьи

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?