Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for professional graphic designers and non-designers trying to do their own graphic design. It's 100% free, no registration required.

I have a black 70% opacity play button that sites on top of videos.

On light backgrounds it is very clear but obviously on darker backgrounds it nearly vanishes. I would like it to be visible on dark backgrounds as well.

I'd like to maintain the transparency feel. I do not want to use an outline because it wold be the only outlined item on the site.

enter image description here

Edit: I ended up doing a combination of the suggestions. I added a white glow and I added a semi transparent white circle behind the black one which filled in the triangle and had the same effect as adding the grey. Thanks fo ryour help with this.

enter image description here

share|improve this question
    
how about a white glow/stroke? –  Patareco Apr 4 '13 at 15:37
1  
@Patareco OP stated he didn't want an outline which I would think could also mean he doesn't want a stroke. –  Gramps Apr 4 '13 at 16:27
add comment

3 Answers

up vote 3 down vote accepted

If you have to keep the transparency, then at least make the icon itself solid, this will have enough contrast to work against the dark background - even if you can't see the outer transparent background.

share|improve this answer
add comment

I would try it with some grey. So instead of 70% opacity with a black button, Try with some dark grey with a little less transparency.

You have to look for ways to get some white into it. Very transparent textures, gradients or very slight white noise might help also.

share|improve this answer
add comment

if you are creating a website why not use CSS to transition the effect between dark and light backgrounds?

Code the circle with something like:

.circle {
border-radius: 50%;
width: 200px;
height: 200px; 
}

Add a triangle with something like:

.arrow {
width: 0; 
height: 0; 
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid white;
}

if i recall use the ~ selector to generate a transition when you have a dark background

That's if you are doing this for a website but I know you didn't specify that. Hope this helps.

share|improve this answer
    
I needed to have this be compatible with outdated browsers so I had to go with an image. Thanks for the answer. –  digitalagua Apr 5 '13 at 7:17
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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