From 1386676ae6e9e5a681d8deb7efe23e03bb2c2a35 Mon Sep 17 00:00:00 2001 From: Sam Carlton Date: Sat, 19 Sep 2020 20:51:19 -0500 Subject: [PATCH] Add neumorphic-shadow helpers --- assets/css/tailwind.css | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/assets/css/tailwind.css b/assets/css/tailwind.css index ecad776..6c5d240 100644 --- a/assets/css/tailwind.css +++ b/assets/css/tailwind.css @@ -60,3 +60,27 @@ * @import "utilities/background-patterns"; * @import "utilities/skew-transforms"; */ + + .neumorphic-shadow, + .hover\:neumorphic-shadow:hover { + /* box-shadow: -0.25rem -0.25rem 0.5rem rgba(255, 255, 255, 0.07); */ + box-shadow: + -0.25rem -0.25rem 0.5rem rgba(255, 255, 255, 0.07), + 0.25rem 0.25rem 0.5rem rgba(0, 0, 0, 0.12), + -.75rem -.75rem 1.75rem rgba(255, 255, 255, 0.07), + 0.75rem 0.75rem 1.75rem rgba(0, 0, 0, 0.12), + inset 8rem 8rem 8rem rgba(0, 0, 0, 0.05), + inset -8rem -8rem 8rem rgba(255, 255, 255, 0.05); +} + +.neumorphic-shadow-inner, +.hover\:neumorphic-shadow-inner:hover { + /* box-shadow: -0.25rem -0.25rem 0.5rem rgba(255, 255, 255, 0.07); */ + box-shadow: + inset -0.25rem -0.25rem 0.5rem rgba(255, 255, 255, 0.07), + inset 0.25rem 0.25rem 0.5rem rgba(0, 0, 0, 0.12), + inset -.75rem -.75rem 1.75rem rgba(255, 255, 255, 0.07), + inset 0.75rem 0.75rem 1.75rem rgba(0, 0, 0, 0.12); + /* inset 8rem 8rem 8rem rgba(0, 0, 0, 0.05), + inset -8rem -8rem 8rem rgba(255, 255, 255, 0.05); */ +}