標籤: css

將圖片轉換成 CSS 的線上服務

這個服務做的很有趣，拖拉任何圖片上去，都可以幫你轉換成 CSS Code，然後直接將此圖片畫在頁面上。

  • 詳見：img2css - This is a tool that can convert any image into a pure css image

註：測試建議丟小張點的圖片，此服務看來是依照每個 px 的色碼分析後，全部照著寫出來，圖片太大張的話，產生出來的文字會很驚人。

對 Mac OSX 使用 smoothing grayscale CSS 設定

看到網頁的字型特別細緻，就很想看看是什麼字型預設可以做成這樣子。

查到的只是個 -moz-osx-font-smoothing: grayscale; 的設定，看起來還沒列入標準，而且似乎只有 MacOSX 可以看到。

閱讀全文〈對 Mac OSX 使用 smoothing grayscale CSS 設定〉

CSS 如何讓 整個頁面秀出的高度:100%

網頁內容假設只有一行(或不定行數，達不到頁面高度)，但是想要設定整頁的背景顏色，就會需要設定高度(height:800px 之類的)，要如何設定才能整個可視範圍都不會有問題呢？

閱讀全文〈CSS 如何讓 整個頁面秀出的高度:100%〉

好站 - Ajax Loading SVG、CSS 和 Gif 圖示(Icon)產生器

Ajax 常用的 Loading 圖示，此網頁工具可以產生 SVG、CSS 和 Gif 檔。

注意：此工具若要支援 IE 10 以下，請使用 Gif 檔。

此網站工具支援的瀏覽器版本：

  • Google Chrome 34.0
  • Firefox 28.0
  • Safari 7.03
  • Opera 18.0
  • Internet Explorer 11.0

對於中文字於網頁使用 CSS 排版建議參數

中文字在網頁排版跟英文不一樣, 看起來的感覺也不一樣~ 之前也蠻多人有做這種研究, 不過此篇設定簡單, 但是在我的 Blog 看起來又蠻舒適的, 所以就套用上去了~

閱讀全文〈對於中文字於網頁使用 CSS 排版建議參數〉

好文 - CSS 疑難除錯 - 2013

CSS 常見的問題, ex:

  • 搞不清楚 float / position / inline / block / inline-block... 等等的問題?
  • z-index 設定都無法作用? box model 設完後都跑出去?
  • 跟設計師溝通不良?

建議可以看看 Lucien Lee 的此篇 Slide: CSS 疑難除錯

註: 按 "鍵盤右鍵" 移到下個主題, 按 "下" 顯示此主題的內容.