정보실

웹학교

정보실

css box-shadow와 비슷하지만 요소 자체의 색상을 기반으로 그림자를 만들기

본문

HTML : 

<div class="dynamic-shadow"></div>



CSS : 

.dynamic-shadow {
  position: relative;
  width: 10rem;
  height: 10rem;
  background: linear-gradient(75deg, #6d78ff, #00ffb8);
  z-index: 1;
}
.dynamic-shadow::after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  background: inherit;
  top: 0.5rem;
  filter: blur(0.4rem);
  opacity: 0.7;
  z-index: -1;
}



  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기
  • 카카오톡으로 보내기

페이지 정보

조회 82회 ]  작성일18-06-14 11:39
css

웹학교