another tip

Afif13 · Jul 4, 2023 · 698932c · 698932c
1 parent 58ac6be
commit 698932c
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 13 deletions.
diff --git a/content/3d-trailing-shadow/image.png b/content/3d-trailing-shadow/image.png
diff --git a/content/3d-trailing-shadow/index.md b/content/3d-trailing-shadow/index.md
@@ -0,0 +1,44 @@
+---
+layout: layouts/post.njk
+title: 3D trailing shadows for images
+description: A simple trick to add a 3D shadow to your images
+date: 2023-07-04
+tags: posts
+---
+
+Add a 3D trailing shadow to your image with a few lines of code
+* No extra element (only the `<img>` tag)
+* No pseudo-element
+* Less than 10 CSS declarations
+* No scrollbar issue
+
+
+{% image "./image.png", "A 3D trailing shadow for images" %}
+
+```css
+img {
+  --c: #CBE86B; /* the main color */
+  --t: 5px; /* thickness of the outline */
+
+  width: 200px; /* the image size */
+  aspect-ratio: 1; /* only square images, don't change this */
+  border-image: 
+    linear-gradient(45deg,
+      color-mix(in srgb,var(--c),#000 20%) 50%,
+      color-mix(in srgb,var(--c),#000 40%) 0) 
+     9999/9999px/9999px;
+  clip-path: 
+    polygon(0 100%,0 0,100% 0,
+      calc(100% + 9999px) 9999px,
+      9999px calc(100% + 9999px));
+  outline: var(--t) solid var(--c);
+  outline-offset: calc(-1*var(--t));
+}
+```
+
+<p class="codepen" data-height="450" data-default-tab="result" data-slug-hash="mdQwgMO" data-preview="true" data-user="t_afif" style="height: 450px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
+  <span>See the Pen <a href="https://codepen.io/t_afif/pen/mdQwgMO">
+  3D trailing shadow for images</a> by Temani Afif (<a href="https://codepen.io/t_afif">@t_afif</a>)
+  on <a href="https://codepen.io">CodePen</a>.</span>
+</p>
+<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
diff --git a/content/color-shades-color-mix/index.md b/content/color-shades-color-mix/index.md
@@ -28,9 +28,5 @@ html {
 </p>
 <script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
 
-## Related Links
-
-* [https://developer.chrome.com/articles/high-definition-css-color-guide/](https://developer.chrome.com/articles/high-definition-css-color-guide/)
-* [https://www.w3.org/TR/css-color-5/#color-mix](https://www.w3.org/TR/css-color-5/#color-mix)
 
 
diff --git a/content/color-switch-color-mix/index.md b/content/color-switch-color-mix/index.md
@@ -40,7 +40,3 @@ body {
 </p>
 <script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
 
-## Related Links
-
-* [https://developer.chrome.com/articles/high-definition-css-color-guide/](https://developer.chrome.com/articles/high-definition-css-color-guide/)
-* [https://www.w3.org/TR/css-color-5/#color-mix](https://www.w3.org/TR/css-color-5/#color-mix)
diff --git a/content/color-wheel-gradient/index.md b/content/color-wheel-gradient/index.md
@@ -27,8 +27,3 @@ Use `conic-gradient()` and the new color interpolation to create a nice color wh
 </p>
 <script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
 
-
-## Related Links
-
-* [https://developer.chrome.com/articles/high-definition-css-color-guide/](https://developer.chrome.com/articles/high-definition-css-color-guide/)
-* [https://www.w3.org/TR/css-color-4/#hue-interpolation](https://www.w3.org/TR/css-color-4/#hue-interpolation)