[2015.09.18] linear-gradient를 활용한 본문 영역 fade out 효과

CSS3 Gradients 를 활용한 fade효과. 간단하게 쓸수 있네요. 아이디어 굿! 

IE10 이상부터 사용가능.

* idea key point!!! 본문영역 위에 투명 그라데이션 배경을 덮어 씌우기

:after

background: linear-gradient(to top, #fff, #fff 10%, transparent);

- 설명 : 라인 그라데이션 - (아래에서) 위로, 흰색, 흰색의 10%, 투명색 순으로....

  

* Gradient 효과 설명 - http://www.w3schools.com/css/css3_gradients.asp

 

간단한 사용 예제 및 Demo

See the Pen WQQgLg by Cory Simmons (@corysimmons) on CodePen.