The following is a minimal (ish) example in which a chequered gradient fill pattern is glitchy in Firefox (version 74) i.e. it is not pixel perfect. There are line artefacts. Why is this? Is that normal? Is there a fix, other than using an image for the background?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width" />
<style>
.r{width:20px;height:20px;background:white;float:left;}
.w{overflow:hidden;}
#p75{
width:80px;
height:20px;
background-position:0px 0px,10px 10px;
background-size:20px 20px;
background-image:linear-gradient(45deg,#ccc 25%,transparent 25%,transparent 75%,#ccc 75%,#ccc 100%),
linear-gradient(45deg,#ccc 25%,white 25%,white 75%,#ccc 75%,#ccc 100%);
float:left;
}
</style>
</head>
<body>
<div class="w">
<div class="r">0</div>
<div id="p75"></div>
</div>
</body>
Rotating gradients have always had that problem for more on that check this question
One way to fix the issue is to not use angles at all, and make use of repeating gradients.
html {
height: 100%;
background:
repeating-linear-gradient(90deg, #fff 0px 10px, transparent 10px 20px),
repeating-linear-gradient(0deg, #000 0px 10px, #fff 10px 20px);
background-blend-mode: difference;
}
Edit: thanks to #Temani Afif without repeating gradient.
html {
height: 100%;
background:
linear-gradient(90deg, #fff 50%, transparent 0) 0 0/20px 100%,
linear-gradient(0deg, #000 50%, #fff 0) 0 0/100% 20px;
background-blend-mode: difference;
}
you can overlap them a tiny bit , here i added 0.1% to the color start/stop setup , chrome use to be the one.
.r {
width: 20px;
height: 20px;
background: white;
float: left;
}
.w {
overflow: hidden;
}
#p75,
.p75 {
width: 80px;
height: 20px;
background-position: 0px 0px, 10px 10px;
background-size: 20px 20px;
background-image: linear-gradient(45deg, #ccc 25%, transparent 25.1%, transparent 75%, #ccc 75.1%, #ccc 100%), linear-gradient(45deg, #ccc 25%, white 25.1%, white 75%, #ccc 75.1%, #ccc 100%);
float: left;
}
.p75 {
margin:0 1em 1em;
height: 200px;
width:100%;
background-size: 19px 19px;
<div class="w">
<div class="r">0</div>
<div id="p75"></div>
</div>
<p>or decrease background-size of 1px</p>
<div class="p75"></div>
Another solution is to set the whole pattern from triangles and pretune values via css custom properties :
div {
--bgsize: 40;
--sq1: 0 0;
--sq2: calc(var(--bgsize) / 2 * 1px) calc(var(--bgsize) / 2 * 1px);
--sq3: var(--sq2);
--sq4: calc(var(--bgsize) * 1px ) 0px;
}
#a20:checked ~ div { --bgsize: 20; }
#a50:checked ~ div { --bgsize: 50; }
#a150:checked~ div { --bgsize: 150;}
#a100:checked~ div { --bgsize: 100;}
div {
height:200px;
background:
linear-gradient(45deg, gray 25% , transparent 26%),
linear-gradient(225deg, gray 25% , transparent 26%),
linear-gradient(45deg, gray 25% , transparent 26%),
linear-gradient(225deg, gray 25% , transparent 26%)
;
background-position:
var(--sq1) ,
var(--sq2) ,
var(--sq3) ,
var(--sq4);
background-size: calc(var(--bgsize) * 1px) calc(var(--bgsize) * 1px );
}
reset bg-size:<br>
<label for=a20>20px</label><input type=radio name=test id=a20>
<label for=a100>100px</label><input type=radio name=test id=a100>
<label for=a150>150px</label><input type=radio name=test id=a150>
<div></div>
demo with option to reset --bgsize and color
https://codepen.io/gc-nomade/pen/GRJGXwv
Related
I want to create a background-image with a gradient effect like below, how can I implement it?
And here is what I'm trying to do, and abviously I failed.
background:
radial-gradient(circle at 50% 0%,#060319 30%,#110844 ,#7226aa ,#fcb6f7 40%,transparent 50%),
radial-gradient(circle at 50% 100%,#060319 30%,#110844 ,#7226aa ,#fcb6f7 40%,transparent 50%);
body,
html,
* {
margin: 0;
padding: 0;
}
/* prettier-ignore */
body {
height: 100vh;
color: #fff;
background:
radial-gradient(circle at 50% 0%,#060319 30%,#110844 ,#7226aa ,#fcb6f7 40%,transparent 50%),
radial-gradient(circle at 50% 100%,#060319 30%,#110844 ,#7226aa ,#fcb6f7 40%,transparent 50%);
background-color: #fcb6f7;
}
.text-box {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 1px solid red;
height: 100vh;
}
(codepen)
The closest i can get, change the gradient to
background:
radial-gradient(circle closest-corner at 50% 0%, rgba(6 3 25 / 1) 105%, rgba(114 38 170 / 1) 130%, transparent 200%),
radial-gradient(circle closest-corner at 50% 100%, rgba(6 3 25 / 1) 105%, rgba(114 38 170 / 1) 130%, transparent 200%);
You can use Hex, I changed it to RGBA for experiment.
But you really need to have a vertical container to the effect to show correctly, else it will combine and look weird.
I'm trying to create a gradient that simply shows a red line every x%.
When I start generating more lines the red stripes seems to start fading into white.
the .four-stripes selector gives a nice result, but when I add one more red line, like in more-stripes everything starts to get blurry...
See codepen for an example:
div {
width: 1200px;
height: 20px;
}
.four-stripes {
background: linear-gradient(90deg,red 0.00% 0.27%,transparent 0.27% 1.92%,red 1.92% 2.19%,transparent 2.19% 3.84%,red 3.84% 4.11%,transparent 4.11% 5.75%,red 5.75% 6.03%,transparent 6.03% 100%);
}
.more-stripes {
background: linear-gradient(90deg,red 0.00% 0.27%,transparent 0.27% 1.92%,red 1.92% 2.19%,transparent 2.19% 3.84%,red 3.84% 4.11%,transparent 4.11% 5.75%,red 5.75% 6.03%,transparent 6.03% 7.67%,red 7.67% 7.95%,transparent 7.95% 100%)
}
<div>
<div class="four-stripes"></div>
<div class="more-stripes"></div>
</div>
Using "repeating-linear-gradient" may help.
div {
width: 1200px;
height: 20px;
}
.more-stripes {
background: repeating-linear-gradient(
90deg,
red,
red 5px,
transparent 5px,
transparent 20px
);
}
<div>
<div class="more-stripes"></div>
</div>
make the gradient easy and adjust the background-size.
div {
height: 20px;
margin:5px;
}
.four-stripes {
background:
linear-gradient(to right,red 5px,transparent 0 100%)
left/25% 100%;
}
.more-stripes {
background:
linear-gradient(to right,red 5px,transparent 0 100%)
left/15% 100%;
}
<div>
<div class="four-stripes"></div>
<div class="more-stripes"></div>
</div>
Or like this if you want to keep a fixed distance between stripes:
div {
height: 20px;
margin:5px;
}
.four-stripes {
background:
repeating-linear-gradient(to right,red 0 5px,transparent 0 40px)
left/calc(4*40px) 100% no-repeat;
}
.more-stripes {
background:
repeating-linear-gradient(to right,red 0 5px,transparent 0 40px)
left/calc(6*40px) 100% no-repeat;
}
<div>
<div class="four-stripes"></div>
<div class="more-stripes"></div>
</div>
I am tried to do something in CSS, but I failed miserably.This is what I got so far:
#stripes {
height:90vh;
background-image: linear-gradient(-45deg, black 25%, transparent 25%, transparent 50%, black 50%, black 75%, transparent 75%, transparent);
background-size:4px 4px;
}
<div id="stripes"></div>
As you can see, the "black-white-ratio" is always the same. So you got a 1px stripe, then a 1px gap, 1px stripe, 1px gap,...But what I am trying to achieve, is that there are like 5px space between the stripes.I tried changing the percentages, but that doesn't result in what I try to do either.I'm sure this is possible somehow. Does anyone know how? Thanks for your help!
Something like this using repeating-linear-gradient
#stripes {
height: 100vh;
background: repeating-linear-gradient( -45deg, transparent, transparent 5px, /* gap */
black 6px, /* overall width incluing gap */
black 6px);
}
* {
margin: 0;
padding: 0;
}
<div id="stripes"></div>
I would like to keep a CSS3 arrow on the same horizontal plane as some text. In other words, I would like all this to stay on the same horizontal plane ...
<div style="display:block">
<div id="downArrow" class="downArrow arrow"></div>
- 1.5780377548310014 / -0.01013426671732404 %
</div>
I thought "display:block" would do the trick but apparently not -- https://jsfiddle.net/6m7vegwc/ . Only problem is the CSS for the arrow requires an "after"
.downArrow:after {
background: linear-gradient(120deg, transparent 63%, #fff 63%),
linear-gradient(-120deg, transparent 63%, #fff 63%),
linear-gradient(to top, #ccc, #000);
}
and I think this is throwing things off. Anyway, how can I keep my arrow on the same horizontal plane as the text?
The simplest fix would be to make them all display inline-block.
#oneDayChange > div {
display: inline-block;
vertical-align: middle;
}
.arrow {
display: inline-block;
vertical-align: middle;
}
.arrow:after {
height: 50px;
width: 50px;
display: inline-block;
content: '';
}
.upArrow:after {
background: linear-gradient(60deg, transparent 63%, #fff 63%), linear-gradient(-60deg, transparent 63%, #fff 63%), linear-gradient(to bottom, #ccc, #000);
}
.downArrow:after {
background: linear-gradient(120deg, transparent 63%, #fff 63%), linear-gradient(-120deg, transparent 63%, #fff 63%), linear-gradient(to top, #ccc, #000);
}
<div id="oneDayChange">
One day change
<div>
<div id="downArrow" class="downArrow arrow"></div>
- 1.5780377548310014 / -0.01013426671732404 %
</div>
</div>
I believe you are looking for display:inline alternatively use a instead of a as inline is its normal state.
Here is a guide that explains it in full https://www.w3schools.com/css/css_display_visibility.asp
What you are looking for is display: inline but you could simplify your example by just swapping the <div>s against <span>s because <span> tags are by default display: inline
If you want to have everything more steady and centered, you can also use display: flex which takes it's children and spreads them horizontally and stretches them vertically by default.
#oneDayChange {
display: flex;
justify-content: flex-start; /* align to the left */
align-items: center; /* center content vertically */
}
.arrow:after {
height:50px;
width:50px;
display: inline-block;
content:'';
}
.upArrow:after {
background: linear-gradient(60deg, transparent 63%, #fff 63%),
linear-gradient(-60deg, transparent 63%, #fff 63%),
linear-gradient(to bottom, #ccc, #000);
}
.downArrow:after {
background: linear-gradient(120deg, transparent 63%, #fff 63%),
linear-gradient(-120deg, transparent 63%, #fff 63%),
linear-gradient(to top, #ccc, #000);
}
<div id="oneDayChange">
One day change
<span id="downArrow" class="downArrow arrow"></span>
- 1.5780377548310014 / -0.01013426671732404 %
</div>
This can be done with display: flex
<div id="oneDayChange">
...
<div style="display:flex; flex-direction: row;">
...
</div>
Read more about flexbox (one of the better css innovations in recent years) here
Here is a screenshot of what I'm working on -
On the left is how it normally looks, and on the right is how it looks when I add non-breaking space. I want it to look like the image on the right, but I have to use an absurd about of non-breaking white space to achieve it and I want to find an alternative.
Here is the CSS I use to create the bar graphs -
.bar { width: 300px; border: 2px solid #000;
border-radius: 14px;
-webkit-border-radius: 14px;
-moz-border-radius: 14px;
}
.percentage { background: #394992; color: #fff;
background-image: linear-gradient(left , #000000 4%, #394A92 51%);
background-image: -o-linear-gradient(left , #000000 4%, #394A92 51%);
background-image: -moz-linear-gradient(left , #000000 4%, #394A92 51%);
background-image: -webkit-linear-gradient(left , #000000 4%, #394A92 51%);
background-image: -ms-linear-gradient(left , #000000 4%, #394A92 51%);
background-image: -webkit-gradient(
linear,
left bottom,
right bottom,
color-stop(0.04, #000000),
color-stop(0.51, #394A92)
);
And the html -
<div class="bar">
<div class="percentage" style="width:92%">Striking Strength: 92</div>
So I want to know if there's a way to place the number where I want it to be without an excessive amount of non-breaking space.
You can place the number into a span and float it to the right:
<div class="percentage" style="width:92%">Striking Strength: <span>92</span></div>
.percentage span {
float: right;
padding-right: 0.25em; /* some spacing */
}