Archive of: 2021

• Additional tweaks to my lightbox

  April 28, 2021

  I wanted to improve the transition for the lightbox and try out using backdrop-filter with it to see how it might look. I think I have a solid starting point to use this within my website for photo gallery pages, but I’ll have to see how things look and feel once I give it a try.

  100daysofcode, CSS, HTML, JavaScript

• Tiny tweaks to my Lightbox script

  April 27, 2021

  After yesterday’s small success, I wanted to try and improve the display of the lightbox for smaller screens or mobile devices. The image was not staying within the viewport yesterday, and the page was still scrollable. I wanted to disable scrolling while the lightbox is visible.

  100daysofcode, HTML, CSS, JavaScript

• 100 Days of Code - Week 11

  April 27, 2021

  Last week’s code posts were a lot of fun.

  100daysofcode, CSS, HTML, JavaScript

• Vanilla JS Lightbox Challenge

  April 26, 2021

  Are lightboxes tricky to build? My experience leads me to think yes. I’ve managed to put something together that works as long as I know the number of imgs and URLs to reference. I need to learn how to attach a click event to each a element that can trigger the lightbox. Just typing this out gives me an idea… HUZZAH! I figured it out. It’s not perfect, but I’m so dang happy that came to me.

  100daysofcode, CSS, JS, JavaScript

• Card display with horizontal scrolling

  April 25, 2021

  I really like the Popular This Month section on the CSS-Tricks homepage, and I have wanted to try and build something similar to what they’ve done. It was fun to work on, but there are quite a few things I need to improve before adding something like it to a site. I enjoy trying to rebuild bits of other websites I see. It’s a fun challenge and I learn a lot in the process.

  100daysofcode, CSS, HTML

• Learning about a few modern CSS Pseudo Class Selectors

  April 24, 2021

  I read a useful article on Smashing Magazine today that taught me about a few CSS pseudo-class selectors that I wasn’t aware of. I’ve spent a good amount of time today on a challenge involving Object Oriented JavaScript that has left my brain a little tired, so I thought I’d try out some of these selectors for practice. The link to the article can be found within the post’s HTML.

  100daysofcode, CSS, HTML, pseudo-selectors

• Interesting float and flexbox technique

  April 23, 2021

  I saw this interesting article, Float an Element to the Bottom Corner by Temani Afif, on CSS-Tricks a few days ago and I thought the technique looked interesting. I’m not entirely sure I’d be ok with the amount of divs I had to use to accomplish this effect, but it may be useful someday.

  100daysofcode, CSS, HTML, float

• Send words into The Void

  April 22, 2021

  Today’s post is a bit silly, but it was therapeutic to make. I think Dave Rupert mentioned something like this on one of the episodes of ShopTalk Show. I haven’t worked with the textarea element in a while, so this helped refresh my memory of the various attribute of the element. The animation could be improved, but I think it had a strong enough effect for a basic version of this.

  100daysofcode, CSS, HTML, JavaScript, textarea

• Grid row and column span practice

  April 21, 2021

  For a little while now, Apple has been displaying info about their new products in this nifty grid layout during their events. I took a shot at making one based on the new iPad Pro slide shown during the April 20, 2021 event. It’s a pretty fancy looking and powerful machine, along with the new iMacs.

  100daysofcode, CSS, HTML, grid

• Simple transition using clip-path

  April 20, 2021

  I know I did another clip-path post yesterday, but this popped into my head as I was transferring old Animal Crossing screenshots of a micro-SD card. It’s a simple and pretty effective transition. What would be neat is to try and only have the full-color image load when the mouse is within a certain distance from the low-quality version. That would be tricky on a touchscreen, but a different presentation or a change of the button text may be all I would need.

  100daysofcode, CSS, HTML, JavaScript