모든 종류의 멋진 배경을 만들기위한 CSS 기발한 배경 (1 부) ...

이 문서에서는 CSS의 일부 다룰 것입니다 background, mix-blend-mode, mask 일부 약간 더 복잡하고 멋진 배경을, 일부 관련 속성을.

이 기사를 통해 CSS 배경의 더 강력한 사용에 대해 배우고 배경과 관련된 일부 속성을 사용하여 다양한 방법을 사용하여 더 복잡한 배경 패턴을 만드는 방법을 배웁니다. 이 과정에서 다양한 그라데이션 기법을 더 잘 이해하고 다양한 그라데이션에 대해 더 깊이 이해할 수 있습니다.

동시에 강력한 CSS-Doodle의 도움으로 규칙 집합을 사용하여 여러 가지 임의의 패턴을 빠르게 만들고 CSS의 힘을 느끼고 CSS의 아름다움에 들어가는 방법을 배우게됩니다.

배경 기본

우리 모두는 CSS background 가 매우 강력 하다는 것을 알고 있습니다.

우선 기본 사항을 복습하고 일상 생활에서 다음 4 가지 유형을 가장 많이 사용해야합니다.

단색 배경 background: #000:

선형 그래디언트 background: linear-gradient(#fff, #000) :

방사형 그래디언트 background: radial-gradient(#fff, #000) :

각도 그라데이션 background: conic-gradient(#fff, #000) :

고급 배경

물론이야. 기본 그라디언트를 마스터 한 후 더 복잡한 배경 패턴으로 이동하기 시작했습니다. 나는 책 "CSS Secret"에서 다양한 배경 패턴을 얻기 위해 그라디언트를 사용하는 것에 대해 처음 배웠다. 그런 다음 계속 탐구하고 시도하고 경험을 요약했습니다.

더 복잡한 배경을 만들기 위해 그라디언트를 사용하기 전에 다음과 같은 몇 가지 중요한 팁이 있습니다.

그라데이션뿐만 아니라 개인이다 linear-gradient 또는 개인 radial-gradient을 위해, background 그것은, 오버레이 다수의 그라데이션의 지원이 매우 중요하다;
유연한 사용 repeating-linear-gradeint( repeating-radial-gradeint), 많은 코드를 줄일 수 있음
transparent 투명성은 어디에나 있습니다
시도 mix-blend-mode 및 mask복잡한 패턴의 영혼을 만들
랜덤 변수를 사용하면 아이디어를 수많은 아름다운 패턴으로 바꿀 수 있습니다.

다음으로 조합 여행을 시작하십시오.

혼합 혼합 모드 사용

혼합 혼합 모드, 혼합 모드. 포토샵에서 가장 흔히 볼 수있는이 기능은 PS에서 가장 강력한 기능 중 하나입니다. CSS에서는 혼합 모드를 사용하여 여러 레이어를 혼합하여 새로운 효과를 얻을 수 있습니다.

혼합 모드의 기본적인 사용법은 다음 기사를 참조하십시오.

그런 다음 첫 번째 패턴을 시도해보고 mix-blend-mode 그 기능을 간단히 경험해 보겠습니다 .

우리는 사용하십시오 repeating-linear-gradient 반대 각도와 두 배경 스트라이프 이미지를 만들 그라디언트 선형 반복했다. 일반적으로 혼합 모드를 사용하지 않고 두 패턴을 함께 겹쳐서 어떤 일이 발생하는지 확인하십시오.

어, 무슨 일이 일어나는가 유령 : sweat_smile :. 분명히 패턴이 투명하지 않기 때문에 겹쳐진 후 겹쳐진 관계로 인해 사진 중 하나만 볼 수 있습니다.

자, 이것을 기준으로 우리 는 최상위 레이어 패턴에 추가하고 mix-blend-mode: multiply이번에 무슨 일이 일어나는지 다시 확인합니다.

블렌딩 모드를 추가 한 후 특정 알고리즘을 통해 두 개의 배경 이미지가 중첩되어 매우 아름다운 패턴 효과를 보여줍니다. 이것이 바로 우리가 원하는 것입니다.

CodePen 데모-반복 선형 그라데이션 배경 및 혼합 혼합 모드

다른 시도 `mix-blend-mode`

그렇다면 왜 위에서 사용 mix-blend-mode: multiply 됩니까? 다른 하이브리드 모드를 사용할 수 있습니까?

물론 가능합니다. 이것은 단지 예일 뿐이며 레이어 블렌딩 모드의 어둡게하기 모드 그룹 중 하나에 속하는 mix-blend-mode: multiply PS 에서 곱함 을 의미 합니다.

위의 데모를 사용하고 다른 혼합 모드를 시도하여 다른 효과를 얻습니다.

서로 다른 블렌딩 모드의 중첩 효과가 매우 다르다는 것을 알 수 있습니다. 물론 다양한 블렌딩 모드를 사용하여 다양한 효과를 가진 패턴을 만들 수도 있습니다.

CodePen 데모-반복 선형 그라데이션 배경 및 혼합 혼합 모드

CSS-Doodle로 무작위로 패턴 생성

이 시점에서 CSS-CSS-Doodle 작성을위한 아티팩트를 소개해야합니다 . 다른 많은 기사에서 CSS-doodle에 대해 여러 번 언급했습니다. 요컨대 Web-Component 기반 라이브러리입니다. CSS 그리드 레이아웃을 기반으로 페이지를 신속하게 생성 할 수 있으며 다양한 편리한 지침과 기능 (랜덤, 루프 등)을 제공하여 일련의 규칙을 통해 다양한 CSS 효과를 얻을 수 있습니다.

위의 데모를 예로 들어 repeating-linear-gradient 생성 된 반복 스트라이프 배경의 색상, 두께 및 각도를 무작위로 지정하고 혼합 모드를 무작위로 선택한 다음 CSS-Doodle을 사용하여이 규칙에 따라 빠르고 무작위로 다양한 패턴을 만듭니다.

클릭하여 사용해보고 마우스를 클릭하여 무작위로 다른 효과를 생성 할 수 있습니다.

CodePen 데모-CSS Doodle-CSS MIX-BLEND-MODE 배경

방사형 그래디언트를 사용해보십시오

물론 위에서는 선형 그래디언트 가 사용 되었으며, 마찬가지로 방사형 그래디언트 에도 동일한 루틴 을 사용할 수 있습니다 .

방사형 그래디언트를 사용하여 여러 방사형 그래디언트를 생성 할 수 있습니다. 이렇게 :

이미지 응용 프로그램 background-size에서는 다음과 같이 표시됩니다.

위와 같이이 그래픽을 약간 변형 한 다음 두 레이어를 겹쳐서 가장 위에있는 그래픽에 CSS 스타일을 추가합니다 mix-blend-mode: darken.

CodePen 데모-방사형 그래디언트 및 혼합 혼합 모드 데모

CSS-Doodle로 무작위로 패턴 생성

다시 한 번, CSS-Doodle을 사용하고 위의 규칙을 사용하여 방사형 방향으로 그라데이션하고 흥미로운 배경 이미지를 얻을 수 있습니다.

클릭하여 사용해보고 마우스를 클릭하여 무작위로 다른 효과를 생성 할 수 있습니다.

CodePen 데모-CSS Doodle-CSS MIX-BLEND-MODE 배경 2

물론 위에서 언급 한 중첩은 매우 단순한 패턴의 중첩이지만이 원칙을 숙달 한 후에는 직접 시도하여 더 복잡한 융합을 만들 수 있습니다. :개:

위에서 언급 한 중첩 효과는 블록버스터의 단색의 중첩을 기반으로하며, 물론 mix-blend-mode 실제 그라데이션과 충돌하여 더 많은 불꽃을 생성 할 수 있습니다.

다양한 그라데이션 배경에서 혼합 모드 사용

다양한 그라데이션 배경에서 혼합 모드를 사용 하시겠습니까? 어떤 놀라운 효과가있을 것입니까?

올바르게 사용하면 다음과 같이 보일 수 있습니다.

음, 위의 스트라이프 패턴과는 완전히 다른 스타일입니다.

당신은에 찌를 수 gradienta.io 모습을 가지고, 여기에 CSS를 사용하여 만든 그라디언트 오버레이 배경 패턴 라이브러리입니다.

혼합 모드를 사용하여 다양한 그라디언트 패턴 오버레이

아래에서도 하나를 구현합니다.

먼저 다음과 같이 선형 그래디언트 또는 방사형 그래디언트를 사용하여 원하는대로 여러 그래디언트 패턴을 만듭니다.

그런 다음, 우리의이 두 사이에 다섯 혼합 모드의 총을 설정하는 혼합 모드 중첩, 필요를 사용하여, 두 번째 레이어에서 시작, 여기에 내가이를 사용 overlay, multiply, difference, difference, overlay. 스태킹 후 효과를보세요. 매우 좋습니다.