I know it's possible to draw this background using only CSS (so without making use of image files). I'm curious on how I can do this. I've found a lot of information about making gradients and such with CSS3 on the web, but I've never found any guide that explains how to create something more advanced than this image as background in CSS. Any ideas on how to get started?
Not my fiddle, but I found this: http://jsfiddle.net/leaverou/RtGsM/
body {
background:
-moz-radial-gradient(white 15%, transparent 16%),
-moz-radial-gradient(white 15%, transparent 16%),
black;
background:
-webkit-radial-gradient(white 15%, transparent 16%),
-webkit-radial-gradient(white 15%, transparent 16%),
black;
background-position: 0 0, 80px 80px;
-webkit-background-size:160px 160px;
-moz-background-size:160px 160px;
background-size:160px 160px;
}
Related
I applied a css code to create a shadow on the initial part of the page (I have a social network and I would like to create the type of shadow created by Facebook on user profile pages, just to get an idea).
Everything would seem ok for some pages but not for others. That is, for short pages, the shading might be acceptable, but for long pages, the shading increases as the page length increases, almost encroaching on the page. I tried to set specific height values but without success, indeed if I set a "height" value an unwanted dividing line is created.
The code I'm using is as follows:
background: black;
background: -moz-linear-gradient(top, black 0%, #f0f2f5 10%);
background: -webkit-linear-gradient(top, black 0%, #f0f2f5 10%);
background: linear-gradient(to bottom, black 0%, #f0f2f5 10%);
Some idea?
Thank you!
If you use pixel values instead of percentage values you can keep the gradient height uniform.
div {
background: linear-gradient(to bottom, black 0px, #f0f2f5 50px);
width: 100px;
}
body {
display: flex;
}
<div style="height: 100px;"></div>
<div style="height: 400px;"></div>
I want to add radial gradient to a photo, starting from the top right part of the image. I have tried a lot of combinations, here is what I managed to do:
background: radial-gradient(circle at top right, #ffffff 0%, #000000 100%), url("../images/banner-image.png");
My problem is: it doesn't show my photo. Any ideas what could be wrong?
You're using solid colors rather than colors with transparency in order to see the image below.
Use rgba colors instead
body {
background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.25), blue), url(http://www.fillmurray.com/284/196);
height: 100vh;
}
In this example I have a gradient of 2 colors, alignd to right.
background: linear-gradient(to right, #c4d7e6 50%, #66a5ad 50%, #66a5ad 50%);
Is there any way I can have more than 2 colors? For example may I add red color on the right of the second one?
Sure, just add color stops at every (100/numColors)%
div {
background:linear-gradient(to right, #c4d7e6 0, #c4d7e6 33%, #66a5ad 33%, #66a5ad 66%, #ff0000 66%, #ff0000 100%);
width: 100%;
height:64px;
}
<div></div>
You can use multiply background, like this:
background: linear-gradient(to right, #000, #66a5ad, #66a5ad, red);
Also see this codepen for much combinations.
Late answer but no doubt it will help someone else in the future...
I have found a good website called CSS Gradient that generates your gradient color with full control and allows you to copy the CSS code.
This gradient was generated by this website:
div{
width: 100%;
height: 200px;
background: rgb(255,0,0);
background: linear-gradient(90deg, rgba(255,0,0,1) 0%, rgba(30,250,0,1) 49%, rgba(4,0,255,1) 100%);
<div>
</div>
I want to create a CSS background for a HTML5 section and it should look like this:
css triangle:
I have already researched and tried stuff like transform skew or border manipulation. But i can t really achieve the view like i want to.
Is any CSS pro here ? Would be nice.
ps - if a bootstrap solution exists would also help me.
Greets
Tobias
Use a linear-gradient
* {
margin: 0;
psdding: 0;
}
div {
height: 100vh;
width: 100vw;
background-color: blue;
background-image: linear-gradient(10deg, lightblue 50%, transparent 50%), linear-gradient(-60deg, brown 30%, transparent 30%);
}
<div>
</div>
I want to make a simple bar with two different colors. What I want is for the 1st color to stop and the second color to start with no transition or gradient. I know it sounds dumb, gradient with no gradient!
CSS
-webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 60px,rgba(27,151,143,1) 60px,rgba(27,151,143,1) 60px,rgba(27,151,143,1) 100%);
And it produces very close results, but where the two colors meet it gets blurry because it is still doing the transition/gradient thing.
Is there a way to do perfect stops, if that's even the term?
This is my favorite gradient generator tool for CSS. There is a visual editor like photoshop and it spits out the CSS for you to copy and paste.
http://www.colorzilla.com/gradient-editor/
shortly it should be :
linear-gradient(
to top,
rgba(255,255,255,1) 60px,
rgba( 27,151,143,1) 60px
);
http://jsfiddle.net/b4j35/1/
and for chrome, it needs to overloap to avoid the blur defaut thingy thing :
http://jsfiddle.net/b4j35/2/
div.grad {
height: 100px;
background: linear-gradient(
to top,
rgba(255,255,255,1) 61px,
rgba( 27,151,143,1) 59px
);
border:solid;
}
What you have is already a no-transition gradient, since the end of the white and the beginning of the greenish are both at 60px. So, you can not do it better this way.
The way that is left is the multiple-background way:
div.grad {
height: 100px;
background: linear-gradient(to top, white, white), rgb(27,151,143);
background-size: 100% 60px;
background-position: left top;
background-repeat: no-repeat;
}
fiddle
By the way, I have changed the linear-gradient to the prefix-less version, it works like this in most modern browsers