CSS GENERATOR들 모음 / CSS Maker들 모음(border-radius,text-shadow,font-face,box-sizing,transition,transform,filter,960 grid system)

CSS3 Ggenerator

http://css3generator.com

border-radius , box-shadow , text-shadow , rgba , font-face ,

multiple colums ,  box resize , box-sizing

outline , transition , transform , gradient

이런 것들을 직접 보면서 조절하면, 자동으로 CSS 코드를 생성시켜주는 generator다. 주로 필자는 text-shadow를 보면서 조절하기 위해 사용했는데, 웹 디자인시 많은 분들이 유용하게 사용 할 수 있을 것 같다.

CSS Filter Effects

http://html5-demos.appspot.com/static/css/filters/index.html

필자는 웹 디자이너가 아니다보니, 포토샵을 잘 다룰 줄 모른다. 아마도 대다수의 웹 개발하는 개발자가 그럴 것이다. 가끔 다양한 사진 효과를 사용해야할 경우가 있는데, 그럴 때 보통은 포토샵으로 편집해서 사용하면 되지만, 포토샵을 잘 다룰 줄 모르는 필자는 브라우저가 제공하는 filter 효과를 많이 사용한다. CSS를 외우고 있어도 햇갈릴 경우도 많고 적용 순서에 따라 효과가 천차만별이라 항상 오랜 시간이 걸려서 작업하곤 했는데, 이 generator는 편하게 보면서 필터 이펙트를 적용할 수 있게 해주고, 코드까지 완성해준다.

CSS filter를 사용할 때 엄청 유용하다.

CSS 3.0 MAKER

http://www.css3maker.com/css3-animation.html

위에 사이트와 비슷한 기능을 제공하는 css 3 메이커이다. 위와 마찬가지로

border-radius , gradient , css transform , css animation , css transition , rgba , text-shadow , box-shadow , text rotation, font face등을 보면서 설정하고 자동으로 CSS를 만들어주는 툴이다.

보통 여기서 필자는 css animation을 설정해서 사용하곤 한다.

CSS MATIC

http://www.cssmatic.com/noise-texture

위에 사이트들에 없는 기능을 하나 제공하는 사이트이다. noise texture을 보면서 설정할 수 있는데, 이는 순수 CSS로 제작된게 아니라 thumbr라는 곳에서 제공하는 api를 사용하여 만들어내는 effect인 듯. 가서 확인해 보시라. 정말 유용하다!

Grid SYSTEM

http://grids.heroku.com/

레이아웃을 잡을 때, grid를 간단히 계산해 주는 툴이다. 별거 아닌 것 같지만, 노벨 평화상을 주고 싶을 만큼 짜증을 줄여준다. 항상 매우 유용히 사용해서 소개한다. CSS 파일 다운로드 기능도 제공한다.