<-- see image with imperfect pixel here.
When using skew in CSS I get a imperfect pixel where the skewed grey border meets the grey bottom border. Looks like some sort of outline or box-shadow. But using outline:0;box-shadow:0; does not effect it. Does anyone know how I can solve this? Cheers and thanks in advance! ✌️
Edit, relevant code: https://jsfiddle.net/acnodrfe/
The blue background color of that element was causing this. The grey border did get a little bit of blue from the bg with it. Changing the background with: background: linear-gradient(270deg, #0b19ba 0%, #0b19ba 99%, #cccccc 100%); solved the problem. Because it gives the edge close to that border a grey value.
PS: This was only possible because I have the light blue element on top of it so you don't see the gradient. Be aware of that if someone might need and find this later on in time. 🚀
Related
I want to create a background with grain effect and using radial gradient. Is that possible to do with css "background" property only? Can you please help me with it? It should look something like that, just without the picture on the right, thanks! (cant post pics here, because I need more reputation points)
You can use the background-image radial gradient property.
For example
{
background-image: radial-gradient(red, green, blue)
}
I'm looking for a glass effect with a linear-gradient like in . I've tried several effect and the one that most resembles is:
background: linear-gradient(#1f87ab, #004961 50%, #004961 90%);
I've also looked at:
Creating a Two-Color Sharp Gradient on Text With CSS3
Horizontal sharp background gradient with specific length of first color
But they didn't help
I solved using
linear-gradient(#2396bf, #0d5b77 40%, #004961 3%, #004961);
And it even looks a little bit better
I have a school project where i need to make a exact copy of a website.
The background is a bit tricky because i need to (what i think) add a radial ellipse but then with no sides or bottom, only the top.
when i try to make a ellipse i get a oval which covers all four sides (obviously) but i dont know hot to apply it to the top only.
can anyone help me out?
this is what is is supposed to look like
PLease pay attention to the background only
I already tried a ellipse and a normal radial gradient but i does not function how i want it to be.
this is the code i have
background-image: radial-gradient(ellipse, white, lightgrey, lightgrey,
#1b1b2e
#1b1b2e);
adjust your code like below:
html {
min-height:100%;
background-image: radial-gradient(150% 150% at bottom center, white, lightgrey, #1b1b2e, #1b1b2e);
}
I'm trying to make a grid background out of dots. I can't just use an image, because I need everything to be configurable:
background color
dot color
dot size
space between dots
Unless there's a better solution, I think the only way I can achieve this is with pure CSS. I've done some looking around and so far the closest thing i've found is using a radial-gradient. I'm having trouble though; I haven't been able to find a solution that lets me configure both the dot size and the space between dots while keeping a circle shape. I've gotten close, but than my dots end up looking like diamonds instead of circles. Here's what i've come up with so far:
https://jsfiddle.net/yzpuydtn/
body {
background-image: radial-gradient(black 2px, white 2px);
background-size:40px 40px;
}
Does anyone have any suggestions? Initially i'd like to have my dots be 2px x 2px and 40 px apart. Is there a better way to do this, or am I just configuring my gradient incorrectly? I think i'm close, but depending on how I zoom they look like either circles, diamonds or squares and I need it to always look like circles.
Using %: https://jsfiddle.net/yzpuydtn/11/
Using vw: http://jsfiddle.net/otwhu0uk/2/
Here is an example. I really hope this helps you.
body {
/* Controls size of dot */
background-image: radial-gradient(black 5%, white 0%);
/* Controls Spacing, First value will scale width, second, height between dots */
background-size:5% 10%;
}
Is it possible to create a rect, that has gradient fill from black top to white bottom with gradient border from white top to black bottom?
Regards,
It's also hypothetically possible using css gradients for the background-image and border image. I still suck at getting the border-image syntax correct but here's a half-figured out fiddle with a gradient for a border-image: http://jsfiddle.net/y8uFu/
You can dig through the spec for border-image here: http://www.w3.org/TR/css3-background/#border-images
I'd love to see if someone can figure it out for the border-image.
Yes, this is most definitely possible. "Canvas" is what you are looking for.
Here are a few resourcses to get you started:
http://net.tutsplus.com/tutorials/javascript-ajax/canvas-from-scratch-introducing-canvas/
http://diveintohtml5.ep.io/canvas.html#divingin
http://www.html5canvastutorials.com/tutorials/html5-canvas-linear-gradients/
http://dev.opera.com/articles/view/html-5-canvas-the-basics/#gradients