【书】CSS揭秘

微信扫一扫,分享到朋友圈

【书】CSS揭秘

这本介绍的方法主要是运用了CSS3的知识,居然的兼容写法,自行查阅

查询属性的支持程度入口

浏览器前缀处理工具Autoprefixer

CSS编码技巧

1、减少代码重复

  • 当某些值相互依赖时,应该把它们的相互关系用代码表达出来
  • 代码易维护 vs 代码量少
  • currentColor
  • 继承inherit

2、了解视觉差异

3、响应式页面设计

  • 媒体查询的断点不应该由具体的设备来决定,而应该根据设计自身来决定
  • 实现弹性可伸缩的布局,并在媒体查询的各个断点区间内指定相应的尺寸

4、合理使用简写

  • 合理使用简写是一种良好的防卫性编码方式,可以抵御未来的风险

5、合理使用预处理器

背景和边框

1、半透明边框

border: 10px solid hsla(0,0%,100%,.5);
background: white;
background-clip: padding-box;
  • background-clip 属性规定背景的绘制区域,背景色。
  • 由于background-clip的值默认是border-box,背景的颜色会入侵到边框的位置,所以需要设置为padding-box修正。

2、多重边框

  • box-shadow:可接受第四个参数数组,水平偏移、垂直偏移、模糊程度、扩张半径
  • 可用逗号分隔语法,创建任意数量的投影,第一层投影位于最顶层
//可用这个方法实现多个边框,但是如果边框是虚线那就不行了
box-shadow: 0 0 0 10px #eee,0 0 0 15px #ddd,0 0 0 20px #ccc;
  • outline:如需两层边框,可先设置一层常规边框,再加上outline(描边)属性来生产外层的边框。
  • 使用方式和border一样,位于border外面,可通过outline-offset设置其与边框直接的距离。不接受使用逗号添加多个值。如今,如元素时圆角,则无法贴合圆角(bug,未来可能会可以)。如使用这个属性,最好在不同浏览器中完整地测试最终效果。

3、灵活的背景定位

  • background-position:运行指定背景图片距离任意角的偏移量。
  • 回退方案:在不支持background-position扩展语法的浏览器中,我们把老套的right、bottom定位值写进background的简写属性中。
background-position: right 20px bottom 20px;
  • background-origin:修改背景图片background-position定位的标准。默认是padding-box;
background-origin:border-box/padding-box/content-box;
  • 因此background-position是以 padding box 为准的进行定位的。
  • 想背景图片距离边角的偏移量跟内边距保持一致,可修改background-origin的值为content-box。
  • 如不想修改background-origin的默认值,可设置calc(),使用这个函数计算。
background-position: calc(100% - 10px) calc(100% - 10px);

4、边框内圆角

  • 要实现上图效果,我们习惯会用两个盒子实现。下面介绍一个使用一个盒子实现上图效果。
background-color: pink;//设置盒子背景颜色
border-radius: 10px;//设置圆角
box-shadow: 0 0 0 10px #655;//设置盒子阴影
outline: 11px solid #655;//设置盒子outline,一般设置比圆角,阴影大一点,为了更好的效果

5、条纹背景

  • linear-gradient:直线过渡
  • radial-gradient:圆过渡,以中心的为起点,颜色过渡
  • 通过背景颜色过渡设置,再设置背景大小
  • 后面的颜色使用0代替对应的百分百,可以避免修改比例的时候,要改两个数据。
  • 注:两个颜色后面跟的百分百是指在哪个位置开始这个样式,两个的差值就是过渡的部分
background: linear-gradient(to bottom,#eee 30%,#ddd 30%);
background: linear-gradient(to bottom,#eee 30%,#ddd 0);
background-size: 100% 15px;

斜向条纹(这个只适合45deg的斜向)

background: linear-gradient(45deg,#fb2 25%,#58a 0,#58a 50%,#fb2 0,#fb2 75%,#58a 0);
background-size: 50px 50px;

更好的斜向条纹

  • repeating-linear-gradient:
  • repeating-radial-gradient:
  • 这两个方法,色标是无限循环重复的,直到填满整个背景。
background: repeating-linear-gradient(45deg, #fb3, #fb3 15px, #58a 0,#58a 30px);
  • 水平垂直用上面的,斜向的用下面的

灵活的同色系条纹

  • 大多情况下,我们想要的条纹图案,颜色往往是属于同一色系,只是在明度方面有着轻微的差异。
  • 除了为每种条纹单独指定颜色,有一种更好的方法:就是把深颜色指定为背景颜色,同时把半透明的白色的条纹叠加在背景色上来得到浅色条纹。
background: #58a;
background-image: repeating-linear-gradient(30deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,.1) 15px,transparent 0, transparent 30px);

6、复杂的背景图案

  • 网格
background: white;
background-image:
linear-gradient(90deg,rgba(200,0,0,.5) 50%,transparent 0),
linear-gradient(rgba(200,0,0,.5) 50%,transparent 0);
background-size: 30px 30px;

background: #58a;
background-image:
linear-gradient(white 1px,transparent 0),
linear-gradient(90deg, white 1px,transparent 0);
background-size: 30px 30px;

background: #58a;
background-image:
linear-gradient(white 2px,transparent 0),
linear-gradient(90deg, white 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;

  • 波点
  • 生成两层圆点阵列图案,并把它们的背景定位错开,这样可得到真正的波点图案

  • 第二层背景的偏移定位值是贴片宽高的一半。如是使用css预处理器,可通过mixin函数传参来避免修改时要修改多个地方。

  • 棋盘

  • 优化:第一组和第二组合并为一层渐变,把第三组和第四组合并为一层渐变

  • 可根据需求修改。可使用预处理器的mixin来简化代码。
  • 未来:角度渐变
background: conic-gradient(red,yellow,lime,aqua,blue,fuchsia,red );

  • 还可以使用这个章学到的只是和混合模式结合起来。使用background-blend-mode属性并设置一个非normal属性,可得到根据有趣的图案。如 http://bennettfeely.com/gradi…

7、伪随机背景

  • 得到不同颜色和不同宽度的垂直条纹。
  • 方案:把条纹平面拆散为多个图层,一种颜色作为底色,另三种作为条纹,然后让条纹以不同的间隔进行重复平铺。使用质数来增加随机真实性,这个是蝉原则。

  • 蝉原理也可以运用在别的地方:如图库的图片不同角度;动画

8、连续的图像边框

  • border-image的工作原理就是九宫格伸缩法,把图片切割成9块,然后把它们应用到元素边框相关的边和角。

  • 效果:出现在拐角处的图片根据元素的宽高和边框厚度的变化而变化。
  • 法一:使用两个html元素,一个元素用来设置为背景,background-size: cover;,另一个用来存放内容。(不推荐,因为把结构和表现混合起来了)
  • 法二:主要思路是在背景图片之上,在叠加一层纯白的实色背景。

  • 这个方法也可以用在渐变图案上,如老式信封样式的边框

  • 蚂蚁行军效果

  • 如果通过border-image实现这个效果,只可以为border-image-source指定一个gif动画。
  • border-image,搭配渐变图案很强大。如脚注,需要给border-image属性再加上一条由渐变生成的垂直条纹,并在渐变中写好要裁切的长度。粗细交个border-width控制

第三章 形状

9、自适应的椭圆

  • 当任意两个相邻圆角的半径之和超过border box的尺寸时,用户代理必须按比例减小各个边框半径所使用的值,直到它们不会相互重叠为止

  • border-radius鲜为人知的,可单独指定水平和垂直半径,用斜杆/分隔两个值即可

  • 半椭圆
  • 斜杆(/)两侧的值,分别代表四个角的水平和垂直半径,,方向:左上,右上、右下、左下。可缩写

10、平行四边形

  • 嵌套元素方案:使用两个盒子,对外盒子使用skew()变形,对内容反向的skew()变形(不推荐)

  • 伪元素方案:把所有样式应用到伪元素上,再对伪元素进行变形。

  • 这种思路,也可运用于别的效果:
  • 在不能使用“多重边框”技巧时,可用这个方法模拟多层边框。或多层虚线边框,或在多重边框有透明空隙。

11、菱形图片

  • 基于变形的方案
  • 外盒子旋转,里面的图片反向旋转,图片是否放大有区别的,1.42是根据勾股定理算出,图片的宽度与容器的对角线相等(图片需是正方形,且需要一层额外的div标签)

  • 裁切路径方案
  • 主要思路是使用path-clip,这个是借鉴svg的,但兼容性有限。它允许我们用一系列(以逗号隔开的)坐标来指定任意的多边形。也可使用百分比值,它可自动解析为元素自身的尺寸。
  • 还可参与动画。如鼠标悬停时平滑地扩展为完整的面积。

12、切角效果

  • 使用渐变效果,接受一个角度作为方向,然后线性渐变

  • 要弄两个角的话,用两层过渡,设置background-size使每层渐变分别只占据整个元素一半的面积。且要设置不平铺。

  • 四个角

  • 可使用预处理器mixin,减少修改时的工序。
  • 弧形切角

  • 上面基于渐变的方案,代码过于繁琐冗余,且并非完全没问题。可使用其他替换方案,
  • 1border-image+svg。并通过一个内联的svg图像来产生切角。存在不兼容border-image的问题
  • 2裁切路径方案。存在当内边距不够宽时,会裁切掉文案。

13、梯形标签页

  • 通过变形属性来改变它的尺寸,而不是内边距,避免在不支持3D的浏览器的样式怪异,实践证明垂直方向缩放1.3倍可补足它在高度上的缩水
  • 可通过修改transform-origin为bottom left或bottom right,可得到左侧倾斜或右侧倾斜的标签。但斜边的角度依赖于元素的宽度。如宽度不同,很难得到斜度一致的梯形。宽度变化不大的,这样很管用。

14、简单的饼图

  • 用CSS动画来实现一个饼图从0变化到100%的动画。

  • 制作多个不同比率的静态饼图:使用上面的动画,用负的动画延时来直接跳至动画中任意时间点。
  • 在饼图显示的比率就是我们在animation-delay值在总的动画持续时间中所占的比率。为方便计算,我们可以设置一个长达100s的持续时间。

  • SVG解决方案

  • 从0到100%的动画,只需创建一个CSS动画,把stroke-dasharray属性从0 158到158 158

  • 优化指定一个特定的半径让周长无限接近100,就可直接把比率的百分比值指定为stroke-dasharray的长度。在SVG使用viewBox属性指定其尺寸,可自适应容器大小

  • 角向渐变

  • 相对于前面的方案,其实SVG的方案具有不少优点:
  • 1增加第三种颜色是非常容易,设置虚线描边,再用stroke-dashoffset来推后描边线段的起始位置即可
  • 2不需要特别担心打印。SVG视为页面内容,会被打印。但是依赖背景来实现的,往往打印不出
  • 3用内联样式来指定颜色。前者依赖伪元素,无法对它使用内联样式。

微信扫一扫,分享到朋友圈

【书】CSS揭秘

RocketMQ系列(二)环境搭建

上一篇

石头扫地机器人要上央视了!央视Boys亲自直播带货

下一篇

你也可能喜欢

【书】CSS揭秘

长按储存图像,分享给朋友