10 кращих CSS3 генераторів

У мене є приємні спогади про CSS2.1. Закруглені кути, можливо, забирало годину горя у фотошопі, але це було просто. Більшість розробників міг згадати кілька десятків властивостей, не звертаючись до довідників кожні дві хвилини.

CSS3 все змінюється. Є 116 нових властивостей * з декількома префіксами постачальників і різних синтаксису. Ніхто не може бути очікую, що ви запам’ятаєте все. На щастя, є номер на безкоштовних онлайн-інструментів, які допоможуть вам створити сучасний CSS3 код, вирізати і вставляти в свої таблиці стилів…

CSS 3.0 Maker

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

CSS код можна скопіювати з вікна CodeView і завантажити в HTML файл, який демонструє ефект.

LayerStyles.org

Користувачі Photoshop будуть любити LayerStyles. CSS3 ефект визначається за допомогою діалогового стилю шару, який буде відразу ж знайомі, хто використовує Adobe продукти. Це просто, логічно у використанні. Код може бути скопійований з динамічно оновлюватися “CSS код” глядача в нижній лівій частині екрана.

CSS3 Generator

CSS3 генератор використовує майстер-подібний підхід до визначення стилів. Вибрати з різних ефектів, включаючи кордон радіусу, текст тінь, тінь вікна, кілька стовпців, перетворення і переходи. Потім виконаєте кілька блоків застосовувати їх для попереднього перегляду елемента.

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

westciv CSS3 Sandbox

Пісочниця була розроблена CSS3 гуру і SitePoint перекладач для Джон Аллсопп(John Allsopp). Градієнти, текстові ефекти, вікно властивостей і перетворення можна легко регулювати за допомогою повзунків. В результаті коду і вікно попереднього перегляду динамічно оновлюється відповідно.

Інструмент може бути не так красиво, як деякі з її конкурентів, але це швидкий і функціональний.

CSS3 Playground

CSS3 Playground була створена позаштатний розробник Mike Plate. Поряд з підтримкою ряду властивостей CSS3, це єдиний інструмент, який дозволяє переглядати ефекти на більш ніж один елемент і змінити вміст коробки. Дивовижно.

CSS3.me

Якщо ви хочете щось просте, швидке та легке, цей генератор CSS3 може бути інструментом для вас. Підтримує кордони радіуса, коробка тіні, прозорість і простий градієнт фону. Ви також можете запросити IE-спеціальних фільтрів.

CSS3 Button Generator

CSS3 ефект може зробити вигляд кнопки обємнішим без зображень. Генератор CSS3 Button дозволяє налаштувати шрифт, відступи, границі, фон градієнтом, внутрішня тінь, тінь і текст тіні за допомогою вгору / вниз управління, який може бути простіше і логічніше, ніж повзунки.

Поряд з наданням крос-браузерного коду CSS3, інструмент дозволяє зберігати і спільно з іншими стилями. Ви можете переглянути продемонстровані кнопок і настроїти властивості для власного використання.

CSS Tricks Button Maker

Button Maker був розроблений Chris Coyier з хитрості CSS. Хоча вона була задумана як демонстрація технології, що не завадило йому бути корисним для розробників CSS3!

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

Ultimate CSS Gradient Generator

Якщо натиснута, навіть я можу згадати текст-тінь власності. CSS3 градієнти? Ніяких шансів. Градієнти можуть бути потужними, але заплутанимb і, до недавнього часу, WebKit браузерів, що використовуються інший синтаксис. Якщо ви створюєте дуже простий фон, градієнт генератор має важливе значення.

The Ultimate CSS Gradient генератор, ну, в кінцевому підсумку генератор градієнт. Він використовує схожий інтерфейс для Photoshop і створює крос-браузерний код, який включає в себе IE фільтри. Нарешті, градієнти можуть бути збережені і поділився з унікальною посиланням. Ви безумовно хочете, щоб додати цей інструмент.

CSS3 Gradient Generator

Якщо кінцева CSS Gradient Генератор занадто багато зусиль, ви можете віддати перевагу цю альтернативу. Інструмент дозволяє створювати лінійні градієнти, додаючи кольору в будь-яку кількість стоп-окулярів. Старий синтаксис WebKit виробляється, а також Mozilla код, який повинен бути сумісним з іншими браузерами.

Невже я пропустив ваш улюблений коду CSS3 генератор?

Джерело http://www.sitepoint.com/10-best-css3-code-generators/

1 коментар до “10 кращих CSS3 генераторів”

Напишіть відгук

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *