Archive of: css

• Imitation Halken Logo built with only CSS

  July 2, 2020

  Today I made the mistake of trying to reproduce the Halken logo with just CSS. In the future I think I would opt to do this as an SVG. I ran into an odd issue with selectors on the green bits.

  CSS, HTML, code

• Scrolling animation practice

  July 1, 2020

  On the most recent episode of ShopTalk Show (episode 419), Chris Coyier mentioned a simple piece of JavaScript that can be used to create a custom CSS property that helps animate elements alongside scroll position. The article containing the JS is on CSStricks.com.

  CSS, HTML, JavaScript, code

• Quick Table Practice

  June 30, 2020

  I'm trying to get back into my Japanese studies, so I thought I'd make a quick Katakana table. I haven't built a table in a while and it is always something I need to get better and faster at doing. I normally use VS Code on my PC, so table building is a bit faster with Emmet shortcuts, but today I built this bit of code in Coda/Code Editor for iOS.

  CSS, HTML, code

• Laying out a Mega Drive cartridge case cover

  June 29, 2020

  For Father's Day I received a game coupon allowing me to pick any game I'd like to have and be treated to it. Most modern games on systems like the Nintendo Switch and PlayStation 4 start around $60, so I asked if I could instead get two cheaper retro games. One of them being a Sega Mega Drive game. I have yet to play it, but it prompted me to try and lay out the front of the game case using flexbox. I'll give it a better go at a later date.

  CSS, HTML, code

• Attempting to animate line height

  June 28, 2020

  Today I cooked a pack of shio ramen for a late evening snack. While I was boiling the ramen, I wondered if I could animate a paragraph's line-height and animate the line-thickness on a wavy underline to simulate the breaking up of instant ramen noodles as they are boiled in water. It looks like line-height doesn't really animate that smoothly.

  CSS, HTML, code, ramen

• Shape Outside Practice

  June 27, 2020

  I was about to do some more random practice, but I realized I haven't played with shape-outside in a while. I first learned about it from a talk or video by Jen Simmons. I wish I had something I could put it to use on right now. Maybe I should make something.

  CSS, HTML, code

• Random Animation and Grid Practice

  June 26, 2020

  Getting my practice in on a Friday night can be a bit tough, but I have to keep the streak going. Today's is a bit random.

  CSS, HTML, code

• More Grid Area Practice

  June 25, 2020

  I wanted to do a bit more practice with grid areas today. I found out that I can't use a variable when definiing a grid area, or at least I couldn't figure it out today. I wonder if that would be useful in any way.

  CSS, HTML

• CSS grid area practice

  June 24, 2020

  I never use grid-areas within my grids in CSS. Time to change that and learn how to take advantage of them.

  CSS, HTML, code

• Sakura petals falling with CSS and JS

  June 23, 2020

  I worked with my sakura petals again today. I wanted to see if I could animate the petals falling and randomize their positions to some extent. Luckily with the help of Chris Ferdinandi's concise and insightful posts on his website, I was able to add some vanilla JavaScript to help me do just that.

  CSS, SVG, HTML, JavaScript, code