animation 으로 넘어뜨리다 - mask image -
오늘은 mask 속성에 대해 알려드립니다.
1. 완성판
2. 참고문헌
Tech.Dig
Clipping and Masking
WPJ
오크니즘
3. 분해해 본다
❶.
우선 마크업합니다.
별이 빛나는 하늘의 그림을 가운데로 내보냅니다.
index.html<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<div class="container">
<img src="img/star.png" class="alpha-target" />
</div>
</body>
</html>
styles.cssbody {
margin: 0;
padding: 0;
background: #fffddd;
}
.container {
position: relative;
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
img {
display: block;
max-width: 50%;
height: auto;
margin: 0 auto;
}
밤하늘이 나왔다.
❷.
mask 속성 을 사용합니다. -webkit-를 붙이지 않으면 움직이지 않으므로 주의합시다.
styles.css
.alpha-target {
-webkit-mask-image: url("../img/cat.png");
-webkit-mask-mode: alpha;
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: 400px;
-webkit-mask-position: center center;
}
별이 빛나는 하늘의 이미지를 고양이형으로 빼낼 수 있었습니다.
멋지다!
mask 속성에 대해 설명합니다.
mask-mode:
mask 이미지에는 alpha와 luminance의 두 가지 유형이 있습니다.
alpha는 이미지가 검은색(alpha 값: 1)과 겹치는 부분을 이미지로 표시합니다.
이번에는 cat.png
검은 색을하고있었습니다. mask-mode: alpha 로, 고양이의 검은 부분(알파치 1)만이, 잘라졌다고 하는 카라크리입니다.
재미있는 속성입니다!
mask-image:
mask 이미지를 지정합니다만, background image 와 같은 사용법을 합니다.
・사용할 수 있는 화상은, jpg, png, svg 가 있어, 그라데이션도 설정할 수 있습니다.
styles.css
.alpha-target {
mask-image: linear-gradient(black 0%, transparent 100%);
mask-size, maske-position:
background-size, background-position 과 같은 사용법을 합니다.
mask 이미지의 크기와 표시 위치를 지정할 수 있습니다.
mask-repeat
마스크 이미지를 반복하는 방법을 결정할 수 있습니다.
-webkit-mask-repeat: round;
꽉 끼고 반복합니다.
-webkit-mask-repeat: space;
영역 내에 감각을 비워 배치합니다.
반복하고 싶지 않을 때는 no-repeat를 붙이십시오.
오늘은 이상입니다.
내일은이 기법을 사용하여 애니메이션을 설정합니다.
그럼 또 내일~
Reference
이 문제에 관하여(animation 으로 넘어뜨리다 - mask image -), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/duka/items/2177abdf1cd27aa40786
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Tech.Dig
Clipping and Masking
WPJ
오크니즘
3. 분해해 본다
❶.
우선 마크업합니다.
별이 빛나는 하늘의 그림을 가운데로 내보냅니다.
index.html<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<div class="container">
<img src="img/star.png" class="alpha-target" />
</div>
</body>
</html>
styles.cssbody {
margin: 0;
padding: 0;
background: #fffddd;
}
.container {
position: relative;
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
img {
display: block;
max-width: 50%;
height: auto;
margin: 0 auto;
}
밤하늘이 나왔다.
❷.
mask 속성 을 사용합니다. -webkit-를 붙이지 않으면 움직이지 않으므로 주의합시다.
styles.css
.alpha-target {
-webkit-mask-image: url("../img/cat.png");
-webkit-mask-mode: alpha;
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: 400px;
-webkit-mask-position: center center;
}
별이 빛나는 하늘의 이미지를 고양이형으로 빼낼 수 있었습니다.
멋지다!
mask 속성에 대해 설명합니다.
mask-mode:
mask 이미지에는 alpha와 luminance의 두 가지 유형이 있습니다.
alpha는 이미지가 검은색(alpha 값: 1)과 겹치는 부분을 이미지로 표시합니다.
이번에는 cat.png
검은 색을하고있었습니다. mask-mode: alpha 로, 고양이의 검은 부분(알파치 1)만이, 잘라졌다고 하는 카라크리입니다.
재미있는 속성입니다!
mask-image:
mask 이미지를 지정합니다만, background image 와 같은 사용법을 합니다.
・사용할 수 있는 화상은, jpg, png, svg 가 있어, 그라데이션도 설정할 수 있습니다.
styles.css
.alpha-target {
mask-image: linear-gradient(black 0%, transparent 100%);
mask-size, maske-position:
background-size, background-position 과 같은 사용법을 합니다.
mask 이미지의 크기와 표시 위치를 지정할 수 있습니다.
mask-repeat
마스크 이미지를 반복하는 방법을 결정할 수 있습니다.
-webkit-mask-repeat: round;
꽉 끼고 반복합니다.
-webkit-mask-repeat: space;
영역 내에 감각을 비워 배치합니다.
반복하고 싶지 않을 때는 no-repeat를 붙이십시오.
오늘은 이상입니다.
내일은이 기법을 사용하여 애니메이션을 설정합니다.
그럼 또 내일~
Reference
이 문제에 관하여(animation 으로 넘어뜨리다 - mask image -), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/duka/items/2177abdf1cd27aa40786
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<div class="container">
<img src="img/star.png" class="alpha-target" />
</div>
</body>
</html>
body {
margin: 0;
padding: 0;
background: #fffddd;
}
.container {
position: relative;
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
img {
display: block;
max-width: 50%;
height: auto;
margin: 0 auto;
}
.alpha-target {
-webkit-mask-image: url("../img/cat.png");
-webkit-mask-mode: alpha;
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: 400px;
-webkit-mask-position: center center;
}
.alpha-target {
mask-image: linear-gradient(black 0%, transparent 100%);
Reference
이 문제에 관하여(animation 으로 넘어뜨리다 - mask image -), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/duka/items/2177abdf1cd27aa40786텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
