Do I Still Have to Use All Five Vendor Prefixes for The CSS Box-Shadow Property

Do we have to use non-standard/browser specific CSS vendor prefixes anymore?

It really depends on which features and which browsers you want to fully support. Even now some browsers are lagging.

Here is a really excellent guide: http://caniuse.com/

Box Shadow on table row not appearing on certain browsers

As previously mentioned, box-shadow property works only with elements that have display: block or display:inline-block property.

If you'll add display: block to the table cell as a general styling rule, it will collapse, since automatic width/height proportions that cells had with display:table won't be applied anymore. To simulate that behavior just assign min-width attribute to each th and td.

Then apply box-shadow to the row (on hover or without).

In summary, your code should look like this:

table { box-sizing: border-box; }
td, th { padding-left: 16px; min-width: 170px; text-align: left; }
tr { display: block; }
tr:hover { box-shadow: 0px 2px 18px 0px rgba(0,0,0,0.5); cursor: pointer; }

I've omitted vendor prefixes for simplicity.

Here is the full example:

table {  box-sizing: border-box;  border-bottom: 1px solid #e8e8e8;}td,th {  padding-left: 16px;  min-width: 170px;  border: 1px solid #e8e8e8;  border-bottom: none;  font: 14px/40px;  text-align: left;}td {  color: #666;}tr {  display: block;}th {  color: #333;}tr:hover {  background-color: #fbfbfb;  box-shadow: 0px 2px 18px 0px rgba(0, 0, 0, 0.5);  cursor: pointer;}

<table cellpadding="0" cellspacing="0">  <thead>    <tr>      <th>Phone number</th>      <th>Date</th>      <th>Name</th>      <th>Label</th>    </tr>  </thead>  <tbody>    <tr>      <td>0342443</td>      <td>10 August 2013</td>      <td>Kate</td>      <td>Loves cats</td>      </td>      <tr>        <td>0342442</td>        <td>9 August 2013</td>        <td>Mary</td>        <td>Boring</td>      </tr>      <tr>        <td>0342441</td>        <td>8 August 2013</td>        <td>Anna</td>        <td>Loves extreme stuff</td>      </tr>  </tbody></table>

Remove outline from select box in FF

I found a solution, but it is mother of all hacks, hopefully it will serve as a starting point for other more robust solutions. The downside (too big in my opinion) is that any browser that doesn't support text-shadow but supports rgba (IE 9) won't render the text unless you use a library such as Modernizr (not tested, just a theory).

Firefox uses the text color to determine the color of the dotted border. So say if you do...

select {
  color: rgba(0,0,0,0);
}

Firefox will render the dotted border transparent. But of course your text will be transparent too! So we must somehow display the text. text-shadow comes to the rescue:

select {
  color: rgba(0,0,0,0);
  text-shadow: 0 0 0 #000;
}

We put a text shadow with no offset and no blur, so that replaces the text. Of course older browser don't understand anything of this, so we must provide a fallback for the color:

select {
  color: #000;
  color: rgba(0,0,0,0);
  text-shadow: 0 0 0 #000;
}

This is when IE9 comes into play: it supports rgba but not text-shadow, so you will get an apparently empty select box. Get your version of Modernizr with text-shadow detection and do...

.no-textshadow select {
  color: #000;
}

Enjoy.

How can I center an absolutely positioned element in a div?

<body>  <div style="position: absolute; left: 50%;">    <div style="position: relative; left: -50%; border: dotted red 1px;">      I am some centered shrink-to-fit content! <br />      tum te tum    </div>  </div></body>

How to fetch the background of DIV on a bottom layer with exact position using jQuery and CSS

Since you ask for alternatives to jQuery solutions

You could play a little with margins and box-shadow and keyframe animations.

Something in this direction for the shape (depends on what you want to do with which part - add content ... and in what way you want it to be responsive):

html:

<div class="wrapper">
    <div class="header"><img src="http://i.imgur.com/CUbOIxr.png" alt="Company name" /></div>
    <div class="content"></div>
</div>

CSS:

body {
    background:orange;
    width:100%;
    height:100%;
}
.wrapper {
    width:40%;
    height:90%;
    border:30px solid #000;
    border-right-width:100px;
    border-bottom-width:100px;
}
.header {
    width:100%;
    border-bottom:10px solid transparent;
    -webkit-box-shadow: 0 30px 0 #000;
    -moz-box-shadow: 0 30px 0 #000;
    box-shadow: 0 30px 0 #000;
}
.header img {
    width:100%;
}
.content {
    width:95%;
    height:400px;
    background-color:#000;
    margin-top:30px;
}

DEMO

This way no javascript is needed. And for the background you can use a linear gradient and do all animations with css transitions or keyframe animations. You also need to play with the lengths and adjust the borders and box-shadows to your needs, maybe add some @media queries for the responsiveness.

Hope this helps you a little in the right direction =)

Update:

I hoped the gradients changing was the smaller problem ;-) Silly me, sorry.

I will elaborate my CSS-only suggestion for the animation, but you can choose a javascript slider for the background animation, if you don't like CSS3 solutions - although this is the hot stuff now ;-)

Ok. So, I would add some more fixed positioned elements with gradient backgrounds (layer1 and layer2).

To have something in this direction in the html now:

<div class="layer layer1"></div>
<div class="layer layer2"></div>
<div class="wrapper">
    <div class="header">
        <img src="http://newtpond.com/test/company-name.png" alt="Company name" />
    </div>
    <div class="content"></div>
</div>

and add a keyframe animation on them in CSS (here it is just with the -webkit vendor prefix [probably cause I am a lazy bum], but I hope you can get the idea, and could add the others):

body {
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}
/* for the animation */
 .layer {
    position:fixed;
    width:100%;
    height:100%;
}
@-webkit-keyframes GoLayer1 {
    0% {
        opacity:1;
    }
    50% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}
@-webkit-keyframes GoLayer2 {
    0% {
        opacity:0;
    }
    50% {
        opacity:1;
    }
    100% {
        opacity:0;
    }
}
.layer1 {
    background: -webkit-linear-gradient(bottom, rgb(43, 70, 94) 29%, rgb(194, 41, 41) 65%, rgb(155, 171, 38) 83%);
    -webkit-animation: GoLayer1 5s infinite;
}
.layer2 {
    background: -webkit-linear-gradient(bottom, rgb(225, 202, 230) 29%, rgb(39, 163, 194) 65%, rgb(36, 124, 171) 83%);
    -webkit-animation: GoLayer2 5s infinite;
}
/* the wrapper shape */
 .wrapper {
    z-index:999;
    opacity:1;
    position:relative;
    width:40%;
    height:90%;
    border:30px solid #000;
    border-right-width:100px;
    border-bottom-width:100px;
}
.header {
    width:100%;
    border-bottom:10px solid transparent;
    -webkit-box-shadow: 0 30px 0 #000;
    -moz-box-shadow: 0 30px 0 #000;
    box-shadow: 0 30px 0 #000;
}
.header img {
    width:100%;
}
.content {
    width:95%;
    height:400px;
    background-color:#000;
    margin-top:28px;
}

DEMO (tested in Chrome 26 - looked cool =)

This is now where I can point you according this CSS-only approach. There is still stuff to modify and consider browser compatibility. But it is certainly an alternative ... and a step in the direction where html5 and css3 is going (if you want to be hot and cool ;-), hehe, sorry, too much silliness.

Good luck!

Update 2:

So, I overcame my laziness a tiny bit and added some more vendor prefixes to the top example (and of course you can use any image as background):

DEMO

And here I add another example, that is using a png image for the gradient, and is sliding up and down in the background (as another alternative):

Do I Still Have to Use All Five Vendor Prefixes for The CSS Box-Shadow Property

Do we have to use non-standard/browser specific CSS vendor prefixes anymore?

Box Shadow on table row not appearing on certain browsers

Remove outline from select box in FF

How can I center an absolutely positioned element in a div?

How to fetch the background of DIV on a bottom layer with exact position using jQuery and CSS

Since you ask for alternatives to jQuery solutions

Update:

Update 2:

DEMO

DEMO

Related Topics

Leave a reply