From 4fd099931f95593d03c8aedcf0a3b74a33d93180 Mon Sep 17 00:00:00 2001
From: TreetopFlyer <seth111@gmail.com>
Date: Thu, 5 Aug 2021 09:46:25 -0400
Subject: [PATCH] soft shadow

---
 index.html | 55 +++++++++++++++++++++++-------------------------------
 1 file changed, 23 insertions(+), 32 deletions(-)

diff --git a/index.html b/index.html
index 8e64076..48dafdc 100644
--- a/index.html
+++ b/index.html
@@ -205,42 +205,46 @@ h2[data-spy='true']
         <style>
             .shot3d
             {
-                position: relative;
-                height: 350px;
-                width: 350px;
-                line-height:350px;
-                outline:1px solid blue;
-                perspective: 400px;
+                transform: perspective(1000px) rotateY(25deg);
+                transform-style: preserve-3d;
                 perspective-origin: 50% 50%;  
 
+                position: relative;
+                      width: 350px;
+                     height: 350px;
+                line-height: 350px;
+
                 text-align:center;
                 white-space: nowrap;
             }
             
-            .shot3d div
+            .shot3d__shadow
             {
-                vertical-align: bottom;
                 display: inline;
                 position: relative;
-                transform-style: preserve-3d;
-                outline: 1px solid #000;
+
                 font-size: 0px;
                 line-height:0;
+                vertical-align: bottom;
             }
-            .shot3d div::after
+            .shot3d__shadow::after, .shot3d__shadow::before
             {
+                transform-origin: center 30px;
                 position: absolute;
-                padding: 0 20px 0 20px;
+                padding: 0 6px 0 6px;
                 content: " ";
                 top: 100%;
-                left: -20px;
+                left: -6px;
                 width: 100%;
-                height: 20px;
-                background: #ff0;
-                opacity: 0.5;
+                height: 6px;
+                border-radius: 6px;
+                box-shadow: 0px 30px 14px black, 0px 43px 22px black, 0px 60px 33px black;
             }
 
-            .shot3d img
+            .shot3d__shadow::before{ transform: translateY(-30px) rotateX(-90deg) translateY( 5px); }
+            .shot3d__shadow::after { transform: translateY(-30px) rotateX( 90deg) translateY( 5px); }
+
+            .shot3d__shadow img
             {
                 vertical-align: bottom;
                 display: inline;
@@ -248,27 +252,14 @@ h2[data-spy='true']
                 max-height: 100%;
             }
 
-            .shot3d::before
-            {
-                position:absolute;
-                content:" ";
-                top:100%;
-                left:0%;
-                width:100%;
-                height:100px;
-                background:red;
-                transform-style: preserve-3d;
-                transform-origin: top center;
-                transform: rotateX(90deg) translateY(-50px);
-            }
-
-
         </style>
 
         <div class="shot3d">
+            <div class="shot3d__shadow">
             <!-- <img src="https://truthforlife.org/static/images/productimage-picture-encore-2021-9729.jpg"/> -->
             <div>
                 <img src="https://placekitten.com/100/200"/>
+                <img class="panel panel--front" src="https://placekitten.com/400/800"/>
             </div>
         </div>