Programming/HTML CSS
선형 gradient 를 만듭니다. 예를 들어
<div class="div_grd"></div>
위와 같이 생성한 DIV에 gradient 를 적용하려면 다음과 같이 CSS를 작성합니다.
.div_grd {
   background: linear-gradient(15deg, red 0%, blue 100%);
   height: 200px;
  }
linear-gradient 속성을 배경에 지정하여 gradient를 적용하도록 하였으며 15도 각도로 처음에는 red로 시작하였다가 blue로 변화하도록 합니다.

만일 중간에 더 많은 색상을 지정하려면 원하는 색과 적용될 %를 추가적으로 넣어주면 됩니다.
linear-gradient(15deg, #ffffff 0%, yellow 50%, #000000 100%);

'Programming > HTML CSS' 카테고리의 다른 글

[CSS3] 선택자 - 상태 선택  (0) 2013.06.24
[HTML] base  (0) 2013.06.20
[CSS3] linear-gradient  (0) 2013.06.19
[CSS3] 선택자 - 자손 선택  (0) 2013.06.17
[HTML / HTML5] label  (0) 2013.06.13
[HTML5] header, nav, aside, section, article, footer (구조태그)  (0) 2013.06.12
0 0