• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >CSS > 使用clrs.cc来进行炫酷的CSS调色

使用clrs.cc来进行炫酷的CSS调色

作者:weakish 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含CSS,调色等相关知识,weakish 希望在学习及工作中可以帮助到您

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重搞了一套。

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

提供了css文件,可以通过github获取:


例如,css这样使用:

  1. <link rel="stylesheet" href="css/colors.css">  

如果希望使用压缩过的版本,则使用min版:

  1. <link rel="stylesheet" href="css/colors.min.css">  

如果你希望调整颜色,可以直接修改css文件。如果需要压缩,有gulp任务提供:


你可能惯用sass、stylus、myth,那可以直接修改git repo中的相应文件,然后用gulp生成css:




项目主页

您可能想查找下面的文章:

  • css小技巧
  • 各大网站CSS初始化代码
  • css权重问题
  • CSS实现鼠标上移图标旋转效果
  • 使用CSS3制作一个简单的进度条(demo)
  • 用纯CSS实现饼状Loading等待图效果
  • 利用CSS3伪元素实现逐渐发光的方格边框
  • CSS3实现内凹圆角的实例代码
  • 利用HTML5+CSS3实现3D转换效果实例详解
  • css3+伪元素实现鼠标移入时下划线向两边展开的效果

相关文章

  • 2017-08-06CSS Sprite的一些最佳实践方法
  • 2017-08-06CSS less优化
  • 2017-08-06css3实现图片遮罩效果鼠标hover以后出现文字
  • 2017-08-06利用css绘制三角形的方法及拓展
  • 2017-08-06纯css3实现效果超级炫的checkbox复选框和radio单选框
  • 2017-08-06用CSS3将你的设计带入下个高度
  • 2017-08-06详解CSS3中使用gradient实现渐变效果的方法
  • 2017-08-06CSS凹型导航按钮效果的实现代码
  • 2017-08-06一行文字超过div宽度的时如何让它不换行
  • 2017-08-06记住CSS中的10个“不要”

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • div实现阴影边框效果(适应各主流浏览器)
    • CSS 之margin知识点(必看)
    • CSS中display:block的作用介绍
    • div footer标签css实现位于页面底部固定
    • CSS vs. JS Animation: 哪个更快
    • 纯CSS仿迅雷看看蓝色导航
    • 分享几个CSS小众但炫酷的技巧
    • div中英文无法自动换行的解决办法
    • CSS让高度不确定图片垂直居中的几种技巧
    • CSS学习中的瓶颈期深入分析

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有