四时宝库

程序员的知识宝库

只用一个js文件,为你的网站加个黑暗模式

在几秒钟内为您的网站添加黑暗模式/夜间模式


Darkmode.Js 是一款开源项目,只需要添加一段代码,就可以为网站添加夜晚模式/黑暗模式/夜间模式/护眼模式,让你的网站跟上 UI 界的潮流。

这个库使用css混合混合模式,以便为您的任何网站带来黑暗模式。只需复制粘贴片段,你就会得到一个小部件来打开和关闭暗模式。您也可以在没有小部件的情况下以编程方式使用它。这个插件是轻量级的,内置于VanillaJS中。默认情况下,它还使用localstorage,因此您的上一个设置将被记住!

清明节各大网站实现变灰效果(一行代码搞定)



4.4日清明节大家可以看到很多很多网站包括主页和内容也都已经变成了灰色,比如百度、掘金、思否、CSDN 等等。

思否



CSDN


大家可以看到全站的内容都变成灰色了,包括按钮、图片等等。这时候我们可能会好奇这是怎么做到的呢?

有人会以为所有的内容都统一换了一个 CSS 样式,图片也全换成灰色的了,按钮等样式也统一换成了灰色样式。但你想想这个成本也太高了,而且万一某个控件忘记加灰色样式了岂不是太突兀了。

CSS – CSS3动画解析抖音 LOGO制作

前言

“字节跳动”现今也是如日中天,旗下产品,除头条外,还有短视频平台“抖音”,人气也是非常高,据说拥有7亿用户。

今天我们就来研究研究抖音的logo,蹭蹭热度。

效果预览:

CSS3动画解析抖音 LOGO制作

主要用css3新增属性mix-blend-mode混合模式

前端:使用纯css3打造有点意思的故障艺术

前言

很早之前就看到国外很多酷炫的网站在实践"故障艺术

css面试题总汇(css面试题2021及答案)


1. link 和 @import 都能导入一个样式文件,它们有什么区别嘛?

  • link 是 HTML 标签,除了能导入 CSS 外,还能导入别的资源,比如图片、脚本和字体等;而 @import 是 CSS 的语法,只能用来导入 CSS;

简单的 css 改变图片颜色(css修改图片)

当我们在做项目的时候,经常有许多个icon 图片两个或更多个颜色的版本,下面切图网教你,怎么用简单的css改变图片的颜色。

熟悉PS的人都应该知道混合模式,css3中也有两个与混合模式相关的属性,mix-blend-mode 和 background-blend-mode

首先我们来了解一下mix-blend-mode 取值情况

mix-blend-mode: normal; // 正常

CSS层叠技术:优化CSS重置,打造独特样式

这篇文章介绍了一种名为CSS层叠的技术,用于优化CSS重置过程。它解释了CSS重置的概念,即通过删除浏览器默认样式来确保在不同浏览器上呈现一致的外观。然后,它引入了CSS层叠技术,以更好地控制样式的层次结构和优先级。

css中的font-family你真的用对了么

sonar 扫描报Unexpected missing generic font family的原因和应对方法

CSS 继承方式

从 MDN 上可以看到,当元素的一个继承属性 (inherited property)没有指定值时,则取父元素的同属性的计算值(computed value)。

24个 CSS 高级技巧合集(css高级样式)

欢迎大家关注实验楼微信公众号(实验楼),获取更多编程技术资源福利。


1.使用CSS复位

CSS复位可以在不同的浏览器上保持一致的样式风格。您可以使用CSS reset 库Normalize等,也可以使用一个更简化的复位方法:

你所不知道的 CSS 滤镜技巧与细节

本文主要介绍 CSS 滤镜的不常用用法,希望能给读者带来一些干货!

OK,下面直接进入正文。本文所描述的滤镜,指的是 CSS3 出来后的滤镜,不是 IE 系列时代的滤镜,语法如下,还未接触过这个属性的可以先简单到 MDN — filter 了解下:

{ filter: blur(5px); filter: brightness(0.4); filter: contrast(200%); filter: drop-shadow(16px 16px 20px blue); filter: grayscale(50%); filter: hue-rotate(90deg); filter: invert(75%); filter: opacity(25%); filter: saturate(30%); filter: sepia(60%);
控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言
    友情链接