모바일 퍼블리싱에서 자주 사용하는 css3 속성들

1. Gradient background

background: linear-gradient(to bottom right, red , blue);

background: radial-gradient(red 5%, green 15%, blue 60%);




css3의 등장 이전에는 그라디언트 효과를 내기 위해 이미지를 사용했지만 css3 그라디언트 속성을 이용해 표현함으로써 이미지 다운로드 시간을 줄일수 있고, 화면 확대시 이전에 비해 더욱 선명한 결과물을 얻을 수 있는 장점이 있다.

2. border-radius

div{border: 2px solid #a1a1a1;border-radius: 25px;}




둥근 모서리 처리를 위해 기존의 퍼블리싱 방식처럼 각 모퉁이 마다 이미지를 사용할 필요없이 border-radius 속성을 이용해 css 코드만로 쉽게 둥근 모서리 박스를 만들 수 있다.

3. text-shadow

h1{text-shadow: 5px 5px 5px #FF0000;}




텍스트에 그림자 효과를 부여해 가시성과 디자인 퀄리티를 높여 줄 수 있다.

4. box-shadow

div{box-shadow: 10px 10px 5px #888888;}




박스에 그림자 효과를 부여해 기존에는 이미지로 표현해야 했던 부분을 css3 코드로 표현이 가능하다.