В чем секрет CSS окна поиска Google? - PullRequest
Новая
       17

В чем секрет CSS окна поиска Google?

3 голосов
/ 22 февраля 2009

Я изучаю методы css, которые Google использует для создания своего пользовательского интерфейса. Я понял, что код CSS на их домашней странице не содержит ссылки на окно поиска; кажется, что это просто пустой тег ввода, без рамки, фонового изображения или каких-либо соглашений, обычно используемых для стилизации границы. И все же он может отображать не только оттенок и вид градиента, но он слегка округлый и также реагирует на фокус курсора.

Итак, ваше предположение так же хорошо, как и мое. Пожалуйста, используйте ваш Firebug, чтобы проверить его и помочь мне разобраться с этой загадкой.

http://www.google.com/

РЕДАКТИРОВАТЬ: Просто чтобы быть ясно, я не пытаюсь сделать эстетическое суждение. Хотя я считаю минимализм главной страницы Google фантастическим, мне действительно интересно узнать о методах, которые они использовали для стилизации границ вокруг окна поиска - без использования каких-либо CSS.

Ответы [ 6 ]

10 голосов
/ 22 февраля 2009

Вы используете Mac? Разве все нативные элементы пользовательского интерфейса не округляются, светятся и не меняют цвет?

Есть ли у вас какие-либо надстройки, такие как панель инструментов Google, которые могли бы изменять пользовательский интерфейс страницы без возможности ее обнаружения?

Edit: техника, о которой идет речь в вопросе, на самом деле не имеет ничего общего с CSS и все, что связано с браузером. При вводе текста на главной странице Google стиль CSS не применяется, поэтому он остается на усмотрение браузера, чтобы решить, как он выглядит. Вот как это выглядит, когда поле имеет фокус в Google Chrome:

удалена мертвая ссылка ImageShack

2 голосов
/ 22 февраля 2009

не уверен насчет своей домашней страницы, но они делают то же самое в Gmail, и здесь задействован CSS: 

.mFwySd:focus
{
border:2px solid #73A6FF !important; 
margin:0 !important;
outline-color:-moz-use-text-color !important; 
outline-style:none !important; 
outline-width:0 !important; 
}

.mFwySd {
background-color:#FFFFFF;
border-color:#666666 #CCCCCC #CCCCCC;
border-style:solid;
border-width:1px;
color:#000000;
}
2 голосов
/ 22 февраля 2009

Не секрет. Это обычное текстовое поле ... Домашняя страница Google всегда была минималистичной.

0 голосов
/ 15 февраля 2010

Теперь, когда некоторые браузеры, такие как firefox, умеют читать css3, вы можете использовать это, чтобы иметь угловой радиус, я использую его сейчас! хотя он еще не действителен для w3c.

0 голосов
/ 31 марта 2009

Не похоже, что они стилизуют окно поиска. Но если они хотят, они могут просто использовать собственный HTML-тег input. Вам просто нужно сослаться на это в файле CSS. 

input {
     padding:???;
     margin:???;
     background:url(http://www.???.???/images/???.???) #FFF no-repeat 0 0;
     color:#??????;
     text-align:????;
     font:normal ?em/?em arial;
}

Это будет охватывать поле поиска. Если вам нужно закрыть кнопку, просто добавьте класс в поле ввода кнопки.

Я всегда использую .btn

input.btn {
     padding:???;
     margin:???;
     background:url(http://www.???.???/images/???.???) #FFF no-repeat 0 0;
     color:#??????;
     text-align:????;
     font:normal ?em/?em arial;
}

Теперь это должно дать вам полный контроль над любым полем input на всем вашем сайте.

0 голосов
/ 22 февраля 2009

Это все о Chrome, он применяет внешний эффект свечения, когда вы фокусируетесь на любом текстовом поле с помощью этого браузера.

...