美文网首页
css-进阶-css开发技巧-ColorSkill:色彩技巧

css-进阶-css开发技巧-ColorSkill:色彩技巧

作者: 逸笛 | 来源:发表于2021-03-25 14:15 被阅读0次

使用color改变边框颜色

  • 要点:border没有定义border-color时,设置color后,border-color会被定义成color
  • 场景:边框颜色与文字颜色相同
  • 兼容:color
.elem {
    border: 1px solid;
    color: #f66;
}

使用filter开启悼念模式

  • 要点:通过filter:grayscale()设置灰度模式来悼念某位去世的仁兄或悼念因灾难而去世的人们
  • 场景:网站悼念
  • 兼容:filter
    关键:
.mourning-mode {
    width: 400px;
    filter: grayscale(100%);
}

eg:

<div class="bruce flex-ct-x" data-title="使用filter开启悼念模式">
    <img class="mourning-mode" src="https://static.yangzw.vip/codepen/car.jpg">
</div>

.mourning-mode {
    width: 400px;
    filter: grayscale(100%);
}
使用::selection改变文本选择颜色
  • 要点:通过::selection根据主题颜色自定义文本选择颜色
  • 场景:主题化
  • 兼容:::selection
图片.png
<div class="bruce flex-ct-x" data-title="使用::selection改变选中颜色">
    <div class="select-color">
        <p>全局选择文字颜色</p>
        <p>全局选择文字颜色</p>
        <p class="special">局部选择文字颜色</p>
    </div>
</div>


::selection {
    background-color: #66f;
    color: #fff;
}
.select-color {
    line-height: 50px;
    font-weight: bold;
    font-size: 30px;
    color: #f66;
    p.special::selection {
        background-color: #3c9;
    }
}

使用linear-gradient控制背景渐变

  • 要点:通过linear-gradient设置背景渐变色并放大背景尺寸,添加背景移动效果
  • 场景:主题化彩虹背景墙
  • 兼容:gradientanimation
图片.png
<div class="bruce" data-title="使用linear-gradient控制渐变背景">
    <div class="gradient-bg">iCSS</div>
</div>

.gradient-bg {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background: linear-gradient(135deg, #f66, #f90, #3c9, #09f, #66f) 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控制文本渐变

图片.png
<div class="bruce flex-ct-x" data-title="使用linear-gradient控制渐变文本">
    <h1 class="gradient-text">Full Stack Developer</h1>
</div>

.gradient-text {
    background-image: linear-gradient(90deg, #f66, #f90);
    background-clip: text;
    line-height: 60px;
    font-size: 60px;
    color: transparent;
    animation: hue 5s linear infinite;
}
@keyframes hue {
    from {
        filter: hue-rotate(0);
    }
    to {
        filter: hue-rotate(-1turn);
    }
}

使用::scrollbar改变滚动条样式

  • 要点:通过scrollbarscrollbar-trackscrollbar-thumb等属性来自定义滚动条样式
  • 场景:主题化页面滚动
  • 兼容:::scrollbar
图片.png
<div class="bruce flex-ct-x" data-title="滚动指示器">
    <div class="scroll-indicator">
        <div>
            <article>
文章内容
            </article>
        </div>
    </div>
</div>

样式:

.scroll-indicator {
    overflow: hidden;
    position: relative;
    border: 1px solid #66f;
    width: 500px;
    height: 300px;
    &::after {
        position: absolute;
        left: 0;
        right: 5px;
        top: 2px;
        bottom: 0;
        background-color: #fff;
        content: "";
    }
    div {
        overflow: auto;
        height: 100%;
        &::-webkit-scrollbar {
            width: 5px;
        }
        &::-webkit-scrollbar-track {
            background-color: #f0f0f0;
        }
        &::-webkit-scrollbar-thumb {
            border-radius: 2px;
            background-color: #66f;
        }
    }
    article {
        padding: 0 20px;
        background: linear-gradient(to right top, #f66 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-size: 20px;
    }
    p {
        margin-top: 20px;
        line-height: 20px;
        text-indent: 2em;
    }
}

使用filter模拟Instagram滤镜

  • 要点:通过filter的滤镜组合起来模拟Instagram滤镜
  • 场景:图片滤镜
  • 兼容:filter
    图片.png
<div class="bruce flex-ct-x" data-title="使用filter模拟Instagram滤镜">
        <ul class="instagram-filter">
            <li>
                <img src="https://static.yangzw.vip/codepen/gz.jpg">
                <p>Default</p>
            </li>
            <li class="_1977">
                <img src="https://static.yangzw.vip/codepen/gz.jpg">
                <p>1977</p>
            </li>
            <li class="aden">
                <img src="https://static.yangzw.vip/codepen/gz.jpg">
                <p>Aden</p>
            </li>
            <li class="brannan">
                <img src="https://static.yangzw.vip/codepen/gz.jpg">
                <p>Brannan</p>
            </li>
            <li class="brooklyn">
                <img src="https://static.yangzw.vip/codepen/gz.jpg">
                <p>Brooklyn</p>
            </li>
            <li class="clarendon">
                <img src="https://static.yangzw.vip/codepen/gz.jpg">
                <p>Clarendon</p>
            </li>
            <li class="earlybird">
                <img src="https://static.yangzw.vip/codepen/gz.jpg">
                <p>Earlybird</p>
            </li>
            <li class="gingham">
                <img src="https://static.yangzw.vip/codepen/gz.jpg">
                <p>Gingham</p>
            </li>
            <li class="hudson">
                <img src="https://static.yangzw.vip/codepen/gz.jpg">
                <p>Hudson</p>
            </li>
            <li class="inkwell">
                <img src="https://static.yangzw.vip/codepen/gz.jpg">
                <p>Inkwell</p>
            </li>
            <li class="kelvin">
                <img src="https://static.yangzw.vip/codepen/gz.jpg">
                <p>Kelvin</p>
            </li>
            <li class="lark">
                <img src="https://static.yangzw.vip/codepen/gz.jpg">
                <p>Lark</p>
            </li>
            <li class="lofi">
                <img src="https://static.yangzw.vip/codepen/gz.jpg">
                <p>LoFi</p>
            </li>
            <li class="maven">
                <img src="https://static.yangzw.vip/codepen/gz.jpg">
                <p>Maven</p>
            </li>
            <li class="mayfair">
                <img src="https://static.yangzw.vip/codepen/gz.jpg">
                <p>Mayfair</p>
            </li>
            <li class="moon">
                <img src="https://static.yangzw.vip/codepen/gz.jpg">
                <p>Moon</p>
            </li>
            <li class="nashville">
                <img src="https://static.yangzw.vip/codepen/gz.jpg">
                <p>Nashville</p>
            </li>
            <li class="perpetua">
                <img src="https://static.yangzw.vip/codepen/gz.jpg">
                <p>Perpetua</p>
            </li>
            <li class="reyes">
                <img src="https://static.yangzw.vip/codepen/gz.jpg">
                <p>Reyes</p>
            </li>
            <li class="rise">
                <img src="https://static.yangzw.vip/codepen/gz.jpg">
                <p>Rise</p>
            </li>
            <li class="slumber">
                <img src="https://static.yangzw.vip/codepen/gz.jpg">
                <p>Slumber</p>
            </li>
            <li class="stinson">
                <img src="https://static.yangzw.vip/codepen/gz.jpg">
                <p>Stinson</p>
            </li>
            <li class="toaster">
                <img src="https://static.yangzw.vip/codepen/gz.jpg">
                <p>Toaster</p>
            </li>
            <li class="valencia">
                <img src="https://static.yangzw.vip/codepen/gz.jpg">
                <p>Valencia</p>
            </li>
            <li class="walden">
                <img src="https://static.yangzw.vip/codepen/gz.jpg">
                <p>Walden</p>
            </li>
            <li class="willow">
                <img src="https://static.yangzw.vip/codepen/gz.jpg">
                <p>Willow</p>
            </li>
            <li class="xpro2">
                <img src="https://static.yangzw.vip/codepen/gz.jpg">
                <p>X-pro II</p>
            </li>
            <li class="obscure">
                <img src="https://static.yangzw.vip/codepen/gz.jpg">
                <p>自定义:Obscure</p>
            </li>
        </ul>
    </div>
.instagram-filter {
    display: flex;
    overflow: auto;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: space-between;
    width: 1635px;
    max-width: 100%;
    min-height: 630px;
    li {
        overflow: hidden;
        position: relative;
        width: 225px;
        height: 150px;
        &.obscure {
            filter: brightness(80%) grayscale(20%) contrast(1.2) opacity(.6);
        }
    }
    img {
        width: 100%;
        height: 100%;
    }
    p {
        position: absolute;
        right: 0;
        bottom: 0;
        padding: 0 10px;
        width: fit-content;
        height: 30px;
        background-color: #000;
        filter: none;
        line-height: 30px;
        color: #fff;
    }
}

使用mask雕刻镂空背景

图片.png
<div class="bruce" data-title="使用mask雕刻镂空背景">
    <div class="mask-bg">
        <div></div>
    </div>
</div>


$mask-bg: "https://static.yangzw.vip/codepen/mountain.jpg";
$mask-text: "https://static.yangzw.vip/codepen/snow.jpg";
$logo: "https://static.yangzw.vip/codepen/logo.png";
.mask-bg {
    display: flex;
    overflow: hidden;
    justify-content: center;
    align-items: center;
    position: relative;
    height: 100%;
    &::after {
        position: absolute;
        left: -20px;
        right: -20px;
        top: -20px;
        bottom: -20px;
        background: url($mask-bg) no-repeat center/cover;
        filter: blur(10px);
        content: "";
    }
    div {
        position: relative;
        z-index: 9;
        width: 600px;
        height: 300px;
        background: url($mask-text) left center/150% auto;
        mask: url($logo) center/cover;
        animation: move 10s infinite;
    }
}
@keyframes move {
    0% {
        background-position-x: 0;
    }
    50% {
        background-position-x: 100%;
    }
}

相关文章

  • css-进阶-css开发技巧-ColorSkill:色彩技巧

    使用color改变边框颜色 要点:border没有定义border-color时,设置color后,border-...

  • css-进阶-css开发技巧-Layout Skill:布局技巧

    Layout Skill 使用vw定制rem自适应布局 要点:移动端使用rem布局需要通过JS设置不同屏幕宽高比的...

  • css-进阶-css开发技巧-Component Skill:组

    下划线跟随导航栏 要点:下划线跟随鼠标移动的导航栏 场景:动态导航栏 兼容:+[https://caniuse.c...

  • css 垂直居中的方法

    标签:css-常用技巧 table-cell 式将 center 元素的父容器设置为 display:table,...

  • CSS-高级技巧

    1. 元素的显示与隐藏 ① display 显示 display 设置元素是否及如何显示。 特点:隐藏之后,不再保...

  • 实现 stick footer 布局的几种方式

    标签:css-常用技巧 下面的 css 和 js 是本文章案例中的公共代码段,默认下面每个小dom都引用了这两段代...

  • CSS教程汇总

    CSS揭秘实用技巧总结 不止于 CSS 灵活运用CSS开发技巧 前端基础篇之CSS世界 你未必知道的49个CSS知...

  • 课件美化进阶课3

    今天学习了课件美化进阶课程(上),主要内容是大段文字的处理技巧、惊爆眼球的图片玩法、色彩的搭配技巧、字体的气质。 ...

  • 实用技巧

    实用技巧 开发技巧之快捷键使用进阶 ** cmd + shift + j **切换到光标显示文件位置(不管内部文件...

  • CSS开发技巧

    让图片自适应容器(div)大小 img {width: 100%;height: 100%;max-width: ...

网友评论

      本文标题:css-进阶-css开发技巧-ColorSkill:色彩技巧

      本文链接:https://www.haomeiwen.com/subject/nqrfhltx.html