顯示具有 CSS 標籤的文章。 顯示所有文章
顯示具有 CSS 標籤的文章。 顯示所有文章

2013/07/25

mfglabs iconset - 另一個 open source 的 iconset


mfglabs iconset demo 圖 (版權屬於mfglabs)

小引言

靈感源自於 fontawesome 以及 github 的 Octicons,不過他們包含的 CSS class 更加多元、更加有趣。

Points

  1. Retina ready
  2. Unicode 編碼
  3. 經常更新

Features

Usage

下載後,在 header 中引入 css 檔

接著在需要的 tag 指定 class 就可以了:


Resize

另外,可以自己在css中加入"icon2x"來幫icon放大與縮小:


作法就是透過指定 font-size:


Styling

接下來官方的檔案中,可以直接加上漸層、hover,讓 icon 更有趣


Conclusion

Webfont 的出現讓網頁的呈現越來越有趣,在加上 icon-font 的出現,讓原本就喜歡用這些 icon-font 在一些平面上的我更加有興趣。而這個字體的出現,讓icon-font不僅僅於現在流行的 fontawesome ,更加有變化啦~!(話說這套還滿讓我喜歡的 :D )


Reference

  1. mfglabs iconset: http://mfglabs.github.io/mfglabs-iconset/
  2. fontawesome: http://fontawesome.io/
  3. Octicon (Github): https://github.com/blog/1135-the-making-of-octicons

2013/07/11

Change selection by css - 改變反白顏色

Codes

Add codes below into your css/less would be done!!
將以下css (or less) 加入想要改變的區塊就可以囉!!

@carrot is from Flat UI Colors. :)



效果

Chang selection color by css

第一行反白,第二行是正常狀態



Reference
  1. CSS-TRICKS: http://css-tricks.com/overriding-the-default-text-selection-color-with-css/
  2. Flat UI Colors: http://flatuicolors.com/