Comments on: In Depth CSS Part 4: New CSS3 Styles

By: Joanna

Joanna — Fri, 30 Apr 2010 10:10:46 +0000

Is there any easy way to add shadow effect to a table and be sure that it will be well visible in the most recent browsers? Or should I use images instead – does someone has a short instructions for that?

By: Derrick Workman

Derrick Workman — Wed, 07 Apr 2010 03:55:04 +0000

Awesome post. It is just too bad we cant use this stuff 100% yet. On many of my designs I have a curved box with a drop shadow which gets really annoying when you constantly have to use images!

Any-case thanks for the well written article!

By: Lourens

Lourens — Sun, 04 Apr 2010 14:17:03 +0000

Thanks for the article, I can’t wait till CSS3 has a good browser support ;)

By: Amber Weinberg

Amber Weinberg — Wed, 31 Mar 2010 14:29:58 +0000

@Gerben I stated at the very beginning that you must use a webkit or gecko browser…

By: Gerben van Dijk

Gerben van Dijk — Wed, 31 Mar 2010 07:37:10 +0000

Nice article, but I’m missing some information on browser support for all of these styles (you mentioned it at some of them, but not all).

By: Joost Kiens

Joost Kiens — Wed, 31 Mar 2010 04:25:49 +0000

Also a lot of these effects and selectors can be faked by using microsoft’s proprietary filters, css expressions, javascript (in between conditional comments), etc. to get similar effects in IE.

For example for opacity:
.transparent {
-ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=50)”; /* for ie6, should be first! */
filter: alpha(opacity=50);
opacity: .5;
-moz-opacity:0.5;
-webkit-opacity:0.5;
}

ie last child
#subnav li {background-color: green;}
#subnav li:last-child {background-color: red;}
#subnav li {background-color: expression(this.nextSibling==null?’red’:'green’);}

wordwrap
.word-wrap
{
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}

Oh and of course you can easily fake an rgba background with a semi transparent png, will take care of ie7 and up:

div { background: rgb(0, 0, 0) url(‘transparent-black-0.5.png’); } // ie7 and up
div { background: rgba(0, 0, 0, 0.5) none; } // real browsers

By: Divyesh Ardeshana

Divyesh Ardeshana — Tue, 30 Mar 2010 18:54:48 +0000

it is really good help :)

By: CSS Brigit | In Depth CSS Part 4: New CSS3 Styles

CSS Brigit | In Depth CSS Part 4: New CSS3 Styles — Tue, 30 Mar 2010 18:40:54 +0000

In Depth CSS Part 4: New CSS3 Styles…

In the fourth, and last, part of our In Depth CSS series, well talk about several new CSS3 features – from fancy styling to mobile Webkit development….

By: Web Design Maidstone

Web Design Maidstone — Tue, 30 Mar 2010 17:48:45 +0000

Nice article, looking forward to gradually introducing these neat new css3 touches but wish everyone would be forced to update their browsers so we can all enjoy it now!

By: In Depth CSS Part 4: New CSS3 Styles | Design Newz

In Depth CSS Part 4: New CSS3 Styles | Design Newz — Tue, 30 Mar 2010 16:47:00 +0000

[...] In Depth CSS Part 4: New CSS3 Styles [...]