Эта статья была написана в 2011 году и остается одной из наших самых популярных публикаций. Если вы хотите больше узнать о CSS3, вы можете найти эту недавнюю статью о методах преобразования очень интересной.
У меня розовые воспоминания о CSS2.1. Закругленные углы, возможно, вызвали часы горя в Photoshopping, но это было просто. Большинство разработчиков могут вспомнить несколько десятков свойств, не обращаясь к справочникам каждые две минуты.
CSS3 меняет все. Имеется 116 новых свойств * с префиксами нескольких поставщиков и различными синтаксисами. Никто не может ожидать, что вы запомните все. К счастью, есть ряд бесплатных онлайн-инструментов, которые помогут вам создать современный код CSS3 для вырезания и вставки в ваши таблицы стилей…
CSS 3.0 Maker 
CSS 3.0 Maker — потрясающий инструмент. Вы можете определить радиусы блока, градиенты, тени текста, тени блока, преобразования, переходы и повороты, отрегулировав несколько ползунков. Область предварительного просмотра показывает результат и указывает, какие браузеры для настольных компьютеров и мобильных устройств поддерживают эти свойства.
Код CSS можно скопировать из поля Codeview и загрузить в файл HTML, который демонстрирует эффект.
LayerStyles.org
Пользователи Photoshop будут любить LayerStyles. Эффекты CSS3 определяются с помощью диалогового окна стиля слоя, которое будет немедленно знакомо всем, кто использует продукты Adobe. Это легко, логично и приятно использовать.
Код можно скопировать из динамически обновляемого средства просмотра «Код CSS» в левом нижнем углу экрана.
Генератор CSS3
CSS3 Generator использует подобный мастеру подход для определения стилей. Выберите один из множества эффектов, включая радиус границы, тень текста, тень блока, несколько столбцов, преобразования и переходы. Затем заполните несколько полей, чтобы применить их к элементу предварительного просмотра.
Генератор CSS3 показывает, какие браузеры и версии поддерживают этот эффект, и, где это возможно, предоставляет специфический для IE код фильтра.
westciv CSS3 Sandbox
Песочница была разработана гуру CSS3 и участником SitePoint Джоном Аллсоппом. Градиенты, текстовые эффекты, свойства рамки и преобразования можно легко настроить с помощью ползунков. Полученный код и окно предварительного просмотра динамически обновляются соответственно.
Инструмент может быть не таким красивым, как некоторые из его конкурентов, но он быстрый и функциональный. Рекомендуемые.
CSS3 Playground
CSS3 Playground была создана независимым разработчиком Майком Плате . Помимо поддержки ряда свойств CSS3, это единственный инструмент, который позволяет просматривать эффекты более чем на одном элементе и изменять содержимое блоков. Удивительный.
CSS3.me
Если вы хотите что-то простое, быстрое и легкое, этот генератор CSS3 может быть инструментом для вас. Это одна из самых красивых утилит, поддерживающая радиус границы, тень от окна, прозрачность и простые градиенты фона. Вы можете также запросить специфичные для IE фильтры в результирующем коде.
Генератор кнопок CSS3
CSS3-эффекты могут создавать великолепные кнопки без изображений. Генератор кнопок CSS3 позволяет настраивать шрифт, отступы, границу, градиент фона, внутреннюю тень, тени и тени текста, используя элементы управления вверх / вниз, которые могут быть проще и логичнее, чем ползунки.
Помимо предоставления кросс-браузерного кода CSS3, инструмент позволяет хранить стили и делиться ими с другими. Вы можете просматривать показанные кнопки и настраивать свойства для своего собственного использования.
CSS Tricks Button Maker
Button Maker был разработан Крисом Койером из CSS Tricks . Хотя это было задумано как демонстрация технологии, это не помешало быть полезным для разработчиков CSS3!
Button Maker не поддерживает некоторые из наиболее экстремальных свойств CSS3, но это один из немногих инструментов, демонстрирующих эффекты наведения.
Окончательный Генератор Градиента CSS
Если нажать, даже я могу вспомнить свойство text-shadow. CSS3 градиенты? Без шансов. Градиенты могут быть мощными, но они запутаны, и до недавнего времени браузеры webkit использовали другой синтаксис. Если вы не создаете очень простой фон, генератор градиента необходим.
Ultimate CSS Gradient Generator, ну, в общем, окончательный генератор градиента. Он использует интерфейс, аналогичный Photoshop, и создает кросс-браузерный код, который включает в себя фильтры IE. Наконец, градиенты могут быть сохранены и доступны по уникальной ссылке. Вы определенно захотите добавить в закладки этот инструмент.
CSS3 Gradient Generator
Если Ultimate CSS Gradient Generator слишком много усилий, вы можете предпочесть эту альтернативу. Инструмент позволяет создавать линейные градиенты, добавляя цвета в любое количество точек остановки. Создается старый синтаксис webkit, а также код Mozilla, который должен быть совместим с другими браузерами.
Я пропустил ваш любимый генератор кода CSS3?
* Это количество новых свойств полностью составлено. Я понятия не имею, правильно ли это, но звучало разумно. Я сомневаюсь, что кто-нибудь опровергнет это … разве есть какие-нибудь педанты CSS, чтобы сэкономить несколько часов?
Если вам понравилось читать этот пост, вы полюбите Learnable ; место, чтобы узнать новые навыки и приемы у мастеров. Участники получают мгновенный доступ ко всем электронным книгам и интерактивным онлайн-курсам SitePoint, таким как Learn CSS3 .
И если вам понравилось читать этот пост, вы полюбите Learnable ; место, чтобы узнать новые навыки и приемы у мастеров. Участники получают мгновенный доступ ко всем электронным книгам и интерактивным онлайн-курсам SitePoint, таким как Learn CSS3 .
Комментарии к этой статье закрыты. У вас есть вопрос о CSS3? Почему бы не спросить об этом на наших форумах ?