원본 소스
https://www.youtube.com/watch?v=xrmdn1t5moA
HTML
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>삼항연산자</title>
<link href="ternary.css" rel="stylesheet" type="text/css"/>
<script src="ternary.js" defer></script>
</head>
<body>
<div id="myDiv" contenteditable="true">HELLO WORLD</div>
</body>
</html>
|
cs |
CSS
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
@charset "utf-8";
:root{
--font : rgb(76, 168, 204);
--shadow : rgba(52, 126, 155);}
*{margin:0;padding:0;}
html,body{
display:flex;flex-wrap:wrap;
justify-content:center;align-items:center;
width:100vw;height:100vh;
background:var(--font);
font-family:"Poppins",sans-serif;font-size:8vw;color:#fff;}
#myDiv{
display:block;
position:relative;
width:100%;
line-height:1.25em;
text-align:center;font-weight:bold;}
#myDiv:focus{outline:1px solid #fff;}
|
cs |
JS
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
const myDiv = document.getElementById('myDiv');
function makeFlatLongShadow(num, dom){
let flatLongShadow = '';
for(let i=num; i>=0; i--){
flatLongShadow += `
${i}px ${i}px 0 var(--shadow) ${ i? ',' : '' }
`;
}//for
dom.style.textShadow = flatLongShadow;
}//makeFlatLongShadow
makeFlatLongShadow(200, myDiv);
|
cs |
${ i ? ',' : '' }
이 부분이 핵심이다잉
https://www.youtube.com/watch?v=XYqZebCa670&t=393s
+) Adobe illustrator에서도 비슷한 효과를 줄 수 있다. (그래픽스타일에 등록하여 사용)
1) Effect > Distort & Transform > Transform
1-1) x축 y축으로 1mm 씩 증감
1-2) 사본 갯수 설정
2) 그래픽스타일 패널에 해당 개체 끌어다 등록
3) 이후 같은 스타일 적용시키고 싶을시 개체 클릭하고 스타일 패널의 팔레트 클릭시 자동 적용
'CSS&JS > 👀Study and Copy' 카테고리의 다른 글
| 삼항연산자 (ternary operator)는 간단한 if문을 더 간단하게 줄일 수있다. (0) | 2021.06.25 |
|---|---|
| JS 자바스크립트로 CSS transform - translateX, translateY, translateZ 값 가져오기 (0) | 2021.06.23 |
| 웹/모바일 터치슬라이더 만들기 (vanilla Java Script/vanilla JS) (0) | 2021.05.17 |
| 랑벨 홈페이지 배경 올리브 마우스 패럴렉스 + 3d 효과 (Pixi.js, canvas, webGL 2d) (0) | 2021.05.07 |
| animation-fill-mode 구분하기 (0) | 2021.05.07 |