box-reflect 반사 효과

See the Pen box-reflect 반사 by nilgi (@nilgi) on CodePen.

 

p {
    margin-bottom: 50px;
    width: 130px;
}

.below {
    -webkit-box-reflect: below; / 아래로 반사
}

.above {
    -webkit-box-reflect: above; / 위로 반사
}

.left {
    -webkit-box-reflect: left; / 왼쪽으로 반사
}

.right {
    -webkit-box-reflect: right; / 오른쪽으로 반사
}

.im1 {
    -webkit-box-reflect: right 30px; / 반사 사이에 공간 넣기
}

.gimg {
    margin-bottom: 200px;
    -webkit-box-reflect: below 0px linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.7)); / 그라디언트를 이용한 물에 비치는 모습 만들기.
}

 

• box-reflect는 아직 브라우저에서 기본 적용이 안 됨으로 -webkit-를 써야한다.