UI 开发人员的 CSS 技巧

简介：提升您的 css 游戏水平

嘿，ui 开发人员朋友们！您准备好将您的 css 技能提升到新的水平了吗？无论您是经验丰富的专业人士还是刚刚起步，我们都曾遇到过样式表似乎有自己的想法的时刻。但不要害怕！我有一些漂亮的 css 技巧，它们一定会让您的生活更轻松，让您的设计更令人印象深刻。

在这篇博文中，我们将探索 10 个很棒的 css 技巧，它们将帮助您解决常见的设计挑战，改进您的工作流程，并为您的项目增添一些额外的魅力。这些不仅仅是一些老技巧——它们实用、强大，并且非常适合像我们这样想要创建令人惊叹的 web 体验的 ui 开发人员。

所以，拿起你最喜欢的饮料，放松一下，让我们深入 css hack 的世界！

1. css 变量的魔力

什么是 css 变量？

我们的 css hack 列表中的第一个是 css 变量的使用，也称为 css 自定义属性。如果您还没有开始使用这些，那么您就大饱口福了！

css 变量允许您存储特定值并在整个样式表中重复使用它们。当您使用颜色、字体或您发现自己经常重复的任何值时，这尤其有用。

如何使用 css 变量

以下是如何设置和使用 css 变量的快速示例：

:root {
  --main-color: #3498db;
  --secondary-color: #2ecc71;
  --font-size: 16px;
}

.button {
  background-color: var(--main-color);
  font-size: var(--font-size);
}

.header {
  color: var(--secondary-color);
}

好处

• 易于更新：在一处更改值，然后随处更新。
• 提高可读性：使您的 css 更加语义化且更易于理解。
• 支持主题：非常适合创建明暗模式或多种配色方案。

2. ::before 和 ::after 伪元素的威力

理解伪元素

我们的 css 黑客工具库中的下一个是 ::before 和 ::after 伪元素。这些小宝石允许您向元素添加内容，而无需添加额外的 html 标记。

实际用途

您可以使用这些伪元素来实现各种炫酷的效果：

• 添加装饰元素
• 创建类似工具提示的信息气泡
• 动态生成内容
• 创建复杂的布局

示例：创建报价块

这是一个简单的示例，说明如何使用 ::before 和 ::after 创建时尚的引用块：

blockquote {
  position: relative;
  padding: 20px;
  background: #f9f9f9;
}

blockquote::before,
blockquote::after {
  content: '"';
  font-size: 50px;
  position: absolute;
  color: #ccc;
}

blockquote::before {
  top: 0;
  left: 10px;
}

blockquote::after {
  bottom: -20px;
  right: 10px;
}

3. flexbox：你的布局最好的朋友

flexbox 的灵活性

flexbox 并不完全是一个 hack，但它是一个如此强大的工具，值得在此列表中占有一席之地。如果您尚未使用 flexbox，那么您就错过了在 css 中创建布局的最灵活、最有效的方法之一。

关键 flexbox 属性

• 显示：柔性； - 将元素变成弹性容器
• flex-direction - 控制弹性项目的方向
• justify-content - 沿主轴对齐项目
• align-items - 沿横轴对齐项目

简单的 flexbox 布局

以下是如何使用 flexbox 创建响应式布局的快速示例：

.container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.item {
  flex: 0 1 calc(33.333% - 20px);
  margin: 10px;
}

@media (max-width: 768px) {
  .item {
    flex: 0 1 calc(50% - 20px);
  }
}

@media (max-width: 480px) {
  .item {
    flex: 0 1 100%;
  }
}

这将创建一个灵活的网格，随着屏幕尺寸的减小，网格可以从三列调整为两列，然后调整为一列。

4. css 网格革命

网格与 flexbox

虽然 flexbox 非常适合一维布局，但 css grid 通过二维布局将其提升到了一个新的水平。它非常适合轻松创建复杂的页面结构。

基本网格设置

以下是设置简单网格的方法：

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
}

.grid-item {
  background-color: #f0f0f0;
  padding: 20px;
  text-align: center;
}

先进的网格技术

您可以通过使用命名网格区域来发挥网格的真正创意：

.grid-container {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
  grid-gap: 20px;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

这将创建一个带有页眉、侧边栏、主要内容区域和页脚的布局，所有这些都只需几行 css！

5. 掌握 css 过渡

平滑移动与过渡

css 过渡允许您在给定的持续时间内平滑地更改属性值。它们是无需 javascript 即可向 ui 元素添加微妙动画的好方法。

基本转换语法

转换的基本语法是：

.element {
  transition: property duration timing-function delay;
}

实例：按钮悬停效果

让我们创建一个简单的按钮，悬停时颜色会平滑变化：

.button {
  background-color: #3498db;
  color: white;
  padding: 10px 20px;
  border: none;
  transition: background-color 0.3s ease;
}

.button:hover {
  background-color: #2980b9;
}

这将创建一个按钮，当您将鼠标悬停在其上方时，该按钮会平滑地改变颜色，从而为用户提供良好的视觉反馈。

6. css 形状的魔力

打破常规

css 形状允许您创建非矩形布局，这可以为您的设计添加独特且有趣的外观。

使用外部形状

shape-outside 属性定义了内联内容应环绕的形状。这是一个例子：

.circle-shape {
  width: 200px;
  height: 200px;
  float: left;
  shape-outside: circle(50%);
  clip-path: circle(50%);
  background: #3498db;
}

这会创建一个文本将环绕的圆形形状，从而创建一个视觉上有趣的布局。

将形状与图像相结合

您还可以将 shape-outside 与图像一起使用来创建更复杂的形状：

.image-shape {
  float: left;
  shape-outside: url('path-to-your-image.png');
}

这使得文本可以围绕图像的轮廓流动，从而创建文本和视觉效果的无缝集成。

7. css 计数器的威力

使用 css 自动编号

css 计数器就像 css 维护的变量，其值可以通过 css 规则递增。它们非常适合创建编号列表或部分，无需额外的标记。

设置计数器

以下是设置和使用计数器的方法：

body {
  counter-reset: section;
}

h2::before {
  counter-increment: section;
  content: "section " counter(section) ": ";
}

这将自动使用“section 1:”、“section 2:”等对您的 h2 元素进行编号。

嵌套计数器

您甚至可以为子部分创建嵌套计数器：

body {
  counter-reset: section;
}

h2 {
  counter-reset: subsection;
}

h2::before {
  counter-increment: section;
  content: "section " counter(section) ": ";
}

h3::before {
  counter-increment: subsection;
  content: counter(section) "." counter(subsection) " ";
}

这将为您的章节和小节创建一个编号系统，例如“1.1”、“1.2”、“2.1”等。

8. 使用 css 自定义滚动条

设置滚动条样式

您知道可以使用 css 设置滚动条样式吗？虽然这并不适用于所有浏览器，但它可以在支持的浏览器中为您的设计增添一抹亮色。

webkit 滚动条样式

以下是如何在 webkit 浏览器中设置滚动条样式的示例：

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #888;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

这将创建一个带有灰色拇指的自定义滚动条，鼠标悬停时会变暗。

跨浏览器滚动条样式

要获得更跨浏览器兼容的解决方案，您可以使用新的滚动条颜色和滚动条宽度属性：

* {
  scrollbar-width: thin;
  scrollbar-color: #888 #f1f1f1;
}

这会在支持这些属性的浏览器中设置一个带有灰色滑块和浅灰色轨道的细滚动条。

9.纯 css 工具提示

无需 javascript！

工具提示是提供附加信息而不会使用户界面混乱的好方法。你猜怎么着？您只需使用 css 即可创建它们！

基本 css 工具提示

这是一个简单的纯 css 工具提示：

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

要使用它，您可以像这样构建 html：

<div class="tooltip">hover over me
  <span class="tooltiptext">tooltip text</span>
</div>

这会创建一个工具提示，当您将鼠标悬停在文本上时，会出现一个工具提示，并具有平滑的淡入效果。

10.纯 css 手风琴

无需 javascript 即可扩展内容

我们最终的 css hack 是一个漂亮的手风琴效果，不需要任何 javascript。这对于常见问题解答部分或您想要展开和折叠的任何内容非常有用。

仅 css 的手风琴

以下是创建纯 css 手风琴的方法：

.accordion {
  max-width: 500px;
  margin: 0 auto;
}

.accordion-item {
  border-bottom: 1px solid #ddd;
}

.accordion-header {
  display: block;
  padding: 15px;
  background-color: #f4f4f4;
  color: #333;
  text-decoration: none;
  position: relative;
  cursor: pointer;
}

.accordion-header::after {
  content: '+';
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translatey(-50%);
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.accordion-item input[type="checkbox"] {
  display: none;
}

.accordion-item input[type="checkbox"]:checked ~ .accordion-content {
  max-height: 1000px;
}

.accordion-item input[type="checkbox"]:checked ~ .accordion-header::after {
  content: '-';
}

这是 html 结构：

<div class="accordion">
  <div class="accordion-item">
    <input type="checkbox" id="item1">
    <label class="accordion-header" for="item1">Section 1</label>
    <div class="accordion-content">
      <p>Content for section 1...</p>
    </div>
  </div>
  <!-- Repeat for more accordion items -->
</div>

这将创建一个可扩展的手风琴，纯粹使用 css，无需 javascript！

结论：掌握 css hack

好了，伙计们！我们已经介绍了 10 个很棒的 css 技巧，它们可以真正提升您的 ui 开发水平。从 css 变量的灵活性到伪元素的魔力，从 flexbox 和 grid 等布局大师到工具提示和手风琴等纯粹 css 驱动的交互元素，这些技术为创建引人入胜且高效的用户界面提供了丰富的可能性。

以上就是UI 开发人员的 CSS 技巧的详细内容，更多请关注硕下网其它相关文章！