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);
}
Related
<-- 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. 🚀
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
So I'm trying to get my webpage to have a two tone look, one side plain and the other with a radial gradient.
I currently tried making it into an SVG and that failed horrible but I am not entirely sure how to get a triangle that goes from the top left, bottom left, and top right of the page, while also scaling to the browser size.
When I use the SVG as a background, there is a large white block around the top and bottom, and when I just simply don't use a background and just put in the svg code into the HTML it's so giant and I can't manage to get it to scale.
This photo was something I made in sketch but I am new to frontend and I've just had a rough time getting the angles color.
I can get everything else if I could just get the background to do that :c
No need SVG you can do this with CSS and multiple background:
body {
margin:0;
height:100vh;
background:
linear-gradient(to bottom right,transparent 49.8%,grey 50%),
radial-gradient(circle at top,yellow,black);
}
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%;
}
In trying to finalize the layout for my blog, I am having one issue I cant seem to get past. I have two different backgrounds that I want to use for my blog. One of the backgrounds is used just for the header of the blog. The other background I want to add is for the rest. I have been trying to find a way to get my body background to repeat after so much spacing with little luck.
If there is a way to have a background repeat-y after a certain position that would be perfect. But that doesn't seem possible from my searches. If there is another way to accomplish this, it would be very helpful.
This is the site I am trying to edit.
As you can see, the header has the proper background, but I cant figure a way to get that background everywhere else. For clarification, the background header has a blue background under the home/search buttons, so that is why I cant just have one repeating header.
I just made a few edits to my site, and I got to to look very close to how I want. I did more of a quick fix that is "good enough". I just made the header background repeat, and it looks pretty good for the most part. The only problem with it now is that the blue bar that is part of the header sometimes shows up at the bottom of the screen, which is okay I guess. If anyone has a better solution I would love to hear it.
When you specify "repeat-y" then there is no posibility as far as I know to make the background begin repeating after some coordinate.
However, since you have 2 different backgrounds, you don't need to.
Just specify the non repeating background first, and with the adequate dimensions; it will hide the other
This CSS
.test1 {
background-image: linear-gradient(90deg, black, red), linear-gradient(0deg, white, yellow);
background-position: 0px 0px, 0px 0px;
background-size: 100% 100px, 100% 50px;
background-repeat: no-repeat, repeat-y;
}
produces a black & red top, followed by a repeating pattern of yellow stripes
demo
It is not clear from your example if this is enough; if not you would need another background, between the first and the second, to hide the amount of the repeating background needed