CODEWITHSUNDEEP
csscross-browser
Tural Ali
Tural Ali

Reputation: 23260

Cross browser border gradient

I want to get border gradient (from top: #0c93c0; to bottom: white). I wonder, is there any way to get it with css3 for both webkit and moz browsers?

Upvotes: 0

Views: 4748

Answers (3)

slopen
slopen

Reputation: 421

Using less.css (of course you can do it without also), the trick is in pseudoselectors (:before and :after):

1. define cross-browser gradient:


    .linear-gradient (@dir, @colorFrom, @colorTo) {
        background: -webkit-linear-gradient(@dir, @colorFrom, @colorTo);
        background: -moz-linear-gradient(@dir, @colorFrom, @colorTo);
        background: -ms-linear-gradient(@dir, @colorFrom, @colorTo);
        background: -o-linear-gradient(@dir, @colorFrom, @colorTo);
    }

2. define border-gradient bundle:


    .border-gradient(@colorFrom, @colorTo){
        border-top:1px solid @colorFrom;
        border-bottom:1px solid @colorTo;
        position:relative;

        .border-bundle(@colorFrom, @colorTo){
            position:absolute;
            content:"";
            width:1px;
            height:100%;
            top:0;
            .linear-gradient(top, @colorFrom, @colorTo);
        }

        &:before{ .border-bundle(@colorFrom, @colorTo); left: 0; }
        &:after { .border-bundle(@colorFrom, @colorTo); right:0; }  
    }

We can use it now like this:


    .some-class{

        /* other properties */

        .border-gradient(#0c93c0, #FFF);
    }

Upvotes: 2

Tural Ali
Tural Ali

Reputation: 23260

instead of borders, I would use background gradients and padding. same look, but much easier, more supported.

a simple example:

<div class="g">
    <div>bla</div>
</div>

CSS:

.g {
  background-image: -webkit-linear-gradient(top, #0c93C0, #FFF); 
  background-image:    -moz-linear-gradient(top, #0c93C0, #FFF); 
  background-image:     -ms-linear-gradient(top, #0c93C0, #FFF); 
  background-image:      -o-linear-gradient(top, #0c93C0, #FFF); 
  background-image:         linear-gradient(top, #0c93C0, #FFF);
  padding: 1px;
}

.g > div { background: #fff; }

Upvotes: 2

Rob W
Rob W

Reputation: 349012

Fiddle: http://jsfiddle.net/9ZDTA/
Add an extra declaration for each browser engine that you want to support, using the specific prefixes.

  background-color: #0c93C0; /* fallback color if gradients are not supported */

  background-image: -webkit-linear-gradient(top, #0c93C0, #FFF); 
  background-image:    -moz-linear-gradient(top, #0c93C0, #FFF); 
  background-image:     -ms-linear-gradient(top, #0c93C0, #FFF); 
  background-image:      -o-linear-gradient(top, #0c93C0, #FFF); 
  background-image:         linear-gradient(top, #0c93C0, #FFF); /* standard, but currently unimplemented */

See this source.

Upvotes: 1

Related Questions