3

I've seen this trick on lots of websites, but I don't know how I could create this myself easily. It's basically text or a logo which is saved on a transparent background with a small border, to minimize the file size.

For example on Postmarkapp, they have this transparent logo, with a yellow border:

Postmark logo

and there are a lot more of these examples on the web.

What's an easy way to create such a png file with a small border so your text or logo will seamlessly blend into the background color?

Improve this question

1 Answer 1

Reset to default
6

Unless I'm missing something couldn't you just use Photoshop to create the image with a transparent background and then use CSS to position it appropriately (through various different techniques)?

Improve this answer
4
  • :\ Just found the expand selection option in Photoshop, nevermind
    – Harmen
    Oct 28, 2010 at 19:27
  • 2
    For seamless edges: use the Save for Web... option and select a Matte color to blend semi-transparent anti-aliased pixels with the background color you plan to use.
    – danlefree
    Oct 28, 2010 at 19:41
  • @danlefree, Thanks, that's where this question was about, how I could easily get a small border at places where the image was semi-transparent
    – Harmen
    Oct 28, 2010 at 19:58
  • Pretty much all desktop browsers support alpha channel transparency these days, so you don't even need to use a matte color. But I don't know how things are with mobile browsers.
    – Lèse majesté
    Oct 28, 2010 at 20:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.