CODEWITHSUNDEEP
htmlcsswordpress
Frenchmassacre
Frenchmassacre

Reputation: 462

CSS - Change css background of class text without sub element

I'm working on a project based on a wordpress theme that is regularly updated so I can't change the HTML (without making maintenance hell anyway). I added a stylesheet that allows me to change the appearance of the site and all I have to do is add an "include" with each update.

I have an availability calendar that shows as follows: Calendar current

As you can see, the "31" is barely visible.

The html output: 

<td class="calendar-end" data-curent-date="1564531200">
31
</td>

I want to edit the text's css to add a reversed gradient (white on the red section, grey on the white section) so that the text is properly readable. See my css below

background: linear-gradient(135deg,  #ffffff 0%,#ffffff 48%,#4d5567 48%,#4d5567 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

This gives the following result (when adding <p> tags to the element via chrome inspector and giving it the css rule)

Calendar desired

My issue is, I don't know how to create a rule for the text as it's not a subelement.

Normally I would engulf the 31 with <p> tags so I could create a rule for .calendar-end p but thats not possible because of the HTML restrictions...

Is there a way that I am not aware of to affect the text inside the td via a specific css rule? If I try to apply my code to the .calendar-end class it causes a conflict with the background gradient and I end up with completely invisible text (same gradient as background)

I am not sure what I am asking is even possible but css isn't my strong suit and I'm hoping someone here is more knowledgeable than I am on the subject :D

Thanks for any help all!

Upvotes: 3

Views: 369

Answers (1)

Temani Afif
Temani Afif

Reputation: 273086

With chrome you can consider multiple background like below (doesn't work on firefox, raised a bug)

.calendar-end {
  color: transparent;
  background: 
    linear-gradient(135deg, #ffffff 48%, #4d5567 48%),
    linear-gradient(135deg, red 48%, #fff 48%);
  -webkit-background-clip: 
    text,
    padding-box;
  background-clip: 
    text,
    padding-box;
  width:100px;
  height:100px;
  font-size:100px;
}
<div class="calendar-end" data-curent-date="1564531200">
  31
</div>

For the other browser consider a pseudo element. Simply make sure to not specify any z-index to main element to have the pseudo element behind (related: Why can't an element with a z-index value cover its child?)

.calendar-end {
  background: 
    linear-gradient(135deg, #ffffff 48%, #4d5567 48%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  width:100px;
  height:100px;
  font-size:100px;
  position:relative;
  
}
.calendar-end:before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background: linear-gradient(135deg, red 48%, #fff 48%);
}
<div class="calendar-end" data-curent-date="1564531200">
  31
</div>

In case the gradient will be the same for text and background you can optimize the code like below:

.calendar-end {
  background-image: 
    linear-gradient(135deg, #ffffff 49%, #4d5567 50%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  width:100px;
  height:100px;
  font-size:100px;
  position:relative;
  
}
.calendar-end:before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-image: inherit;
  transform:rotate(180deg);
}
<div class="calendar-end" data-curent-date="1564531200">
  31
</div>

Upvotes: 3

Related Questions