본문 바로가기

Image/Background

SVG를 이용한 백그라운드 마스크 효과 애니메이션 See the Pen CSS / SVG Blobby Background original with JS - firefox? by Cassie Evans (@cassie-codes) on CodePen. SVG를 이용한 백그라운드 마스크 효과 애니메이션
클릭할 때마다 백그라운드가 바뀌는 애니메이션 See the Pen HTML Buddies & : bad kids’ jokes by Jessica Paoli (@skullface) on CodePen. 클릭할 때마다 백그라운드가 바뀌는 애니메이션
드래그하여 백그라운들 컨트롤하는 애니메이션 See the Pen 5-Way Gradient Generator by Matthew Fournier (@mattyfours) on CodePen. 드래그하여 백그라운들 컨트롤하는 애니메이션
백그라운드 이미지 구성을 나타내는 스크립트 See the Pen Background Comparison by Paulina Hetman (@pehaa) on CodePen. 백그라운드 이미지 구성을 나타내는 스크립트
분홍색 원형의 백그라운드 패턴 See the Pen background-pattern by Webstoryboy (@webstoryboy) on CodePen. 분홍색 원형의 백그라운드 패턴입니다. CODE
원형 닷 모양의 배경 백그라운드 패턴 See the Pen background-pattern by Webstoryboy (@webstoryboy) on CodePen. 원형 닷 모양의 배경 백그라운드 패턴입니다. repeating-radial-gradient를 이용한 효과입니다. CODE
닷 배경의 백그라운드 패턴 See the Pen background-pattern by Webstoryboy (@webstoryboy) on CodePen. 닷 배경의 백그라운드 패턴입니다. repeating-radial-gradient를 이용한 효과입니다. CODE
어두운 느낌의 배경 백그라운드 패턴 See the Pen background-pattern by Webstoryboy (@webstoryboy) on CodePen. 어두운 느낌의 배경 백그라운드 패턴입니다. linear-gradient를 이용한 효과입니다. CODE
unsplash 이미지 배경 랜덤으로 가져오기 See the Pen Background API by Webstoryboy (@webstoryboy) on CodePen. unsplash 이미지 배경 랜덤으로 가져오기 예제입니다. unsplash API를 이용한 배경 효과입니다. CODE
랜덤 그라디언트 백그라운드 소스입니다. See the Pen Random Gradient Background by Webstoryboy (@webstoryboy) on CodePen. 랜덤 그라디언트 백그라운드 소스입니다. CODE
반복적인 패턴 배경의 백그라운드 See the Pen Repeating-linear-gradient background by Webstoryboy (@webstoryboy) on CodePen. 반복적인 패턴 배경의 백그라운드입니다. repeating-linear-gradient 속성을 이용한 효과입니다. CODE
3초에 한번씩 백그라운 배경색 변경하기 See the Pen Background Effect2 by Webstoryboy (@webstoryboy) on CodePen. 3초에 한번씩 백그라운 배경색 변경하기 소스입니다. CODE
마우스 방향에 따라 백그라운드 색 변형하기 See the Pen Background Effect1 by Webstoryboy (@webstoryboy) on CodePen. 마우스 방향에 따라 백그라운드 색 변형하기 소스입니다. CODE
모눈종이 모양의 백그라운드 패턴 디자인 See the Pen background-pattern by Webstoryboy (@webstoryboy) on CodePen. 모눈종이 모양의 백그라운드 패턴 디자인입니다. CODE
기왓장 느낌의 백그라운드 패턴 배경 See the Pen background-pattern by Webstoryboy (@webstoryboy) on CodePen. 기왓장 느낌의 백그라운드 패턴 배경입니다. CODE
블루프린트 백그라운드 디자인 배경 패턴 See the Pen background-pattern by Webstoryboy (@webstoryboy) on CodePen. 블루프린트 백그라운드 디자인 배경 패턴입니다. CODE
짚 모양의 백그라운드 배경 패턴 See the Pen background-pattern by Webstoryboy (@webstoryboy) on CodePen. 짚 모양의 백그라운드 배경 패턴입니다. CODE
큐브모양의 백그라운드 패턴 이미지 See the Pen background-pattern by Webstoryboy (@webstoryboy) on CodePen. 큐브모양의 백그라운드 패턴 이미지입니다. CODE
검은색 배경의 닷 백그라운드 패턴 \ See the Pen background-pattern by Webstoryboy (@webstoryboy) on CodePen. 검은색 배경의 닷 백그라운드 패턴입니다. CODE
페이퍼 느낌의 백그라운드 패턴 See the Pen background-pattern by Webstoryboy (@webstoryboy) on CodePen. 페이퍼 느낌의 백그라운드 패턴입니다. CODE
카본 섬유의 느낌을 주는 백그라운드 패턴 See the Pen background-pattern by Webstoryboy (@webstoryboy) on CodePen. 카본 섬유의 느낌을 주는 백그라운드 패턴입니다. CODE
CSS3를 이용한 백그라운드 패턴 See the Pen pqexML by Webstoryboy (@webstoryboy) on CodePen. CSS3를 이용한 백그라운드 패턴입니다. CODE
별 배경의 백그라운드 패턴 이미지 See the Pen background-pattern by Webstoryboy (@webstoryboy) on CodePen. 별 배경의 백그라운드 패턴 이미지입니다. CODE
웨이브 모양의 배경 패턴 백그라운드 See the Pen yGMRrK by Webstoryboy (@webstoryboy) on CodePen. 웨이브 모양의 배경 패턴 백그라운드입니다. CODE
명품가방 패턴 느낌의 백그라운드 See the Pen background-pattrens by Webstoryboy (@webstoryboy) on CodePen. 명품가방 패턴 느낌의 백그라운드입니다. CODE
카본 느낌의 백그라운드 패턴 See the Pen background-patterns by Webstoryboy (@webstoryboy) on CodePen. 카본 느낌의 백그라운드 패턴입니다. CODE
크로스 라인과 닷 모양의 백그라운드 패턴 See the Pen background-patterns by Webstoryboy (@webstoryboy) on CodePen. 크로스 라인과 닷 모양의 백그라운드 패턴입니다. CODE
지그재그 모양의 빨간색 백그라운드 패턴 See the Pen background-patterns by Webstoryboy (@webstoryboy) on CodePen. 지그재그 모양의 빨간색 백그라운드 패턴입니다. CODE
화살표 무늬의 백그라운드 패턴 See the Pen background-patterns by Webstoryboy (@webstoryboy) on CodePen. 화살표 무늬의 백그라운드 패턴입니다. CODE
삼각형 무늬의 파란색 백그라운드 패턴 See the Pen background-patterns by Webstoryboy (@webstoryboy) on CodePen. 삼각형 무늬의 파란색 백그라운드 패턴입니다. CODE