12-23 03:50
Notice
Recent Posts
Recent Comments
Link
«   2024/12   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
Tags more
Archives
Today
Total
관리 메뉴

Scientific Computing & Data Science

[WebApp / CSS] Image Reflection 본문

Programming/Web App

[WebApp / CSS] Image Reflection

cinema4dr12 2016. 7. 16. 21:19

이번 글에서는 CSS3에 공식적으로 포함되어 있지는 않지만, 테스트 해 볼만한 새로운 기능인 이미지 반사(Image Reflection)에 대하여 알아 보도록 하겠다.

[테스트 이미지] landscape.jpg


준비

테스트를 위해 HTML 파일을 다음과 같이 준비한다.

[index.html]

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="./base.css"> </link>
  <title>Document</title>
</head>

<body>
  <img class="img" src="./landscape.jpg" style="width:30%;"></img>
</body>
</html>
단, 준비한 이미지 "landscape.jpg"는 index.html 파일과 동일한 경로에 존재하여야 한다.

포함한 CSS 파일 "base.css"에서 이미지 반사 옵션에 대한 코드를 작성할 것이다.

기본 반사

기본 반사 옵션은 원본 이미지 그대로 반사되는 효과를 의미한다.

CSS 파일에 img라는 클래스를 정의하고 다음과 같이 옵션을 작성한다.

[base.css]

img {
    -webkit-box-reflect: below;
}
결과 화면은 다음과 같다.


반사 오프셋

반사 이미지가 원본 이미지에 특정 픽셀만큼 떨어지도록 한다.
가령, 20px이 떨어지도록 하려면 다음과 같이 코드를 작성한다.

[base.css]

img {
    -webkit-box-reflect: below 20px;
}
결과 화면은 다음과 같다.


반사 그라데이션

반사 이미지가 서서히 특정 희미해지도록 효과를 줄 수 있다.

[base.css]

img {
    -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(250, 250, 250, 0.4)));
}
결과 화면은 다음과 같다.

color-stop 옵션을 이용하여 좀 더 멋진 반사 그라데이션 효과를 줄 수 있다.

[base.css]

img {
    -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(50%, transparent) , to(rgba(250, 250, 250, 0.4)));
}
결과 화면은 다음과 같다.

'Programming > Web App' 카테고리의 다른 글

[Programming / WebApp] Canvas Touch Gesture 예제  (0) 2016.08.03
[Programming / WebApp] Modal Dialog 예제  (1) 2016.07.28
[WebApp / Electron] Electron App Packaging  (0) 2016.07.09
[WebApp / Electron] Electron App Template  (0) 2016.07.09
[WebApp / Node.js] How to setup Visual Studio to write Node.js C++ Addons  (0) 2016.07.02
공유하기 링크
'Programming/Web App' Related Articles more
Comments