Archive of: html

• 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

• 100 Days of Code - Week 10

  April 20, 2021

  I tackled a few new things (well, new to me) in both JavaScript and CSS over the last week.

  100daysofcode, HTML, CSS, JavaScript

• Goofing around with clip path

  April 19, 2021

  I wanted to try to do something fancy with clip-path from scratch today, but it ended up being quite goofy. Click on me to get a high-five!

  100daysofcode, CSS, HTML

• Practicing with Switch statements

  April 18, 2021

  I did a course on JavaScript Conditionals on Treehouse today and learned about switch () statements. I’ve never used them before and I’m not sure how much I will in the future, but I give them a go to solidify what I learned.

  100daysofcode, CSS, HTML, JavaScript

• Simple Spotlight

  April 17, 2021

  I wanted to try out a spotlight that follows the cursor’s position. It turns out this is fairly easy to do if you use CSS custom properties and the mousemove event. The spotlight is a little offset within this code post. I’ll have to sort out why in a future post.

  100daysofcode, CSS, HTML, JavaScript

• Spicing up links

  April 16, 2021

  I saw some fantastic link styling on a website called CSS { In Real Life }, designed and built by Michelle Barker, and I thought I’d try and figure out how to recreate it. I don’t think I’ve played with text-underline-offset before, and I’m glad I came across CSS { In Real Life } and its cool link styling. It’s subtle, but really stood out to me. I’m excited to put it into use.

  100daysofcode, CSS, HTML, links

• Practice with the IS selector

  April 15, 2021

  I’ve been hearing about the :is() for a little while now and wanted to try it out. It looks like it will be pretty useful for those times when I have an excess of selectors in the same declaration or set of declarations.

  100daysofcode, CSS, HTML, JavaScript