I'm trying to create an effect which increases the width of a border up to a certain point, using the thickness of the border to represent a progress bar, and am wondering if there's a nice way to accomplish this while reusing the colours defined in my stylesheets.
Right now I have the element with the border contained within a div, which creates the wider part of the border by using its background color. Then, the outer container's background is styled with a linear gradient, to switch from the color of the inner element's border to the color of the background, like
background: linear-gradient(to right, red 10%, blue 10%)
This works fine, but I'm trying to avoid hard-coding the colors in the background. What I want is to dynamically vary the percentage for where the colors change as a style attribute, but would prefer the colors to be defined as part as a class. So ideally something like:
opacity: linear-gradient(to right, 0 10%, opacity 1 10%)
That way the code which alters the length of the progress bar doesn't need to be aware of the colors, making it easier for the progress bar colors to be kept consistent with the rest of the website. Any other way to accomplish the same thing would work; changing the width could work, if it didn't impact the width of the child element.
Is there a nice way to do this?
It seems you are looking for the mask property. Below is a basic example that you can adjust
.box {
height: 50px;
margin: 10px;
background: linear-gradient(to right, red , blue);
-webkit-mask: linear-gradient(to right,#000 var(--o), #0000 calc(var(--o) + 10%));
}
<div class="box" style="--o: 20%"></div>
<div class="box" style="--o: 50%"></div>
<div class="box" style="--o: 80%"></div>
Related
So, I'm trying to create a zig-zag edge on an element with an inner bevel on the edges, as in this image here.
currently i am managing it by using a border image, but i'd like to know if it's possible with pure css, because the person i am making this site for wants to be able to easily change the color of the element in question, and having a border image makes it not so easy.
i found this tool to create a zig-zag edge using masks (https://css-generators.com/custom-borders/) and that works great, but because it's a mask, i cant add any inset box-shadows to it, which is how i would normally do a bevel. i tried wrapping the element in a parent div and applying a drop-shadow filter to the parent, but unfortunately it seems that the drop shadow filter doesnt allow for inset shadows the way box shadow does.
is there any way to achieve this with pure css, or should i stick to the border-image, and just teach them how to change the color of the png?
I would use that tool for the masking part then add a gradient coloration. Change the red/blue colors like you want and adjust the right 10px to control the depth:
.box {
--s: 60px; /* control the size */
height: 400px;
background:
conic-gradient(from -135deg at right 10px top 50%,#0000 90deg,red 0 225deg,blue 0) 50%/100% var(--s),
purple;
/* from the generator */
--mask: conic-gradient(from -135deg at right,#0000,#000 1deg 89deg,#0000 90deg) 50%/100% var(--s);
-webkit-mask: var(--mask);
mask: var(--mask);
}
<div class="box"></div>
The best way would be to use an SVG image, which is still plain text, easy to edit, and can be styled with CSS. You could even embed the image in the CSS, like so:
border-image: url("data:image/svg+xml;charset=utf-8,<SVG goes here>");
I have a div, with a gray background. within the div i have some text.
I want to blur/smooth it's top and bottom background color, not the background it self just the top and bottom like smoothing it out as you can do in photoshop for example..(top and bottom because the div's width is 100% so only top and bottom).
for example (imagine it's width is 100%):
<div id='this' style='background-color:gray; height: 500px;'></div>
To "blur" a background with a solid color, use a linear gradient.
Example:
#this {
background-image: linear-gradient(rgba(0,0,0,0) 0%, gray 10%, gray 90%, rgba(0,0,0,0);
height: 500px;
}
See <gradient> (MDN)
See linear-gradient() (MDN)
The blue color is cut to the sides and the intermediate part is the part in which the blue color is pure.
Is there no way to know a certain science of what size that area of pure color will be?
As I see the stop is a position that is given to the color but does not say much about how large this area of pure color will be
My interpretation was that the value of the stop was the position in which the color ceased to be pure and began to degrade to the other color.
but that only works if there are only two colors in the gradient
div {
width: 200px;
height: 200px;
background-image: linear-gradient( black 20%, blue 25%, pink 30%);
}
<div>
</div>
I am trying to create a top to bottom fade effect from white to grey in a div box that has content in it. I am not sure what css will create this effect.
The result I want looks something like this image:
https://imgur.com/a/Ts9l0Do
This is just a cropped image of the website but as you can see it goes from a white color at the top to a darker greyish color to the bottom. This is what I want.
Try this css:
div {
height: 400px;
background: linear-gradient(to bottom, white 0%, grey 100%)
}
You can change the 'white' and 'grey' to hex codes or rgba for specific colours and change the height to whatever you need.
How do I fill a div with vertical or horizontal lines? I did this last year, can't find the code and have no idea what to search for other than "fill div with lines" which yields no related results.
Here's a pic to show what I mean:
I really would prefer to do this with pure CSS, if possible.
You should try using a CSS linear-gradient that is oriented horizontally and repeats along the same axis:
div {
background-image: linear-gradient(to left, #c8d9ff 50%, transparent 50%);
background-size: 4px 100%;
}
We only need to specify the middle colour stop (at 50%), because with the 0% and 100% stops ignored the browser's rendering engine will automatically extrapolate the colours on each end from the two middle colour stops. This is the equivalent of the longer (and unnecessary) code:
div {
background-image: linear-gradient(to left, #c8d9ff 0%, #c8d9ff 50%, transparent 50%, transparent 100%);
background-size: 4px 100%;
}
Notes:
You might want to add vendor prefixes for this, since the latest linear-gradient specification might not be supported across all browsers, depending on your user demographic.
You might want to specify a solid background-color for older browsers to fall back to.
See proof-of-concept example here: JSFiddle
Hey you need just lines?? or a small divs inside div?
For horizontal line, you can use following tag.
<hr/>
you could do it with a repeating linear gradient.
https://developer.mozilla.org/en-US/docs/Web/CSS/repeating-linear-gradient
This is one possible solution (jsfiddle: http://jsfiddle.net/nmL78/):
HTML:
<div class="stripe"></div>
CSS:
.stripe{
background-color: blue;
width:100%;
height: 50px;
top:50px;
position: absolute;
}
Adjust the CSS at will...