티스토리 뷰




이걸 누가 CSS로 만들었다고 생각할까요?
linear-gradient를 이용해서 입체감 표현을 너무 잘 한 것 같아요~
소스를 보면 정말 정성이 보입니다.
더 대단한건 배경도 CSS로 만들었다는 사실^^


.capsule{
margin:70px auto;
position:relative;
z-index:2;
width:468px;
height:188px;
border-radius:80px;
background-color:rgba(255,255,255,.8);
box-shadow:
0 0 20px #000 inset,
0 0 2px rgba(0,0,0,.3),
0 0 2px 4px #fff,
0 0 3px 3px rgba(0,0,0,.3),
0 10px 0px 3px rgba(255,255,255,.5),
0 15px 0px 3px rgba(255,255,255,.3),
0 25px 20px 0 rgba(0,0,0,.25);
}

CSS3를 이미지든 그림자든 무한으로 쓸 수 있다는 
특징이 있는데요~
그걸로 인해서 다양한 명함효과를 단계별로 줄 수 있죠~
노가다 작업일 수도 있지만
뿌듯하겠죠^^




See the Pen CSS Capsule by Amos 2014-02-18 by Amos (@bad_printer) on CodePen.









댓글
댓글쓰기 폼