본문 바로가기

IT/사이트

괜찮은 CSS 패턴 사이트들

반응형


요즘은 웹페이지를 디자인할때 대부분 CSS로 많이들 합니다.

예전에는 웹요소들을 만들때 Photoshop을 이용하곤 했습니다. 버튼이나 바, 아이콘등을 Photoshop으로 만들고 웹페이지에 적용 시겼죠.

하지만 지금은 CSS3로 거의 모든 요소들을 만들 수 있기도 하고, 반응형 웹사이트를 만들경우 이미지 요소는 레이아웃을 흩어지게 하기 때문에 잘 사용하지 않습니다.


그럼에도 불구하고 백그라운드의 패턴 같은 경우는 CSS로 만드는 것보다는 이미지를 사용하는 것이 웹페이지를 더욱 멋지게 만들 수 있습니다.

그래서 오늘은 background의 이미지 패턴 사이트 1곳과 CSS3로 만들어진 패턴사이트 1곳, 그리고 웹상에서 스스로 패턴을 만들어 볼 수 있는 곳 1곳을 소개해 드리겠습니다.


이미지 패턴 사이트 : http://subtlepatterns.com/

현재 387개의 패턴이 등록되어 있으며 Preview 버튼을 클릭하면 웹상에서 바로 적용된 모습을 확인해 볼 수 있습니다. 꽤 괜찮은 것들이 많이 있으니 한번 구경해 보세요.




CSS3 패턴 갤러리 사이트 : http://lea.verou.me/css3patterns/

패턴이 많이 있지는 않지만 적용된 모습을 즉시 볼 수 있고, CSS code를 바로 복사할 수 있으니 자신의 홈페이지에 금방 테스트 해 볼수 있겠죠.




CSS패턴 만들기 사이트 : http://www.patternify.com/

아래 사진에서 보듯이 자신이 클릭해가면서 색상, 크기, 투명도 등을 조절할 수 있습니다. Preview 창을 보면서 만들 수 있으니 편해요 png파일로 다운로드 가능합니다.




즐거운 하루 되세요.


반응형