I am trying to make a simple shape in css that has 6 circles inside a rectangle. No problem with the basic shape except that my circles edges are not very smooth. Can anyone help with this as it looks a bit 8bit gamer at the moment
http://bootply.com/98298
You have a slight mistake in the syntax, the color stops should state increasing percentages.
The browser handles 2 stops of 95% - 10% as 95% - 95%; the 10% is not valid.
You can get a non pixelated edge by setting a little zone for the transition, say from 95% to 97%
your code
.panel {
background-color: #E67E22;
border-color: #E67E22;
color: #ffffff;
padding: 10px;
background-image: radial-gradient(closest-side, transparent 95%, #ECF0F1 10%);
background-size: 34% 50%;
min-height: 100px;
}
more correct code
background-image: radial-gradient(closest-side, transparent 95%, #ECF0F1 95%);
or
background-image: radial-gradient(closest-side, transparent 95%, #ECF0F1 97%);
The first case makes a sharp change at 95%; the later makes a smoother change between 95% and 97%.
Note anyway that the syntax that you used is sometimes used, when you want a sharp transition, to somehow indicate "lower than the preceding stop".
Related
I am trying to generate a gradient using one single color and then varying the brightness or some other related variable.
Is it possible to do so ?
Use a back/white layer on the top of your single color as a gradient
html {
background:
linear-gradient(to right,rgba(255,255,255,0.5),rgba(0,0,0,0.5)),
red; /* here is your single color */
}
yes you can by use "transparent" as a color
background: linear-gradient(transparent, #9198e5);
You can use alpha channel for this purpose. Consider color "#428383":
div {
background-color: #428383; /* for browsers without gradient support */
background: linear-gradient(#42838344, #428383ff);
width: 100px;
height: 100px;
}
<div></div>
You can use RGBA
background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(2,0,36,0.3) 100%);
0.3 will dim the color
If you want to add stop points at 0%, 30%, 100% with three different brightness
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(2,0,36,0.4) 30%, rgba(2,0,36,1) 100%);
If you want to vary brightness or saturation of a single color, you may be better of using hsl() instead of hex or rgb values:
.gradient {
width: 200px;
height: 100px;
background: linear-gradient(hsl(193,82%,56%), hsl(193,82%,26%));
}
<div class="gradient"></div>
HSL stands for Hue, Saturation and lightness or luminance and is just another way of describing a color. This way you can easily alter saturation and brightness without actually altering the colors hue. Read more here: https://en.wikipedia.org/wiki/HSL_and_HSV
I am trying to create a diagonal background that is mostly white and has an orange strip on the end using SCSS / CSS. I have this working on most browsers using linear-gradient, but as always, IE is messing up and behaving weirdly.
Here's a pen of what I'm doing and the SCSS that goes with it: https://codepen.io/WDACDavy/pen/eyzRgq
$orange: #f25b2e;
$white: #FFFFFF;
body {
background: #EEEEEE;
}
.slash {
width: 100%;
height: 500px;
background: linear-gradient(162deg, $white 0%, $white calc(50% - 5px), $orange calc(50% - 4px), $orange calc(50% + 4px), transparent calc(50% + 5px), transparent);
}
The HTML body is simply a <div class="slash"></div> element.
This actually WORKS in the pen until I inspect it, then it gets all blurry.
Blurry gradient
Any ideas?
EDIT: To be clear, the above code is NOT working in IE11 on Windows 7. It appears blurry like in the example picture above. If you inspect the codepen you will see what I mean.
I have created a polka dotted background in pure CSS via:
.polka-gr{
background-image:radial-gradient(#FAFFB3 20%, transparent 0), radial-gradient(#F1C3CB 20%, transparent 0);
background-size: 30px 30px;
background-position: 0 0, 15px 15px;
}
<div class="polka-gr" style="background-color:#77FFD1;width:600px;height:200px;></div>
As you can see, the background color is a greenish shade (of hex value #77FFD1).
Some of the clients this code is being served to do not support radial-gradient (e.g. those using Opera Mini browser). All such clients currently fall back to a plain #77FFD1 background without polka dots. Fair enough.
But is there any pure CSS way to get these non-supporting browsers to fall back to a different color entirely, e.g. #FFFF99?
Supporting browsers should still see the greenish background-color (#77FFD1) with polka dots.
Is such an arrangement possible? If so, an illustrative example would be great.
.polka-gr{
background: yellow;
}
#supports (background: radial-gradient(#F1C3CB 20%, transparent 0)) {
.polka-gr{
background-image:radial-gradient(#FAFFB3 20%, transparent 0), radial-gradient(#F1C3CB 20%, transparent 0);
background-color:#77FFD1;
background-size: 30px 30px;
background-position: 0 0, 15px 15px;
}
}
<div class="polka-gr" style="width:600px;height:200px;></div>
To target different browsers you can use #supports
https://developer.mozilla.org/en-US/docs/Web/CSS/%40supports
In your case:
#supports (background: radial-gradient(white, black)) {
/* relevant styles here */
}
I have a really simple CSS radial gradient, which looks significantly different in different in Safari and others:
<style>
body {
background: #000;
}
div {
height: 200px;
width: 200px;
background-image: radial-gradient(100px, #1493a4 0%, transparent 100%);
}
</style>
<div></div>
Any ideas, how I could make them all look like the Safari version?
Safari Firefox
Fiddle: https://jsfiddle.net/2234zy6o/3/
I finally found a simple solution: Safari needs an own style:
background-image: -webkit-radial-gradient(#1493a4, transparent);
Just make sure to add it after the standard definition, other browsers then use the standard one and ignore the -webkit one, while Safari sees the first but then finds -webkit and ignores the standard.
But it's not quite the same, nevertheless. So I did some 'interpolation' and added some stops:
background-image: -webkit-radial-gradient(100px,
#1493a4 0%,
rgba(20,147,164,0.4) 40%,
rgba(20,147,164,0.2) 55%,
transparent 100%
);
It's still not the same but quite similar - at least I can live with it.
This sass snippet:
$red: #f00
$lightred: lighten($red, 50%)
body
background: $lightred
Is parsed to:
body {
background: white; }
If you instead do 45% instead of 50%, it seems to work as expected:
$lightred2: lighten($red, 45%)
...
background-color: #ffe5e5
Why is this turning into white instead of the expected 50% of red?
You can see it in action here http://tinkerbin.com/OefelPoi
(Note - the save function seems to have a bug, on the css area, select Sass Old Syntax again, and rerun)
Update -
Ends up what I wanted was to mix in white with the original color to get a tinted shade:
mix($color,white, 10%)
Because lighten function is described on HSL colors and your red color #f90 is translated as hsl(0, 100%, 50%)
so lighten($lightred, 50%) is equal to hsl(0, 0, 100%), or white