css로 그라데이션 효과 주기
방법
background-image: linear-gradient(-90deg, #ff0000, #00ae00);
설명
· 그라데이션은 백그라운드-이미지로 설정가능하다.
· linear-gradient은 스타일임, linear는 선형, radial은 원형임.
· -90deg는 그라데이션의 각도,방향임.
· 첫번째 색(#ff0000)은 시작색
· 마지막 색(#00ae00)은 끝 색
색은 색이름(red, green...), rgb(255,255,255), #ff0000 등으로 표현가능하다.
background-image: linear-gradient(-90deg, #ff0000, #00ae00);  background-image: linear-gradient(90deg, #ff0000, #00ae00);  background-image: linear-gradient(0, #ff0000, #00ae00);  background-image: linear-gradient(180deg, #ff0000, #00ae00);  background-image: linear-gradient(90deg, red,orange,yellow,green,blue,indigo,violet);  background-image: linear-gradient(90deg, red,orange 30%,yellow 20%);  background-image: radial-gradient(circle, red, yellow, green);  *원형에서는 각도가 아닌 circle가 들어가야함.(생략가능) |
아쉽게도 아직까지 많은 브라우저들이 호환되지 않음.(ie10이상)
각각 브라우저에 맞춰 식별자를 넣어줘야 함.
-moz-border-radius : 파이어폭스
-webkit-border-radius : 사파리, 크롬
-ms-border-radius : 인터넷 익스플로러
-khtml-border-radius : 콘쿼러 웹 브라우저
-o-border-radius : 오페라
background: linear-gradient(180deg, red, blue);
background: -webkit-gradient(linear, 180deg, from(red), to(blue));
background: -webkit-linear-gradient(180deg, red, blue);
background: -o-linear-gradient(180deg, red, blue);
background: -moz-linear-gradient(180deg, red, blue);
