Уголок блока поиска у яндекса

lazio_od · January 10, 2009

Очень интересует реализация технолов Яндекса уголка плашки поиска:

Попытался реализовать самостоятельно, но в ИЕ до ума довести так и не смог.

Особенно интересно растягивания:

Если кто то может объяснить технологию, дать ссылку на урок, или дать код с комментариями - буду очень благодарен.

Спасибо.

Иван Шумов · January 10, 2009

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

kalyaka-malyaka · January 10, 2009

firebug таки рулит

сделано там так:

table {
background:#FFCC00 none repeat scroll 0 0;
}
.arr {
background:transparent url(http://img.yandex.net/i/arr.png) no-repeat scroll 100% 50%;
}

<table>
  <tr>
	<td class="arr"> </td>
  </tr>
</table>

правда, картинку сами посмотрите?

lazio_od · January 10, 2009

Не совсем так. вариант не для ИЕ сделан перекрёстными бордерами. Для ИЕ картиками с белыми треугольниками заслоняет желтые углы.

Буду признателен если вы опишете сам механизм создание такого уголка.

firebug таки рулит
сделано там так:
table {
background:#FFCC00 none repeat scroll 0 0;
}
.arr {
background:transparent url(http://img.yandex.net/i/arr.png) no-repeat scroll 100% 50%;
}

<table>
  <tr>
	<td class="arr"> </td>
  </tr>
</table>
правда, картинку сами посмотрите?

это я видел. А вот как разместить и отобразить это на странице не понимаю.

Механизм вроде понятен:

блоку с картинкой даём высоту, ширину и бэкграунд, а внешнему overflow:hidden. Думаю так, но на практике кроссбраузерно реализовать не выходит.

Плюс еще и для нормальных браузеров реализация немного иная.

Кстати, моя вина что не указал сначала. Я говорю не про главную страницу, а про внутреннюю страницу поиска. То есть страница которая отображается после того как вы нажали на кнопку: "Найти".

Edited January 10, 2009 by lazio_od

Azadi · January 10, 2009

Вот занятный вариант с Хабра:

<div style="border-top:34px solid #FFF; border-left:17px solid #FFCC00; border-bottom:34px solid #FFF;"></div>

http://habrahabr.ru/blogs/webdev/46033/

А вообще Девятилап прав, тебе поможет баааальшой уголок, запихнутый в слой, который абсолютно спозиционирован вправо (с height:100%; от высоты родителя)

lazio_od · January 10, 2009

Вот занятный вариант с Хабра:
<div style="border-top:34px solid #FFF; border-left:17px solid #FFCC00; border-bottom:34px solid #FFF;"></div>
http://habrahabr.ru/blogs/webdev/46033/

Видел это. В блоке с заданной высотой и шириной никаких проблем, а вот что б тянулся по высоте - уже не выходит.

А вообще Девятилап прав, тебе поможет баааальшой уголок, запихнутый в слой, который абсолютно спозиционирован вправо (с height:100%; от высоты родителя)

Да, вариант не плохой, но, во-первых, у меня не выходит растянуть див на 100% по высоте, а во-вторых меня больше интересует именно яндексовское решение.

Edited January 10, 2009 by lazio_od

Azadi · January 11, 2009

Учу.

1. Открывам нужну страничку Яндекса.

2. Смотрим код этой странички.

3. Вырываем нужный кусок HTML (да, FireBug рулит - в вашем случае это <form id="b-head-search" ).

4. Ищем CSS. Т.к. это Яндекс, то CSS, естественно, сжат и труден в понимании. Но нас это не пугает.

http://css.yandex.net/css/search/r4/_serp.css - для нормальных браузеров

http://css.yandex.net/css/search/r4/_serp.ie.css - то что вам нужно для кроссбраузерной реализации - вариант для IE!

5. В итоге у вас все, что нужно для понимания данного фрагмента.

P.S. да, код Яндекса это жесть. Высшая математика, если хотите. Лично я понял фрагмент примерно так:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">
* {
	padding:0;
	margin:0;
	border:0;
}
BODY {
	color:#000;
}
#yandex {
	margin:50px 200px;
	position:relative;
	height:1%;
}
#search {
	background:#fc0;
	padding-right:8%;
	height:50px;
}
#arr {
	background:url('arr.png') center right no-repeat;
	display:block;
	position:absolute;
	width:8%;
	top:0;
	right:0;
	bottom:0;
}
</style>

<!--[if lt IE 7]>
<style type="text/css">
#arr {
	height: expression(parentNode.offsetHeight+'px');
}
</style>
<![endif]-->

</head>

<body>

<div id="yandex">
		<div id="search">
			abasgasb
		</div>
		<i id="arr"></i>
</div>
</body>
</html>

lazio_od · January 12, 2009

Azadi

Решение хорошее, только вот стрелка не тянется при добавлении текста, а это обязательное условие.

Azadi · January 12, 2009

Azadi
Решение хорошее, только вот стрелка не тянется при добавлении текста, а это обязательное условие.

Не тянется при добавлении текста? Или вы невнимательно просмотрели код, или я чего-то совсем-совсем не понимаю... А понимаю я вот так: Пример

lazio_od · January 12, 2009

Не тянется при добавлении текста? Или вы невнимательно просмотрели код, или я чего-то совсем-совсем не понимаю... А понимаю я вот так: Пример

да, вы правы, если убрать высоту всё тянется. спасибо

Sign In

Уголок блока поиска у яндекса

Question

lazio_od

Link to comment

Share on other sites

9 answers to this question

Recommended Posts

Иван Шумов

Link to comment

Share on other sites

kalyaka-malyaka

Link to comment

Share on other sites

lazio_od

Link to comment

Share on other sites

Azadi

Link to comment

Share on other sites

lazio_od

Link to comment

Share on other sites

Azadi

Link to comment

Share on other sites

lazio_od

Link to comment

Share on other sites

Azadi

Link to comment

Share on other sites

lazio_od

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information