빨리! CSS로 Neumorphism 버튼 만들기
7801 단어 NeumorphismHTMLCSS초보자CSS3
tl;dr;
2020년 초부터 주목받고 있는 디자인, Neumorphism을 아십니까?
널리 보급된 머티리얼 디자인에 비해 소개합니다.
머티리얼 디자인은 그림자를 사용하여 요소를 떠오릅니다.
한편, Neumorphism(뉴모피즘)에서는, 그림자와 빛을 이용해 요소의 요철을 표현합니다.
Neumorphism(뉴모피즘)의 기본적인 파트는 CSS3의 box-shadow를 이용해 간단하게 구현할 수 있습니다.
이 기사에서는 CSS와 HTML을 사용하여 간단한 파트를 만드는 방법을 소개합니다.
그림 1 : Neumorphism을 사용한 애플리케이션 예 (neutodo.com)
부푼 표현
Neumorphism(뉴모피즘)의 팽창의 표현에 대해 해설합니다.
다음 3단계로 기본 요소를 구현할 수 있습니다.
1. border-radius를 지정하여 요소의 네 모퉁이에 둥글게 합니다.
2. box-shadow를 사용하여 요소의 왼쪽 상단(빛이 비추는 곳)에 배경색보다 밝은 색을 지정합니다.
3. box-shadow를 사용하여 요소의 오른쪽 하단(그림자를 떨어뜨리는 곳)에 배경색보다 어두운 색을 붙입니다.
box-shadow로 지정하는 값을 조정하여 요철의 높이와 부드러움을 조절할 수 있습니다.
box-shadow에 대한 자세한 설명은 다음과 같은 문서에 양보합니다.
box-shadow 정보 : htps : //로 ゔぇぺぺr. 모잖아. 오 rg / 자 / 도 cs / 우에 b / C s / bo x x w w
다음은 간단한 HTML과 CSS를 보여줍니다.
index.html<link rel="stylesheet" type="text/css" href="neumorphism.css" />
<body>
<div>button</div>
</body>
neumorphism.cssbody {
background-color: #dddddd;
}
div {
margin: 50px;
padding: 10px;
width: 50px;
border-radius: 5px;
box-shadow: 5px 5px 10px #bbbbbb, -5px -5px 10px #ffffff;
}
Chrome83의 표시 결과
오목한 표현
Neumorphism(뉴모피즘)의 오목한 표현에 대해 해설합니다.
다음 3단계로 기본 요소를 구현할 수 있습니다.
1. border-radius를 지정하여 요소의 네 모퉁이에 둥글게 합니다.
2. box-shadow inset을 사용하여 요소의 오른쪽 아래 안쪽(빛이 비추는 곳)에 배경색보다 밝은 색을 칠합니다.
3. box-shadow inset을 사용하여 요소의 왼쪽 위 안쪽(그림자를 떨어뜨리는 곳)에 배경색보다 어두운 색을 붙입니다.
다음은 간단한 HTML과 CSS를 보여줍니다.
index.html<link rel="stylesheet" type="text/css" href="neumorphism.css" />
<body>
<div>button</div>
</body>
neumorphism.cssbody {
background-color: #dddddd;
}
div {
margin: 50px;
padding: 10px;
width: 50px;
border-radius: 5px;
box-shadow: inset 3px 3px 5px #bbbbbb, inset -3px -3px 5px #ffffff;
}
Chrome83의 표시 결과
조합하여 응용
상술한 요철의 표현 각각을 조합하는 것으로, 응용한 표현도 가능합니다.
예를 들면 다음과 같습니다.
index.html<link rel="stylesheet" type="text/css" href="neumorphism.css" />
<body>
<div>button</div>
</body>
neumorphism.cssbody {
background-color: #dddddd;
}
div {
margin: 50px;
padding: 10px;
width: 50px;
border-radius: 15px;
border: 5px solid #dddddd;
box-shadow: 5px 5px 10px #bbbbbb, -5px -5px 10px #ffffff,
inset 3px 3px 5px #bbbbbb, inset -3px -3px 5px #ffffff;
}
Chrome83의 표시 결과
요약
Neumorphism의 스타일을 생성하는 툴등도 있습니다만, 이번은 CSS로 작성했습니다.
주목 받고 있는 Neumorphism에 대해서는, 웹에서는 HTML과 CSS로 간단하게 실현할 수 있습니다.
가능한 한 많은 분의 참고가 되면 생각하고 심플하고 간단하게 기술했습니다.
Reference
이 문제에 관하여(빨리! CSS로 Neumorphism 버튼 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/ToyoshimaHidenori/items/bbe53c4bbec8b7be14fb
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Neumorphism(뉴모피즘)의 팽창의 표현에 대해 해설합니다.
다음 3단계로 기본 요소를 구현할 수 있습니다.
1. border-radius를 지정하여 요소의 네 모퉁이에 둥글게 합니다.
2. box-shadow를 사용하여 요소의 왼쪽 상단(빛이 비추는 곳)에 배경색보다 밝은 색을 지정합니다.
3. box-shadow를 사용하여 요소의 오른쪽 하단(그림자를 떨어뜨리는 곳)에 배경색보다 어두운 색을 붙입니다.
box-shadow로 지정하는 값을 조정하여 요철의 높이와 부드러움을 조절할 수 있습니다.
box-shadow에 대한 자세한 설명은 다음과 같은 문서에 양보합니다.
box-shadow 정보 : htps : //로 ゔぇぺぺr. 모잖아. 오 rg / 자 / 도 cs / 우에 b / C s / bo x x w w
다음은 간단한 HTML과 CSS를 보여줍니다.
index.html
<link rel="stylesheet" type="text/css" href="neumorphism.css" />
<body>
<div>button</div>
</body>
neumorphism.css
body {
background-color: #dddddd;
}
div {
margin: 50px;
padding: 10px;
width: 50px;
border-radius: 5px;
box-shadow: 5px 5px 10px #bbbbbb, -5px -5px 10px #ffffff;
}
Chrome83의 표시 결과
오목한 표현
Neumorphism(뉴모피즘)의 오목한 표현에 대해 해설합니다.
다음 3단계로 기본 요소를 구현할 수 있습니다.
1. border-radius를 지정하여 요소의 네 모퉁이에 둥글게 합니다.
2. box-shadow inset을 사용하여 요소의 오른쪽 아래 안쪽(빛이 비추는 곳)에 배경색보다 밝은 색을 칠합니다.
3. box-shadow inset을 사용하여 요소의 왼쪽 위 안쪽(그림자를 떨어뜨리는 곳)에 배경색보다 어두운 색을 붙입니다.
다음은 간단한 HTML과 CSS를 보여줍니다.
index.html<link rel="stylesheet" type="text/css" href="neumorphism.css" />
<body>
<div>button</div>
</body>
neumorphism.cssbody {
background-color: #dddddd;
}
div {
margin: 50px;
padding: 10px;
width: 50px;
border-radius: 5px;
box-shadow: inset 3px 3px 5px #bbbbbb, inset -3px -3px 5px #ffffff;
}
Chrome83의 표시 결과
조합하여 응용
상술한 요철의 표현 각각을 조합하는 것으로, 응용한 표현도 가능합니다.
예를 들면 다음과 같습니다.
index.html<link rel="stylesheet" type="text/css" href="neumorphism.css" />
<body>
<div>button</div>
</body>
neumorphism.cssbody {
background-color: #dddddd;
}
div {
margin: 50px;
padding: 10px;
width: 50px;
border-radius: 15px;
border: 5px solid #dddddd;
box-shadow: 5px 5px 10px #bbbbbb, -5px -5px 10px #ffffff,
inset 3px 3px 5px #bbbbbb, inset -3px -3px 5px #ffffff;
}
Chrome83의 표시 결과
요약
Neumorphism의 스타일을 생성하는 툴등도 있습니다만, 이번은 CSS로 작성했습니다.
주목 받고 있는 Neumorphism에 대해서는, 웹에서는 HTML과 CSS로 간단하게 실현할 수 있습니다.
가능한 한 많은 분의 참고가 되면 생각하고 심플하고 간단하게 기술했습니다.
Reference
이 문제에 관하여(빨리! CSS로 Neumorphism 버튼 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/ToyoshimaHidenori/items/bbe53c4bbec8b7be14fb
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<link rel="stylesheet" type="text/css" href="neumorphism.css" />
<body>
<div>button</div>
</body>
body {
background-color: #dddddd;
}
div {
margin: 50px;
padding: 10px;
width: 50px;
border-radius: 5px;
box-shadow: inset 3px 3px 5px #bbbbbb, inset -3px -3px 5px #ffffff;
}
상술한 요철의 표현 각각을 조합하는 것으로, 응용한 표현도 가능합니다.
예를 들면 다음과 같습니다.
index.html
<link rel="stylesheet" type="text/css" href="neumorphism.css" />
<body>
<div>button</div>
</body>
neumorphism.css
body {
background-color: #dddddd;
}
div {
margin: 50px;
padding: 10px;
width: 50px;
border-radius: 15px;
border: 5px solid #dddddd;
box-shadow: 5px 5px 10px #bbbbbb, -5px -5px 10px #ffffff,
inset 3px 3px 5px #bbbbbb, inset -3px -3px 5px #ffffff;
}
Chrome83의 표시 결과
요약
Neumorphism의 스타일을 생성하는 툴등도 있습니다만, 이번은 CSS로 작성했습니다.
주목 받고 있는 Neumorphism에 대해서는, 웹에서는 HTML과 CSS로 간단하게 실현할 수 있습니다.
가능한 한 많은 분의 참고가 되면 생각하고 심플하고 간단하게 기술했습니다.
Reference
이 문제에 관하여(빨리! CSS로 Neumorphism 버튼 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/ToyoshimaHidenori/items/bbe53c4bbec8b7be14fb
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(빨리! CSS로 Neumorphism 버튼 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/ToyoshimaHidenori/items/bbe53c4bbec8b7be14fb텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
