CODEWITHSUNDEEP
htmlcss
QuinDa
QuinDa

Reputation: 918

Image shadow css3

enter image description here

This is the top of the sketch of my website, I've done this in a HTML editor.

The circle we can see in the image is my logo, it's an image with alpha color background.
Shadows, borders, etc are working perfectly even in IE.

Now I'm trying to do something similar with HTML5 and CSS3 but I'm having lots of problems with image shadows and borders.

box-shadow doesn't work because it's a square image (remember it's a image with alpha color background)
The last thing I've found for image shadow is filter: drop-shadow. In theory it should work on all browsers but it's only working with chrome.

On the other hand, i can't get a border like the one on the picture. As you know, my logo is a image with alpha color background and it always makes a square border.

Can anybody give me some help. I would appreciate it. Thanxs

After using the solution Lloan Alas gave me it's working perfectly but not on mobile phone
I use dolphin browser and this is what i get:
mobil phone

This is my code: css:
#logo { margin-top: -100px; height: 188px; width: 300px; background-image: url("../imagenes/logo.png"); border: 5px solid white; border-radius: 50% ; box-shadow: 0 10px 15px #000; -moz-box-shadow: 0 10px 15px #000; -webkit-box-shadow: 0 10px 15px #000; -ms-box-shadow: 0 10px 15px #000; -o-box-shadow: 0 10px 15px #000; -khtml-box-shadow: 0 10px 15px #000; }

html:
<div id="logo"></div>

Upvotes: 0

Views: 3743

Answers (2)

Nico
Nico

Reputation: 890

I don't get very well what are you looking for, but if you want to add a shadow to that ellipse what you need is box-shadow, as you know
The use is:

box-shadow: horizontal-shadow-position v-shadow-pos blur spread color inset;

where you can ommit a property but you cannot change its order.

So for instance your shadow will be something like

box-shadow: 3px 3px 8px 2px #666;

because it's not inset.

In addition, to be able to use it in more browsers, you will need the browser prefix, such as

box-shadow:         3px 3px 8px 2px #666; /*Firefox (and new versions of Opera)*/
-o-box-shadow:      3px 3px 8px 2px #666; /*Opera*/
-ms-box-shadow:     3px 3px 8px 2px #666; /*Internet Explorer*/
-webkit-box-shadow: 3px 3px 8px 2px #666; /*Webkit: Safari, Chrome, Chromium...*/

Also, remember that the alpha-filter you mentioned is just the equivalent to opacity property for Firefox, Chrome, Opera, ...

Upvotes: 1

lloan
lloan

Reputation: 1403

Here is a live demo - Let me know if it helps! LIVE DEMO JSBIN

Compatible with IE 9-10, Firefox, Safari and Opera. (Supposedly)

Upvotes: 1

Related Questions