X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

2 страниц V   1 2 >
Открыть тему
Тема закрыта
> Кнопка на css из изображений
N1TAXE
N1TAXE
Topic Starter сообщение 29.11.2013, 20:01; Ответить: N1TAXE
Сообщение #1


Всем привет. Как сделать кнопку из изображений на css, с анимацией наведения миши?
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
yury_mw
yury_mw
сообщение 30.11.2013, 17:15; Ответить: yury_mw
Сообщение #2


Например, так:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>tst</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
*{
  margin: 0;
  padding: 0;
}
.button{
padding: 2em;
}
.button a{
  font: bold 12px Verdana, Geneva, "DejaVu Sans", sans-serif;
  display: block;
  width: 301px;
  height: 36px;
  line-height: 36px;
  text-decoration: none;
  background: #ccc url(button.gif) no-repeat;
  color: #000;
  text-align: center;
}
.button a:hover{
  width: 301px;
  height: 36px;
  background: #c60 url(button.gif) 0 -36px no-repeat;
  color: #fff;
}
</style>
</head>
<body>
<div class="button"><a href="#">Кнопка</a></div>
</body>
</html>

Использовалась составная (с видом кнопки в обычном состоянии и под курсором мышки) картинка button.gif для кнопки 301х72px.
Методом спрайтов смещаем фон кнопки при наведении мыши на 36px по вертикали и получаем анимированную кнопку.
Эскизы прикрепленных изображений
Прикрепленное изображение
 
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
N1TAXE
N1TAXE
Topic Starter сообщение 2.12.2013, 22:06; Ответить: N1TAXE
Сообщение #3


Хмм... С вашим изображением получается, а вот если я пытаюсь вставить свое, .png, то не получаеться... В чем проблема?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
yury_mw
yury_mw
сообщение 2.12.2013, 23:00; Ответить: yury_mw
Сообщение #4


Вот как вам ответить, если вы не показываете ни своей картинки ни того, как вы ее вставляете? )

Короче, вашу картинку — в студию. Тогда, наверное, найдем и проблему и решение.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
isvetlichniy
isvetlichniy
сообщение 3.12.2013, 15:57; Ответить: isvetlichniy
Сообщение #5


кнопки с использованием изображение уже прошлый век, ну почти прошлый :)

я сейчас перехожу на использование градиентов для кнопок. получается неплохо.

html код

<a class="build_stole_btn" href="#">This is my gradient button</a>


css код

a.build_stole_btn {font-size: 30px; font-family: 'Arial', sans-serif; color: #fff;text-decoration: none; display: block; width: 390px; height: 80px; line-height: 80px;
                   border-bottom: #484949 solid 1px; border-radius: 5px;margin: 30px auto 30px auto;}
a.build_stole_btn {
    background: -webkit-linear-gradient(#106f96, #2186b1);
    background: -moz-linear-gradient(#106f96, #2186b1);
    background: -o-linear-gradient(#106f96, #2186b1);
    background: -ms-linear-gradient(#106f96, #2186b1);
    background: linear-gradient(#106f96, #2186b1);
}


таким же градиентом можно создать любой ховер для это кнопки
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
N1TAXE
N1TAXE
Topic Starter сообщение 3.12.2013, 17:05; Ответить: N1TAXE
Сообщение #6


Я понимаю, но мне нужно именно с изображением.


Вот как вам ответить, если вы не показываете ни своей картинки ни того, как вы ее вставляете? )

Короче, вашу картинку — в студию. Тогда, наверное, найдем и проблему и решение.


[img]http://4.firepic.org/4/images/2013-12/03/iy9u0xyb9civ.png[/img]
Вот, прошу. Делал на скорую руку, что бы проверить. P.S: Присутствует прозрачность.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
yury_mw
yury_mw
сообщение 4.12.2013, 0:38; Ответить: yury_mw
Сообщение #7


[member=N1TAXE],
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>tst</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
*{
  margin: 0;
  padding: 0;
}
.button{
  float: left;
  margin: 0.5em 0 0 0;
}
.button a{
  font: bold 12px Verdana, Geneva, "DejaVu Sans", sans-serif;
  display: block;
  width: 300px;
  height: 50px;
  line-height: 48px;
  text-decoration: none;
  background: url(button.png) 50% 0 no-repeat;
  color: #000;
  text-align: center;
}
.button a:hover{
  background: url(button.png) 50% -50px no-repeat;
  color: #fff;
}
</style>
</head>
<body>
<div class="button"><a href="#">Кнопка</a></div>
<p>Однажды, в студеную зимнюю пору,
Я из лесу вышел; был сильный мороз.
Гляжу, поднимается медленно в гору
Лошадка, везущая хворосту воз.
И, шествуя важно, в спокойствии чинном,
Лошадку ведет под уздцы мужичок
В больших сапогах, в полушубке овчинном,
В больших рукавицах... а сам с ноготок!
— Здорово, парнище!— «Ступай себе мимо!»
— Уж больно ты грозен, как я погляжу!
Откуда дровишки?— «Из лесу, вестимо;
Отец, слышишь, рубит, а я отвожу».
(В лесу раздавался топор дровосека.)
— А что, у отца-то большая семья?
«Семья-то большая, да два человека
Всего мужиков-то: отец мой да я...»
— Так вон оно что! А как звать тебя?— «Власом».
— А кой тебе годик?— «Шестой миновал...
Ну, мертвая!»— крикнул малюточка басом,
Рванул под уздцы и быстрей зашагал.
На эту картину так солнце светило,
Ребенок был так уморительно мал,
Как будто все это картонное было,
Как будто бы в детский театр я попал!</p>
</body>
</html>

На всякий случай: по поводу вразумления не очень умного, но к счастью ныне редко встречающегося IE6, не понимающего прозрачность png, смотрите костыли вроде belatedPNG
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
isvetlichniy
isvetlichniy
сообщение 4.12.2013, 2:28; Ответить: isvetlichniy
Сообщение #8


IE6, не понимающего прозрачность png

а я всегда с данной проблемой боролся использую gif изображения. данный формат прекрасно позволяет использовать порзрачность
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
sae
sae
сообщение 4.12.2013, 20:08; Ответить: sae
Сообщение #9


позволяет использовать порзрачность

А полупрозрачность? В случае с плавающим изображением и неоднородным фоном gif не прокатит. Поэтому все чаще возникает мысль: "ну и фиг с ним, с ослом".
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
isvetlichniy
isvetlichniy
сообщение 4.12.2013, 23:44; Ответить: isvetlichniy
Сообщение #10


"ну и фиг с ним, с ослом".

да я на него забил года полтора как, шестым ослом уже никто не пользуется. я полностью на CSS3 уже перешел. пусть обновляют браузеры кому надо

21-й век на дворе. а мы до сих пор на запорожцах ездим, нет уж :)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
« Предыдущая тема · Программная часть · Следующая тема »
 
2 страниц V   1 2 >
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Разработка/доработка сайтов Wordpress, HTML/CSS/JS
Вёрстка, перенос на WP, правки
 9 malamut 3460 25.1.2024, 14:36
автор: malamut
Открытая тема (нет новых ответов) СОЗДАНИЕ : / САЙтЫ / ЛЕНДЫ / БОТЫ ТГ / ВАЙТЫ / КРЕО / СОФТЫ / ДИЗАЙН [PHP, JS, HTML/CSS] и другое
 5 CULA 3400 19.12.2023, 18:55
автор: CULA
Открытая тема (нет новых ответов) Продается сайт фотосток ИИ изображений
Хороший вариант!
 20 alexey 3277 25.6.2023, 15:28
автор: alexey
Открытая тема (нет новых ответов) Веб-разработка (HTML, CSS)
 1 ViktoriaFE 6459 5.5.2021, 5:22
автор: bekett
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыКорректность показа вёрстки изображений на разных гаджетах
Не сохраняются пропорции изображений на смартфонах
 1 master-vek 37257 25.3.2021, 13:22
автор: tedder


 

Режим отображения: Стандартный · Переключить на: Линейный · Переключить на: Древовидный

Подписка на тему · Сообщить другу · Версия для печати · Подписка на этот форум

RSS Текстовая версия Сейчас: 20.4.2024, 1:25

Дизайн

 
Форум IP.Board © 2024  IPS, Inc.
Лицензия зарегистрирована на: MaulNet
Jooble
Форум IP.Board © IPS, Inc.
Лицензия зарегистрирована на: MaulNet