I've asked the question before one day. And someone give me a link too. But, I can't write the proper code. I need a CSS for this background image:
In this online generator, I've tried, but I can't generate the almost left pure/solid portion of white background color:
Can you please, help me for it.
HTML Codes:
<div id="banner" class="outer">
<div class="inner"></div>
</div>
CSS code:
.outer {
width: 100%;
float: left;
}
.inner {
width: 978px;
margin: 0 auto;
text-align: left;
position: relative;
}
#banner {
display: block;
float: left;
margin: 2px 0 0 0;
padding: 12px 0 0 0;
height: 290px;
background: rgb(208,208,208); /* Old browsers */
background: -moz-linear-gradient(left, rgba(208,208,208,1) 0%, rgba(202,202,202,1) 1%, rgba(202,202,202,1) 2%, rgba(223,223,223,1) 9%, rgba(225,225,225,1) 12%, rgba(228,228,228,1) 13%, rgba(228,228,228,1) 53%, rgba(207,207,207,1) 65%, rgba(207,207,207,1) 68%, rgba(198,198,198,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(208,208,208,1)), color-stop(1%,rgba(202,202,202,1)), color-stop(2%,rgba(202,202,202,1)), color-stop(9%,rgba(223,223,223,1)), color-stop(12%,rgba(225,225,225,1)), color-stop(13%,rgba(228,228,228,1)), color-stop(53%,rgba(228,228,228,1)), color-stop(65%,rgba(207,207,207,1)), color-stop(68%,rgba(207,207,207,1)), color-stop(100%,rgba(198,198,198,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(208,208,208,1) 0%,rgba(202,202,202,1) 1%,rgba(202,202,202,1) 2%,rgba(223,223,223,1) 9%,rgba(225,225,225,1) 12%,rgba(228,228,228,1) 13%,rgba(228,228,228,1) 53%,rgba(207,207,207,1) 65%,rgba(207,207,207,1) 68%,rgba(198,198,198,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(208,208,208,1) 0%,rgba(202,202,202,1) 1%,rgba(202,202,202,1) 2%,rgba(223,223,223,1) 9%,rgba(225,225,225,1) 12%,rgba(228,228,228,1) 13%,rgba(228,228,228,1) 53%,rgba(207,207,207,1) 65%,rgba(207,207,207,1) 68%,rgba(198,198,198,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(208,208,208,1) 0%,rgba(202,202,202,1) 1%,rgba(202,202,202,1) 2%,rgba(223,223,223,1) 9%,rgba(225,225,225,1) 12%,rgba(228,228,228,1) 13%,rgba(228,228,228,1) 53%,rgba(207,207,207,1) 65%,rgba(207,207,207,1) 68%,rgba(198,198,198,1) 100%); /* IE10+ */
background: linear-gradient(to right, rgba(208,208,208,1) 0%,rgba(202,202,202,1) 1%,rgba(202,202,202,1) 2%,rgba(223,223,223,1) 9%,rgba(225,225,225,1) 12%,rgba(228,228,228,1) 13%,rgba(228,228,228,1) 53%,rgba(207,207,207,1) 65%,rgba(207,207,207,1) 68%,rgba(198,198,198,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d0d0d0', endColorstr='#c6c6c6',GradientType=1 ); /* IE6-9 */
}
That generator isn't working because that's not a single gradient; it's two. There's a horizontal gradient on the bottom and a vertical gradient atop that. You can use multiple backgrounds for that. This is what I came up with:
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), transparent 20%, transparent 97%, rgba(0, 0, 0, 0.2)), linear-gradient(to right, #e2e2e2, #fff 40%, #cbcbcb);
As you can see, there's a comma between the linear gradients, which means to composite the first one atop the second one. You can also see I'm using rgba and transparent on the top one so parts show through to the bottom gradient.
Take a look.
This is pretty close to your image. It uses a radial gradient and an inset shadow.
http://jsfiddle.net/daCrosby/eZN6Y/
/* Inner Shadow */
-webkit-box-shadow: inset 0px 5px 20px 5px rgba(0, 0, 0, .1);
box-shadow: inset 0px 5px 20px 5px rgba(0, 0, 0, .1);
/* Gradient */
background: #ffffff;
background: -moz-radial-gradient(40% 20%, ellipse cover, #ffffff 25%, #cccccc 60%);
background: -webkit-gradient(radial, 40% 20%, 0px, 40% 20%, 100%, color-stop(25%,#ffffff), color-stop(600%,#cccccc));
background: -webkit-radial-gradient(40% 20%, ellipse cover, #ffffff 25%,#cccccc 60%);
background: -o-radial-gradient(40% 20%, ellipse cover, #ffffff 25%,#cccccc 60%);
background: -ms-radial-gradient(40% 20%, ellipse cover, #ffffff 25%,#cccccc 60%);
background: radial-gradient(ellipse at 40% 20%, #ffffff 25%,#cccccc 60%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#cccccc',GradientType=1 );
Related
I am given a challenge to create a full layout of a page. I want to fill all the empty spaces inbetween my layout colors, I am using grid but can't fully span the navbar, for example, to take up the entire space on top of the browser. There is some margin I can not override on top.
I have tried using grid-template-column: 1/5 and etc but I'm confused. The images are below
html,
body {
display: grid;
grid-col height: 100%;
width: 100%;
}
.zone {
padding: 30px 50px;
margin: 40px 60px;
cursor: pointer;
display: inline-block;
color: #FFF;
font-size: 2em;
border-radius: 4px;
border: 1px solid #bbb;
transition: all 0.3s linear;
}
.zone:hover {
-webkit-box-shadow: rgba(0, 0, 0, 0.8) 0px 5px 15px, inset rgba(0, 0, 0, 0.15) 0px -10px 20px;
-moz-box-shadow: rgba(0, 0, 0, 0.8) 0px 5px 15px, inset rgba(0, 0, 0, 0.15) 0px -10px 20px;
-o-box-shadow: rgba(0, 0, 0, 0.8) 0px 5px 15px, inset rgba(0, 0, 0, 0.15) 0px -10px 20px;
box-shadow: rgba(0, 0, 0, 0.8) 0px 5px 15px, inset rgba(0, 0, 0, 0.15) 0px -10px 20px;
}
/*https://paulund.co.uk/how-to-create-shiny-css-buttons*/
/***********************************************************************
* Green Background
**********************************************************************/
.green {
background: #56B870;
/* Old browsers */
background: -moz-linear-gradient(top, #56B870 0%, #a5c956 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #56B870), color-stop(100%, #a5c956));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #56B870 0%, #a5c956 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #56B870 0%, #a5c956 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #56B870 0%, #a5c956 100%);
/* IE10+ */
background: linear-gradient(top, #56B870 0%, #a5c956 100%);
/* W3C */
}
/***********************************************************************
* Red Background
**********************************************************************/
.red {
background: #C655BE;
/* Old browsers */
background: -moz-linear-gradient(top, #C655BE 0%, #cf0404 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #C655BE), color-stop(100%, #cf0404));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #C655BE 0%, #cf0404 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #C655BE 0%, #cf0404 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #C655BE 0%, #cf0404 100%);
/* IE10+ */
background: linear-gradient(top, #C655BE 0%, #cf0404 100%);
/* W3C */
}
/***********************************************************************
* Yellow Background
**********************************************************************/
.yellow {
background: #F3AAAA;
/* Old browsers */
background: -moz-linear-gradient(top, #F3AAAA 0%, #febf04 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #F3AAAA), color-stop(100%, #febf04));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #F3AAAA 0%, #febf04 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #F3AAAA 0%, #febf04 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #F3AAAA 0%, #febf04 100%);
/* IE10+ */
background: linear-gradient(top, #F3AAAA 0%, #febf04 100%);
/* W3C */
}
/***********************************************************************
* Blue Background
**********************************************************************/
.blue {
background: #7abcff;
/* Old browsers */
background: -moz-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #7abcff), color-stop(44%, #60abf8), color-stop(100%, #4096ee));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%);
/* IE10+ */
background: linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%);
/* W3C */
}
<!DOCTYPE html>
<html>
<head>
<title>Layout Master</title>
<link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
<div class="zone green">Header</div>
<div class="zone red">Cover</div>
<div class="zone blue">Project Grid</div>
<div class="zone yellow">Footer</div>
</body>
</html>
I do not fully understand your question but I will try to be helpful.
If you have some spacing on top of your page make sure that you are reset browser default styling.
for example, the body has
body{
display: block;
margin: 8px;
}
full list of CSS default values
also, you can use some CSS normalize like normalize.css
and one more helpful link is CSS grid layouts examples grid layouts
and about height and width. CSS has units like
vw , vh for set current browser viewport.
What are viewport units
I am generating a gradient on the page. How can I overlay an image in the center of this ribbon? I need to center the image and I cant seem to figure out how to make this work. I am using bootstrap and the page is responsive. So it needs to stay together when the page gets smaller. Any help is appreciated!
Desired Result:
#ribbon-background {
background: #ed1c24; /* Old browsers */
background: -moz-linear-gradient(left, #ed1c24 0%, #600000 50%, #ed1c24 100%); /* FF3.6-15 */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ed1c24), color-stop(50%,#600000), color-stop(100%,#ed1c24)); /* Chrome4-9,Safari4-5 */
background: -webkit-linear-gradient(left, #ed1c24 0%,#600000 50%,#ed1c24 100%); /* Chrome10-25,Safari5.1-6 */
background: -o-linear-gradient(left, #ed1c24 0%,#600000 50%,#ed1c24 100%); /* Opera 11.10-11.50 */
background: -ms-linear-gradient(left, #ed1c24 0%,#600000 50%,#ed1c24 100%); /* IE10 preview */
background: linear-gradient(to right, #ed1c24 0%,#600000 50%,#ed1c24 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed1c24', endColorstr='#ed1c24',GradientType=1 ); /* IE6-9 */
border-top: 3px solid #000;
border-bottom: 3px solid #000;
box-shadow: 0 7px 0 #FFF inset,
0 -7px 0 #FFF inset;
height: 65px;
margin: 0 auto;
width: 100%;
z-index: 99;
}
<div id="ribbon-background"></div>
One way to do that is to give the ribbon a position: relative; and add the follow style to a child <img>:
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
Demo:
#ribbon-background {
background: #ed1c24;
/* Old browsers */
background: -moz-linear-gradient(left, #ed1c24 0%, #600000 50%, #ed1c24 100%);
/* FF3.6-15 */
background: -webkit-gradient(linear, left top, right top, color-stop(0%, #ed1c24), color-stop(50%, #600000), color-stop(100%, #ed1c24));
/* Chrome4-9,Safari4-5 */
background: -webkit-linear-gradient(left, #ed1c24 0%, #600000 50%, #ed1c24 100%);
/* Chrome10-25,Safari5.1-6 */
background: -o-linear-gradient(left, #ed1c24 0%, #600000 50%, #ed1c24 100%);
/* Opera 11.10-11.50 */
background: -ms-linear-gradient(left, #ed1c24 0%, #600000 50%, #ed1c24 100%);
/* IE10 preview */
background: linear-gradient(to right, #ed1c24 0%, #600000 50%, #ed1c24 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed1c24', endColorstr='#ed1c24', GradientType=1);
/* IE6-9 */
border-top: 3px solid #000;
border-bottom: 3px solid #000;
box-shadow: 0 7px 0 #FFF inset, 0 -7px 0 #FFF inset;
height: 65px;
margin: 0 auto;
width: 100%;
z-index: 99;
position: relative;
}
#ribbon-overlay-img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div id="ribbon-background">
<img id="ribbon-overlay-img" src="http://www.iconsdb.com/icons/preview/orange/stackoverflow-4-xxl.png">
</div>
I need to create a dashed line with a linear gradient.
I managed to create a dashed line using <hr /> and the following styling:
line {
border: 0px;
border-bottom: 2px dashed;
}
And I also know that to achieve a gradient I need to do:
background: -webkit-gradient(linear, 0 0, 100% 0, from(white), to(black));
Based on the code in your own answer, it looks like you need a line which is a gradient in itself (from blue to green) and also have dashed pattern. This is not possible to achieve with one gradient image because spaces cannot be introduced in the middle of a gradient.
However, you can achieve the same effect without using any extra elements (real/pseudo) by using background-image stacking like in the below snippet:
.line {
margin-top: 50px;
height: 2px;
background: linear-gradient(to right, transparent 50%, #223049 50%), linear-gradient(to right, #00b9ff, #59d941);
background-size: 16px 2px, 100% 2px;
}
body{
background-color: #223049;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="line"></div>
The second gradient in the above snippet is the same as the one in your answer (except the usage of the latest standard cross-browser syntax). The first gradient is the replacement for your hr and it is nothing but a repeating gradient which is transparent for 50% of image's width and the color you need for the other 50%. The background-size of the first gradient image is set as 16px 2px where 16px is the width and 2px is the height. The width of the image determines the width of the dashes. The height (2px) determines the thickness of the line.
Thanks for help I finally got it working myself but embedding a dashed line into a div. The <hr/> has the colour of the element I want the line in, giving the effect of "hiding" part of the line. Here is the code, however if someone has a nice answer I'm curious.
.line {
height: 2px;
background: -webkit-gradient(linear, 0 0, 100% 0, from(#00b9ff), to(#59d941));
}
.dashed {
border: 0px;
border-bottom: 2px dashed;
border-color: #223049;
}
<div class="line">
<hr class="dashed"/>
</div>
jsFiddle
Using pseudo-elements you can achieve dashed-border and can customize it also, in any direction(have described for one side in my JSFiddle).
Here's my JSFiddle
HTML
<div class="dashed-border"></div>
CSS
.dashed-border {
position: relative;
border-bottom: 3px dashed #fff;
}
.dashed-border::before {
content:"";
border-top:3px dashed #FFF;
position: absolute;
top:0;
left:6px;
right:0;
width: 100%;
height: 3px;
z-index: 2;
}
.dashed-border:after {
content:"";
position: absolute;
bottom: -3px;
left: -3px;
}
.dashed-border::after {
right: -3px;
height: 3px;
background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, #1e5799), color-stop(50%, #2989d8), color-stop(51%, #207cca), color-stop(100%, #7db9e8));
background-image: -webkit-linear-gradient(left, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
background-image: -moz-linear-gradient(left, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
background-image: -o-linear-gradient(left, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
background-image: -ms-linear-gradient(left, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
/* IE10+ */
background-image: linear-gradient(to right, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
/* W3C */
}
Hope it will work for you.
I've some scenario where I should use multiple background color to one div. It's better for me rather than using background images or additional div. But, I can't find easier way to use it by CSS. So, I need help about some scenario. Please, see the image:
(1) I want to build "A". for that I wrote:
div.A { background: linear-gradient(to right, #9c9e9f, #f6f6f6); }
But, after writing that code, it'll like "B". But, I want exactly like "A". So, by css/css3 how can I do it(without adding more divs)?
(2) Is it possible to make one portion smaller than other portion? For example, at "C", blue color is smaller(at height) than the other portion. How, can I apply multiple background color to one div with making one portion smaller like "C"(without adding additional divs to "C")?
Update:
After #Mohammad's answer, I've tried with that way. But, for "C" scenario, I can't decrease the height of blue portion. Can you please, tell me how can I do it?
jsfiddle.net/mFjQ6
The A div can actually be made without :before or :after selector but using linear gradient as your first try. The only difference is that you must specify 4 positions. Dark grey from 0 to 50% and ligth grey from 50% to 100% like this:
background: linear-gradient(to right, #9c9e9f 0%,#9c9e9f 50%,#f6f6f6 50%,#f6f6f6 100%);
As you know, B div is made from a linear gradient having 2 positions like this:
background: linear-gradient(to right, #9c9e9f 0%,#f6f6f6 100%);
For the C div, i use the same kind of gradient as div A ike this:
background: linear-gradient(to right, #9c9e9f 0%,#9c9e9f 50%,#33ccff 50%,#33ccff 100%);
But this time i used the :after selector with a white background like if the second part of your div was smaller. * Please note that I added a better alternative below.
Check this jsfiddle or the snippet below for complete cross-browser code.
div{
position:relative;
width:80%;
height:100px;
color:red;
text-align:center;
line-height:100px;
margin-bottom:10px;
}
.a{
background: #9c9e9f; /* Old browsers */
background: -moz-linear-gradient(left, #9c9e9f 0%, #9c9e9f 50%, #f6f6f6 50%, #f6f6f6 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#9c9e9f), color-stop(50%,#9c9e9f), color-stop(50%,#f6f6f6), color-stop(100%,#f6f6f6)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #9c9e9f 0%,#9c9e9f 50%,#f6f6f6 50%,#f6f6f6 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #9c9e9f 0%,#9c9e9f 50%,#f6f6f6 50%,#f6f6f6 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #9c9e9f 0%,#9c9e9f 50%,#f6f6f6 50%,#f6f6f6 100%); /* IE10+ */
background: linear-gradient(to right, #9c9e9f 0%,#9c9e9f 50%,#f6f6f6 50%,#f6f6f6 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9c9e9f', endColorstr='#f6f6f6',GradientType=1 ); /* IE6-9 */
}
.b{
background: #9c9e9f; /* Old browsers */
background: -moz-linear-gradient(left, #9c9e9f 0%, #f6f6f6 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#9c9e9f), color-stop(100%,#f6f6f6)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #9c9e9f 0%,#f6f6f6 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #9c9e9f 0%,#f6f6f6 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #9c9e9f 0%,#f6f6f6 100%); /* IE10+ */
background: linear-gradient(to right, #9c9e9f 0%,#f6f6f6 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9c9e9f', endColorstr='#f6f6f6',GradientType=1 ); /* IE6-9 */
}
.c{
background: #9c9e9f; /* Old browsers */
background: -moz-linear-gradient(left, #9c9e9f 0%, #9c9e9f 50%, #33ccff 50%, #33ccff 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#9c9e9f), color-stop(50%,#9c9e9f), color-stop(50%,#33ccff), color-stop(100%,#33ccff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #9c9e9f 0%,#9c9e9f 50%,#33ccff 50%,#33ccff 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #9c9e9f 0%,#9c9e9f 50%,#33ccff 50%,#33ccff 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #9c9e9f 0%,#9c9e9f 50%,#33ccff 50%,#33ccff 100%); /* IE10+ */
background: linear-gradient(to right, #9c9e9f 0%,#9c9e9f 50%,#33ccff 50%,#33ccff 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9c9e9f', endColorstr='#33ccff',GradientType=1 ); /* IE6-9 */
}
.c:after{
content:"";
position:absolute;
right:0;
bottom:0;
width:50%;
height:20%;
background-color:white;
}
<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>
There is also an alternative for the C div without using a white background to hide the a part of the second section.
Instead, we make the second part transparent and we use the :after selector to act as a colored background with the desired position and size.
See this jsfiddle or the snippet below for this updated solution.
div {
position: relative;
width: 80%;
height: 100px;
color: red;
text-align: center;
line-height: 100px;
margin-bottom: 10px;
}
.a {
background: #9c9e9f;
/* Old browsers */
background: -moz-linear-gradient(left, #9c9e9f 0%, #9c9e9f 50%, #f6f6f6 50%, #f6f6f6 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%, #9c9e9f), color-stop(50%, #9c9e9f), color-stop(50%, #f6f6f6), color-stop(100%, #f6f6f6));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #9c9e9f 0%, #9c9e9f 50%, #f6f6f6 50%, #f6f6f6 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #9c9e9f 0%, #9c9e9f 50%, #f6f6f6 50%, #f6f6f6 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(left, #9c9e9f 0%, #9c9e9f 50%, #f6f6f6 50%, #f6f6f6 100%);
/* IE10+ */
background: linear-gradient(to right, #9c9e9f 0%, #9c9e9f 50%, #f6f6f6 50%, #f6f6f6 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9c9e9f', endColorstr='#f6f6f6', GradientType=1);
/* IE6-9 */
}
.b {
background: #9c9e9f;
/* Old browsers */
background: -moz-linear-gradient(left, #9c9e9f 0%, #f6f6f6 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%, #9c9e9f), color-stop(100%, #f6f6f6));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #9c9e9f 0%, #f6f6f6 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #9c9e9f 0%, #f6f6f6 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(left, #9c9e9f 0%, #f6f6f6 100%);
/* IE10+ */
background: linear-gradient(to right, #9c9e9f 0%, #f6f6f6 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9c9e9f', endColorstr='#f6f6f6', GradientType=1);
/* IE6-9 */
}
.c {
background: #9c9e9f;
/* Old browsers */
background: -moz-linear-gradient(left, #9c9e9f 0%, #9c9e9f 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%, #9c9e9f), color-stop(50%, #9c9e9f), color-stop(50%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0)));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #9c9e9f 0%, #9c9e9f 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #9c9e9f 0%, #9c9e9f 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(left, #9c9e9f 0%, #9c9e9f 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);
/* IE10+ */
background: linear-gradient(to right, #9c9e9f 0%, #9c9e9f 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9c9e9f', endColorstr='#ffffff00', GradientType=1);
/* IE6-9 */
}
.c:after {
content: "";
position: absolute;
right: 0;
top: 0;
width: 50%;
height: 80%;
background-color: #33ccff;
z-index: -1
}
<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>
You could apply both background-color and border to make it look like 2 colors.
div.A { width: 50px; background-color: #9c9e9f; border-right: 50px solid #f6f6f6; }
The border should have the same size as the width.
Sorry for misunderstanding, from what I understood you want your DIV to have three different colors with different heights. This is the output of my code:
,
If this is what you want try this code:
div {
height: 100px;
width:400px;
position: relative;
}
.c {
background: blue; /* Old browsers */
}
.c:after{
content: '';
position: absolute;
width:20%;
left:0;
height:110%;
background: yellow;
}
.c:before{
content: '';
position: absolute;
width:40%;
left:60%;
height:140%;
background: green;
}
<div class="c"></div>
it is compatible with all the browsers, change values to fit your application
background: #fdfdfd;
background: -moz-linear-gradient(top, #fdfdfd 0%, #f6f6f6 60%, #f2f2f2 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fdfdfd), color-stop(60%,#f6f6f6), color-stop(100%,#f2f2f2));
background: -webkit-linear-gradient(top, #fdfdfd 0%,#f6f6f6 60%,#f2f2f2 100%);
background: -o-linear-gradient(top, #fdfdfd 0%,#f6f6f6 60%,#f2f2f2 100%);
background: -ms-linear-gradient(top, #fdfdfd 0%,#f6f6f6 60%,#f2f2f2 100%);
background: linear-gradient(to bottom, #fdfdfd 0%,#f6f6f6 60%,#f2f2f2 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fdfdfd', endColorstr='#f2f2f2',GradientType=0
With :after and :before you can do that.
HTML:
<div class="a"> </div>
<div class="b"> </div>
<div class="c"> </div>
CSS:
div {
height: 100px;
position: relative;
}
.a {
background: #9C9E9F;
}
.b {
background: linear-gradient(to right, #9c9e9f, #f6f6f6);
}
.a:after, .c:before, .c:after {
content: '';
width: 50%;
height: 100%;
top: 0;
right: 0;
display: block;
position: absolute;
}
.a:after {
background: #f6f6f6;
}
.c:before {
background: #9c9e9f;
left: 0;
}
.c:after {
background: #33CCFF;
right: 0;
height: 80%;
}
And a demo.
You can create something like c using CSS multiple-backgrounds.
div {
background: linear-gradient(red, red),
linear-gradient(blue, blue),
linear-gradient(green, green);
background-size: 30% 50%,
30% 60%,
40% 80%;
background-position: 0% top,
calc(30% * 100 / (100 - 30)) top,
calc(60% * 100 / (100 - 40)) top;
background-repeat: no-repeat;
}
Note, you still have to use linear-gradients for background types, because CSS will not allow you to control the background-size of a single color layer. So here we just make a single-color gradient. Then you can control the size/position of each of those blocks of color independently. You also have to make sure they don't repeat, or they'll just expand and cover the whole image.
The trickiest part here is background-position. A background-position of 0% puts your element's left edge at the left. 100% puts its right edge at the right. 50% centers is middle.
For a fun bit of math to solve that, you can guess the transform is probably linear, and just solve two little slope-intercept equations.
// (at 0%, the div's left edge is 0% from the left)
0 = m * 0 + b
// (at 100%, the div's right edge is 100% - width% from the left)
100 = m * (100 - width) + b
b = 0, m = 100 / (100 - width)
so to position our 40% wide div 60% from the left, we put it at 60% * 100 / (100 - 40) (or use css-calc).
background: linear-gradient(152deg , #0A64B1 60%,#0A64B1 33%,#2C3E52 45%,#2C3E52 156%);
You can do this way:-
In CSS file:-
<style>
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
.container {
display: flex;
}
.split {
height: 100vh;
width: 50%;
top: 0;
}
.left {
background-color: lightblue;
left: 0;
}
.left h1 {
text-align: center;
margin-top: 20%;
font-size: 90px;
}
.right {
background-color: lightsalmon;
right: 0;
}
.footer {
background-color: black;
color: white;
font-size: 13px;
padding: 1px;
}
</style>
And in body:-
<body>
<div class="container">
<div class="split left">
<h1>Welcome<br>to<br>website</h1>
</div>
<div class="split right">
<h2>welcome<br>to<br>website</h2>
</div>
</div>
<div class="footer">
<h3>copyright ©</h3>
</div>
</body>
I'm currently trying to make a background for the website I'm designing that is a gradient all the way to the bottom of the page but currently it repeats every time it gets to the bottom of my screen. I'm using the code:
html {
height: 2520;
}
body {
height: 2500px;
margin: 0;
background-repeat: no-repeat;
background-attachment: fixed;
background: -moz-linear-gradient(top left, white, #a6f2c0 30%, rgba(180, 200, 210, .9), black);
background: -ms-linear-gradient(top left, white, #a6f2c0 30%, rgba(180, 200, 210, .9), black);
background: -o-linear-gradient(top left, white, #a6f2c0 30%, rgba(180, 200, 210, .9), black);
background: -webkit-gradient(linear, 0 0, 100% 100%, from(white), color-stop(0.3, #a6f2c0), color-stop(0.65, rgba(180, 200, 210, .9)), to(black));
background: -webkit-linear-gradient(top left, white, #a6f2c0 30%, rgba(180, 200, 210, .9), black);
background: linear-gradient(top left, white, #a6f2c0 30%, rgba(180, 200, 210, .9), black);
}
and I'm wondering if making a gradient never repeat is impossible. Please let me know if it can be done and if so how it can be done. Thank you in advance!
You had no px on your html size. But you should do it like this. FIDDLE HERE
HTML
<html><body>
<div class="main-content-wrapper">
ALL OF YOUR CONTENT
</div>
</body></html>
CSS
html, body {
height: 100%;
margin: 0;
padding: 0;
}
.main-content-wrapper {
min-height: 2520px; /* remove this. let the content decide this height */
background: #ea2e9c;
background: -moz-linear-gradient(top, #ea2e9c 0%, #7db9e8 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ea2e9c), color-stop(100%,#7db9e8));
background: -webkit-linear-gradient(top, #ea2e9c 0%,#7db9e8 100%);
background: -o-linear-gradient(top, #ea2e9c 0%,#7db9e8 100%);
background: -ms-linear-gradient(top, #ea2e9c 0%,#7db9e8 100%);
background: linear-gradient(to bottom, #ea2e9c 0%,#7db9e8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ea2e9c', endColorstr='#7db9e8',GradientType=0 );
e background-image(linear-gradient(top, #ea2e9c 0%,#7db9e8 100%));
}