Pursuit of Loot

Odds and sods

Posted on 26th January 2020

Tags:

It's been a bit of a weird day today, I suffer from migraines and had such a strong one last night that getting up and doing anything at all today has taken great effort. As tempting as it was to just veg out and watch some Netflix or Amazon Prime, instead I pottered around with this website, grabbing random things from my Trello reading list to see if there was anything I wanted to specifically do today.

There wasn't.

But, I decided to just mess around anyway, mainly on the homepage of the site, where I've applied some zany new styles to my recent posts list. A comparison of before and after for you. Bear in mind that I'm no designer, so this does look terrible, but I just wanted to try something I've never done before (css clip path shapes) and that's what I ended up doing.


Post list before and after


So what I've done there is make the entire list item into a link, then pad it a bit and give it that nice background gradient. The contents of the link are using css grid template areas and when you hover over the list item, it makes a weird polygon clipping mask, indents the text a little and displays the "GO" icon from the videogame Streets of Rage 2.

I forgot to screenshot it with the hover state, so you'll have to go to the homepage if you want to play with that. Also, I won't post the code for today as it's not really that clever tbh, but if you want to find out more about the tools I used to do this you can head on over to my new "Useful Links" page, which has them on there.


Enjoyed this post? Feel free to share it with your audience using the links below:

Don't see your favourite social network on the list? Feel free to let me know and I'll get it added.

Comments

©2022 Pursuit of Loot. All rights reserved.