I am attempting to add a radial-gradient background to my header. I am using radial-gradient to add a curve effect to the bottom of the header. I would like to have an effect where the color from the top to the header is lighter which gets darker farther down the container. Currently, my header has the curve I desire but the color shown is 1 solid color instead of a fade.
Can I achieve this look using radial-gradient?
Photo of the desired look:
Code snippet of CSS:
<html>
<head>
<style>
#container {
height: 200px;
width: 400px;
background: radial-gradient(100% 95% at top,#E8F3F9 100%,#0000 );
border: 1px dotted wheat;
}
</style>
</head>
<body>
<div id="container"></div>
</body>
</html>
I've attempted to add a lighter hex color #fefefe to the at top piece of the background CSS but that ended up turning the entire header 1 color.
background: radial-gradient(#fefefe 100% 95% at top,#E8F3F9 100%,#0000 );
move the gradient to mask then use another one as background:
#container {
height: 200px;
width: 400px;
-webkit-mask: radial-gradient(100% 95% at top, #000 100%, #0000);
mask: radial-gradient(100% 95% at top, #000 100%, #0000);
background: linear-gradient(#0000,#E8F3F9);
}
<div id="container"></div>
Basically you are trying to create a hard line using gradients. Here you can find some uses of gradients including hard lines Using CSS gradients.
To create a hard line you have to define the same position for two colors.
In this case it look like the following code.
<html>
<head>
<style>
#container {
height: 200px;
width: 400px;
background: radial-gradient(100% 95% at top,#ffffff 5%, #E8F3F9 100%,#ffffff 100% );
border: 1px dotted wheat;
}
</style>
</head>
<body>
<div id="container"></div>
</body>
</html>
where the #E8F3F9 and #ffffff are at the 100% position.
I added #ffffff 5% to create the top light effect.
Related
I am trying to create a CSS gradiant based vertical progress bar as shown in the figure.
Sample Image
I want to achieve the followings:
It should only have two colors.
The gradient should be a dotted one (similar to dotted border).
I should be able to set the height of each color. For example, if I want the 30% of the height of the gradient to be gray, the rest of the 70% should be set to green. And there shouldn't be a spread of the color(not sure of the right term).
Any clues on how this can be achieved via CSS only.
I have tried the following code with no success, just pasting it for reference.
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 700px;
width: 10px;
background-image: linear-gradient(180deg, transparent, transparent 50%, #fff 50%, #fff 50%), linear-gradient(180deg, orange 25%, black 75%);
background-size: 100% 20px, 100% 700px;
}
</style>
</head>
<body>
<h1>Linear Gradient - Top to Bottom</h1>
<p>This linear gradient starts red at the top, transitioning to yellow at the bottom:</p>
<div id="grad1"></div>
</body>
</html>
You could paint the vertical line n% in lime and then 100% - n% in gray.
Then overlay that with a repeating linear gradient of transparent and white.
.line {
height: 700px;
width: 10px;
background-image: linear-gradient(transparent 0 50%, white 50% 100%), linear-gradient(lime 0 71%, gray 71% 100%);
background-size: 100% 10%, 100% 100%;
}
<div class="line"></div>
You can use mask and gradient like below:
.line {
height: 300px;
width: 20px;
-webkit-mask: radial-gradient(circle closest-side, #000 96%, #0000) 0 0/100% 10%;
background: linear-gradient(red 60%, blue 0);
}
<div class="line"></div>
I would like to know if it is possible to create a background like this in CSS3.
The background should span a header div and the gradient should go from white to black independent of the screen width (always white on the left side and black on the right side).
Reason for not using the image is that it takes longer to load and that I can't get it to resize it's width when making the browser smaller than 1920px (the width of the image).
Have tried linear-gradient but I can't get it to work...
Regards,
Jens
If you also want the black bar at the top you should give dimensions to the background, stop the repeating and also position it where you want (treat it like a normal background image)
div {
background-color: black;
background-image: linear-gradient(to right, white, black);
background-repeat:no-repeat;
background-size:100% 20px; /*full width, 20px height*/
background-position:0 100%; /*gradient at bottom*/
/*just to give size to demo*/
min-height:50px;
}
<div></div>
Here's some CSS for you:
#grad {
background: gray; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(left, white , black); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, white, black); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, white, black); /* For Firefox 3.6 to 15 */
background: linear-gradient(to right, white , black); /* Standard syntax */
}
Source: http://www.w3schools.com/css/css3_gradients.asp
I know the OP's question was answered. But I'll comment here anyway to deliver some more information to create a really more "complex" background.
First is you really can create multiple backgrounds stack on each other:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds
Second is you can determine position, size, etc,... of a background-image. And here the concise syntax for it: https://www.w3schools.com/cssref/css3_pr_background.asp.
Why background-image? A basic (and important) theory of background in CSS is: A background of an element can have only 1 background-color, and multiple background-images sit on top of it (even if the background-color is declared after background-image, background-color will be still placed below the background-images), and you can resize, reposition those background-images. And an important thing is linear-gradient is count as a background-image, not background-color. The 2 links above do give all detailed information about it.
Here is a quick demo on a "more complex" background from the OP question using only 1 div HTML:
div {
background:
linear-gradient(to right, white, black) 0 100%/100% 20px no-repeat,
linear-gradient(to left, white, black) 0 0/100% 20px no-repeat,
black;
height: 100px;
}
<div></div>
I'm inspired writing this long comment because from a tutorial
https://levelup.gitconnected.com/how-to-implement-netflix-slider-with-react-and-hooks-bdb9b99d1ce4, there's a section from it there're verbose hacks in HTML and CSS to achieve what I'm able to do within just a single line of CSS background, and I think it's cool to share, isn't it?
/* simpler */
.box {
width: 100%;
height: 100px;
background: linear-gradient(to right,black 0%,black 30%,transparent 75%,transparent 100%), green;
}
/* more complex */
.content {
height: 100px;
position: relative;
}
.background {
display: flex;
height: 100%;
}
.left {
background: black;
width: 30%;
position: relative;
}
.left:before {
content: '';
position: absolute;
background-image: linear-gradient(to right,#000,transparent);
top: 0;
bottom: 0;
left: 100%;
width: 275px;
}
.right {
background: green;
width: 70%;
}
.content-container {
color: white;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 30px
}
<!-- simpler -->
<div class="box">
<div class="content-container">content here...</div>
</div>
<hr>
<!-- more complex -->
<div class="content">
<div class="background">
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="content-container">content here...</div>
</div>
I'm looking for easy way (if at all possible) to create background image from this image: http://postimg.org/image/x1kwb0uq3/
There are two horizontal lines and I need one to be at the top of the page all the time and other at the bottom and the thing is that I'm not sure what is the best practise to create such background. Should I slice this horizontal line from image or should I create it programatically using css rules. Because I'm stuck at how many different techniques there are to achieve the same thing and it really confuses me, because I want to write short, clean understandable code and code that is good performance wise.
I thought to do it programatically is a good choice, but still I think that's a lot of code for such simple thing.
Here's what it looks like:
HTML
<div id="divs-top">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
<div id="div5"></div>
<div id="div6"></div>
<div id="div7"></div>
<div id="div8"></div>
<div id="div9"></div>
</div>
<div id="divs-bottom">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
<div id="div5"></div>
<div id="div6"></div>
<div id="div7"></div>
<div id="div8"></div>
<div id="div9"></div>
CSS:
body {
margin: 0;
padding: 0;
}
#divs-top {
position: fixed;
top: 0;
width: 100%;
}
#divs-bottom {
position: fixed;
bottom: 0;
width: 100%;
}
#div1, #div2, #div3,
#div4, #div5, #div6,
#div7, #div8, #div9 {
width: 11.11%;
height: 5px;
float: left;
}
#div1, #div6 {
background-color: #e44b02;
}
#div2, #div7 {
background-color: #60cb34;
}
#div3, #div8 {
background-color: #003f28;
}
#div4, #div9 {
background-color: #ca000d;
}
#div5 {
background-color: #dbff26;
}
As you see I have to create selector for each div and horizontal line has 9 colors that's why I created 9 divs.
By using images it looks like an old technique. Other technique that I'm thinking is to make one div and apply some css styles so that div has border with horizontal gradients but I'm not sure how to do it properly.
What is the standard to do it properly? Any suggestions would be really appreciated as long as you provide a way that is clean and short in code if it's possible.
You could use linear-gradient with color stops to create bands like that. The syntax is simple (explained in inline code comments below):
background-image: linear-gradient(to right, /* gradient from left to right */
#f00, #f00 25%, /* start with red, end with red at 25% */
#00f 25%, #00f 50%, /* blue at 25% continue up to 50% */
#0f0 50%, #0f0 75%, /* green at 50% continue up to 75% */
#000 75%, #000 100% /* black at 75% continue up to 100% */
);
To keep it simple, in the example below there are two divs for the bands and a middle div for the content. You can then take it to next level by using ::before and ::after pseudo-elements on the content and eliminate separate divs for the bands.
Example Fiddle: http://jsfiddle.net/abhitalks/nve9v0mn/1/
Example Snippet:
div.line {
height: 6px;
background-image: linear-gradient(to right,
#f00, #f00 25%,
#00f 25%, #00f 50%,
#0f0 50%, #0f0 75%,
#000 75%, #000 100%
);
}
div.content {
min-height: 60vh;
background-color: #eee;
}
<div class="line"></div>
<div class="content"></div>
<div class="line"></div>
Edit:
If you want to support IE < 9, then the easiest would be to take a screenshot in a modern browser and use that image as a fallback. Remember though that background shorthand properties do not work well with IE<9 for all properties.
Your CSS would look something like this:
div.line {
height: 6px;
background: url('http://i.imgur.com/HTLnBfj.png') no-repeat;
background-size: 100%;
background-image: linear-gradient(to right,
...
);
}
Example Fiddle 2: https://jsfiddle.net/abhitalks/nve9v0mn/4/embedded/result/
You can use 1px single img and repeat in background of divs-top for top bar and same thing for bottom div.
You could use CSS gradients to get those colored borders. Upload an image containing only one colored border to http://www.colorzilla.com/gradient-editor/ (import image) and this service will output a CSS gradient for you.
When using background gradients you also only need one HTML element – the one that should have top and bottom borders (e.g. the body element). The following examples uses pseudo elements on the body tag to create those borders. The used gradient is not like yours, but you can click it yourself using the linked gradient editor.
body:before,
body:after {
content: '';
position: fixed;
left: 0;
width: 100%;
height: .5em;
}
body:before {
top: 0;
background: linear-gradient(to right, rgba(228,245,252,1) 0%,rgba(191,232,249,1) 50%,rgba(159,216,239,1) 51%,rgba(42,176,237,1) 100%);
}
body:after {
bottom: 0;
background: linear-gradient(to right, rgba(228,245,252,1) 0%,rgba(191,232,249,1) 50%,rgba(159,216,239,1) 51%,rgba(42,176,237,1) 100%);
}
So I've been at it for a while trying to achieve this one shape with CSS with no good solutions. I need this to be an image because this div may resize and I want it to stay intact. I've also attempted to create an SVG which did not work out very well, I've seen some people work with gradient to make shapes but I'm not able to find any good guide to point me in the right direction. Any help is appreciated :)
Using gradients with angles is not fit for your case because (as already pointed out by King King in comments) as the width the increases, the angle of the gradient (or) the color stop percentages need to be modified to maintain the shape. That is very tricky and so this method can be employed only when the shape has fixed dimensions.
However gradients can still be used with the to [side] [side] syntax because gradients defined using this syntax can adapt to variations in container sizes. In this method no pseudo-elements are used.
$(document).ready(function() {
$('#increase').on('click', function() {
$('.gradient').css('width', '300px').css('height', '500px');
})
})
div {
display: inline-block;
vertical-align: top;
height: 300px;
width: 100px;
margin: 10px;
color: beige;
transition: all 1s;
}
.gradient {
padding: 10px;
background: linear-gradient(to top right, transparent 50%, tomato 50%) no-repeat, linear-gradient(to top right, transparent 0.1%, tomato 0.1%) no-repeat;
background-size: 100% 100px, 100% 100%;
background-position: 0% 100%, 0% -100px;
}
/* Just for demo */
body {
background: -webkit-radial-gradient(50% 50%, circle, aliceblue, steelblue);
background: radial-gradient(circle at 50% 50%, aliceblue, steelblue);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gradient">Some content</div>
<br>
<br>
<button id="increase">Increase Width & Height</button>
Note that it is better to make sure that the text doesn't flow into the slanted section of the shape because wrapping the text around to fit within the shape is not straight-forward.
I have attempted to make that in css as per ur image. http://jsfiddle.net/3zkme/- See if this could help. Thanks.
HTML
<div style="margin:30px">
<div class="trapezoid">
</div>
</div>
CSS
.trapezoid{
top: 150px;
vertical-align: middle;
border-bottom: 120px solid red;
border-left: 200px solid transparent;
border-top-left-radius:0px;
height: 0;
width: 150px;
transform:rotate(270deg);
-ms-transform:rotate(270deg); /* IE 9 */
-webkit-transform:rotate(270deg); /* Opera, Chrome, and Safari */
}
/* ---------- */
.trapezoid {
position:relative;
}
.trapezoid:after {
content:' ';
left:-14px;
top:10px;
position:absolute;
background:red;
border-radius:0px 0 0 0;
width:164px;
height:40px;
display:block;
}
You do not use a gradient for this, you just need to use a pseudo-element like :after.
Sample code:
#bookmark {
width: 50px;
height: 100px;
position: relative;
background: red;
}
#bookmark:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 0;
border-bottom: 35px solid #FFF;
border-right: 50px solid transparent;
}
Live JSFiddle
If you want the shape to be filled in with a gradient, you can do that, too. Just add that to the CSS:
background: linear-gradient(to right, #ff0000 0%,#B00000 100%);
I'm trying to put two inclined divs side by side. I don't know if this is possible in CSS, but I want to do something like this:
It's just an example.
I was thinking about using a gradient background, but it doesn't work, because I want to do a responsive layout with multiple backgrounds.
<style>
body {
background:
linear-gradient(
to top left,
black,
black 50%,
rgba(0,0,0,0) 50%,
rgba(0,0,0,0)
)
top center no-repeat,
linear-gradient(
to top right,
black,
black 50%,
#007bff 50%,
#007bff
)
top center no-repeat;
background-size:40% 200%;
background-color: black;
padding:0;
margin:0 auto;
min-height:100%;
}
}
</style>
You may want something like this:
<html>
<head>
<style type="text/css">
#bleft {
border-bottom: 500px solid black;
border-right: 500px solid transparent;
float:left;
}
#bright {
border-bottom: 500px solid black;
border-left: 500px solid transparent;
float:right;
}
</style>
</head>
<body>
<div id="bleft"></div>
<div id="bright"></div>
</body>
<body>
<div id="bleft"></div>
<div id="bright"></div>
</body>