Photoshop To CSS: How do you translate Fill to CSS



Photoshop To CSS: How do you translate Fill to CSS


Question

I have a content box in photoshop with the background color #bc0018 with a 65% opacity and 50% fill.

I am able to translate the backgroundcolor and opacity part to this, but without the 50% fill the backgroundcolor looks different.

.content-box {
    background-color: rgba(188, 0, 24, 0.65); }

Any suggestions on also getting the proper "fill" in CSS?

EDIT

I did just divide the opacity by half and it appears to achieve the same effect as a 50% fill. Still, I would love to hear how other people do this? I definitely don't want to create an image just for this.

.content-box {
    background-color: rgba(188, 0, 24, 0.325); }

Thanks!

2012/03/17
1
3
3/17/2012 7:51:00 PM

Accepted Answer

Multiply the opacity and fill opacity fractions, and you get the final opacity value. In your case this would be 0.65*0.5 = 0.325. So you're right that halving the opacity in this case works.

However, there are certain pitfalls that make a straightforward conversion from photoshop to CSS difficult. Fill opacity in PS will not affect drop shadows and such, but CSS opacity will also affect any analogous box-shadows you apply.

2012/03/18
4
3/18/2012 9:43:00 AM