CODEWITHSUNDEEP
htmlcsscss-filters
MadHatter
MadHatter

Reputation: 386

CSS filter brightness: can it be applied separately to border and body of one element?

This element already has filter: brightness(50%) applied to it:

.element {
  width: 300px;
  height: 250px;
  border: 5px solid white;
  padding: 2px;
  background-color: darkblue;
  color: white;
  filter: brightness(50%);
}
<div class="element">
  <p>element has brightness of 50%</p>
  <p>I want the border to have brightness of 100%</p>
  <p>How could one do this?</p>
</div>

I am trying to figure out how to apply CSS filter: brightness(100%) to only the border of the element. Several hours of scouring online documentation have yielded no results. Forgive me if it is something simple, but to reiterate how can I independently apply CSS filter: brightness() to the border of an element that already has brightness applied to it?

Upvotes: 8

Views: 7694

Answers (3)

Temani Afif
Temani Afif

Reputation: 273086

Use a pseudo element for the background then apply the filter to only the child elements and the background. Like that the border will not get affected by the filter and you will get the same visual result:

.element {
  width: 300px;
  height: 250px;
  padding: 2px;
  background-color: darkblue;
  border:5px solid #fff;
  color: white;
  position:relative;
  z-index:0;
}
.element:before {
  content:"";
  position:absolute;
  z-index:-1;
  background:darkblue;
  top:0;
  left:0;
  right:0;
  bottom:0;
  filter:brightness(50%);
}
.element > * {
  filter:brightness(50%);
}

body {
  background:pink;
}
<div class="element">
  <p>element has brightness of 50%</p>
  <p>I want the border to have brightness of 100%</p>
  <p>How could one do this?</p>
</div>

Upvotes: 4

prasanna purohit
prasanna purohit

Reputation: 98

You can write a another css class to get the brightness.

.element 
 { 
  width: 300px; 
  height: 250px; 
  padding: 2px; 
  background-color: darkblue; 
  color: white; 
  filter: brightness(50%); 
 } 

.border
 { 
  border: 5px solid rgba(29, 27, 27, 0.9); 
  width: 300px; 
  height: 250px; 
 }

Here I used border colour as black to ensure that border is applied or not. It's coming you can use this code with the colour which you want:-)

Upvotes: 3

Mike Poole
Mike Poole

Reputation: 2055

The snag is that any filter (or its friends opacity, blur, etc) will apply to everything in the DIV, e.g. the text too.

My approach would be to create layered divs that are absolutely positioned like so:

.outer, inner{
  width: 150px;
  height: 75px;
}

.outer{
  padding: 5px;
  background-color: black;
  opacity: 0.5;
  filter: alpha(opacity=50); /* For IE8 and earlier */
  
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  z-index:-1;
}

.inner{
color: #fff;
  max-width: 140px;
  min-height: 70px;
  background-color: black;
}
<div class="outer">

</div>

<div class="inner">
 element has brightness of 50%
</div>

Upvotes: 1

Related Questions