Как Google создает свои кнопки формы? - PullRequest
2 голосов
/ 17 августа 2010

Мне очень нравится, как Gmail создал форму ввода и сопровождающую ее кнопку «Поиск почты».

См. Ссылку на скриншот .

Однако у менятрудное время для расшифровки сжатого кода HTML / CSS в Gmail, чтобы выяснить, как они создали этот внешний вид.

Может кто-нибудь помочь мне выяснить, какой HTML и CSS мне нужно использовать, чтобы воссоздать комбинацию ввода текста + сопровождающегокнопка "поиск почты" в точности как в Gmail (см. скриншот и обратите особое внимание на то, как ввод текста касается кнопки).

Заранее спасибо.

ОБНОВЛЕНИЕ :

Я нашел следующее сообщение в блоге, но у меня не было достаточно информации, чтобы воссоздать то, что Gmail сделал с помощью кнопки "поиск почты".

stopdesign.com / archive /2009/02/04/reatinging the the button.html

ОБНОВЛЕНИЕ 2

Несмотря на то, что я получил небольшую первоначальную помощь от Майкла, я все ещев недоумении о том, какна самом деле реализовать это.Любая дополнительная помощь, будет очень признателен.Спасибо!

Ответы [ 2 ]

2 голосов
/ 17 августа 2010

Это таблица с двумя столбцами. Текстовое поле поиска находится в левой ячейке, кнопка - в правой ячейке.

Кнопка - это элемент div со стилем, который придает ей внешний вид и ощущение кнопки. Он получил фоновую градиентную заливку, отступы и закругленные правые углы (но не левые).

При интервале ячеек и заполнении 0 кнопка находится на одном уровне с текстовым полем. Поскольку кнопка не имеет закругленных углов слева, но имеет право, она кажется частью единого элемента.

Фон создается как:

background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#F9F9F9), to(#E3E3E3));

Округление:

border-bottom-left-radius: 0px 0px;
border-top-left-radius: 0px 0px;
border-bottom-right-radius: 3px 3px;
border-top-right-radius: 3px 3px;

Такой инструмент, как инструменты разработчика Chrome или FireBug for Firefox, может помочь вам довольно быстро решить эту проблему с помощью функции Inspect Element.

0 голосов
/ 17 августа 2010

Вы можете сделать это, используя свойства позиции CSS, и использовать его методы, т.е. что-то вроде этого

<div class="button"> 
  <span class="top-right"> </span>
  <span class="bottm-right"></span>
</div> 

//css
.button{ postion:relative ; width : .. ; height:..; top : .. ; left: .. }
.top-right{postion:absolute;top:0;left:100%; width:..;height:..;display:block;;background:url(top_right_corner_img.gif);}

.bottom-right{postion:absolute;top:100%;left:100%; width:..;height:..;display:block;background:url(bottom_right_corner_img.gif);}

с некоторыми js, чтобы добавить событие клика ..

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...