Быстрая перекраска вещей на сайте

Существуют моменты когда необходимо предоставить пользователям выбор цвета какой либо вещи. Есть несколько способов выхода из этой ситуации.
Здесь я покажу очень простой и незамысловатый способ быстрой перекраски, на примере iPod Shuffle.
Сразу дам ссылку на то, что должно получиться в результате: ссылка
Краткий смысл таков и всем известен:
Нужная вещь отрисовывается в фотошопе с использованием полупрозрачных градиентов на однотонном фоне. После этого все сохраняется в png и на сайте просто меняется фон посредством js. Кто все знает может дальше не читать ;)
И так начнем с отрисовки нашего iPodа как примера к идеи.
Это наше исходное изображение. Кстати для этого удобнее отрисовывать уже отрисованные картинки ;) нежели фотографии.

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

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

Далее нарисуем кружок с кнопками. Выставляем параметры для слоя с кругом примерно как показано на скриншоте.

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

Теперь оживим это с помощью простенького js, применив для удобства jQuery.
<script type="text/javascript">function change(obj){$("ul.ChangeColor a").removeClass("act");$(obj).toggleClass("act");$("img#color").css("background",jQuery(obj).css("background"));}</script>
Далее сделаем список с нашими иконками цветов. Для примера двумя. Фон может быть как цветом так и картинкой.
<ul class="ChangeColor"><li><a style="background: #5db9b7;" onmouseover='change(this);'><img src="box.png" alt="" /></a></li><li><a style=" background: url('t1.png'); " onmouseover='change(this);'><img src="box.png" alt="" /></a></li></ul>
Сама же перекрашиваемая вещь будет такой:
<img src="form.png" id="color" alt="" style="background: #000;" />
Оформим все с помощью css. Например у меня на скорую руку вышло так:
#color {margin: 15px 0 0 0;}ul.ChangeColor {margin: 0; width: 336px; background: #f3f3f3; border: 1px solid #efefef; padding: 25px 25px 40px 25px; display: table;}ul.ChangeColor li {float: left; list-style: none; margin: 15px; width: 50px; height: 50px;}.ChangeColor a, .ChangeColor a:hover {border: 8px solid #e3e3e3; cursor: pointer; display: block; width: 50px; height: 50px;}.ChangeColor a.act, .ChangeColor a.act:hover {border: 8px solid #cdcdcd;}
Вот собственно и все. И незабуддте про укрощение png в IE6 ;) Но про это уже слишком много писали у каждого свои способы.
Так же вам могут понадобится еще уроки по отрисовке вещей. В журнале www.smashingmagazine.com есть подборка статей на эту тематику.
Немного поразмыслив вы сможете придумать кучу вариаций на тему покраски вещей и зачем это нужно ;)
спасибо за помощь kellion
UPD: Пример использования от Tvarb
Если Вы хотите оставить заказ на разработку сайта или получить предварительную консультацию воспользуйтесь формой по ссылке ниже.
Обратная связь
Наш специалист ответит вам в течении суток.
Похожие публикации
Web-разработка / Думай о ссылках
Раздражает, когда ссылка-изображения и ссылка-подпись к ней являются двумя разными ссылками, ведущими в одно и то же место. В этом случае, наводя на ссылку-изображение, ссылка-подпись, конечно же, не... читать далее
Как добавить OpenID на сайт
OpenID - несомненно, полезный механизм как для пользователей, так и для владельцев сетевых ресурсов. Пользователям он даёт: Возможность запомнить один логин и один пароль и использовать его везде... читать далее
Простой способ оформления подчеркивания у однострочных ссылок
В недавнем дайджесте со свежими материалами из мира фронтенда увидел подборку способов подчеркивания в CSS. Странно, что в такой хорошей подборке не указан простой способ с использованием... читать далее
Блог им. vitaly80 / Перевод Поменяйте вашу вкладку «Главная» для лучшей оптимизации поисковиками
Сейчас я покажу вам небольшой трюк, который я постоянно использую для поисковой оптимизации. Любой сайт имеет навигационное меню, и почти всегда в первой вкладке меню имеется ссылка «Главная» и она... читать далее
Форма быстрой связи с администрацией сайта для клиентов
Великолепная вебпрога позволяющая разместить на вашем сайте панель с чатом для ваших клиентов сообщения которого будут прилетать в ваш джаббер клиент Написать подробную инструкцию меня сподвигнула... читать далее
Несколько слов о градиентах
Всем привет! Сегодня хочу поговорить немного о градиентах, популярных сайтах, предоставляющих пользователям возможность выбирать и/или генерировать их, а так же, о нескольких градиентах, которые я... читать далее
Комментарии (2)
Прокомментировать
Облако тегов
angular CSS css es6 frontend habrahabr.ru html HTML html5 JavaScript javascript js react ReactJS seo SEO на Хабрахабре skillfactory vue Блог компании RUVDS.com Блог компании SkillFactory Веб-дизайн Дизайн Интернет-маркетинг Поисковая оптимизация Программирование Разработка веб-сайтов Уроки CSS на Хабрахабре автомобильный сайт браузеры верстка вёрстка дайджест дизайн интернет-магазин корпоративный сайт модуль разработка ссылки фронтенд
Реклама на сайте
прокат микроавтобусов свадьбу