CSS로 만든 배경

이러한 패턴 패턴을 CSS로만 만들었습니다.

linear-gradient 및 radial-gradient 및 repeating-linear-gradient

CSS3에서 추가된 선형 그라데이션 linear-gradient 와 원형 그라데이션 radial-gradient 를 사용하면 다양한 패턴을 표현할 수 있습니다.background-size 속성을 결합하면 CSS만으로 배경 이미지를 만들 수 있습니다.
CSS3를 지원하는 브라우저가 늘어나고 있는 현재는 대부분의 패턴이 CSS만으로 작성 가능하게 되어 있습니다.
또한 repeating-linear-gradient를 사용하면 복잡한 스트라이프 패턴을 쉽게 만들 수 있습니다.

작성 방법의 예는 여기에 썼습니다.
CSS만으로 복잡한 배경 이미지를 만들어보세요

사이트를 만들었습니다.

CSS만으로 풍부한 배경 이미지를 만들 수 있는 사이트 elastic CSS라는 사이트를 만들었습니다.

Elastic | A collection of background image created by CSS only


대응 브라우저는 모던 브라우저와 ie10 이후가 되어 있습니다
github : htps : // 기주 b. 코 m / 소 r / 에 s c

그건 그렇고,이 사이트는 ReactJS를 사용하여 만들었습니다.
webpack을 사용한 ReactJS의 환경 구축 방법은 여기에 쓰여져 있습니다.
webpack에서 react, scss 컴파일 및 ESLint를 설정하는 방법
참고하십시오.

추가

애니메이션 할 배경 이미지를 만들고 추가했습니다.

@keyframe 을 사용하면 css를 동적으로 임의의 타이밍으로 애니메이션시킬 수 있기 때문에 이것을 사용하여 작성했습니다.

간단한 사용법은 여기에 써 있습니다.
CSS의 @keyframe, animation 속성 사용법
↑ 의 배경에도 사용하고 있습니다.

이전 여기에서 소개한 사이트에도 추가했으므로 좋으면 활용하십시오.

Elastic | A collection of background image created by CSS only

코드는 여기에 올라 있습니다.
htps : // 기주 b. 코 m / 소 r / 에 s c