Pens from Gabrielle Wee https://codepen.io/gabriellewee/ en nospam@codepen.io Copyright 2024 2023-10-12T17:51:35-07:00 Windows 95 https://codepen.io/gabriellewee/pen/MWqRZzp https://codepen.io/gabriellewee/pen/MWqRZzp Gabrielle Wee

See the Code - See it Full Page - See Details

A Windows 95 experiment. See Welcome message in pen for more details.

]]>
Windows 95 2023-10-12T17:51:35-07:00
CSS-Only Pokemon Quest Icon Sorter https://codepen.io/gabriellewee/pen/KKQwydY https://codepen.io/gabriellewee/pen/KKQwydY Gabrielle Wee

See the Code - See it Full Page - See Details

I challenged myself back in 2018 to make every single Pokémon Quest icon with CSS only. I finally finished in 2022! Each icon is fully responsive and there's even a CSS-only navigation to sort by type. See also [Pokémon Quest Starter Icons](https://codepen.io/gabriellewee/pen/VqBvvo/) and [Pokémon Sprite Sorter](https://codepen.io/gabriellewee/pen/dWRgmJ/).

]]>
CSS-Only Pokemon Quest Icon Sorter 2023-03-20T18:18:57-07:00
CSS Outline Exploration https://codepen.io/gabriellewee/pen/eYymPGR https://codepen.io/gabriellewee/pen/eYymPGR Gabrielle Wee

See the Code - See it Full Page - See Details

Trying out some different styles for situations where outlines don't quite match up.

]]>
CSS Outline Exploration 2022-03-14T20:26:12-07:00
Zdog Draggable Monument Valley 2 Doortem https://codepen.io/gabriellewee/pen/yLbJpgv https://codepen.io/gabriellewee/pen/yLbJpgv Gabrielle Wee

See the Code - See it Full Page - See Details

Recreated <a href="https://codepen.io/gabriellewee/pen/PjwgMq/">one of my old pens</a> featuring <a href="https://www.monumentvalleygame.com/mv2">the Monument Valley 2 Doortem</a> using <a href="https://zzz.dog">the Zdog library</a> by @desandro/Metafizzy

]]>
Zdog Draggable Monument Valley 2 Doortem 2022-09-23T00:31:52-07:00
Zdog Draggable Monument Valley Totem https://codepen.io/gabriellewee/pen/JjNGvJd https://codepen.io/gabriellewee/pen/JjNGvJd Gabrielle Wee

See the Code - See it Full Page - See Details

Recreated <a href="https://codepen.io/gabriellewee/pen/zNBMmW/">one of my old pens</a> featuring <a href="https://www.monumentvalleygame.com/mv1">the Monument Valley Totem</a> using <a href="https://zzz.dog">the Zdog library</a> by @desandro/Metafizzy

]]>
Zdog Draggable Monument Valley Totem 2022-09-23T00:29:08-07:00
Zdog Test https://codepen.io/gabriellewee/pen/oNWbqrN https://codepen.io/gabriellewee/pen/oNWbqrN Gabrielle Wee

See the Code - See it Full Page - See Details

Testing out Zdog with <a href="https://codepen.io/gabriellewee/pen/5ed707a8d881833858341ea25642e5ca">an old animation</a>.

]]>
Zdog Test 2021-07-06T03:43:24-07:00
CSS-Only Photo Info Popup https://codepen.io/gabriellewee/pen/rNWZJgy https://codepen.io/gabriellewee/pen/rNWZJgy Gabrielle Wee

See the Code - See it Full Page - See Details

Working on a popup to display photo information! This uses a checkbox with multiple labels to control the popup.

]]>
CSS-Only Photo Info Popup 2023-01-23T01:16:41-07:00
Four-Quadrant CSS-Only Gradient https://codepen.io/gabriellewee/pen/zYGxNKa https://codepen.io/gabriellewee/pen/zYGxNKa Gabrielle Wee

See the Code - See it Full Page - See Details

This is a four-quadrant CSS-only gradient with four unique colors, using one element with one pseudo-element.

]]>
Four-Quadrant CSS-Only Gradient 2023-01-23T06:17:57-07:00
CSS-Only Pokemon Quest Starter Icons https://codepen.io/gabriellewee/pen/VqBvvo https://codepen.io/gabriellewee/pen/VqBvvo Gabrielle Wee

See the Code - See it Full Page - See Details

CSS-only Pokemon Quest sprites, using clip-path to simulate shapes. Each sprite uses percentages instead of pixel values so that it is completely responsive. Click to expand is simulated using checkbox inputs. There may be a few bugs with hover and click in older versions of Safari/Chrome.

]]>
CSS-Only Pokemon Quest Starter Icons 2023-03-20T18:19:21-07:00
Dark Mode Notifications https://codepen.io/gabriellewee/pen/MXyKLW https://codepen.io/gabriellewee/pen/MXyKLW Gabrielle Wee

See the Code - See it Full Page - See Details

I got inspired by the macOS Dark Mode announcement at WWDC 2018 and decided to visualize how Dark Mode notifications might look on iOS! Backgrounds from: https://9to5mac.com/2018/06/05/macos-mojave-wallpapers-download/

]]>
Dark Mode Notifications 2023-10-06T18:02:46-07:00