Is there a way to use a linear-gradient to set a two-color bottom border so that it can be used as a progress bar? Think about the way Safari shows you the progress bar for when a website is loading.
We can do it using background:
background-image: linear-gradient(90deg, green 10%, red 0%, red 100%);
This would generate a div that's 10% green and 90% red. Can a similar technique be used on the bottom border of the div? Also, can the width of this bottom border be controlled so that it's 3px?
I would rather create an element for it, but you can do something like this:
Please don't use green and red due to color blindness issues.
body {
margin: 0;
padding: 0;
}
header {
--progress: 10%;
background-color: khaki;
height: 3rem;
border-bottom: 3px solid;
border-image: linear-gradient(90deg, green var(--progress), red 0%, red 100%) 1;
}
<header></header>
[EDIT] I can add how I would set up a progress bar with pseudo-elements. I would prefer using two (one as a background; another as progress), so it's easier to animate the progress.
Added a range input to make it a little bit more interactive.
let headerElements = document.querySelectorAll('header');
function updateHeaders(value) {
headerElements.forEach((header) => {
header.style.setProperty('--progress', value + "%");
});
}
body {
--primary-color: lightblue;
margin: 0;
padding: 0;
}
header {
--progress: 30%;
background-color: var(--primary-color);
display: flex;
align-items: center;
/* RELEVANT CSS */
position: relative;
}
/* RELEVANT CSS */
header.progressbar::before,
header.two.pseudo-elements.progressbar::after {
content: '';
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
height: 3px;
}
header.one.pseudo-element.progressbar::before {
background-image: linear-gradient(90deg, green var(--progress), red 0%, red 100%);
}
header.two.pseudo-elements.progressbar::before {
z-index: 2;
right: initial;
width: var(--progress);
background-color: green;
transition: width 300ms linear;
}
header.two.pseudo-elements.progressbar::after {
z-index: 1;
background-color: red;
}
/* PLACEHOLDER CSS BELOW */
input[type="range"] {
margin: 1rem 0px;
width: 100%;
}
div[title="Logotype"] {
width: 35px;
height: 35px;
display: flex;
justify-content: center;
align-items: center;
font-family: "Verdana";
font-size: 36px;
padding: 0.25rem;
margin: 0.5rem;
background-color: white;
border-radius: 50%;
}
header > a {
padding: 0px 0.5rem;
color: #121212;
}
<h3>One pseudo-element</h3>
<header class="one pseudo-element progressbar">
<div title="Logotype">L</div>
Link 1
Link 2
</header>
<h3>Two pseudo-elements</h3>
<header class="two pseudo-elements animate progressbar">
<div title="Logotype">L</div>
Link 1
Link 2
</header>
<input type="range" oninput="updateHeaders(this.value)" value="30" />
I try to customize dots with React Slick and have this issue with the background color.
Here is how I set the styles.
.slick-dots.circle-dots {
list-style-type: none;
display: flex !important;
justify-content: center;
padding: 0;
.slick-active {
background-color: red;
background-size: contain;
border-radius: 50%;
}
}
An this is the result. The background is actually larger than the circle with border-radius: 50%. As there dots are placed next to each other, it's easy to point out that one is bigger than the others and it's weird. Is there any way that I can fix it?
Since .slick-active is a child of .slick-dots.circle-dots, setting
.slick-dots.circle-dots {
list-style-type: none;
display: flex !important;
justify-content: center;
padding: 0;
overflow: hidden;
//hide anything that spans larger than the element
.slick-active {
background-color: red;
background-size: contain;
border-radius: 50%;
}
}
to hide overflows could work
In the following example, I demonstrate the issue where the colors are perfect, except for portions at different %'s results in some or all of the text being obscured.
What I would like to achieve, is to somehow assign the font color to be the difference of the background. I recall seeing something many years ago in DHTML which allowed for this. The result I am looking for is as follows
In the 50% sample, the '5' would be in white, and the '0' would be in black.
In the 75% sample, the '75' would be in white.
In the 20% sample, the '20' would be in black.
I believe there is a way to do this using CSS/CSS3, but I am unable to locate information on it.
The resulting style information should be contained inside the 'p' style in the CSS file. No 'tricks' like splitting data or altering the HTML using JavaScript / etc. The number inside the <p> element should remain whole and in tact.
body {
background: #000000;
}
p {
background: #ffffff;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAMAAACahl6sAAAAA1BMVEVilQmZw+RvAAAAAXRSTlOF3TSvyQAAAD1JREFUeNrtwQENAAAAwqD3T20PBxQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAPBmnQgAAd4aVNwAAAAASUVORK5CYII=");
background-repeat: repeat-y;
background-size: 0% auto;
color: #ffffff;
padding: 5px;
text-align: center;
border: 1px solid #3E8096;
display: block;
}
<p style="background-size: 50% auto !important">50</p>
<p style="background-size: 75% auto !important">75</p>
<p style="background-size: 20% auto !important">20</p>
Note:
I was considering a drop-shadow, however this would result in a funny
looking font when it is a white font. I also considered encapsulating
the text in a border, however the ideal result would be for the font
to adjust based on background.
body { background: navy }
div {
background-color: white;
display: inline-block;
border: 1px solid red;
width: 200px;
font-size: 50px;
text-align: center;
position: relative;
color: red;
}
span {
content: '';
position: absolute;
background: cyan;
width: 50%;
top: 0;
left: 0;
height: 100%;
display: inline-block;
mix-blend-mode: difference;
}
<div>
0000 <span></span>
</div>
body { background: navy }
div {
background-color: white;
display: inline-block;
border: 1px solid red;
width: 200px;
font-size: 50px;
text-align: center;
position: relative;
color: red;
}
div:after {
content: '';
position: absolute;
background: cyan;
width: 50%;
top: 0;
left: 0;
height: 100%;
display: inline-block;
mix-blend-mode: difference;
}
<div>00000</div>
I wondered if it was possible to create two background-colors for a div an overlay them.
I want a white background-color so that the content below this div doesn't shine through and another rgba() color painted over this white to create lighter colors per script.
Without understanding why you want this, it can be done by using solid color gradients: fiddle.
body {
background: linear-gradient(rgba(220,14,120,0.5), rgba(220,14,120,0.5)),
linear-gradient(white, white); /* first bg is on top of this */
}
Though Adrift's answer is the way to go, you can also use pseudo elements for this.
body {
background: white;
position: relative;
}
body:before {
content: "";
position: absolute;
top: 0;
left; 0;
width: 100%;
height: 100%;
background: rgba(220,14,120,0.5);
z-index: 1;
}
/* Just to be sure, automatically set all elements to a higher z-index than the pseudo element */
body * {
z-index: 2;
position: relative;
}
Here is a fiddle.
However, this is not production friendly:
Setting position relative on body and all other elements when not necessary
Setting unnecessary z-index on all elements
The only upside this method has, is that it doesn't use gradients which, from a semantic standpoint, is more logical.
You can't define two background-colors for one element, but you could overlay one coloured element on top of a white one in order to get a blending effect, while blocking out anything below them:
JSFiddle
HTML
<div class="one">
<div class="two"></div>
</div>
CSS
div {
width: 100px;
height: 100px;
}
.one {
background-color: #fff;
}
.two {
top: 0;
left: 0;
background-color: rgba(0,0,255,0.2);
}
To answer your question, yes there is a way. You can use a background image and a background color on the same div. Check out this SOF post.
Although I would consider a different method like this:
Structure:
<div class="parent">
<div class="white"></div>
<div class="color"></div>
</div>
CSS:
.parent {
position: relative:
}
.white, .color {
position:absolute;
top: 0px;
left: 0px;
}
.white {
z-index: 9998;
}
.color {
z-index: 9999;
}
You can mess around with the details here, but the overall idea is that your layer the divs on top of each other. The div with the higher z-index will be on top. Change their colors accordingly. The parent div being relative will keep the absolute divs inside of that container.
To achieve multiple background colors in CSS, a common proposal is
Solid Color Gradients
But there is an alternative:
Solid Color background-images via SVG Data URIs
The working example below contains the following areas with the following background colors:
<main> - dark-gray
<section> - light-gray
<div class="circle"> - translucent red
In this set-up, we want to use the same theme-color for all the circles, rgba(255, 0, 0, 0.5) but we also want the circles inside the <section> to appear to have the same background-color as the circle outside <section>.
We can observe that, due to the application of the technique below to div.circle.does-not-blend - the rightmost of the two circles inside <section> - that circle ends up with the same apparent background-color as div.circle outside <section>.
The Approach
The approach is to give div.circle.does-not-blend:
the same initial background-color as <main>
an SVG Data URI background-image with the same translucent red background-color as the other .circle elements
The SVG background-image
The SVG Data URI background-image looks like this:
data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" style="background-color:rgba(255, 0, 0, 0.5);"%2F%3E
The Result
In the final result we see that the light-gray background-color of <section> does not bleed through and influence the final background-color of div.circle.does-not-blend
Working Example
main {
display: flex;
justify-content: space-around;
align-items: center;
height: 180px;
padding: 0 9px;
background-color: rgb(127, 127, 127);
border: 1px solid rgb(0, 0, 0);
}
section {
display: flex;
justify-content: space-around;
align-items: center;
flex: 0 0 66%;
background-color: rgb(191, 191, 191);
height: 162px;
}
.circle {
display: inline-block;
width: 120px;
height: 120px;
color: rgb(255, 255, 255);
text-align: center;
line-height: 120px;
background-color: rgb(255, 0, 0, 0.5);
border-radius: 50%;
}
.circle.does-not-blend {
background-color: rgb(127, 127, 127);
background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" style="background-color:rgba(255, 0, 0, 0.5);"%2F%3E');
}
<main>
<div class="circle"></div>
<section>
<div class="circle">Incorrect</div>
<div class="circle does-not-blend">Correct</div>
</section>
</main>
is there a way I can stop the opacity from affecting my links text when the mouse pointer hovers over my link? I just want the opacity to affect the image only.
Here is the CSS.
.email {
background: url(../images/email.gif) 0px 0px no-repeat;
margin: 0px 0px 0px 0px;
text-indent: 20px;
display: inline-block;
}
.email:hover {
opacity: 0.8;
}
Here is the xHTML.
Email
Short answer: No.
Long answer: Yes, if you use rgba colors instead of the opacity property. For example, the following would give you a black background with 20% opacity, and black text with full opacity:
p {
background: rgba(0, 0, 0, 0.2);
color: #000000;
}
For background images, use a PNG with alpha channels.
Not with a background image (you can if it's just a background color). Instead of using opacity, replace the background image with less opaque version in .email:hover.
Yes, take the text out of the context of the transparent container with absolute positioning. This will work with background images as well!
<div id="TransContainer">
<div id="TransBox" href="#">Some text that will be opaque!</div>
<div id="NonTransText">Some text that I do not want opaque!</div>
</div>
<style>
#TransContainer
{
position: relative;
z-index: 100;
display: block;
width: 420px;
height: 165px;
background-color: blue;
}
#TransBox
{
background-color: green;
display: block;
width: 100px;
height: 100px;
opacity:0.4;
filter:alpha(opacity=40)
}
#NonTransText
{
color: #000;
position: absolute;
top: 20px;
left: 0;
}
</style>