成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

使用CSS生成圖標(biāo)

godiscoder / 892人閱讀

摘要：理解這一點(diǎn)讓上邊和下邊也變成三角形就簡(jiǎn)單了，將元素的屬性設(shè)為現(xiàn)在上下左右個(gè)邊框都是三角形了。實(shí)例二制作快進(jìn)按鈕效果為了減少頁(yè)面的元素，我們可以只提供一個(gè)元素實(shí)現(xiàn)第個(gè)三角形，然后借助的偽類實(shí)現(xiàn)第個(gè)三角形。

有一次筆者在參加前端面試的過(guò)程中被面試官問(wèn)到這樣一個(gè)問(wèn)題： BootStrapt里面的圖標(biāo)是怎么樣的？
用過(guò)Bootstrapt的開(kāi)發(fā)者都知道，在Bootstrapt里面有一個(gè)圖標(biāo)組件，引用這個(gè)文件之后，就可以通過(guò)給元素添加類名來(lái)給元素添加相應(yīng)的圖標(biāo)，并且這個(gè)圖標(biāo)還可以改變顏色和大小。那么它是怎么實(shí)現(xiàn)的呢？
大家首先想到的最通用的添加圖標(biāo)的方法就是以圖片的形式添加，但是仔細(xì)想一想，圖片能改變顏色嗎？
大家再想想，字體可以改變顏色和大小。而且CSS3支持web字體，使得圖標(biāo)的變化更為豐富，于是就有人用字體制作了圖標(biāo)。但是，我們今天要講的是功能更強(qiáng)的圖標(biāo)制作方案：用純生html和css制作圖標(biāo)。

下面從最簡(jiǎn)單的實(shí)例開(kāi)始教大家如何使用CSS制作icon
1.三角形圖標(biāo)
效果圖：

詳細(xì)講解實(shí)現(xiàn)過(guò)程：
首先，實(shí)現(xiàn)長(zhǎng)方形邊框
HTML的塊級(jí)元素都是長(zhǎng)方形的，比如我們?cè)O(shè)定了以下樣式：

這個(gè)長(zhǎng)方形太單調(diào)了，再給它點(diǎn)顏色看看，咱們來(lái)個(gè)彩色邊框吧。

請(qǐng)注意長(zhǎng)方形的4個(gè)角，以左上角為例，它到底是屬于左邊框還是上邊框呢？
左上角，既屬于左邊框，又屬于上邊框，角落的歸屬成了一個(gè)問(wèn)題，瀏覽器為了不讓邊框打架，就讓二位各分一半吧。于是乎左上角就被一分為二，變成了兩個(gè)三角形，三角形靠近哪個(gè)邊框，就顯示那個(gè)邊框的顏色。
三角形的實(shí)現(xiàn)
我們把上面這個(gè)彩色邊框的矩形內(nèi)容拿掉，看看會(huì)發(fā)生什么。

嗚，cool！左邊和右邊都是三角形了 耶！

為什么上邊和下邊還是梯形呢？這是因?yàn)閴K級(jí)元素默認(rèn)會(huì)在頁(yè)面上水平平鋪。
理解這一點(diǎn)讓上邊和下邊也變成三角形就簡(jiǎn)單了，將元素的width屬性設(shè)為0：

現(xiàn)在上下左右4個(gè)邊框都是三角形了。

如何制作成三角形呢？把三個(gè)邊框設(shè)置成透明試一試！

2.下面是一個(gè)實(shí)現(xiàn)旗幟的效果：

根據(jù)以上知識(shí)，我們很自然地就能想到實(shí)現(xiàn)方法，將border-bottom的顏色設(shè)置為透明的。

/*CSS：*/
.flag {
width: 0;
height: 0;
border: 2rem solid #FF6600;
border-top-width: 4rem;
border-bottom-color: transparent;
border-bottom-width: 2rem;
}

實(shí)例二：制作快進(jìn)按鈕效果

為了減少頁(yè)面的HTML元素，我們可以只提供一個(gè)元素實(shí)現(xiàn)第1個(gè)三角形，然后借助CSS3的偽類實(shí)現(xiàn)第2個(gè)三角形。
第1個(gè)三角形使用了相對(duì)定位，第2個(gè)三角形使用了絕對(duì)定位，使得第2個(gè)三角形能夠緊挨著第1個(gè)三角形。

  /*CSS：*/
    .rds-arrow-wrapper {
    position: relative;
    width: 20em;
    text-align: center;
}
 
.rds-arrow,
.rds-arrow:after {
    display: inline-block;
    position: relative;
    width: 0;
    height: 0;
    border-top: 1rem solid transparent;
    border-left: 2rem solid #eae;
    border-bottom: 1rem solid transparent;
    border-right: 2rem solid transparent;
}
 
.rds-arrow {
    margin-left: 1rem;
}
 
.rds-arrow:after {
    content: "";
    position: absolute;
    left: 100%;
    top: -1rem;
    bottom: 0;
}

需要注意的是，箭頭方向是向右的，但在CSS里面是通過(guò)border-left的顏色來(lái)控制的。

經(jīng)過(guò)以上兩個(gè)例子，大家對(duì)制作圖案的原理都有初步的了解了吧。下面的實(shí)例三將帶領(lǐng)大家制作一個(gè)常用的icon圖標(biāo)，相信大家學(xué)習(xí)了之后，發(fā)散自己的思維，就可以制作出更多的圖案。




    
    Home

好了，下面該是你設(shè)計(jì)出自己圖案的時(shí)候了~

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/50058.html

相關(guān)文章

  • 淺談 CSS Sprites 雪碧圖應(yīng)用

    摘要：編寫(xiě)配置文件，以下是關(guān)鍵配置代碼雪碧圖合并輸出到文件參數(shù)執(zhí)行目錄參數(shù)生成的和圖片的文件名之所以推薦，是因?yàn)榉浅５撵`活，看懂模塊的可以根據(jù)你的項(xiàng)目情況編寫(xiě)對(duì)應(yīng)的配置文件。 showImg(https://segmentfault.com/img/bVGpAw?w=518&h=156); 前言 網(wǎng)站開(kāi)發(fā)90%會(huì)用到小圖標(biāo)， 多小圖標(biāo)調(diào)用顯示是前端開(kāi)發(fā)常見(jiàn)的問(wèn)題；目前小圖標(biāo)顯示常見(jiàn)有兩種方式...

    MkkHou 評(píng)論0 收藏0

  • iconfont實(shí)踐小結(jié)

    摘要：所以實(shí)現(xiàn)小圖標(biāo)時(shí)雪碧圖跟圖標(biāo)字體會(huì)在一個(gè)網(wǎng)站共存，自定義圖標(biāo)字體為什么比較耗時(shí)，且太復(fù)雜圖標(biāo)無(wú)法實(shí)現(xiàn)請(qǐng)往下看開(kāi)發(fā)流程就了解了。參考資料細(xì)談淺談圖標(biāo)字體向下兼容優(yōu)雅降級(jí)技術(shù)繪制小圖標(biāo)技巧雪碧圖圖標(biāo)字體矢量小圖標(biāo)設(shè)計(jì)本文對(duì)應(yīng)源碼源碼地址演示地址 showImg(https://segmentfault.com/img/bVRnAC?w=431&h=220); 之前寫(xiě)了一篇關(guān)于雪碧圖的博文，...

    bitkylin 評(píng)論0 收藏0

  • svgtofont.js 自動(dòng)生成圖標(biāo)字體和彩色圖標(biāo)文件

    摘要：使用說(shuō)明圖標(biāo)字體只能被渲染成單色，不能生成彩色圖標(biāo)。自動(dòng)生成預(yù)覽網(wǎng)站，預(yù)覽字體文件。創(chuàng)建最大輸入圖標(biāo)寬度的等寬字體。輸出的字體高度默認(rèn)為最高輸入圖標(biāo)的高度。自動(dòng)生成樣式和。 一般情況我通過(guò) iconfont 或者 icomoon 來(lái)實(shí)現(xiàn)圖標(biāo)管理生成字體，導(dǎo)入到項(xiàng)目中使用。 ┌────────┐ ┌────────────...

    objc94 評(píng)論0 收藏0

  • svgtofont.js 自動(dòng)生成圖標(biāo)字體和彩色圖標(biāo)文件

    摘要：使用說(shuō)明圖標(biāo)字體只能被渲染成單色，不能生成彩色圖標(biāo)。自動(dòng)生成預(yù)覽網(wǎng)站，預(yù)覽字體文件。創(chuàng)建最大輸入圖標(biāo)寬度的等寬字體。輸出的字體高度默認(rèn)為最高輸入圖標(biāo)的高度。自動(dòng)生成樣式和。 一般情況我通過(guò) iconfont 或者 icomoon 來(lái)實(shí)現(xiàn)圖標(biāo)管理生成字體，導(dǎo)入到項(xiàng)目中使用。 ┌────────┐ ┌────────────...

    ranwu 評(píng)論0 收藏0

  • CSS4:icon全解

    摘要：全解法如何在文件里扣出圖層里的圖標(biāo)右鍵選中這個(gè)圖層右擊這個(gè)圖層把這個(gè)圖層放到新文件點(diǎn)擊圖片的按鈕自動(dòng)切圖到最小再調(diào)整一下畫(huà)布大小將圖片設(shè)置為長(zhǎng)寬一樣導(dǎo)出即可在頁(yè)面里圖片會(huì)默認(rèn)保持比例所以只要設(shè)置寬高的其中一種就可以了摳圖的前端現(xiàn)在基本沒(méi)有了 CSS4:icon全解 1.img法 1.1如何在psd文件里扣出圖層里的圖標(biāo) 右鍵選中這個(gè)圖層showImg(https://segmentf...

    LinkedME2016 評(píng)論0 收藏0

  • 使用CSS生成圖標(biāo)

    摘要：理解這一點(diǎn)讓上邊和下邊也變成三角形就簡(jiǎn)單了，將元素的屬性設(shè)為現(xiàn)在上下左右個(gè)邊框都是三角形了。實(shí)例二制作快進(jìn)按鈕效果為了減少頁(yè)面的元素，我們可以只提供一個(gè)元素實(shí)現(xiàn)第個(gè)三角形，然后借助的偽類實(shí)現(xiàn)第個(gè)三角形。 有一次筆者在參加前端面試的過(guò)程中被面試官問(wèn)到這樣一個(gè)問(wèn)題： BootStrapt里面的圖標(biāo)是怎么樣的？用過(guò)Bootstrapt的開(kāi)發(fā)者都知道，在Bootstrapt里面有一個(gè)圖標(biāo)組件，...

    helloworldcoding 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<