I have a website with a hero video that is black and gold and a black dive underneath...
Click to see image
I would like to blur the bottom border of the video and or the top border of the black div so that they appear to 'bleed into each other'.
I have tried everything I can think of / find on the interweb, so... filter: blur, mask-image, backdrop-filter: blur. but nothing seems to do the trick. 'filter: blur' got the closest but I don't want the entire video blurred, just the bottom border.
Help would be greatly appreciated.
You could use a linear gradient on the div from black to transparent to create a fake "blur border" effect.
body {
margin: 0;
}
header {
position: relative;
}
.video {
width: 100%;
}
.myDiv {
position: absolute;
z-index: 1;
background-image: linear-gradient(to top, #000 95%, rgba(0,0,0,0));
height: 50vw;
width: 100%;
top: 20vw;
}
<header>
<img class="video" src="https://i.stack.imgur.com/5ktg0.png" alt="This is the video">
<div class="myDiv"></div>
</header>
Related
I am trying to position an SVG image over a clipped background that parallaxes over another background. I want the SVG to be half over the background and half over the foreground, but it gets clipped along with the background using clip path. Is there another method i could be using for the effect that would work without clipping SVG, or are there ways to disable the inherited effect? Bear in mind, I would like to keep it positioned relative to this background.
CSS in question
.content
{
height: 300vh;
min-height: 150vh;
background: #25282A;
clip-path: polygon(-400% 100%, 100% 100%, 100% 10%);
position: relative;
z-index: 1;
}
.content img{
position: relative;
top: 20vh;
left: 2vw;
z-index: 3;
}
HTML
<section class="content">
<img src="/Asssets/RWR food image.jpg">
<img src="/Assets/Title.svg" />
</section>
You need to consider another alternative as clip-path will clip the element and all its content.
Since it's about background, you can rely on gradient like below to create a similar effect.
.content {
height: 300vh;
min-height: 150vh;
background:
/*a triangle shape offested by 50px from the top taking 25% of the height*/
linear-gradient(to bottom right,transparent 49.8%,#25282A 50%) 0 50px/100% 25%,
/*fill the remaining (75% - 50px) with solid color*/
linear-gradient(#25282A,#25282A) bottom/100% calc(75% - 49px);
background-repeat:no-repeat;
}
<div class="content">
</div>
I'm terrible at HTML/CSS, and I'm utterly stumped by this.
Image requirements:
Positioned in the bottom right corner
Slight spacing to right (right: 2%;, or similar)
Bottom of image flush to bottom of window
Max-height of 95% of window
Max-width of 50% of window
In other words, the image MUST NOT exceed half the width of any window or over 95% of the height of the window. Extra space above or to the sides are fine.
Gradient requirements:
Transparent from top to blue bottom (background: linear-gradient( to bottom, transparent 0, blue 100%);)
Placed over the image (z-index: 1;)
Width of 100% of window at all times
Height MATCHES the image to cover it by height exactly (i.e. The gradient must cover
In other words, the gradient must color the image the same shade at each height evenly across ALL screen proportions and sizes
EDIT: Another requirement, for clarification:
No overflowing or scrolling. Image, divs, and gradient must be completely showing on the screen. The image is never partially hidden, and no scroll bars should appear.
Examples (but...):
I don't know why jsfiddle and codepen aren't positioning correctly below. At least the positioning works fine in my local code:
This is the best I could do for now:
https://jsfiddle.net/stevenmchoi/vkgfy1ts/17/
https://codepen.io/stevenmchoi/pen/qJENmj
Try this
.parent{
background: linear-gradient( to bottom, transparent 0, blue 100%);
height: 100vh;
}
.parent .img-container{
width: 50vw;
height: 95vh;
}
.parent .img-container img {
position: fixed;
right:2%;
bottom:0px;
z-index: -1;
}
<div class="parent">
<div class="img-container">
<img src="https://vignette.wikia.nocookie.net/swallowed-whole/images/6/60/Monokuma.png/revision/latest?cb=20170312230828" alt="">
</div>
</div>
Are you looking for something like the following?
.parent-div {
position: relative;
display: block;
position: fixed;
left: 0;
right: 0;
bottom: 0;
top: 0;
width: 100%;
height: 100%;
background: linear-gradient(white, red);
overflow: hidden;
}
.monokuma-img {
position: absolute;
max-width: 50%;
max-height: 95%;
right: 2%;
bottom: 0px;
}
.despair-gradient {
position: absolute;
width: 100%;
height: 100%;
bottom: 0;
background: linear-gradient( to bottom, transparent 75%, #1543E9 100%);
}
<div class="parent-div">
<div class="despair-div">
<img class="monokuma-img" src="https://vignette.wikia.nocookie.net/swallowed-whole/images/6/60/Monokuma.png/revision/latest?cb=20170312230828" alt="" />
</div>
<div class="despair-gradient"></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 for background on my website I use colors and at top I have an image.
I want to make this image black and white with css:
body {
background: url('background.jpg') center top no-repeat;
-webkit-filter: grayscale(100%);
}
but this code make whole site grayscale
I also tried to put site content to new div with style -webkit-filter: none; but it don't work neither.
There's another solution without using an overlay div using background-blend-mode.
This is supported among all major browsers https://caniuse.com/?search=background-blend-mode (except IE)
background-color: rgba(255,255,255,1);
background: url('background.jpg') center top no-repeat;
background-blend-mode: luminosity;
you can try a different div overlayed over <body>
like this
#overlay {
background: url('background.jpg') center top no-repeat;
-webkit-filter: grayscale(100%);
z-index: -1;
opacity: 0.5; /*make it as your requirement*/
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
and your html will look like
<body>
<div id="overlay"></div>
<!-- other body elements -->
</body>
This is block style in jsx syntax (from reactjs-application). I have no clue what is going on there, but it seems to work
style={{
minHeight: '100vh',
backgroundPosition: 'center',
backgroundSize: 'cover',
backgroundImage:"linear-gradient(black, black), url('images/bgimage.jpg')",
backgroundBlendMode: 'saturation'
}}
I'm trying to achieve the background effect on this website:
http://mountaintheme.com/themeforest/mountain/home.html
The background pictures seem to be covered in a dotted overlay sort of thing.
Is there a way to create this effect with CSS only?
A little bit late, but here is a solution that uses just CSS to create the dotted overlay using a pattern created with radial-gradient.
.image {
width: 800px;
height: 600px;
position: relative;
background: url('https://upload.wikimedia.org/wikipedia/commons/6/6e/Rathong_from_Zemathang2.jpg');
background-size: cover;
}
.image:after {
content: '';
display: block;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: rgba(127, 127, 127, 0.5);
background-image: radial-gradient(black 33%, transparent 33%);
background-size: 2px 2px;
}
<div class="image"></div>
Here is my way of doing this https://jsfiddle.net/soumyabg/wefLyrhp/
Very minimal and pure CSS solution. The catch is that the actual image is the background of <a> tag (with display:block), and <img> is the dot overlay (its size should be defined in the CSS).
HTML:
<div class="image-container">
<a class="dotm" href="#">
<img src="http://s14.directupload.net/images/111129/44ga9qid.png" alt="dotm" title="dotm" class="dotm-overlay">
</a>
</div>
CSS:
.dotm {
display: block;
background: url(https://media.giphy.com/media/SOoaHiWfwZyfu/giphy.gif) no-repeat; /* change with the image URL */
background-size: cover;
}
.dotm-overlay {
background: url(http://s14.directupload.net/images/111129/44ga9qid.png);
width: 100%;
height: 400px; /*height of the image*/
}
Output:
You can implement this using only css background properties:
background-image: radial-gradient(black 50%, transparent 50%);
background-size: 4px 4px;
Here's one way of doing it.
<body>
<div id="overlay">
image
</div>
<div id="page">
<div id="content">
....
Basically, you add a container outside your page container.
Add a fixed position for it, and add a pseudo element :after to it and give it a background image.
Assume you have an object with "bg" id, this css class will add small dotted background:
#bg {
background-image: radial-gradient(#000 10%, transparent 10%);
background-size: 15px 15px;
background-color: #EEE;
}
You can change dots color by replace black (#000) with any color, and background color by replacing #EEE.
To adjust dots size, play with 10% and 15px.