—»     —»   Создаем простенькую кнопку с помощью CSS-спрайтов
  Раздел: Кнопки   Комментариев: 1  

Создаем простенькую кнопку с помощью CSS-спрайтов

Кнопка – это тот элемент, который мы чаще всего можем встретить на просторах веб. В современном веб-дизайне кнопки используются не просто как формы, но и как визуальные добавления и эффекты, которые могут привлечь внимание к определенной области страницы. Давайте рассмотрим процедуру создания обычной кнопки посредством css-спрайтов, начиная от Photoshop и заканчивая конечным кодом и результатом. Данный пример будет очень полезен тем, кто только знакомится с CSS!

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

Создаем простенькую кнопку с помощью CSS-спрайтов

Давайте начнем работу в Photoshop, выберите «Rounded Rectange Tool», введите большое значение в радиус и перетащите фигуру на холст.

Создаем простенькую кнопку с помощью CSS-спрайтов

Кликните два раза по слою, чтобы открыть свойства слоя. Первым делом мы добавим наложение градации (Gradient Overlay). Установите цвета вертикальной градации от #a8a8a8 до #ffffff.

Создаем простенькую кнопку с помощью CSS-спрайтов
Создаем простенькую кнопку с помощью CSS-спрайтов

Теперь, давайте добавим окантовку (stroke). Установите линию 5 пикселей и цвета #cbcbcb.

Создаем простенькую кнопку с помощью CSS-спрайтов
Создаем простенькую кнопку с помощью CSS-спрайтов

Для добавления внутренней линии используйте внутреннее свечение (Inner Glow), но измените настройки на Normal / #c2c2c2 / 100% Choke / и 3px ширины.

Создаем простенькую кнопку с помощью CSS-спрайтов

Впишите текст в кнопку и выберите подходящий шрифт. Выровняйте текст по центру изображения картинки.

Создаем простенькую кнопку с помощью CSS-спрайтов
Создаем простенькую кнопку с помощью CSS-спрайтов

Откройте свойства стиля с текстом и добавьте наложение градации от #9a9a9a к #7c7c7c.

Создаем простенькую кнопку с помощью CSS-спрайтов
Создаем простенькую кнопку с помощью CSS-спрайтов

Для придания тексту некоторого эффекта гравировки, добавьте внутреннюю тень (Inner Shadow). Понизьте уровень видимости эффекта до 21% , поменяйте расстояние на 2px, и установите 3px объема.

Создаем простенькую кнопку с помощью CSS-спрайтов
Создаем простенькую кнопку с помощью CSS-спрайтов

В дополнение, нежно подчеркните текст посредством добавлением тени со значениями Normal / #ffffff / 33% видимости / 2px расстояния и 1px объема.

Создаем простенькую кнопку с помощью CSS-спрайтов
Создаем простенькую кнопку с помощью CSS-спрайтов

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

Создаем простенькую кнопку с помощью CSS-спрайтов
Создаем простенькую кнопку с помощью CSS-спрайтов

Сделайте еще один дубликат, и в этот раз отредактируйте градацию – инвертируйте направление. Таким образом, можно создать иллюзию нажатой кнопки.

Создаем простенькую кнопку с помощью CSS-спрайтов

Теперь у нас есть 3 готовых положения кнопки. В каждом дубликате есть незначительные отличия, что будет способствовать видоизменению кнопки, поле того, как мы пропишем кое-какой код CSS.

Создаем простенькую кнопку с помощью CSS-спрайтов

Создайте выделение вокруг кнопок, спрячьте фон и сохраните для дальнейшего использования в Web. Выберите формат PNG24 для того, чтобы можно было оставить прозрачный фон.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Button</title>

<style type="text/css">

* { margin: 0; padding: 0; /* Quick and Dirty Reset */ }

body {
    background: url(bg-repeat.png);
}

#demo {
    width: 433px; margin: 100px auto;
}

</style>
</head>

<body>

<div id="demo">

</div>

</body>
</html>

Открывайте свой текстовый редактор и создайте простой файл XHTML.

<p><a href="#" class="press-it-btn">Press it</a></p>

Напишите код для кнопки. Мы будем использовать простой анкор, который мы использовали при создании кнопки (напр: «Нажмите» - Press it). Мы встроим этот элемент в блок, и зададим ему класс, с помощью которого мы сможем ссылаться на него посредством нашего CSS.

#demo p a.press-it-btn {
    display: block;
    width: 433px; height: 174px;
    background-image: url(button-sprite.png);
    background-position: top;
    text-indent: -9999px;
}

Теперь давайте пропишем нужный CSS-код. Прежде всего, нам надо изменить анкор с его стандартного положения встроенного элемента в блочное. Позже это даст нам возможность указывать высоту и ширину. Но учите, что нужно указывать высоту конкретно каждой кнопки, а не всего документа в целом. Позже мы сможет прикрепить фоновое изображение для анкора и выровнять его к верхней части. Для завершения кнопки используйте параметр text-indent для того чтобы сместить сгенерированный HTML за пределы экрана.

#demo p a.press-it-btn:hover {
    background-position: center;
}
#demo p a.press-it-btn:active {
    background-position: bottom;
}

Вместе с кнопкой, к анкору можно применить и псевдо-классы. Измените положение фонового изображения к центру при наведении, а для активного положения сместите фоновое изображение к нижнему краю. Это будет менять внешний вид кнопки, когда пользователь будет наводить на кнопку или кликать по ней. Проверьте сами в браузере.

Создаем простенькую кнопку с помощью CSS-спрайтов

a { outline: none; }

Что же это!? Какая-то точечная линия вокруг кнопки при нажатии? Иногда случается так, что браузеры добавляют собственные варианты оформления, которые могут подпортить внешний вид нашей задумки. Это можно легко исправить посредством отключения параметра outline. Вообще, нежелательно оставлять активным данный параметр, поэтому не пропустите следующий этап!

#demo p a.press-it-btn:hover, #demo p a.press-it-btn:focus

Так как мы только что убрали outline, отключилась и навигация посредством клавиатуры. Мы можем добавить наше собственное подсвечивание посредством добавления псевдо-классов CSS. Например, мы может оформить нашу кнопку так, как будто на нее навели курсор.

Создаем простенькую кнопку с помощью CSS-спрайтов

Скачать демо с нашего сайта
Внимание! У вас нет прав для просмотра скрытого текста.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS, Photoshop
Опубликовал Mysterious Master   Прочитано (раз): 18374   |   Оставлено комментариев: 1
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 3 июня 2011 @ 06:36
Написал: user — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Я все понимаю, но музака, которую хрен найдешь как отключать - это просто верх профессионализма. Молодец! И где таких умных только найти можно?
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица России
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)
Популярные публикации







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Март 2024    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
25262728293031