Автор

Color Picker — простой скрипт для выбора цвета

Color Picker — простой скрипт для выбора цвета


 

Если вы используете какие то графические редакторы на сайте, или просто хотите скрасить некий материал с помощью выбора цвета, или дать возможность оформить на свой вкус комментарии пользователю тогда этот урок именно для Вас. В сегодняшнем уроке речь пойдет о скрипте Flexi Color Picker, который использует только JavaScript для создания интерфейса выбора цвета. Без flash, изображений, однопиксельных div. Для его работы не нужно никаких библиотек.

 

ДЕМО
ИСХОДНИКИ

 

Этот плагин может быть полезен на форумах, интернет конференциях, в чатах или в формах комментирования последних новостей. И так, начнем, для начала, нам необходимо подключить библиотеку colorpicker.min:

<script type="text/javascript" src="js/colorpicker.min.js"></script>

 


Затем мы задаем стили для выбора цвета, размер окна выбора цвета, и некоторые параметры color picker

<script type="text/javascript">// <![CDATA[
                      ColorPicker(                     document.getElementById('slide'),                     document.getElementById('picker'),                     function(hex, hsv, rgb) {                       document.body.style.backgroundColor = hex;                     });
// ]]></script>

 

Все остальные стили которые приведены в исходниках необходимы для демонстрации. На этом все, скрипт прост в редактировании и легко подправить на свое усмотрение.

Многие материалы на сайте взяты из блогов: "Все для веб-дизайнера Rudebox", "A free library of HTML, CSS, JS nuggets Codyhouse" - полностью переведен и представлен в ознакомительных целях!

vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru



Статьи по темеРазное

Color Picker — простой скрипт для выбора цвета

Эффект погружения, основанный на масках изображений и CSS-преобразованиях.


Color Picker — простой скрипт для выбора цвета

Как известно сайт может состоять не только из одной страницы, если у вас накопилось множество страниц, то нужно креативно организовать навигацию по ним, зачастую используют просто цифровую нумерацию, просто и гениально на один взгляд, но когда страниц очень много, то приходится переходить через десятки страниц в поисках необходимой, согласитесь, это не весьма удобно, но выход есть, можно создать постраничную навигацию с небольшой хитростью, а именно слайдером, который поможет с легкостью найти необходимую страничку.


Color Picker — простой скрипт для выбора цвета

Вариант реализации CSS3 градиента на тексте. Нужный эффект достигается за счет такой подборки цвета заднего фона, что накладываемый на него градиент практически не виден, а текст приобретает градиент, за счет более светлого цвета используемого для самого текста.


Color Picker — простой скрипт для выбора цвета

Есть довольно много методов для <input type="file" /> элемента. Я попробовал большинство из них, но ни один не был достаточно хорош. Вероятно, худшей техникой была та, в которой входной элемент помещается в емкость (которая имитирует кнопки), а на вход следует за курсором, так что, когда вы щелкните в любом месте на контейнере, вы нажимаете на ввод. Звучит интересно и странно одновременно, верно?


Раскрутка в соцсетях

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


Перейти в Блог

Надёжный хостинг

С нами хостинг удобен и прост, как диван у вас дома. Вы с комфортом размещаетесь, а все внутренние пружины мы берем на себя.

Бесплатный тестовый период, ежедневные бэкапы, неограниченный трафик, акции с бонусами... Конечно, у нас все это есть.


Перейти на хостинг

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close