CSS

CSS如何实现内凹角效果

记得@Lea Verou的《CSS Secrets》一书和前几天@Chris Coyier刚发的帖子都介绍了CSS怎么实现元素斜切口的效果。我也尝试着借助Vue的能力,把这种效果构建成一个Vue组件。我把这种效果定义为外切口。而今天将要聊的是与其刚好相反的一个效果:CSS如何实现内凹角的效果

使用圆锥渐变和CSS自定义属性创建一个Range Input控制的环形图

最近我在 Codepen 上看到了一个例子,我的第一个想法是这个案例可以只用三个元素完成:一个容器,一个 range 类型的 input 和一个 output 。在 CSS 方面,涉及到使用一个把 CSS 自定义属性作为范围渲染参数的圆锥渐变函数 conic-gradient()

CSS Grid Layout一些有趣的事情(2)

去年,我做了一个研讨会之后收集了一些关于CSS Grid布局有趣的东西。今天年,我在另一个工作室工作,我学到了一些更令人兴奋的事情,那就是我们都喜欢布局规范。当然,我不会把这些有趣的东西独享。我很高兴能和大家一起分享这些有趣的东西。

你应该掌握的CSS自定义属性技术点

大多数编程语言都支持变量。但遗憾的是,CSS从一开始就缺乏对原生变量的支持。如果写CSS的话,那是没有变量的,除非你使用像Sass这样的CSS处理器。变量是Sass这样处理器的一个非常有用的特性之一。这也是你尝试使用的理由之一。Web技术发展是非常快速的。我很高兴地告诉你,CSS现在终于支持原生的变量了。虽然CSS处理器还支持更多的特性,但是CSS添加原生的变量是很好的。这些举措使用Web更接近未来的技术。在这篇文章接下来的内容中,我将向你展示如何在CSS使用变量,以及如何使用它们让你的工作变得更轻松。

CSS Grid中的陷阱和绊脚石

2017年3月,CSS Grid在几个星期内就被发送到Chrome、Firefox和Safari的生产版本中。很高兴,大家可以使用它来解决实际问题。CSS Grid是一种不同的布局方式,在大家开始使用规范的时候,有很多常见的问题。这篇文章的目的是回答其中的一些问题,并且将会是Smashing Magazine中有关于CSS Grid一系列文章中的一篇。

使用perspective和transform实现容器上的悬浮效果

我一直在做一个网站,这个网站主要用来向用户展示大型图片。我没有创建一个典型的Lightbox效果,而是尝试让一些交互效果更有意思。最后的效果是我在一个容器上添加了一个效果,当用户把鼠标悬浮在图片(用户鼠标移动图片上)时,它会倾斜(鼠标移动到不同的角度时,向不同的方向倾斜)。

CSS Houdini和CSS Paint API

很长时间以来,我都没有对浏览器新的技术感到兴奋。Houdini是一个强大的项目,它给开发者提供了比以往任何时候都还要更强大的CSS能力。这个项目的第一部分是CSS Paint API。这篇文章将解释为什么Houdini会如此令人兴奋,然后再告诉你如何开始使用CSS Paint API。

使用CSS Clip Path创建交互效果

你是否还记得小时候剪过杂志上的照片,把它们粘在纸上,用来制作自己的拼贴画?这篇文章是关于使用CSS的clip-path属性,用来实现Web上裁剪图片的效果。将讨论如何进行切割,以及如何使用这些镂空部件来制作一些有趣的效果。

网格项目的宽高比

之前,我们讲了宽高比盒子,谈到一个技巧,就是运用填充来随心所欲地调整一个元素的长宽比例。这个技巧并不是经常能用到的,因为修整一个元素的高度是自找麻烦,但也不是没有这种情况出现。要降低这一风险,有一种方法,那就是伪元素(Psuedo Element)策略,让伪元素顶住其上一层元素,撑起纵横比。但是如果元素里的内容将元素顶得更高,那元素也会变得更高,纵横比就完蛋了。

CSS的display:contents

没错,display: contents要在Blink引擎WebKit引擎里成为默认样式了,可能会随着Chrome浏览器65版与Safari浏览器11.1版一起发布。火狐浏览器从37版开始就有了这一功能,现在要轮到这两个浏览器了。这样,唯一没有这个功能的就剩下Edge浏览器了,大家一起投票提要求吧

页面

返回顶部