Динамическая Кнопка на чистом CSS.

Запись от and_y87 размещена 21.08.2012 в 12:52

Показов 62561 Комментарии 12

И так, сегодня я вам отвечу на вопрос который вы не задавали:

"как сделать динамическую кнопку на CSS?"

Отступление:
Последнее время я заметил что многие делают кнопки не пользуясь возможностями CSS в полной мере... Люди делают кнопки двумя файлами типа on и off, аля:
on - Кнопка при наведении на неё курсором;
off - Кнопка в нормальном режиме;
если адский мастер попадётся то можно ещё встретить третий тип:
activ - Кнопка нажата... всё по принципу ссылок...

Если Вы больФой гуру вёрстки, то дальнейшее вам вряд ли откроет что то новое, и вам проще будет нажать сочетание клавиш Ctrl + W, однако можете и остаться, дабы поправить меня если я в каком то месте допущу ошипку... (никто не идеален)

Приступим Друзья!
Блин, крепись народ... я не знал что будет столько букав!

Итак представим друзья: мы - верстальщик модного интернет магазина, продающего Бентли, Ягуары и Жигули... И вот... дизайнер нам дал задание оживить старые статичные ссылки... нам дан макет кнопочек как они должны выглядить:

Обычное состояние
При наведении.

За основу мы возьмём размер нашей будущей кнопки: 150 х 24 px.
естественно вы можете использовать свои размеры, эта часть гибко-настраиваемая...

Мой вариант кнопки можно увидеть тут

Само меню пускай у нас будет вот такого вида: некий блок div с идентификатором nav содержащий в себе какое то неопределённое множество ссылок...
Можно использовать и конструкцию с UL LI, но она больше подходит всётаки для многоуровневого меню, а мы тут проходим мальца другое

HTML5
1
2
3
4
5
<div id="nav">
    <a href="#">Бентли</a>
    <a href="#">Ягуары</a>
    <a href="#">Жигули</a>
</div>

подсказка

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

Что я имею ввиду?
Для того что бы задать стиль ссылке не все, но некоторые используют class, получая такую ссылку:
<a href="#" class="some-class">Бентли</a>
минус такого подхода в том, что - Вам приходиться прописывать всем вашим ссылкам class
Однако автоматизировать сей процесс можно задав в файле .css
такой путь для стиля:

CSS
1
2
3
div#nav a{
    ...
}

благодаря такой конструкции стили применяются ко всем тегам <a> внутри уникального Блока div с id=nav.

Если же у вас не 1, а скажем 3 блока... или 5...
тогда делаем путь таковым:

CSS
1
2
3
4
5
6
div#nav a, 
div#nav2 a, 
div#nav3 a, 
div#nav4 a{
    ...
}

перечисляя через запятую все блоки получат для своих ссылок ваш стиль...

В настоящее время наше меню - полный ацтой...
Начинаем его приводить в человеческий вид, что бы это сделать отметим в своей голове, "что нам надо задать из свойств css для каждой ссылки?":
ширина и высота, для корректного отображения ссылок списком зададим дисплею св-во block, задать цвет, стиль шрифта, эффекты и вроде всё... и так у нас получилось следующее:

отступы (если понадобится)
ширину
высоту
позиционирование
цвет шрифта
размер шрифта
стили шрифта
выравнивание текста
эффекты (если понадобится)

подсказка

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

Сперва Отступы (margin, margin-top, ... ,padding, paddinr-left, ...)
Затем Ширина и Высота (width, height, min-width ... )
Следом позиционирование (position, top, left, right, bottom, display, float ... )
Тут Фон блока (background, background-position ... )
Затем Шрифт ( color, font, font-size, font-weight, font-style ... )
Следом Текст ( text-align, text-decoration, text-shadow, ... )
Остальное...

таким образом я уже понимаю что:
Начало это у меня - отступы, ширина высота...
Середина это - Позиционирование и Фон
Ближе к концу - всё про текст и шрифт...

согласитесь удобно...

Итак, определившись что нам надо от CSS пишем стиль который нам все ссылочки наши сделает красавчиками...

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
div#nav a {
    margin: 0;
    margin-bottom: 2px;
    padding: 0;  /* если хотите считайте меня параноиком, но  я часто прописываю (margin, padding = 0) :) */
    width: 150px;
    height: 24px;
    display: block;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    text-decoration:none;
    text-shadow: 2px 2px 0px #333;
}

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

То - о чём я выше толковал именуется: спрайтами
Много информации о них можно будет посмотреть по этой ссылке,но только после того как вы всё дочитаете...

Суть этого процесса заключается в том что в нашей картинке будет сверху состояние кнопки в обычном режиме, а ниже в этой же картинке состояние кнопки если на неё навели курсор(:hover) пускай эта картинка будет лежать рядом с нашим файлом.html и иметь название: button_all.png...

Таким образом "допиливаем" наш css до следующего вида:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
div#nav a {
    margin: 0;
    margin-bottom: 2px;
    padding: 0;
    width: 150px;
    height: 24px;
    display: block;
    background: url(button_al.png) center top no-repeat; /* дополнительные свойства center и no-repeat связаны опять таки с параноей*/
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    text-decoration:none;
    text-shadow: 2px 2px 0px #333;
}

Важным элементом тут является - установка background и его позицианирование.
У нас фон прилипает к верхней границе блока <a>

Сделали? молодцы! Теперь как вы уже знаете делаем что бы картинка менялась при наведении...
Раньше использовался другой файл, а теперь используем другую позицию...
Допиливаем наш CSS добавляя код следующего вида:

CSS
1
2
3
4
5
6
div#nav a:hover {
    background-position: bottom; /* вот эта магическая вещь*/
    color: #00F; /* Немного поиграем с другими настройками...*/
    text-align: right;
    text-shadow: 2px 2px 0px #999;
}

Именно благодаря background-position: bottom; фон начинает прилипать к нижней границе, а поскольку область видимости фона ограничена мы видим только то, что нам нужно показывать...

В итоге получаем следующий HTML документ (я всё делал в одном ибо лень разбивать на 2

)

HTML Code

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Документ без названия</title>
</head>
<style>
div#nav a {
    margin: 0;
    margin-bottom: 2px;
    padding: 0;
    width: 150px;
    height: 24px;
    display: block;
    background: url(button_all.png) center top no-repeat;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    text-decoration:none;
    text-shadow: 2px 2px 0px #333;
}
div#nav a:hover {
    background-position: bottom;
    color: #00F;
    text-align: right;
    text-shadow: 2px 2px 0px #999;
}
</style>
<body>
<div id="nav">
    <a href="#">Бентли</a>
    <a href="#">Ягуары</a>
    <a href="#">Жигули</a>
</div>
</body>
</html>

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

В продолжении можно прикинуться крутым шлангом и сделать третью ~~анимацию~~:
- если на ссылку нажали...

Теперь картинка кнопки у нас имеет имя: button_3all.png
Мой вариант кнопки можно увидеть тут

Теперь разница лишь в том что придется в позиционировании фона использовать не слова а цифры... не бойтесь это не Алгебра тут всё проще...
В мозгу надо прикинуть следующую "схему":
у нас высота ссылки 24px это держем в уме;
1. первое сверху изображение это сылка в обычном режиме значит позицианирование такое: сдвиг по вертикали ноль, по горизонтали ноль;
2. второе изображение сверху это эффект при наведении, следовательно по вертикали мы изображение фоновое сдвигаем на 24px а по горизонтали не трогаем;
3. третье изображение сверху если на ссылку нажали, поскольку высота кнопок одинаковая сдвиг рассчитываем легко и не принуждённо, поскольку изображение треть сверху, над ним 2 изображения высота каждого нам известна = 24px, получается 24 * 2 = 48
ровно на 48px нам надо будет сдвинуть по вертикали фоновое изображение что бы показать эту часть картинки...

от слов к делу... редактируем наш css и добавляя ещё 1 стиль

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
div#nav a {
    margin: 0;
    margin-bottom: 2px;
    padding: 0;
    width: 150px;
    height: 24px;
    display: block;
    background: url(button_3all.png) center top no-repeat; /* тут можно оставить позицианирование как и было*/
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    text-decoration:none;
    text-shadow: 2px 2px 0px #333;
}
div#nav a:hover {
    background-position: 0px -24px;
    color: #00F;
    text-align: right;
    text-shadow: 2px 2px 0px #999;
}
div#nav a:active {
    background-position: 0px -48px; /* тут мы задействовали наши хитрый ресчёты */
    color: #00F;
    text-align: right;
    text-shadow: 2px 2px 0px #999;
}

Просмотреть результат можно по этой ссылке

Вот так Вот дорогие друзья! Мы уделали принципы в принципе!

И теперь научились делать клёвые кнопочки

Так же можно делать сам шрифт непосредственно в изображении...
Это даст иногда преимущества к примеру Текст с рамкой и градиентом на прозрачном фоне...

Но щас БОНУСОМ я продемонстрирую преимущества использования именно текста. Преимущество заключается именно в - Анимации!
Да да... раньше я говорил анимация кнопки... но я через силу и с тяжёлым трудом заставлял себя так называть это событие... теперь воочию - вы увидите, что такое Анимация

опять допиливаем наш любимый CSS (я серьёзно... он наш любимчик!

)
приводим в такой вид:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
div#nav a {
    margin: 0;
    margin-bottom: 2px;
    padding: 0;
    width: 150px;
    height: 24px;
    display: block;
    background: url(button_3all.png) center top no-repeat;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    text-decoration:none;
    text-shadow: 2px 2px 0px #333;
}
div#nav a:hover {
    background-position: 0px -24px;
    color: #00F;
    text-align: right;
    text-shadow: 2px 2px 0px #999;
    -webkit-animation: linkhover 1.95s 1 ease; /* +Add */
    -moz-animation: linkhover 1.95s 1 ease; /* +Add */
    -o-animation: linkhover 1.95s 1 ease; /* +Add */
}
div#nav a:active {
    background-position: 0px -48px;
    color: #fff;
    text-align: right;
    text-shadow: 2px 2px 0px #000;
}
 
@-webkit-keyframes linkhover {   /* +Add */
   from { text-shadow: 2px 2px 0px #333; color: #fff;}
   to { text-shadow: 2px 2px 0px #999; color: #00F;}
}
@-moz-keyframes linkhover {   /* +Add */
   from { text-shadow: 2px 2px 0px #333; color: #fff;}
   to { text-shadow: 2px 2px 0px #999; color: #00F;}
}
@-o-keyframes linkhover {   /* +Add */
   from { text-shadow: 2px 2px 0px #333; color: #fff;}
   to { text-shadow: 2px 2px 0px #999; color: #00F;}
}

В данный код мы включили начальный и конечный "кадры", а так же время за которое должно произойти это событие, а так же указали для какого стиля проигрывать эту Анимацию...

Просмотреть результат можно по этой ссылке

Спасибо за уделённое мне время, надеюсь эта информация вам поможет

Если вам понравилась данная статья и есть желание заказывайте темы через Личные Сообщения, тогда, возможно, продолжу эти "Уроки"

В Архиве примеры 3 файла html + 2 png

При обнаружении нерабочих ссылок просьба отписать мне в ЛС...

Размещено в Front-End Разработка, html, CSS, Разработка Сайтов

« [Фотки] Главная страница Скрипт "выделить все чекбоксы в текущей таблице" »

Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.

Всего комментариев 12

Комментарии

Про плавное изменение цвета - класс! Не знал. Толком не понял, но не суть. Буду знать, что так можно.
Еще красиво было бы такую анимацию сделать на переход кнопки в обычный вид(не hover).
Вижу и отступ таким образом плавно изменять можно. Вообще класс!

Запись от koorya размещена 21.08.2012 в 19:52 koorya вне форума

	Да, ньюанс в том что у меня было позиционирование текста внутри тега a... не охото было с padding мучиться хотя желание проскакивало =)) Если бы текст был бы внутри какого то тега можно было бы легко его двигать через left & right...
	Запись от and_y87 размещена 21.08.2012 в 20:44

	Супер! Незнал про такую функцию как active . Статья хорошая, спасибо!
	Запись от pavlinmavlin размещена 24.08.2012 в 08:38

	Моя душа радуется что я смог вам помочь, не зря значит старался... Жаль что коэффециент такой маленький... Просмотров 177 Комментарии 4
	Запись от and_y87 размещена 04.09.2012 в 22:43

	Это говорит, что статья интересная и вбросов не было.
	Запись от basili4 размещена 05.09.2012 в 10:23

	Если всё так, то это замечательно
	Запись от and_y87 размещена 05.09.2012 в 10:23

	Жаль, спасибо тут кнопкой говорить нельзя! Потому только комментарием - спасибо за работу со спрайтами!
	Запись от Skipy размещена 06.09.2012 в 16:49

	Пожалуйста
	Запись от and_y87 размещена 06.09.2012 в 18:03

	Спасибо Столько лет прошло.. а всё актуально! Большое спасибо!
	Запись от ioan673 размещена 23.08.2015 в 11:27

Сообщение от Skipy

Жаль, спасибо тут кнопкой говорить нельзя! Потому только комментарием - спасибо за работу со спрайтами!

В правом верхнем углу "Оценить эту запись".

and_y87, Смотрю все измеряется в пискселях, вероятно это не очень хорошо жестко задавать абсолютные значения, в место гибких относительных.

Запись от Avazart размещена 23.08.2015 в 15:30 Avazart вне форума

ioan673, рад что могу быть полезным. =)

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

Запись от and_y87 размещена 23.08.2015 в 20:42 and_y87 вне форума

	Я считаю что учить нужно делать сразу правильно, ну или хотя бы озвучивать проблему. И все равно как не наглядно, изображения добавил бы что ли. К примеру http://shpargalkablog.ru/2012/... ki.html#on
	Запись от Avazart размещена 08.02.2016 в 19:56

Новые блоги и статьи Все статьи Все блоги /
Модель здравосохранения 14. Собираем всю модель вместе. anaschu 22.05.2026 Модель собрана. В будущих постах на видео я покажу, как она работает. В этом посте запускаем её, проверяем результаты и разбираем что можно с ней делать дальше. Перед запуском проверяем. . .	Модель здравоохранения 13. Добавление самой системы здравоохранения. anaschu 22.05.2026 В предыдущем посте мы настроили болезни. Теперь добавим события, которые управляют здоровьем всего коллектива, а также настроим рабочий график и расчёт финансов. В Main создаём четыре события. . . .	Модель здравоохранения 12. добавление болезней через ресурпул, как аварии anaschu 22.05.2026 Болезни — это ключевая часть нашей модели. Нам нужно, чтобы работник периодически уходил на больничный, его задание при этом зависало, а после выздоровления работа возобновлялась. Реализуем это двумя. . .	Модель здравоохранения 11. Создаём классы Задание и Работник anaschu 22.05.2026 В AnyLogic каждая заявка и каждый ресурс — это объект определённого класса. Нам нужно создать два класса: Задание (заявка) и Работник (ресурс). Класс Задание В дереве проекта нажимаем правой. . .
Модель здравоохранения 10. Новая модель, смотрим, как добавлять логические блоки, и что писать внутри anaschu 22.05.2026 Открываем AnyLogic, создаём новый проект. В дереве проекта появляется класс Main — это главный агент, в котором будет жить вся наша логика. Палитра блоков Слева находится палитра. Нас интересует. . .	модель ЗдравоСохранения 9. Новая модель, разбираемся, как ее создавать anaschu 22.05.2026 В этой серии постов мы построим модель небольшого рабочего коллектива. Сотрудники получают задания, выполняют их, иногда болеют — и мы хотим посчитать, сколько это стоит компании. Метод. . .	[golang] Linked list alhaos 22.05.2026 Связный список / Linked list Связный список структура данных позволяющая хранить список значений, в отличии от массива в памяти хранится не сплошным куском, а отдельными частями которые ссылаются. . .	[golang] Двоичная куча, min-heap alhaos 20.05.2026 Двоичная куча Двоичная куча — структура данных, которая всегда держит самый важный элемент наготове. Представьте очередь к хилеру в игре, и очередь из игроков в приоритете те у кого меньше. . .

Сообщение форума

Отменить изменения