CSS相关
文章平均质量分 94
陈大鱼头
高级前端工程师,《Hello CSS》系列作者
展开
-
你不知道的 CSS 进度条
作者:陈大鱼头github: KRISACHAN进度条是一个非常常见的功能,实现起来也不难,一般我们都会用 div 来实现。作为一个这么常见的需求, whatwg 肯定是不会没有原生组件提供(虽然有我们也不一定会用),那么就让我们来康康有哪些有意思的进度条实现方式。常规版 — div 一波流这是比较常规的实现方式,先看效果:源码如下:<style> .progress1 { height: 20px; width: 300px; backgro..原创 2021-01-18 13:06:22 · 258 阅读 · 0 评论 -
『极限版』不掺水,用纯 CSS 来实现超飒的表单验证功能
作者:陈大鱼头github: KRISACHAN去年的时候写过一篇文章 纯CSS实现表单验证 ,在发表之后不久就有网友跟鱼头说,打算拿我这篇文章作团队内部分享。当时听到这个消息之后,在屏幕前的鱼头笑咧了嘴,但这位童鞋的下一段内容,就让我马上笑不起出来了。不过因为初始化状态是这样的:所以希望我能够改一下,改成这样:只有在进行输入且输入内容不对的时候才展示错误信息。这位童鞋:“所以这功能能实现吗?”我:“。。。。。。”既然有童鞋这么看得起鱼头,还打算拿鱼头的 DEMO 来作内部分..原创 2020-09-06 19:19:30 · 384 阅读 · 0 评论 -
『真香警告』这33个超级好用的CSS选择器,你可能见都没见过。
作者:陈大鱼头github: KRISACHAN前言CSS 选择器是 CSS 世界中非常重要的一环。在 CSS 2 之后,所有的 CSS 属性都是按模块去维护的。CSS 选择器也是如此,然而如今也已经发布了第四版 —— CSS Selectors Level 4 ,这一版最早的草案发布于2011年09月29日,最后更新是2018年11月21日。下面让我们一起来看看 Level 4 新推出的一些选择器。正文下面我们按照类型来划分逻辑组合(Logical Combinations)..原创 2020-07-21 13:49:10 · 766 阅读 · 0 评论 -
面试官:你可以用纯 CSS 判断鼠标进入的方向吗?
作者:陈大鱼头github: KRISACHAN前言在之前某一个前端技术群里,有一个群友说他面试的时候遇到了一个问题,就是面试官让他用纯 CSS 来实现一个根据鼠标移动位置觉得物体移动方向的 DEMO。给出的初始结构如下:<style>body { padding: 2em; text-align: center;}.block { po...原创 2020-04-29 11:13:49 · 7872 阅读 · 12 评论 -
面试官:你用纯CSS来写个游戏吗?
作者:陈大鱼头github: KRISACHAN前言不知道大家小时候有没有玩过一款游戏叫『井字棋』的。它长这样:(我赢了,快夸我 ~o(´^`)o)上面的就是本次文章的最终结果,一个用纯CSS实现的AI井字棋游戏,Mmmm,虽然看起来有点蠢。。。地址在此:https://codepen.io/krischan77/pen/qBdYZLy游戏的规则比较简单,就是在一个九宫...原创 2020-03-29 18:58:00 · 4886 阅读 · 23 评论 -
忍法,scroll 翻滚之术!
作者:陈大鱼头github: KRISACHAN前言在日常的开发中,我们对 scroll 这个单词肯定不陌生。例如因为看不惯浏览器默认样式而用 JS 一顿猛如虎操作的 自定义滚动条 。或者是嗖~一下就到顶的 回到顶部 。又或者是想去哪点哪的 标题导航 。但是在过去的开发中,要实现这些功能并不是那么轻松的一件事情。例如我们要实现一个有滚动效果的 回到顶部 功能,我们可能需要...原创 2020-03-04 20:05:19 · 552 阅读 · 1 评论 -
Web开发中最该知道却从不重视的 —— Accessibility
作者:陈大鱼头github: KRISACHAN什么是Accessibility?[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vuwaqhRF-1575898743242)(http://mds.is/content/images/2016/09/A11Y-3.png)]图片来自WHAT DOES A11Y EVEN MEAN?Accessibi...原创 2019-12-09 21:39:44 · 3238 阅读 · 6 评论 -
前端进阶之什么是BFC?BFC的原理是什么?如何创建BFC?
作者:陈大鱼头github: KRISACHAN盒模型The CSS box model describes the rectangular boxes that are generated for elements in the document tree and laid out according to the visual formatting model.CSS盒模型描...原创 2019-07-23 16:42:48 · 2052 阅读 · 0 评论 -
CSS的未来已来
作者:陈大鱼头github: KRISACHAN前言最近听说TypeScript3.7添加了对Optional Chaining的支持,然后就想着给鱼头的脚手架ying-template的TS版本升级,然后在命令行发现这样的一句信息:‘postcss-cssnext’ 已经被 'postcss-preset-env’代替了。详情请查看 https://moox.io/blog/d...原创 2019-11-13 14:42:16 · 1138 阅读 · 0 评论 -
我的 Input框 不可能这么可爱
作者:陈大鱼头github: KRISACHAN<input /> 标签是我们日常开发中非常常见的替换元素了,但是最近在刷 whattwg 跟 MDN 的时候发现 跟 <input /> 有很多相关的属性,选择器都没怎么用过,所以就开篇文章来整理一下一些比较有趣或者实用的知识点。本篇文章默认大家已经知道 <input /> 标签的基本用法,不会做过...原创 2019-09-03 13:27:35 · 126675 阅读 · 81 评论