CSS3 속성을 사용하여 그림 스타일을 강화하는 방법(둥근 모서리, 그림자, 그라디언트)_html5 튜토리얼 기술

CSS3에서는 box-shadow와 border-radius를 이미지에 직접 사용하면 브라우저가 이를 제대로 렌더링할 수 없습니다. 하지만 해당 이미지를 배경 이미지로 사용하면 추가된 스타일 브라우저에서 잘 렌더링할 수 있습니다. 다양한 이미지 스타일 효과를 만들기 위해 상자 그림자, 테두리 반경 및 전환을 사용하는 방법을 소개하겠습니다.
문제
데모를 보면 이미지의 첫 번째 행에 대해 border-radius 및 inline box-shadow를 설정한 것을 알 수 있습니다. Firefox는 이미지의 테두리 반경을 렌더링하지만 인라인 상자 그림자는 렌더링하지 않습니다. 두 효과 모두 Chrome 및 Safari에서 렌더링되지 않습니다.

코드 복사

코드는 다음과 같습니다.

.normal img {
테두리: 단색 5px #000;
-webkit-border-radius: 20px;
-moz-border-radius:
border-radius: 20px; : 삽입 0 1px 5px rgba(0,0,0,.5);
-moz-box-shadow: 삽입 0 1px 5px rgba(0,0,0,.5)
box-shadow: 삽입 0 1px 5px rgba(0,0,0,.5);
}

firefox 효과:
chrome/safari



해결 방법 border-radius와 inline box-shadow가 제대로 작동하려면 이미지를 배경 이미지로 변환해야 합니다. .


동적 방법 이 작업을 동적으로 완료하려면 jquery를 사용하여 각 이미지에 배경 이미지 래퍼를 추가해야 합니다. 다음 js 코드는 각 이미지에 범위 패키지를 추가합니다. 범위의 배경 이미지 경로는 이미지의 경로입니다.
코드는 비교적 간단해서 따로 설명할 필요가 없을 것 같습니다. 확실하지 않은 경우 jquery API를 직접 확인할 수 있습니다.

코드 복사코드는 다음과 같습니다.

출력
위 코드는 다음과 같은 결과를 출력합니다.

코드 복사

코드는 다음과 같습니다.

원 image

원형 이미지 효과를 얻기 위해 border-radius를 사용한다는 점을 추가하면 효과는 다음과 같습니다.

css:



코드 복사

코드는 다음과 같습니다. .circle .image-wrap { -webkit-border-radius: 50em;

-moz-border-radius: 50em;

border-radius: 50em;

}



카드 스타일

여러 개의 인라인 상자 그림자를 사용하는 카드 스타일 그림.

css:



코드 복사

코드는 다음과 같습니다.

.card .image-wrap {
-webkit-box-shadow: 삽입 0 0 1px rgba(0,0,0,.8), 삽입 0 2px 0 rgba(255,255,255,.5) , 삽입 0 -1px 0 rgba(0,0,0,.4);
-moz-box-shadow: 삽입 0 0 1px rgba(0,0,0,.8), 삽입 0 2px 0 rgba( 255,255,255,.5), 삽입 0 -1px 0 rgba(0,0,0,.4);
box-shadow: 삽입 0 0 1px rgba(0,0,0,.8), 삽입 0 2px 0 rgba(255,255,255,.5), 삽입 0 -1px 0 rgba(0,0,0,.4)
-webkit-border-radius:
-moz-border-radius:
border-radius: 20px;
}

릴리프 스타일
다음은 릴리프 효과입니다.

css:

코드 복사

코드는 다음과 같습니다.

.embossed .image-wrap {
-webkit-box-shadow: inset 0 0 2px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), 삽입 0 - 7px 0 rgba(0,0,0,.6), 삽입 0 -9px 0 rgba(255,255,255,.3)
-moz-box-shadow: 삽입 0 0 2px rgba(0,0, 0,.8), 삽입 0 2px 0 rgba(255,255,255,.5), 삽입 0 -7px 0 rgba(0,0,0,.6), 삽입 0 -9px 0 rgba(255,255,255,.3); >상자 그림자: 삽입 0 0 2px rgba(0,0,0,.8), 삽입 0 2px 0 rgba(255,255,255,.5), 삽입 0 -7px 0 rgba(0,0,0,.6), 삽입 0 - 9px 0 rgba(255,255,255,.3);
-webkit-border-radius: 20px;
-moz-border-radius:
border-radius: 20px;

부드러운 릴리프 스타일
릴리프 스타일과 비교하여 새 스타일에는 1px 흐림 속성이 추가되었습니다.

css:

코드 복사코드는 다음과 같습니다.

.soft-embossed .image-wrap {

-webkit-box-shadow: 삽입 0 0 4px rgba(0,0,0,1), 삽입 0 2px 1px rgba(255,255,255,.5) , 삽입 0 -9px 2px rgba(0,0,0,.6), 삽입 0 -12px 2px rgba(255,255,255,.3)
-moz-box-shadow: 삽입 0 0 4px rgba(0,0 ,0, 1), 삽입 0 2px 1px rgba(255,255,255,.5), 삽입 0 -9px 2px rgba(0,0,0,.6), 삽입 0 -12px 2px rgba(255,255,255,.3); >상자 그림자: 삽입 0 0 4px rgba(0,0,0,1), 삽입 0 2px 1px rgba(255,255,255,.5), 삽입 0 -9px 2px rgba(0,0,0,.6), 삽입 0 -12px 2px rgba(255,255,255,.3);
-webkit-border-radius: 20px;
-moz-border-radius:
border-radius: 20px; 🎜>


컷아웃 스타일

삽입된 상자 그림자를 사용하여 컷아웃 효과를 얻으세요.

css:



코드 복사

코드는 다음과 같습니다. .cut-out .image-wrap { -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.2), 삽입 0 4px 5px rgba(0,0,0,.6) , 삽입 0 1px 0 rgba(0,0,0,.6);

-moz-box-shadow: 0 1px 0 rgba(255,255,255,.2), 삽입 0 4px 5px rgba(0,0,0, .6) , 삽입 0 1px 0 rgba(0,0,0,.6);

box-shadow: 0 1px 0 rgba(255,255,255,.2), 삽입 0 4px 5px rgba(0,0,0, .6) , 삽입 0 1px 0 rgba(0,0,0,.6)

-webkit-border-radius:
-moz-border-radius:
border-radius; : 20px;
}



변형 및 빛남

이 예에서는 이미지 패키지에 전환 속성을 추가합니다. 둥근 모서리에서 둥근 모서리로 변경됩니다. 그런 다음 여러 개의 상자 그림자를 사용하여 광선 효과를 얻습니다.

css:



코드 복사

코드는 다음과 같습니다. .morphing-glowing .image-wrap { -webkit-transition: 1s;

-moz-transition: 1s;

-webkit-border-radius; : 20px;

-moz-border-radius: 20px;
border-radius: 20px;
}
.morphing-glowing .image-wrap:hover {
-webkit-box- 그림자: 0 0 20px rgba(255,255,255,.6), 삽입 0 0 20px rgba(255,255,255,1);
-moz-box-shadow: 0 0 20px rgba(255,255,255,.6), 삽입 255, 1) ;
상자 그림자: 0 0 20px rgba(255,255,255,.6), 삽입 0 0 20px rgba(255,255,255,1)
-webkit-border-radius:
-moz-border- 반경: 60em;
경계 반경: 60em
}


하이라이트 효과
하이라이트 효과는 요소에 :after 가상 클래스를 추가하여 달성됩니다.

css:

코드 복사

코드는 다음과 같습니다.

.glossy .image-wrap {
-webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.5)
-moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,.5);
상자 그림자: 삽입 0 -1px 0 rgba(0,0,0,.5)
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
.glossy .image-wrap:after {
위치:
내용 : ' ' ;
폭: 50%;
위쪽: 0;
-webkit-border-radius: 20px; moz-border -radius: 20px;
테두리 반경: 20px;
배경: -moz-linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,.1) 100%) ;
배경: -webkit-gradient(선형, 왼쪽 상단, 왼쪽 하단, 색상 중지(0%,rgba(255,255,255,0.7)), 색상 중지(100%,rgba(255,255,255,.1))) ;
배경: 선형-그라디언트(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,.1) 100%)



반사 효과

이 예에서는 하이라이트 효과를 아래쪽으로 이동하여 반사 효과를 구현했습니다.
css:




코드 복사

코드는 다음과 같습니다. .reflection .image-wrap:after {

위치: 절대;

내용: ' ';

높이: 30px; 31px;
왼쪽: 0;
-webkit-border-top-left-radius:
-webkit-border-top-right-radius:
-moz-border-radius -왼쪽 상단: 20px;
-moz-border-radius-topright:
테두리-왼쪽-반경: 20px;
테두리-오른쪽-반경: 20px; -moz- 선형-그라디언트(상단, rgba(0,0,0,.3) 0%, rgba(255,255,255,0) 100%)
배경: -webkit-gradient(선형, 왼쪽 상단, 왼쪽 하단 , color-stop(0%,rgba(0,0,0,.3)), color-stop(100%,rgba(255,255,255,0))
배경: 선형 그라데이션(top, rgba( 0,0 ,0,.3) 0%,rgba(255,255,255,0) 100%);
}
.reflection .image-wrap:hover {
위치: 상대
상단: -8px;
}



하이라이트 및 반사

이 예에서는 :before 및 :after를 사용하여 하이라이트와 반사 효과를 결합합니다.

css:


코드 복사


코드는 다음과 같습니다.

.glossy-reflection .image-wrap { -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,. 6); -moz-box-shadow: 삽입 0 -1px 0 rgba(0,0,0,.5), 삽입 0 1px 0 rgba(255,255,255,.6) box-shadow: 삽입 0 -1px 0 rgba(0,0,0,.5), 삽입 0 1px 0 rgba(255,255,255,.6)

-webkit-transition: 1s;

-moz-transition: 1s; >전환: 1s;

-webkit-border-radius:
-moz-border-radius: 20px;
border-radius: 20px;
.glossy-reflection image-wrap :before {
위치: 절대;
너비: 100%
높이:
왼쪽: 0; ;
-webkit-border-radius: 20px;
border-radius: 20px ) 0%, rgba(255,255,255,.1)
배경: -webkit-gradient(선형, 왼쪽 상단, 왼쪽 하단, color-stop(0%,rgba(255,255,255,0.7)), color-stop(100%,rgba(255,255,255,1)))
배경: 선형 그라데이션(상단, rgba(255,255,255,0.7) 0%,rgba(255,255,255,.1) 100%)
}
.glossy-reflection .image-wrap:after {
위치: 절대;
너비: 100%;
하단: - 31px;
-webkit-border -왼쪽 상단 반경: 20px;
-webkit-border-상단 오른쪽 반경:
-moz-border-radius -topleft:
-moz-border-radius-topright; : 20px;
테두리-상단-왼쪽-반경: 20px;
테두리-상단-오른쪽-반경: 20px;
배경: -moz-linear-gradient(top, rgba(230,230,230,.3) 0%, rgba(230,230,230,0) 100%);
배경: -webkit-gradient(선형, 왼쪽 상단, 왼쪽 하단, 색상 중지(0%,rgba(230,230,230,.3)), 색상 중지 (100%,rgba(230,230,230,0)));
배경: 선형 그라데이션(상단, rgba(230,230,230,.3) 0%, rgba(230,230,230,0) 100%)
}


테이프 스타일
이 예에서는 테이프 효과를 얻기 위해 :after를 사용합니다.

css:

코드 복사

코드는 다음과 같습니다.

.tape .image-wrap {
-webkit-box-shadow: 삽입 0 0 2px rgba(0,0,0,.7), 삽입 0 2px 0 rgba(255,255,255,.3), 삽입 0 - 1px 0 rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4)
-moz-box-shadow: 삽입 0 0 2px rgba(0, 0,0 ,.7), 삽입 0 2px 0 rgba(255,255,255,.3), 삽입 0 -1px 0 rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4 );
상자 그림자: 삽입 0 0 2px rgba(0,0,0,.7), 삽입 0 2px 0 rgba(255,255,255,.3), 삽입 0 -1px 0 rgba(0,0,0, .5) , 0 1px 3px rgba(0,0,0,.4);
}
.tape .image-wrap:after {
위치: 절대
내용: ' ';
너비: 60px;
높이:
상단: -10px;
왼쪽: 50%;
여백: -30px
테두리: 단색 1px rgba ,48, .2);
배경: -moz-linear-gradient(top, rgba(254,243,127,.6) 0%, rgba(240,224,54,.6) 100%); 웹킷 그라데이션(선형, 왼쪽 상단, 왼쪽 하단, 색상 중지(0%,rgba(254,243,127,.6)), 색상 중지(100%,rgba(240,224,54,.6))); 배경: 선형 -그라디언트(상단, rgba(254,243,127,.6) 0%,rgba(240,224,54,.6) 100%)
-webkit-box-shadow: 삽입 0 1px 0 rgba(255,255,255,. 3), 0 1px 0 rgba(0,0,0,.2);
}

변형 및 색상화
이 예에서는 다음을 사용합니다. , 마우스가 지나갈 때 방사형 그라데이션 효과를 얻습니다.

css:

코드 복사코드는 다음과 같습니다.

.morphing-tinting .image-wrap {

위치: 상대;
-webkit-transition: 1s;
전환: 1s; >-webkit -border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
-moz-border-radius: 30em; ;
테두리 반경: 30em;
}
.morphing-tinting .image-wrap:after {
위치: 절대
너비: 100% ;
높이: 100%;
왼쪽: 0;
-moz-transition:
전환: 1s;
-webkit-border-radius: 30em;
-moz-border-radius: 30em;
}
.morphing-tinting .image-wrap:hover:after {
배경 : -webkit-gradient(방사형, 50% 50%, 40, 50% 50%, 80, from( rgba(0,0,0,0)), to(rgba(0,0,0,1))) ;
배경: -moz-radial-gradient(50% 50%, 원, rgba(0, 0,0,0) 40px, rgba(0,0,0,1) 80px)
}; 🎜>


페더 가장자리 원

방사형 그래디언트를 사용하여 마스크를 만들어 페더링 효과를 얻을 수도 있습니다.


css:

코드 복사
코드는 다음과 같습니다.

.feather .image-wrap {
위치: 상대;
-webkit-border-radius: 30em

-moz-border-radius:

border-radius: 30em; } .feather .image-wrap:after { 위치: 절대 내용: ' '

폭: 100%; 🎜>위쪽: 0;

왼쪽: 0;

배경: -webkit-gradient(방사형, 50% 50%, 50, 50% 50%, 70, from(rgba(255,255,255,0)), to (rgba(255,255,255,1)));
배경: -moz-radial-gradient(50% 50%, Circle, rgba(255,255,255,0) 50px, rgba(255,255,255,1) 70px)
}



브라우저 호환성

이 구현은 border-radius, box-shadow, :before 및 :after 기능(예: Chrome, Firefox 및 Safari)을 지원하는 대부분의 브라우저에서 작동합니다. ) 둘 다 잘 작동합니다. 새로운 기능을 지원하지 않는 브라우저에서는 원본 이미지만 표시됩니다.
자신만의 구현 만들기
:before 및 :after 의사 클래스를 사용하여 이미지에 대한 다양한 스타일을 만들고 새로운 효과를 직접 만들어 볼 수 있습니다.