more patterns

index.html

@@ -3,15 +3,25 @@
   <li><a href="patterns/break-out-wrapper.html">break-out-wrapper.html</a></li>
   <li><a href="patterns/center-body.html">center-body.html</a></li>
   <li><a href="patterns/center-wrapper.html">center-wrapper.html</a></li>
+  <li><a href="patterns/clip-hexagon-alt.html">clip-hexagon-alt.html</a></li>
+  <li><a href="patterns/clip-hexagon.html">clip-hexagon.html</a></li>
+  <li><a href="patterns/clip-octagon.html">clip-octagon.html</a></li>
+  <li><a href="patterns/clip-star.html">clip-star.html</a></li>
   <li><a href="patterns/editable-style.html">editable-style.html</a></li>
   <li><a href="patterns/fade-truncation.html">fade-truncation.html</a></li>
   <li><a href="patterns/focus-visible.html">focus-visible.html</a></li>
   <li>
     <a href="patterns/hover-animated-underline.html"
     >hover-animated-underline.html</a>
   </li>
+  <li><a href="patterns/layered-shadow.html">layered-shadow.html</a></li>
   <li><a href="patterns/loader-3-dots.html">loader-3-dots.html</a></li>
   <li><a href="patterns/loader-3-lines.html">loader-3-lines.html</a></li>
   <li><a href="patterns/notch.html">notch.html</a></li>
+  <li><a href="patterns/rounded-tab.html">rounded-tab.html</a></li>
   <li><a href="patterns/scroll-shadows.html">scroll-shadows.html</a></li>
+  <li>
+    <a href="patterns/transition-height-auto.html"
+    >transition-height-auto.html</a>
+  </li>
 </ul>

patterns/break-out-wrapper.html

@@ -19,6 +19,7 @@
     --max-width: 70rem;
     --gap: 2rem;
 
+    /* Implementation */
     display: grid;
     column-gap: var(--gap);
     justify-content: space-between;

patterns/clip-hexagon-alt.html

@@ -0,0 +1,23 @@
+<!--
+# Clipping shapes: hexagon (alternative version)
+
+More info: https://www.smashingmagazine.com/2024/05/modern-guide-making-css-shapes/
+-->
+
+<div class="clip-hexagon-alt"></div>
+
+<style>
+  .clip-hexagon-alt {
+    /* Implementation */
+    aspect-ratio: 1/cos(30deg);
+    object-fit: cover;
+    clip-path: polygon(50% -50%, 100% 50%, 50% 150%, 0% 50%);
+  }
+</style>
+
+<style id="demo-styles">
+  div {
+    max-width: 200px;
+    background: radial-gradient(#8a9b0f, #3b8686);
+  }
+</style>

patterns/clip-hexagon.html

@@ -0,0 +1,28 @@
+<!--
+# Clipping shapes: hexagon
+
+More info: https://www.smashingmagazine.com/2024/05/modern-guide-making-css-shapes/
+-->
+
+<div class="clip-hexagon"></div>
+
+<style>
+  .clip-hexagon {
+    /* Implementation */
+    aspect-ratio: cos(30deg);
+    object-fit: cover;
+    clip-path: polygon(
+      -50% 50%,
+      50% 100%,
+      150% 50%,
+      50% 0
+    );
+  }
+</style>
+
+<style id="demo-styles">
+  div {
+    max-width: 200px;
+    background: radial-gradient(#8a9b0f, #3b8686);
+  }
+</style>

patterns/clip-octagon.html

@@ -0,0 +1,29 @@
+<!--
+# Clipping shapes: octagon
+
+More info: https://www.smashingmagazine.com/2024/05/modern-guide-making-css-shapes/
+-->
+
+<div class="clip-octagon"></div>
+
+<style>
+  .clip-octagon {
+    /* Implementation */
+    --_o: calc(50% * tan(-22.5deg));
+    aspect-ratio: 1;
+    object-fit: cover;
+    clip-path: polygon(
+      var(--_o) 50%,
+      50% var(--_o),
+      calc(100% - var(--_o)) 50%,
+      50% calc(100% - var(--_o))
+    );
+  }
+</style>
+
+<style id="demo-styles">
+  div {
+    max-width: 200px;
+    background: radial-gradient(#8a9b0f, #3b8686);
+  }
+</style>

patterns/clip-star.html

@@ -0,0 +1,29 @@
+<!--
+# Clipping shapes: star
+
+More info: https://www.smashingmagazine.com/2024/05/modern-guide-making-css-shapes/
+-->
+
+<div class="clip-star"></div>
+
+<style>
+  .clip-star {
+    /* Implementation */
+    aspect-ratio: 1;
+    object-fit: cover;
+    clip-path: polygon(
+      50% 0,
+      calc(50% * (1 + sin(0.4turn))) calc(50% * (1 - cos(0.4turn))),
+      calc(50% * (1 - sin(0.2turn))) calc(50% * (1 - cos(0.2turn))),
+      calc(50% * (1 + sin(0.2turn))) calc(50% * (1 - cos(0.2turn))),
+      calc(50% * (1 - sin(0.4turn))) calc(50% * (1 - cos(0.4turn)))
+    );
+  }
+</style>
+
+<style id="demo-styles">
+  div {
+    max-width: 200px;
+    background: radial-gradient(#8a9b0f, #3b8686);
+  }
+</style>

patterns/editable-style.html

@@ -21,6 +21,7 @@
     /* User settings */
     --font-family: monospace;
 
+    /* Implementation */
     display: block;
     font-family: var(--font-family);
     white-space: pre;

patterns/focus-visible.html

@@ -10,6 +10,7 @@
 <button>click</button>
 
 <style>
+  /* Implementation */
   /* Focusing with a keyboard. */
   button:focus-visible {
     outline: 4px dashed black;

patterns/layered-shadow.html

@@ -0,0 +1,36 @@
+<!--
+# Layered shadow
+
+Create beautiful shadows by applying different layers
+
+More info: https://www.joshwcomeau.com/css/designing-shadows/
+-->
+
+<div class="layered-shadow"></div>
+
+<style>
+  .layered-shadow {
+    /* User settings */
+    --shadow-color: hsl(0deg 0% 0% / 0.075);
+
+    /* Implementation */
+    box-shadow:
+      0 1px 1px var(--shadow-color),
+      0 2px 2px var(--shadow-color),
+      0 4px 4px var(--shadow-color),
+      0 8px 8px var(--shadow-color),
+      0 16px 16px var(--shadow-color);
+  }
+</style>
+
+<style id="demo-styles">
+  body {
+    background-color: hsl(0deg 0% 0% / 0.05);
+  }
+  .layered-shadow {
+    width: 200px;
+    height: 200px;
+    border-radius: 6px;
+    background: white;
+  }
+</style>

patterns/rounded-tab.html

@@ -0,0 +1,37 @@
+<!--
+# Clipping shapes: Rounded tab
+
+More info: https://www.smashingmagazine.com/2024/05/modern-guide-making-css-shapes/
+-->
+
+<div class="rounded-tab">
+  Click here
+</div>
+
+<style>
+  .rounded-tab {
+    /* User settings */
+    --radius: 1rem;
+    --background: gray;
+
+    /* Implementation */
+    border-inline: var(--radius) solid #0000;
+    border-radius: calc(2 * var(--radius)) calc(2 * var(--radius)) 0 0 / var(
+      --radius
+    );
+    background: var(--background);
+    padding: var(--radius);
+    mask:
+      radial-gradient(var(--radius) at var(--radius) 0, #0000 98%, #000 101%)
+      calc(-1 * var(--radius)) 100%/100% var(--radius) repeat-x,
+       conic-gradient(#000 0 0) padding-box;
+  }
+</style>
+
+<style id="demo-styles">
+  div {
+    text-align: center;
+    max-width: 200px;
+    font-size: 2em;
+  }
+</style>

patterns/scroll-shadows.html

@@ -36,6 +36,7 @@
     --shadow-color: rgba(0, 0, 0, 0.2);
     --shadow-size: 10px;
 
+    /* Implementation */
     max-height: 200px;
     overflow: auto;
 

patterns/transition-height-auto.html

@@ -0,0 +1,47 @@
+<!--
+# Transitioning to Height Auto
+
+A simple solution to transition to height: auto using grid
+
+More info: https://keithjgrant.com/posts/2023/04/transitioning-to-height-auto/
+-->
+
+<button onclick="this.nextElementSibling.classList.toggle('is-open')">
+  Open/Close
+</button>
+
+<div class="transition-height-auto">
+  <div>
+    Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus, sunt ea
+    natus quibusdam quae praesentium commodi aliquam sint optio modi iure
+    fugiat, quis doloremque aut, nesciunt id tempore doloribus voluptates!
+  </div>
+</div>
+
+<style>
+  .transition-height-auto {
+    /* User settings */
+    --speed: 0.5s;
+
+    /* Implementation */
+    display: grid;
+    grid-template-rows: 0fr;
+    transition: grid-template-rows var(--speed) ease-out;
+
+    &.is-open {
+      grid-template-rows: 1fr;
+    }
+
+    > * {
+      overflow: hidden;
+    }
+  }
+</style>
+
+<style id="demo-styles">
+  .transition-height-auto {
+    border: solid 1px;
+    max-width: 200px;
+    margin-top: 1em;
+  }
+</style>