Как создать эффект неоморфизма с помощью HTML и CSS?

Опубликовано: 30 Ноября, 2021

Неоморфизм (неоморфизм) - это современный способ стилизации веб-элементов любой веб-страницы и создания трехмерного эффекта. Этот эффект анимации можно легко создать с помощью HTML и CSS. Свойство CSS-тени Box-shadow можно использовать для реализации Neumorphism. Он используется для добавления темной тени с одной стороны и легкой тени с другой стороны данного элемента.

HTML-код: В этом разделе мы сделаем макет коробки.

  • index.html:

HTML

<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
</ head >
< body >
< div class = "container" >
< div class = "neu-1" > GeeksForGeeks</ div >
< div class = "neu-2" >GeeksForGeeks</ div >
</ div >
</ body >
</ html >

Код CSS: в этом разделе мы будем использовать некоторые свойства CSS для разработки блока.

  • index.css:

HTML

< style >
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container {
height: 100vh;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 30px;
background: #dde1e7;
}
.neu-1 {
height: 300px;
width: 300px;
background: #dde1e7;
border-radius: 6px;
box-shadow: -3px -3px 7px #ffffffb2,
3px 3px 5px rgba(94, 104, 121, 0.945);
}
.neu-2 {
margin: 50px;
height: 300px;
width: 300px;
background: #dde1e7;
border-radius: 6px;
box-shadow: inset -3px -3px 7px #ffffffb0,
inset 3px 3px 5px rgba(94, 104, 121, 0.692);
}
</ style >

Полный код: в этом разделе мы объединим два вышеупомянутых раздела, чтобы создать неоморфизм с использованием HTML и CSS.

HTML

<!DOCTYPE html>
< html lang = "en" dir = "ltr" >
< head >
< meta charset = "utf-8" >
< style >
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container {
height: 100vh;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 30px;
background: #dde1e7;
}
.neu-1 {
height: 300px;
width: 300px;
background: #dde1e7;
border-radius: 6px;
box-shadow: -3px -3px 7px #ffffffb2,
3px 3px 5px rgba(94, 104, 121, 0.945);
}
.neu-2 {
margin: 50px;
height: 300px;
width: 300px;
background: #dde1e7;
border-radius: 6px;
box-shadow: inset -3px -3px 7px #ffffffb0,
inset 3px 3px 5px rgba(94, 104, 121, 0.692);
}
</ style >
</ head >
< body >
< div class = "container" >
< div class = "neu-1" > GeeksForGeeks</ div >
< div class = "neu-2" >GeeksForGeeks</ div >
</ div >
</ body >
</ html >

Выход: