免費(fèi)AI編程助手
如何使用CSS3創(chuàng)建一個漂亮的圖標(biāo)
今天，我想展示給你一個巧妙的花招。我們將創(chuàng)建一個純CSS3文本圖標(biāo)。更讓人震驚的是，這效果將只需要一個HTML元素。
游戲的計(jì)劃
- 創(chuàng)建一個矩形盒子
- 設(shè)置圓角
- 使用偽類元素創(chuàng)建一個卷角效果
- 通過梯度漸變創(chuàng)建文本效果
讓我們開始吧！
第一步：創(chuàng)建盒子
讓我們加入唯一的HTML元素：一個錨標(biāo)簽。這是有理可依，因?yàn)榇蠖鄶?shù)的圖標(biāo)同時也是一個鏈接。
<a class="docIcon" href="#">Document Icon</a>
可以給圖標(biāo)設(shè)置任何尺寸，我們設(shè)置為40*56px——只是演示，在實(shí)際環(huán)境中你可能需要其他尺寸。同時，我們需要添加 display:block，因?yàn)樗械腻^標(biāo)簽?zāi)J(rèn)情況下都是內(nèi)聯(lián)函數(shù)。
.docIcon
{
background:#eee;
background: linear-gradient(top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%);
border:1px solid #ccc;
display:block;
width:40px;
height:56px;
position:relative;
margin:42px auto;
}
注意，以上，我們設(shè)定的定位上下文是為后面?zhèn)卧胤?wù)。你會發(fā)現(xiàn)，我僅僅用了官方CSS3語法中的漸變。你可能會想需要使用瀏覽器前綴。為了加快速度，你可以用prefixr.com（網(wǎng)站掛掉了，試試這個吧，http://leaverou.github.io/prefixfree/）或在你最喜歡的代碼編輯器里使用它的API。簡單的復(fù)制上面的代碼片段，粘貼到prefixr的文本框內(nèi)，然后點(diǎn)擊確認(rèn)，它會生成各種帶前綴的屬性，像這樣：
.docIcon {
background: #eee;
background: -webkit-linear-gradient(top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%);
background: -moz-linear-gradient(top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%);
background: -o-linear-gradient(top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%);
background: -ms-linear-gradient(top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%);
background: linear-gradient(top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%);
border: 1px solid #ccc;
display: block;
width: 40px;
height: 56px;
position: relative;
margin: 42px auto;
}
接下來，讓我們使用CSS的box-shadow添加一些陰影效果。我也用text-indent屬性來隱藏文本。
.docIcon
{
...
-webkit-box-shadow:inset rgba(255,255,255,0.8) 0 1px 1px;
-moz-box-shadow:inset rgba(255,255,255,0.8) 0 1px 1px;
box-shadow:inset rgba(255,255,255,0.8) 0 1px 1px;
text-indent:-9999em;
}
到目前為止，我們得到如下所示：
第二步：設(shè)置圓角
接下來，我們需要創(chuàng)建一個圓角的效果。添加下面的代碼：
.docIcon
{
...
-webkit-border-radius:3px 15px 3px 3px;
-moz-border-radius:3px 15px 3px 3px;
border-radius:3px 15px 3px 3px;
}
通過這四個值，可以指定的頂部，底部，左，右半徑，因此。這是類似于你設(shè)置外邊據(jù)和內(nèi)邊距的方式。
現(xiàn)在如下：
第三步：彎曲一個角
為創(chuàng)建彎曲角的視覺效果，我們將使用生成內(nèi)容和偽類元素。
首先，在我們的圖標(biāo):before上添加內(nèi)容。在這種情況下，我們不需要任何特定的文本。相反，我們需要創(chuàng)建一個15px的盒子，并應(yīng)用背景漸變。
.docIcon:before {
content: "";
display: block;
position: absolute;
top: 0;
right: 0;
width: 15px;
height: 15px;
background: #ccc;
background: -webkit-linear-gradient(45deg, #fff 0, #eee 50%, #ccc 100%);
background: -moz-linear-gradient(45deg, #fff 0, #eee 50%, #ccc 100%);
background: -o-linear-gradient(45deg, #fff 0, #eee 50%, #ccc 100%);
background: -ms-linear-gradient(45deg, #fff 0, #eee 50%, #ccc 100%);
background: linear-gradient(45deg, #fff 0, #eee 50%, #ccc 100%);
-webkit-box-shadow: rgba(0,0,0,0.05) -1px 1px 1px, inset white 0 0 1px;
-moz-box-shadow: rgba(0,0,0,0.05) -1px 1px 1px, inset white 0 0 1px;
box-shadow: rgba(0,0,0,0.05) -1px 1px 1px, inset white 0 0 1px;
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
}
為給我們的生成內(nèi)容設(shè)置右上方的卷角，我們必須，再次采用相同的設(shè)置。
...
-webkit-border-radius:3px 15px 3px 3px;
-moz-border-radius:3px 15px 3px 3px;
border-radius:3px 15px 3px 3px;
展示！
第四步：添加線
接下來，我們將使用:after偽元素添加一些虛線代表抽象的文本。設(shè)置寬度為60%，左右外邊據(jù)各為20%（相加為100%）。接下來，我們指定高度和位置在0,0點(diǎn)。
.docIcon:after
{
content:"";
display:block;
position:absolute;
left:0;
top:0;
width:60%;
margin:22px 20% 0;
height:15px;
}
創(chuàng)建一組線顯得有點(diǎn)棘手，但是如果我們是聰明的話，我們可以使用CSS漸變達(dá)到這種效果。首先，把總高度除以五，將每一塊用實(shí)心填充。請參考下面的圖像，清晰的體現(xiàn)這一思想。要把它放進(jìn)你的工具箱，它是個漂亮的技術(shù)，不是嗎？
多條線的CSS漸變
.docIcon:after
{
...
background:#ccc;
background: -webkit-linear-gradient(top, #ccc 0, #ccc 20%, #fff 20%, #fff 40%, #ccc 40%, #ccc 60%, #fff 60%, #fff 80%, #ccc 80%, #ccc 100%);
background: -moz-linear-gradient(top, #ccc 0, #ccc 20%, #fff 20%, #fff 40%, #ccc 40%, #ccc 60%, #fff 60%, #fff 80%, #ccc 80%, #ccc 100%);
background: -o-linear-gradient(top, #ccc 0, #ccc 20%, #fff 20%, #fff 40%, #ccc 40%, #ccc 60%, #fff 60%, #fff 80%, #ccc 80%, #ccc 100%);
background: -ms-linear-gradient(top, #ccc 0, #ccc 20%, #fff 20%, #fff 40%, #ccc 40%, #ccc 60%, #fff 60%, #fff 80%, #ccc 80%, #ccc 100%);
background:linear-gradient(top, #ccc 0, #ccc 20%, #fff 20%, #fff 40%, #ccc 40%, #ccc 60%, #fff 60%, #fff 80%, #ccc 80%, #ccc 100%);
}
我們完成了！
你喜歡嗎？你有其他類似的把戲嗎？如果有的話，在下面的評論留下它們的鏈接。
譯者注
本文為翻譯文章，原文為“How to Create a Beautiful Icon with CSS3”
更多建議：