배경 그라데이션 효과 – CSS Gradient

CSS, 북마크

이미지를 사용하지 않고 CSS를 사용하여 div 또는 특정 태그의 배경에 Gradation 효과를 넣을 수 있다.

background: #397fb3; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(left, #139dba , #397fb3); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, #139dba, #397fb3); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, #139dba, #397fb3); /* For Firefox 3.6 to 15 */
background: linear-gradient(to right, #139dba , #397fb3); /* Standard syntax */

background: #397fb3; 는 Gradient 속성을 지원하지 않는 브라우저를 위한 기본 단색 배경이다.
위 속성을 입맛대로 커스텀 하기 힘들다면 Gradient CSS를 만들어주는 사이트를 방문하는것도 좋다.

http://www.colorzilla.com/gradient-editor/

BackgroundCSSgradient
블로그
프로젝트
스터디
포트폴리오