Use CSS to achieve a variety of Noise noise effects

头像
dragonir
     广东
    阅读 12 分钟
    中文
    6
    头图
    Disclaimer: The graphic and model materials involved in this article are only for personal study, research and appreciation. Please do not re-modify, illegally spread, reprint, publish, commercialize, or conduct other profit-making activities.

    background

    Adding noise texture to an illustration can create a natural atmosphere. Noise texture can be used to shape shadows, highlights, depth, and more details, and optimize the texture of the illustration. The way of applying noise texture is very popular in flat illustrations.

    In the front-end development process, we may also encounter design drafts in the style of noise illustrations. Applying the basic knowledge of front-end development, can we realize the style of noise styles? The main content of this article is to achieve several kinds of noise effects through several examples.本文包含的知识点包括： CSS mask 607faca5f17d2696045507f8524d56b8---遮罩、 SVG 6271ec3b310cddb64d4daafa8a98622c feTurbulence 、 CSS filter 、 CSS mix-blend-mode 、 CSS属性---cb20f32136f6d7749b6a1914c15dd47a image-rendering 。

    Before getting into the main content of this article, let’s take a look at some excellent examples of designers using noise textures in their illustrations.

    Works link dribbble.com

    Works link dribbble.com

    Works link dribbble.com

    Knowledge summary

    PS implementation

    The basic operation method of adding noise effect in Photoshop :

    • Blend Mode (Dissolve) + Soft Brush (make dark gray light)
    • Add Material (Multiply)
    • Layer styles (inner shadow, drop shadow, etc.)
    • Noise brush painting

    Knowledge point

    The following CSS features will be used in this article. Before the official development, let's briefly understand them.

    💡 mask

    CSS Attribute mask Allows the user to hide part or all of the visible area of an element by masking or cropping a specific area of the image.

    Basic usage :

     // 使用位图来做遮罩
mask: url(mask.png);
// 使用 SVG 图形中的形状来做遮罩
mask: url(masks.svg#star);
    🔗 detailed usage, please visit: MDN

    💡 feTurbulence

    The SVG 中，feTurbulence filter creates an image using the Perlin noise function. It realizes the synthesis of artificial textures such as moiré and marble. This filter will be used in this article to generate a noisy background image.

    🔗 detailed usage, please visit: MDN

    💡 filter

    CSS Properties filter Apply graphic effects such as blur or color shift to the element. You can add filter effects to elements, which are mainly used in this article to enhance the visual effect of noise.

    🔗 detailed usage, please visit: MDN , or visit my other article "What are the magical uses of CSS filter" , which has a detailed introduction to the application of filter .

    💡 mix-blend-mode

    CSS Attribute mix-blend-mode describes how the content of the element should blend with the content of the element's immediate parent and the background of the element.

    Basic syntax :

     mix-blend-mode: normal;
mix-blend-mode: multiply;
mix-blend-mode: screen;
mix-blend-mode: overlay;
mix-blend-mode: darken;
mix-blend-mode: lighten;
mix-blend-mode: color-dodge
mix-blend-mode: color-burn;
mix-blend-mode: hard-light;
mix-blend-mode: soft-light;
mix-blend-mode: difference;
mix-blend-mode: exclusion;
mix-blend-mode: hue;
mix-blend-mode: saturation;
mix-blend-mode: color;
mix-blend-mode: luminosity;
mix-blend-mode: initial;
mix-blend-mode: inherit;
mix-blend-mode: unset;

    Different mix-blend-mode Effect:

    🔗 detailed usage, please visit: MDN

    💡 image-rendering

    CSS Attribute image-rendering used to set the image scaling algorithm. It applies to the element itself, to images in other attributes of the element, and to child elements as well.

    Basic syntax :

     image-rendering: auto;
image-rendering: crisp-edges;
image-rendering: pixelated;

    in:

    • auto : Automatic, since Gecko 1.9 , use bilinear algorithm for resampling.
    • crisp-edges : The image must be scaled using an algorithm that effectively preserves contrast and edges in the image, and that neither smoothes colors nor introduces blur to the image during processing.
    • pixelated : When zooming in on the image, the nearest neighbor algorithm is used, so the image appears to be composed of large blocks of pixels. When scaling down the image, the algorithm is the same as auto .
    🔗 detailed usage, please visit: MDN

    Effect

    The following pages are the various noise effects implemented in this article.

    accomplish

    Define CSS global variable.

     :root {
  --black: #000000;
  --blue: #0072ff;
  --green: #03c03c;
  --yellow: #fffc00;
  --red: #ff4b2b;
  --orange: #f5af19;
  --pink: #ee9ca7;
  --purple: #a770ef;
}

    Create a SVG noise background, and then use the created SVG element as the noise background for other elements.

     <svg viewBox="0 0 200 200" xmlns='http://www.w3.org/2000/svg'>
  <filter id='noise'>
    <feTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch' />
  </filter>
  <rect width='100%' height='100%' filter='url(#noiseFilter)' />
</svg>

    Type 0 🌚

    Gradient noise effect can be achieved by adding ---ba2bd5fe45b2f97509f1df5b41e3ced5--- to background linear-gradient and a noise image background. 

     <div class="noise_0"></div>
     .noise_0 {
  background: linear-gradient(to right bottom, var(--black), rgba(0, 0, 0, 0)), url(#noise);
}

    Type 1 🌑

    On the basis of the above, by modifying the filter attribute of the contrast contrast and the brightness brightness , the contrast of the noise effect is enhanced. 

     <div class="noise_1"></div>
     .noise_1 {
  filter: contrast(200%) brightness(150%);
}

    Type 2 🌒

    Use mix-blend-mode: multiply to achieve the noise effect of the mixed two-color gradient. 

     <div class="noise noise_2">
  <div class="isolate">
    <div class="gradient"></div>
    <div class="overlay"></div>
  </div>
</div>
     .noise_2 {
  position: relative;
}
.noise_2 .isolate {
  isolation: isolate;
  position: relative;
  width: 100%;
  height: 100%;
}
.noise_2 .overlay {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--purple);
  mix-blend-mode: multiply;
}
.noise_2 .gradient {
  height: 100%;
  width: 100%;
  filter: contrast(200%) brightness(150%);
  background: linear-gradient(to right bottom, var(--black), rgba(0, 0, 0, 0)), url(#noise);
}

    Type 3 🌓

    Circular noise element. 

     <div class="noise_3">
  <div class="gradient"></div>
</div>
     .noise_3 {
  border-radius: 50%;
}
.noise_3 {
  background: var(--black);
}
.noise_3 .gradient {
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 100% 0, transparent 20%, #cccccc 80%);
  mask: url(#noise), radial-gradient(circle at 100% 0, transparent 10%, #000 60%);
}

    Type 4 🌔

    Spherical noise elements, adding ground shadows and lighting effects to circular noises can form a three-dimensional sphere effect. 

     <div class="noise noise_5">
  <div class="ground"><div class="ground-shadow"></div></div>
  <div class="ball">
    <div class="isolate">
      <div class="ball-shadow"></div>
      <div class="ball-light"></div>
    </div>
  </div>
</div>
     <style>
.noise_5 {
  position: relative;
}
.noise_5 .ball {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  border-radius: 50%;
  overflow: hidden;
  z-index: 20;
}
.noise_5 .isolate {
  isolation: isolate;
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
}
.noise_5 .ball-shadow {
  height: 100%;
  background: radial-gradient(circle at 65% 35%, rgba(0, 0, 0, 0), mediumblue), url(#noise);
  filter: contrast(120%) brightness(900%);
}
.noise_5 .ground {
  position: absolute;
  width: 150%;
  height: 140px;
  bottom: -10px;
  left: -65%;
  transform: rotateZ(7deg);
  mix-blend-mode: multiply;
}
.noise_5 .ground-shadow {
  width: 95%;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 70%, navy, rgba(0, 0, 0, 0)), url(#noise);
  filter: contrast(150%) brightness(700%);
}
.noise_5 .ball-light {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  mix-blend-mode: multiply;
  background: radial-gradient(circle at 67% 30%, #ccc, var(--black));
}
</style>

    Type 5 🌕

    其他3D立体形状，包括球体、布丁🍮 、水滴💧 、 🏺 、鸡蛋🥚 、 RBC 💉 etc., 🖱 Hover the mouse over the element to see the 3D rotation effect. 

     <div class="item item--sphere item--color1"></div>
<div class="item item--pudding item--color5"></div>
<div class="item item--droplet item--color6"></div>
<div class="item item--vase item--color7"></div>
<div class="item item--egg item--color8"></div>
<div class="item item--cell"></div>
     .item {
  background-color: #ffecd2;
  box-shadow: -5px 18px 25px -15px;
  overflow: hidden;
  transition: all 0.2s ease-out;
  image-rendering: pixelated;
}
.item::before {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  height: 100%;
  width: 400%;
  mask: url(#noise), radial-gradient(circle at 50% 0, transparent 5%, #000 80%) 0 0/50% 100%;
}
.item:hover {
  transform: scale(1.05);
}
.item:hover.item::before, .item:hover.item::after {
  animation: spin-round 3.5s linear infinite;
}
.item:active {
  animation: hue-rotate 7s infinite;
}
.item--sphere {
  border-radius: 50%;
}
.item--egg {
  width: 100.1px;
  border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;
}
.item--pudding {
  width: 130px;
  height: 130px;
  border-radius: 50% 50% 10% 10%;
}
.item--pudding::after {
  content: "";
  position: absolute;
  top: 0;
  display: block;
  top: 0;
  left: 0;
  height: 100%;
  width: 400%;
  mask: url(#noise), radial-gradient(circle at 50% 0, transparent 55%, #000 85%) 0 0/50% 100%;
}
.item--droplet {
  width: 100.1px;
  height: 100.1px;
  border-radius: 5% 100% 50% 65%/5% 65% 50% 100%;
  transform: rotate(45deg);
  box-shadow: 5px 18px 25px -15px;
}
.item--droplet:hover {
  transform: rotate(45deg) scale(1.05);
}
.item--vase {
  position: relative;
  width: 80px;
  height: 130px;
  border-radius: 40% 40% 70% 70%/100%;
}
.item--vase::after {
  content: "";
  position: absolute;
  top: 0;
  display: block;
  top: 0;
  left: 0;
  height: 100%;
  width: 400%;
  mask: url(#noise), radial-gradient(circle at 50% 0, transparent 55%, #000 90%) 0 0/50% 100%;
}
.item--cell {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  color: #ff4d5d;
  background: radial-gradient(circle at 100% 0, #ffa878 5%, transparent 75%), #ff4d5d;
}
.item--cell::before {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: radial-gradient(circle at 0 75%, transparent 20%, #98000e 65%);
  mask: url(#noise), radial-gradient(circle at 50%, transparent 25%, #000 75%);
}
.item--cell:hover {
  animation: spin-flat-thick 3.5s linear infinite;
}
.item--cell:hover.item--cell::before {
  animation: spin-flat 3.5s linear infinite;
}
.item--cell:hover:active {
  animation: spin-flat-thick 3.5s linear infinite, hue-rotate 7s linear infinite;
}
.item--color1 {
  color: #7f5fff;
}
.item--color1::before {
  background: repeat-x 100% 0/50% 100% radial-gradient(circle at 50% 0, transparent 25%, #7f5fff 65%);
}
.item--color5 {
  color: #3d1635;
  background-color: #ffecd2;
}
.item--color5::before {
  background: repeat-x 100% 0/50% 100% radial-gradient(circle at 50% 0, transparent 15%, #e7627d 45%);
}
.item--color5::after {
  background: repeat-x 100% 0/50% 100% radial-gradient(circle at 50% 0, transparent 50%, #3d1635 75%);
}
.item--color6 {
  background-color: #72f9c1;
  color: #5193ff;
}
.item--color6::before {
  background: repeat-x 100% 0/50% 100% radial-gradient(circle at 50% 0, transparent 25%, #5193ff 65%);
}
.item--color7 {
  color: #5e21d6;
  background-color: #fec440;
}
.item--color7::before {
  background: repeat-x 100% 0/50% 100% radial-gradient(circle at 50% 0, transparent 15%, #fd2472 45%);
}
.item--color7::after {
  background: repeat-x 100% 0/50% 100% radial-gradient(circle at 50% 0, transparent 50%, #5e21d6 75%);
}
.item--color8 {
  color: #222;
}
.item--color8::before {
  background: repeat-x 100% 0/50% 100% radial-gradient(circle at 50% 0, transparent 25%, #222 65%);
}

    Type 6 🌝

    The superposition of multiple noise elements can produce very stunning effects. For example, by layering three noise elements together, the optical three primary colors RGB can be achieved. 

     <div class="noise_6">
  <div class="circle noise-1"></div>
  <div class="circle noise-2"></div>
  <div class="circle noise-3"></div>
</div>
     .noise_6 .circle {
  filter: contrast(145%) brightness(650%) invert(100%);
  mix-blend-mode: screen;
}
.noise_6 .noise-1 {
  position: absolute;
  top: 0;
  left: -10%;
  background: radial-gradient(circle at 50% 50%, rgba(0,255,255,1), rgba(0,0,0,0)), url(#noise);
}
.noise_6 .noise-2 {
  position: absolute;
  left: 10%;
  top: -30px;
  background: radial-gradient(circle at 50% 50%, rgba(255,0,255,1), rgba(0,0,0,0)), url(#noise);
}
.noise_6 .noise-3 {
  position: absolute;
  top: 50px;
  left: 4%;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,0,1), rgba(0,0,0,0)), url(#noise);
}

    Type 7 🌙

    What else can be achieved with the noise element? Center diffuse effects, sun, ripples, poached eggs… 

     <div class="noise_7">
  <div class="noise"></div>
  <div class="center">
    <div class="circle">
    </div>
  </div>
</div>
     <style>
.noise_7 {
  position: relative;
  width: 1000px;
  height: 1000px;
  margin: 0 auto;
}
.noise_7 .noise {
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0)), url(#noise);
  filter: contrast(145%) brightness(650%) invert(100%);
  mix-blend-mode: screen;
}
.noise_7 .center {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.noise_7 .circle {
  width: 200px;
  height: 200px;
  background-color: beige;
  border-radius: 50%;
}
</style>

    Background noise 🌜

    If you look closely, the black background of the page is also applied with a noise effect. Is there a retro feeling of the snowflake screen of a black and white TV 😂 .

     <div class="bg"></div>
     .bg {
  position: fixed;
  top: -50%;
  left: -50%;
  right: -50%;
  bottom: -50%;
  width: 200%;
  height: 200vh;
  background: transparent url(#noise) repeat 0 0;
  background-repeat: repeat;
  animation: bg-animation .2s infinite;
  opacity: .9;
  visibility: visible;
}
@keyframes bg-animation {
  0% { transform: translate(0,0) }
  10% { transform: translate(-5%,-5%) }
  20% { transform: translate(-10%,5%) }
  30% { transform: translate(5%,-10%) }
  40% { transform: translate(-5%,15%) }
  50% { transform: translate(-10%,5%) }
  60% { transform: translate(15%,0) }
  70% { transform: translate(0,10%) }
  80% { transform: translate(-15%,0) }
  90% { transform: translate(10%,5%) }
  100% { transform: translate(5%,0) }
}
    📥 full code: https://github.com/dragonir/noise

    Summarize

    The main points of knowledge included in this article include:

    • CSS properties mask mask
    • SVG Filter feTurbulence
    • CSS properties filter filters
    • CSS Attribute mix-blend-mode Element Mix
    • CSS properties image-rendering image scaling
    If you want to know other front-end knowledge or WEB 3D development technology related knowledge, you can read my previous articles. Please indicate the original address and author when reprinting . If you think the article is helpful to you, don't forget to click three links 👍 .

    appendix

    前端htmlcsscss3html5
    dragonir
    1.8k 声望3.9k 粉丝

    Accepted ✔

    « 上一篇
    使用前端技术实现静态图片局部流动效果 🌊
    下一篇 »
    1000粉！使用Three.js实现一个创意纪念页面 🏆

    引用和评论

    推荐阅读
    头像
    AI绘图开源工具Stable Diffusion WebUI前端API对接

    dragonir赞 1阅读 2.9k

    头像
    网页设计的垂直居中

    寒青赞 41阅读 5.2k评论 3

    头像
    CSS团队协作规范

    寒青赞 38阅读 7.4k

    头像
    100个React最佳实践小技巧

    夕水赞 25阅读 6.5k评论 4

    头像
    前端开发工具

    寒青赞 19阅读 5.2k

    头像
    开发插件集合

    寒青赞 14阅读 3.5k

    头像
    Javascript(turfjs)等值线图绘制

    舍瓦温赞 15阅读 22.5k评论 18

    0 条评论
    得票最新