andy,

📝 I’ve just published a new article on Piccalilli: Reality Check #3: Building out a layered hero grid layout from Dribbble

https://piccalil.li/blog/reality-check-3-building-out-a-layered-hero-grid-layout-from-dribbble/

In this edition of Reality Check, I tackle an interesting grid layout that also features some pretty unique background image treatment.

Robb,
@Robb@front-end.social avatar

@andy Mate, this one's a beast. Awesome work as always

andy,

@Robb thanks m8, much appreciated

5t3ph,
@5t3ph@front-end.social avatar

@andy lovely, that transform trick is 🔥

andy,

@5t3ph cheers, Steph 🙂

cbirdsong,
@cbirdsong@mastodon.social avatar

@andy you've forgotten to add the video link to the roundel: https://youtu.be/dQw4w9WgXcQ

andy,

@cbirdsong nice try 😎

tixie,
@tixie@guerilla.studio avatar

@andy Hi, just noticed a little issue on Webkit with the roundel "circle" ending not being a circle 😅

I've found height: auto helping (its actually in my css reset for all img elements since I'm ending needing it more than not)

change of height: 100% to height: auto in the ".roundel img" selector

andy,

@tixie ah balls, I’ll look into that

  • All
  • Subscribed
  • Moderated
  • Favorites
  • random
  • kavyap
  • mdbf
  • osvaldo12
  • ethstaker
  • tacticalgear
  • DreamBathrooms
  • thenastyranch
  • magazineikmin
  • modclub
  • Youngstown
  • everett
  • slotface
  • rosin
  • GTA5RPClips
  • JUstTest
  • khanakhh
  • cisconetworking
  • tester
  • ngwrru68w68
  • normalnudes
  • Durango
  • InstantRegret
  • cubers
  • provamag3
  • anitta
  • Leos
  • megavids
  • lostlight
  • All magazines