그림자 넣기!!

웹개발(프론트)

그림자 넣기!!

수달찌 2021. 2. 19. 11:57

그림자의 효과

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

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

그림자 함수 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;
}