写本文的起因是,一天在群里有同学说误打误撞下,使用负的 outline-offset 实现了加号。嗯?好奇的我马上也动手尝试了下,到底是如何使用负的 outline-offset 实现加号呢?
纯 CSS 作品,没有图片和JavaScript,你能相信吗?
最近国外的一位网友发现了一个有趣的现象,有一个DIV,它在每种浏览器中的样子看起来都不一样,比如说firefox、edge、chrome、Safari、IE等。他给出的代码是这样的:
将图片卷成圆筒效果的两种技术方法
效果不错,就是有点僵硬,我们可以适当改变缓动函数以及加上一个动画延迟,就可以实现上述开头里的那个效果了。当然,这些都是锦上添花的点缀。
CSS 选择器语法速查
只是想练练手,看看能不能实现在页面上放置一个能无限循环滚动的图片横幅。事实证明,这并不是很难。
:focus-within 是一个新的CSS伪类( pseudo-class),它跟 :focus 、 :hover 很相似。这个伪类的作用在使用了 :focus-within 的元素成为焦点或它的子元素成为焦点时显现。
pattern属性是HTML5里出现的新属性,它适用于type类型为text, search, tel, url, email, 和 password等的input元素上,配合:valid伪类,就能实现JavaScript里的正则表达式等效的校验算法。
iPhone X 配备一个覆盖整个手机的全面屏,顶部的“刘海”为相机和其他组件留出了空间。然而结果就是会出现一些尴尬的情景:网站被限制在一个“安全区域”,在两侧边缘会出现白条儿。移除这个白条儿也不难,给 body 设置一个 background-color 就可以搞定。或者,可以添加 viewport-fit=cover meta 标签,将整个网站扩展到整个屏幕。
初看起来,好像觉得这个效果实现很难,实际上,CSS3里面针对这种特定形状环绕的效果已经支持很久了,CSS3 Shapes和CSS3 Regions都是可以实现的,本文就将展示如何使用CSS3 Shapes实现元素内容在滚动的时候自动环绕iPhone X的齐刘海的效果。
这一点,我昨天在查资料写这篇文章—最全面的元素水平垂直居中方法汇总的时候就发现有个大牛也理解错了—-CSS布局奇淫技巧之–各种居中里面的第八点。
will-change 属性这种现象跟元素层叠顺序(类似z-index)混乱有关,但是因为要使用 will-change 属性,就必须要接受这种混乱的现实。
我想,这些浏览器开发商和规范制定者会说:“你想要更好的性能。而这些是我全部能做的了。有些事情我们做不了,但你们知道怎么做。这些之外的事情我们会尽力做好,剩下的事情你们来告诉我如何能做的更好。”
如果你开发的页面非常复杂,那么,这个CSS的contain技术可以帮助你优化页面的性能。而对于第三方的小饰件,始终使用contain: strict;是很好的习惯,它可以保护你的页面不受它们的干扰而出现性能问题。
然而,千万不要过度使用will-change属性,否则,事与愿违,页面的执行效率会降低,推荐的做法是当一个元素或属性发生变化时打开will-change,变化完成之后关闭它。
除了vm和vh两种单位外,还有两种类似的单位:vmin——取vw和vh中较小的一个为基准,和vmax——取vw和vh中较大的一个为基准。它们同样是一个单位数值,跟px、em、%的用法类似。
今天在网上看到一有趣的开关按钮的制作,用到了SVG、css3和js,下面的演示中还引用了TweenMax.min.js,这是一个js动画工具库。
上面的这个加载中效果,以前是用gif动图实现的,但随着CSS的进步,CSS动画功能越来越强大,我们只用一小片段HTML和CSS就能实现,方便了很多,体积也减小了很多。
终于找到了一个好方法,使用:not(:last-of-type)简单方便,再也不要麻烦的单独使用:last-of-type了,不错!
问题是这样的:如果几个inline-block元素放在一起,它们的代码是按常见的HTML标准格式化,那么,在它们之间就会存留一些空格。
Web开发人员在调试网页时经常会遇到clear:both不起作用的情况,clear:both的作用是让改元素不浮动,让它在左右两边都没有其它网页元素排列。大多数情况下我们需要用用到clear:both,是因为让一个网页元素float:left或float:right时,它却浮动在其它元素旁,
本演示关键使用了几个新型的CSS属性(background-blend-mode, mix-blend-mode, 和 filter),利用这些属性,我们可以让同一张图片呈现出各种不可思议的神奇效果。
今儿,我就准备向大伙儿介绍一些你们之前可能很少见过CSS家伙们。他们每个都是度量的单位,类似pixel 和 em 这样的,但是很有可能你之前从来就没听过这些家伙们!就让我们一起来交个朋友吧~
三维立体效果我觉得是CSS3中最有意思的地方,不得不佩服那些开发者大神们,让我们能够通过几行CSS代码就能得到酷炫的视觉体验。