I need help with a webpage I'm webmastering. Here's some code:
<body>
<div class="left">
</div>
And here's the css for it:
.left {
position: fixed;
width:50%;
height: 100vh;
top:0;
background-image: url('../img/plakatm.jpg');
background-size: 1164px,1000px;
background-position: center;
background-repeat: no-repeat;
}
The problem is, that i need to make a gradient at the right edge of it. I can't add the gradient to the image, beacause the .left element changes size on smaller monitors and the gradient would not show up.
Here you can see the full site (It's in polish but you don't need to understand it) Click here to see it.
Thanks.
Adam
Use CSS linear-gradient, something like below will work for you, better separate it to a separate into a different class, not call it .left, I call it .gradient in this example:
.left {
position: fixed;
width: 50%;
height: 100vh;
top: 0;
background-image: url('http://weknownyourdreamz.com/images/jungle/jungle-04.jpg');
background-size: 1164px, 1000px;
background-position: center;
background-repeat: no-repeat;
}
.left:after {
position: absolute;
content: '';
top: 0;
height: 100%;
width: 100%;
display: block;
background: white;
background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
background: -o-linear-gradient(right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
background: -moz-linear-gradient(right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
}
<body>
<div class="left">
</div>
</body>
There is a css-property for gradients. That should help.
Here is how you can have background gradient.
.left {
background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
height: 100px;
width: 100px;
}
<div class="left">
</div>
And this is the link where you can find good gradients: https://webgradients.com/
Related
My goal is to create a faded blue circle on black background.
However, there is a white square surrounding the circle, and it doesn't look good.
What can I do to get rid of this white background?
body {
background-color: black;
}
.circle {
border-radius: 50%;
width: 200px;
height: 200px;
background-color: blue;
}
.circle:after {
content: "";
display: block;
width: 100%;
height: 100%;
background-image: radial-gradient(ellipse at center center, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 1) 70%, rgba(255, 255, 255, 1) 100%);
}
<div class="circle"> </div>
You seems to overcomplicate a simple task:
body {
background-color: black;
}
.circle {
border-radius: 50%;
width: 200px;
height: 200px;
background: radial-gradient(farthest-side,blue,#0000);
}
<div class="circle"> </div>
One way is to fade away with black instead of white.
body{
background-color:black;
}
.circle {
border-radius: 50%;
width:200px;
height:200px;
background-color:blue;
}
.circle:after {
content: "";
display: block;
width: 100%;
height: 100%;
background-image: radial-gradient(ellipse at center center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 1) 100%);
}
<div class="circle"> </div>
I'm attempting to create a button that contains a gradient covering the whole button, then with an image on just a portion of the button.
(note: for ease of the question I've changed my code to a div, but the outcome remains the same)
Initially this was successful doing such:
<div class="myBtn_1">test button one</div>
.myBtn_1
{
border: solid 1px #ff00ff;
background-image: url('https://picsum.photos/21?image=1080'),
linear-gradient(to right, rgba(141, 245, 146, 1), rgba(255, 255, 255, 1));
background-repeat: no-repeat;
background-size: auto 100%;
width: 200px;
height: 50px;
padding-left: 65px;
}
the jfiddle representing this can be found: here
HOWEVER I want some border around my image within the button/div, so I added background-position 5px 5px to the css, as well as explicitly setting the background-size (auto 40px). This does add padding to the image, but it also adds padding to the gradient.
again, see the 2nd class in the same jfiddle
Question: how can I create a button/div in css that has a gradient covering the full background, then add an image that has padding around it?
You can comma delineate the individual background properties too.
.myBtn_3
{
border: solid 1px #ff00ff;
background-image: url('https://picsum.photos/21?image=1080'), linear-gradient(to right, rgba(141, 245, 146, 1), rgba(255, 255, 255, 1));
background-repeat: no-repeat;
background-size: auto 40px, auto auto;
width: 200px;
height: 50px;
padding-left: 65px;
background-position: 5px 5px, 0 0;
}
<div class="myBtn_3">
test button two
</div>
Why don't you use
position: absolute;
on the image and just put it inside the div
.myBtn_1
{
border: solid 1px #ff00ff;
background-image: url('https://picsum.photos/21?image=1080'),
linear-gradient(to right, rgba(141, 245, 146, 1), rgba(255, 255, 255, 1));
background-repeat: no-repeat;
background-size: auto 100%;
width: 200px;
height: 50px;
padding-left: 65px;
}
.myBtn_2
{
border: solid 1px #ff00ff;
background-image: url('https://picsum.photos/21?image=1080'), linear-gradient(to right, rgba(141, 245, 146, 1), rgba(255, 255, 255, 1));
background-repeat: no-repeat;
background-size: auto 40px;
width: 200px;
height: 50px;
padding-left: 65px;
background-position: 5px 5px;
}
.myBtn_3
{
border: solid 1px #ff00ff;
background-image: linear-gradient(to right, rgba(141, 245, 146, 1), rgba(255, 255, 255, 1));
background-repeat: no-repeat;
background-size: auto 100%;
width: 200px;
height: 50px;
padding-left: 65px;
position: relative;
}
.myBtn_3 img {
position: absolute;
left: 5px;
top: 5px;
height: calc(100% - 10px)
}
<div class="myBtn_1">test button one</div>
<br />
<div class="myBtn_2">
test button two
</div>
<br />
<div class="myBtn_3">
test button three
<img src="https://picsum.photos/21?image=1080">
</div>
I have a DOM element:
<div style="background-image: url(layer1.png)">...</div>
I want to add next layer using CSS:
div {
background-image: url('layer2.png'),radial-gradient( rgba(255, 255, 255, 0.85) 0%, rgba(236, 245, 245, 0.19) 75%, rgba(236, 245, 245, 0) 100%);
}
As a result i need to have DIV with all 3 layers as a background image.
Is it possible by pure HTML5 CSS3?
Inline styling totally replaces the properties defined by CSS for that element.
What you can do is create a parent element and child elements as layers, then layer it with the help of z-index and then use opacity to give it some transparency.
HTML
<div class="layers">
<div class="layer1" style="opacity: 0.2; background-image: url(foo.png);"> </div>
<div class="layer2" style="opacity: 0.4;"></div>
<div class="layer3" style="opacity: 0.2;"></div>
</div>
CSS
.layers{
position:relative;
width: 100px;
height: 100px;
}
.layer1, .layer2, .layer3{
position:absolute;
top:0px;
left:0px;
width: 100%;
height: 100%;
}
.layer1{ background-color: red; z-index: 0;}
.layer2{ background-color: orange; z-index: -1;}
.layer3{ background-color: pink; z-index: -2; }
JsFiddle
No, it's not possible. What will happen:
Your div {} rule has lower priority than inline css, so your inline css background-image will overwrite previous rule, not be appended to it.
Solution:
Use child element or :before/:after to apply layer1.png
.wrapper {
height: 200px;
width: 300px;
background-image: radial-gradient( rgba(255, 255, 255, 0.85) 0%, rgba(236, 245, 245, 0.19) 75%, rgba(236, 245, 245, 0) 100%);
position: relative;
}
.wrapper div {
position: absolute;
left: 10%;
top: 10%;
width: 80%;
height: 80%;
}
body {
background-color: black;
}
<div class="wrapper"><div style="background-image: radial-gradient(rgba(0, 255, 0, 0.85) 10%, rgba(0, 245, 0, 0.19) 75%, rgba(0, 245, 0, 0) 90%);"></div></div>
I am trying to put a small gradient on the bottom of a scrolling div. I've based my solution on the accepted answer to this SO thread. The gradient shows up fine, but when I scroll the content in the div, the bottom of the gradient moves. I need it to remain in place so that the content scrolls independently of the gradient. I've tried several combinations of position: fixed, position: relative, and position: relatve to no avail. What have I missed?
Relevant markup:
<div class="resultListContainer">
<ul class="result">
<li><span class="resultPermitNumber resultElement">B123456789</span></li>
<li><span class="resultPermitType resultElement">FINAL</span></li>
<li><span class="resultDisplayAddress resultElement">41975 LOUDOUN CENTER PL SE, LEESBURG, VA 20175</span></li>
</ul>
<!-- Lots more of the ul. -->
</div>
Relevant CSS:
.resultListContainer {
border: 1px solid #000;
height: 400px;
width: 40em;
overflow-y: scroll;
font-size: 1em;
position: relative;
}
.resultListContainer::before {
background-image: linear-gradient( top, rgba( 255, 255, 255, 0 ) 0%, rgba( 255, 255, 255, 1 ) 100% );
background-image: -moz-linear-gradient( top, rgba( 255, 255, 255, 0 ) 0%, rgba( 255, 255, 255, 1 ) 100% );
background-image: -ms-linear-gradient( top, rgba( 255, 255, 255, 0 ) 0%, rgba( 255, 255, 255, 1 ) 100% );
background-image: -o-linear-gradient( top, rgba( 255, 255, 255, 0 ) 0%, rgba( 255, 255, 255, 1 ) 100% );
background-image: -webkit-linear-gradient( top, rgba( 255, 255, 255, 0 ) 95%, rgba( 255, 255, 255, 1 ) 100% );
content: "\00a0";
height: 100%;
position: absolute;
width: 100%;
}
.result {
margin-bottom: 0;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
list-style-type: none;
}
The result:
Because your element is positioned absolute, it's position is absolute to the parent element so when you scroll it scrolls with your content. What you want is your ul to scroll. I have quickly rewritten yours, but below I've got a simplified and cleaned up version:
.resultListContainer {
border: 1px solid #000;
height: 400px;
width: 40em;
font-size: 1em;
position: relative;
}
.resultListContainer::before {
background-image: linear-gradient( top, rgba( 255, 255, 255, 0 ) 0%, rgba( 255, 255, 255, 1 ) 100% );
background-image: -moz-linear-gradient( top, rgba( 255, 255, 255, 0 ) 0%, rgba( 255, 255, 255, 1 ) 100% );
background-image: -ms-linear-gradient( top, rgba( 255, 255, 255, 0 ) 0%, rgba( 255, 255, 255, 1 ) 100% );
background-image: -o-linear-gradient( top, rgba( 255, 255, 255, 0 ) 0%, rgba( 255, 255, 255, 1 ) 100% );
background-image: -webkit-linear-gradient( top, rgba( 255, 255, 255, 0 ) 95%, rgba( 255, 255, 255, 1 ) 100% );
content: "\00a0";
height: 100%;
position: absolute;
width: 100%;
z-index: 2;
pointer-events: none;
}
.result {
position: absolute;
left: 0;
top: 0;
margin: 0;
box-sizing: border-box;
z-index: 1;
width: 100%;
height: 100%;
margin-bottom: 0;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
list-style-type: none;
overflow-y: scroll;
}
.result li {
height: 100px;
background: red;
}
<div class="resultListContainer">
<ul class="result">
<li><span class="resultPermitNumber resultElement">B123456789</span></li>
<li><span class="resultPermitType resultElement">FINAL</span></li>
<li><span class="resultDisplayAddress resultElement">41975 LOUDOUN CENTER PL SE, LEESBURG, VA 20175</span></li>
<li><span class="resultPermitNumber resultElement">B123456789</span></li>
<li><span class="resultPermitType resultElement">FINAL</span></li>
<li><span class="resultDisplayAddress resultElement">41975 LOUDOUN CENTER PL SE, LEESBURG, VA 20175</span></li>
<li><span class="resultPermitNumber resultElement">B123456789</span></li>
<li><span class="resultPermitType resultElement">FINAL</span></li>
<li><span class="resultDisplayAddress resultElement">41975 LOUDOUN CENTER PL SE, LEESBURG, VA 20175</span></li>
</ul>
<!-- Lots more of the ul. -->
</div>
Basically there are two things that are important: your outer box cannot be scrollable, you inner box can. All the fixed elements need to be outside your inner box (which is your ul in this case). Secondly, your :before cannot be 100% high, as it will absorb your mouse events, preventing scrolling. For all browsers except IE you can solve this by using pointer-events: none, but otherwise the safest way is to make your gradient a fixed height and your :before element the height of the gradient you want, resulting in a (in this case) 20px area that would not take your mouse events at the bottom.
html, body { height: 100%; } body { padding: 0; margin: 0; }
div {
width: 400px;
height: 400px;
max-height: 100%;
position: relative;
}
div:before, div ul {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
}
div:before {
background: linear-gradient(0deg, rgba(255,255,255,1), rgba(255,255,255,0));
background-size: 100% 100%;
height: 20px;
z-index: 2;
/* IE does not support pointer events, so making this small in height is important
as your scroll events will not be passed to the ul if it is covered by your :before */
pointer-events: none;
content: '';
display: block;
}
div ul {
margin: 0;
padding: 0;
height: 100%;
overflow-y: scroll;
z-index: 1;
}
div li {
width: 100%;
height: 100px;
background: #ececec;
}
div li:nth-child(2n){
background: #cecece;
}
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
</div>
You need to wrap your container in another div that is positioned as relative.
Also, overlay will block your scroll bar, so instead of width: 100% I used: left:0; right: 16px; - now scroll is clickable.
Try my fiddle:
https://fiddle.jshell.net/8c6k4k6d/1/
replace
.resultListContainer::before
with
.resultListContainer .result:last-of-type::before
I want background like this. How can I get this with pure CSS.
I have searched for this but I didn't find any answer.
I want to ignore usages of large background images.
UPDATE
I have tried like this (only with color)
background : linear-gradient(125deg, #3081ff 31%, #3081FF 78%, #307aff 33%, #307aff 25%)
But, I want to add image with color.
Here is Fiddle which I have tried Fiddle-Demo
And it have problem with responsive, you can check by resizing window.
Multiple background images:
div {
height: 200px;
width: 400px;
margin: auto;
border: 1px solid grey;
background-image: linear-gradient(135deg, rgba(255, 0, 0, 1) 0, rgba(255, 0, 0, 1) 50%, rgba(255, 0, 0, .5) 50%), url(http://lorempixel.com/image_output/city-q-c-400-200-1.jpg);
}
<div></div>
Or a pseudo-element:
div {
height: 200px;
width: 400px;
margin: auto;
border: 1px solid grey;
background-image: url(http://lorempixel.com/image_output/city-q-c-800-400-1.jpg);
background-size: 100%;
background-position: center right;
background-repeat: no-repeat;
position: relative;
}
div::before {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-image: linear-gradient(135deg, rgba(255, 0, 0, 1) 0, rgba(255, 0, 0, 1) 50%, rgba(255, 0, 0, .5) 50%);
}
<div></div>