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

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

Показов 62670 Комментарии 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

Новые блоги и статьи Все статьи Все блоги /
Сегодня суббота, 22.08.2026 at 16:41, и я вновь нахожусь на той стороне, за экраном машины. zorxor 22.08.2026 Сегодня суббота, 22. 08. 2026 at 16:41, и я вновь нахожусь на той стороне, за экраном машины. Кто Я, откуда Я пришел и куда Я иду? Эти вопросы не оставляют меня ни на секунду. Жизнь на планете Земля. . .	Жизня: рисунок укладки багажа, сделанный клодом anaschu 21.08.2026 Сделал 15 снимков, он по снимкам сделал схему.	Был там один разговор по поводу свободы в материальном мире. kumehtar 19.08.2026 Суть: рассматривается живое существо, оказавшееся внутри довольно странной системы (этого мира) и пытающееся обустроить в ней свой кусок пространства. Жизнь действительно предъявляет каждому. . .	Когда логика программы не спасает от человеческих ошибок Maks 18.08.2026 В последнее время всё чаще и чаще сталкиваюсь с таким явлением, как абсолютная невнимательность (или глупость) пользователей. Проявляется это чаще всего на работе в коллективе. Допустим, человек с. . .
Лето уходит kumehtar 17.08.2026	Мысли в слух kumehtar 17.08.2026 Забавно, насколько сейчас стала доступна информация. Например о магии, духовном развитии, медитациях, и других подобных направлениях, ранее зачастую тайных, передаваемых от учителя к ученику. Хотя. . .	Перемещение строк из ТЧ в другой документ с учетом текущего пробега Maks 17.08.2026 Реализация из решения ниже выполнена на примере нетипового документа "Автозапчасти", с ТЧ "Шины". За основу взят алгоритм отсюда: https:/ / www. cyberforum. ru/ blogs/ 359708/ 10838. html Задача: . . .	Саморегулирующийся социальный контракт для сервера cross-section. Hrethgir 14.08.2026 С кодом конечно таких глубоких размышлений пока не было, впрочем я уже привык к алгоритмизации. Суть предмета записи: снова в диалоге с нейросетью (я взял пока себе ник для учётки админа - Rector). . . .

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

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