- Include the
neumorphix.css
file in your HTML file. - Add the
neumorphix
class to the element you want to apply the neumorphism effect to.
@import "neumorphix";
.neu-element {
@include neu;
&:hover {
@include apply-scale-transform(1.1);
}
@include apply-scale-transform(1);
transition: box-shadow 0.5s, transform 0.5s;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="neumorphix.css">
</head>
<body>
<div class="neu-element">
<h1>Hello, world!</h1>
</div>
</body>
</html>