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

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

그림자 효과
페이지 넘기는 효과
토이카메라 필터 효과
컬러 조절
회전
둥근 모서리 만들기
타원
동그라미 프레임
정삼각형 프레임
겹쳐보이는 이미지
테두리 뿌옇게 처리하기
페이드효과(그림자)
페이드효과(그라데이션)
반사효과
New
사진첩에 끼운 것 같은 이미지
이미지는 그대로에 프레임만 기울이기
반투명 프레임

공통되는 html

<div class="effect"><img src="neko.jpg"></div>

01. 그림자 효과

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

css

.effect {
      display: inline-block;
      box-shadow: 0px 0px 20px -5px rgba(0, 0, 0, 0.8);
}

02. 페이지 넘기는 효과

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

css

.effect img {
    display: inline-block;
    position: relative;
    z-index: 2;
}
.effect:after {
    position: absolute;
    content: "";
    box-shadow: 0 15px 10px rgba(0,0,0, .5); /* 그림자효과 */
    transform: rotate(3deg); /* 회전효과 */
    right: 5px;
    left: auto;
    top: auto;
    bottom: 15px;
    z-index: -1;
    width: 50%;
    height: 20%;
}

03. 토이카메라 필터 효과

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

css

.effect {
    display: inline-block;
    position: relative;
}
.effect:after { /* 이미지 안쪽으로 그림자 효과 주기 */
    position: absolute;
    display: block;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.5),
        inset 0 0 100px rgba(0, 0, 0, 0.2);
}

04. 컬러 조절

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

css

.effect {
    display: inline-block;
    position: relative;
}
.effect:after {
    position: absolute;
    display: block;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.5),
        inset 0 0 100px rgba(0, 0, 0, 0.2);
    background: rgba(0, 255, 0, 0.1); /* 이미지 위로 컬러를 입힘 */
}

05. 회전

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

css

.effect {
    display: inline-block;
    transform: rotate(5deg);
}

06. 둥근 모서리 만들기

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

css

.effect img {
    border-radius: 10px;
}

07. 타원

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

css

.effect img {
    border-radius: 50%;
}

08. 동그라미 프레임

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

html

<div class="frame" style="background: url(neko.jpg) center center no-repeat;"></div>

css

.effect {
    position: relative;
    display: inline-block;
    background: url(cat.jpg) center center no-repeat;
    border-radius: 50%;
    width: 250px;
    height: 250px;
}

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

09. 정삼각형 프레임

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

css

.effect {
    display: inline-block;
    position: relative;
}
.effect:after {
    position: absolute;
    display: block;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: top left, top right;
    /* 삼각형을 만드는 부분 */
    background: 
      linear-gradient(-30deg, #fff 140px, rgba(0, 0, 0, 0) 100px),
      linear-gradient(210deg, #fff 140px, rgba(0, 0, 0, 0) 100px);
}

10. 겹쳐보이는 이미지

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

css

.effect img {
    display: inline-block;
    position: relative;
    z-index: 2;
}
.effect:after {
    position: absolute;
    display: block;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    transform: rotate(3deg); /* 회전효과 */
    background: #fff;
}

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

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

css

.effect {
    display: inline-block;
    position: relative;
}
.effect:after {
    position: absolute;
    display: block;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: 
      inset 0 0 20px #fff /* 배경과 같은 색 */,
      inset 0 0 20px #fff,
      inset 0 0 20px #fff,
      inset 0 0 20px #fff;
}

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

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

css

.effect {
    display: inline-block;
    position: relative;
}
.effect:after {
    position: absolute;
    display: block;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    box-shadow: inset -60px 0 100px #fff; 
}

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

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

css

.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%);
}

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

14. 반사효과

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

css

.effect {
    display: inline-block;
    position: relative;
    padding: 6px;
    box-shadow: 0 2px 6px #999;
}
.effect:after {
    position: absolute;
    display: block;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient( /* 여기서 빛을 표현 */
      -120deg, 
      rgba(255, 250, 250, 0.1) 0, 
      rgba(255, 250, 250, 0.5) 70px,
      rgba(255, 250, 250, 0) 71px);
}

15. New

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

css

.effect {
    position: relative;
    display: inline-block;
    overflow: hidden; /* 불필요한 부분 가리기 */
    padding: 1px;
}
.effect:after {
    content: "";
    position: absolute;
    z-index: 1;
    width: 100px;
    height: auto;
    background: red;
    content: "New"; /* 보여주는 텍스트 */
    text-align: center;
    color: #fff;
    font-family: 'Arial';
    font-weight: bold;
    padding: 5px 10px;
    left: -30px;
    top: 3px;
    transform: rotate(-30deg);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

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

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

css

.effect {
    display: inline-block;
    position: relative;
    overflow: hidden; /* 불필요한 부분 가리기 */
    padding: 6px; /* 6px정도 이미지 밖으로 표현 */
}
.effect img {
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
}
.effect:before,
.effect:after {
    content: "";
    position: absolute;
    z-index: 1;
    width: 97px;
    height: 50px;
    background: #fff; /* 배경색과 같은 색 */
    transform: rotate(-30deg);
}
/* 왼쪽 위 */
.effect:before {
    box-shadow: 0 10px 8px -12px rgba(0, 0, 0, 0.8);
    top: -24px;
    bottom: auto;
    right: auto;
    left: -26px;

}
/* 오른쪽 아래 */
.effect:after {
    box-shadow: 0 -10px 10px -10px rgba(0, 0, 0, 0.7);
    top: auto;
    bottom: -22px;
    right: -25px;
    left: auto;
}

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

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

css

.effect {
    position: relative;
    display: inline-block;
    width: 200px;
    height: 250px;
    border: 10px solid #fff;
    box-shadow: 0 0 4px #999;
    transform: rotate(20deg); /* 전체 회전 */
    overflow: hidden; /* 불필요한 부분 가리기 */
}
.effect img {
    margin-top: 0;
    margin-left: -90px; /* 포지션 조절 */
    transform-origin: 0 0;
    transform: rotate(-20deg); /* 이미지만 원래 위치로 회전 */
}

18. 반투명 프레임

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

css

.effect {
    background: url(cat.jpg) center center no-repeat;
    display: inline-block;
    width: 240px;
    height: 180px;
    border-top: 50px solid rgba(0, 0, 0, 0.3);
    border-left: 25px solid rgba(0, 0, 0, 0.3);
    border-bottom: 50px solid rgba(0, 0, 0, 0.3);
    border-right: 50px solid rgba(0, 0, 0, 0.3);
    box-shadow: 0 2px 8px #999;
}

名前:jy : 게시일: 2019/09/13(금), 12:41:59 ID：kzOTA1OTc

안녕하세요 많이 배우고 갑니다~
사진첩에 끼우기를 했는데
혹시 hover할때 다시 원상태로 직사각형으로 어떻게 하는지 알려 주실수 있으실까요??

응답

名前:nanati : 게시일: 2019/09/13(금), 14:54:42 ID：cxMzYzMjA

.effect:hover::before,
.effect:hover::after {
transition: .2s;
}
.effect:hover::before {
top: -60px;
left: -70px
}
.effect:hover::after {
bottom: -60px;
right: -70px;
}

こちらを追記してみてください。

응답

名前:yrr : 게시일: 2018/01/16(화), 10:50:06 ID：A0ODA4MDM

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

응답

名前:nanati : 게시일: 2018/01/16(화), 13:14:12 ID：Y3MDIxMzY

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

응답

名前:yrr : 게시일: 2018/01/17(수), 11:21:40 ID：IzNzQwMjE

.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 : 게시일: 2018/01/17(수), 11:23:00 ID：IzNzQwMjE

.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 : 게시일: 2018/01/17(수), 11:24:21 ID：IzNzQwMjE

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

응답

名前:nanati : 게시일: 2018/01/17(수), 15:01:02 ID：c3Mzk1MzY

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

응답

名前:dunkeyike : 게시일: 2016/04/15(금), 10:58:55 ID：IyMjI5NzQ

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

응답

名前:nanati : 게시일: 2016/04/15(금), 11:25:56 ID：EyNjY1MTU

그냥 갖다 붙여보면서 적용 됐을 때 와~ 됐다~~ 하면 돼 ㅋㅋ
기초부터 해야 되는데.. 여긴 응용 쪽 ㅎ

응답