之前prefers-color-scheme实现深色模式效果的方案实在是太鸡肋了,脱离现实,原理用户,体验不佳,CSS light-dark()函数才是真正的解决之道。
阅读全文…
标签:@media, color-scheme, contrast, darken, light-dark(), prefers-color-scheme, prefers-contrast 发布在 CSS相关 | 没有评论 »
介绍两个我觉得相当实用的HTML和DOM新特性,自此,无JS交互的场景再次丰富了一层,有兴趣的可以进来了解一番。
标签:beforetoggle, command, commandfor, details, dialog, popover, popovertarget, toggle() 发布在 CSS相关 | 没有评论 »
CSS图形表现领域又加入了一员猛将,那就是border-shape属性,可以实现任意的边框图形效果,且不只是边框。
标签:border-shape, caret-shape, clip-path, corner-shape, CSS Shapes, drop-shadow, shape() 发布在 CSS相关 | 2 条评论 »
CSS终于出了个可以自动匹配色值对比度的函数,这在无障碍访问领域特别受用,前景背景色从此可以自动适配了。
标签:color, contrast, contrast-color, prefers-contrast, 无障碍网页应用, 颜色 发布在 CSS相关 | 6 条评论 »
text-align 也藏冷门小知识点!match-parent 看似和继承效果相近,实际大有区别。面对逻辑对齐与 direction 布局,它能让样式计算值转为真实方位值。日常开发极少用到,兼容性却拉满,小众装逼特性带你一文吃透。
标签:direction, getComputedStyle, text-align 发布在 CSS相关 | 没有评论 »
好消息,现在不仅光标的颜色,连光标的形状也能设置了,同时还能控制光标是否闪烁,CSS特性真是越来越全面了。
标签:animation, caret-color, caret-shape, color, cursor, steps 发布在 CSS相关 | 2 条评论 »
前端开发这么多年,有个心心念念的文字排版布局一直想要实现,那就是四面文字环绕效果,嘿,我发现,最近横空出世的pretext可以轻松实现这样的排版效果。
标签:canvas, CSS Shapes, float, 文字, 文字排版 发布在 CSS相关 | 2 条评论 »
CSS居然可以判断用户的鼠标是从上面进来的,还是从下面进来的,其实现原理非常巧妙,仿佛变魔术一般,有兴趣的可以进来了解一下。
标签::has(), :not, CSS嵌套, css相关, hover, 交互 发布在 CSS相关 | 6 条评论 »
如题,介绍六边形头像的CSS实现技巧,以及如何基于这个六边形实现高大上的蜂巢布局效果,又是展现CSS潜力的一天。
标签:@property, container-type, corner-shape, direction, flex布局, grid, grid-column-start, if(), sibling-index() 发布在 CSS相关 | 4 条评论 »
corner-shape可以生成多种复杂的图形,那么,有没有什么办法把这些图形变成底纹背景呢?
标签:aspect-ratio, background, corner-shape, foreignObject, repeating-linear-gradient, SVG 发布在 CSS相关 | 2 条评论 »
张鑫旭more,09年华中科技大学毕业,现上海,就职于阅文集团,专注web前端偏前领域,著有《CSS世界》《CSS选择器世界》《CSS新世界》《HTML并不简单》
邮箱:zhangxinxu@zhangxinxu.com
关注我:微信微博掘金知乎抖音热更B站Gitee