※ 원활한 사이트 이용을 위해 자바스크립트 사용을 허용해주세요.

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

이미지를 사용하지 않고 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/

카테고리
작성자
작성일
/ Last Updated:

댓글 기능 준비중입니다.

게시글에 문제가 있다면 자유게시판에 남겨주세요.
감사합니다.