search
HomeWeb Front-endCSS TutorialDetailed example of how to solve the problem of CSS gradient aliasing!

This article will introduce to you how to solve the aliasing problem caused by using gradient graphics. The so-called CSS gradient aliasing disappearing technique can be done once you know it. Let's take a look at how to achieve it~ I hope it will be helpful to everyone Helps!

CSS Gradient Sawtooth Disappearance Technique

#

In CSS, gradient (Gradient) is one of the most powerful properties.

However, students often encounter the aliasing problem caused by gradient graphics when using gradients. [Recommended learning: css video tutorial]

What is gradient aliasing?

So, what are the jagged edges produced by gradient graphics?

A simple DEMO:

<div></div>
div {
    width: 500px;
    height: 100px;
    background: linear-gradient(37deg), #000 50%, #f00 50%, #f00 0);
}

The effect is as follows:

Detailed example of how to solve the problem of CSS gradient aliasing!

In fact, the jagged feeling is already very obvious, let’s continue When you zoom in, the inside actually looks like this:

Detailed example of how to solve the problem of CSS gradient aliasing!

Or maybe this:

Detailed example of how to solve the problem of CSS gradient aliasing!

Interestingly, the aliasing phenomenon is particularly obvious on screens with a DPR of 1, but on some high-definition screens (dpr > 1), the feeling is not so obvious.

DPR (Device Pixel Ratio) is the device pixel ratio, DPR = physical pixels / device independent pixels. The device pixel ratio describes the initial proportional relationship between physical pixels and device independent pixels in the unscaled state.

So why is there a jagged feeling?

The presentation of traditional web pages is based on pixel units. For pictures where one color directly transitions to another color state, it can easily lead to a decrease in visual quality (information distortion). Therefore, for ordinary gradient elements, such as the above-mentioned writing, aliasing occurs, which is a very common thorny problem in the process of using gradients.

Simple Solutions

There are many solutions to distortion problems. The simplest way here is not to make a direct transition, but to reserve a very small gradient transition space.

We can simply transform the above code:

div {
    width: 500px;
    height: 100px;
  - background: linear-gradient(37deg), #000 50%, #f00 50%, #f00);
  + background: linear-gradient(37deg), #000 49.5%, #f00 50.5%, #f00);
}

Look carefully at the changes. We have changed from a direct transition of 50% --> 50% to a reserved 1% The gradient transition space, the effect is as follows:

Detailed example of how to solve the problem of CSS gradient aliasing!

You can see that the effect has been greatly improved immediately!

Of course, if you don’t want to modify the original code, you can also achieve it by overlaying a layer of pseudo elements. Here is a comparison chart of the three methods:

<div></div>
<div class="gradient"></div>
<div class="pesudo"></div>
:root {
    --deg: 37deg;
    --c1: #000;
    --c2: #f00;
    --line-width: 0.5px;
}
div {
    margin: auto;
    width: 500px;
    height: 100px;
    background: linear-gradient(
        var(--deg),
        var(--c1) 50%,
        var(--c2) 50%,
        var(--c2) 0
    );
}
// 方法一:
.gradient {
    background: linear-gradient(
        var(--deg),
        var(--c1),
        var(--c1) calc(50% - var(--line-width)),
        var(--c2) calc(50% + var(--line-width)),
        var(--c2) 0
    );
}
// 方法二:
.pesudo {
    position: relative;

    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(
            var(--deg),
            transparent,
            transparent calc(50% - var(--line-width)),
            var(--c1) calc(50% - var(--line-width)),
            var(--c2) calc(50% + var(--line-width)),
            transparent calc(50% + var(--line-width)),
            transparent
        );
    }
}

The superposition of pseudo elements means that in Where aliasing occurs, achieve a smooth transition and cover it:

Detailed example of how to solve the problem of CSS gradient aliasing!

The effect is as follows:

Detailed example of how to solve the problem of CSS gradient aliasing!

CodePen Demo -- Eliminate Gradient aliasing

Highlight the point! This method is suitable for linear gradients, radial gradients, and angular gradients, and is the simplest way to eliminate CSS aliasing.

More advanced aliasing elimination methods

Of course, there are other more advanced aliasing elimination methods.

In this article of Bionic Lion -- CSS Illusion | Anti-Aliasing, another interesting way to eliminate aliasing is also introduced. The following content is partially excerpted from the article.

We can establish a edge jagged edge->reconstruct jagged edge anti-aliasing method.

What we need to do is to superimpose another layer of content on the jagged areas to make the jagged feeling less intense. It's called Pixel-Offset Anti-Aliasing (POAA).

Implementing FXAA这篇博客中,解释了 FXAA 具体是如何运作的。对于一个已经被找到的图形边缘,经过 FXAA 处理后会变成这样,见下两幅图:

Detailed example of how to solve the problem of CSS gradient aliasing!

Detailed example of how to solve the problem of CSS gradient aliasing!

FXAA(Fast Approximate Anti-Aliasing),快速近似抗锯齿,它找到画面中所有图形的边缘并进行平滑处理。

我们可以轻易找到找到渐变的边缘地方,就是那些渐变的颜色改变的地方。有了边缘信息后,接着就要重建边缘。重建边缘也许可以再拆分,分为以下几个步骤:

  • 需要通过某种方法得到透明度的点
  • 这些点需要能够组成线段
  • 线段完全吻合我们的 Gradient
  • 使线段覆盖在 Gradient 的上一层以应用我们的修改

这就是大体思路,我们并没有参与浏览器的渲染,而是通过像 FXAA 一样的后处理的方法。在已渲染的图像上做文章。

比如说,我们有这样一张图:

.circle-con {
    $c1: #cd3f4f;
    $c2: #e6a964;
    position: relative;
    height: 300px;
    background-image: repeating-radial-gradient(
        circle at 0% 50%, 
        $c1 0, 
        $c2 50px
    );
}

Detailed example of how to solve the problem of CSS gradient aliasing!

边缘信息如下:

Detailed example of how to solve the problem of CSS gradient aliasing!

我们要做的,就是在它的边缘处,利用渐变再生成一段渐变,通过准确叠加,消除渐变!原理图如下:

Detailed example of how to solve the problem of CSS gradient aliasing!

原理可行,但是实操起来非常之复杂,计算量会比较大。感兴趣的可以拿这段代码尝试一下:

.repeat-con {
    --c1: #cd3f4f;
    --c2: #e6a964;
    --c3: #5996cc;
    position: relative;
    height: 300px;
    background-image: repeating-linear-gradient(
        var(--deg),
        var(--c1),
        var(--c1) 10px,
        var(--c2) 10px,
        var(--c2) 40px,
        var(--c1) 40px,
        var(--c1) 50px,
        var(--c3) 50px,
        var(--c3) 80px
    );

    &.antialiasing {
        &:after {
            --offsetX: 0.4px;
            --offsetY: -0.1px;
            --dark-alpha: 0.3;
            --light-alpha: 0.6;
            --line-width: 0.6px;
            content: &#39;&#39;;
            position: absolute;
            top: var(--offsetY);
            left: var(--offsetX);
            width: 100%;
            height: 100%;
            opacity: 0.5;
            background-image: repeating-linear-gradient(
                var(--deg),
                var(--c3),
                transparent calc(0px + var(--line-width)),
                transparent calc(10px - var(--line-width)),
                var(--c2) 10px,
                var(--c1) 10px,
                transparent calc(10px + var(--line-width)),
                transparent calc(40px - var(--line-width)),
                var(--c1) 40px,
                var(--c2) 40px,
                transparent calc(40px + var(--line-width)),
                transparent calc(50px - var(--line-width)),
                var(--c3) 50px,
                var(--c1) 50px,
                transparent calc(50px + var(--line-width)),
                transparent calc(80px - var(--line-width)),
                var(--c1) 80px
            );
        }
    }
}

最后

简单总结一下,本文介绍了几种 CSS 中可行的消除渐变锯齿的方法。

好了,本文到此结束,希望本文对你有所帮助 :)

The above is the detailed content of Detailed example of how to solve the problem of CSS gradient aliasing!. For more information, please follow other related articles on the PHP Chinese website!

Statement
This article is reproduced at:segmentfault. If there is any infringement, please contact admin@php.cn delete
css ul标签怎么去掉圆点css ul标签怎么去掉圆点Apr 25, 2022 pm 05:55 PM

在css中,可用list-style-type属性来去掉ul的圆点标记,语法为“ul{list-style-type:none}”;list-style-type属性可设置列表项标记的类型,当值为“none”可不定义标记,也可去除已有标记。

css与xml的区别是什么css与xml的区别是什么Apr 24, 2022 am 11:21 AM

区别是:css是层叠样式表单,是将样式信息与网页内容分离的一种标记语言,主要用来设计网页的样式,还可以对网页各元素进行格式化;xml是可扩展标记语言,是一种数据存储语言,用于使用简单的标记描述数据,将文档分成许多部件并对这些部件加以标识。

实例详解CSS渐变锯齿问题如何解决!实例详解CSS渐变锯齿问题如何解决!Nov 25, 2022 pm 04:43 PM

本篇文章给大家介绍一下如何解决在使用渐变图形产生的锯齿问题,所谓CSS渐变锯齿消失术,你会了就能搞定,下面就带大家一起来看看怎么实现吧~希望对大家有所帮助!

css3怎么实现鼠标隐藏效果css3怎么实现鼠标隐藏效果Apr 27, 2022 pm 05:20 PM

在css中,可以利用cursor属性实现鼠标隐藏效果,该属性用于定义鼠标指针放在一个元素边界范围内时所用的光标形状,当属性值设置为none时,就可以实现鼠标隐藏效果,语法为“元素{cursor:none}”。

rtl在css是什么意思rtl在css是什么意思Apr 24, 2022 am 11:07 AM

在css中,rtl是“right-to-left”的缩写,是从右往左的意思,指的是内联内容从右往左依次排布,是direction属性的一个属性值;该属性规定了文本的方向和书写方向,语法为“元素{direction:rtl}”。

CSS属性实现透明度渐变效果的方法CSS属性实现透明度渐变效果的方法Nov 18, 2023 pm 05:28 PM

CSS属性实现透明度渐变效果的方法,需要具体代码示例在网页设计中,透明度渐变效果可以为页面增添一种柔和而美观的过渡效果。通过CSS属性的设置,我们可以轻松实现不同元素在透明度上的过渡效果。今天我们就来介绍一些常见的方法和具体的代码示例。使用opacity属性Opacity属性可以设置元素的透明度,取值范围从0到1,0表示完全透明,1表示完全不透明。我们可以通

css怎么设置i不是斜体css怎么设置i不是斜体Apr 20, 2022 am 10:36 AM

在css中,可以利用“font-style”属性设置i元素不是斜体样式,该属性用于指定文本的字体样式,当属性值设置为“normal”时,会显示元素的标准字体样式,语法为“i元素{font-style:normal}”。

ps渐变工具怎么用-ps渐变工具的使用方法ps渐变工具怎么用-ps渐变工具的使用方法Mar 05, 2024 pm 06:28 PM

ps软件是很多人办公中会使用到的软件,那么各位知道ps渐变工具怎么用吗?下文就是小编为各位带来的ps渐变工具的使用方法,感兴趣的用户快来下文看看吧。1.打开或创建一个新的文档:首先,打开Photoshop软件并创建一个新的文档,或者打开已有的图像文件。选取渐变工具:在工具栏的左侧,定位渐变工具(位于矩形选框工具和油漆桶工具之间),然后点击以选中。3.设置渐变类型:在工具选项栏中,你可以选择不同的渐变类型。有线性渐变、径向渐变、角度渐变等选项可供选择。点击渐变类型下拉菜单,选择你想要的渐变类型。4

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Atom editor mac version download

Atom editor mac version download

The most popular open source editor

Dreamweaver Mac version

Dreamweaver Mac version

Visual web development tools

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.

DVWA

DVWA

Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software

mPDF

mPDF

mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),