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

Для начала я хочу представить с чем мы вообще будем иметь дело:

Шаг 1. Создаем простую HTML-форму:

Двигаемся далее. Добавим в форму элементы списка и контроллы select и сancel для перекрытия флажков. В качестве контроллов у нас будут выступать простые ссылки с классами checkbox-select и checkbox-deselect соответственно:

Шаг 2. Придаем внешний вид

Выбранные элементы у нас будут зеленого цвета. Невыбранные — серого. Проще всего это сделать с помощью одного фонового изображения и сдвига его позиции, когда это необходимо.

В фотошопе подготавливаем фоновые изображения:

Элементы созданного нами списка будут составлять 105px в ширину и 150px по вертикали, поэтому checkboxbg.gif должна быть 210 пикселей в ширину (двойной ширины). Sendit.gif и select.gif будет служить в качестве фона для кнопок «Send it» и «Select», соответственно. Когда элемент будет выбираться, фоновое изображение будет сдвигаться, «показывая» свою зеленую половину. Как это сделать при использовании CSS:

Шаг 3. Используем CSS

Шаг 4. Подключаем эффекты jQuery





		



 

 

Вот на этом пожалуй и все, надеюсь урок был вам интересен.

На главную