I'm trying to create a button, where the font is bold but it also uses a text-shadow to make the text more readable. For whatever reason the text-shadow is not appearing when its added to the CSS, though in photoshop it makes a dramatic difference using the same values.
Here's the JSFiddle
Thank you for your help
The shadow is there, but it's so faint that it's nigh impossible to perceive, especially with a relatively low alpha value and when superimposed on a background with a similar hue.
I'm going out on a limb and guessing that in Photoshop, your text shadow has a layer style that causes it to have a different effect on the underlying background color. You may need to play around with the eyedropper tool and tweak the alpha value in your text shadow, in order to achieve something that better matches your Photoshop comp.
Related
I would like to draw a cross over an image, with a different color for each pixel depending on the background color, so that the cross is always well visible. So I'm trying to change the Composition Mode of the QPainter, but I can't find an acceptable solution.
I have tried QPainter::CompositionMode_Difference, painting with white. This is quite good because it inverts the destination color, but it doesn't work well if the destination color is a middle gray or similar.
The best solution is to get white if the background is "dark" and black if the background is "light". Is there a way to get this effect using only composition modes of the painter?
What about running the Image Composition Example for yourself, and maybe modifying the source/destination images to better fit your scenario? Maybe QPainter::CompositionMode_Xor is what you want?
An alternative solution, which is even very simple, is to use a white cross with a rather thick black outline. In this case you can ensure the visibility of the cross even in case of rather dark or light background images.
The image below has a kind of faded grey look with what seems to be some slight blurring and works quite well as a generic banner image.
Usually I am provided with these images or just find stock images but I'd be very interested in learning how to apply these effects with Photoshop or CSS. I have a feeling that Photoshop is a more appropriate tool.
The image I'm experimenting with is this:
It isn't the best image but for my testing purposes at least it's a similar shape and size.
I know I can use things like de-saturation or a coloured layer with a colour blend mode for this sort of thing. However, does the first image look like it has a specific effect or is it just a case of trial and error?
I appreciate this is similar to this question.
open your image in photoshop, add a new layer on top of the image, fill the layer with a color of your choice (in this case grey/black) then reduce the opacity of the layer. You will get something similar to what you want. This is a simple trick. It can be done in other ways too with more modifications.
Maybe you could get the effect by using css blur and overlaying the image with a gray layer with opacity.
You could also just create the effect in photoshop and use that
Certain fonts have a variant for outline and filled, and if you use these on overlapping text it draws an outlined or shaded stroke over the filled text. This is different than just an outline that strokes the text like -webkit-text-stroke-color would give you, since sometimes the filled font contains shading or other details.
Here's some examples of fonts designed to be used this way.
http://www.myfonts.com/fonts/matchandkerosene/duotone/
http://www.myfonts.com/fonts/scrowleyfonts/stomp/
I was sort of able to get this to work using CSS like this:
http://jsfiddle.net/6SakC/2/
This creates two H1 spans and uses the top-margin to move the outline one atop the filled one.
However, this doesn't seem ideal to me. Two problems:
I don't want to duplicate the text in the html.
I have to guesstimate the top-margin by trial and error.
If the text wraps, this doesn't work anymore.
Is there a better way to do this? I can live with having to duplicate the text, but I'd really like a more automatic way to do the positioning.
Thanks!
You can place the outline text inside the h1 and use absolute positioning instead of estimating the margin, as in this jsFiddle: http://jsfiddle.net/6SakC/4/
That also solves the problem with the text wrapping.
To avoid duplicating the text in the markup, you can use JavaScript to create the duplicate text, as in this jsFiddle: http://jsfiddle.net/6SakC/5/ (This might not be the best idea, though, since the text might get a moment to display without the outline, and JS is occasionally disabled in the browser settings.)
Written pages, why in the ie6 png images in it will automatically cast a shadow
There are two possible reasons, depending on how it looks.
IE 6 doesn't support transparency for PNG images (unless you use a filter to display the image), so if there is a transparent background in the image it will be replaced with a solid gray.
The PNG format contains a gamma correction value that was intended to solve some color profiling problems, but it actually hurts as much as it helps as images are displayed somewhat differently on different systems. If you have a color in your PNG image that is supposed to match the background of the page, it might be slightly off, which will show the iamge as a square with a slightly different color.
that's one of the many bugs of IE6: wrong rendering of transparent png's.
there are a lot of JS fixes, like this one, but i've never seen one that works perfectly.
some break the clickable elements that have png background, some others change alignment or margis or position
I'm trying to create a box with round corners using images. I know how to use CSS3 but I need to use images as I have some custom made corners with shadow and transparency.
The result I need:
I have divided the box into several images:
http://i37.tinypic.com/2w6b14g_th.png
I know there is plenty of info about this topic, but I have been working with this for the last days and from the articles I've read I cannot get exactly what I need. The problem seems to be that I need the background of all images to have a some transparency (both the white part and the shadow part). Anyone has an idea on how to do this using divs?
My personal favorite technique is this one: even more rounded corners. Look at the demo page: http://www.schillmania.com/projects/dialog2/. It does exactly what you want.
Plus, unlike other techniques, you don't have to cut up your background image.
I've been wrestling with rounded corners in this way today. I'm using GIF's which have the corners in the colour of the background. Because these are GIF's the corners could be transparent, but I'd rather not worry about what's 'behind'. But in your situation a GIF would be better than a JPG(is this what you are doing?), as transparency is supported, or a PNG if you don't need to support old browsers. Then you can put the background colour in the style for the DIV is you want too.
HTH