DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> 使用clrs.cc來進行炫酷的CSS調色
使用clrs.cc來進行炫酷的CSS調色
編輯:CSS詳解     
這篇文章主要介紹了使用clrs.cc來進行炫酷的CSS調色,同時也介紹了使用gulp來配合CSS框架的方法,需要的朋友可以參考下

clrs.cc是最近在GitHub上發現的一個有趣的項目。它是一套精心設計的web配色方案。
2015721165504398.jpg (225×169)

web的默認的顏色看起來……比較……呃……怎麼說呢……經典……

Navy #000080

Blue #0000ff

Aqua #00ffff

Teal #008080

Olive #008000

Green #008000

Lime #00ff00

Yellow #ffff00

Orange #ffa500

Red #ff0000

Maroon #800000

Fuchsia #ff00ff

Purple #800080

Silver #c0c0c0

Gray #808080

Black #000000

所以clrs.cc重搞了一套。

CSS Code復制內容到剪貼板
  1. colors = {
  2. # Cool Colors
  3. aqua: "#7FDBFF",
  4. blue: "#0074D9",
  5. lime: "#01FF70",
  6. navy: "#001F3F",
  7. teal: "#39CCCC",
  8. olive: "#3D9970",
  9. green: "#2ECC40",
  10. # Warm Colors
  11. red: "#FF4136",
  12. maroon: "#85144B",
  13. orange: "#FF851B",
  14. purple: "#B10DC9",
  15. yellow: "#FFDC00",
  16. fuchsia: "#F012BE",
  17. # Gray Scale Colors
  18. gray: "#aaa",
  19. white: "#fff",
  20. black: "#111",
  21. silver: "#ddd"
  22. };

提供了CSS文件,可以通過github獲取:


復制代碼代碼如下: git clone git@github.com:mrmrs/colors.git

例如,CSS這樣使用:

CSS Code復制內容到剪貼板
  1. <link rel="stylesheet" href="css/colors.CSS">

如果希望使用壓縮過的版本,則使用min版:

CSS Code復制內容到剪貼板
  1. <link rel="stylesheet" href="css/colors.min.CSS">

如果你希望調整顏色,可以直接修改CSS文件。如果需要壓縮,有gulp任務提供:


復制代碼代碼如下: gulp minfy

你可能慣用sass、stylus、myth,那可以直接修改git repo中的相應文件,然後用gulp生成CSS:


復制代碼代碼如下: glup sass


復制代碼代碼如下: glup stylus


復制代碼代碼如下: gulp myth

項目主頁

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved