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

StackOverflow https://stackoverflow.com/questions/574671

  •  05-09-2019
  •  | 
  •  

Вопрос

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

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

http://www.google.com/

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

Это было полезно?

Решение

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

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

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

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

Другие советы

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

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

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

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

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top