Need help to create this background blur without blurring the text.
I have tried the css filter property, but couldn't make it look like this.
I'm not a CSS shark, so i hope someone can give me an easy solution :D
Adobe XD Background Blur:
Since you haven't provided any code so this will help you.
You can make a div with blur background using filter: blur(13px); in css and the content can't be inside the blurred div, so we will use a sibling element instead like this
body {
background: url('https://www.w3schools.com/html/img_girl.jpg') no-repeat center center fixed;
background-size: cover;
}
.blur {
background: url('https://www.w3schools.com/html/img_girl.jpg') no-repeat center center fixed;
background-size: cover;
overflow: hidden;
filter: blur(13px);
position: absolute;
height: 300px;
top: -50px;
left: -50px;
right: -50px;
bottom: -50px;
}
.widget {
border-top: 2px solid rgba(255, 255, 255, .5);
border-bottom: 2px solid rgba(255, 255, 255, .5);
height: 200px;
width: 100%;
overflow: hidden;
}
.center {
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.text h1 {
text-align: center;
color: #ffffff;
margin-top: 57px;
font-family: 'Lora', serif;
font-weight: 700;
font-size: 38px;
}
<div class="widget center">
<div class="blur"></div>
<div class="text center">
<h1 class="">I am blurred div</h1>
</div>
</div>
Related
I have tried to build a login form on a HTML page (Angular) that has a full size, centered background image and the form is placed in a div with blurred background, that is centered in the x- and y-axis of the browser window.
That is how far I came: https://codepen.io/surfermicha/pen/ZwpxBa
<div class="login-background-door2">
<div class="aero-background centered">
<h3>Here will be a login form later</h3>
</div>
</div>
Unfortunately i have some issues with that:
The centered box isn't exactly in the center
It's not responsive. The div is to small at small devices. I want 10px margin left and right, but a max-width 500px on bigger screens.
Could anyone help edit the codepen for a working responsive solution
You can set media queries by your needs, like I set into 567px because after 567px view of your center block, don't look nice so I set into 567px.
body, html {
font-family: "roboto", monospace;
color: #EEE;
padding: 0;
width: 100%;
margin: 0;
height: 100%;
overflow-x: hidden;
}
.aero-background::before {
content: '';
background: url("http://placekitten.com/2400/2000") center no-repeat;
filter: blur(6px);
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: -1;
pointer-events: none;
}
.aero-background {
border-radius: 5px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
border: 1px solid rgba(255, 255, 255, 0.1);
color: white;
align-items: center;
justify-content: center;
text-shadow: 0 0 10px black;
}
.centered {
max-width: 500px;
min-height: 300px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.login-background-door2 {
background: url("http://placekitten.com/2400/2000") center no-repeat;
height: 100%;
width: 100%;
overflow: hidden;
}
#media screen and (max-width: 567px) {
.centered {
width: 250px;
}
}
<div class="login-background-door2">
<div class="aero-background centered">
<h3>Here will be a login form later</h3>
</div>
</div>
https://codepen.io/anon/pen/MLjXgW
Centered with flex, no media queries
body, html {
font-family: "roboto", monospace;
color: #EEE;
padding: 0;
width: 100vw;
margin: 0;
height: 100vh;
overflow-x: hidden;
}
$login-background-image: "http://placekitten.com/2400/2000";
.aero-background::before{
content: '';
background: url($login-background-image) center no-repeat;
filter: blur(6px);
position: absolute;
left:0; top:0; right:0; bottom:0;
z-index: -1;
pointer-events: none;
}
.aero-background {
border-radius:5px;
box-shadow: 0 0 15px rgba(black, .4);
border:1px solid rgba(white,.1);
color: white;
align-items: center;
justify-content: center;
text-shadow:0 0 10px black;
max-width:500px;
min-height: 300px;
margin-left: 10px;
margin-right: 10px;
display: flex;
text-align: center;
padding: 10px;
}
.login-background-door2 {
background: url($login-background-image) center no-repeat;
height: 100%;
width: 100%;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
<div class="login-background-door2">
<div class="aero-background">
<h3>Here will be a login form later</h3>
</div>
</div>
My first time answering so I apologize if missed something
I'm trying to create a shimmer effect over a logo. While I can do that, the shimmer effect is going outside the bounds of the .png and can be seen on top of the background of the page as well. Can anyone assist? `
body {
width: 608px;
height: 342px;
padding: 0px;
margin: 0px;
background-image: url(http://www.whitewaterconnect.com/images/backgrounds/TriangularBackground.jpg);
background-repeat: no-repeat;
font-family: jobber;
overflow: hidden;
}
.splash-logo {
width: 30%;
height: auto;
position: absolute;
top: 1px;
left: 1px;
content: url(http://www.whitewaterconnect.com/images/splash-logo.png);
background-repeat: no-repeat;
z-index: -1;
}
.shine {
width: 200px;
height: 200px;
position: absolute;
top: 1px;
left: 1px;
overflow: hidden;
z-index: 10;
}
.shine:before {
content: "";
position: absolute;
top: 100%;
left: 150%;
height: 150%;
width: 100px;
transform: rotate(45deg);
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%);
animation: 5s myani linear infinite;
}
#keyframes myani {
0% {
top: -150%;
left: -150%;
}
100% {
top: 150%;
left: 150%;
}
}
div.splash-text {
font-family: jobber;
font-size: 42px;
position: absolute;
top: 825px;
left: 655px;
color: #0099CC;
text-align: center;
}
<div class="body">
</div>
<div class="shine">
</div>
<div class="splash-logo">
</div>
`
For future reference if anyone else runs into this issue, here's I went about fixing this.
I basically created a "raised" background with z-index set to 10. I recreated my background with a transparent area where the logo should go. Effectively, creating a mask to fit around my logo. So, the bottom layer was the logo, then the shimmer effect and then the background on top.
I have an element with a background image and some text in it.
For various good reasons the element is positioned absolute.
I added an overlay to the image with a pseudo :before.
The problem now is that the overlay also darkens the text in the element.
How would I fix that? I want my text to remain nicely white!
JSFiddle: https://jsfiddle.net/xvdk95st/
.text {
position: absolute;
background-image: url('https://i.gyazo.com/1e88fee290bda821ba823a76a1e01c04.png');
background-size: cover;
background-repeat: no-repeat;
width: 400px;
line-height: 25px;
color: #fff;
min-height: 400px;
}
.text::before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: " ";
background-color: rgba(0, 0, 0, 0.4);
z-index: 2;
}
<div class="text">
<p>
Hi, I'm some text!
</p>
</div>
Use z-index with position on <p> (because z-index always works with position), like:
.text p {
z-index: 10;
position: relative;
}
Have a look at the snippet below:
.text {
position: absolute;
background-image: url('https://i.gyazo.com/1e88fee290bda821ba823a76a1e01c04.png');
background-size: cover;
background-repeat: no-repeat;
width: 400px;
line-height: 25px;
color: #fff;
min-height: 400px;
}
.text::before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: " ";
background-color: rgba(0, 0, 0, 0.4);
z-index: 2;
}
.text p {
z-index: 10;
position: relative;
}
<div class="text">
<p>
Hi, I'm some text!
</p>
</div>
Hope this helps!
If you want to darken background only, you can use multiple backgrounds:
.text {
position: absolute;
background-image:
linear-gradient(to right, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
url('https://i.gyazo.com/1e88fee290bda821ba823a76a1e01c04.png');
background-size: cover;
background-repeat: no-repeat;
width: 400px;
line-height: 25px;
color: #fff;
min-height: 400px;
}
<div class="text">
<p>
Hi, I'm some text!
</p>
</div>
This is what I'm looking for:
I have cropped an image with my html and css but have no idea how to place rectangle in it. I guess for animation I should use :hover option for my crop class in div.
My code: http://jsfiddle.net/8t2hmxmn/
I guess this will fit your needs, to adjust the height of the details element, just edit the height: value inside .details
html * {
box-sizing: border-box;
}
.crop {
background-image: url('http://cs628119.vk.me/v628119319/10059/Ag3oy3YU6wY.jpg');
width: 200px;
height: 150px;
background-position: center;
background-size: cover;
position: relative;
overflow: hidden;
}
.shape {
width: 200px;
height: 50px;
color: black;
}
.details {
position: absolute;
bottom: -100%;
left: 0;
right: 0;
height: 100%;
background: rgba(0, 0, 0, 0.5);
padding: 5px 10px;
transition: all 1s;
color: white;
}
.crop:hover > .details {
bottom: 0;
}
<div class="shape">
<div class="crop">
<div class="details">
Yes, this is cat!
</div>
</div>
</div>
I am trying to put a background image in a content div and make only the image blur but failed so far. I managed to get the background-image to show up when the code for the image is in the content div itself (code below). In other words without making an additional div for the image. But in this case the whole content obviously becomes blur if, for example, I put filter: blur(...);
The second method was to make a background-image div. But I managed either to push the content right under the image or put the image somewhere behind the content so It's not visible.
How would you propose to do a background-image and fix my issue? My codepen - http://codepen.io/anon/pen/hGBjA
CSS
h2 {
font-family: Open Sans;
color: #0099F1;
padding-left: 20px;
text-align: left;
}
#bizpartners ul {
list-style-image: url ("http://www.peopletraining.co.uk/people_training_april_2012002002.jpg");
}
.right {
position: relative;
float: left;
margin-top: 50px;
width: 100%;
min-height: 400px;
max-height: auto;
z-index: 5;
margin-bottom: 5px;
background: rgba (255, 255, 255, 0.3);
border: 1px solid #000000;
background-image: url("http://www.worldswallpapers.org/wp-content/uploads/2014/02/Nature-Wallpapers-2014-2.jpg");
background-size: cover;
filter: blur(5px);
-webkit-filter: blur(5px);
background-repeat: no-repeat;
}
.right p {
margin-left: 30px;
margin-top: 20px;
text-align: center;
}
I made it really quick, i hope it's ok!
FIDDLE: http://jsfiddle.net/81yawoxg/
HTML
<div class="container">
<div class="background"></div>
<div class="text">CONTENT HERE</div>
CSS
.container{
position: relative;
width: 1280px;
height: 700px;
}
.background{
position: absolute;
top: 0;
left: 0;
width: inherit;
height: inherit;
z-index: 100;
background-image: url("http://www.worldswallpapers.org/wp-content/uploads/2014/02/Nature-Wallpapers-2014-2.jpg");
filter: blur(5px);
-webkit-filter: blur(5px);
background-repeat: no-repeat;
}
.text{
position: absolute;
top: 0;
left: 0;
width: inherit;
height: inherit;
z-index: 200;
padding: 20px;
}