写点什么

CSS

1 人感兴趣 · 365 次引用

  • 最新
  • 推荐

CSS 小技巧之悬停 3D 发光效果

今天要实现的效果如图所示,鼠标悬停是图片卡片会有3D翻转的效果,且动画过程中还带有发光的效果。

https://static001.geekbang.org/infoq/13/133582d746371b2e2876f6b8cb66fec2.png?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

dart-sass 与 node-sass 的区别以及使用 dart-sass 可能会出现的问题

2020年10月27日,Sass 官方团队正式宣布 Libsass 将弃用,以及基于它的 Node Sass 和 SassC,并且建议用户使用 Dart Sass。如果在vue脚手架搭建的项目中需要使用sass,建议初始化时勾选sass配置,自行安装,选择默认的就是dart-sass。

Web 界面开发指南,持续更新

这份文档列出了一些使我们的(Web)界面更好的细节处理方式,这个列表并不是完整全面的,但它会基于经验持续不断更新。其中有些实现可能是偏于主观性的,但大多数适用于所有网站。

软件测试 / 测试开发丨 Web 自动化测试 - 高级定位 CSS

本文为霍格沃兹测试开发学社学员学习笔记分享,文末附原文链接。

前端开发如何更好的避免样式冲突?级联层 (CSS@layer)

本文主要讲述了CSS中的级联层(CSS@layer),讨论了级联层的创建、嵌套、排序和浏览器支持情况。级联层可以用于避免样式冲突,提高代码可读性和可维护性。以及相关的级联知识的深入理解。

https://static001.geekbang.org/infoq/6f/6f5c056ec18d5cfa13f529597d2616e7.gif?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

CSS 小技巧使用 font-variation 让文字起飞

CSS小技巧使用 font-variation 可变字体,我们可以实现更加智能、美观、易读的排版效果,让文字内容更加生动、丰富。

与众不同的夜间开关交互效果

一个包含云朵,星星,太阳,月亮,小飞机,太空熊等元素的夜间模式切换开关效果,如此与众不同的交互设计效果你不来看看吗

https://static001.geekbang.org/infoq/0f/0facb34cb4a2a46749f62e6c731c6f1f.png?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

CSS 小技巧之圆形虚线边框

基于伪元素设置锥形渐变 `repeating-conic-gradient`并配合`-webkit-mask-composite`实现自定义圆形虚线边框的效果。

https://static001.geekbang.org/infoq/13/133582d746371b2e2876f6b8cb66fec2.png?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

dart-sass 与 node-sass 的区别以及使用 dart-sass 可能会出现的问题

如果在vue脚手架搭建的项目中需要使用sass,建议初始化时勾选sass配置,自行安装,选择默认的就是dart-sass。

https://static001.geekbang.org/infoq/05/05a3a52824810e3b89cf6015a0f8f5f8.png?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

一个有趣的图片加载效果

本文介绍了一个有趣的图片加载效果,主要使用了 `image-rendering: pixelated` 配合 `background-position` 产生的过渡加载效果。

https://static001.geekbang.org/infoq/08/08fb47a71c01d63737715295d2c812c7.jpeg?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

canvas- 绘制一个柱状图

最近也是在学习canvas,跟着绘制了一个最基本柱状图,canvas是一个基于HTML5的绘图标准,提供了一系列的API可以用来绘制图形,包括直线、矩形、圆形、文本等等。我介绍如何使用canvas绘制简单的柱状图,并优化技巧,使得代码更加高效

https://static001.geekbang.org/infoq/d2/d29632c213b96854384ac21908157897.jpeg?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

css- 文字充电效果

上年Apple推出了搭载M2芯片的新款MacBook Pro和MacBook Air,得到消息第一时间也是去Apple官网看看介绍,看看他们的产品网页,这次没有什么特别的,但是有个电池续航20小时的文字有一个充电的效果

https://static001.geekbang.org/infoq/93/9390425c540d3717b9d5082389bdca93.jpeg?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

css 实现瀑布流效果

有一种很受图片网站欢迎的版面布局方式,叫做Masonry Layout,翻译为瀑布流效果,这种排版方式的特性就是内容由多个不同高度的方块组成,而版面切割为多个直行,这些方格在每一个直行中一个接一个排列,所以看起来行与行之间会有一些不整齐的感觉

聊聊 CSS 隐藏元素的 10 种实用方法

CSS 隐藏元素的方法你能说出来几种?

https://static001.geekbang.org/infoq/ca/caf3b067d24bf75b12ac2208c8a7c57e.jpeg?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

css 动若脱兔转换视差效果

今天为大家制作一个动若脱兔的转换视差效果,当鼠标在目标上左右移动时除了背景产生的位移视差效果外,里面的兔子也会跟着鼠标的位置来作出不同的动作

https://static001.geekbang.org/infoq/6b/6b7fc5ed516dcbc9962fc015be4a791b.png?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

CSS 文本平衡排版 text-wrap:balance

这是一个很不错且实用的功能,应用到的场景也挺多,但是目前还是在实验阶段,真正可以线上环境使用还需要一定的时间,但是可以提前了解一下发展的趋势。

CSS 架构之 BEM 设计模式

用户头像
肥晨
04-17

其实在日常开发CSS当中,会遇到许多的问题,使用设计模式能够很好的解决。例如在日常开发项目,需要组件化时,组件内部的class样式类管理就非常的杂乱。 大部分公司的命名规则还是只有大小驼峰、使用英文等这些基础的命名规则。经常会自己都忘了自己命名的cs

https://static001.geekbang.org/infoq/02/022952c4013bf303df399f37fc87061c.jpeg?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

Chrome 浏览器的更新导致 jQuery 反复发版,只因 :has() 这个伪类

最近 jQuery 似乎又“回光返照”了一下,窜稀式地连更了几个小版本。我仔细看了看,并没有新功能出现,不过还挺有意思的,也让我学习到了新的东西。简单来说,这几个版本的更新主要与 Chrome 引入新选择器产生的缺陷有关。那么谷歌浏览器是如何导致 jQuery 产

css 过去及未来展望—分析 css 演进及排版布局的考量

读初二的时候,学校有了计算机,也简单地介绍了下网页,不过那是的html 都是table,也没有去细看。到了高中,qq空间有个html模式,为了让文章好看点。也浅尝辄止地学了下css

https://static001.geekbang.org/infoq/6e/6e7f441d6b325b7d18c72e172fa1189c.jpeg?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

前端面试实录 CSS 篇(最近一周)

系列首发于公众号『前端进阶圈』 ,更多精彩内容敬请关注公众号最新消息。

避免使用 CSS @import 影响页面加载速度

CSS`@import`可以用来加载其他CSS样式的便捷方式,但是使用它也会使网站的资源呈现变得更慢,导致网站呈现的时间更长

https://static001.geekbang.org/infoq/60/60b394a5f7c08b3a633394a7301a6f21.png?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

VisBug:助力前端开发的浏览器插件

VisBug支持诸如文本编辑、颜色调整、元素选择、边距和填充等常见的网页设计和开发任务。通过这个插件,开发人员可以更快速地创建和修改网页,提高工作效率。

https://static001.geekbang.org/infoq/5f/5f8d0947da9732fdd62cbf8838e8e43a.png?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

Three.js 进阶之旅:物理效果 -3D 乒乓球小游戏 🏓

本文将使用技术栈 React Three Fiber 和 Cannon.js 来实现一个具有物理特性的乒乓球小游戏,通过本文的阅读,你将学习到的知识点包括:了解什么是 React Three Fiber 及它的相关生态、使用 React Three Fiber 搭建基础三维场景...

https://static001.geekbang.org/infoq/85/854757f5b1f25f665b1d657077b11975.png?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

Three.js 进阶之旅:物理效果 - 碰撞和声音 💥

本文内容主要汇总如何在 Three.js 创建的 3D 世界中添加物理效果,使其更加真实。所谓物理效果指的是对象会有重力,它们可以相互碰撞,施加力之后可以移动,而且通过铰链和滑块还可以在移动过程中在对象上施加约束。

https://static001.geekbang.org/infoq/93/938304dba5dbae056328af0bd4727e81.png?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

一个炫酷的头像悬停效果

你知道当一个人的头像从一个圆圈或洞里伸出来时的那种效果吗?本文将使用一种很简洁的方式实现该悬停效果,只用了一个img元素和不到20行的CSS技巧实现一个炫酷的头像悬停效果

https://static001.geekbang.org/infoq/30/3088c1c5947ff4e3e71679e62d961ea8.jpeg?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

NutUI 4.0 正式发布!

技术日异月新、发展创新、持续的迭代已成为常态。NutUI 虽经过 v1.0、v2.0、v3.0 三次技术蜕变,仍面临很多兼容、破坏性调整的需求。

https://static001.geekbang.org/infoq/10/10b0e8ec3a5015309dbd2282496bc3b7.jpeg?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

复习前端:CSS

层叠样式表 (Cascading Style Sheets,缩写为 CSS),是一种样式表语言,用来描述 HTML 或 XML(包括如 SVG、MathML、XHTML 之类的 XML 分支语言)文档的呈现。CSS 描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。

https://static001.geekbang.org/infoq/23/230f275d884e99623f3224fdb613cfee.jpeg?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

简述 styled-components 性能

styled-components 是一个流行的 React 库,一个 CSS in JS 样式框架,它使用 JavaScript 中的标记模板字面量和 CSS 的强大功能来提供一个平台,允许编写实际的 CSS 来设置 React 组件的样式,同时兼顾开发人员体验和性能。

https://static001.geekbang.org/infoq/57/57fdef2ea94d52288ffe46a6e3c9dcda.png?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

那些炫酷的 CSS 文字效果之诗词《兔》

不知不觉已经迈入2023年了,本次分享10种不同的有关文字方面的特效,让我们一边欣赏有关《兔》相关的古诗词的同时一边走进CSS的世界。

https://static001.geekbang.org/infoq/2a/2a6da9c2c7e878825ec591891de94276.jpeg?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

13 个前端可能用得上的 CSS 技巧

修改输入占位符样式、多行文本溢出、隐藏滚动条、修改光标颜色、水平和垂直居中。多么熟悉的场景!前端开发者几乎每天都会和它们打交道,本文收集 13 个CSS技巧,一起来来温故一下吧。

CSS_CSS技术文章_InfoQ写作社区