[CSS] box-shadow 참고용

box-shadow  "태그에 그림자 효과 넣음"

/* x축 | y축 | 번짐정도 | 그림자 크기(퍼짐정도) | 그림자 색상 | 옵션(inset 등)  */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2) inset;

 

'x축, y축' : 수평축과 수직축을 의미한다. 음수 값을 사용할 수 있다. 
'그림자 번짐(번짐정도)' : 그림자의 퍼짐 정도를 나타낸다. 값이 커질수록 그림자의 테두리가 흐려지면서 밝아진다.
'그림자 크기': 그림자의 크기를 의미한다. 값이 커질수록 그림자 사이즈가 커지고, 반대는 작아진다.
'그림자 색상' : 그림자의 색상을 결정한다.
'inset'(옵션) : 그림자를 적용하는 태그의 내부에 그림자 효과를 넣는다.

 

적용

<!-- html -->
<div class ="container">
    <div class = "color1">color1</div> 
    <div class = "color2">color2</div> 
    <div class = "color3">color3</div> 
    <div class = "color4">color4</div> 
</div>

<!-- css -->
<style>

.container{
  display : flex;
}
    
.color1, .color2, .color3, .color4 {
  margin:10px;
  width:100px;
  height: 100px;
  background:black ;
  color:red; font-size: 20px;
  transition-property: box-shadow;
  transition-duration: 0.5s;
  transition-timing-function: ease-in-out;
}

]<!-- 레이어 형식으로 여러겹의 그림자를 생성할 수도 있다.  -->

.color1:hover{ <!-- inset을 설정하지 않으면 외각에서 그림자가 생긴다(기본값). -->
    box-shadow: -200px 0 50px 30px rgba(40, 50, 200, 1) ,
                200px 0 50px 30px rgba(40, 50, 200, 1) ,
                0 -200px 50px 30px rgba(40, 50, 200, 1),
                0 200px 50px 30px rgba(40, 50, 200, 1) ;
}
.color2:hover { <--! 그림자가 좌측과 우측, 아래에서 동시에 생긴다. -->  
    box-shadow: 200px 0 50px 30px rgba(40, 50, 200, 1) inset,
	       -200px 0 50px 30px rgba(40, 50, 200, 1) inset,
                0 -200px 50px 30px rgba(40, 50, 200, 1) inset
}
.color3:hover { <!-- 그림자가 좌측에서 우측으로 생긴다. -->
    box-shadow: 200px 0 50px 30px rgba(40, 50, 200, 1) inset	       
}
.color4:hover { <!-- 그림자가 우측에서 좌측으로 생긴다. --> 
    box-shadow: -200px 0 50px 30px rgba(40, 50, 200, 1) inset 
}

</style>

color1

color2

color3

color4

 

---

<참고 사이트>

• https://developer.mozilla.org/ko/docs/Web/CSS/box-shadow 

box-shadow - CSS: Cascading Style Sheets | MDN