前端开发人员的 10 个有用的 CSS 技巧

已发表: 2022-03-08

简介 »总共有大约 200 个 CSS 属性，具体取决于您查看的位置。而且，其中许多属性以自己独特的方式相互影响。跟踪一切几乎是不可能的。所以，这篇文章是关于展示对开发人员和设计师都有用的漂亮的 CSS 技巧。

用 CSS 破解 WordPress
如何使用这些 CSS 技巧
文字的打字效果
透明图像的阴影
设置自定义光标
使用 attr() 的简单工具提示
纯 CSS 中的清单
使用 :is() 和 :where() 样式化元素
使用关键帧的手风琴下拉菜单
悬停效果侧边栏
使用首字母的首字母大写
使用 ::before 在按钮前添加图标

CSS 现在处于相当好的状态。引入的新特性有助于巩固 CSS 作为真正的脚本语言。我们知道已经制定了一份提案草案来引入@when和@else语句。虽然现在不可用，但它确实为未来使用 CSS 编写条件逻辑的潜力开创了先例。

Michelle Barker 为 Smashing Magazine 写了一篇文章，讨论了即将到来的 CSS 特性。如果您还没有时间赶上，请检查一下！

根据我的经验，除非您经常检查更新，否则很容易忽略现有功能。 is()和where()以及attr()等属性已经存在了一段时间，但很容易被现代框架的潜力所掩盖。

用 CSS 破解 WordPress

我对这篇文章的灵感直接来自我每天使用 WordPress 的经验。我已经使用 WordPress 超过 10 年了。而那段时间，我一定写了10000+行CSS来定制各种主题设计。

但是，更具体地说，我使用 CSS 来克服对插件的需求。 WordPress 的工作方式是几乎所有东西都需要使用插件。当然，除非你懂一点 CSS。想要显示工具提示？获取插件。想要为按钮添加图标？获取插件。

你明白了。

如何使用这些 CSS 技巧

唯一的要求是您了解一点 CSS 和 HTML。我提供了示例模板，您可以将其直接导入到您的项目中。

您可以使用此模板并将其另存为index.html ：

 <!DOCTYPE HTML> <html> <head> <title>CSS Tricks & Tips</title> <meta charset="UTF-8" /> <style> <!-- put the CSS code here --> </style> </head> <body> <!-- put the HTML code here --> </body> </html>

文字的打字效果

网页设计每分钟都变得越来越有创意。在 CSS 动画功能的帮助下，您可以让您的网页充满活力。在本例中，我们使用animation和@keyframes属性来实现打字机效果。

具体来说，对于这个演示，我们实现了steps()属性来分割我们的文本动画。首先，您必须指定steps()的数量，在我们的例子中是我们希望动画的文本的字符长度。

其次，我们使用@keyframes来声明动画何时开始。例如，如果您在“Typing effect for text”之后写了另一个词，除非您更改 CSS 片段中的steps()数，否则动画将不起作用。

也就是说，这种效果并不是特别新。然而，尽管使用 CSS 可以实现相同的结果，但大多数开发人员都涌向 JavaScript 库。

HTML

 <div class="typing"> <div class="typing-effect"> Typing effect for text </div> </div>

CSS

 .typing { height: 80vh; display: flex; align-items: center; justify-content: center; } .typing-effect { width: 22ch; animation: typing 2s steps(22), effect .5s step-end infinite alternate; white-space: nowrap; overflow: hidden; border-right: 3px solid; font-family: monospace; font-size: 2em; } @keyframes typing { from { width: 0; } } @keyframes effect { 50% { border-color: transparent; } }

透明图像的阴影

你有没有尝试过为透明图像添加box-shadow只是为了让它看起来像你添加了一个边框？我想我们都去过那里。为透明图像添加阴影效果的解决方案是使用drop-shadow 。

它的工作方式是drop-shadow属性遵循给定图像的 Alpha 通道。因此，阴影基于图像内部的形状，而不是显示在图像外部。

HTML

 <div class="transparent-shadow"> <div class="margin-right"> <div class="margin-bottom align-center"> box-shadow </div> <img class="box-shadow" src="https://stackdiary.com/wp-content/uploads/2022/02/logo.png" alt="box-shadow example (transparent)"> </div> <div> <div class="margin-bottom align-center"> drop-shadow </div> <img class="drop-shadow" src="https://stackdiary.com/wp-content/uploads/2022/02/logo.png" alt="drop-shadow example (transparent)"> </div> </div>

CSS

 .transparent-shadow { height: 80vh; display: flex; align-items: center; justify-content: center; } .margin-right { margin-right: 2em; } .margin-bottom { margin-bottom: 1em; } .align-center { text-align: center; } .box-shadow { box-shadow: 2px 4px 8px #3723a1; } .drop-shadow { filter: drop-shadow(2px 4px 8px #3723a1); }

设置自定义光标

您不太可能需要强迫您的访问者进入一个独特的光标。至少，不是出于一般用户体验目的。不过，关于cursor属性需要注意的一件事是它可以让您显示图像。这相当于以照片格式显示工具提示。

一些用例包括能够比较两张不同的照片，而无需在视口中渲染这些照片。例如，光标属性可用于在您的设计中节省空间。由于您可以将自定义光标锁定到特定的 div 元素，因此它不会干扰它之外的元素。

HTML

 <div class="custom-cursor"> <div class="card"> Default </div> <div class="card card-image-cursor"> Image </div> <div class="card card-emoji-cursor"> Emoji </div> </div>

CSS

 .custom-cursor { display: flex; height: 80vh; align-items: center; justify-content: center; background: #f3f3f3; padding: 0 10px; } .card { width: 200px; height: 200px;display: flex; align-items: center; justify-content: center; background-color: #D29A5A; margin-right: 10px;color: #fff; font-size: 1.4em; text-align: center; } .card-image-cursor { background-color: #D11A5A; cursor: url(https://stackdiary.com/tools/assets/img/tools/html-beautifier.svg), auto; } .card-emoji-cursor { background-color: #D29B22; cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewport='0 0 100 100' style='fill:black;font-size:24px;'><text y='50%'></text></svg>"), auto; }

使用attr()的简单工具提示

attr()属性是我最近最喜欢的发现之一。我想在我的 WordPress 博客中添加一个工具提示功能，但这样做需要使用一个插件，这会给我的网站添加不必要的膨胀。值得庆幸的是，这可以使用attr()来规避。

它的工作方式很简单，让我解释一下下面的代码：

我们使用tooltip class来指定哪个元素将成为工具提示。你可以随意设置它的样式，但为了演示，我们使用dotted border-bottom 。
接下来，我们创建一个:before伪元素，它将包含一个内容 attr() 函数及其规范。在这种情况下，我们称之为工具提示数据。
最后，我们创建一个 :hover 伪类，当有人将鼠标悬停在工具提示本身上时，它将opacity to 1 。

此外，您必须包含自定义样式。根据您的工具提示数据，您可能需要调整宽度以及边距。一旦你完成了所有设置，你就可以在设计的任何部分重用 tooltip-data attr() 类。

HTML

 <h1> HTML/CSS tooltip </h1> <p> Hover <span class="tooltip" tooltip-data="Tooltip Content">Here</span> to see the tooltip. </p> <p> You can also hover <span class="tooltip" tooltip-data="This is another Tooltip Content">here</span> to see another example. </p>

CSS

 .tooltip { position: relative; border-bottom: 1px dotted black; } .tooltip:before { content: attr(tooltip-data); position: absolute; width: 250px; background-color: #efba93; color: #fff; text-align: center; padding: 15px; line-height: 1.1; border-radius: 5px; z-index: 1; opacity: 0; transition: opacity .5s; bottom: 125%; left: 50%; margin-left: -60px; font-size: 0.70em; visibility: hidden; } .tooltip:after { content: ""; position: absolute; bottom: 75%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; opacity: 0; transition: opacity .5s; border-color: #000 transparent transparent transparent; visibility: hidden; } .tooltip:hover:before, .tooltip:hover:after { opacity: 1; visibility: visible; }

纯 CSS 中的清单

正如我在文章开头提到的，CSS 正在稳步成熟。这个动态清单的演示就是一个很好的例子。

它的工作方式是我们将checkbox输入类型与:checked伪类一起使用。并在:checked规范返回 true 时使用transform属性更改状态。

您可以使用这种方法实现各种目标。例如，当用户单击特定复选框时切换隐藏内容。它适用于单选和复选框等输入类型，但也可以应用于<option>和<select>元素。

HTML

 <div class="checklist"> <h2>Item Checklist with CSS</h2> <label> <input type="checkbox" name="" id="" /> <i></i> <span>Item #1</span> </label> <label> <input type="checkbox" name="" id="" /> <i></i> <span>Item #2</span> </label> <label> <input type="checkbox" name="" id="" /> <i></i> <span>Item #3</span> </label> </div>

CSS

 .checklist { padding: 50px; position: relative; background: #043b3e; border-top: 50px solid #03a2f4; } .checklist h2 { color: #f3f3f3; font-size: 25px; padding: 10px 0; margin-left: 10px; display: inline-block; border-bottom: 4px solid #f3f3f3; } .checklist label { position: relative; display: block; margin: 40px 0; color: #fff; font-size: 24px; cursor: pointer; } .checklist input[type="checkbox"] { -webkit-appearance: none; } .checklist i { position: absolute; top: 2px; display: inline-block; width: 25px; height: 25px; border: 2px solid #fff; } .checklist input[type="checkbox"]:checked ~ i { top: 1px; height: 15px; width: 25px; border-top: none; border-right: none; transform: rotate(-45deg); } .checklist span { position: relative; left: 40px; transition: 0.5s; } .checklist span:before { content: ''; position: absolute; top: 50%; left: 0; width: 100%; height: 1px; background: #fff; transform: translateY(-50%) scaleX(0); transform-origin: left; transition: transform 0.5s; } .checklist input[type="checkbox"]:checked ~ span:before { transform: translateY(-50%) scaleX(1); transform-origin: right; transition: transform 0.5s; } .checklist input[type="checkbox"]:checked ~ span { color: #154e6b; }

使用:is()和:where()样式化元素

现代 CSS 框架的工作方式之一是使用conditional logic selectors 。换句话说， :is()和:where()属性可用于同时设置多种设计元素的样式。但是，更重要的是，您可以使用这些属性来查询您必须单独指定的元素。

下面的 CSS 片段包括各种示例。我添加了注释来解释每个查询的作用。您可以在 MDN 上了解更多信息：:is() & :where()。

CSS

 /* this query will select the b element within a heading and change its color. */ :where(h2,h3,h4) > b { color: yellow; } /* here we query the paragraph element for a footer that is nested inside an article. this lets us select specific parts of the design and style them accordingly. */ article :is(footer) > p { color: black; } /* want to create various styles simultaneously? the :where property can be used to select specific elements within a dynamic theme style. you can further nest the elements by specify (button,a) for example. */ .dark-button-style :where(button) { background-color: red; } /* the above query works for selecting multiple styles at once, too */ :is(.dark-button-style, .red-button-style) :where(button) { color: red; } /* here we select the h2 element which is located inside a specific div element */ :is(h2):where(.content-title) { text-transform: uppercase; } /* we can further improve the query by applying the changes to a specific subset */ .title-area:is(h2:is(.content-title)) { font-weight: 900; }

使用关键帧的手风琴下拉菜单

JavaScript 库（jQuery、Cash 等）的问题在于，即使是小型函数，您通常也必须加载整个库。幸运的是，到目前为止，我们看到的许多 CSS 技巧都规避了这一要求。就像这个手风琴片段的例子一样。

如果您仔细了解当前的网页设计趋势，很快就会在登录页面上找到手风琴。这是一种压缩内容的简单方法，否则会占用设计空间。常见问题解答、产品功能、使用技巧——很多信息类型都可以放在手风琴中。这个片段展示了它在纯 CSS 中的实现。

HTML

 <main> <details open> <summary>Accordion Tab #1</summary> <div class="tab-content"> <p>your text goes here</p> </div> </details> <details> <summary>Accordion Tab #2</summary> <div class="tab-content"> <p>your text goes here</p> </div> </details> <details> <summary>Accordion Tab #3</summary> <div class="tab-content"> <p>your text goes here</p> </div> </details> </main>

CSS

 /* .tab-content can be styled as you like */ main { max-width: 400px; margin: 0 auto; } p { text-align: justify; font-family: monospace; font-size: 13px; } summary { font-size: 1rem; font-weight: 600; background-color: #f3f3f3; color: #000; padding: 1rem; margin-bottom: 1rem; outline: none; border-radius: 0.25rem; cursor: pointer; position: relative; } details[open] summary ~ * { animation: sweep .5s ease-in-out; } @keyframes sweep { 0% {opacity: 0; margin-top: -10px} 100% {opacity: 1; margin-top: 0px} } details > summary::after { position: absolute; content: "+"; right: 20px; } details[open] > summary::after { position: absolute; content: "-"; right: 20px; } details > summary::-webkit-details-marker { display: none; }

悬停效果侧边栏

是否可以使用 CSS 实现动态悬停效果侧边栏？绝对地。再一次，这在很大程度上是可能的，这要归功于像transform和:hover这样的属性。

至于兼容性，我在各种移动配置上进行了尝试，它似乎工作得很好。不过，它在桌面上可能会更好，因为移动屏幕会让人感觉局促。

在实践中，这种方法应该适用于position: sticky; 创建粘性侧边栏效果。

HTML

 <div class="css-dynamic-sidebar"> <nav> <a class="" href="#">Menu #1</a> <a class="" href="#">Menu #2</a> <a class="" href="#">Menu #3</a> </nav> <div class="site-content"> <p>Hover over the sidebar</p> <p>Also work with Tab selector (for accessibility)</p> </div> </div>

CSS

 .css-dynamic-sidebar { overflow: hidden; position: relative; height: 15em; max-width: 15em; margin: auto; } .site-content { margin: auto; } nav { display: flex; flex-direction: column; position: absolute; right: 100%; padding: 1em; background-color: #f3f3f3; transform: translateX(1em); transition: 0.2s transform; } nav:hover, nav:focus-within { transform: translateX(100%); } a { white-space: pre; color: black; } p { font-size: 2em; font-family: monospace; text-align: center; }

使用首字母的首字母大写

在 CSS 中，可以选择某些first-of-type元素。并且，在本例中，我们以::first-letter伪类为目标来创建首字下沉效果。这个类的好处是它让我们可以自由地为我们喜欢的字母设计样式。因此，您可以调整 dropcap 的外观以匹配您的设计。

说到这个属性，你可以用它来做很多事情。只要某个元素第一次出现在页面上，就可以使用first-of-type单独设置它的样式。但是，如下面的代码片段所示——您也可以使用它来定位多个元素，尽管它们之前已经出现过。

CSS

 /* here we target the .content-section wrapper and select the p element. then append first-of-type and target first-letter specifically. you can then reuse the same option in other parts of your design by changing the wrapper variable */ .content-section p:first-of-type::first-letter { color: #f3f3f3; float: left; font-size: 4rem; line-height: 4vw; padding-right: 8px; /* border: 0.25em double; */ } /* you can also add custom properties like border to create a creative dropcap effect, ideal for book presentations, etc,. */

您还可以尝试使用 line-height 属性来正确地将 dropcap 与您的容器对齐。

使用 ::before 在按钮前添加图标

我创建此博客的目标之一是尝试在显示内容的方式上更具创意。而且，因为我写清单和各种综述，我想确保它们具有个人风格。我不是第一个或最后一个创建这样的博客的人，但我认为自定义设计元素可以走很长的路。

而且，在这种情况下，每当我链接到外部资源时，我都会使用添加了自定义样式的按钮。具体来说，带有添加图标的按钮。您可以通过简单的 Google 搜索找到大量“按钮生成器”，但我最感兴趣的是拥有一个可以随时重复使用的通用解决方案。

因此，为了实现我的目标，我为特定按钮创建了一个自定义:before类。澄清一下， content:"\0000a0"; 在此代码段中，为 转义了 Unicode。 .

您可以通过更改宽度和高度属性来调整图标大小，以反映您尝试设置样式的按钮大小。

HTML

 <div class="card"> <div class="card-body"> <a href="" target="_blank" class="wp-block-button btn btn-web btn-primary" rel="noopener">Website</a> <a href="" target="_blank" class="wp-block-button btn btn-docu btn-primary" rel="noopener">Documentation</a> <a href="" target="_blank" class="wp-block-button btn btn-gh btn-primary" rel="noopener">GitHub</a> </div> </div>

CSS

 /* select the global button design and then query the specific button class for which you wish to use the custom icon or image */ .btn-primary .btn-docu:before { content:"\0000a0"; display:inline-flex; height:24px; width:24px; line-height:24px; margin:0px 10px 0px 0px; position:relative; top:0px; left:0px; background:url(https://stackdiary.com/docu.svg) no-repeat left center transparent; background-size:100% 100%; }

最重要的是，这些 CSS 提示和技巧突出了某些设计功能不需要 JavaScript 的潜力。而且，好处是您可以在任何设计中实现这些技巧。这些示例可以混合在一起，以实现更多的创意设计自由。

 如果你喜欢玩 CSS，请查看我的 CSS Animations 专用页面。 它仍在进行中，但我正在慢慢添加越来越多的动画示例。 此外，我最近整理了一份关于如何在 CSS 中居中元素的指南。