Архив Тэгов: генераторы

Дизайн Интернет Программирование

Collaboration online. Совместное рисование интерфейсов. Free

Совместная разработка интерфейсов в наши дни очень проработана и доступна онлайн. Приведу основные два сервиса, у которых есть бесплатные тарифы (с некоторыми ограничениями): читать далее »

Дизайн Интернет Программирование

Bootstrap layout prototyping — адаптивный дизайн с нуля

Бесплатные инструменты прототипирования разметки и дизайна на Bootstrap:

  • Layoutit.com — быстрое прототипирование онлайн (только расположение элементов разметки на странице, без корректировки меню и т.д.)
  • Pingendo.com Desktop приложение с более детальной прорисовкой. Есть версия для Bootstrap 4.

Суть обоих методов — быстро создать прототип разметки в визуальном режиме, согласовать с собой и заказчиком, скачать готовые HTML5 + CSS3 файлы и уже далее встраивать туда логику. Их можно назвать «генераторами» Bootstrap разметки, которая является адаптивной под разные экраны — от сматфона до ТВ.

 

Дизайн

5 генераторов CSS3

Жизнь становится проще, когда приходят они — генераторы: новичкам они помогают добиться результатов без глубоких знаний и вообще освоить принципы работы, а людям с опытом — сэкономить время.

Вот несколько генераторов CSS3-кода, которые показались мне наиболее полезными.

Ultimate CSS Gradient Generator
Помню, вид градиента, созданного не в графическом редакторе, а парой строк кода поразил меня: это буквально казалось чем-то магическим. Но, как и всегда, со временем магия превращается в обыденность. Представленный генератор, на мой взгляд, обоснованно использует слово «ultimate» (максимальный, предельный) в своем названии: на первый взгляд кажется, что параметров совсем немного, но стоит только начать с ними работать, как сразу понимаешь, что добиться можно многого.

Button Maker
Для желающих создать особенную, свою кнопку. Вы можете изменить размер кнопки, шрифта и округления углов (данные параметры редактируются «на глаз» при помощи полосы прокрутки), градиент (верхний и нижний), цвет верхней границы, цвета текста и самой кнопки в «спокойном» состоянии, при наведении и нажатии. Для того, чтобы увидеть сформированный код достаточно нажать на саму кнопку.

CSS Border Radius Generator
Симпатичный генератор округления углов рамки, который может многим показаться слишком простым и малофункциональным, однако лично меня этот минимализм и подкупил. Указываем значение для каждого угла (или одно общее) и получаем желанный код (WebKit, Gecko, CSS3).

CSS3 Shadows Generator (Box-Shadow)
Добавление тени элементу с использованием следующих параметров: размер (длина тени), цвет, прозрачность, размытие, вид тени (внешняя или внутренняя), сдвиг (по горизонтали и вертикали).

В конце я хотел бы выделить css3.me — на мой взгляд, наилучший вариант, для начального уровня, который совмещает в себе функции вышеприведенных генераторов, оставаясь при этом чрезвычайно простым и понятным.