Помощник
|
Кнопка на css из изображений |
N1TAXE
|
Сообщение
#1
|
||
|
|
||
|
|||
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
|
Сообщение
#3
|
|
Хмм... С вашим изображением получается, а вот если я пытаюсь вставить свое, .png, то не получаеться... В чем проблема?
|
|
|
yury_mw |
2.12.2013, 23:00;
Ответить: yury_mw
Сообщение
#4
|
|
Вот как вам ответить, если вы не показываете ни своей картинки ни того, как вы ее вставляете? )
Короче, вашу картинку — в студию. Тогда, наверное, найдем и проблему и решение. |
|
|
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
|
Сообщение
#6
|
|
Я понимаю, но мне нужно именно с изображением.
Вот как вам ответить, если вы не показываете ни своей картинки ни того, как вы ее вставляете? ) Короче, вашу картинку — в студию. Тогда, наверное, найдем и проблему и решение. [img]http://4.firepic.org/4/images/2013-12/03/iy9u0xyb9civ.png[/img] Вот, прошу. Делал на скорую руку, что бы проверить. P.S: Присутствует прозрачность. |
|
|
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 |
4.12.2013, 2:28;
Ответить: isvetlichniy
Сообщение
#8
|
|
IE6, не понимающего прозрачность png а я всегда с данной проблемой боролся использую gif изображения. данный формат прекрасно позволяет использовать порзрачность |
|
|
sae |
4.12.2013, 20:08;
Ответить: sae
Сообщение
#9
|
|
позволяет использовать порзрачность А полупрозрачность? В случае с плавающим изображением и неоднородным фоном gif не прокатит. Поэтому все чаще возникает мысль: "ну и фиг с ним, с ослом". |
|
|
isvetlichniy |
4.12.2013, 23:44;
Ответить: isvetlichniy
Сообщение
#10
|
|
"ну и фиг с ним, с ослом". да я на него забил года полтора как, шестым ослом уже никто не пользуется. я полностью на CSS3 уже перешел. пусть обновляют браузеры кому надо 21-й век на дворе. а мы до сих пор на запорожцах ездим, нет уж |
|
|
|
Похожие темы
Тема | Ответов | Автор | Просмотров | Последний ответ | |
---|---|---|---|---|---|
Разработка/доработка сайтов Wordpress, HTML/CSS/JS Вёрстка, перенос на WP, правки |
9 | malamut | 3463 | 25.1.2024, 14:36 автор: malamut |
|
СОЗДАНИЕ : / САЙтЫ / ЛЕНДЫ / БОТЫ ТГ / ВАЙТЫ / КРЕО / СОФТЫ / ДИЗАЙН [PHP, JS, HTML/CSS] и другое | 5 | CULA | 3403 | 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 |
Текстовая версия | Сейчас: 20.4.2024, 13:11 |