文档章节

web頁面上的那些圖標

掬一捧
 掬一捧
发布于 2015/02/10 01:44
字数 2068
阅读 214
收藏 9

在一個HTML結構的頁面中,使用圖標最常接觸的是標籤<img>和css屬性background-image<img>純粹是為了顯示圖片而添加的標籤,適用於尺寸大的圖片,強調圖片的信息,不屬於頁面圖標的範疇(在web設計中,圖標和圖片是兩種概念:圖標在某種程度可有可惡,起到修飾點綴的效果,本身沒有什麼信息量;而圖片不同,圖片也是頁面欲展示給用戶的信息);因此,依賴<img>標籤實現的點綴圖標的作用的,都是不那麼合理的,因為<img>不是幹這種事情的,對搜索引擎亦是不友好的。

下面討論下,如何給一個web頁面添加修飾點綴用途的圖標的方式。

方式一:css屬性background-image

background-image主要用來設定塊級標籤的背景圖片,一般的使用形式如下:

.selector {
     background-image:url( '/* 要顯示的圖片網址 */' );
     background-repeat:no-repeat;
     background-color: /* 背景顏色 */;
}

這種方式不會將圖片的信息放在HTML結構中,而是通過css來維護管理的;實現方式最大的缺陷是如果一個頁面中存在好多些類似的圖標,那麼用戶客戶端的每次訪問就必須為了那些點綴增加許許多多的HTTP請求。

當然,最好的方式是將多個小圖標軿湊成一張大圖片來避免不必要的HTTP請求。

方式二:依賴background-position實現的Sprite圖

將多張小圖標合併成一張大圖片,頁面元素使用時只選擇其中的一部分顯示,這樣一堆小圖標合成的大圖片一般稱作Sprite圖(精靈圖,雪碧圖等)。 除了使用css屬性background-image之外,還要利用background-position來定位大圖中小圖標的坐標位置;通常情況下,還要指定小圖標的長寬信息,即widthheight屬性。一般的使用形式如下:

.selector {
    background-image: url(/* 要顯示的圖片網址 */);
    background-repeat: no-repeat;
    background-position: 0 -63px;
    height: 10px;
    width: 20px;
}

Sprite圖避免了多次HTTP請求問題,但是難點在於Sprite圖的手動生成是一件極其繁瑣的事情,每次更新圖標都需要重新繪製Sprite圖; 小圖標在Sprite圖中的坐標位置在寫入cssbackground-position屬性中時也要注意。

Sprite手動生成的確繁瑣,但是Sprite圖的自動化生成方面的技術也趨於成熟,典型的有Spriting with Compassglue

如果你的css框架是基於Compass(sass)的話,Sprite圖的合併並不是什麼要耗費經歷的事情;倘若不是,善用glue也會讓你從在折騰圖像處理軟件的非編程工作中解脫出來。

Compass 在使用Sprite圖時直接通過@include icon-sprite('/* 小圖標路徑 */')即可,最後編譯成css文件時也會自動編譯生成對應的Sprite圖,你不必考慮坐標關係;即使要換個圖標,也只是更換圖標後重新編譯即可。

使用glue則更加強大了,不僅可以生成CSS也可以生成SCSS,甚至更底層地你可以生成一系列的hash映射數據自己動手來處理Sprite圖的使用邏輯;Sprite圖中的圖標的坐標位置全部在一個hash表中,完全可以自由定製。

最後,Sprite圖的軿湊還有個比較費神的問題就是:那麼多的小圖標,有些頁面在用而有些頁面不用那怎麼進行軿湊Sprite圖呢?

全部圖標都軿湊成一張大圖片?沒有必要吧,因為有些圖標在這個頁面中沒有使用到憑什麼要拼在一起呢?一般情況下Sprite圖的軿湊邏輯如下:

  • 頁面區分:軿湊的Sprite圖涉及的小圖只在某種類型的頁面(模塊使用)。
  • 類型區分:同種類型的圖標軿湊在一塊組成Sprite圖。

方式三:圖片數字化BASE64

Sprite圖是使用圖標點綴頁面最好的解決方案之一,接近完美,但還是有一個問題需要解決: 對圖標的重複性不友好,即不太兼容background-repeat屬性(通常情況下都設定為no-repeat); 典型的如評分五角星,如果有五顆五角星來表示100%,但要表示80%時,就必須依賴repeatwidth:80%

還有就是電商網站熱衷使用的newhot等促銷提示小圖標。這些圖標是微型的,而且需出現的時機無規律;拼在Sprite圖中總是讓人覺得彆扭

此外,Sprite圖的使用CSS要依賴外部的圖片,要是圖片信息直接在CSS文件中就好了。而BASE64格式的圖片可以以字符串的形式嵌入到CSS文件中。 因此,復用一個CSS文件直接拷貝CSS文件即可,無需再考慮外部依賴的圖標數據。

BASE64的解碼和編碼算法也是很容易的,如 https://docs.python.org/2/library/base64.html 。通過Compass實現BASE編碼直接使用@include inline-image(/* 圖標路徑 */),和前面提到的生成Sprite圖一樣簡單。

總之,前面提到的重複的評分五角星和電商網站熱衷使用的newhot小圖標均可以採用BASE64的格式。可惜的,在低端瀏覽器(IE6)是不支持這種寫法的。

方式四:圖標也是字體webfont

前面提到的圖標都是位圖,在手機屏幕動不動就是1080像素的瀏覽器來說位圖在高分辨率情況下容易出現鋸齒。如果使用svg矢量圖的話,就無法進行Sprite化處理。

webfont就是一種將圖標當作字體來使用(在某種程度上也可以理解成矢量圖標的Sprite化);將一系列的矢量圖標轉換成矢量字體集文件(如woff格式)和正常字體一樣使用。

不過目前讓人頭疼的地方是不是所有瀏覽器都支持webfont,即使支持了還只能使用純色扁平的圖標,而且瀏覽器對字體的過渡優化偶爾也會造成圖標的顯示效果失真。

如果一個網站的設計風格是純色調,扁平化,那麼大氛圍的使用webfont是個很好的選擇。

方式五:css3自己畫圖標

CSS3上有許多讓人欣喜的特性,比如transormtranition這連個變換和過渡的屬性值,在設計頁面元素背景圖時特別有效;再撮合些CSS動畫效果會得到通過圖片無法得到的交互效果。

不過這樣的功能目前也只僅僅侷限與頁面元素的背景圖而已。

另外一種情況是使用border屬性值的處理以很hack的方式繪製一些几何圖形。 如三角形<i class="fa fa-caret-up fa-fw"></i>的繪製,一般情況下兼容性最強大的CSS源碼如下:

.triangle {
    position: absolute;
    top: 11px;
    right: 7px; /* 絕對定位 */
    width: 0;
    height: 0;
    font-size: 0;
    border: 4px dashed transparent;
    border-top: 4px solid #2bb8aa;
    *display: none;
}

當然,總是有人喜歡使用CSS來繪製那些原本使用圖片展示的圖標;個人覺得這是耗費精力沒有必要的工作。為什麼要把那麼簡單的工作複雜化呢?CSS畢竟是用來點綴元素的,而非用來繪圖的。

最後,大部分網站圖標的使用都是上面提到的五種方式相結合進行使用的。

電商網站上面的奇怪三角形

  • 实心三角形<i class="fa fa-star fa-fw"></i>
  • 脱字号[即“^”]

這兩種圖標一般跟導航相關(如頂部導航);用戶點擊後圖標的方向會反轉(會摻雜一些反轉動畫的效果)。

© 著作权归作者所有

掬一捧
粉丝 15
博文 42
码字总数 29899
作品 0
厦门
程序员
私信 提问
加载中

评论(2)

terrancy
terrancy
新技能
c_mobie
c_mobie
繁体看着左
時間軸網站大集合與網頁製作元件

(圖為 Timekiwi 網站的使用者個人頁面,可以將 Facebook、Twitter、Instagram 等服務上的訊息整合在同一個時間軸上) 如果有在使用 facebook 的朋友,最近應該已經漸漸開始有機會使用到新版...

慎道
2012/01/05
0
0
WP7 - Marketplace Test Kit(转载)

這是7.1版本多出來的一個功能,大概是很多開發者上傳APP一直被打槍吧(我最近有個APP也是猛被退阿), 所以把一些比較基礎可以用程式測試的東西做成一個kit, 讓開發者可以先測試一下,或是準備...

junwong
2012/02/24
163
0
jQueryMobile 網頁使用 ASP.NET Web API 服務

微軟的 ASP.NET Web API 框架,能以 RESTful 輕量級的架構風格,建立 HTTP 服務,讓多種不同的用戶端,如: 手機、平板、電腦(PC),透過 HTTP 的 GET、POST、PUT、DELETE 方法來「存取(访问)...

WizardWu 編程網
02/23
0
0
定义 Android 清单

在初見 Intent一章中,我們已嘗試過使用 「startActivity」函式,傳入適當的「Intent」,來呼叫瀏覽器的 Activity。 到目前為止,我們可以由學習 Android 應用程式的經驗中歸納得出:所有 An...

JavaGG
2009/09/14
4.4K
3
加入新 Activity

直觀來看,每個 Activity 通常會負責處理一個螢幕的內容(包含介面、選單、彈出對話框、程式動作等)。當我們需要從一個螢幕畫面切換到另一個螢幕畫面的時候,就涉及到了 Activity 切換的動作。...

JavaGG
2009/09/14
1K
2

没有更多内容

加载失败,请刷新页面

加载更多

Angular 英雄编辑器

应用程序现在有了基本的标题。 接下来你要创建一个新的组件来显示英雄信息并且把这个组件放到应用程序的外壳里去。 创建英雄组件 使用 Angular CLI 创建一个名为 heroes 的新组件。 ng gener...

honeymoose
今天
5
0
Kernel DMA

为什么会有DMA(直接内存访问)?我们知道通常情况下,内存数据跟外设之间的通信是通过cpu来传递的。cpu运行io指令将数据从内存拷贝到外设的io端口,或者从外设的io端口拷贝到内存。由于外设...

yepanl
今天
6
0
hive

一、hive的定义: Hive是一个SQL解析引擎,将SQL语句转译成MR Job,然后再在Hadoop平台上运行,达到快速开发的目的 Hive中的表是纯逻辑表,就只是表的定义,即表的元数据。本质就是Hadoop的目...

霉男纸
今天
5
0
二、Spring Cloud—Eureka(Greenwich.SR1)

注:本系列文章所用工具及版本如下:开发工具(IDEA 2018.3.5),Spring Boot(2.1.3.RELEASE),Spring Cloud(Greenwich.SR1),Maven(3.6.0),JDK(1.8) Eureka: Eureka是Netflix开发...

倪伟伟
昨天
15
0
eclipse常用插件

amaterasUML https://takezoe.github.io/amateras-update-site/ https://github.com/takezoe/amateras-modeler modelGoon https://www.cnblogs.com/aademeng/articles/6890266.html......

大头鬼_yc
昨天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部