Курс
CSS3 button generator
В этом видеокурсе вы изучите инструменты, техники и подходы для web-разработчика, которые помогут вам решать поставленные задачи более быстро и эффективно.
#3 — Подключаем jscolor и заканчиваем вёрстку.
В третей части курса по созданию CSS3 кнопок мы подключим js библиотеку jscolor и закончим вёрстку.
Для того, чтобы выбирать цвет для фона и рамки нашей кнопки, нам необходим соответствующий плагин. Подойдёт практически любой, но я остановил свой выбор именно на jscolor. Подключаем и настраиваем плагин, создаём кнопку с начальными настройками и, наконец, создаём textarea — поле, в которое будет выводиться результирующий код со всем необходимыми браузерными префиксами CSS3.
Код, который у нас получился:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
<div class="container-fluid"> <h2 class="text-center">CSS3 button generator</h2> <div class="row-fluid"> <div class="span4 well"> <h3 class="text-center">Border-radius</h3> <div class="row-fluid"> <div class="span5 text-center"> <button class="btn" id="increase-radius"> <i class="icon-chevron-up"></i> </button> <button class="btn" id="reduce-radius"> <i class="icon-chevron-down"></i> </button> </div> <div class="span7 text-center"> <div class="input-prepend"> <span class="add-on">step</span> <input class="input-mini" id="step" type="text" value="1"> </div> </div> </div> <h3 class="text-center">Color</h3> <div class="input-prepend"> <span class="add-on">Background</span> <input class="input-mini color" id="bg-color" type="text" value=""> </div> <div class="input-prepend"> <span class="add-on">Boder</span> <input class="input-mini color" id="border-color" type="text" value=""> </div> </div> <div class="span4 well"> <h3 class="text-center">Result</h3> <div class="create"></div> </div> <div class="span4 well text-center"> <h3 class="text-center">Your CSS</h3> <textarea id="code-result" cols="30" rows="7"></textarea> </div> </div> </div> |
Рекомендуемые курсы
Оставь комментарий!