Pens from Gabriel Martin https://codepen.io/Gabrielmtn/ en nospam@codepen.io Copyright 2024 2023-05-31T04:19:13-07:00 Mobile UI preview tool https://codepen.io/Gabrielmtn/pen/poxXzPx https://codepen.io/Gabrielmtn/pen/poxXzPx Gabriel Martin

See the Code - See it Full Page - See Details

]]>
Mobile UI preview tool 2023-05-31T01:02:34-07:00
smskr-test.html https://codepen.io/Gabrielmtn/pen/YzJoKZG https://codepen.io/Gabrielmtn/pen/YzJoKZG Gabriel Martin

See the Code - See it Full Page - See Details

Product List and Grid View "Responsive". Grid is made with Flebox. Reponsive media query min-width : 320px and max-width 480px, it only shows the grid, the buttons and the list hides it. I'm sorry, my bad english.

]]>
smskr-test.html 2023-05-31T04:19:13-07:00
A Pen by Gabriel Martin https://codepen.io/Gabrielmtn/pen/JjmzXXE https://codepen.io/Gabrielmtn/pen/JjmzXXE Gabriel Martin

See the Code - See it Full Page - See Details

]]>
A Pen by Gabriel Martin 2023-05-25T04:00:39-07:00
Sleep Calculator https://codepen.io/Gabrielmtn/pen/ZEXQywV https://codepen.io/Gabrielmtn/pen/ZEXQywV Gabriel Martin

See the Code - See it Full Page - See Details

A sleep calculator I built for a blog post on https://hibr.com discussing sleep cycles and how important it is to get your proper stages of sleep every night. Use it to establish a proper time to go to bed.

]]>
Sleep Calculator 2021-12-06T10:56:00-07:00
Pure CSS Toggle Buttons | ON-OFF Switches https://codepen.io/Gabrielmtn/pen/mdMvgJX https://codepen.io/Gabrielmtn/pen/mdMvgJX Gabriel Martin

See the Code - See it Full Page - See Details

Collection of toggle buttons / on-off switches which can be practically used in a website. Designed using CSS without any JavaScript :) Which one is your fav?

]]>
Pure CSS Toggle Buttons | ON-OFF Switches 2021-11-18T22:47:22-07:00
Dynamic Survey / Quiz https://codepen.io/Gabrielmtn/pen/GRExYbY https://codepen.io/Gabrielmtn/pen/GRExYbY Gabriel Martin

See the Code - See it Full Page - See Details

]]>
Dynamic Survey / Quiz 2021-09-19T20:11:04-07:00
A Pen by Gabriel Martin https://codepen.io/Gabrielmtn/pen/wvgqwLe https://codepen.io/Gabrielmtn/pen/wvgqwLe Gabriel Martin

See the Code - See it Full Page - See Details

]]>
A Pen by Gabriel Martin 2021-04-05T23:08:56-07:00
A Pen by Gabriel Martin https://codepen.io/Gabrielmtn/pen/NWbGNrZ https://codepen.io/Gabrielmtn/pen/NWbGNrZ Gabriel Martin

See the Code - See it Full Page - See Details

]]>
A Pen by Gabriel Martin 2021-02-03T10:48:58-07:00
A Pen by Gabriel Martin https://codepen.io/Gabrielmtn/pen/NWRVGjq https://codepen.io/Gabrielmtn/pen/NWRVGjq Gabriel Martin

See the Code - See it Full Page - See Details

]]>
A Pen by Gabriel Martin 2021-01-22T12:27:53-07:00
CSS 3D Guitar with 5 texture variation 🎸 https://codepen.io/Gabrielmtn/pen/YzWmypy https://codepen.io/Gabrielmtn/pen/YzWmypy Gabriel Martin

See the Code - See it Full Page - See Details

CSS 3D Guitar is a guitar model, made possible using `mask-image`, `background-image` and `transform` properties. The design is created with `<DIV>` elements and is completely customizable through CSS Variables. Camera simulation and Control panel synchronization powered by a few lines of JavaScript. I recently learned that `mask-image` supports encoded inline SVGs the same as `background-image`, so tried to combine both of them to replicate the guitar shape along with other details. Particular tasks I did for this project - - Tried to synchronize the shadow with the movement of the 3D object - Created 5 sets of guitar body texture to replicate different guitar models

]]>
CSS 3D Guitar with 5 texture variation 🎸 2020-11-23T03:13:40-07:00