你值得收藏的66个实用的css开发技巧之色彩技巧
紧接上篇文章我们说了你值得收藏的 66 个实用的 css 开发技巧之行为技巧篇,接下来我们来看看 Color Skill 色彩技巧知识。
Color Skill:色彩技巧
使用 color 改变边框颜色
要点:border 没有定义 border-color 时,设置 color 后,border-color 会被定义成 color
场景:边框颜色与文字颜色相同
兼容:color
实例代码:
.elem { border: 1px solid; color: #f66; }
效果展示:
使用 filter 开启悼念模式
要点:通过 filter:grayscale()设置灰度模式来悼念某位去世的仁兄或悼念因灾难而去世的人们
场景:网站悼念
兼容:filter
实例代码:
HTML
<div class="bruce flex-ct-x"> <div class="box">iCSS</div> </div>
SCSS
.box { font-weight: bold; font-size: 100px; color: $red; -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */ filter: grayscale(100%); }
效果展示:
使用::selection 改变文本选择颜色
要点:通过::selection 根据主题颜色自定义文本选择颜色
场景:主题化
兼容:::selection
实例代码:
HTML
<div class="bruce flex-ct-x"> <div class="select-color"> <p>全局选择文字颜色</p> <p>全局选择文字颜色</p> <p class="special">局部选择文字颜色</p> </div> </div>
SCSS
::selection { background-color: $purple; color: #fff; } .select-color { line-height: 50px; font-weight: bold; font-size: 30px; color: $red; } .special::selection { background-color: $green; }
效果展示:
使用 linear-gradient 控制背景渐变
要点:通过 linear-gradient 设置背景渐变色并放大背景尺寸,添加背景移动效果
场景:主题化、彩虹背景墙
兼容:gradient、animation
实例代码:
HTML
<div class="bruce"> <div class="gradient-bg">iCSS</div> </div>
SCSS
.gradient-bg { display: flex; justify-content: center; align-items: center; height: 100%; background: linear-gradient(135deg, $red, $orange, $green, $blue, $purple) left center/400% 400%; font-weight: bold; font-size: 100px; color: #fff; animation: move 10s infinite; } @keyframes move { 0%, 100% { background-position-x: left; } 50% { background-position-x: right; } }
效果展示:
使用 linear-gradient 控制文本渐变
要点:通过 linear-gradient 设置背景渐变色,配合 background-clip:text 对背景进行文本裁剪,添加滤镜动画
场景:主题化、特色标题
兼容:gradient、background-clip、filter、animation、text-fill-color
实例代码:
HTML
<div class="bruce flex-ct-x"> <h1 class="gradient-text">Full Stack Developer</h1> </div>
SCSS
.gradient-text { background-image: linear-gradient(90deg, $red, $orange); background-clip: text; line-height: 60px; font-size: 60px; animation: hue 5s linear infinite; -webkit-text-fill-color: transparent; } @keyframes hue { from { filter: hue-rotate(0); } to { filter: hue-rotate(-1turn); } }
效果展示:
使用 caret-color 改变光标颜色
这里推荐大家阅读我之前写过的一篇文章《如何用 CSS 原生属性 caret-color 改变 input 输入框光标颜色》
要点:通过 caret-color 根据主题颜色自定义光标颜色
场景:主题化
兼容:caret-color
实例代码:
HTML
<div class="bruce flex-ct-x"> <form class="form-validation"> <div> <label>简介</label> <textarea required></textarea> </div> </form> </div>
SCSS
.form-validation { width: 500px; div { margin-top: 10px; &:first-child { margin-top: 0; } } label { display: block; padding-bottom: 5px; font-weight: bold; font-size: 16px; } input, textarea { display: block; padding: 0 20px; outline: none; border: 1px solid #ccc; width: 100%; height: 40px; caret-color: $blue; transition: all 300ms; &:valid { border-color: $green; box-shadow: inset 5px 0 0 $green; } &:invalid { border-color: $red; box-shadow: inset 5px 0 0 $red; } } textarea { height: 122px; resize: none; line-height: 30px; font-size: 16px; } }
效果展示:
使用:scrollbar 改变滚动条样式
要点:通过 scrollbar 的 scrollbar-track 和 scrollbar-thumb 等属性来自定义滚动条样式
场景:主题化、页面滚动
兼容::scrollbar
实例代码:
HTML
<div class="bruce flex-ct-x"> <div class="scroll-indicator"> <div class="article"> <article> <h1>码云笔记简介</h1> <p>码云笔记 mybj123.com,一个专注 Web 前端开发技术的博客,主要记录和总结博主在前端开发工作中常用的实战技能及前端资源分享,分享各种科普知识和实用优秀的代码,以及分享些热门的互联网资讯和福利!码云笔记有你更精彩!</p> </article> </div> </div> </div>
SCSS
.scroll-indicator { position: relative; overflow: hidden; border: 1px solid $purple; width: 500px; height: 100px; &::after { position: absolute; left: 0; right: 5px; top: 2px; bottom: 0; background-color: #fff; content: ""; } } .article { overflow: auto; height: 100%; &::-webkit-scrollbar { width: 5px; } &::-webkit-scrollbar-track { background-color: #f0f0f0; } &::-webkit-scrollbar-thumb { border-radius: 2px; background-color: $purple; } article { padding: 0 20px; background: linear-gradient(to right top, $red 50%, #f0f0f0 50%) no-repeat; background-size: 100% calc(100% - 298px + 5px); > * { position: relative; z-index: 9; } } h1 { line-height: 40px; text-align: center; font-weight: bold; font-size: 20px; } p { margin-top: 20px; line-height: 20px; text-indent: 2em; } }
效果展示:
使用 filter 模拟 Instagram 滤镜
要点:通过 filter 的滤镜组合起来模拟 Instagram 滤镜
场景:图片滤镜
兼容:filter
实例代码:点击查看
以上就是你值得收藏的 66 个实用的 css 开发技巧之色彩技巧的相关知识总结,接下来我们还会为大家带来css 开发技巧之图形技巧,敬请期待。
码云笔记 » 你值得收藏的66个实用的css开发技巧之色彩技巧