Я ищу работу в IT сфере ✈ Я ищу резюме в IT сфере ✈ Опубликовать статью здесь✈ Инженер схемотехник! 100тыр. Подробнее ✈

Обзор 10 онлайн-генераторов CSS3


С выходом в свет CSS3 жизнь веб-разработчиков стала интересней, забористей и в то же время проще. Чего только стоит новое свойство border-radius, которое избавляет веб-разработчиков от головной боли под названием “закругленные уголки в блоках”. Уж сколько способов изощренных придумали до выхода CSS3 веб-умельцы, чтобы реализовать в html-коде такие блоки. Кроме того,  в CSS3 появились новые креативные эффекты, которые расширяют возможности оформления и форматирования html-кода.
Но, конечно, есть и ложка дёгтя  – реализовав новое свойство CSS3 в одном браузере Вы совершенно не можете быть уверены, что в других браузерах оно будет отображаться так же корректно. Для этого, веб-умельцы уже успели придумать разные способы, кусочки кода,”хаки”, которые часто помогают решить проблему несовместимости в браузерах.
Чтобы помочь разобраться в мноогообразии онлайн-инструментов, которые генерируют CSS3 свойства для разных браузеров, ТопОбзор провёл обзор десяти онлайн-генераторов CSS3.

1.CSS3 Generator

CSS3 Generator – это онлайн инструмент, автоматический генератор CSS3 кода для определенных свойств, таких как  border radius, box shadow, text shadow, RGBA, @FontFace, multiple columns, box resize, box sizing, outline, transitions, transform, selectors, gradients.  В выпадающем меню выбирается нужное свойство и получить готовый CSS3 код. Возле когда будут отображаться иконки в каких браузерах корректно работает данное свойство.

css3-gen-4


2. CSS3 Please!

CSS3 Please! – это кроссбраузерный генератор правил CSS3. Очень простой и наглядный интерфейс – правила располагаются сразу на экране и можно вносить свои данные.  В настоящее время он помогает писать правила для:   border radius, box shadow, text-shadow, RGBA, @FontFace, gradients,  transitions, transform, multiple columns, animation, box resize, box sizing, outline. Для каждого браузера могут понадобиться определенные префиксы, чтобы обеспечить кроссбраузерность, генератор CSS3 Please! автоматически создает эти префиксы.

css3-please


3. CSS3 Click Chart

Click Chart – это еще один функциональный генератор CSS3.  Чтобы сгенерировать желаемое свойство,  нужно кликнуть на определенный блок правил. Click Chart имеет более полный список свойств для генерации CSS3, чем предыдущие инструменты.

css3-chart


4. Border Radius

Название онлайн-генератора Border Radius говорит само за себя – этот сайт генерирует свойство border-radius.

css3-border


5. CSS-Tricks Button Maker

Пожалуй, одним из самых долгожданных правил CSS3 можно назвать свойства для оформления кнопок с разными эффектами (например, закругленные уголки, градиентный фон, тени и т.д.). Онлайновый генератор CSS-Trick Button Maker делает именно это – генерирует код для кнопки с определенными параметрами, которые Вы задаете. Есть, правда, досадный ньюанс, который пока не исправлен – некоторые свойства не работают под IE7-8.

css3-buttonmaker


6. Font Squirrel @Font-Face Kit Generator

Все больше и больше браузеров способно обрабатывать встроенные шрифты, но получить правильный формат для каждого браузера, задача довольно нетривиальная. С ней поможет справиться онлайн-генератор Font Squirrel @Font-Face Kit Generator. Для этого нужно загрузить шрифты TrueType или OpenType и генератор выдаст вам CSS3 файл или EOT файл для нужного браузера.
css3-fon_squ

7. CSS3 Gradient Generator

Простой онлайн-генератор градиента в CSS3.  Вводите свои параметры, получаете код. К сожалению, пока не работает под IE7-8.
css3-gradient

8. CSS3 Sandbox

CSS3 Sandbox – онлайн генератор CSS3 таких свойств как gradient, transform, shadows. Пока небольшой набор параметров, но бещают, что скоро существенно расширится функционал данного генератора.
CSS3Sandbox_thumb

9. Border Image

Border Image  – онлайн-генератор CSS3 свойства border-image, которое позволяет задавать изображения (картинки) для оформления границы блока, а не просто цвет, как раньше. Быстро, наглядно, легко.  К сожалению, это свойство пока не работает под IE7-8.
border image

10. CSS3 Column Generator

CSS3 Column Generator – онлайн-генератор колонок в CSS3. Это крайне полезное свойство для html-вёрстки поддерживается пока в FireFox, Chrome, Safari, Opera. Internet Explorer, как водится, пасет задних.
css3-column
Яндекс.Метрика Яндекс цитирования Рейтинг@Mail.ru

Топ