Как сделать картинку с подсветкой


подсветка картинки на css

подсветка картинки

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

Так вот, часто у меня в начале, когда я еще не плотно работал со стилями и не использовал DIV верстку (предпочитал таблицы) возникало, как бы сказать, не понимание, как ссылки, на какую-то внутреннюю страницу или как сделать картинку с подсветкой другой сайт, сделать в виде кнопки.
Я для этого находил какую-то кнопку на CSS через Гугл и добавлял ее к себе на сайт. Сейчас, когда я более подробно начал изучать CSS и верстку DIV-ами, пришло понимание того, что на самом деле все очень просто.
Сейчас я хочу показать несколько способов подсветить картинку или превратить простую ссылку в кнопку.

Допустим вы нашли где-то обычную картинку и хотите ее использовать как кнопку на странице.
Вот допустим такая картинка:

кнопка бабло

Добавить ее на страницу очень просто. Если закинуть ее в корень сайта, то код такой:

<img src="/knopka_bablo.png" alt="кнопка бабло" title="кнопка бабло" width="100" height="100"/>

Сделать ее ссылкой тоже просто, достаточно обернуть код в тег ссылки

<a href="#ссылка"><img title="кнопка бабло" src="/knopka_bablo.png" alt="кнопка бабло" width="100" height="100" /></a>

 

Результат простой картинки с ссылкой без подсветки:
 кнопка бабло

Но вам хочется, чтобы при наведении кнопка подсвечивалась. Это можно сделать несколькими способами. Сейчас их рассмотрим.

Первое что вам нужно – это сделать еще одну картинку другого цвета или более светлую (темную) и подставлять ее при наведении курсора.

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

Например, картинку, которая выше я открыл через Microsoft Office Picture Manager, сделал ее почти черно-белой и сохранил под именем knopka_bablo-1.png. Получилось две картинки (заливаем их на хостинг; в данном случае залито в корень сайта):
кнопка баблокнопка бабло

Сейчас для того, чтобы при наведении курсора мыши картинка менялась с черно-белой на цветную, используем следующий код в тексте статьи или шаблоне сайта:

<a href="#ссылка"><img title="кнопка бабло" onmouseover="this.src='/knopka_bablo.png ';" onmouseout="this.src='/knopka_bablo-1.png ';" src="/knopka_bablo-1.png " alt="кнопка бабло" /></a>

 

А вот результат (наведите курсор):
кнопка бабло

Можно сделать и по-другому. В таблицу стилей CSS (обычно файл style.css вашего шаблона) добавить код, при этом имя идентификатора можно придумать любое, в маем случае img-bablo:

#img-bablo a {background-image: url('/knopka_bablo-1.png'); width:100px; height:100px;display: block;} / картинка сразу / #img-bablo a:hover {background-image: url('/knopka_bablo.png');} / картинка при наведении курсора /

А нашу ссылку обернуть в тег div с нужным идентификатором (попросту, код ниже вставить в то место, где нужно показать картинку):

<div id="img-bablo"><a href="http://seodnevnik.ru/zarabatyvayu-zdes"></a></div>

 

Результат получаем тот же (наведите курсор)


Источник: http://seodnevnik.ru/sozdanie-sajtov/podsvetka-kartinki-ili-sozdanie-knopki-na-css.html


Закрыть ... [X]

Фальш окно: фото, устройство Строительный портал Скат для горки своими рукам


Как сделать картинку с подсветкой Видео Как сделать самому зеркало с 3D подсветкой
Как сделать картинку с подсветкой Как сделать зеркало с подсветкой своими руками
Как сделать картинку с подсветкой Самодельные фонтаны с подсветкой - картинка из
Как сделать картинку с подсветкой Картинка за окном и подсветка дюралайт в MentalRay
Как сделать картинку с подсветкой Подсветка картинки или создание кнопки на CSS
Как сделать картинку с подсветкой 12
Как сделать картинку с подсветкой Автономная система автоматического водоснабжения своими
Как сделать картинку с подсветкой Антигравийные пленки для защиты автомобиля
Как сделать картинку с подсветкой Беседка своими руками: односкатная, двускатная, квадратные
Более 25 лучших идей на тему «Полки» на Pinterest Угловые Декоративная решетка для беседки своими руками. Видео, цена Кадры предприятия Как своими руками из картона сделать оригинальные Как сделать загрузку компьютера быстрее Как сделать куклу из носка