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

使用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设置背景渐变色并放大背景尺寸，添加背景移动效果
• 场景：主题化、彩虹背景墙
• 兼容：gradient、animation

图片.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控制文本渐变

• 要点：通过linear-gradient设置背景渐变色，配合background-clip:text对背景进行文本裁剪，添加滤镜动画
• 场景：主题化、特色标题
• 兼容：gradient、background-clip、filter、animation、text-fill-color

图片.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改变滚动条样式

• 要点：通过scrollbar的scrollbar-track和scrollbar-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雕刻镂空背景

• 要点：通过mask为图像背景生成蒙层提供遮罩效果
• 场景：高斯模糊蒙层、票劵(电影票、购物卡)、遮罩动画
• 兼容：mask、perspective、transform-style、animation

图片.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%;
    }
}