Any image from Google images or elsewhere, and I want to place the css stylized text (e.g. “Frankenstein”) on top of an image (e.g. Frankenstein).
Wouldn’t the text be one layer placed on top of the starting image layer(s)?
Thanks
In this pen I put the css text over an image. But as I mentioned before, the css method for getting the embossed effect does not work well on a background. The highlight is a white shadow overlayed on top of the text, because it overlaps the bounds of the text, it is seen as a “glow” on the top left side when the background is not also white.
The other method discussed, using image for text will look better, but is not the preferred method for putting text on a page. Though it is sometimes used, logos are a good example of where text needs to be displayed as an image.
I created the text in Photoshop, but I believe PSP has similar Layer Effects.
The chequered background means it is Alpha (transparent). I save the layer as a PNG. JPG does not support Alpha.
The png is loaded into the page in an
<img> tag within a container which has a background image applied via css.Hope this makes sense. Look at the html and css tabs in the CodePen.
I like the second method. I didn’t know there’s no transparent background ability in jpg. I thought one could just seamlessly add layer after layer to create whatever collage you want.
I’ll work on this
Thanks Sam,
Chris
You can do that within your image editor, regardless for what image format you start with. But when you come to export or save as from the editor, the choice of image format you save to is important. If I saved that text layer as JPG, it would be sat on a solid rectangle covering the background, because there would be no Alpha channel.
I get it. You can’t lay jpg on top of jpg to create a collage of images because you can’t create transparency around a part (say a race car) of the jpg image because there’s no transparency ability in jpg, only opaque (everything in the jpg rectangle shows, even white). And you can’t create a collage with a png (has transparency ability) on top of a jpg photo because when saving the collage on the image editor the png will be changed to jpg, blocking out the jpg behind the png that was converted to png. If you save as png it will work and will look as good as jpg but jpg photo converted to png photo creates a huge file size, making it slow for loading online, but wouldn’t matter for print.
That’s right. Right?
With your second method, the layering to create a collage is not done in the image editor (one layer placed on top of another layer), but via a transparent image layer of the text placed on top of a background image. (If the image editor has box-shadow, it will likely have something like drop-shadow.)
Isn’t there a way to use the HTML/CSS generated text (so I can use the text-shadow function) and use a background image behind that text? There is, the first method you were talking about
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.