每个 UI 开发人员都应该知道的聪明的 CSS 行话-css教程-PHP中文网

每个 UI 开发人员都应该知道的聪明的 CSS 行话

王林

发布： 2024-08-23 08:33:23

转载

270人浏览过

每个 ui 开发人员都应该知道的聪明的 css 行话

简介：简洁 css 的力量

作为 ui 开发人员，您总是在寻找简化代码并创建更高效、更引人注目的设计的方法。 css（层叠样式表）是您的武器库中的基本工具，掌握它可以显着提高您的生产力和工作质量。在这篇博文中，我们将探索 15 个独特的 css 行话，它们可以彻底改变您设计网页的方法。

这些紧凑的 css 技巧不仅可以节省时间，而且还展示了 css 的多功能性和强大功能。无论您是经验丰富的专业人士还是刚刚开始 ui 开发之旅，这些俏皮话都将为您的技能组合增添价值，并帮助您用更少的代码创建更精美、响应更快的设计。

让我们深入研究这些 css gem，看看它们如何改变您的开发过程！

立即学习“前端免费学习笔记（深入）”；

1. 完美的居中技术

网页设计中最常见的挑战之一是水平和垂直居中元素。这是一个 css 单行代码，可以轻松实现这一目标：

.center {
  display: grid; place-items: center;
}

登录后复制

这个简单而强大的 css 技巧使用 css 网格将任何子元素置于其父容器中。 display: grid 属性创建一个网格容器，而 place-items: center 将网格项（在本例中为子元素）水平和垂直对齐在中心。

此方法适用于容器内的单个元素和多个元素。这是一个多功能的解决方案，可以让您免于为不同场景编写复杂的居中代码。

2. 响应式文本大小调整变得简单

创建响应式排版可能是一项挑战，但是这个 css 一行代码让它变得轻而易举：

body {
  font-size: calc(1rem + 0.5vw);
}

登录后复制

对 calc() 函数的巧妙使用将基本字体大小 (1rem) 与视口宽度相关值 (0.5vw) 结合起来。随着视口宽度的变化，字体大小也会相应调整，确保您的文本在不同的屏幕尺寸上仍然可读。

这种方法的美妙之处在于它的简单性和灵活性。您可以通过修改计算中的值轻松调整基础尺寸和变化率。

3. 自定义滚动条样式

自定义滚动条可以为您的网站设计添加独特的风格。这是一个单行代码，允许您在基于 webkit 的浏览器中设置滚动条的样式：

::-webkit-scrollbar { width: 10px; background: #f1f1f1; border-radius: 10px; }

登录后复制

此 css 技巧针对的是 webkit 浏览器（如 chrome 和 safari）中的滚动条伪元素。您可以调整宽度、背景颜色和边框半径以符合您的设计偏好。虽然这不适用于所有浏览器，但对于支持它的浏览器来说这是一个很好的增强。

4. 创建截断文本效果

处理动态内容时，经常需要截断超过一定长度的文本。这个 css 单行代码为溢出的文本创建了省略号效果：

.truncate {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

登录后复制

这种属性组合确保文本保持在单行上（white-space：nowrap），隐藏任何溢出（overflow：hidden），并在截断文本的末尾添加省略号（...）（text-溢出：省略号）。

5.整个页面平滑滚动

实现平滑滚动可以极大地增强网站的用户体验。这是一个简单的 css 单行代码，可以实现整个页面的平滑滚动：

html {
  scroll-behavior: smooth;
}

登录后复制

此属性可确保当用户单击页面中的锚链接时，浏览器平滑滚动到目标部分，而不是突然跳转。这是一个小小的改变，可以显着提高您网站的感知质量。

6. 创建响应式正方形

创建保持纵横比的完美方形元素可能很棘手，尤其是在响应式布局中。这是一个巧妙的 css 技巧来实现这一点：

.square {
  width: 50%; aspect-ratio: 1;
}

登录后复制

纵横比属性确保元素的高度始终与其宽度相匹配，从而创建一个完美的正方形。您可以根据需要调整宽度百分比，并且元素在不同的屏幕尺寸上都会保持其正方形形状。

7. 自定义文本选择样式

自定义所选文本的外观可以为您的网站添加独特的风格。这是一个 css 语句来实现这一点：

::selection { background: #ffb7b7; color: #000000; }

登录后复制

这个 css 技巧允许您更改网站上所选文本的背景颜色和文本颜色。您可以调整颜色以匹配您网站的配色方案，创造有凝聚力的品牌体验。

8. 轻松切换深色模式

为您的网站实施深色模式可以改善用户体验，尤其是对于夜间浏览的用户。这是一个简单的基于 css 变量的方法：

body {
  --text-color: #333; --bg-color: #fff;
}
@media (prefers-color-scheme: dark) {
  body { --text-color: #fff; --bg-color: #333; }
}

登录后复制

这个css技巧使用css变量来定义颜色和媒体查询来检测用户的配色方案偏好。然后，您可以在整个 css 中使用这些变量来轻松在浅色和深色模式之间切换。

9. 创建磨砂玻璃效果

磨砂玻璃效果，也称为玻璃形态，在ui设计中越来越流行。这是一个 css 语句来创建这种效果：

.frosted-glass {
  backdrop-filter: blur(10px); background-color: rgba(255, 255, 255, 0.5);
}

登录后复制

背景滤镜和半透明背景颜色的组合创造了美丽的磨砂玻璃效果。您可以调整模糊量和背景不透明度以获得所需的外观。

10.完美的圆角

为不同尺寸的元素创建完美的圆角可能具有挑战性。这是一个 css 技巧，可确保您的元素始终具有完美的圆角：

.round {
  border-radius: 9999px;
}

登录后复制

通过为 border-radius 设置一个非常大的值，可以确保角始终尽可能圆，无论元素的大小如何。这对于按钮、徽章或任何您想要一致圆角的元素特别有用。

11.简单的 css 网格布局

使用 css grid 创建复杂的布局并不一定很复杂。这是设置响应式网格的一行：

.grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

登录后复制

这个 css 技巧创建了一个网格，其中的列会自动调整以适应可用空间。 minmax() 函数确保列的宽度至少为 200 像素，但可以增长以填充可用空间。这将使用最少的代码创建响应式布局。

12.流体版式

使用 css 单行代码可以创建在不同屏幕尺寸上平滑缩放的版式：

h1 {
  font-size: clamp(2rem, 5vw, 5rem);
}

登录后复制

clamp() 函数允许您设置文本的最小尺寸 (2rem)、首选尺寸 (5vw) 和最大尺寸 (5rem)。这可确保您的排版在所有设备尺寸上保持可读性和视觉吸引力。

13. 使用 css 创建三角形

有时您需要为 ui 元素创建简单的形状，例如三角形。这是一个用于创建三角形的 css 单行代码：

.triangle {
  width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid #333;
}

登录后复制

这个 css 技巧使用边框属性来创建三角形。通过调整边框宽度和颜色，您可以创建指向不同方向的三角形。

14. 全出血布局

创建一个全出血布局，其中一些元素延伸到视口的边缘，而主要内容保持居中，可以使用以下 css 来实现：

.full-bleed {
  width: 100vw; margin-left: calc(50% - 50vw);
}

登录后复制

这个 css 技巧计算将元素扩展到视口的整个宽度所需的负边距，而不管父容器的宽度如何。它对于在受限布局内创建沉浸式背景部分或全角图像特别有用。

15.动画渐变背景

添加微妙的动画渐变背景可以为您的设计带来活力。这是一个 css 语句来创建这种效果：

.animated-gradient {
  background: linear-gradient(270deg, #ff7e5f, #feb47b); background-size: 400% 400%; animation: gradient 15s ease infinite;
}
@keyframes gradient { 0% {background-position: 0% 50%} 50% {background-position: 100% 50%} 100% {background-position: 0% 50%} }

This CSS trick creates a gradient background that smoothly animates between colors. You can adjust the colors, animation duration, and easing function to suit your design needs.

登录后复制