box-shadow로 border 만들기

#after vs box-shadow

 

box-shadow로 그림자만 만들 줄 알았지

border를 만들다니? 라고 생각 하실 수 있지만

이게 엄청 유용했다.

 

Why? 이 코드를 보면 바로 납득이 된다.

 

 

 

 

 

이렇게 글자 밑에 형관펜 같은 효과를 넣는 디자인을 본적이 있지 않은가?

예전에 ie가 있을때 after로 효과를 많이 넣어서 습관처럼 넣고 있다가

box-shadow 로 아주 쉽게 할 수 있는 것을 알아서 써먹기 시작했다.

파폭, 오페라, 크롬, 브레이브, 엣지 등등에서 아주 잘먹는다.

한줄이면 끝나는 코드를 그동안 여러줄을 써댔는대 정말 편하다.

 

그렇다면 inset이 뭘까?

 

728x90

 

#inset

 

값을 지정하지 않으면 요소바깥으로 떠있는 것처럼 그림자가 생기지만 지정하게 되면 내부 콘텐츠 안으로 생성이 된다.

spread-radius를 지정하지 않으면 번짐효과가 없으므로 border처럼 보이게 되는 것이다.

 

#형광펜 효과

 

/* inset | offset-x | offset-y | color */
box-shadow: inset 5em 1em gold;

 

보통 border을 쓰면 해당 영역 바깥쪽에 생성이 되지만 inset을 쓰면 영역 내부로 생성이 된다.

 

box-shadow: inset 왼쪽부터 위쪽부터 색상;

 

이렇게 쓰게 되면 필자와 마찬가지로 같은 효과를 낼수 있다. 

음수(-)를 쓰면 방향이 반대로 된다.

 

 

#해당영역 안쪽으로 border 주기

 

 

/* offset-x | offset-y | spread-radius | 굵기 | color */
box-shadow: 0 0 0 3px inset pink;

 

inset을 찾다가 흥미로운것을 알았는대 해당영역 아예 안쪽으로 border을 줄때 매우 유용한 코드이다.

 

예전에는 after을 준 후 absolute로 처리하던것이 이렇게 쉽게 처리되어 너무 편안하다.

도움이 많이 된 코드 이다.

 

👀 box-shadow 알아보기