**see the image in snippet having color gradient on some angle. I am unable to make color gradient from top to buttom **
the child div should have background :linear-gradient(0deg, #FF6633 0%, #CC0066 100%), some inclined angle and color should be gradient from top to bottom.
any solution
for parent div background :linear-gradient(180deg, #F1F1F1 0%, #FFFFFF 100%); ,
for child div background :linear-gradient(0deg, #FF6633 0%, #CC0066 100%) and some
inclined angle
thanks.
.parent{
width: 100%;
height: 900px;
background: linear-gradient(180deg, #F1F1F1 0%, #FFFFFF 100%);
}
.child{
width:50%;
height: 900px;
float: right;
background: linear-gradient(75deg , transparent 50%, #FF6633 0%, #CC0066 100%);
}
<div class=parent>
<div class=child>
</div>
Default body tag will have margin. we can remove that. please check the below code
<!DOCTYPE html>
<html>
<head>
</head>
<style>
body{
padding: 0;
margin: 0;
}
.parent{
width: 100%;
height: 900px;
background: linear-gradient(180deg, #F1F1F1 0%, #FFFFFF 100%);
}
.child{
width:50%;
height: 900px;
float: right;
background: linear-gradient(75deg , transparent 50%, #FF6633 0%, #CC0066 100%);
}
</style>
<body>
<div class=parent>
<div class=child>
</div>
</body>
</html>
Related
I have to create image like this using CSS:-
If not possible then how can I use this with minimum image size? Like in below code I have used two images but this is also not working...
<div style="background:url('https://i.stack.imgur.com/veeS8.png') no-repeat top center, url('https://i.stack.imgur.com/2i7ed.png') repeat-y top 50px center; widhth:100%; height:800px; background-size:100%;">
</div>
Also possible with masking without using image. This is more flexible. You can control easily the slope by changing the variable.
.container {
--slope: 100px;
width: 100%;
height: 500px;
--mask: radial-gradient(farthest-side, #000 99%, transparent 100%) 50% 0 / 150% calc(var(--slope) * 2) no-repeat,
linear-gradient(#000, #000) 0 100% / 100% calc(100% - var(--slope)) no-repeat;
-webkit-mask: var(--mask);
mask: var(--mask);
background: linear-gradient(90deg, rgba(133, 132, 242, 1) 0%, rgba(35, 136, 253, 1) 50%, rgba(127, 237, 226, 1) 100%);
}
<div class='container'></div>
something like this would work:
div.cont:before {
content: '';
background-image: url(https://i.stack.imgur.com/2i7ed.png);
background-size: 100% auto;
position: absolute;
top: 44px;
left: 0;
right: 0;
bottom: 0;
}
<div class="cont" style="width: 100%;height:800px;background-image: url(https://i.stack.imgur.com/veeS8.png);background-size: 100% auto;background-repeat: no-repeat;position: relative;">
</div>
a trivial task using clip-path
.container {
height: 400px;
background: linear-gradient(90deg, rgba(133,132,242,1), rgba(35,136,253,1), rgba(127,237,226,1));
clip-path:ellipse(90% 100% at bottom); /* simply adjust the 90% */
}
<div class='container'></div>
To have the same curvature on resize use pixel value
.container {
height: 400px;
max-width:800px;
background: linear-gradient(90deg, rgba(133,132,242,1), rgba(35,136,253,1), rgba(127,237,226,1));
clip-path:ellipse(600px 100% at bottom);
}
<div class='container'></div>
.element {
width: 200px;
height: 200px;
border-radius: 100% 100% 0 0 / 20% 20% 0 0;
background-image: linear-gradient(to right, #8684F2 0%, #1BEEE3 100%);
}
You can use CSS Gradient to get this kind of result. You can also use some tools online to generate some gradients like this one:
https://cssgradient.io/
.container {
width: 500px;
height: 500px;
background: rgb(133,132,242);
background: linear-gradient(90deg, rgba(133,132,242,1) 0%, rgba(35,136,253,1) 50%, rgba(127,237,226,1) 100%);
}
<div class='container'>
</div>
How to make side beveled background using linear gradient?
html:
<div class="signpost">
<div class="column">
</div>
<div class="column bg-gray">
</div>
<div class="column">
</div>
</div>
css:
.signpost {display: table; width: 100%; height: 100vh; }
.signpost .column {display: table-cell; width: 33.33%; height: 100%; text-align: center;}
.bg-gray {background-image: linear-gradient(to left bottom, #ededed 0%, #ededed 100%, white 0%, white 0%);}
Example
Thank you for help!
Try this
.signpost {
width: 100wh;
height: 100vh;
background: linear-gradient(to bottom right, red 40%, transparent 44%) 0 0/50px 100% no-repeat,
linear-gradient(to top left, red 40%, transparent 44%) 100% 100%/70px 200% no-repeat,
#ededed;
}
<div class="signpost">
</div>
Can be made with multiple gradients:
linear-gradient(to bottom right, red 49%, transparent 51%) x-position y-position/x-size y-size
.box {
width: 300px;
height: 300px;
background: linear-gradient(to bottom right, red 49%, transparent 51%) 0 0/30px 100% no-repeat,
linear-gradient(to top left, red 49%, transparent 51%) 100% 100%/50px 200% no-repeat,
#ededed;
}
<div class="box">
</div>
An idea using one gradient:
.signpost {
display: table;
width: 100%;
height: 100vh;
}
.signpost .column {
display: table-cell;
width: 33.33%;
height: 100%;
}
.bg-gray {
background: linear-gradient(to bottom right,red 44%, #ededed 44.1% 55%, red 55.1%) center/100vw 1000vw;
}
body {
margin:0;
}
<div class="signpost">
<div class="column">
</div>
<div class="column bg-gray">
</div>
<div class="column">
</div>
</div>
I'm trying to apply gradient on whole HTML page using the following CSS class that I defined in the "body" tag:
.gradient{
font-family: Roboto Black;
background-repeat: no-repeat;
background-attachment: fixed;
height: 100%;
background: #234199;
background: -webkit-linear-gradient(#234199 0%, #7db9e8 100%);
background: -o-linear-gradient(#234199 0%, #7db9e8 100%);
background: linear-gradient(#234199 0%, #7db9e8 100%);
filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr='#234199', endColorstr='#7db9e8', GradientType=0 );
}
But there comes a sharp edge where the sidebar exceeds the viewport area, seems like gradient starts repeat itself (as shown in the image).
Can anybody fix the issue?
You may try using a pseudo element that you stretch to the whole page with fixed position :
.gradient {
font-family: Roboto Black;
position: relative;
}
.gradient:before {
content: "";
position: fixed;
z-index:-2;
top: 0;
right: 0;
left: 0;
bottom: 0;
background-repeat: no-repeat;
background: #234199;
background: -webkit-linear-gradient(#234199 0%, #7db9e8 100%);
background: -o-linear-gradient(#234199 0%, #7db9e8 100%);
background: linear-gradient(#234199 0%, #7db9e8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#234199', endColorstr='#7db9e8', GradientType=0);
}
<body class="gradient">
</body>
maybe try putting the height to auto instead of 100%?
Set height: 100% on the <html> element and it should fill the viewport.
Here's an example: https://codepen.io/anon/pen/JMjYrq
I want to make make div with background, I want to make oeverlay effect in div. This is what I do.
I want to make it like this
body {
background: blue;
}
.wrap {
height: 300px;
width: 600px;
margin: 0 auto;
background-color: #000000;
}
.background {
padding: 20px;
background: #ffffff;
background: -moz-linear-gradient(center top, #ffffff 50%, #e5e5e5 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(.5, #ffffff), color-stop(1, #e5e5e5));
background: -o-linear-gradient(top, #ffffff 50%, #e5e5e5 100%);
background: -ms-linear-gradient(top, #ffffff 50%, #e5e5e5 100%);
}
<section class="background">
<div class="wrap"></div>
</section>
Something like this might get you started.
You can use position:absolute; to remove the .wrap div from the HTML flow, allowing you to position it relative to its parent element (in this case, .container)
Note that you must style the container div as either position:relative or position:absolute in order for position:absolute to work for the wrap div.
body{
background:blue;
}
.container{position:absolute;height:1000px;}
.background{
height:200px;
width:400px;
margin-top:150px;
padding:20px;
background: #ffffff;
}
.wrap{
position:absolute;
top:20px;
left:50px;
height:250px;
width:350px;
margin:0 auto;
background-color:#000000;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="container">
<section class="background"></section>
<div class="wrap"></div>
</div>
</body>
</html>
I'm building a fixed width website (using the classic wrapper with margin:auto), but I want the sidebar background to extend to the right end of the screen.
So far I've accomplished this:
HTML
<div id="wrapper">
<div id="left">Content area</div>
<div id="right">
<div id="actual-sidebar">
Sidebar
<span class="clearme"></span>
</div>
</div>
</div>
CSS
body {
background: #333;
color: #fff;
overflow-x: hidden;
}
#wrapper {
width: 500px;
height: 1200px;
margin: auto;
border: 2px dashed #fff;
}
#left {
width: 300px;
height: 500px;
float: left;
}
#right {
width: 175px;
height: 500px;
margin-left: 325px;
margin-right: -9999px;
padding-right: 9999px;
background: #777;
}
#actual-sidebar {
width: 100%;
height: 100%;
border: 2px dotted #f0f;
}
You can see it in action here:
http://jsfiddle.net/knjDV/
http://www.spazionegativo.it/layout-test/
Is this kind of "full-width sidebar" possible using css only?
In the example above, the actual sidebar width is highlighted by the pink border, and the rest is all padding and negative margin; worked in chrome but IE broke it so I've added overflow-x: hidden to fix it.
The problem is, click-dragging to the right will scroll the view even if there's nothing to select, eventually hiding the content. I can't seem to get past this problem.
Is there a fix to the "drag-n-scroll" issue, or an entirely different way to accomplish this?
If you add to #right{ position: fixed;} that will get rid of the horizontal scrollbar. Is that acceptable?
Use CSS3 gradients as a background for the body (with the same color as the sidebar) to create the illusion that it extends to the edge of the screen.
.sidebar {
background: salmon;
}
body {
background: -webkit-gradient(linear, 100% 50%, 0% 50%, color-stop(50%, #fa8072), color-stop(50%, #ffffff));
background: -webkit-linear-gradient(right, #fa8072 50%, #ffffff 50%);
background: -moz-linear-gradient(right, #fa8072 50%, #ffffff 50%);
background: -o-linear-gradient(right, #fa8072 50%, #ffffff 50%);
background: linear-gradient(right, #fa8072 50%, #ffffff 50%);
}
Demo