subtitle
CSS :placeholder-shown 是什么? CSS :placeholder-shown 是什么?
使用此伪类来设置当前显示占位符文本的输入的样式,换句话说,用户未在文本框中键入任何内容
2021-04-16
用一些简单的CSS和JavaScript创建一个标签云 用一些简单的CSS和JavaScript创建一个标签云
制作标签云有多困难?一点也不难。让我们来看看!
2021-02-02
世界上第一个可用于React、Vue、纯HTML和CSS的可组合CSS动画工具包— AnimXYZ 世界上第一个可用于React、Vue、纯HTML和CSS的可组合CSS动画工具包— AnimXYZ
是什么让 AnimXYZ 如此之好,它是可组合的,这意味着你可以组合和混合不同的动画来创建自己的高度可定制的 CSS 动画,而无需编写一个单一的关键帧。
2021-01-11
如何使用最少的CSS创建响应式页面和颜色主题 如何使用最少的CSS创建响应式页面和颜色主题
想用彩色主题搭建一个响应式网站?从根本上入手吧。 如果您碰巧路过我的网站,您可能会注意到我把它美化了一下。Victoria.dev现在可以更好地响应您的设备和偏好。 大多数现代设备和 Web 浏览器都允许用户为用户界面选择浅色或深色主题。使
2021-01-04
使用CSS计数器花式玩转列表编号 使用CSS计数器花式玩转列表编号
在网页设计中,以有组织的方式表示数据非常重要,这样用户可以轻松地了解网站或内容的结构。最简单的方法是使用有序列表。 如果你需要对数字的外观进行更多的控制,你可能会认为你需要通过 HTML 或 JavaScript 在 DOM 中添加更多的
2020-12-15
开源推荐|10个惊人的复古CSS套件 开源推荐|10个惊人的复古CSS套件
是否想发现可在下一个项目中使用的非典型 CSS 设计?下面是我最喜欢的一些。 NES.cssNES-style(8bit-like)的 CSS 框架,非常适合您的复古浏览器游戏。 RPG UIWeb 中用于老式 RPG GUI 的轻量级
2020-12-14
使用CSS ::marker的自定义项目符号 使用CSS ::marker的自定义项目符号
现在,在使用 <ul> 或 <ol> 时自定义数字或项目符号的颜色,大小或类型很简单。 感谢 CSS ::marker,我们可以更改内容以及项目符号和数字的某些样式。 浏览器兼容性当 Chromium 86 发布
2020-11-22
CSS3贝塞尔曲线实战:创建链接悬停动画效果 CSS3贝塞尔曲线实战:创建链接悬停动画效果
我们将使用 CSS3 动画过渡来创建简单但引人入胜的链接悬停效果,将鼠标悬停在链接上时,会弹出一个小弹出框。 我们还将看一下CSS3 Cubic-Bezier(贝塞尔)曲线,它是 CSS 过渡,为弹出框提供了更加流畅的运动,而不是僵化的机械
2020-11-19
如何使用CSS Paint API动态创建与分辨率无关的可变背景 如何使用CSS Paint API动态创建与分辨率无关的可变背景
现代 Web 应用对图像的需求量很大,它们占据网络下载的大部分字节。通过优化它们,你可以更好地利用它们的性能。如果你碰巧使用几何图形作为背景图像,有一个替代方案:你可以使用CSS Paint API以编程方式生成背景。 在本教程中,我们将
2020-07-08
译|CSS中的间距,前端开发中各种设置间距的优点缺点及实例 译|CSS中的间距,前端开发中各种设置间距的优点缺点及实例
如果两个或多个元素很接近,那么用户就会认为它们以某种方式属于彼此。当对多个设计元素进行分组时,用户可以根据它们之间的空间大小来决定它们之间的关系。没有间距,用户将很难浏览页面并知道哪些内容相关而哪些内容无关。 在本文中,我将介绍有关 C
2020-05-08
译|你不知道的CSS国际化 译|你不知道的CSS国际化
我遇到过一些人,他们根本不认为 CSS 与国际化有关,但如果你仔细想想,国际化不仅仅是把你网站上的内容翻译成多种语言,然后就收工了。该内容的呈现方式有各种细微的差别,这些细微的差别会影响到母语人士使用您的网站的体验。 对于国际化,没有统
2020-05-07
【译】Web中的图像技术总结,前端开发中各种图片引入的优点缺点及实例 【译】Web中的图像技术总结,前端开发中各种图片引入的优点缺点及实例
前端开发人员在构建网站时需要做出的决定之一就是添加图片的技术。它可以是 HTML <img>,也可以是通过 CSS 背景生成的图片,也可以是 SVG <image>。选择正确的技术很重要,并且可以在性能和可访问性方面
2020-04-24
CSS变量实现暗黑模式,我的小铺页面已经支持 CSS变量实现暗黑模式,我的小铺页面已经支持
最近微信被苹果逼的开发了暗黑模式,越来越多的网站和应用开始支持了暗黑模式,许多人也喜欢为网站选择暗模式,也许他们更喜欢这样的外观,或者他们想让自己的眼睛免受疲劳。这篇文章将告诉你如何实现一个自动的 CSS 暗模式,根据你的访客的主题来改变。
2020-03-15
拒绝JavaScript,这三个CSS技巧你一定用的上​ 拒绝JavaScript,这三个CSS技巧你一定用的上​
本文介绍三个 CSS 技巧,一定程度上可以代替 JavaScript,内容来自于看张鑫旭的大作《CSS 选择器世界》时选择的几个比较实用的内容。 一起来看看这些技巧吧。 1. :active 伪类与 CSS 数据上报如果想要知道两个按钮的
2020-03-11
【小技巧】巧用CSS属性值正则匹配选择器 【小技巧】巧用CSS属性值正则匹配选择器
属性值正则匹配选择器包括下面 3 种: [attr^=”val”] [attr$=”val”] [attr*=”val”] 这 3 种属性选择器是字符匹配,而非单词匹配。其中,尖角符号^、美元符号$以及星号*都是正则表达式中的特殊标识符
2020-03-09
CSS 定位之 sticky 定位及应用 CSS 定位之 sticky 定位及应用
CSS 有两个最重要的基本属性,前端开发必须掌握:display 和 position。 display 属性指定网页的布局:flex 和网格布局 grid。本文介绍非常有用的 position 属性的 sticky 定位。 positi
2018-12-31
小技巧|CSS如何实现文字两端对齐 小技巧|CSS如何实现文字两端对齐
需求如下,红框所在的文字有四个字的、三个字的、两个字的,如果不两端对齐可以选择居中对齐,或者右对齐。但是如果要像下面这样两端对齐呢? 我相信以前很多人都这么干过:两个字中间使用 来隔开达到四个字的宽度,三个字也可以,但是,像上
2017-09-17
CSS3聊天气泡框以及inherit、currentColor关键字 CSS3聊天气泡框以及inherit、currentColor关键字
尽管绝大多数人都知道 inherit 这个关键字,但是很多人可能自始自终都没实际用过它,包括我自己,从来没有,在查询 CSS 文档时,习惯性的忽略它,直到看到《CSS 揭秘》这本书。 效果如上图所示,主要用到 CSS3 的伪类::afte
2016-07-20
CSS行高(line-height)及文本垂直居中原理 CSS行高(line-height)及文本垂直居中原理
在 CSS 中,line-height 属性设置两段段文本之间的距离,也就是行高,如果我们把一段文本的 line-height 设置为父容器的高度就可以实现文本垂直居中了,比如下面的例子: <!DOCTYPE html> <h
2016-05-14
CSS的低权重原则—避免滥用子选择器 CSS的低权重原则—避免滥用子选择器
CSS 设置的样式是可以层叠的,如下面[代码 1] [代码 1] <style type="text/css"> span { font-size: 40px; } .test { color: red;
2015-05-24