获得徽章 1
赞了这篇文章
#青训营笔记创作活动#
day10 1月25
通过混合模式 mix-blend-mode: multiply,消除了大部分非人物的背景,再通过 filter: contrast(3) 加深这个效果,彻底去掉动图背景,融入了地球背景中。
day10 1月25
通过混合模式 mix-blend-mode: multiply,消除了大部分非人物的背景,再通过 filter: contrast(3) 加深这个效果,彻底去掉动图背景,融入了地球背景中。
展开
评论
点赞
赞了这篇文章
#青训营笔记创作活动#
day09 1月24
可以使用color: transparent将文字颜色设置为透明, background-clip: text设置背景根据文字形状裁剪,最后设置渐变背景即可完成渐变彩虹文字
day09 1月24
可以使用color: transparent将文字颜色设置为透明, background-clip: text设置背景根据文字形状裁剪,最后设置渐变背景即可完成渐变彩虹文字
评论
点赞
#青训营笔记创作活动#
day08 1月23
实现跳动方块动画。利用 CSS @property 定义了一个名为 --m-0 的变量,然后将整个动画过渡效果赋予了这个变量,而不是整个 mask。
day08 1月23
实现跳动方块动画。利用 CSS @property 定义了一个名为 --m-0 的变量,然后将整个动画过渡效果赋予了这个变量,而不是整个 mask。
评论
点赞
#青训营笔记创作活动#
1月20 day07
主要通过linear-gradient这个属性,可以将多个颜色设置为一个盒子的背景颜色,并且还有过渡效果,这个属性值可以还设置渐变的方向
1月20 day07
主要通过linear-gradient这个属性,可以将多个颜色设置为一个盒子的背景颜色,并且还有过渡效果,这个属性值可以还设置渐变的方向
评论
点赞
#青训营笔记创作活动#
1月19 day06
学了几个有用的小技巧,比如感觉可能会用到的background-clip: text,这可以做一个带背景的文字效果。
1月19 day06
学了几个有用的小技巧,比如感觉可能会用到的background-clip: text,这可以做一个带背景的文字效果。
评论
点赞
#青训营笔记创作活动#
1月17日 day05
可以将网页设置为夜间模式的方法。
深色模式并不是简单的颜色反转,所以需要考虑内容与背景的对比度,为深色模式重新配色,需要用到CSS中的 自定义变量 。正常模式下定义一些CSS颜色变量,深色模式下改变这些变量相应的值即可。
1月17日 day05
可以将网页设置为夜间模式的方法。
深色模式并不是简单的颜色反转,所以需要考虑内容与背景的对比度,为深色模式重新配色,需要用到CSS中的 自定义变量 。正常模式下定义一些CSS颜色变量,深色模式下改变这些变量相应的值即可。
展开
评论
点赞
#青训营笔记创作活动#
1月16日 day04
解决图片5px间距问题
如何让元素高度与窗口相同
修改输入框 placeholder 样式
使用 :not 选择器
使用 caret-color 修改光标颜色
使用 flex 布局将元素智能地固定在底部
去掉 type="number" 末尾的箭头
使用 outline:none 删除输入状态行
解决iOS滚动条卡住的问题
画三角形
自定义选定的文本样式
不允许选择的文本
使用 filter:grayscale(1) 使页面处于灰色模式
1月16日 day04
解决图片5px间距问题
如何让元素高度与窗口相同
修改输入框 placeholder 样式
使用 :not 选择器
使用 caret-color 修改光标颜色
使用 flex 布局将元素智能地固定在底部
去掉 type="number" 末尾的箭头
使用 outline:none 删除输入状态行
解决iOS滚动条卡住的问题
画三角形
自定义选定的文本样式
不允许选择的文本
使用 filter:grayscale(1) 使页面处于灰色模式
展开
评论
点赞
#青训营笔记创作活动#
1月15日 day03
content-visibility: auto 可以跳过渲染工作,需要配合js来实现,对于那些用户还没滚动鼠标到达的地方是不需要渲染的。但这样滚动会造成抖动,因此可以使用contain-intrinsic-size来指定的元素自然大小,确保未渲染子元素的 div 仍然占据空间,同时也保留延迟渲染的好处。
1月15日 day03
content-visibility: auto 可以跳过渲染工作,需要配合js来实现,对于那些用户还没滚动鼠标到达的地方是不需要渲染的。但这样滚动会造成抖动,因此可以使用contain-intrinsic-size来指定的元素自然大小,确保未渲染子元素的 div 仍然占据空间,同时也保留延迟渲染的好处。
展开
评论
点赞
#青训营笔记创作活动#
1月14日 day2
filter中的属性撘配使用可以实现穿墙效果。
blur平时用于高斯模糊,比如可以达到毛玻璃效果。
brightness可以用来修改亮度,比如白色鼠标指针进入黑色区域变白。
contrast可以用来调整图像的对比度。
contrast和blur 一起用就能实现穿墙效果。
1月14日 day2
filter中的属性撘配使用可以实现穿墙效果。
blur平时用于高斯模糊,比如可以达到毛玻璃效果。
brightness可以用来修改亮度,比如白色鼠标指针进入黑色区域变白。
contrast可以用来调整图像的对比度。
contrast和blur 一起用就能实现穿墙效果。
展开
评论
点赞
#青训营笔记创作活动#
1月13日,打卡day01
原来直接给html加css可以直接修改整个页面的颜色,感觉好神奇也很方便,增加了一个小知识点。
1月13日,打卡day01
原来直接给html加css可以直接修改整个页面的颜色,感觉好神奇也很方便,增加了一个小知识点。
评论
点赞