CSS3 question

[midrange]

http://i52.tinypic.com/wlyki9.jpg

The side shadow on the container I've used a mask in Photoshop to fade it out. Possible to use CSS3 rather than a background image on the container div?

Hope that makes sense.

 

[James]

I must first say I have not tried this but looks like you could do this with jQuery, here is the link

 

[midrange]

Will have a look at that, thanks.

 

[CrazyBob]

Not entirely sure what you wanna do, but a nifty tool for css3 styles: http://css3please.com/ can experiment with them on-the-fly.

 

[Centaur]

You can make use of box-shadows: http://www.css3.info/preview/box-shadow/

A simple example would be this:

.container {
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px #888;
box-shadow: 0 0 5px #888;
}

 

[midrange]

You can make use of box-shadows: http://www.css3.info/preview/box-shadow/

A simple example would be this:

.container {
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px #888;
box-shadow: 0 0 5px #888;
}

I know about shadow boxes it's the gradient fade I'm talking about. I could add extra divs to the side and use the CSS3 gradient, but that's overkill.

 

[FarligOpptreden]

Ok, I get what you want to achieve. AFAIK, that's not possible with only CSS effects / filters applied to a single element. I guess you'd have to add extra DIVs to get that effect...

 

[midrange]

Ok, I get what you want to achieve. AFAIK, that's not possible with only CSS effects / filters applied to a single element. I guess you'd have to add extra DIVs to get that effect...

Looks the only way, but not so "elegant". Think I'll just go with a background image.

 

[Raithlin]

What about Linear gradients? I was looking at them myself the other day, and with a little luck (read: experimentation) you may be able to get them to do what you want.

http://robertnyman.com/2010/02/15/css-gradients-for-all-web-browsers-without-using-images/
http://css-tricks.com/css3-gradients/

Using the percentages and stops you might well be able to achieve the impossible - but alas, not all browsers will support this. Yet.

 

[midrange]

I guess I could use a div with a linear gradient, then place a smaller div on top for the white block.

 

[FarligOpptreden]

...or go with the background image for now. Would be the most widely supported and quickest to pull off.

 

[Raithlin]

...or go with the background image for now. Would be the most widely supported and quickest to pull off.

Hey, the dude asked if it was possible, not if it was recommended...

 

[midrange]

I tried that PIE js thingy to enable CSS3 for IE on a site a couple of weeks ago, but it didn't work, just made the elements disappear. There was a morass of other js on that site so there could have been a conflict.

Anyway, *crops background image* in PS.

 

[FarligOpptreden]

I tried that PIE js thingy to enable CSS3 for IE on a site a couple of weeks ago, but it didn't work, just made the elements disappear. There was a morass of other js on that site so there could have been a conflict.

Anyway, *crops background image* in PS.

Hahaha!

 

[Centaur]

You can also maybe use border-image, if you want to go the border route. http://www.css3.info/preview/border-image/ and http://css-tricks.com/understanding-border-image/
But the browser support for border-image is still extremely minimal.

If you want to go the background route, then you can use this tool to generate gradients: http://www.colorzilla.com/gradient-editor/

If you go the background route, you can just create one div that is behind the main container. Then you just make the padding of the main container 2px.

.backcontainer {
background: url(image/gradient.png) no-repeat top center #fff;
padding:2px;
}
.container {
background:#fff;
margin:0;
}

Well I think you will get the point. That way, you only need one parent div and one background image and not divs for every side.

 

[midrange]

Well I think you will get the point. That way, you only need one parent div and one background image and not divs for every side.

Ya, that's what was getting at here:

I guess I could use a div with a linear gradient, then place a smaller div on top for the white block.

That border-image looks interesting.

 

[cybershark]

http://www.dreamincoloronline.com/css-gradient-for-all-browsers/