Shadow showcase
<main>
<h1>Shadow Showcase</h1>
<p>This is a demonstration of some of what you can do with shadow properties.</p>
<div class="card-container">
<div class="card">
<h2>Drop Shadow</h2>
<div class="rounded-rectangle drop-shadow"></div>
<p>
A drop shadow is cast by the light obstructed by an element.</p>
<p>Typically, the light source is directly above the element, so a drop shadow is directly below the element. This is done with a positive Y offset. You will probably want a small blur radius to give it a softer appearance. You can chose a color based on the strength of the shadow you want to portray.</p>
<pre><code class="language-css"
>.drop-shadow {
box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 4px 0px;
}</code
></pre>
<button class="showModalBtn">Show Details</button>
</div>
<div class="card">
<h2>Floating</h2>
<div class="rounded-rectangle floating"></div>
<p>To create a floating effect, you cast a light offset shadow below the element.</p>
<p>The code below is what Material Design uses for its <a href="https://material.io/components/buttons-floating-action-button">floating action buttons</a>.</p>
<pre><code class="language-css">.floating {
box-shadow:
0px 3px 5px -1px rgba(0, 0, 0, 0.2),
0px 6px 10px 0px rgba(0, 0, 0, 0.14),
0px 1px 18px 0px rgba(0,0,0,.12);
}</code></pre>
<p>You could simplify it to a single shadow (as below) if you wish, but it won't as smooth and nuanced.</p>
<pre><code class="language-css">.floating {
box-shadow: 0px 6px 10px 0px rgba(0, 0, 0, 0.2),
}</code></pre>
<button class="showModalBtn">Show Details</button>
</div>
<div class="card">
<h2>Sunken</h2>
<div class="rounded-rectangle sunken"></div>
<p>You can use a shadow to show that something is sunken into a surface. To achieve this you want to use an inner shadow - a shadow inside the content area of the element.</p>
<p>You use the <code>inset</code> keyword with <code>box-shadow</code> to create inner shadows. A subtle contrast works best most of the time. Use a slightly darker color than the background color, and a blur radius to spread and soften the shadow around the edges of the element. It creates a darker bevel really.</p>
<pre><code class="language-css">.sunken {
box-shadow: rgb(223, 222, 222) 0px 0px 6px 1px inset;
background-color: rgba(233, 233, 233, 0.25);
}</code></pre>
<p>This example looks like a checkbox. You can use linear gradients and multiple shadows to create more nuanced effects.</p>
<button class="showModalBtn">Show Details</button>
</div>
<div class="card">
<h2>Glow</h2>
<div class="rounded-rectangle glow"></div>
<p>To create a glowing effect, you can add multiple shadows with increasing blur radii and lighter colors.</p>
<p>This example is like a bright light. We use 2 shadows with no offsets. Each subsequent shadow has a larger blur radius, and has a lighter color (more transparent). This creates a diffuse effect.</p>
<pre><code class="language-css">.glow {
border-radius: 50%;
background-color: rgb(255, 238, 0);
box-shadow: 0 0 20px rgba(255, 230, 0, 0.8),
0 0 30px rgba(255, 230, 0, 0.6);
}</code></pre>
<button class="showModalBtn">Show Details</button>
</div>
<div class="card">
<h2>Transparent Image Shadow</h2>
<img src="img/bike.png" width="894" height="648" class="bicycle png-shadow" alt="bike" eleventy:ignore />
<p>Transparent images (or more accurately, images with transparent backgrounds) can have shadows applied to highlight the outline of the visible parts. The most commonly used transparent images formats now are: GIF, PNG, WEBP, and SVG.</p>
<p>The <code>drop-shadow()</code> filter is used to apply this type of shadow. It has a similar syntax to <code>box-shadow</code> but has no spread radius.</p>
<p>In this example, we add a shadow to a PNG image of a bicycle.</p>
<pre><code class="language-css">.png-shadow {
filter: drop-shadow(20px 10px 1px rgba(0, 0, 0, 0.4));
}</code></pre>
<button class="showModalBtn">Show Details</button>
</div>
<div class="card">
<h2>Grouped Elements Shadow</h2>
<div class="group">
<div class="rounded-rectangle"></div>
<img src="img/bike.png" width="894" height="648" class="bicycle" alt="bike" eleventy:ignore />
</div>
<p>If you have a group of elements, a <code>box-shadow</code> can look odd if the elements overflow the containing element. The shadow is based on the dimensions of the container only.</p>
<p>If you want a shadow to form around the outline of the grouped element, you can use the <code>drop-shadow()</code> filter instead.</p>
<pre><code class="language-html"><div class="group">
<div class="rounded-rectangle"></div>
<img src="img/bike.png"/>
</div>
</code></pre>
<pre><code class="language-css">.group {
filter: drop-shadow(20px 10px 1px rgba(0, 0, 0, 0.432));
}</code></pre>
<button class="showModalBtn">Show Details</button>
</div>
<div class="card">
<h2>Mutliple Outlines</h2>
<div class="rounded-rectangle multiple-outlines"></div>
<p>We can use <code>box-shadow</code> to create as many duplicates of an element as we want. We can create them to look like outlines/borders.</p>
<p>We achieve this through the spread radius. We increase the spread radius for each subsequent shadow to make a new outline. In this example, each outline is 3px wide.</p>
<pre><code class="language-css">.multiple-outlines {
box-shadow: rgb(85, 91, 255) 0px 0px 0px 3px,
rgb(31, 193, 27) 0px 0px 0px 6px,
rgb(255, 217, 19) 0px 0px 0px 9px,
rgb(255, 156, 85) 0px 0px 0px 12px,
rgb(255, 85, 85) 0px 0px 0px 15px;
}
</code></pre>
<button class="showModalBtn">Show Details</button>
</div>
<div class="card">
<h2>Text Drop Shadow</h2>
<div class="text-shadow text-drop-shadow">WOW</div>
<p>A drop shadow is cast by obstructed light.</p>
<p>Typically, the light source is directly above the element, so a drop shadow is directly below the element. This is done with a positive Y offset, and a small blur radius to give it a softer appearance.</p>
<p>The syntax for <code>text-shadow</code> is similar to <code>box-shadow</code>, but it does not have a spread radius. </p>
<pre><code class="language-css">.text-drop-shadow {
color: blue;
text-shadow: -1px 3px 2px rgba(0, 0, 0, 0.3);
}
</code></pre>
<button class="showModalBtn">Show Details</button>
</div>
<div class="card">
<h2>Text "Drop Shade"</h2>
<div class="text-shadow text-drop-shade">WOW</div>
<p>The drop shade is a technique where there is a clear separation between the text and its shadow. It can make text look like it is cut out of paper.</p>
<p>This can be achieved using two text-shadows — one nearer to the letterform that matches the background color, and one further away from the text that is a darker color.
<pre><code class="language-css">.text-drop-shade {
color: blue;
text-shadow: -2px 1px 0 pink, -6px 3px 0 rgba(0, 0, 0, 0.5);
}
</code></pre>
<p>If the background is not a solid color (has opacity of less than 1), this won’t work as well because of color blending. You could try to compensate for this with blending modes, I guess?</p>
</p>
<button class="showModalBtn">Show Details</button>
</div>
<div class="card">
<h2>3D Text</h2>
<div class="text-shadow text-3d-shadow">WOW</div>
<p>You can use text shadows to give text a thicker 3D appearance.</p>
<p>You can create this effect by adding a series of text shadows using small offsets (1px in this case). You can make the text shadows below the text darker than the text shadows offset more to create bevelled sides.</p>
<pre><code class="language-css">.text-3d-shadow {
font-family: "Alfa Slab One", sans-serif;
color: black;
text-shadow:
0 1px darkgrey,
-1px 0 lightgrey,
-1px 2px darkgrey,
-2px 1px lightgrey,
-2px 3px darkgrey,
-3px 2px lightgrey,
-3px 4px darkgrey,
-4px 3px lightgrey,
-4px 5px darkgrey,
-5px 4px lightgrey,
-5px 6px darkgrey,
-6px 5px lightgrey,
-6px 7px darkgrey,
-7px 6px lightgrey,
-7px 8px darkgrey,
-8px 7px lightgrey;
}
</code></pre>
<button class="showModalBtn">Show Details</button>
</div>
<div class="card">
<h2>Queue (Vertical)</h2>
<div class="rectangle queue-vertical"></div>
<p>We can use <code>box-shadow</code> to create many duplicates, and line them up like a queue.</p>
<p>By interspering larger white shadows with smaller blue shadows, we create white boxes with blue borders.</p>
<p>The final piece is to use a negative value for the spread radius to make the duplicates smaller. We can stagger them behind the element using a negative Y offset.</p>
<pre><code class="language-css">.rectangle {
background: white;
width: 100px;
height: 100px;
}
.queue-vertical {
border: 2px solid blue;
box-shadow:
white 0 -8px 0px -6px,
blue 0 -8px 0px -4px,
white 0 -16px 0px -10px,
blue 0 -16px 0px -8px,
white 0 -24px 0px -14px,
blue 0 -24px 0px -12px;
}</code></pre>
<button class="showModalBtn">Show Details</button>
</div>
<div class="card">
<h2>Queue (Offset 1)</h2>
<div class="rectangle queue-offset1"></div>
<p>We can use <code>box-shadow</code> to create many duplicates, and line them up like a queue.</p>
<p>By interspering larger white shadows with smaller blue shadows, we create white boxes with blue borders.</p>
<p>Here we are using the X offset and Y offset to stagger them to one side.</p>
<pre><code class="language-css">.rectangle {
background: white;
width: 100px;
height: 100px;
}
.queue-offset1 {
border: 2px solid blue;
box-shadow:
white -10px -10px 0px -3px,
blue -10px -10px 0px -1px,
white -20px -20px 0px -3px,
blue -20px -20px 0px -1px;
}</code></pre>
<button class="showModalBtn">Show Details</button>
</div>
<div class="card">
<h2>Queue (Offset 2)</h2>
<div class="rectangle queue-offset2"></div>
<p>We can use <code>box-shadow</code> to create many duplicates, and line them up like a queue.</p>
<p>By interspering larger white shadows with smaller blue shadows, we create white boxes with blue borders.</p>
<p>Here we are using the X offset and Y offset to stagger them to one side.</p>
<pre><code class="language-css">.rectangle {
background: white;
width: 100px;
height: 100px;
}
.queue-offset2 {
box-shadow:
white 10px -10px 0px -3px,
blue 10px -10px 0px -1px,
white 20px -20px 0px -3px,
blue 20px -20px 0px -1px;
}</code></pre>
<button class="showModalBtn">Show Details</button>
</div>
<div class="card">
<h2>Faux Stack (Vertical)</h2>
<div class="rectangle stack-vertical"></div>
<p>We can use <code>box-shadow</code> to create as many duplicates of an element as we want. We can set them up to look like stacks.</p>
<p>In this example, we stack them vertically through positive Y offsets.</p>
<pre><code class="language-css">.stack-vertical {
border: 1px blue solid;
box-shadow:
rgba(59, 46, 240, 1) 0px 4px,
rgba(59, 46, 240, 0.3) 0px 7px,
rgba(59, 46, 240, 0.2) 0px 10px,
rgba(59, 46, 240, 0.1) 0px 12px;
}
</code></pre>
<button class="showModalBtn">Show Details</button>
</div>
<div class="card">
<h2>Faux Stack (Offset 1)</h2>
<div class="rectangle stack-offset1"></div>
<p>We can use <code>box-shadow</code> to create as many duplicates of an element as we want. We can set them up to look like stacks.</p>
<p>In this example, we stack them to the side through the X offset and Y offset.</p>
<pre><code class="language-css">.stack-offset1 {
border: 1px blue solid;
box-shadow:
rgba(59, 46, 240, 0.4) -5px 5px,
rgba(59, 46, 240, 0.4) -10px 10px,
rgba(59, 46, 240, 0.3) -15px 15px;
}
</code></pre>
<button class="showModalBtn">Show Details</button>
</div>
<div class="card">
<h2>Faux Stack (Offset 2)</h2>
<div class="rectangle stack-offset2"></div>
<p>We can use <code>box-shadow</code> to create as many duplicates of an element as we want. We can set them up to look like stacks.</p>
<p>In this example, we stack them to the side through the X offset and Y offset.</p>
<pre><code class="language-css">.stack-offset2 {
border: 1px blue solid;
box-shadow:
rgba(59, 46, 240, 0.4) 5px 5px,
rgba(59, 46, 240, 0.4) 10px 10px,
rgba(59, 46, 240, 0.3) 15px 15px;
}
</code></pre>
<button class="showModalBtn">Show Details</button>
</div>
<div class="card neumorphism">
<h2>Neumorphism (Flat)</h2>
<div class="rectangle neumporphism-flat"></div>
<p>Neumorphism is a new take on skeumorphism. It creates a soft interface with elements appearing to be placed underneath the surface of the interface.</p>
<p>To achieve the effect you must use a cohesive color palette. The subtle outlines for elements are created with shadows. There is a darker shadow above the element, and a lighter shadow below the element.</p>
<p>In this example, the element has a flat surface.</p>
<pre><code class="language-css">.neumorphism {
background-color: #e0e0e0;
}
.neumporphism-flat {
border-radius: 50px;
background-color: #e0e0e0;
box-shadow: 20px 20px 60px #bebebe,
-20px -20px 60px #ffffff;
}
</code></pre>
<button class="showModalBtn">Show Details</button>
</div>
<div class="card neumorphism">
<h2>Neumorphism (Concave)</h2>
<div class="rectangle neumporphism-concave"></div>
<p>Neumorphism is a new take on skeumorphism. It creates a soft interface with elements appearing to be placed underneath the surface of the interface.</p>
<p>To achieve the effect you must use a cohesive color palette. The subtle outlines for elements are created with shadows. There is a darker shadow above the element, and a lighter shadow below the element. </p>
<p>In this example, the element has a concave surface. A linear gradient is used to give this impression.</p>
<pre><code class="language-css">.neumorphism {
background-color: #e0e0e0;
}
.neumporphism-concave {
border-radius: 50px;
background: linear-gradient(145deg, #cacaca, #f0f0f0);
box-shadow:
20px 20px 60px #bebebe,
-20px -20px 60px #ffffff;
}
</code></pre>
<button class="showModalBtn">Show Details</button>
</div>
<div class="card neumorphism">
<h2>Neumorphism (Convex)</h2>
<div class="rectangle neumporphism-convex"></div>
<p>Neumorphism is a new take on skeumorphism. It creates a soft interface with elements appearing to be placed underneath the surface of the interface.</p>
<p>To achieve the effect you must use a cohesive color palette. The subtle outlines for elements are created with shadows. There is a darker shadow above the element, and a lighter shadow below the element. </p>
<p>In this example, the element has a concave surface. A linear gradient is used to give this impression.</p>
<pre><code class="language-css">.neumorphism {
background-color: #e0e0e0;
}
.neumporphism-convex {
border-radius: 50px;
background: linear-gradient(145deg, #f0f0f0, #cacaca);
box-shadow:
20px 20px 60px #bebebe,
-20px -20px 60px #ffffff;
}
</code></pre>
<button class="showModalBtn">Show Details</button>
</div>
<div class="card neumorphism">
<h2>Neumorphism (Pressed)</h2>
<div class="rectangle neumporphism-pressed"></div>
<p>Neumorphism is a new take on skeumorphism. It creates a soft interface with elements appearing to be placed underneath the surface of the interface.</p>
<p>To achieve the effect you must use a cohesive color palette. The subtle outlines for elements are created with shadows. There is a darker shadow above the element, and a lighter shadow below the element. </p>
<p>In this example, the element has looks like it is pressed. Inset shadows are used to give this impression.</p>
<pre><code class="language-css">.neumorphism {
background-color: #e0e0e0;
}
.neumporphism-pressed {
border-radius: 50px;
background: #e0e0e0;
box-shadow:
inset 20px 20px 60px #bebebe,
inset -20px -20px 60px #ffffff;
}
</code></pre>
<button class="showModalBtn">Show Details</button>
</div>
<div class="card">
<h2>Vignette</h2>
<div class="rounded-rectangle vignette"></div>
<p>A vignette is a gradual dark shade surrounding the edges of a frame. It is used mostly for images.</p>
<p>We can do this with 2 inset shadows. To do it specifically with an image, don't apply it directly to an <code>img</code> element as it will be hidden underneath the image. It can be applied to an element with a background image, or to a <code>div</code> containing the image. I go for the former here.</p>
<p>You could use a <code>radial-gradient()</code>, or a <code>mask</code> instead for the same outcome.</p>
<pre><code class="language-css">.vignette {
background-image: url(img/violin.jpg);
background-size: contain;
box-shadow:
rgba(50, 50, 93, 0.75) 0px 30px 60px -12px inset,
rgba(0, 0, 0, 0.8) 0px 18px 36px -18px inset;
}</code></pre>
<button class="showModalBtn">Show Details</button>
</div>
<div class="card">
<h2>Target</h2>
<div class="rectangle target"></div>
<p>Overlapping shadows can be used to hide sections of a shadow and create different shapes.</p>
<p>In this case, we have a stack of shadows. At the bottom is a large red shadow. We then place 4 smaller white shadows on top, offset in each direction. This will cover the majority of the red shadow and only leave small sections by the corners.</p>
<pre><code class="language-css">.target {
background-color: white;
box-shadow:
0px 10px 0px -4px white,
0px -10px 0px -4px white,
10px 0px 0px -4px white,
-10px 0px 0px -4px white,
0px 0px 0px 5px red;
}</code></pre>
<button class="showModalBtn">Show Details</button>
</div>
<div class="card">
<h2>CSS Art</h2>
<div class="rectangle eye"></div>
<p>You can create elaborate art with shadows. Having lots of shadows is impractical to maintain for regular webpages. For art projects, you can do what you want!</p>
<p>This eye is a single <code>div</code>. As you can see from the code excerpt, it is created through <code>box-shadow</code> and <code>border-radius</code> only!</p>
<p>The shape of a shadow is based on the element it is applied to, but you can create variations by overlapping shadows. In this case,the cresent-shaped eyelid here is an example of this.</p>
<pre><code class="language-css">.eye {
border-radius: 50%;
box-shadow:
0 70px 0 -40px rgb(53, 32, 0) inset,
0 0 0 20px white inset,
0 0 0 25px rgb(40, 173, 0) inset,
0 0 0 40px #83d872 inset,
0 0 0 49px rgb(12, 12, 12) inset,
0 0 0 50px rgba(255, 255, 255) inset,
0 0px 0 2px rgb(53, 32, 0),
0 0 0 10px rgb(75, 45, 0);
}
</code></pre>
<button class="showModalBtn">Show Details</button>
</div>
<div class="card">
<h2>SVG Path Shadow</h2>
<svg id="svg-shadow" viewBox="0 0 1200 799.99998">
<defs>
<filter id="shadow">
<feDropShadow dx="10" dy="10" stdDeviation="20" flood-color="black" flood-opacity="0.75" />
</filter>
</defs>
<path id="shoe2" d="M1164.701 578.595s-174.482 0-256.525-.499c-69.003-.445-205.73 5.56-207.008-27.635-1.196-30.581 29.748-110.122 34.53-136.95a332.979 332.979 0 00157.66-34.474c17.793 17.376 116.961 111.04 198.42 120.63 89.856 10.593 72.923 78.928 72.923 78.928z" class="shoe" />
<path id="shoe1" d="M351.943 571.514s-134.763 2.177-151.159 0c-16.396-2.177-62.753-40.815-62.753-40.815 0-33.219 21.633-70.213 26.961-82.682 18.27 5.542 48.504 11.525 88.787 8.495 1.02 11.433 7.14 51.625 42.627 56.329 58.78 7.734 55.537 58.673 55.537 58.673z" class="shoe path-shadow" transform="matrix(1.79175 0 0 1.79175 -176.347 -463.114)" />
</svg>
<p>In a SVG, you may want to have shadows for individual paths.</p>
<p>The <code><feDropShadow></code> filter can be used for this purpose. It has no spread radius. </p>
<p>In this example, the shadow is applied to the shoe on the left shoe only.</p>
<pre><code class="language-css"><svg id="svg-shadow" viewBox="0 0 1200 800">
<defs>
<filter id="shadow">
<feDropShadow dx="10" dy="10"
stdDeviation="20" flood-color="black"
flood-opacity="0.75"/>
</filter>
</defs>
<path id="shoe1"
d="M351.943 571.514s-134.763 2.177-151.159 0c-16.396-2.177-62.753-40.815-62.753-40.815 0-33.219 21.633-70.213 26.961-82.682 18.27 5.542 48.504 11.525 88.787 8.495 1.02 11.433 7.14 51.625 42.627 56.329 58.78 7.734 55.537 58.673 55.537 58.673z"
class="shoe path-shadow"/>
<path id="shoe2"
d="M1164.701 578.595s-174.482 0-256.525-.499c-69.003-.445-205.73 5.56-207.008-27.635-1.196-30.581 29.748-110.122 34.53-136.95a332.979 332.979 0 00157.66-34.474c17.793 17.376 116.961 111.04 198.42 120.63 89.856 10.593 72.923 78.928 72.923 78.928z"
class="shoe"/>
</svg>
</code></pre>
<pre><code class="language-css">.path-shadow {
filter: url(#shadow);
}</code></pre>
<p>SVG filters are <i>not</i> supported in Safari. So, you should consider creating a shadow manually (with another path/shape), if you want to support Safari.</p>
<button class="showModalBtn">Show Details</button>
</div>
<div id="myModal" class="modal">
<div class="modal-content">
<button id="closeBtn">×</button>
</div>
</div>
</main>@font-face {
font-family: "Pacifico";
src: url("./fonts/Pacifico-Regular.woff2");
}
@font-face {
font-family: "Alba Slab One";
src: url("./fonts/AlfaSlabOne-Regular.ttf");
}
*,
*:before,
*:after {
box-sizing: border-box;
}
html {
--card-width: 250px;
--item-width: 100px;
--item-bg-color: rgb(59, 177, 255);
background-color: #ffffff;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 28' width='56' height='28'%3E%3Cpath fill='%23e3e8fb' fill-opacity='0.4' d='M56 26v2h-7.75c2.3-1.27 4.94-2 7.75-2zm-26 2a2 2 0 1 0-4 0h-4.09A25.98 25.98 0 0 0 0 16v-2c.67 0 1.34.02 2 .07V14a2 2 0 0 0-2-2v-2a4 4 0 0 1 3.98 3.6 28.09 28.09 0 0 1 2.8-3.86A8 8 0 0 0 0 6V4a9.99 9.99 0 0 1 8.17 4.23c.94-.95 1.96-1.83 3.03-2.63A13.98 13.98 0 0 0 0 0h7.75c2 1.1 3.73 2.63 5.1 4.45 1.12-.72 2.3-1.37 3.53-1.93A20.1 20.1 0 0 0 14.28 0h2.7c.45.56.88 1.14 1.29 1.74 1.3-.48 2.63-.87 4-1.15-.11-.2-.23-.4-.36-.59H26v.07a28.4 28.4 0 0 1 4 0V0h4.09l-.37.59c1.38.28 2.72.67 4.01 1.15.4-.6.84-1.18 1.3-1.74h2.69a20.1 20.1 0 0 0-2.1 2.52c1.23.56 2.41 1.2 3.54 1.93A16.08 16.08 0 0 1 48.25 0H56c-4.58 0-8.65 2.2-11.2 5.6 1.07.8 2.09 1.68 3.03 2.63A9.99 9.99 0 0 1 56 4v2a8 8 0 0 0-6.77 3.74c1.03 1.2 1.97 2.5 2.79 3.86A4 4 0 0 1 56 10v2a2 2 0 0 0-2 2.07 28.4 28.4 0 0 1 2-.07v2c-9.2 0-17.3 4.78-21.91 12H30zM7.75 28H0v-2c2.81 0 5.46.73 7.75 2zM56 20v2c-5.6 0-10.65 2.3-14.28 6h-2.7c4.04-4.89 10.15-8 16.98-8zm-39.03 8h-2.69C10.65 24.3 5.6 22 0 22v-2c6.83 0 12.94 3.11 16.97 8zm15.01-.4a28.09 28.09 0 0 1 2.8-3.86 8 8 0 0 0-13.55 0c1.03 1.2 1.97 2.5 2.79 3.86a4 4 0 0 1 7.96 0zm14.29-11.86c1.3-.48 2.63-.87 4-1.15a25.99 25.99 0 0 0-44.55 0c1.38.28 2.72.67 4.01 1.15a21.98 21.98 0 0 1 36.54 0zm-5.43 2.71c1.13-.72 2.3-1.37 3.54-1.93a19.98 19.98 0 0 0-32.76 0c1.23.56 2.41 1.2 3.54 1.93a15.98 15.98 0 0 1 25.68 0zm-4.67 3.78c.94-.95 1.96-1.83 3.03-2.63a13.98 13.98 0 0 0-22.4 0c1.07.8 2.09 1.68 3.03 2.63a9.99 9.99 0 0 1 16.34 0z'%3E%3C/path%3E%3C/svg%3E");
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}
main {
max-width: 1200px;
margin: 0 auto;
padding: 10px;
}
main > p {
text-align: center;
}
h1 {
text-shadow: 1px 3px 3px rgba(0, 0, 0, 0.4);
}
/* The Modal */
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow-y: scroll;
background-color: rgba(0, 0, 0, 0.6); /* Black w/ opacity */
}
.modal h2 {
margin-bottom: 2rem;
}
.modal-content {
position: relative;
display: grid;
margin: auto;
padding: 20px;
background: white;
border: 1px solid #888;
width: 95%;
max-width: 800px;
overflow-y: inherit;
}
#closeBtn {
position: absolute;
top: 5px;
right: 5px;
padding-inline: . 25rem;
color: #ffffff;
background-color: #ff0000;
border-radius: 5%;
border: none;
box-shadow: rgba(0, 0, 0, 0.3) 0 0 4px 1px;
font-size: 1rem;
font-weight: bold;
}
#closeBtn:hover,
#closeBtn:focus {
text-decoration: none;
cursor: pointer;
}
h1,
h2 {
text-align: center;
}
h2 {
font-size: 1rem;
margin-bottom: 1.25rem;
}
.card pre,
.card p {
display: none;
}
code {
font-family: "Fira Code", "Jet Brains Mono", monospace;
}
.showModalBtn {
padding: 0.5rem 0;
width: 80%;
place-self: center;
background-color: transparent;
border: rgba(0, 0, 0, 0.4) 1px solid;
border-radius: 5px;
box-shadow: rgba(0, 0, 0, 0.15) 0 1px 2px 0px;
}
.showModalBtn:hover {
cursor: pointer;
}
.card-container {
display: grid;
gap: 20px;
grid-template-columns: repeat(auto-fit, minmax(var(--card-width), 1fr));
}
.card {
background: rgb(255, 255, 255);
background: linear-gradient(
180deg,
rgba(255, 255, 255, 1) 0%,
rgba(255, 255, 255, 1) 1%,
rgb(250, 249, 249) 100%
);
position: relative;
display: grid;
padding: 0 5px;
padding-bottom: 25px;
gap: 20px;
border-radius: 5px;
border: rgb(204, 219, 232) 1px solid;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.card:hover {
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}
.rounded-rectangle {
width: var(--item-width);
height: var(--item-width);
margin: 0 auto;
border-radius: 10px;
}
.rectangle {
background: white;
width: var(--item-width);
height: var(--item-width);
margin: 0 auto;
}
.drop-shadow {
background-color: var(--item-bg-color);
box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 4px 0px;
}
.floating {
background-color: var(--item-bg-color);
border-radius: 50%;
box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
}
.sunken {
box-shadow: rgb(223, 222, 222) 0px 0px 6px 1px inset;
background-color: rgba(233, 233, 233, 0.25);
}
.glow {
border-radius: 50%;
background-color: rgb(255, 238, 0);
box-shadow: 0 0 20px rgba(255, 238, 0, 0.8), 0 0 30px rgba(255, 238, 0, 0.6);
}
.vignette {
background-image: url(img/bike.png);
background-size: contain;
background-position: 50% 50%;
background-repeat: no-repeat;
box-shadow: rgba(50, 50, 93, 0.75) 0px 30px 60px -12px inset,
rgba(0, 0, 0, 0.8) 0px 18px 36px -18px inset;
}
.queue-vertical {
border: 2px solid blue;
box-shadow: white 0 -8px 0px -6px, blue 0 -8px 0px -4px, white 0 -16px 0px -10px,
blue 0 -16px 0px -8px, white 0 -24px 0px -14px, blue 0 -24px 0px -12px;
}
.queue-offset1 {
border: 2px solid blue;
box-shadow: white -10px -10px 0px -3px, blue -10px -10px 0px -1px,
white -20px -20px 0px -3px, blue -20px -20px 0px -1px;
}
.queue-offset2 {
border: 2px solid blue;
box-shadow: white 10px -10px 0px -3px, blue 10px -10px 0px -1px,
white 20px -20px 0px -3px, blue 20px -20px 0px -1px;
}
.multiple-outlines {
box-shadow: rgb(85, 91, 255) 0px 0px 0px 3px, rgb(31, 193, 27) 0px 0px 0px 6px,
rgb(255, 217, 19) 0px 0px 0px 9px, rgb(255, 156, 85) 0px 0px 0px 12px,
rgb(255, 85, 85) 0px 0px 0px 15px;
}
.stack-vertical {
border: 1px solid blue;
box-shadow: rgba(59, 46, 240, 1) 0px 4px, rgba(59, 46, 240, 0.3) 0px 7px,
rgba(59, 46, 240, 0.2) 0px 10px, rgba(59, 46, 240, 0.1) 0px 12px;
}
.stack-offset1 {
border: 1px solid blue;
box-shadow: rgba(59, 46, 240, 0.4) -5px 5px, rgba(59, 46, 240, 0.4) -10px 10px,
rgba(59, 46, 240, 0.3) -15px 15px;
}
.stack-offset2 {
border: 1px solid blue;
box-shadow: rgba(59, 46, 240, 0.4) 5px 5px, rgba(59, 46, 240, 0.4) 10px 10px,
rgba(59, 46, 240, 0.3) 15px 15px;
}
.neumorphism {
background: #e0e0e0;
}
.neumporphism-flat {
border-radius: 50px;
background-color: #e0e0e0;
box-shadow: 20px 20px 60px #bebebe, -20px -20px 60px #ffffff;
}
.neumporphism-concave {
border-radius: 50px;
background: linear-gradient(145deg, #cacaca, #f0f0f0);
box-shadow: 20px 20px 60px #bebebe, -20px -20px 60px #ffffff;
}
.neumporphism-convex {
border-radius: 50px;
background: linear-gradient(145deg, #f0f0f0, #cacaca);
box-shadow: 20px 20px 60px #bebebe, -20px -20px 60px #ffffff;
}
.neumporphism-pressed {
border-radius: 50px;
background-color: #e0e0e0;
box-shadow: inset 20px 20px 60px #bebebe, inset -20px -20px 60px #ffffff;
}
.png-shadow {
height: var(--item-width);
width: auto;
justify-self: center;
filter: drop-shadow(20px 10px 1px rgba(0, 0, 0, 0.432));
}
.group {
position: relative;
height: var(--item-width);
width: var(--item-width);
justify-self: center;
filter: drop-shadow(20px 10px 1px rgba(0, 0, 0, 0.432));
}
.group div {
position: absolute;
background-color: var(--item-bg-color);
}
.group img {
position: absolute;
top: -50px;
height: inherit;
width: auto;
}
#svg-shadow {
height: var(--item-width);
place-self: center;
}
.shoe {
fill: #6562cf;
}
.path-shadow {
filter: url(#shadow);
}
.target {
background-color: white;
box-shadow: 0px 10px 0px -4px white, 0px -10px 0px -4px white,
10px 0px 0px -4px white, -10px 0px 0px -4px white, 0px 0px 0px 5px red;
}
.eye {
border-radius: 50%;
box-shadow: 0 70px 0 -40px rgb(53, 32, 0) inset, 0 0 0 20px white inset,
0 0 0 25px rgb(40, 173, 0) inset, 0 0 0 40px #83d872 inset,
0 0 0 49px rgb(12, 12, 12) inset, 0 0 0 50px rgba(255, 255, 255) inset,
0 0px 0 2px rgb(53, 32, 0), 0 0 0 10px rgb(75, 45, 0);
}
.text-shadow {
place-self: center;
font-size: 4rem;
font-weight: bold;
font-family: "Pacifico", Helvetica, sans-serif;
background-color: hotpink;
vertical-align: middle;
height: var(--item-width);
padding: 0 1rem;
}
.text-drop-shadow {
color: blue;
text-shadow: -1px 3px 2px rgba(0, 0, 0, 0.3);
}
.text-drop-shade {
color: blue;
text-shadow: -2px 1px 0 hotpink, -6px 3px 0 rgba(0, 0, 0, 0.5);
}
.text-3d-shadow {
font-family: "Alfa Slab One", sans-serif;
background-color: white;
text-shadow: 0 1px darkgrey, -1px 0 lightgrey, -1px 2px darkgrey,
-2px 1px lightgrey, -2px 3px darkgrey, -3px 2px lightgrey, -3px 4px darkgrey,
-4px 3px lightgrey, -4px 5px darkgrey, -5px 4px lightgrey, -5px 6px darkgrey,
-6px 5px lightgrey, -6px 7px darkgrey, -7px 6px lightgrey, -7px 8px darkgrey,
-8px 7px lightgrey;
}let modal = document.getElementById("myModal");
let closeBtn = document.getElementById("closeBtn");
closeBtn.onclick = function () {
hideModal();
};
window.onclick = function (event) {
if (event.target === modal) {
hideModal();
}
};
window.addEventListener("keydown", (event) => {
console.log(event);
if (event.key.toUpperCase() === "ESCAPE") {
hideModal();
}
});
let cardButtons = document.getElementsByClassName("showModalBtn");
let modalContent = document.getElementsByClassName("modal-content")[0];
for (let cardButton of cardButtons) {
cardButton.addEventListener("click", (event) => {
cloneContent(event.target.parentElement);
showModal();
});
}
function cloneContent(target) {
let { children } = target;
for (name of target.classList) {
if (name === "neumorphism") {
modalContent.classList.add("neumorphism");
}
}
for (child of children) {
let clone = child.cloneNode(true);
if (child.className !== "showModalBtn") {
modalContent.append(clone);
}
modalContent.append(closeBtn);
}
}
function showModal() {
modal.style.display = "block";
}
function hideModal() {
modal.style.display = "none";
resetModal();
}
function resetModal() {
modalContent.innerHTML = "";
modalContent.classList.remove("neumorphism");
}Description
A set of examples exploring the various ways you can use shadows in CSS.
Dependencies
Scripts
- Prism (Syntax Highlighter) https://cdnjs.cloudflare.com/ajax/libs/prism/1.4.1/prism.min.js
Stylesheets
- Tomorrow Prism theme https://cdnjs.cloudflare.com/ajax/libs/prism/1.22.0/themes/prism-tomorrow.min.css