Огляд 10 онлайн-генераторів CSS3

0
2

Shares

З виходом у світ 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 код. Біля коли будуть відображатися іконки в яких браузерах коректно працює дана властивість.

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! автоматично створює ці префікси.

3. CSS3 Click Chart

Click Chart — це ще один функціональний генератор CSS3. Щоб згенерувати бажане властивість, потрібно клікнути на певний блок правил. Click Chart має більш повний список властивостей для генерації CSS3, ніж попередні інструменти.

4. Border Radius

Назва онлайн-генератора Border Radius говорить сама за себе — цей сайт генерує властивість border-radius.

5. CSS-Tricks Button Maker

Мабуть, одним з найбільш довгоочікуваних правил CSS3 можна назвати властивості для оформлення кнопок з різними ефектами (наприклад, закруглені куточки, градієнтний фон, тіні тощо). Онлайновий генератор CSS-Trick Button Maker робить саме це — генерує код для кнопки з певними параметрами, які Ви ставите. Є, правда, прикрий нюанс, який поки не виправлений — деякі властивості не працюють під IE7-8.

6. Font Squirrel @Font-Face Kit Generator

Все більше і більше браузерів здатне обробляти вбудовані шрифти, але отримати правильний формат для кожного браузера, завдання досить нетривіальна. З нею допоможе впоратися онлайн-генератор Font Squirrel @Font-Face Kit Generator. Для цього потрібно завантажити шрифти TrueType або OpenType і генератор видасть вам CSS3 файл або EOT файл для потрібного браузера.

8. CSS3 Sandbox

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

9. Border Image

Border Image — онлайн-генератор CSS3 властивості border-image, яке дозволяє задавати зображення (картинки) для оформлення кордону блоку, а не просто колір, як раніше. Швидко, наочно, легко. На жаль, це властивість поки не працює під IE7-8.

10. CSS3 Column Generator

CSS3 Column Generator — онлайн-генератор колонок в CSS3. Це дуже корисна властивість для html-верстки підтримується поки в FireFox, Chrome, Safari, Opera. Internet Explorer, як водиться, пасе задніх.

Схоже

Share on Facebook Share
0
Share on TwitterTweet
0
Share on Google Plus Share
Share on Pinterest Share
0
Share on LinkedIn Share
Share on Digg Share
0
Total Shares
comments powered by HyperComments!

ОСТАВЬТЕ ОТВЕТ

Please enter your comment!
Please enter your name here