css 배경 이미지 넣기+블러 처리, div에 그림자 효과 넣기

 

오늘의 완성작~!! 끼햐~ 고작 가입화면 한장이지만 하루종일 고생해서 만들었다 ㅠㅠ 이미지도 나름 포토샵으로 보정해보고!

화면이 작아지면 옆에 있던 사진이 사라지고, 배경화면이 사진으로 뿅 바뀌는게 포인트! ㅎㅎ

모바일 화면이 바뀌는건 생각보다 만들기 엄청 쉬웠는데, 의외로 웹 화면에서 입력 폼이랑 사진이랑 나란히 뒀을 때 반응형으로 깔끔하게 구현이 안되서 넘 힘들었다... 계속 사진만 찌그러지고 ㅠㅠ

 

input이랑 button에 width: 100%로 줘서 반응형 만들고, 사진은 찌그러지기 전에 적당한 크기에서 모바일 버전 화면으로 바뀌도록

@media screen and (max-width: 44em)을 써줌.

모바일 화면에서 옆에 있던 사진이 사라지는 건 간단하게 display: none; 으로!

코드로 보면, 

@media screen and (max-width: 44em) {
    img {
        display: none;
    }

    body::before {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image: url(yoga3.jpg);
        background-size: cover;
        filter: blur(2px);
        z-index: -1;
        content: "";
    }

    .register-popUp {
        margin: 2em;
    }

    .web-left {
        padding: 4em;
    }
}

 

그리고 박스 쉐도우는 tobiasahlin.com/blog/layered-smooth-box-shadows/ 이 사이트를 참고! 좋은 예시 많음!

내가 참고한 코드는,

    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07),
        0 2px 4px rgba(0, 0, 0, 0.07),
        0 4px 8px rgba(0, 0, 0, 0.07),
        0 8px 16px rgba(0, 0, 0, 0.07),
        0 16px 32px rgba(0, 0, 0, 0.07),
        0 32px 64px rgba(0, 0, 0, 0.07);

 

마지막으로 나의 완성작 링크~~~

codepen.io/heesunparknl/pen/poyOaYo