andimad andimad - 5 months ago 8
HTML Question

Adding gaps in between sprite image

I have this image: http://fs5.directupload.net/images/160602/xfrddbfa.png

and I would like to add it into my website. But, I'd also like to add a small gap in between each and every flag.

Is that somehow possible? Here is the HTML where I'd like to place it as a pseudo element before the class "headline":

<div class="bottom_dual">
<a title="title" href="#">
<span class="headline">Lorem ipsum</span>
</a>
<span class="caption">Lorem ipsum.</span>
<span class="more">
<a class="teaser_link" href="#">more</a>
</span>
</div>


Thanks for your help!

Answer

Image editing isout of the scope of HTML/CSS and I would really suggest just making separate images using image editing software for each flag if this is what you intend to do, but I will provide an ugly work around if you truly wish to do this.

Also, I'm not sure you're using pseudo element correctly.

Place the image tag 5 times - 1 for each flag.

<img id="flag1" src="example.com" />
<img id="flag2" src="example.com" />
<img id="flag3" src="example.com" />
<img id="flag4" src="example.com" />
<img id="flag5" src="example.com" />

Use CSS to crop each image to each flag.

#flag1{
  position: absolute;
  clip:(rect, 0px, 30px, 20px, 0px); // Position of the flag
}
etc..

I hate myself for even giving that answer. Seriously, just edit the image.

Comments