CSS3 Gradient 創建水晶按鈕實例

2020-03-24 17:00:55

字體：大中小

來源：轉載

供稿：網友

沒有css3之前，我們需要在PS中創建水晶按鈕。有了css3，我們可以很容易生成水晶按鈕。盡管CSS3 Gradient還未得到大多數瀏覽器的支持，但各主流瀏覽器已經在自己的內核中支持css3 Gradient (WebKit Nightly (html' target='_blank'>current)、Safari 4 incl. Mobile Safari、Chrome 4、Firefox 3.6)。按鈕的html如下：1. div
2. div /div
3. Button Label
4. /div
在css中，分別定義buttton、aqua、glare的css屬性，.button定義按鈕外觀，.aqua實現水晶效果，.glare實現輝光效果。01..button{
02. width: 120px;
03. height: 24px;
04. padding: 5px 16px 3px;
05. -webkit-border-radius: 16px;
06. -moz-border-radius: 16px;
07. border: 2px solid #ccc;
08. position: relative;
09. /* Label */
10. font-family: Lucida Sans, Helvetica, sans-serif;
11. font-weight: 800;
12. color: #fff;
13. text-shadow: rgba(10, 10, 10, 0.5) 1px 2px 2px;
14. text-align: center;
15. vertical-align: middle;
16. white-space: nowrap;
17. text-overflow: ellipsis;
18. overflow: hidden;
19.}
實現水晶效果的css代碼：01..aqua{
02. background-color: rgba(60, 132, 198, 0.8);
03. border-top-color: #8ba2c1;
04. border-right-color: #5890bf;
05. border-bottom-color: #4f93ca;
06. border-left-color: #768fa5;
07. -webkit-box-shadow: rgba(66, 140, 240, 0.5) 0px 10px 16px;
08. -moz-box-shadow: rgba(66, 140, 240, 0.5) 0px 10px 16px;
09. background-image: -webkit-gradient(linear, 0% 0%, 0% 90%, from(rgba(28, 91, 155, 0.8)), to(rgba(108, 191, 255, .9)));
10./* for FF 3.6 */
11. background-image: -moz-linear-gradient(rgba(28, 91, 155, 0.8) 0%, rgba(108, 191, 255, .9) 90%);
12.}
上面的代碼中，-webkit-box-shadow或-moz-box-shadow生成按鈕投影。background-image生成漸變背景，類似PS中的“漸變疊加”。實現輝光效果的css代碼：01. .button .glare {
02. position: absolute;
03. top: 0;
04. left: 5px;
05. -webkit-border-radius: 8px;
06. -moz-border-radius: 8px;
07. height: 1px;
08. width: 142px;
09. padding: 8px 0;
10. background-color: rgba(255, 255, 255, 0.25);
11. background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.7)), to(rgba(255, 255, 255, 0)));
12.}html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：html以及DIV+CSS的命名規范總結分享（收藏）

下一篇：DIV+CSS技術入門學習