Что такое секрет CSS в поле поиска Google?

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

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

http://www.google.com/

EDIT: Просто чтобы быть ясно, я не пытаюсь сделать эстетическое суждение. Хотя я считаю, что минимализм главной страницы Google фантастический, мне действительно интересно узнать, какие методы они использовали для стилизации границ вокруг окна поиска - без использования каких-либо CSS.

источник

2009-02-22 picardo

Простота своей домашней страницы - это то, что заставило меня перейти на google с excite.com (около 2000). Вернувшись во времена 14.4 модемов, было интересно найти страницу поиска, которую вам не пришлось ждать. Ничего, но ничего, кроме поиска. –

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

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

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

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

источник

2009-02-22 09:59:12

Нет, я нахожусь в Windows Vista. Нет панели инструментов Google. Я проверил его в разных браузерах, и он выглядит в основном тем же, за исключением Google Chrome, где фокус заставляет границу принимать оранжевый оттенок. – picardo

Ах! К сожалению, не существует волшебства CSS, это именно то, что текстовые входы выглядят в Chrome. –

О, человек. Конечно. Они используют собственные стили браузера. Который, по-видимому, не появляется в Firebug. Вероятно, я мог бы найти их в chrome.css, tho. Ха. Благодаря! – picardo

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

источник

2009-02-22 09:58:34 cletus

Спасибо за ответ, но я пытаюсь изучить технику, которую они использовали для создания эффекта границы. – picardo

Я не уверен, что вы видите, но я вижу простое текстовое окно с ванилью. – cletus

В любом случае, это то, что мы пытаемся вам сказать: в этом нет ничего особенного. Все, что вы видите, это результат вашей ОС, вашего браузера, плагина какого-то описания или, ну, ваше воображение. – cletus

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

источник

2009-02-22 10:40:15

не уверен, об их домашней странице, но они делают то же самое в 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; 
}

источник

2009-02-22 10:50:16

Вот полезная ссылка для использования этого CSS с IE: http://cf-bill.blogspot.com/2005/05/styling-all-input-typetext-webpage.html –

Это не выглядит как они стилизацию в окне поиска. Но если бы они захотели, они могли бы просто использовать собственный 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 полем на вас весь сайт.

источник

2009-03-31 16:10:22

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

источник

2010-02-15 02:59:22 hadith

Что такое секрет CSS в поле поиска Google?

ответ

Смежные вопросы