В этой статье мы расскажем вам о каждой строке приведенного кода и надеемся, что это будет очень полезно для вас. В этой обучающей статье задействованы HTML, CSS и jQuery на уровне для новичков, и работа займет у вас не более 45 минут.
Скачать архив с демо-файлом.
Внимание! У вас нет прав для просмотра скрытого текста.
Часть 1 – Создаем изображение кнопки
В первой части мы расскажем вам о создании изображений с помощью Photoshop. Давайте начнем.
Создайте новый документ Photoshop с параметрами ширины в 580 пикселей и высоты 130 пикселей. Далее пройдите в меню View > New Guide и установите ориентацию на горизонтальную и позицию на 65 пикселей.
Создайте больше линеек сверху, снизу, слева и справа. Ваше изображение должно иметь такие линейки, как только вы закончите:
Линейки делят ваш холст на верхнюю и нижнюю части. Выберите инструмент создания многоугольника с закругленными углами, установите радиус на 5 пикселей, и нарисуйте прямоугольную фигуру в верхней части холста.
Примените параметры смешивания слоя Gradient Overlay и Stroke.
Теперь выберите инструмент создания текста и впишите слово «Download» в блок, который вы только что нарисовали. Выровняйте текст по центру блока. У вас должно получиться нечто вроде этого:
Теперь мы закончили создавать первое состояние кнопки скачивания. Теперь давайте создадим группы на палитре слоев и уберем все созданные слои в нее. Дублируйте группу и разместите ее под первой группой на палитре слоев.
Перейдите к дублированной группе и поменяйте параметры смешивания на Gradient Overlay и Stroke на следующие:
Выберите вторую группу и передвиньте все, что в ней находится, на вторую половину холста.
Вот и все! Мы закончили первый этап разработки. Сохраните свое изображение как download.png и запустите свой любимый редактор кода.
Скачать PSD
Внимание! У вас нет прав для просмотра скрытого текста.
Часть 2 – HTML
Этап 1 – подготовка нужных файлов
Создайте папку и назовите ее по желанию. Допустим, в пределах данной статьи, мы назовем ее jQueryCallToaction. Внутри этой папки создайте файлы:
1. Чистый документ index.html
2. Чистый документ style.css
3. Чистый документ script.js
4. Папку под именем images
5. Переместите файл download.png в папку images.
Этап 2 – знакомим index.html с css и js
Нам нужно соединить наши файлы CSS и JS с index.html. Впишите их внутри 'head' и '/head'. Перейдем к файлу CSS:
<link href="style.css" rel="stylesheet" type="text/css" />Затем нам потребуется последняя версия jQuery из хранилища библиотек AJAX на Google:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>И наконец, перейдем к файлу javascript:
<script type="text/javascript" src="script.js"></script>Теперь наша секция 'head' должна выглядеть примерно так:
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
Давайте внесем коды наших кнопок внутрь секции 'body':
<p><a href="#" class="button1"></a></p> <!-- CSS only -->
<p class="button2"><a href="#"></a></p> <!-- CSS + jQuery -->Пояснение:
Мы создали абзацы для двух кнопок, каждый из которых представляет собой ссылку 'a''/a' облаченную в 'p''/p'.
Строка 1: class="button1" внесен в 'a', а
Строка 2: class="button1" внесен в 'p'
Этап 3.1 – CSS для кнопки
Теперь перейдем к созданию нашей первой кнопки, используя только CSS. Откройте файл style.css и вставьте туда следующий код.
.button1 /* Button with CSS only */
{
background: url(images/download.png) 0 0;
height:65px;
width:580px;
display:block;
}
.button1:hover /* mouseOver */
{
background: url(images/download.png) 0 65px;
}
Пояснение:
Наша первая кнопка полностью выполнена при помощи HTML и CSS. CSS-параметр background загружает download.png с указанными данными о ширине, но данные о высоте берутся только наполовину (т.е. 65 писелей), так что будет отображена только одна кнопка. Месторасположение кнопки определяется и управляется последним значением параметра background. Просчитывайте последнее значение параметра background так, чтобы определить начало изображения.
Этап 3.2 – CSS + кнопка на jQuery
Здесь мы будем использовать то же изображение. Различие лишь в том, что наша вторая кнопка будет выполнена при помощи jQuery, за счет чего можно будет достичь более плавного эффекта. Давайте начнем с CSS. Скопируйте этот код в style.css.
.button2, .button2 a {
background: url(images/download.png) 0 -65px;
height:65px;
width:580px;
display:block;
}
.button2 a {
background-position: 0 0;
}
Пояснение:
Как .button2 {} так и .button2 a {} используют один и тот же стиль, который будет последним значением в параметре background. .button2 {} отображает кнопку синего цвета, а .button2 a {} отображает кнопку белого цвета.
Работа с CSS закончена. Мы воспользуемся jQuery для того, чтобы плавно переключать состояние кнопки. Откройте script.js и скопируйте туда следующий код.
$(document).ready(function(){
$('.button2 a').hover(function(){
$(this).stop().animate({'opacity' : '0'}, 500);
}, function(){$(this).stop().animate({'opacity' : '1'}, 500);});
});Пояснение:
$(this) относится к .button2 a, и при наведении курсора, активизируется анимация jQuery, и уровень плотности отображения элемента опускается до нуля, так что мы сможем видеть элемент .button2. И как только курсор мыши отведен в сторону, уровень плотности за 500 миллисекунд сменяется на 1.
Вот и все
Спасибо, что прошли до конца эту статью. Надеемся, что вам понравилось объяснение и вы смогли извлечь урок для себя. Если у вас возникнут какие-либо проблемы, не стесняйтесь, пишите тут в комментариях.
