clay.css
Micro CSS util class for applying inflated fluffy 3D claymorphism styles to elements. Fully customizable and extensible with CSS variables. SASS mixin is also included for even more styling options.
Micro CSS util class for applying inflated fluffy 3D claymorphism styles to elements. Fully customizable and extensible with CSS variables. SASS mixin is also included for even more styling options.
npm i claymorphism-css
yarn add claymorphism-css
<link
rel="stylesheet"
href="https://unpkg.com/claymorphism-css/dist/clay.css"
/>
Class clay
provides bare minimum styles to apply the claymorphism effect to any HTML element. Additional styles (layout, position, colors, borders, etc.) should be added by using an additional CSS class.
<div class="clay">
Fluffy ipsum dolor sit amet consectetur...
</div>
Claymorphic properties (background, border radius, shadows) can be easily customized with CSS variables. All other styles should be added by the additional extending class.
<div class="clay card">
Fluffy ipsum dolor sit amet consectetur...
</div>
.card{
/* Modify clay.css properties */
--clay-background: #f76d6d;
--clay-border-radius: 48px;
/* Extended styles */
color: #f1f1f1;
padding: 48px;
}
@import "claymorphism-css/dist/clay.scss";
@import
@include clay(
$background: [value],
$border-radius: [value],
$shadow-outset: [value],
$shadow-inset-primary: [value],
$shadow-inset-secondary: [value]
);