Google如何創建表單按鈕？

我真的很喜歡Gmail如何創建表單輸入並附帶「搜索郵件」按鈕。Google如何創建表單按鈕？

See linked for screenshot。

但是，我很難解釋Gmail壓縮的HTML/CSS代碼來弄清楚他們是如何創建這種外觀的。

有人能幫助我弄清楚我需要用什麼HTML和CSS來重新創建文本輸入+伴隨的「搜索郵件」按鈕的組合，完全如Gmail所示（請參閱截圖並特別注意文本的方式輸入也會觸摸按鈕）。

在此先感謝。

UPDATE：

我發現下面的博客文章，但它並沒有足夠的信息讓我重新什麼的Gmail已經與「搜索郵件」按鈕來完成。

stopdesign.com/archive/2009/02/04/recreating-the-button.html

更新2

即使我已經得到了一些初步真棒幫助從下面邁克爾，我對於如何實際實現這一點，米仍然處於迷茫之中。任何更多的幫助，將非常感激。謝謝！

來源

2010-08-17 EricL

我找到了答案在這裏 - - > http://stackoverflow.com/questions/520640/googles-imageless-buttons/540316#540316 – EricL 2010-08-17 02:02:08

它有兩列的表。搜索文本框位於左側單元格中，「按鈕」位於右側單元格中。

「按鈕」是一個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的開發者工具，或Firefox的Firebug可以幫助你的工作就相當快了檢查Element功能。

來源

2010-08-17 01:28:56

嗨邁克爾，我很抱歉，但我對創建CSS有點新。我16歲。你介意幫助我使用HTML嗎？感謝所有幫助！ – EricL 2010-08-17 01:33:58

另外，這不** **背景**只在Chrome/Safari的工作，因爲它說-webkit。我很困惑，因爲這在IE和Firefox中也是適用的。 – EricL 2010-08-17 01:39:03

谷歌沒有檢測到瀏覽器 - 如果你不在支持漸變的瀏覽器上，它會提供一個圖像來模擬它。 – 2010-08-18 06:06:48

您可以通過使用CSS position屬性做到這一點，並利用其技術，即這樣

<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的一些東西添加點擊事件..

來源

2010-08-17 01:57:15 shox

Google如何創建表單按鈕？

回答

相關問題