거친 구배-CSS 튜토리얼-php.cn

거친 구배

Dribbble 또는 Behance를 찾아 보면 이미지에 질감을 추가하기 위해 간단한 트릭을 사용하여 디자이너를 찾을 수 있습니다. 소음을 추가하면 원래 단색 또는 부드러운 그라디언트 (예 : 그림자)가 더 현실적으로 만듭니다. 그러나 디자이너는 텍스처와 같은 디자이너이지만 소음은 웹 디자인에 거의 사용되지 않습니다.

이 기사는 소량의 CSS와 SVG 만 사용하여 색 소음을 생성하고 그라디언트에 질감을 추가합니다. 좋아, 소음을 만들어 봅시다!

대화식 놀이터

여기를 클릭하십시오. 무슨 일이 일어나고 있는지 이해하는 가장 빠른 방법은 레이어를 구성하는 매개 변수를 조정하는 것입니다.

팁 : SVG 노이즈 및 CSS 구배

이 기사의 핵심 기술은 Stack Overflow 질문에 대한 Chris Pachl의 답변을 기반으로합니다. CSS 그라디언트에 소음을 추가 할 수 있습니까?

속임수는 SVG 필터를 사용하여 노이즈를 생성 한 다음 해당 소음을 배경으로 적용하는 것입니다. 밝기와 대비를 향상시키기 위해 구배 아래에 배치하십시오. 즉, 점차적으로 분산 된 그라디언트를 얻습니다.

주요 성분

우리가 무대 뒤에서 사용하는 것은 다음과 같습니다.

SVG 난기류 : 이것은 우리의 노이즈 필터입니다.
Gradient 및 SVG를 사용한 배경 : 다음 으로이 필터를 필터와 CSS 구배를 결합한 배경 이미지로 CSS에 넣습니다.
밝기와 대비 향상 : 그런 다음 CSS 필터로 전환하여 노이즈의 밝기와 대비를 높입니다.
믹스 그라디언트 : 마지막으로 믹스 블렌드 모드를 사용하여 색상을 추가로 필터링하고 그라디언트를 혼합하도록 선택할 수 있습니다.

이 각 섹션에 자세히 들어 갑시다.

SVG 난기류 사용

SVG 영역에서는 필터를 정의 할 수 있으며 그 중 하나를 사용하면 Perlin 노이즈를 생성 할 수 있습니다. 알려져 있습니다<feturbulence></feturbulence> , 우리는 그것이 "난기류"또는 "노이즈"인지와 같은 속성과 그것이 얼마나 미세하거나 거친지를 정의 할 수 있습니다. Bence Szabó는 패턴을 만드는 데 사용하는 방법을 보여주기 때문에 이것을 더 자세히 설명합니다.

<code><svg viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><filter id="noiseFilter"><feturbulence basefrequency="0.65" numoctaves="3" stitchtiles="stitch" type="fractalNoise"></feturbulence></filter><rect filter="url(#noiseFilter)" height="100%" width="100%"></rect></svg></code>

로그인 후 복사

이 SVG 예제는 필터를 생성하고 렌더링합니다<rect></rect> 세분화 된 그라디언트에 사용할 수있는 요소. SVG<filter></filter> 그리고<rect></rect> 정의 별도 및<rect></rect> 그냥 인용하십시오.

변경해보십시오<feturbulence></feturbulence> 일부 속성.

이 SVG를 별도의 파일로 저장합니다. 이 기사에서 데모의 외부 링크를 참조하여 SVG를 얻습니다. 그러나 실제로는 로컬 파일 또는 귀하의 CDN을 참조합니다. 이상한 이유로, ID를 통해 SVG를 참조하는 것은 작동하지 않지만 놀이터 데모에서 보여준 것처럼 SVGS를 인화 할 수 있습니다. 우리는 가독성 이유로 데모에서 이것을하지 않습니다.

SVG 및 그라디언트로 CSS 배경을 만듭니다

SVG 파일을 URL 또는 경로별로 참조 할 수있는 어딘가에 SVG 파일을 저장 한 후 이제 그라디언트와 결합 된 CSS 배경에서 사용할 수 있습니다.

 <code>.noise { /* ... */ background: linear-gradient(to right, blue, transparent), url(https://www.php.cn/link/a41a6a3856ee3c8c2816d4828b64f560); }</code>

로그인 후 복사

여기의 순서는 매우 중요합니다. 이 특별한 예에서는 단색 (즉, 노이즈 없음)이 노이즈로 전환 한 다음 다른 색상으로 전환되기를 원합니다. 우리는 또한 노이즈의 한쪽 끝이 투명하여 노이즈를 드러낼 수 있기를 원합니다.

이와 같이:

그러나 소음이 너무 혼란 스럽기 때문에 이것은 특히 좋지 않습니다. 우리는 그것을 엉망으로 만들고 거칠게 만들어야합니다. 우리는 통과 할 수 있습니다 ...

향상된 밝기와 대비

CSS 필터를 추가하면 노이즈가 더욱 생생 해져서 치수 색상을 흰색 또는 검은 색으로 밀어냅니다. 필터는 전체적으로 적용됩니다<div> , 맨 왼쪽의 파란색은 우리가 사용하기 시작한 순수한 파란색과 다릅니다. ``.``. noise { <em>/.../</em> 배경 : 선형 그레이드 (오른쪽, 파란색, 투명), url ( <a href="https://www.php.cn/link/a41a6a3856ee3c8c2816d4828b64f560">https://www.php.cn/a41a6a3856ee3c8c2816d4828b64f560</a> (170%);<br> }<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><code>您可以随意调整对比度和亮度如何影响渐变。增强亮度和对比度会在下面的演示中突出混乱的灰色。 #### 噪点颜色不均匀如果您放大，您会注意到噪点由多种颜色组成。SVG滤镜一开始就是彩色的，增加亮度和对比度会强调某些颜色。虽然几乎看不出来，但如果这种五彩纸屑不受欢迎，我们可以继续使用CSS混合（即mix-blend-mode和background-blend-mode）过滤颜色。 #### CSS混合让我们创建一个在两种颜色之间过渡的颗粒状渐变。CSS混合允许我们堆叠颜色层。在下一个示例中，我们向标记中添加另一个`</code> , 원래 그라디언트 위에 놓고 '믹스 블렌드 모드 : 곱하십시오.</pre><div class="contentsignin">로그인 후 복사</div></div> </div> <p></p> <div> <div></div> <div></div> </div>

<code></code>

로그인 후 복사

.noise { / ... / 배경 : 선형-그라디언트 (20deg, Rebeccapurple, Transparent), URL ( https://www.php.cn/61a6a3856ee3c8c2816d4828b64f560 ; 믹스 블렌드 모드 : 곱하기}

<code>我们可以使用CSS隔离属性创建一个新的堆叠上下文并选择要混合的内容。如果我们在下一个示例中省略隔离，渐变和叠加层将与背景颜色混合。在Pen中尝试并注释掉该行！</code>

로그인 후 복사

/ 이전과 동일 /

.isolate {분리 : / ... /}

 <code>### 一些用例我们已经查看了一个如何制作噪点渐变的非常简单的示例，但是您可以在哪里使用它呢？让我们考虑几个用例。 #### 光线和阴影，带颗粒感渐变自然发生在哪里？例如，光线和阴影。我们可以利用CSS属性`mix-blend-mode`来平滑地混合渐变并选择性地过滤我们想要在噪点中看到的颜色。在“阴影”示例中，我们创建一个暗渐变，并将其反转以在“光线”示例中创建效果。在这两种情况下，`mix-blend-mode`都允许我们将它与其他渐变混合。 #### 全息箔大幅度的亮度和对比度增强创造了一种彩虹效果，让人联想起全息箔。 ### 进一步发展尝试游乐场并随意调整不同的参数，看看它们如何影响纹理。除此之外，以下是一些继续摆弄此技术的几种方法： - **使用不同的SVG:** 本文中的所有渐变都使用相同的SVG，但您可以调整生成噪点的参数以调整粗糙度以及游乐场中的外观和感觉。 - **尝试不同的渐变:** 除了`linear-gradient`之外，CSS还提供四种类型的渐变。你能说出它们的名字吗？（这是一个。） - **添加更多图层:** 使用CSS混合，您可以根据需要堆叠任意数量的图层并将它们混合在一起。 - **应用不同的SVG滤镜:** 有各种各样的滤镜，包括高斯模糊和不同类型的照明。此外，它们可以在CSS滤镜中引用并应用于除SVG之外的*任何*元素。您还能想到什么？请在评论中告诉我们您的发现。 ### 浏览器支持我们不能避免在这里谈论浏览器支持。此技术的核心受所有现代浏览器支持。正如您可能预期的那样，它在Internet Explorer中不起作用。也就是说，Internet Explorer确实支持SVG作为CSS中的背景（只是不支持实际的CSS滤镜属性）。 #### SVG作为CSS背景图像此浏览器支持数据来自Caniuse，其中包含更多详细信息。数字表示浏览器在该版本及更高版本中支持该功能。 #### 桌面</code><thead><tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr></thead><tbody><tr>
<td title="크롬 -"></td>
<td title="Firefox-"></td>
<td title="즉 -"></td>
<td title="가장자리 -"></td>
<td title="사파리 -"></td>
</tr></tbody>

#### 모바일/태블릿

로그인 후 복사

#### CSS 필터 효과이 브라우저는 Caniuse의 데이터를 지원하며 자세한 내용이 포함되어 있습니다. 이 숫자는 브라우저 가이 버전 에서이 기능을 지원하고 나중에이 기능을 지원한다는 것을 나타냅니다. #### 데스크탑

#### 모바일/태블릿

또한 Chrome 기반 브라우저 (예 : Chrome) 및 WebKit 기반 브라우저 (예 : Safari)는 'Mix-Blend-Mode'의 약간 다른 구현을 가지고 있으므로 CSS 믹스를 사용하는 경우 브라우저에서 테스트해야합니다. 내 프로젝트에서는 브라우저 별 미디어 쿼리를 사용하여 CSS의 작은 조정을 수동으로 조정하여 시각적 차이를 조정합니다. 그게 다야! 이제 SVG 필터를 마스터하고 CSS 필터를 배경으로 결합하는 방법을 마스터 했으므로 디자인에 깊이와 질감을 더할 수있는 또 다른 영리한 시각적이 있습니다.

위 내용은 거친 구배의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!