I want the exact gradient that is used on the big image near the top of this web page: http://www.cohabs.com/
I can get something quite close using this:
background: -webkit-linear-gradient(left, rgba(237,237,237,0) 0%, rgba(246,246,246,0.53) 53%, rgba(255,255,255,1) 100%), url(../images/firstImage.jpg) no-repeat;
But its not quite the same, as my method seems to dim even colour on the far left.
I did try view the source of that website I linked but I couldn't find anything that helped..
I used this website to create my gradient.
http://www.cssmatic.com/gradient-generator
I guess this is what you are looking for Codepen
Along with the above -webkit-linear-gradient you need other properties to make it work.
.container { position: relative; }
.container:before {
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 100%;
background-image: -webkit-linear-gradient(right,hsla(0,0%,100%,.8),hsla(0,0%,100%,0) 40%);
background-image: linear-gradient(270deg,hsla(0,0%,100%,.8),hsla(0,0%,100%,0) 40%);
content: '';
}
Markup for the above should be
<div class="container">
<img src="http://www.cohabs.com/files/library/assets/homapage/slider/Homepage_web.jpg?thumb=hero">
</div>
Related
body {
height:100%;
background: linear-gradient(top, #d808a4 50%, black 50%);
background: linear-gradient(top, #d808a4 50%,black 50%);
background: linear-gradient(to bottom, #d808a4 50%,black 50%);
height: 229vh;
}
I want to horizontally split the background into two colors where one is black color. And I want the other one to be a gradient that goes from pink to purple, I have manage to split into purple and black, but i want a purple pink grandient, can someone help me?
#top-half {
position: absolute;
left: 0;
width: 100%;
height: 50%;
background-color: black;
}
#bottom-half {
position: absolute;
left: 0;
top: 50%;
width: 100%;
height: 50%;
background: linear-gradient(90deg, rgba(255,0,209,1) 0%, rgba(151,0,255,1) 100%);
}
<div id="bottom-half"></div>
<div id="top-half"></div>
2 divs for each half
position: absolute and left: 0 and top: 50% sets the position
width: 100% sets it to screen width
height: 50% sets the height for each one to half the screen width
background-color: black obviously sets the background color to black, and background: linear-gradient(90deg, rgba(255,0,209,1) 0%, rgba(151,0,255,1) 100%) sets the background to a gradient (you can generate nice CSS gradients at https://cssgradient.io/ )
You cannot have multiple background, the newer one will overwrite the old ones. What you can do is to have multiple gradients in a single background such as (try scrolling):
body {
height: 200vh;
background:
linear-gradient(to bottom, transparent 50%, black 50%),
linear-gradient(100deg, #8a07ff, #f500d7);
}
You can do this with just one background setting.
This snippet separates out each of the CSS background settings to make it clearer what is going on.
The whole element gets a black background, then a background-image which is a linear-gradient is defined. This will sit on top of the black background-color. It is given a size and a position and is made not to repeat.
Obviously change the colors and the size to what you want.
.bg {
width: 100vw;
height: 100vh;
background-color: black;
background-image: linear-gradient(to right, purple, magenta);
background-size: 80% 50%;
background-position: center top;
background-repeat: no-repeat;
}
<div class="bg"></div>
i'm trying to apply a gradient to a skewed div but the gradient starts where the skew starts and it doesn't apply the gradient i'm looking for no matter what angle i use.
This is the gradient i'm trying to replicate
but I get a very different result...the colors are off and it's too green on the right side of mine. You can notice that on the image above, the gradient starts at the little wedge at the bottom but mine starts on the entire bottom part.
.main {
height: 80vh;
background-color: white;
}
.skew-div {
height: 100%;
width: 100%;
position: absolute;
top: 0;
background: linear-gradient(180deg, #1D2345 0%, #242766 27.88%, #294B7C 52.91%, #2E6E92 76.86%, #40CE9C 104.51%);;
transform: skewY(-12deg);
transform-origin: 0;
}
<div class="main">
<div class="skew-div">
</div>
</div>
is this possible without just placing the image as a background?
Use clip-path
.main {
height: 80vh;
background-color: white;
position:relative;
}
.skew-div {
height: 100%;
width: 100%;
position: absolute;
top: 0;
background: linear-gradient(180deg, #1D2345 0%, #242766 27.88%, #294B7C 52.91%, #2E6E92 76.86%, #40CE9C 104.51%);
clip-path: polygon(0 0, 100% 0, 100% 70%, 0 100%);
}
<div class="main">
<div class="skew-div">
</div>
</div>
You can use clip-path property
.main {
height: 80vh;
background-color: white;
}
.skew-div {
height: 100%;
width: 100%;
position: absolute;
top: 0;
background: linear-gradient(180deg, #1D2345 0%, #242766 27.88%, #294B7C 52.91%, #2E6E92 76.86%, #40CE9C 104.51%);
;
clip-path: polygon(0 0, 100% 0, 100% 75%, 0% 100%);
}
<div class="main">
<div class="skew-div">
</div>
</div>
Instead of using transform: skewY() you may use clip-path property. transform sometimes creates some sudden confusing problems. That's why you should sometimes escape using that property. Else use it using proper Browser Vendor Prefixes.
If you feel any difficulty configuring clip-path property then you may use this 3rd party website for clip-path value generation =>
https://bennettfeely.com/clippy/
I ran into a problem and can't find the answer.
We have Div1 with a gradient. It invested another DIV2 with the picture. It invested контент3 section.
Setting the opacity of div2 (image), changing the transparency of the content nested within it.
I had a picture to make a transparent png, because this greatly increased the weight of the picture, which is not acceptable. Need to get back to version images to JPG.
How to make using JPG and save this DIV structure, to achieve transparency JPG, but without affecting the content that is embedded in it.
An example of how I don't like here (first section with background) - Mobileindex.ru
Here we use transparent picture
http://codepen.io/anon/pen/NNPLwX
How to do the same thing only using the JPG picture
http://www.mobileindex.ru/images/background-mobileindex.ru.jpg - without transparency
An important point - the content inside the DIV.parallax1 must extend the entire block height
.parallax-1 {
width: 100%;
top: 0px;
background: url(http://www.mobileindex.ru/images/Background-800-transp-mobileindex.ru.png) 50% 0 no-repeat fixed;
background-size: cover;
height: inherit;
padding: 0;
opacity: 1;
z-index: 2;
}
.gradient1 {
height: 100vh auto;
background: #6e72b6;
background: -moz-linear-gradient(top, #6e72b6 0%, #6d9594 100%);
background: -webkit-linear-gradient(top, #6e72b6 0%, #6d9594 100%);
background: linear-gradient(to bottom, #6e72b6 0%, #6d9594 100%);
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#6e72b6', endColorstr='#6d9594', GradientType=0);
}
p {
height: 100vh;
}
<div class="gradient1">
<div class="parallax-1">
<p>bootstrap grid and contenr</p>
</div>
</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%);
}