Css

使用纯 CSS 实现仿 Material Design 的 input 过渡效果

以前一段时间,基于对 nextgraphql 的调研,再加上本人的兴趣,我做了一个站点,也作为我以后各种技术折腾,实践以及兴趣交汇的试验田。

最近我需要在我的实验田使用 jwt 实践校验码的功能。校验码,就是指注册时邮箱或者短信的校验码。需要校验码则需要有登录注册,而在登录注册时,为了多写一些 CSS,我决定实现一个 Material Design 的表单过渡效果。

实现效果见 诗词弦歌 - 登录

开始之前,你先看看是否认识以下几个选择器。如果不,那么通过本文你可以学习到以下几个选择器,以及他们的试用场景

  • :not(:empty)
  • input:not([value=""])
  • input:valid
  • input:not(:placeholder-shown)



[翻译] Grid 布局完全指南

原文链接见 山月的博客

英文链接

简介

CSS 栅格布局 (亦称 “Grid”),是一个基于栅格的二维布局系统,旨在彻底改变基于网格用户界面的设计。CSS 一直以来并没有把布局做的足够好。刚开始,我们使用 tables,后来是 floats,positioning 和 inline-block,这些本质上是一些 hacks 而且许多重要功能尚未解决(例如垂直居中)。Flexbox 可以做到这些,但是它主要用来一些简单的一维布局,并不适合复杂的二维布局(当然 Flexbox 与 Grid 可以一并使用)。Grid 是第一个为了解决布局问题的 CSS 模块,只要我们做过网页,就会遇到这些问题。

使用 Grid 进行常见布局

grid 布局是W3C提出的一个二维布局系统,通过 display: grid 来设置使用,对于以前一些复杂的布局能够得到更简单的解决。本篇文章通过几个布局来对对 grid 布局进行一个简单的了解。目前,grid 仅仅只有 Edge使用前缀能够支持,为了更好地体验,可以使用 Chrome 浏览器,在 chrome://flags 开启 #enable-experimental-web-platform-features 选项。

使用 Grid 进行常见布局示例

Grid Layout [class^=grid] { background-image: linear-gradient(90deg, #F5F5F5 4.16666667%, #fdfdfd 4.16666667%, #fdfdfd 8.33333333%, #F5F5F5 8.33333333%, #F5F5F5 12.5%, #fdfdfd 12.5%, #fdfdfd 16.66666667%, #F5F5F5 16.66666667%, #F5F5F5 20.83333333%, #fdfdfd 20.83333333%, #fdfdfd 25%, #F5F5F5 25%, #F5F5F5 29.16666667%, #fdfdfd 29.16666667%, #fdfdfd 33.33333333%, #F5F5F5 33.33333333%, #F5F5F5 37.5%, #fdfdfd 37.5%, #fdfdfd 41.66666667%, #F5F5F5 41.66666667%, #F5F5F5 45.83333333%, #fdfdfd 45.83333333%, #fdfdfd 50%, #F5F5F5 50%, #F5F5F5 54.16666667%, #fdfdfd 54.16666667%, #fdfdfd 58.33333333%, #F5F5F5 58.33333333%, #F5F5F5 62.5%, #fdfdfd 62.5%, #fdfdfd 66.