Конструктор форм, кнопок и лент на чиcтом css.

5
493

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

Речь пойдёт о конструкторе веб элементов на основе только сss и html кода без использования графических файлов.

Change tool — имеет три инструмента отдельно для кнопки, ленты и желаемой формы. Подбираем цвет, шрифт, длину и ширину. Во общим настраиваем элемент по своему вкусу и нажимаем кнопочку Generate CSS и соответственно Generate HTML.

Не буду вдаваться в подробный туториал но вкратце поясню что и зачем. :)

CSS код кнопки или формы который вам указывает конструктор — это визуальный стиль элемента. Здесь указано что «эта» кнопочка как вариант синего цвета, с таким-то шрифтом и такими-то уголками.

HTML код нужен для того чтобы вставить эту кнопочку непосредственно в пост.

Итого, копирую предложенный код css этой кнопки

Button builder

Нажимаю Generate CSS, копирую код и вставляю в свой style.css. Один нюанс — если в вашем style уже есть элемент .button то лучше-бы задать ему другое имя, дабы избежать конфликта и неприятных казусов.

В моём случае я переименовал так :

[codesyntax lang=»php»]

.buttonzz {
   border: 1px solid #0a3c59;
   background: #3e779d;
   background: -webkit-gradient(linear, left top, left bottom, from(#65a9d7), to(#3e779d));
   background: -webkit-linear-gradient(top, #65a9d7, #3e779d);
   background: -moz-linear-gradient(top, #65a9d7, #3e779d);
   background: -ms-linear-gradient(top, #65a9d7, #3e779d);
   background: -o-linear-gradient(top, #65a9d7, #3e779d);
   background-image: -ms-linear-gradient(top, #65a9d7 0%, #3e779d 100%);
   padding: 10.5px 21px;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
   -webkit-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
   -moz-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
   box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
   text-shadow: #7ea4bd 0 1px 0;
   color: #06426c;
   font-size: 19px;
   font-family: helvetica, serif;
   text-decoration: none;
   vertical-align: middle;
   }
.buttonzz:hover {
   border: 1px solid #0a3c59;
   text-shadow: #1e4158 0 1px 0;
   background: #3e779d;
   background: -webkit-gradient(linear, left top, left bottom, from(#65a9d7), to(#3e779d));
   background: -webkit-linear-gradient(top, #65a9d7, #3e779d);
   background: -moz-linear-gradient(top, #65a9d7, #3e779d);
   background: -ms-linear-gradient(top, #65a9d7, #3e779d);
   background: -o-linear-gradient(top, #65a9d7, #3e779d);
   background-image: -ms-linear-gradient(top, #65a9d7 0%, #3e779d 100%);
   color: #fff;
   }
.buttonzz:active {
   text-shadow: #1e4158 0 1px 0;
   border: 1px solid #0a3c59;
   background: #65a9d7;
   background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#3e779d));
   background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
   background: -moz-linear-gradient(top, #3e779d, #65a9d7);
   background: -ms-linear-gradient(top, #3e779d, #65a9d7);
   background: -o-linear-gradient(top, #3e779d, #65a9d7);
   background-image: -ms-linear-gradient(top, #3e779d 0%, #65a9d7 100%);
   color: #fff;
   }

[/codesyntax]

В саму-же запись, переключившись в режим редактирования записи в HTML, вставляем код воспользовавшись кнопкой Generate HTML :

[codesyntax lang=»html4strict»]

<a href='#' class='buttonzz'>Наша синяя кнопка</a>

[/codesyntax]

Если задали в css отличное значение от .button то и здесь нужно сделать то-же самое.

Любуемся результатом ^_^.

Наша синяя кнопка

НУ вот как-то так. Формы и ленты делаются аналогично.

Ribbon builder

Спасибо за внимание.

C уважением OlegS9^_^.

5 КОММЕНТАРИИ

  1. Я люблю сайты, где есть советы по улучшению работы сайтов и их дизайну. Вашим предложением воспользуюсь.Но,конечно, чуть-чуть боюсь.Спасибо

  2. В общем, симпатичный сервис. Я поскольку не дизайнер, редко когда могу понять, как это «сделать красиво». А тут можно сразу видеть результат того, что получится в итоге.

    В особенности понравилось про формы.

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