HTML+CSS: How to add shadow (as image) to image? - html

I ama trying to add to each image from my gallery a shadow. I know I can add the CSS shadow to each element, but the shadow that I am trying to add under my photos is taken from PSD layout and has a different shape than the CSS shadow.
Here's the sample, what I am trying to achieve:
And what I did until now:
<div style="padding-left: 15px; position:absolute;">
<img src="avatar.png" alt="" />
<img src="shadow.png" alt="" style="margin: 190px 0 0 -191px; width: 187px;" />
</div>
It's a terrible solution and even more, it's working for me only in Chrome. Could you guys help me please, how to do it more efficiently and workable in all browsers?

If your images are going to be irregular sizes, an SVG as background-image is what you're looking for. Adobe Illustrator ($$$) or Inkscape (free) can be used to create the unusually shaped shadow as an SVG file. From there, all that should be necessary is this CSS:
.myImage {
background: url(myShadow.svg) no-repeat;
background-size: 100% 100%;
padding: ? ? ? ?; // the values will have to depend on your bg image
}
In depth explanation can be found here: http://designfestival.com/a-farewell-to-css3-gradients/
If your images are all the same size or you don't care about any graininess that might occur when it is resized, then a PNG as your background would work just as well.

You may create a transparent PNG for the shadow effect, then put it as background-image in a div. Then, you could add your image into that div, positionning with css.
This solution would work with every browsers, even with IE6 if you get it to work with transparent pngs.
Hope this helps.

This is because, that would not be supported by that particular browser. You might be missing vendor-prefix
Opera 10.50 (currently only available on Windows) is the first web
browser to have an implementation without a vendor-prefix, whereas
Firefox, Safari and Google Chrome all need it for now. So, this code
makes it work in all those web browsers
.shadow {
-moz-box-shadow: 3px 3px 4px #000;
-webkit-box-shadow: 3px 3px 4px #000;
box-shadow: 3px 3px 4px #000;
}
Further you can refer these links
Drop shadow with css for all web browser
Box shadow

This is a more generic solution, but may be useful to others. I added the following to the <head> section of the HTML:
<style>
img {{box-shadow: 5px 5px 5px #888888; }}
</style>
and it worked great for adding shadows to all images.

Related

Is there a way I can change a font awesome symbol to just show the outline only?

I am using this:
<span class='fa fa-fw fa-stop'></span>
But it shows a very big square. Does anyone know if it possible to make it show just the outline of the square?
Another solution is given here, which can be used for all font-awesome icons:
Is it possible to color the fontawesome icon colors?
The css looks like this:
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #666;
color: transparent;
Unfortunately not, the icons which are provided as outline only have an additional -o in the name e.g: fa-arrow-circle-o-left - the stop icon doesn't have that option.
You could use the fa-square-o which is: http://fortawesome.github.io/Font-Awesome/icon/square-o/ which would achieve what you need - but it's not specifically the stop icon but just outlined.
You could either use fa-square-o, or you could use fa-stop and using CSS color and border rules to achieve the effect for a box with no rounded corners.
Here is a link:
http://jsfiddle.net/5mcddx2q/
.fa {
color:rgba(0,0,0,0);
border:1px solid red;
}
Or you could search for an outlined box in another set of font icons that is not font-awesome, thereare a few on bootstrap.
The problem with the webkit-based solutions is that they'll only work in webkit browsers. A slightly more portable solution would be to set the color of the icon to the same as the background (or transparent) and use text-shadow to create an outline:
.fa-outline-dark-gray {
color: #fff;
text-shadow: -1px -1px 0 #999,
1px -1px 0 #999,
-1px 1px 0 #999,
1px 1px 0 #999;
}
It doesn't work in ie <10, but at least it's not restricted to webkit browsers.
For people coming across this in the future: I was solving a similar problem and came up with a tangential solution that may work depending on your scenario and the specific icon. I had a blue background and wanted a white checkmark outline, with the blue inside preserved. What I ended up doing was creating two checkmark icons- one that was white, and another that was blue but slightly smaller. I then used css to position the blue checkmark inside of the white one which achieved the desired effect. It may take some fiddling and it may not work for all use cases, but it worked for me in mine.

Adding font borders to CSS code

As the title suggests, I'm trying to add font borders to the text I have in a page I'm making. The background has a lot of reds, greens, yellows and blacks so a single colour really wouldn't suffice. Here is the code.
I know I can do something with webkit like this:
h1 { -webkit-text-stroke: 1px black; }
But since it's not supported on browsers I'm stuck on square one.
Can anyone help me?
For a 1 pixel stroke, text-shadow would do:
text-shadow: 0 0 1px black;
Using
You can only use text-stroke on webkit browsers (Chrome, safari, etc)
Source: caniuse.com
But like other poeple answered, you can use text-shadow instead
p {
text-shadow: 0 0 1px black;
}
FIDDLE
http://www.w3.org/Style/Examples/007/text-shadow.en.html
see this link may help
it adds text shadow to letters if you dont want feather then keep value to 0px will give you border around text

CSS box-shadow renders different on Firefox and Chromium

I'm thinking on relying on box-shadow but it renders differently even on Firefox and Chrome/Chromium. The difference is very subtle with low values, but very noticeable with bigger ones.
In this example, you can see the differences arise when using negative values to make the shadow smaller. Left render is Chromium 25, right is Firefox 21.
HTML:
<div>
Hello there!
</div>
CSS:
div{
margin:100px;
padding:100px;
border:1px solid red;
box-shadow:0 80px 15px -85px #000;
}
How can I workaround this problem? Or maybe I should drop box-shadow by now?
Browsers use different algorithms to generate the shadow blur, in Chrome the opacity of shadow pixels decreases more quickly from the inner edge of the shadow area to the outer, and since the inner 1/3 of the shadow is hidden under the box in this example, it appears to look as having different start color. If we make the blur entirely visible by reducing the blur radius and the negative spread distance by 5px, and replace the solid shadow color with semi-transparent rgba(), the difference in the rendering becomes much less significant (demo).
Try to use the -moz-box-shadow property for firefox, it will render better.
div{
margin:100px;
padding:100px;
border:1px solid red;
-moz-box-shadow: 0 80px 15px -85px #000;
box-shadow:0 80px 15px -85px #000;
}

Issue related to Background image doesn't show in IE8 only

I have following CSS :
.rwWindowContent, .rwExternalContent
{
border-style: groove !important;
border-width: 1px;
border-radius: 10px;
background-image: url(background.jpg) !important;
border-color: GhostWhite;
}
the backgound Image added in above css display well in Mozila,chrome, Safari, and IE9..
but it doesn't display in IE8 only..
as you can see in following Image all the styles related to Background has been removed by IE8 tool:
Is there any suggestions ??
make sure you saved you jpg in RGB mode instead of CMYK. hope this helps.
IE 8 needs to know width and height of the container if its empty.
I think better convert your image from .jpg to .png format. This may solve your problem.

Transparent background rendering White in Internet Explorer

In my page layout I have two <div> tags. One, with id #image-panel and the other with #image-content-panel.
The two <div>s are stacked on top of each other using position: absolute. #image-content-panel (has higher z-index) is on top of #image-panel.
Both <div>s have background: transparent.
The page renders fine in Chrome, Safari, and Firefox i.e. I can see the image through the text (heading and paragraph etc.). But in IE (version 8) #image-content-panel is being redered with a white background.
You can see screenshots below:
Rendering in Crome, Safari, Mozilla
Rendering in IE 8
Relevant CSS and HTML code :
HTML Code
CSS Code
I'd like the page to render same in IE too.
Any help is appreciated.
Please propose an Alternative solution too if this can't be fixed.
UPDATE
The Jquery Cycle Plugin will add a background colour to elements in older versions of IE.
You need to set the cleartypeNoBg option to true in your Cycle initialisation.
$("#image-content-panel").cycle({
fx : 'scrollRight',
speed : 2700,
cleartypeNoBg: true
});
EDIT The below is not relevent
IE8 doesn't support rgba values and will fallback to a solid colour. If you don't define a fallback it will default to white which is what you are seeing.
There's a couple of ways to handle this.
1. Accept IE8's limitations.
#header {
z-index: 100 !important;
width: 100%;
height: 50px;
background: rgb(0,0,0);
background: rgba(0,0,0,0.6);
margin: 10px 0 0 0;
}
#header will have a solid black background in browsers that don;t support rgba. Semi opaque in browsers that do.
2.Use a filter
#header {
z-index: 100 !important;
width: 100%;
height: 50px;
background: rgba(0,0,0,0.6);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)"
margin: 10px 0 0 0;
}
#header will have 60% transparent black background in IE8 and proper browsers. Personally, I hate using filters. They make your markup hideous and are difficult to maintain unless you are excellent at converting rgb to hex codes in your head (which I'm not). Also, this particular filter is IE8+. It will not work in IE7, though there are other filters that will work in IE6-7. You should also probably separate this out in to an IE8 specific stylesheet or use some other method to prevent IE9 from using the filter as IE9 supports rgba.
3.Use a 1px x 1px black, semi-transparent .png
#header {
z-index: 100 !important;
width: 100%;
height: 50px;
background: url(background.png) repeat;
margin: 10px 0 0 0;
}
This is the route I usually go down simply because it's simple. It takes seconds to create a .png if you need to change the alpha and you don't need to worry about browser inconsistencies.
As others have said, IE8 doesn't support RGBA colour values.
There is a hack you can use to work around this though: I recommend trying out CSS3Pie on your site; it implements a number of modern CSS features into old versions of IE, including RGBA colours in backgrounds.
Hope that helps.