20 个 CSS 函数,释放你的创造力

开发 前端
层叠样式表 (CSS) 是网页设计的命脉,使开发人员和设计师能够制作出令人惊叹的网页布局效果。

层叠样式表 (CSS) 是网页设计的命脉,使开发人员和设计师能够制作出令人惊叹的网页布局效果。 

虽然 CSS 属性和值是样式表的构建块,但 通过引入CSS 函数,未来我们可以实现更多CSS设计的游戏。 

在今天这篇文章中,我们将分享20 个基本的 CSS 函数,探索它们的功能、实际应用程序、最佳实践和常见陷阱。

1. rgba():重新定义颜色

功能:rgba(红、绿、蓝、alpha)

rgba() 函数使您能够精确定义颜色,包括 alpha(透明度)值。它非常适合创建半透明或半透明颜色。

例子:

background-color: rgba(255, 0, 0, 0.5); /* Red with 50% transparency */
  • 1.

2. hsl():掌握颜色变化

函数:hsl(色调、饱和度、亮度)

使用 hsl(),我们可以对颜色进行更精准细致的控制,允许你指定色调、饱和度和亮度值。此功能可以帮助我们制作迷人颜色变化的调色板。

例子:

background-color: hsl(120, 100%, 50%); /* A shade of green */
  • 1.

3. var():具有自定义属性的动态样式

函数:var(--变量名)

var() 函数与自定义属性(CSS 变量)配合使用,可以通过引用变量值来启用动态样式。它确保你风格的一致性和灵活性。

例子:

:root {
  --primary-color: blue;
}
color: var(--primary-color); /* Utilizing the custom property */
  • 1.
  • 2.
  • 3.
  • 4.

4. calc():让响应式布局变得简单

函数:calc(表达式)

使用 calc() 可以轻松实现响应式设计。它允许你在样式属性内执行计算,非常适合根据屏幕尺寸调整布局。

例子:

width: calc(50% - 20px); /* Responsive width calculation */
  • 1.

5.rotate():动画变换

功能:ratate(角度)

使用rotate() 函数创建令人着迷的动画,该函数将元素旋转指定的角度。

例子:

transform: rotate(45deg); /* Element rotation by 45 degrees */
  • 1.

6.scale():放大或缩小元素

功能:scale(因子)

使用scale()按比例缩放元素是轻而易举的事。使用它来实现缩放效果和流畅的动画。

例子:

transform: scale(2); /* Element scaled to double its size */
  • 1.

7.translate():轻松的元素移动

函数:translate(x,y)

使用translate() 实现流体元素运动。它水平和垂直移动元素,非常适合动画和过渡。

例子:

transform: translate(20px, 10px); /* Translate right by 20px and down by 10px */
  • 1.

8.rotateX()、rotateY()、rotateZ():3D 变换

函数:rotateX(角度)、rotateY(角度)、rotateZ(角度)

使用这些功能解锁 3D 变换的世界。它们可以实现复杂的空间操作。

例子:

transform: rotateX(45deg); /* Rotate around the X-axis */
  • 1.

9. skew():艺术元素扭曲

功能:skew()(x 角度,y 角度)

使用 skew() 创造性地扭曲元素。它非常适合实现独特的设计效果。

例子:

transform: skew(30deg, 20deg); /* Horizontal skew by 30deg and vertical skew by 20deg */
  • 1.

10.blur():柔焦和背景模糊

功能:blur(半径)

使用blur() 对元素应用柔焦或背景模糊效果。这是增强视觉吸引力的必要条件。

例子:

filter: blur(5px); /* Apply a 5px blur effect */
  • 1.

11.brightness():动态亮度控制

功能:brightness(系数)

使用 Brightness() 动态控制元素的亮度。它是创建浅色和深色主题的绝佳工具。

例子:

filter: brightness(150%); /* Increase brightness by 50% */
  • 1.

12.contrast():微调视觉清晰度

功能:contrast(因子)

通过使用contrast()调整元素的对比度来增强或降低可见性。

例子:

filter: contrast(150%); /* Increase contrast by 50% */
  • 1.

13. saturate():增强颜色鲜艳度

功能:saturate(因子)

通过使用 saturate() 函数放大或降低饱和度来控制颜色鲜艳度。

例子:

filter: saturate(200%); /* Double the saturation */
  • 1.

14. invert():艺术色彩反转

函数:invert(因子)

使用 invert() 创建引人注目的颜色反转。它非常适合独特的设计元素。

例子:

filter: invert(1); /* Invert colors */
  • 1.

15. drop-shadow():提升视觉层次

函数:drop-shadow(h-阴影 v-阴影模糊-半径扩散-半径颜色)

使用 drop-shadow() 函数为元素添加深度和视觉层次结构。它改变了 UI 设计的游戏规则。

例子:

box-shadow: drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.2)); /* Apply a drop shadow */
  • 1.

16.translateX()、translateY()、translateZ():3D元素平移

函数:translateX(距离)、translateY(距离)、translateZ(距离)

通过沿特定轴平移元素来导航三维空间。

例子:

transform: translateX(20px); /* Translate along the X-axis */
  • 1.

17. url():链接到外部资源

函数:url(路径)

url() 函数是链接到图像或字体等外部资源的网关。

例子:

backg
round-image: url('image.jpg'); /* Use an image as a background */
  • 1.
  • 2.

18. Linear-gradient():制作令人惊叹的渐变

函数:Linear-gradient(方向,color-stop1,color-stop2,...)

使用 Linear-gradient() 创建令人着迷的线性渐变。它非常适合背景和基于渐变的设计。

例子:

background: linear-gradient(to right, red, blue); /* Create a horizontal gradient */
  • 1.

19. Radial-gradient():迷人的圆形渐变

函数:Radial-gradient(形状,位置,颜色停止1,颜色停止2,...)

对于圆形渐变,radial-gradient() 是您的首选函数。它非常适合按钮和装饰元素。

例子:

background: radial-gradient(circle, red, blue); /* Create a radial gradient */
  • 1.

20. attr():访问 HTML 属性

函数:attr(属性)

attr() 函数允许您访问 HTML 属性并在样式中使用它们的值,使您的设计成为数据驱动的。

例子:

color: attr(data-color);
  • 1.

实际应用

现在我们已经探索了这些 CSS 函数,让我们深入了解它们发挥作用的现实场景:

1).响应式设计

诸如 calc() 和 var() 之类的函数对于创建响应式布局至关重要。我们可以根据屏幕尺寸和用户偏好动态调整宽度、高度和颜色。

width: calc(50% - 20px); /* Responsive width calculation */
  • 1.

2). 动画和过渡

转换函数(rotate()、scale()、translate())在动画和过渡中起着至关重要的作用。它们允许我们创建引人入胜的交互式用户界面。

transform: rotate(45deg); /* Animation rotation effect */
  • 1.

3). 图像效果

诸如blur()、brightness()和contrast()之类的函数,我们能够应用各种图像效果,使图像在视觉上更具吸引力。

filter: blur(5px); /* Apply a blur effect to images */
  • 1.

4).动态主题

CSS 函数可用于创建动态主题,其中颜色、亮度和对比度级别根据用户偏好而变化。

filter: brightness(150%); /* Increase brightness for a light theme */
  • 1.

5).渐变背景

Linear-gradient() 和 Radial-gradient() 函数非常适合为我们的 Web 元素创建时尚的渐变背景。

background: linear-gradient(to right, red, blue); /* Gradient background */
  • 1.

通过下面的代码,我们查看所有这些函数的运行情况。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Functions Demo</title>
    <style>
    p{
      font-weight:bold;
      color:magenta;
    }
        /* Title for the Page */
        h1 {
            text-align: center;
            color: #333;
            margin-top: 20px;
        }


        /* Function 1: rgba() - Redefining Colors */
        .rgba-demo {
            width: 100px;
            height: 100px;
            background-color: rgba(255, 0, 0, 0.5); /* Red with 50% transparency */
            margin: 20px;
            display: inline-block;
        }


        /* Function 2: hsl() - Mastering Color Variations */
        .hsl-demo {
            width: 100px;
            height: 100px;
            background-color: hsl(120, 100%, 50%); /* A shade of green */
            margin: 20px;
            display: inline-block;
        }


        /* Function 3: var() - Dynamic Styling with Custom Properties */
        .var-demo {
            --primary-color: blue;
            color: var(--primary-color); /* Utilizing the custom property */
            margin: 20px;
        }


        /* Function 4: calc() - Responsive Layouts Made Easy */
        .calc-demo {
            width: calc(50% - 20px); /* Responsive width calculation */
            height: 100px;
            background-color: #3498db;
            margin: 20px;
            display: inline-block;
        }


        /* Function 5: rotate() - Animating Transformations */
        .rotate-demo {
            width: 100px;
            height: 100px;
            background-color: #e74c3c;
            margin: 20px;
            display: inline-block;
            transform: rotate(45deg); /* Element rotation by 45 degrees */
        }


        /* Function 6: scale() - Magnify or Shrink Elements */
        .scale-demo {
            width: 100px;
            height: 100px;
            background-color: #27ae60;
            margin: 40px;
            display: inline-block;
            transform: scale(2); /* Element scaled to double its size */
        }


        /* Function 7: url() - Loading External Resources */
        .url-demo {
            width: 200px;
            height: 200px;
            background-image: url('https://images.unsplash.com/photo-1693801873387-cafbe425d432?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2097&q=80'); /* External image */
            background-size: cover;
            margin: 20px;
            display: inline-block;
        }


        /* Function 8: linear-gradient() - Creating Linear Gradients */
        .linear-gradient-demo {
            width: 100px;
            height: 100px;
            background: linear-gradient(to right, red, blue); /* Gradient background */
            margin: 20px;
            display: inline-block;
        }


        /* Function 9: radial-gradient() - Creating Radial Gradients */
        .radial-gradient-demo {
            width: 100px;
            height: 100px;
            background: radial-gradient(circle, red, blue); /* Radial gradient background */
            margin: 20px;
            display: inline-block;
        }


        /* Function 10: attr() - Accessing HTML Attributes */
        .attr-demo {
            content: attr(data-content); /* Use the data-content attribute value */
            margin: 20px;
            display: inline-block;
        }


        /* Function 11: counter() - Creating Counters */
        .counter-demo::before {
            content: counter(my-counter); /* Use the "my-counter" counter */
            counter-increment: my-counter; /* Increment the counter */
            margin: 20px;
            display: inline-block;
        }


        /* Function 12: min() - Calculating the Minimum Value */
        .min-demo {
            font-size: min(2rem, 3vw); /* Responsive font size */
            margin: 20px;
            display: inline-block;
        }


        /* Function 13: max() - Calculating the Maximum Value */
        .max-demo {
            font-size: max(1rem, 5vh); /* Responsive font size */
            margin: 20px;
            display: inline-block;
        }


        /* Function 14: clamp() - Restricting Values */
        .clamp-demo {
            font-size: clamp(1rem, 3vw, 2rem); /* Responsive font size within a range */
            margin: 20px;
            display: inline-block;
        }


        /* Function 15: repeat() - Repeating Elements */
        .repeat-demo {
            display: grid;
            grid-template-columns: repeat(3, 1fr); /* Create a 3-column grid */
            gap: 20px;
        }


        /* Function 16: not() - Selecting Elements to Exclude */
        .not-demo p:not(.special) {
            color: #333; /* Style paragraphs that are not special */
            margin: 20px;
        }


        /* Function 17: lang() - Language-Based Styling */
        .lang-demo:lang(en) {
            color: #3498db; /* Style English language content */
            margin: 20px;
        }


        /* Function 18: nth-child() - Selecting Child Elements */
        .nth-child-demo p:nth-child(odd) {
            background-color: #f2f2f2; /* Style odd-numbered paragraphs */
            margin: 20px;
        }


        /* Function 19: :focus-within - Styling Parent of Focused Element */
        .focus-within-demo div:focus-within {
            border: 2px solid #e74c3c; /* Style parent of focused element */
            margin: 20px;
        }


        /* Function 20: :empty - Styling Empty Elements */
        .empty-demo p:empty {
            background-color: #f2f2f2; /* Style empty paragraphs */
            margin: 20px;
        }
</style>
</head>
<body>
    <!-- Title for the Page -->
    <h1>20 CSS Functions Explained</h1>


    <!-- Function 1: rgba() - Redefining Colors -->
    <p>1. Redefining Colors with rgba()</p>
    <div class="rgba-demo"></div>


    <!-- Function 2: hsl() - Mastering Color Variations -->
    <p>2. Mastering Color Variations with hsl()</p>
    <div class="hsl-demo"></div>


    <!-- Function 3: var() - Dynamic Styling with Custom Properties -->
    <p>3. Dynamic Styling with Custom Properties using var()</p>
    <div class="var-demo">Styling</div>


    <!-- Function 4: calc() - Responsive Layouts Made Easy -->
    <p>4. Responsive Layouts Made Easy with calc()</p>
    <div class="calc-demo"></div>


    <!-- Function 5: rotate() - Animating Transformations -->
    <p>5. Animating Transformations with rotate()</p>
    <div class="rotate-demo"></div>


    <!-- Function 6: scale() - Magnify or Shrink Elements -->
    <p>6. Magnify or Shrink Elements with scale()</p>
    <div class="scale-demo"></div>


    <!-- Function 7: url() - Loading External Resources -->
    <p>7. Loading External Resources with url()</p>
    <div class="url-demo"></div>


    <!-- Function 8: linear-gradient() - Creating Linear Gradients -->
    <p>8. Creating Linear Gradients with linear-gradient()</p>
    <div class="linear-gradient-demo"></div>


    <!-- Function 9: radial-gradient() - Creating Radial Gradients -->
    <p>9. Creating Radial Gradients with radial-gradient()</p>
    <div class="radial-gradient-demo"></div>


    <!-- Function 10: attr() - Accessing HTML Attributes -->
    <p>10. Accessing HTML Attributes with attr()</p>
    <div class="attr-demo" data-content="Hello, CSS Functions!"></div>


    <!-- Function 11: counter() - Creating Counters -->
    <p>11. Creating Counters with counter()</p>
    <div class="counter-demo"></div>


    <!-- Function 12: min() - Calculating the Minimum Value -->
    <p>12. Calculating the Minimum Value with min()</p>
    <div class="min-demo">Responsive Font Size (min)</div>


    <!-- Function 13: max() - Calculating the Maximum Value -->
    <p>13. Calculating the Maximum Value with max()</p>
    <div class="max-demo">Responsive Font Size (max)</div>


    <!-- Function 14: clamp() - Restricting Values -->
    <p>14. Restricting Values with clamp()</p>
    <div class="clamp-demo">Responsive Font Size (clamp)</div>


    <!-- Function 15: repeat() - Repeating Elements -->
    <p>15. Repeating Elements with repeat()</p>
    <div class="repeat-demo">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>


    <!-- Function 16: not() - Selecting Elements to Exclude -->
    <p>16. Selecting Elements to Exclude with not()</p>
    <div class="not-demo">
        <p class="special">Special Paragraph</p>
        <p>Regular Paragraph 1</p>
        <p>Regular Paragraph 2</p>
    </div>


    <!-- Function 17: lang() - Language-Based Styling -->
    <p>17. Language-Based Styling with lang()</p>
    <div class="lang-demo" lang="en">English Language</div>


    <!-- Function 18: nth-child() - Selecting Child Elements -->
    <p>18. Selecting Child Elements with nth-child()</p>
    <div class="nth-child-demo">
        <p>Paragraph 1</p>
        <p>Paragraph 2</p>
        <p>Paragraph 3</p>
    </div>


    <!-- Function 19: :focus-within - Styling Parent of Focused Element -->
    <p>19. Styling Parent of Focused Element with :focus-within</p>
    <div class="focus-within-demo">
        <div>
            <input type="text" placeholder="Input Field">
        </div>
    </div>


    <!-- Function 20: :empty - Styling Empty Elements -->
    <p>20. Styling Empty Elements with :empty</p>
    <div class="empty-demo">
        <p>Non-Empty Paragraph</p>
        <p></p>
    </div>
</body>
</html>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.
  • 68.
  • 69.
  • 70.
  • 71.
  • 72.
  • 73.
  • 74.
  • 75.
  • 76.
  • 77.
  • 78.
  • 79.
  • 80.
  • 81.
  • 82.
  • 83.
  • 84.
  • 85.
  • 86.
  • 87.
  • 88.
  • 89.
  • 90.
  • 91.
  • 92.
  • 93.
  • 94.
  • 95.
  • 96.
  • 97.
  • 98.
  • 99.
  • 100.
  • 101.
  • 102.
  • 103.
  • 104.
  • 105.
  • 106.
  • 107.
  • 108.
  • 109.
  • 110.
  • 111.
  • 112.
  • 113.
  • 114.
  • 115.
  • 116.
  • 117.
  • 118.
  • 119.
  • 120.
  • 121.
  • 122.
  • 123.
  • 124.
  • 125.
  • 126.
  • 127.
  • 128.
  • 129.
  • 130.
  • 131.
  • 132.
  • 133.
  • 134.
  • 135.
  • 136.
  • 137.
  • 138.
  • 139.
  • 140.
  • 141.
  • 142.
  • 143.
  • 144.
  • 145.
  • 146.
  • 147.
  • 148.
  • 149.
  • 150.
  • 151.
  • 152.
  • 153.
  • 154.
  • 155.
  • 156.
  • 157.
  • 158.
  • 159.
  • 160.
  • 161.
  • 162.
  • 163.
  • 164.
  • 165.
  • 166.
  • 167.
  • 168.
  • 169.
  • 170.
  • 171.
  • 172.
  • 173.
  • 174.
  • 175.
  • 176.
  • 177.
  • 178.
  • 179.
  • 180.
  • 181.
  • 182.
  • 183.
  • 184.
  • 185.
  • 186.
  • 187.
  • 188.
  • 189.
  • 190.
  • 191.
  • 192.
  • 193.
  • 194.
  • 195.
  • 196.
  • 197.
  • 198.
  • 199.
  • 200.
  • 201.
  • 202.
  • 203.
  • 204.
  • 205.
  • 206.
  • 207.
  • 208.
  • 209.
  • 210.
  • 211.
  • 212.
  • 213.
  • 214.
  • 215.
  • 216.
  • 217.
  • 218.
  • 219.
  • 220.
  • 221.
  • 222.
  • 223.
  • 224.
  • 225.
  • 226.
  • 227.
  • 228.
  • 229.
  • 230.
  • 231.
  • 232.
  • 233.
  • 234.
  • 235.
  • 236.
  • 237.
  • 238.
  • 239.
  • 240.
  • 241.
  • 242.
  • 243.
  • 244.
  • 245.
  • 246.
  • 247.
  • 248.
  • 249.
  • 250.
  • 251.
  • 252.
  • 253.
  • 254.
  • 255.
  • 256.
  • 257.
  • 258.
  • 259.
  • 260.
  • 261.
  • 262.
  • 263.
  • 264.
  • 265.
  • 266.
  • 267.
  • 268.
  • 269.
  • 270.
  • 271.
  • 272.
  • 273.
  • 274.
  • 275.
  • 276.
  • 277.
  • 278.
  • 279.
  • 280.
  • 281.
  • 282.
  • 283.
  • 284.
  • 285.
  • 286.
  • 287.
  • 288.
  • 289.
  • 290.
  • 291.
  • 292.
  • 293.
  • 294.
  • 295.
  • 296.
  • 297.
  • 298.
  • 299.
  • 300.
  • 301.
  • 302.
  • 303.
  • 304.
  • 305.
  • 306.
  • 307.
  • 308.
  • 309.
  • 310.
  • 311.
  • 312.
  • 313.
  • 314.
  • 315.
  • 316.
  • 317.
  • 318.

最佳实践和陷阱

最佳实践:

  • 谨慎使用函数。虽然 CSS 函数很强大,但请避免过度使用,因为它会使样式表更难以阅读和维护。
  • 测试跨浏览器兼容性。确保功能在各种浏览器中按预期工作,尤其是可能不支持所有功能的旧浏览器。
  • 优化性能。复杂的函数,尤其是动画中的函数,可能会影响渲染性能。根据需要分析和优化您的样式。

常见陷阱:

  • 过于复杂的表达式。过于复杂的函数表达式可能会导致样式混乱和错误。保持代码整洁有序。
  • 浏览器支持。旧版浏览器可能不支持某些功能,因此请注意兼容性问题并考虑后备方案。
  • 性能下降。过度使用函数,尤其是在动画中,可能会导致性能瓶颈。在各种设备上进行测试,以确保流畅的用户体验。

写在最后

CSS 函数是很强大的工具,可以为我们的网页设计增添活力、创造力和多种布局。我们通过了解它们的功能与特性,帮助我们明智的选择在何种情况下使用它们,并遵循最佳实践。

责任编辑:华轩 来源: web前端开发
相关推荐

2013-11-08 09:33:04

创造力创业

2025-02-20 10:14:04

2013-12-10 13:41:23

创造力设计

2023-10-31 08:01:23

goGPT探索

2019-10-29 14:01:59

CIOIT创造力商业

2020-12-30 15:11:15

人工智能机器学习技术

2013-06-24 13:56:37

创造力创意开发

2023-06-25 17:01:10

2023-08-10 11:49:24

AI项目模型

2021-02-01 11:13:54

人工智能创造力AI

2014-01-02 13:09:41

创造力编程

2020-12-14 09:33:32

互联网数据技术

2023-06-25 09:38:04

GPT-4研究

2015-12-09 10:23:15

2009-02-02 14:25:45

软件 芮祥麟 SAP

2014-03-11 15:32:25

2020-11-11 10:19:08

数字化转型创造力生产力

2014-04-03 19:34:39

Adobe

2023-11-03 15:31:07

2021-01-21 21:14:53

人工智能AIOpenAI
点赞
收藏

51CTO技术栈公众号