Apply Claymorphism Effects To Elements – clay.css


Author: codeAdrian
Views Total: 208 views
Official Page: Go to website
Last Update: January 19, 2022
License: MIT

Preview:

Apply Claymorphism Effects To Elements – clay.css

Description:

clay.css is a tiny yet customizable CSS utility library that applies Claymorphism effects To elements using only CSS classes.

How to use it:

1. Download and import the clay.css into your project.

<link rel="stylesheet" href="clay.css" />
// OR
@import "claymorphism-css/dist/clay.scss";

2. Add the CSS class ‘clay’ to the target element on which you’d like to apply the Claymorphism effect.

<h1 class="clay">Clay.css Library</h1>

3. Customize the Claymorphism effect.

.myElement{
  --clay-background: #f76d6d;
  --clay-border-radius: 32px;
}

4. Or override the default variables in the clay.scss.

$default-background: rgba(0, 0, 0, 0.005);
$default-border-radius: 32px;
$default-shadow-outset: 8px 8px 16px 0 rgba(0, 0, 0, 0.25);
$default-shadow-inset-primary: -8px -8px 16px 0 rgba(0, 0, 0, 0.25);
$default-shadow-inset-secondary: 8px 8px 16px 0 rgba(255, 255, 255, 0.2);

See also  Create Rain & Snow Falling Effects using CSS3 - weather.css

Leave a Reply

Your email address will not be published. Required fields are marked *