CSS3 Generator — розширення Chrome для веб-розробників і дизайнерів

66

У кожного розробника або веб-дизайнера є свій набір інструментів для роботи, десктопні і онлайнові додатки, доповнення та розширення до браузерів. Прогрес не стоїть на місці і час від часу з’являються нові, багатофункціональні або вузькопрофільні додатки і розширення для сучасних браузерів. Google Chrom і Firefox є лідерами за наявності написаних для них різноманітних додатків, що розширюють їх функціонал.
Намагаюся тримати руку на пульсі і відстежую поява нових, а головне корисних розширень, які можуть істотно полегшити працю веб-розробників і дизайнерів.

Сьогодні розповім про один, ну дуже вже цікаве розширення Chrome, яке стане в нагоді багатьом розробникам, що ратують за те, щоб інтернет став ще більш зрозумілим, зручним і красивим. Розширення для роботи з CSS3, які дозволяють, як кажуть: «не відходячи від каси», експериментувати, редагувати і вносити зміни до властивостей CSS3, і при цьому бачити всі зміни в живу.

CSS3 Generator

Дуже цікаве і корисне розширення для браузера Google Chrome, я б навіть сказав — корисне, тому як це розширення, являє собою, небагато-немало, повноцінний генератор властивостей CSS3. З допомогою CSS3 Generator ви з легкістю зможете сформувати стилі для будь-яких елементів сайту.

Для редагування та генерації коду CSS, доступні різні властивості з обойми CSS3. На вкладці «Text Shadow», відкривається візуальний редактор властивості text-shadow, за допомогою якого ви зможете додати тінь тексту, а також, легким рухом руки, змінювати її параметри: колір тіні, радіус розмиття і зміщення відносно написи.

Text Shadow - CSS3 Generator

Розширення забезпечено відмінним інструментом, вкладка «Hex/RGBA» відкриває легкий, інтуїтивно зрозумілий конвертор значень кольору. При необхідності, швидко, дуже швидко, ви зможете перевести значення кольору HEX в RGBA і назад, і одночасно встановити ступінь прозорості в RGBA.

Hex / RGBA Converter - CSS3 Generator

Для формування стилів блоків, на вкладці «Box Model», доступні обробці властивість трансформації transform:, скруглення кутів border-radius: і звичайно ж, популярний властивість box-shadow:, дозволяє додавати тіні блочних елементів

Box Model - CSS3 Generator

Розробники розширення не обійшли стороною і таку цікаву властивість як column-count, яке визначає кількість колонок в тексті. Тобто відкривши вкладку «Columns», ви зможете розбити текст на колонки(доступно до 4), а також визначити відстань між колонками з допомогою властивості column-gap і вибрати стиль розділення многоколоночном тексті використовуючи властивість column-rule.

CSS Column - CSS3 Generator

Гнучкі налаштування функцій градієнта відкриваються на вкладці «Gradients». Для обробки і кодування доступні властивості лінійного і радіального градієнта, а також формування градієнтної заливки в смужку.

Radial Gradients - CSS3 Generator

І це ще не все))). Якщо вам раптом знадобилося якого-небудь елементи блоків домалювати куточок(інфо-блок, підказки тощо) і попутно оформити зовнішній вигляд самого блоку, з допомогою розширення CSS3 Generator», ви зможете легко це зробити, досить відкрити вкладку «Arrows» і погратися з параметрами.

CSS Arrows - CSS3 Generator

Далі — більше))). Щоб швидко встановити ефекти переходу з одного стану елементів в інше при наведенні на них, достатньо скористатися ще одним інструментом з арсеналу цього розширення, на вкладці «Transitions», обробляючи значення властивості transition:, ви легко зможете це зробити. На вибір доступні для формування ефекти зміни позиціонування елементів, зміна колірної палітри, трансформація країв, а також вибір ефекту анімації.
Для обробки зображень у розширенні «CSS3 Generator», доступний візуальний генератор фільтрів, за допомогою якого, ви зможете реалізувати різні види накладення на картинки, додати відтінки сірого, сепія, расплывчивость, яскравість, кут повороту відтінку, і нарешті, установка тіні картинок, з допомогою фільтра drop-shadow.

Filters - CSS3 Generator

Ось таке цікаве додаток для браузера Google Chrome, представлена в магазині розширень, відповідно від туди ви його зможете вільно завантажити:

Завантажити Розширення

Спробуйте розширення «CSS3 Generator» у справі і я впевнений, багатьом він сподобається, у всякому разі, таке доповнення, вже точно не буде зайвим в обоймі ваших інструментів.

З Повагою, Андрій .

Буду всім вдячний, якщо підтримайте проект — додавши блог виключення AdBlock та поділіться посиланням на запис в своїх соціальних мережах: