zoukankan      html  css  js  c++  java
  • 《css揭秘》读书笔记

    第一章 引言

    css编码技巧

    在引言中,作者提到使用em与inherit来实现css代码的简洁与可维护性。但是根据本司机两年的开发经验来看,在实际开发中很少来使用em这个单位。如何用以及何时去使用,还是要根据实际开发需求来定吧,毕竟这两个属性都有一定的局限性。

    第二章 背景与边框

    半透明边框

    border: 10px solid hsla(0, 0%, 100%, .5);
    background: white;
    background-clip: padding-box;

    background-clip用来指定背景渲染区域

    多重边框

    clipboard.png

    box-shadow方案

    background: yellowgreen;
    box-shadow: 0 0 0 10px #655,
                0 0 0 15px deeppink,
                0 2px 5px 15px rgba(0, 0, 0, .6);

    box-shadow方案有一个缺点就是,shadow不占实际位置,如果有悬浮之类的效果,需要设置相应的内边距来解决这个问题。

    outline方案

    border: 10px solid #655;
    outline: 5px solid deeppink;
    outline-offset: 5px;

    outline-offset控制偏移

    背景定位

    background-position扩展语法方案

    background: url(example.png) no-repeat bottom right #58a;
    background-position: right 20px bottom 10px;

    在background属性里面设置背景位置做回退方案

    background-origin方案

    background-origin用来设定bgposition的基准,默认以padding-box为准,可以将它设置为content-box、border-box来改变这一行为。

    calc方案

    background-position: calc(100% - 20px) calc(100% - 10px);

    条纹背景

    水平条纹&垂直条纹&斜条纹

    clipboard.png

    // 水平条纹
    background: linear-gradient(#fb3 30%, #58a 0);
    background-size: 100% 30px;
    
    // 垂直条纹
    background: linear-gradient(90deg, #fb3 50%, #58a 0);
    background-size: 30px 100%;
    
    // 斜条纹
    background: repeating-linear-gradient(60deg, #fb3, #fb3 15px, #58a 0, #58a 30px);
    
    // 同色系条纹
    background: #58a
                    repeating-linear-gradient(30deg,
                        hsla(0, 0%, 100%, .1),
                        hsla(0, 0%, 100%, .1) 15px,
                        transparent 0,
                        transparent 30px
                        );

    这里面涉及一些知识点:

    1. 如果多个色标具有相同的位置,他们会产生一个无限小的过渡区域,颜色会突变
    2. 如果某个色标的位置值比整个列表中在它之前的色标位置都要小,则色标的位置会被设置为前面所有位置值的最大值,所以这里设置0会取前面的最大值。这么写的目的是减小魔法字符串的影响。
    3. linear-gradient是css生成的图形,作用于background-image属性,可以通过background-size来控制位置及大小。
    4. linear-gradient有一个循环版:repeating-linear-gradient。

    复杂的背景图

    网格&波点&棋盘&伪随机背景

    clipboard.png

                // 网格
                 400px;
                height: 300px;
                margin-top: 20px;
                background: #58a;
                background-image:
                    linear-gradient(#fff 2px, transparent 0),
                    linear-gradient(90deg, #fff 2px, transparent 0),
                    linear-gradient(hsla(0, 0%, 100%, .3) 1px, transparent 0),
                    linear-gradient(90deg, hsla(0, 0%, 100%, .3) 1px, transparent 0);
                background-size: 75px 75px, 75px 75px, 15px 15px, 15px 15px;
    
                // 波点
                 200px;
                height: 150px;
                margin-top: 20px;
                background: #655;
                background-image: 
                    radial-gradient(tan 30%, transparent 0),
                    radial-gradient(tan 30%, transparent 0);
                background-size: 30px 30px;
                background-position: 0 0, 15px 15px;
    
                // 棋盘svg方案更优
                 200px;
                height: 150px;
                margin-top: 20px;
                background: #eee;
                background-image: url('data:image/svg+xml,
                    <svg xmlns="http://www.w3.org/2000/svg" 
                    width="100" height="100" 
                    fill-opacity=".25">
                    <rect x="50" width="50" height="50" /> 
                    <rect y="50" width="50" height="50" /> 
                    </svg>');
                background-size: 30px 30px;
                
                // 伪随机背景,使用质数增加伪随机的真实性
                 200px;
                height: 150px;
                margin-top: 20px;
                background: hsl(20, 40%, 90%);
                background-image: 
                    linear-gradient(90deg, #fb3 11px, transparent 0),
                    linear-gradient(90deg, #ab4 23px, transparent 0),
                    linear-gradient(90deg, #655 41px, transparent 0);
                background-size: 41px 100%, 61px 100%, 83px 100%;

    连续的图像边框

    clipboard.png

                border: 1em solid transparent;
                background: linear-gradient(white, white) padding-box,
                            url(example.jpg) border-box  0 / cover;
                
                /* Styling & enable resize */
                 21em;
                height: 6em;
                padding: 1em;

    运用background-clips和background-origin属性

    虚线框&动态虚线框

    clipboard.png

    .marching {
                 21em;
                height: 6em;
                margin: 2em auto;
                padding: 1em;
                border: 1px solid transparent;
                background:
                    linear-gradient(#fff, #fff) padding-box,
                    repeating-linear-gradient(-45deg, black 0, black 25%, white 0, white 50%) 0 / .6em .6em;
                    animation: ants 12s linear infinite;
            }
    
            @keyframes ants { to {background-position: 100%} }

    边框裁剪效果

    clipboard.png

    .footnote {
        margin: 2em auto;
        border-top: .2em  solid transparent;
        border-image: 100% 0 0 linear-gradient(90deg, currentColor 4em, transparent 0);
    }

    第三章 形状

    椭圆

    clipboard.png

     20em;
    height: 15em;
    background: #f50;
    border: 1px solid #ddd;
    border-radius: 50% / 100% 100% 0 0;

    border-radius可以同时指定水平半径和垂直半径,两组值使用/隔开

    平行四边形

    clipboard.png

    .skew {
        position: relative;
        text-align: center;
         5em;
        height: 1.6em;
    }
    
    .skew::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: -1;
        background: #58a;
        transform: skew(45deg);
    }

    菱形图片

    辅助元素实现

    .picture {
         400px;
        transform: rotate(45deg);
        overflow: hidden;
    }
    
    .picture > img {
        max- 100%;
        transform: rotate(-45deg scale(1.42));
    }

    图片本身放大,在不支持的浏览器里面可以做到版本回退

    clip-path版本兼容性不好

    .polygon {
        clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
        transition: 1s clip-path;
    }
    
    .polygon:hover {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }

    切角效果

    clipboard.png

     20em;
    height: 15em;
    margin: 2em auto;
    background: #58a;
    background:
        linear-gradient(-45deg, transparent 15px, #58a 0) right, 
        linear-gradient(45deg, transparent 15px, #58a 0) left;
    background-size: 50% 100%;
    background-repeat: no-repeat;

    弧形切角

    clipboard.png

     20em;
    height: 15em;
    margin: 2em auto;
    background: #58a;
    background: radial-gradient(circle at top left, transparent 15px, #58a 0) top left;
    background-size: 50% 50%;
    background-repeat: no-repeat;
    

    读后感

    这本书介绍了大量的css实现技巧,并且以css3偏多,对于兼容性无要求开发来说,有很大的借鉴价值,比如下图这些梯形框,菱形框,就可以使用css3来实现,减少图片引用成本,并可以增加按钮的灵活性,比如我想加一个点击效果,就只需要动几行css,而无需再加图片(体积)。由于基本都是一些实用性的技巧,我就不一一列举了,建议自读。很好很实用的一本书。

    图片来源:斗鱼客户端英雄联盟官方赛事直播间挂件

    (图片来源:斗鱼客户端英雄联盟官方赛事直播间挂件

    这本书对于本小开发来说,更多像一本工具类书籍,可以经常翻阅查询,温故知新。举一反三?举一反三是不可能举一反三的,这辈子都不可能举一反三!
  • 相关阅读:
    Docker用途 & 和tomcat的区别
    Ubuntu安装Redis
    Ubuntu查看和设置Root账户
    Oracle常用语句
    Redis知识总结
    Blazor学习笔记01: 使用BootstrapBlazor组件 创建一个具有单表维护功能的表格页面
    NET Core之积沙成塔01: 解决Visual Studio 2019 代码提示为英文
    MySQL系统自带的数据库information schema
    Windows安装mysql方法
    数据库之概念
  • 原文地址:https://www.cnblogs.com/10manongit/p/13024653.html
Copyright © 2011-2022 走看看