On my Micro.blog site I didn’t like my photos being smooshed together. This CSS has helped:
img {margin-top:1.5em; background-color: #ffffff; box-shadow: 5px 5px 5px gray;}
It adds space and a drop-shadow. See miraz.me for how it looks.
Miraz Jordan @simonwoods Thanks Simon. See the follow-up post about the avatar. 😎
💬 John Philpin oh VERY nice - and already borrowed … thankyou.
I don’t have many images on micro blog - but through codepen I use the same CSS style sheet to serve both micro Blog AND my blot site - where there are a lot more images, e.g. here
I go in and out on drop shadows, so rime for ‘in' !!
.. that margin control was introducing boxes around images - so I have that set to zero for now ... until I can work out how to change that box outline to #FFFFFF ... because I do like the space.
Miraz Jordan @JohnPhilpin On that second page you linked to there's a lot of style info with the enclosing span and on the images themselves that's interfering. CSS can be a tricky business.
Amit Gawande They look wonderful! I like them - pop out on a simple site. I may get inspired. Thank you 👍🏽🙂
Miraz Jordan @pratik I think it should be standard to have a little space between photos, perhaps with a CSS How-to tip for removing it. As for the rest, some people wouldn't want such decoration, I suspect.
Pratik I agree with the separation. But the drop shadow is hardly decoration and does make your images pop, even if it’s just one.