CODEWITHSUNDEEP
htmlcss
Bri.H.
Bri.H.

Reputation: 313

CSS multiple outlines with negative outline-offset

I got with image as a background, and want to get effect of multiple inner outlines. Outlines should be solid white 2px, but in different position - say -4px, -8px, -12px. Goal is to get more than 2 outlines.

I know i can make box-shadow and outline to get double outilne, but noticed that i cannot attach to div 3 classes with different outline-offset - div have applied only last of class.

My code:

<div class="imgfield effect1 effect2 effect3"> </div>

and example css:

.imgfield { background: url(someimage.jpg); ... width, height etc. }
.effect1 { outline: yellow 2px solid; outline-offset: -4px; }
.effect2 { outline: red 2px solid; outline-offset: -8px; }
.effect3 { outline: blue 2px solid; outline-offset: -12px; }

In this example there will be only blue inner outline but now red niether yellow. How to workaround this?

-----------edit-----------------

All answers are good. I must admit i try handling after and before but i'm not enough familiar with it. Box-sizing: border-box was also important.

Upvotes: 5

Views: 11342

Answers (3)

KABA
KABA

Reputation: 352

Cleaned up codes.







.effect {
  outline: 4px solid #f99;

  /*
  width: 200px;
  height: 200px;
  */
  /* (Optional) Size hack */
  display: table;
  padding: 25px 50px;

  position: relative;

  &::before,
  &::after {
    position: absolute;
    inset: 0;
    content: "";
    border: #9f9 4px solid;
  }
  &::before {
    border: #99f 8px solid;
  }
}


<div class="effect"></div>

Upvotes: 0

G-Cyrillus
G-Cyrillus

Reputation: 105893

to complete @Mr.Alien demo/answer , i would use border's pseudo for a better compatibility. 

    .effect {
        height: 200px;
        width: 200px;
        outline: 1px solid #000;
        position:relative;/* pick as reference for pseudo absolute */
        -moz-box-sizing:border-box; /* keep box within size given */
        box-sizing:border-box;
    }
/* size pseudo within from coordonates */
    .effect:before {
        content:"";
        top:2px;
        left:2px;
        right:2px;
        bottom:2px;
        border: green 2px solid;
        position: absolute;
    }
    .effect:after {
        content:"";
        top:6px;
        left:6px;
        right:6px;
        bottom:6px;
        border: red 2px solid;
        position: absolute;
    }

DEMO

Upvotes: 2

Mr. Alien
Mr. Alien

Reputation: 157334

How about using pseudo elements for this? Here, I am using a single class with a single element, but am positioning the pseudo elements i.e :before and :after using position: absolute;.

Demo

You can surely play with z-index if you have any issue with the element overlapping.

.effect {
    height: 200px;
    width: 200px;
    outline: 1px solid #000;
}

.effect:before {
    content: "";
    height: 200px;
    width: 200px;
    outline: green 2px solid; 
    outline-offset: -4px;
    display: block;
    position: absolute;
}

.effect:after {
    content: "";
    display: block;
    height: 200px;
    width: 200px;
    outline: red 2px solid; 
    outline-offset: -8px;
    position: absolute;
}

Upvotes: 3

Related Questions