CSS3만으로 이미지에 효과주기

SHARE

CSS3를 사용한 이미지 효과, 스타일링을 모아봤습니다.
포토샵으로 처리하기보다 CSS3로 처리하는 편이 수정작업에도 편리하겠죠.
※ 편의상 모든 CSS에는 벤더 프리픽스를 기입하지 않았습니다.
※ 각 수치는 각자의 상황에 따라 맞추시길 바랍니다.

목차

  1. 그림자 효과
  2. 페이지 넘기는 효과
  3. 토이카메라 필터 효과
  4. 컬러 조절
  5. 회전
  6. 둥근 모서리 만들기
  7. 타원
  8. 동그라미 프레임
  9. 정삼각형 프레임
  10. 겹쳐보이는 이미지
  11. 테두리 뿌옇게 처리하기
  12. 페이드효과(그림자)
  13. 페이드효과(그라데이션)
  14. 반사효과
  15. New
  16. 사진첩에 끼운 것 같은 이미지
  17. 이미지는 그대로에 프레임만 기울이기
  18. 반투명 프레임

공통되는 html

01. 그림자 효과

CSS3로 이미지에 효과주기-스타일링하기

box-shadow를 이용해서 이미지에 그림자 효과를 줍니다.

css

02. 페이지 넘기는 효과

CSS3로 이미지에 효과주기-스타일링하기

이미지 자체를 넘길 수는 없기 때문에, after요소를 이용해 한쪽 코너에만 그림자 효과를 주고, transform으로 살짝 회전을 주어 페이지를 넘기는 효과를 낼 수 있습니다.

css

03. 토이카메라 필터 효과

CSS3로 이미지에 효과주기-스타일링하기

이미지 안쪽으로 그림자를 주기 위해, position요소를 이용해서 이미지 위로 그림자를 겹치도록 올려 놓을 수가 있습니다. 여기서는 after에 그림자 효과를 입히고 position을 이용하여 이미지 위로 그림자를 겹쳐주었습니다.

css

04. 컬러 조절

CSS3로 이미지에 효과주기-스타일링하기

after에 배경색을 rgba로 지정해서 반투명으로 설정, position을 이용하여 이미지 위로 핑크색을 입혔습니다.

css

05. 회전

CSS3로 이미지에 효과주기-스타일링하기

transform의 rotate를 이용하면 이미지를 회전시킬 수 있습니다. 살짝 기울이는 것만으로도 그럴듯한 분위기를 낼 수 있지요.

css

06. 둥근 모서리 만들기

CSS3로 이미지에 효과주기-스타일링하기

border-radius를 이용해서 이미지 모서리를 둥글게 처리할 수 있습니다. 포인트는 이미지 태그에 직접 border-radius를 설정해주는 것입니다.

css

07. 타원

CSS3로 이미지에 효과주기-스타일링하기

직사각형의 이미지의 모서리에 border-radius를 크게 주면 됩니다. 직사각형의 이미지는 타원이 되고, 정사각형의 이미지는 동그란 원이 됩니다. 직사각형의 이미지를 동그라미 원으로 표현하는 방법은 8번에서 알려드리겠습니다.

css

08. 동그라미 프레임

위에서도 말씀드렸지만, border-radius 설정만으로는 이미지의 사이즈에 따라서 예쁜 원을 표현하기가 어렵습니다. 여기서 이미지을 배경으로 지정하는 테크닉이 필요합니다. 이미지태그를 쓰지 않고, CSS에 background-image로 이미지를 설정합니다. div요소를 block화 해서 모서리를 둥글게 설정합니다.

html

css

안쪽으로 그림자효과를 주면 또 다른 분위기를 낼 수 있습니다.

09. 정삼각형 프레임

CSS3로 이미지에 효과주기-스타일링하기

사용하는 일은 거의 없을지도 모르지만 삼각형 프레임도 만들 수 있습니다. 삼각형을 만드는 방법은 여러가지가 있습니다만, 여기서는 배경그라데이션을 이용해서 표현해보겠습니다.
그라데이션을 두 개 겹치는 것으로 각각 왼쪽상단, 오른쪽상단에 색을 칠해서 각도를 만들 수 있습니다. border를 이용하는 방법도 있습니다만, 여기서는 제일 간단한 방법으로 소개하도록 하겠습니다.

css

10. 겹쳐보이는 이미지

CSS3로 이미지에 효과주기-스타일링하기

after요소를 transform를 사용하여 회전 시키는 것으로 이미지가 겹쳐보이는 식으로 만들 수 있습니다. after요소를 position:absolute 설정해서 회전시킵니다. 같은 방법으로 before요소에 한장 더 겹치게끔 표현할 수 있습니다.

css

11. 테두리 뿌옇게 처리하기

CSS3로 이미지에 효과주기-스타일링하기

안쪽으로 배경색과 같은 그림자를 주면 테두리를 뿌옇게 처리할 수 있습니다. 이 경우에도 after요소를 사용합니다. 그림자와 배경색을 같은 색으로 하는 부분에 주의합시다. 포인트는 뿌옇게 만들기 위해 그림자를 여러겹 겹치는 점입니다.

css

12. 페이드효과(그림자)

CSS3로 이미지에 효과주기-스타일링하기

테두리를 뿌옇게 만드는 것을 응용해서 그림자의 위치를 바꾸는 것으로 이미지의 한쪽 부분에 페이드 효과를 줄 수 있습니다. 단, 이 방법은 수정이 불편하기 때문에 13번에서 소개하는 방법을 응용하는 것이 좋을 것 같습니다.

css

13. 페이드효과(그라데이션)

CSS3로 이미지에 효과주기-스타일링하기

위와 같은 페이드 효과를 배경 그라데이션을 이용해 만들 수 있습니다. 이 방법은 그라데이션을 상세하게 설정 가능하기 때문에 수정이 용이합니다.linear-gradient을 사용해 배경색을 입히는 것으로 페이드효과를 만들 수 있습니다. linear-gradient의 옵션이 다양하기 때문에 각도를 바꾸거나, 미묘한 페이드효과를 조절할 수 있는 것이 이 방법의 큰 장점입니다.

css

예를들어 linear-gradient 대신에 원형의 그라데이션을 이용하면 아래와 같은 효과를 만들 수 있습니다.

CSS3로 이미지에 효과주기-스타일링하기

14. 반사효과

CSS3로 이미지에 효과주기-스타일링하기

이미지의 한쪽 코너에 빛이 비추는 듯한 연출을 할 수 있습니다. 이 효과도 위의 페이드 효과와 마찬가지로 그라데이션을 지정해서 만들 수 있습니다. after요소를 position: absolute를 이용해 이미지의 위로 겹쳐서 그라데이션의 수치를 조절하는 것으로 빛이 비추는 것처럼 표현할 수 있습니다.

css

15. New

CSS3로 이미지에 효과주기-스타일링하기

after요소를 응용하면 위와 같은 표현도 가능합니다. after요소를 position:absolute를 이용하여 회전시킵니다. 포인트는 overflow:hidden를 입력하여 불필요한 부분을 가려주는 점입니다. 또 리본을 이미지를 살짝 감싸고 있는 듯한 느낌을 주기 위해 padding:1px을 설정해 줍니다.

css

16. 사진첩에 끼운 것 같은 이미지

CSS3로 이미지에 효과주기-스타일링하기

위의 New설정과 같은 방법을 이용해 사진첩에 끼워진 듯한 표현이 가능합니다. 더 잘 표현하기 위해 그림자를 이용해 조절하는 것이 포인트! after와 before요소를 30도 회전시켜 각각을 왼쪽 위, 오른쪽 아래에 배치합니다.

css

17. 이미지는 그대로에 프레임만 기울이기

CSS3로 이미지에 효과주기-스타일링하기

이미지를 회전시키는 것은 transform으로 가능하지만 사진까지 함께 회전시켜버리게 됩니다. 이미지 위 요소를 전체 회전 시킨 후 이미지만을 반대로 원위치 시키면 위와 같은 표현이 가능합니다.

css

18. 반투명 프레임

마지막으로 반투명 프레임을 만드는 방법입니다. 이미지의 주인공에게 포커스를 맞추고 싶을 때 사용할 수 있습니다. 이미지태그가 아닌 배경이미지를 사용합니다. border의 색을 반투명으로 설정하는 방법입니다.

css

댓글

  1. yrr 댓글:

    13번 그냥 갖다붙여서 적용했는데도 안돼요 ㅠㅠ 왜그럴까요

    • nanati 댓글:

      어디에 어떻게 갖다 붙이셨는지 알려주셔야
      해결 방법을 알려드릴 수가 있어요^^;;

      • yrr 댓글:

        .effect {
        display: inline-block;
        position: relative;
        }
        .effect:after {
        position: absolute;
        display: block;
        content: “”;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(left, rgba(255, 255, 255, 0) 40%, #fff 100%);
        }

        img자체에도 줘보고 div에도 줘봤는데 안되어서.. ㅠㅠ
        어디가 잘못된건가요?

        • yrr 댓글:

          .effect {
          display: inline-block;
          position: relative;
          }
          .effect:after {
          position: absolute;
          display: block;
          content: “”;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: linear-gradient(left, rgba(255, 255, 255, 0) 40%, #fff 100%);
          }

          <–!위에 글삭제가 안되네요. 이대로 했습니다!

          • yrr 댓글:

            어랏; 태그복사가 안되는군요. 도배하는거같아 죄송합니다. 불필요한 글삭제부탁드릴게요. 바디안에 이미지클래스에도 줘보고 div클래스에도 줘봤는데 그라디언트가 안됩니다.

            • nanati 댓글:

              css는 그대로 쓰셨다 치고,
              html 부분 (적용하고 싶은 부분) 을 알려주세요^^
              상황에 맞게 일부 수정하셔야 하는데,
              이미지의 사이즈라든가.. 코드를 정확하게 주시거나, 적용한 사이트를 알려주세요^^
              댓글로 달기 어려우시면 pinknanati@gmail.com
              메일로 주셔도 좋습니다^^

  2. dunkeyike 댓글:

    하~~ 너무 어렵다.ㅠ.ㅠ