资讯专栏INFORMATION COLUMN

《css揭秘》读书笔记

xiguadada / 1618人阅读

摘要:但是根据本司机两年的开发经验来看,在实际开发中很少来使用这个单位。由于基本都是一些实用性的技巧,我就不一一列举了,建议自读。很好很实用的一本书。

第一章 引言 css编码技巧

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

第二章 背景与边框 半透明边框
border: 10px solid hsla(0, 0%, 100%, .5);
background: white;
background-clip: padding-box;

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

多重边框

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);
条纹背景 水平条纹&垂直条纹&斜条纹

// 水平条纹
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
                    );

这里面涉及一些知识点:

如果多个色标具有相同的位置,他们会产生一个无限小的过渡区域,颜色会突变

如果某个色标的位置值比整个列表中在它之前的色标位置都要小,则色标的位置会被设置为前面所有位置值的最大值,所以这里设置0会取前面的最大值。这么写的目的是减小魔法字符串的影响。

linear-gradient是css生成的图形,作用于background-image属性,可以通过background-size来控制位置及大小。

linear-gradient有一个循环版:repeating-linear-gradient。

复杂的背景图 网格&波点&棋盘&伪随机背景

            // 网格
            width: 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;

            // 波点
            width: 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方案更优
            width: 200px;
            height: 150px;
            margin-top: 20px;
            background: #eee;
            background-image: url("data:image/svg+xml,
                
                 
                 
                ");
            background-size: 30px 30px;
            
            // 伪随机背景,使用质数增加伪随机的真实性
            width: 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%;
连续的图像边框

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

运用background-clips和background-origin属性

虚线框&动态虚线框

.marching {
            width: 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%} }
边框裁剪效果

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

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

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

平行四边形

.skew {
    position: relative;
    text-align: center;
    width: 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 {
    width: 400px;
    transform: rotate(45deg);
    overflow: hidden;
}

.picture > img {
    max-width: 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%);
}
切角效果

width: 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;
弧形切角

width: 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,而无需再加图片(体积)。由于基本都是一些实用性的技巧,我就不一一列举了,建议自读。很好很实用的一本书。

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

这本书对于本小开发来说,更多像一本工具类书籍,可以经常翻阅查询,温故知新。举一反三?举一反三是不可能举一反三的,这辈子都不可能举一反三!

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/113763.html

相关文章

  • css 揭秘读书笔记

    摘要:因为鲜为人知的第四个长度参数双层投影毛玻璃效果见毛玻璃自定义复选框不多介绍,也有相关案例复选框滚动提示现在越来越多的移动端都是这样处理,滚动提示其他揭秘对应的地址图灵图书在封底都提供优惠码低价购买电子书她 目标 如何用 css 解决难题 收获 尽量减少代码重复 1 用相对值 font-size: 20px; line-height: 30px; // 应该改成 font-size:...

    OnlyMyRailgun 评论0 收藏0
  • css编码技巧【css揭秘读书笔记

    摘要:最近在看揭秘,于是写了文章来作笔记,除此以外还会补充一些自己遇到的笔试题。举例说明以上的代码有什么问题呢如果需要改变字号,那么同时需要调整行高。那么经过修改后的代码如下关于使用还是还是百分比,需要根据具体情况来决定。 最近在看《css揭秘》,于是写了文章来作笔记,除此以外还会补充一些自己遇到的笔试题。希望大家都有所收获。 css编码技巧 尽量减少代码重复 在实践中,代码可维护性的最大要...

    Miyang 评论0 收藏0
  • CSS技巧

    摘要:技巧使你的更加专业这是上关于技巧的一篇译文,另外你也可以在本项目看到原文。列举了一些很实用的技巧,比如给空内容的标签添加内容,逗号分隔列表等等。排序算法看源码,把它背下来吧排序算法的封装。主要帮助初学者更好的掌握排序算法的实现。 成为专业程序员路上用到的各种优秀资料、神器及框架 成为一名专业程序员的道路上,需要坚持练习、学习与积累,技术方面既要有一定的广度,更要有自己的深度。 Java...

    DangoSky 评论0 收藏0
  • CSS技巧

    摘要:技巧使你的更加专业这是上关于技巧的一篇译文,另外你也可以在本项目看到原文。列举了一些很实用的技巧,比如给空内容的标签添加内容,逗号分隔列表等等。排序算法看源码,把它背下来吧排序算法的封装。主要帮助初学者更好的掌握排序算法的实现。 成为专业程序员路上用到的各种优秀资料、神器及框架 成为一名专业程序员的道路上,需要坚持练习、学习与积累,技术方面既要有一定的广度,更要有自己的深度。 Java...

    zgbgx 评论0 收藏0
  • CSS技巧 - 收藏集 - 掘金

    摘要:笔者作为一位,将工作以来用到的各种优秀资料神器及框架整理在此,毕竟好记性不如烂键盘,此前端知识点大百科全书前端掘金,,不定期更新技巧前端掘金技巧,偶尔更新。计算数组的极值技巧使你的更加专业前端掘金一个帮你提升技巧的收藏集。 CSS 样式画各种图形 - 前端 - 掘金下面是一些我在 CSS 中经常用到的图案,还有一些是在css-tricks看到的。记录一下,以后会用到。会持续更新… 一、...

    Jonathan Shieber 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<