Подписка
Email
Fb
RSS
Twitter
Email

CSS3 генераторы

css3markerЧасто приходится прописывать разные CSS3 стили для всяких блоков, кнопочек, таблиц. Вообще запомнить все эти свойства не так уж и сложно, даже с учетом того, что для различных браузеров приходится писать свой вариант.

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

Теперь приведу несколько таких сервисов — генераторов CSS3.

CSS 3.0 Maker

CSS 3.0 Maker — отличный инструмент. Вы можете задать блоку скругленный уголки, градиент, тень, планые переходы, повороты. Можно задать тень тексту, и все это осуществляется регулированием нескольких ползунков. В областти предварительного просмотра можно посмотреть результат, а так же узнать какие браузеры, в том числе и мобильные, поддерживают эти свойства. CSS-код можно скопировать из окна CodeView.

Видео по работе с сервисом CSS 3.0 Maker :

CSS3 Generator

CSS3 Generator — тоже хороший сервис. Выбираете нужное вам свойство и заполняете поля значениями. В окне можно наблюдать результат и скопировать полученный CSS код.

Как и в предыдущем сервисе, указывается поддержка выбранного свойства браузерами.

Вот еще несколько подобных сервисов, которые могут быть полезны:

Westciv CSS3 Sandbox

CSS3 Playground

CSS3.me

CSS3 Button Generator

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

Данный генератор позволяет настроить шрифт, отступы, границы, градиент фона, внутренние и внешние тени.

Вы можете оставить комментарий.

5 комментариев к записи “CSS3 генераторы”

  1. Кирилл:

    Воспользовался одним из генераторов кода, в своем первом тестовом сайте(страничку сайта создавал строго по вашей инструкции) и в последнем пункте где вы говорите о валидации... Именно эти самые сгенерированные коды не прошли валидацию в моем CSS файле...

    • Само собой, пользуясь генератором вы применили свойства CSS3, а так как CSS3 пока поддерживается не всеми браузерами, применяются префиксы (например, -webkit-border-radius) — они не валидны.

  2. Ястреб:

    Скажите, пожалуйста, каким редактором html вы сейчас воспользовались?

Оставить комментарий

Spam Protection by WP-SpamFree

Яндекс.Метрика