ссылка углы и градиент

npofopr · October 10, 2010

пытаюсь сделать на ссылки в меню и закругленные углы и градиент.

вот тут

справа меню. собственно интересуют IE6-8.

пробовал разными комбинациями скриптов:

DD_roundies - PIE.htc

пробовал сделать градиент предварительно сгенерировав на display-inline.fr

пробовал сделать скриптами как тут http://www.konstantinbaev.ru/cg/

(и вроде как работает нормально)

но. ссылки не должны ограничиваться по высоте, потому как х.з. какая ссылка будет. (в последнем примере как раз ограничение по высоте)

в общем кто делал? подскажите плиз.

DD_roundies - PIE.htc перекрывают друг друга, и поэтому работает только что то одно.

psywalker · October 10, 2010

DD_belatedPNG.fix - пробовал?

npofopr · October 10, 2010

зачем? мне png не надо фиксить

psywalker · October 10, 2010

зачем? мне png не надо фиксить

Аа, я тупанул, подумал, что ты про пнг)

npofopr · October 10, 2010

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

тогда будет -1 скрипт и наверно легко градиент ляжет.

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

попробую еще эту закруглялку

npofopr · October 12, 2010

как я и подумал очередная закруглялка помогла)

щас вроде и углы есть и градиент. в опере только почему то на фрихостинге картинки она не видит. и шрифты в ФФ значительно крупнее нежели при просмотре локально. а в ie углы скорее квадратные) но ничего. ну в ie-6 не глянул.

но будет клёво если кто то подскажет другие варианты ссылок с закругленными краями, градиентом и не ограниченные высотой.

Searcher · October 12, 2010

а css3 не подойдет?

Great Rash · October 12, 2010

css3pie?

npofopr · October 12, 2010

увы но нет. им я пробовал первоначально

Great Rash · October 12, 2010

А чем он не устроил?

npofopr · October 12, 2010

а не получалось. и в Опере вроде нет градиента.

чет я даже уже забыл.

ааа. ховер пропадает. его у меня не получилось победить.

вот тут можно посмотреть

Edited October 12, 2010 by npofopr

Great Rash · October 13, 2010

А у меня ховер в Опере есть. Градиента и правда нет, но для оперы можно вроде его при помощи масштабируемой SVG-картинки сделать.

О! В Опрере можно заюзать обычную картинку с градиентом и добавить свойство -o-background-size, об этом свойстве тут

npofopr · October 13, 2010

именно так у меня сейчас и сделано. т.е. картинкой.

только для всех браузеров.

.nav_gradient,
.nav li.button a {
	/* Legacy browsers */
	background: #7b766d url("./img/nav_gradient-bg.png") repeat-x top;
	-o-background-size: 100% 100%;
	-moz-background-size: 100% 100%;
	-webkit-background-size: 100% 100%;
	background-size: 100% 100%;
	}
	@media all and (min-width: 0px) {
		.nav_gradient,
		.nav li.button a {
			/* Opera */
			background: #7b766d url("./img/nav_gradient-bg.svg");
			/* Recent browsers */
			background-image: -moz-linear-gradient(
				top,
				#a39e95,
				#7b766d
			);
			background-image: -webkit-gradient(
				linear,
				left top, left bottom,
				from(#a39e95),
				to(#7b766d)
			);
		}
	}

а ховера вроде только в Ослах нет

Edited October 13, 2010 by npofopr

Great Rash · October 13, 2010

Блин, вот сейчас не поленюсь и сделаю ховер в Ослах. Потому что я знаю, что он там есть, и я об этом говорил, но мои сообщения многие мимо глаз пропускают, от того что они скромненькие такие

Прошу:

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

	<style type="text/css">
		.test {
			display: block;
			height: 100px;
			border: 1px solid #696;
			margin-top: 1px; /* !!!Without this string resizing does not work!!! */
			margin-bottom: 10px;
			padding: 10px;

			-webkit-border-radius: 10px;
			-moz-border-radius: 10px;
			border-radius: 10px;

			-webkit-box-shadow: #666 0px 2px 3px;
			-moz-box-shadow: #666 0px 2px 3px;
			box-shadow: #666 0px 2px 3px;

			background: #EEFF99;
			background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EEFF99), to(#66EE33));
			background: -moz-linear-gradient(#EEFF99, #66EE33);
			background: linear-gradient(#EEFF99, #66EE33);
			-pie-background: linear-gradient(#EEFF99, #66EE33);

			behavior: url('PIE.htc');
			position: relative;
		}

		.test:hover {
			background: #f00;
			background: -webkit-gradient(linear, 0 0, 0 bottom, from(#f00), to(#66EE33));
			background: -moz-linear-gradient(#f00, #66EE33);
			background: linear-gradient(#f00, #66EE33);
			-pie-background: linear-gradient(#f00, #66EE33);

			behavior: url('PIE.htc');
		}
	</style>
</head>
<body>

	<a href="#" class="test">
		Я ховер и я работаю!
	</a>

</body>
</html>

npofopr · October 13, 2010

теперь я понял.

странно конечно.

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

.nav li.button a:hover,
.nav li.button a.active {
	background: #e3bf22;
}

а если тоже градиентом, то работает.

.nav li.button a:hover,
.nav li.button a.active {
	background: #e3bf22;
	background: -webkit-gradient(linear, 0 0, 0 bottom, from(#f00), to(#e3bf22));
	background: -moz-linear-gradient(#f00, #e3bf22);
	background: linear-gradient(#f00, #e3bf22);
	-pie-background: linear-gradient(#f00, #e3bf22);
	behavior: url(PIE.htc);
}

вроде я так проверял, хотя может и нет.

но в общем спасибо, теперь хотя бы понятен глюк.

Great Rash · October 13, 2010

Да именно так. Потому что должен создаваться новый VML-элемент с новым градиентом и вообще со всем новым.

Если бы вы пробовали в точности, то что я вам (или все же не вам? не помню уже) советовал пару недель назад (а может и больше), а не переписывали сразу (перед тем как попробовать), то ваша проблема могла бы решиться давным-давно

psywalker · October 13, 2010

А я чё то не вкурил пост про ховер в ослах. Разве он там не работал когда-то?

Great Rash · October 13, 2010

2psywalker: ну вот еще один невнимательный. Он не работал при подключенном css3pie, т.е. чтоб он работал нужно behavior подрубать и на :hover тоже, npofopr этого не знал (т.е. он не знал, что нужно заново VML создавать, что просто так он не меняется).

npofopr · October 13, 2010

угу. теперь знаю

все в общем то из-за моей не внимательности наверно. потому что я так пробовал делать ставить на ховер, но видать проглядел

Sign In

ссылка углы и градиент

Question

Link to comment

Share on other sites

18 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information