Pens from Chris Ota https://codepen.io/chrisota/ en nospam@codepen.io Copyright 2024 2021-04-13T05:10:25-07:00 A Pen by Chris Ota https://codepen.io/chrisota/pen/MWJVpbQ https://codepen.io/chrisota/pen/MWJVpbQ Chris Ota

See the Code - See it Full Page - See Details

]]>
A Pen by Chris Ota 2021-04-13T05:10:25-07:00
WIP WIP WIP https://codepen.io/chrisota/pen/MWKbqEZ https://codepen.io/chrisota/pen/MWKbqEZ Chris Ota

See the Code - See it Full Page - See Details

]]>
WIP WIP WIP 2020-07-10T04:44:23-07:00
Two element typeface series* https://codepen.io/chrisota/pen/KKVzZLM https://codepen.io/chrisota/pen/KKVzZLM Chris Ota

See the Code - See it Full Page - See Details

I created a chiseled-style type face with two elements, (*with the exception of 'W') in pure CSS. No SVGs were used, but a lot of border styles were! The main list-item wrapper is used for positioning and lightweight styling only. This idea came from a past project of mine (https://codepen.io/chrisota/pen/Abnzl) and I've always wanted to revisit the project and do the entire alphabet. Things I would redo: • Redesign the 'S' • Refactor some code to take advantage of clip-path • Do a better job with the dimensions of each letter so the entire family looks more balanced • Make it responsive • When you scroll, the drop shadow is cut-off • Adding filters to the main div resets the z-index and some letters render incorrectly. The filter is applied to the list-item element, which I was trying to avoid. Enjoy! _____ General steps taken over the weeks: 1. Create a grid for each letter, each with the same height and width. 2. Exam different typefaces that resemble what I had in mind. 3. Start with the basic letters like 'I' 'O' and 'C' to understand border styling. 4. Progress forward to letters with straight edges like 'E' 'F' or 'L' 5. Look for patterns with letters and reuse them, like, E = F, P = R, O = Q 6. Cry when you realize you can't do it, but take a break, then move forward and keep trying. 7. As you finish the alphabet, it gets very very challenging. The hardest letters you will encounter are 'M' 'N' 'V' 'W' and 'X' 8. I struggled for days to create 'W' and accepted the fact that I would need three elements. I didn't want to let one letter stop me from completing the series. 9. I spent time fixing letters that looked to thick or thin, like 'X' or the stem of the 'R' 10. Finally, I adjusted the width of the parent of each letter to be unique to each letter and made sure everything stayed aligned within the grid. Overall, the amount of time taken were many hours over a span of 2-3 weeks and since I took this from an original project, it's harder to say. *Hint* It's very helpful to use is Sketch or another design editing tool to paste screenshots of your letters in progress and try to redraw them, measure dimensions, etc.

]]>
Two element typeface series* 2020-06-12T15:37:50-07:00
Template https://codepen.io/chrisota/pen/rNOENaq https://codepen.io/chrisota/pen/rNOENaq Chris Ota

See the Code - See it Full Page - See Details

]]>
Template 2020-05-28T02:57:51-07:00
Lexon Tykho 3 https://codepen.io/chrisota/pen/XWmQEGX https://codepen.io/chrisota/pen/XWmQEGX Chris Ota

See the Code - See it Full Page - See Details

With the help of https://neumorphism.io/, I created a Lexon Tykho 3 (https://lexon-design.com/en/product/tykho-3-bt-fm/) illustration in pure HTML and CSS for fun (no SVG or images used) in neumorphism-style. I did this as a quick exercise. Enjoy!

]]>
Lexon Tykho 3 2020-05-26T05:08:05-07:00
A Pen by Chris Ota https://codepen.io/chrisota/pen/pojqPgQ https://codepen.io/chrisota/pen/pojqPgQ Chris Ota

See the Code - See it Full Page - See Details

]]>
A Pen by Chris Ota 2020-05-22T19:35:27-07:00
Single div iPhone (1st generation) https://codepen.io/chrisota/pen/LYpXYJq https://codepen.io/chrisota/pen/LYpXYJq Chris Ota

See the Code - See it Full Page - See Details

Created a 1st generation iPhone with a signal div. I couldn't get the headphone jack input to display properly in Safari, so I have omitted it. Enjoy!

]]>
Single div iPhone (1st generation) 2020-05-20T14:33:56-07:00
Single div 16-inch MacBook Pro https://codepen.io/chrisota/pen/XWmPZwV https://codepen.io/chrisota/pen/XWmPZwV Chris Ota

See the Code - See it Full Page - See Details

Created a MacBook Pro in about three hours for fun. Enjoy! https://www.apple.com/macbook-pro-16/ * Under-shadow doesn't work in Safari.

]]>
Single div 16-inch MacBook Pro 2020-05-18T18:19:46-07:00
Playdate Gaming Console https://codepen.io/chrisota/pen/eYpyqYG https://codepen.io/chrisota/pen/eYpyqYG Chris Ota

See the Code - See it Full Page - See Details

I created a Playdate illustration in pure HTML and CSS for fun (no SVG or images used). The most challenging (but rewarding) part of this project was trying to create the rivets/screws in the multiple corners of the device—the middle of the rivet is see-through. Although there is more I would like to do with this (like add more details to the device or the screen itself), I will consider this finalized for now. Enjoy!

]]>
Playdate Gaming Console 2020-05-28T02:57:31-07:00
A Pen by Chris Ota https://codepen.io/chrisota/pen/oNNKOKB https://codepen.io/chrisota/pen/oNNKOKB Chris Ota

See the Code - See it Full Page - See Details

]]>
A Pen by Chris Ota 2019-12-03T08:47:12-07:00