Add 2 new snippets

snippets/card-image-cutout.md

@@ -0,0 +1,81 @@
+---
+title: Card with image cutout
+tags: visual
+expertise: intermediate
+author: chalarangelo
+cover: blog_images/radio-monstera.jpg
+firstSeen: 2022-12-11T05:00:00-04:00
+---
+
+Creates a card with an image cutout.
+
+- Use `background` to add a colored background to a `.container` element.
+- Create a `.card` containing a `figure` with the appropriate image for the cutout and any other content you want.
+- Use the `::before` pseudo-element to add a `border` around the `figure` element, matching the `.container` element's `background` and creating the illusion of a cutout in the `.card`.
+
+```html
+<div class="container">
+  <div class="card">
+    <figure>
+      <img alt="" src="https://picsum.photos/id/447/400/400"/>
+    </figure>
+    <p class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
+  </div>
+</div>
+```
+
+```css
+.container {
+  display: flex;
+  padding: 96px 24px 48px;
+  justify-content: center;
+  align-items: center;
+  background: #f3f1fe;
+}
+
+.card {
+  width: 350px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background: #fff;
+  border-radius: 10px;
+  margin: 8px;
+  box-shadow: 0 0 5px -2px rgba(0, 0, 0, 0.1);
+}
+
+.card figure {
+  width: 120px;
+  height: 120px;
+  border-radius: 50%;
+  margin-top: -60px;
+  position: relative;
+}
+
+.card figure::before {
+  content: "";
+  border-radius: inherit;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 100%;
+  height: 100%;
+  transform: translate(-50%, -50%);
+  border: 1rem solid #f3f1fe;
+  box-shadow: 0 1px rgba(0, 0, 0, 0.1);
+}
+
+.card figure img {
+  border-radius: inherit;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.card .content {
+  text-align: center;
+  margin: 2rem;
+  line-height: 1.5;
+  color: #101010;
+}
+```

snippets/rotating-card.md

@@ -45,8 +45,8 @@ Creates a two sided card which rotates on hover.
   top: 0;
   left: 0;
   width: 80%;
-  padding:2rem;
-  color: white
+  padding: 2rem;
+  color: white;
 }
 
 .card-side.back {

snippets/shifting-card.md

@@ -0,0 +1,78 @@
+---
+title: Shifting Card
+tags: animation
+expertise: advanced
+author: chalarangelo
+cover: blog_images/clouds-n-mountains.jpg
+firstSeen: 2022-12-14T05:00:00-04:00
+---
+
+Creates a card that shifts on hover.
+
+- Set the appropriate `perspective` on the `.container` element to allow for the shifting effect.
+- Add a `transition` for the `transform` property of the `.card` element.
+- Use `Document.querySelector()` to select the `.card` element and add event listeners for the `mousemove` and `mouseout` events.
+- Use `Element.getBoundingClientRect()` to get the `x`, `y`, `width`, and `height` of the `.card` element.
+- Calculate the relative distance as a value between `-1` and `1` for the `x` and `y` axes and apply it through the `transform` property.
+
+```html
+<div class="container">
+  <div class="shifting-card">
+    <div class="content">
+      <h3>Card</h3>
+      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti repellat, consequuntur doloribus voluptate esse iure?</p>
+    </div>
+  </div>
+</div>
+```
+
+```css
+.container {
+  display: flex;
+  padding: 24px;
+  justify-content: center;
+  align-items: center;
+  background: #f3f1fe;
+}
+
+.shifting-card {
+  width: 350px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background: #fff;
+  border-radius: 10px;
+  margin: 0.5rem;
+  transition: transform 0.2s ease-out;
+  box-shadow: 0 0 5px -2px rgba(0, 0, 0, 0.1);
+}
+
+.shifting-card .content {
+  text-align: center;
+  margin: 2rem;
+  line-height: 1.5;
+  color: #101010;
+}
+```
+
+```js
+const card = document.querySelector('.shifting-card');
+const { x, y, width, height } = card.getBoundingClientRect();
+const cx = x + width / 2;
+const cy = y + height / 2;
+
+const handleMove = e => {
+  const { pageX, pageY } = e;
+  const dx = (cx - pageX) / (width / 2);
+  const dy = (cy - pageY) / (height / 2);
+  e.target.style.transform =
+    `rotateX(${10 * dy * -1}deg) rotateY(${10 * dx}deg)`;
+};
+
+const handleOut = e => {
+  e.target.style.transform = 'initial';
+};
+
+card.addEventListener('mousemove', handleMove);
+card.addEventListener('mouseout', handleOut);
+```