그림자 넣기!!

목차

• 그림자의 효과
• 그림자 함수 box-shadow
  • box-shadow 구조
    • 가로 / 세로위치
    • 흐려지게 만들기
    • 그림자 크기 조절
  • 그림자 여러개 만들기
• 마치며
  • 참고하면 좋은 사이트!!
  • 끗!

 

그림자의 효과

그림자는 웹디자인에서 입체감 / 깊이를 주는 아주 좋은 요소이다.

(내가 정말정말정말 좋아하는 요소이다!!)

 

그림자 함수 box-shadow

div{
    box-shadow: 10px 5px 5px #aa96da;
    



    width: 100px;
    height: 100px;
    background : #a8d8ea;
    border-radius: 10px;
}

정말정말 이쁘다!!

box-shadow 구조

div{
    box-shadow: 200px 200px 10px 50px #aa96da;



    width: 100px;
    height: 100px;
    background : #a8d8ea;
    border-radius: 10px;
}

 

 

가로 / 세로위치

첫번째 두번째 인자는 가로 / 세로위치를 뜻하며,

기본적 그림자 크기는 대상의 크기와 같다.

div{
    box-shadow: 200px 200px #aa96da;



    width: 100px;
    height: 100px;
    background : #a8d8ea;
    border-radius: 10px;
}

그림자가 머나먼 우주 저 너머로~

흐려지게 만들기

그림자의 크기에서 값 만큼 흐려지면서 더 그려진다.

div{
    box-shadow: 200px 200px 10px #aa96da;
    



    width: 100px;
    height: 100px;
    background : #a8d8ea;
    border-radius: 10px;
}

그림자 크기 조절

기본값(대상의 크기)에서 값만큼 더해준다.

div{
    box-shadow: 200px 200px 10px 50px #aa96da;



    width: 100px;
    height: 100px;
    background : #a8d8ea;
    border-radius: 10px;
}

 

그림자 여러개 만들기

그림자는 여러개 생성도 가능하다!!!

div{
    box-shadow: 5px 5px rgba(170, 150, 218, 0.4),
                10px 10px rgba(170, 150, 218, 0.3),
                15px 15px rgba(170, 150, 218, 0.2),
                20px 20px rgba(170, 150, 218, 0.1),
                25px 25px rgba(170, 150, 218, 0.05);
    



    width: 100px;
    height: 100px;
    background : #a8d8ea;
    border-radius: 10px;
}

마치며

 

 

 

참고하면 좋은 사이트!!

좋아하는 스타일은 모두가 있지만

그때그때 처음부터 만들기엔 우리의 일은 태산같다.

그럴때 참고하면 좋은 사이트!!!

 

CSS Scan - The fastest and easiest way to check, copy and edit CSS

210219_당시_사이트화면

 

정말... 정말좋아....

끗!