Хаки и Скрипты Next Generation CMS

17 лучших генераторов кода CSS3

irbees2008 irbees2008 Опубликовано - 11 - июля Онлайн сервисы
10300 - 0
  • Адаптировал: irbees2008
  • Уровень сложности исполнения: Справочник

Вспоминая CSS 2.1 можно сказать, что он был очень прост. Большинство разработчиков легко могли запомнить несколько десятков свойств, и не обращаться к справочникам каждые две минуты.
В CSS3 все изменилось. Появилось 116 новых свойств с различными префиксами для разных браузеров и с разным синтаксисом. Запомнить всё довольно сложно, особенно для новичков. К счастью, есть большое количество бесплатных онлайн-инструментов, которые помогут вам создать современный CSS3-код, вам останется только скопировать его и вставить в ваши таблицы стилей.
В данном обзоре Вы познакомитесь с наиболее популярными генераторами CSS3-стилей.

CSS 3.0 Maker


css3-generators-screen1.jpg (25.9 Kb)

CSS 3.0 Maker является изумительным инструментом. Вы можете определить радиусы блоков, градиенты, тени текста, тени блоков, трансформации, переходы и повороты изменяя положения всего лишь несколько ползунков. Область предварительного просмотра показывает результат и указывает какие десктопные и мобильные браузеры поддерживают свойства.

CSS-код можно скопировать из окна CodeView и загрузить HTML-файл, который демонстрирует эффект.


LayerStyles.org

css3-generators-screen2.jpg (9.37 Kb)

Пользователи фотошопа полюбят LayerStyles. CSS3 эффекты настраиваются с помощью диалогового окна, которое сразу узнают те, кто пользуется продуктом Adobe. Код может быть скопирован с динамически обновляемого окна "CSS-код", в нижней левой части экрана.


CSS3 Generator

css3-generators-screen3.jpg (13.22 Kb)

CSS3 генератор использует wizard-подобный подход для создания стилей. Выберите один из различных эффектов, включая border-radius, text-shadow, box-shadow, multiple-columns, transforms и transitions. Затем установите нужные значения для свойств и увидите результат в окне предварительного просмотра.

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


westciv CSS3 Sandbox

css3-generators-screen4.jpg (17.7 Kb)

Сервис был разработан гуру-CSS3 и совладелец портала SitePoint John Allsopp. Градиенты, текстовые эффекты, свойства окон и трансформации легко настраиваются с помощью ползунков. Полученный код и окно предварительного просмотра динамически обновляется соответствующим образом.

Инструмент может не так хорош, как некоторые из его конкурентов, но он быстр и функционален. Рекомендуется.


CSS3 Playground

css3-generators-screen5.jpg (17.25 Kb)

CSS3 Playground была создана разработчиком-фрилансером Mike Plate. Наряду с поддержкой широкого диапазона CSS3-свойств, это единственный инструмент, который позволяет просматривать эффекты для более чем одного элемента.


CSS3.me

css3-generators-screen6.jpg (16.63 Kb)

Если вы хотите что-то простое, быстрое и легкое, этот генератор CSS3 для вас. Это одна из самых красивых утилит, она поддерживает border-radius, box-shadow, прозрачность и различные фоновые градиенты. Вы также можете получить фильтры для IE в результирующем коде.


CSS Tricks Button Maker

css3-generators-screen8.jpg (14.77 Kb)
Button Maker был разработан Chris Coyier of CSS Tricks. Хотя он был задуман как демонстрация технологических возможностей, это не помешало ему быть полезным для разработчиков CSS3!

Button Maker это тот инструмент который позволит легко и быстро создать красивую css3 кнопку.


CSS3 Button Generator

css3-generators-screen7.jpg (19.8 Kb)

CSS3 позволяет создавать великолепно выглядящие кнопки без использования изображений. CSS3 Button Generator позволяет настроить шрифт, отступы, границы, градиентный фон, внутренние тени, тени текста и многое другое.

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

Ultimate CSS Gradient Generator

css3-generators-screen9.jpg (24. Kb)

CSS3 градиенты обладают большими возможностями, но в тоже время они довольно сложны.

Ultimate CSS Gradient Generator действительно лучший генератор градиента. Он использует интерфейс похожий на Photoshop и создает кросс-браузерный код, который включает в себя IE фильтры. К тому же градиенты можно сохранять и делиться с другими. Вы определенно должны добавить в закладки этот инструмент.

CSS3 Gradient Generator

css3-generators-screen10.jpg (20.53 Kb)

Если Ultimate CSS Gradient Generator для Вас слишком "наворочен", вы можете использовать этот вариант. Инструмент позволяет создавать линейные градиенты, добавлять в цвета в любое количество стоп пунктов. Поддерживается старый синтаксис WebKit-браузеров, а также код для Mozilla и других браузеров.

CSS3 Drop Shadow Generator

css3-generators-shadow.jpg (25.69 Kb)

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

Border Image Generator

css3-generators-screen11.jpg (16.35 Kb)

CSS3 WRAP

css3-generators-screen14.jpg (12.42 Kb)

Font Face Generator

css3-generators-screen13.jpg (10.74 Kb)

CSS3 Menu Generator

css3 menu generator

CSS3 Click Chart

css3-generators-screen15.jpg (10.02 Kb)


CSS Border Radius

css3-generators-screen16.jpg (4.34 Kb)

P.S. Если Вы знаете еще какие-нибудь интересные генераторы CSS3-кода, то можете поделиться ссылкой в комментариях.

Можешь почитать и вот эту статейку "Выводим блок по времени на TWIG"

Опрос

Ваше мнение

Какие темы вам интереснее?
Результаты

Последние комментарии

Теги

Anything in here will be replaced on browsers that support the canvas element

Статистика

  • Caйту: 4365 дней
  • Новостей: 566
  • Комменты: 257
  • Зарегистрированно : 660
  • Онлайн всего: [11]
  • Гости: [10]
  • Поисковики: [1] Яндекс
  • Были сегодня : [3] Google, Яндекс, Google
  • SQL запросов: 30
  • Генерация страницы: 0.38сек
  • Потребление памяти: 5.185 Mb 
  •   Яндекс.Метрика