I want to create this design in CSS/html. I’ve started on the part with the ‘7’ layered on the photo. However my seven doesn’t seem to have same whiteness and in certain spots the right purpleness. Not sure how to achieve it. Can anyone get closer? My attempt is in the Codepen below:
Here’s my attempt so far? http://codepen.io/ComputerJuice/pen/rxBvmr Lift the Codepen preview window, as high as possible to see the full effect.
I don’t know what you mean by “right whiteness” and “right purpleness”
I’m assuming you have tried different opacity values but the effect didn’t satisfy you?
It is kind of hard without having the original values. After all, that seven was probably white… but maybe not. And we don’t know the opacity of the original 7 either.
And I’m sure that the picture wasn’t purple either, and that there’s some kind of purple layer with transparency on top. Do also remember that Photoshop allows different blender modes so up to a point you can choose how the pixels on different layers mix (it looks to me that the 7 uses a soflt light or similar) which is something that you can’t use in CSS.
Personally, I think that your approach is good
@molona No the picture wasn’t purple, the URL to the original is in the background-image statement in my codepen http://codepen.io/ComputerJuice/pen/rxBvmr . @Mittineague My problem with what i have done so far was that my 7 dose not seem to match the original whiteness. At the same time my 7 doesn’t seem to have the same purple shadow especially around the nose(nostrils). @molona Thanks…Are you saying this is the best I can get it with CSS?
I’m still not sure I understand completely.
There is the original image
Over which you have a purple overlay, and the child h2 has the text “7” to which you have given some opacity
You want the white from the original image and the purple from the overlay to show through the “7” ??
I want my seven that i have created using CSS styling i.e.
https://www.sitepoint.com/community/uploads/default/original/3X/3/2/32e1e69b118e6c9c247049ce38d2abd5a379c291.png
To look like the seven in the design below:
I hope that make sense, not sure how to make it any clearer.
Must it all be done via css? Could you use layered elements from Photoshop to get the exact effect you want? CSS is limited to what it can do with regard to compositing and layer effects.[quote=“molona, post:3, topic:208936”]
Do also remember that Photoshop allows different blender modes so up to a point you can choose how the pixels on different layers mix
[/quote]
CSS doesn’t have Photoshops blending modes, though I have wondered before if such a thing may be added in the future, that would be cool. The closest thing I have found so far are the Filter Effects which look interesting. But it seems these affect only the element to which it is applied, not any underlying layer, though using the same background can fake the effect.
http://www.w3.org/TR/filter-effects-1/
I don’t know whether this helps, but @una has done a lot of stuff with filter effects using CSS - take a look at her blog post here and see if that’s of use to you - http://una.im/CSSgram/
You could try blend modes but there’s no IE support I believe.
h2{
margin:0 50px 50px 0;
font-size:500px;
font-weight:100;
text-align:center;
font-family:verdana;
color:#999;
mix-blend-mode: screen;
}
I did not know that blend modes existed in css yet. It was one of the things on my css wish list. I’ll have to try them out.
I tried Paul’s suggestion on a fork of the pen. I found the overlay blend mode on '#ddd` looks close to the original image.
It actually does 
A MASSIVE thanks to Paul and Sam!! Looks identical Sam!! Do any of you know of a good resource to learn about this mix-blend-mode and or CSS filters in general? Again big thanks to both of you!
Thanks Sam. You’re very helpful! Once again thanks for help with my original question!
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.