I'm trying to implement this design using CSS and HTML:
As you can see. There is an image of dog, and on top of it is a div with text "Dog". The div blurs the part of the image it covers. So I tried this:
html:
<div>
<img class="profile" src="source.png" />
<div class="profile-name">Dog</div>
</div>
CSS:
.profile-name {
position: absolute;
bottom: 0px;
left: 0px;
background-color: black;
color: white;
padding-top: 15px;
padding-bottom: 15px;
width: 100%;
opacity: 60%;
// filter: blur(1px); // Does not work since it actually blurs the actual name, not the image underneath
}
As you can see, the image beneath the div is NOT blurry. How would I go about making the underneath image blurry using proper techniques? I would appreciate any help. Thanks!
You can use backdrop-filter to apply a filter behind an element: https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter
.profile-name {
position: absolute;
bottom: 0px;
left: 0px;
background-color: black;
color: white;
padding-top: 15px;
padding-bottom: 15px;
width: 100%;
opacity: 60%;
backdrop-filter: blur(1px);
}
You don't need opacity or filter, just use:
background-color: #00000050;
50 is 50% transparent of black. You can adjust it to get expected result.
Related
I'm trying to implement this image:
Where, a div with text "Dog" is partially covering and blurring the image. So I tried this:
.profile {
background-image: url(https://townofbeekmantown.com/wp-content/uploads/2019/06/2-dog.jpg);
width: 250px;
height: 250px;
background-size: cover;
background-position: 0px;
}
.name {
position: absolute;
bottom: 0px;
left: 0px;
background-color: black;
color: white;
padding-top: 15px;
padding-bottom: 15px;
width: 100%;
opacity: 60%;
backdrop-filter: blur(10px); // should do the trick but not working??
}
<body class="profile">
<div class="name">Dog</div>
</body>
As you can see, although the div has the right color/opacity, it is not blurring the part of the image it covers.
If backdrop-filter is applied on <div class="name"></div>, then shouldn't it take affect on the element behind it (which is <body class="profile">)? I'm confused as to what I am doing wrong. If anyone can point me in the right direction, I would greatly appreciate it. Thanks!
This works for me:
Change <body class="profile"> to something like <div class="profile">.
<body> is a special HTML element.
Remove opacity: 0.6. It makes the entire element translucent which isn't what you want.
Instead, change the background-color to rgba( 0, 0, 0, 0.6 ) - then the backdrop will be partially visible through this semitransparent background.
Also, I replaced width: 100% with right: 0; as width: 100% will be affected by box-sizing: which will trip you up as you work on the textual content of your HTML.
You also need to add position: relative; to .profile so that the .name's position: absolute works.
.profile {
width: 250px;
height: 250px;
position: relative;
background-image: url("https://townofbeekmantown.com/wp-content/uploads/2019/06/2-dog.jpg");
background-size: cover;
background-position: 0px;
}
.name {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding-top: 15px;
padding-bottom: 15px;
background: rgba( 0, 0, 0, 0.6 );
backdrop-filter: blur(10px);
color: white;
text-align: center;
}
<div>
<div class="profile">
<div class="name">Dog</div>
</div>
</div>
You could set a transparent background using RGBA instead of using opacity to have the blur effect on the background. Also note that you are using an invalid order of HTML code.
The order is as follow:
<html>
<head>
<!-- All meta tags -->
</head>
<body>
<!-- All your elements such as divs, navs etc.. -->
</body>
</html>
So if we take your code, you would have something like this:
background-color: rgba(0,0,0,0.55);
backdrop-filter: blur(10px);
! For the sake of demonstration, I added position: relative to the profile class, this ensures your name element stays inside of the box. Remove that line if you are planning to copy the code below or don't want to have this.
.profile {
background: url(https://townofbeekmantown.com/wp-content/uploads/2019/06/2-dog.jpg);
width: 250px;
height: 250px;
background-size: cover;
background-position: 0px;
position: relative;
}
.name {
position: absolute;
bottom: 0px;
left: 0px;
background-color: rgba(0,0,0,0.55);
color: white;
padding-top: 15px;
padding-bottom: 15px;
width: 100%;
text-align: center;
backdrop-filter: blur(15px); // should do the trick but not working??
}
<div class="profile">
<div class="name">Dog</div>
</div>
I would like to show the image with a non glassy display. Similar to the following one,
I am using the image as it is. I would like to show that with matte finish.
normal image:
Matte finish:
I am not able find it online. May be I am not using the right search keywords. Could anyone help me with this?
Inside a container I did put an image with reduced contrast / brightness / saturation plus a little bit of blur (all these four effects made by CSS filter). The image could've be placed as the container background but I wanted to apply these filters so it went separated.
After it, there's a colored layer with transparency covering the whole area. The letter represents the page's content that can be anything.
UPDATE: multiple filters must be all in a row, like it is on this latest update:
body {
width: 100%;
height: 100vh;
margin: 0px;
font-family: Georgia, serif;
}
#container {
width: 100%;
height: 100%;
position: relative;
background-color: navy;
overflow: hidden;
}
#thepic {
width: 100vw;
height: 100vh;
object-fit: cover;
-webkit-filter: brightness(90%) contrast(90%) blur(2px) grayscale(10%);
filter: brightness(90%) contrast(90%) blur(2px) grayscale(10%);
}
#color_layer {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: navy;
opacity: 0.3;
}
#content {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
left: 0;
right: 0;
margin: auto;
text-align: center;
}
h1 {
display: inline-block;
color: white;
text-shadow: 1px 2px 2px #000;
font-size: 4em;
font-weight: 100;
letter-spacing: 2px;
text-align: center;
vertical-align: middle;
}
#letter {
vertical-align: middle;
}
<div id=container>
<img id=thepic src="http://i.imgur.com/s9J4MnI.jpg">
<div id=color_layer></div>
<span id=content><img id=letter src="http://i.imgur.com/CB1vUqy.png" alt=img><h1> 書面</h1></span>
</div>
#freestock.tk - That's the idea I had in mind also.
Here's another way to do it with less markup:
img {
max-width: 100%;
height: auto;
}
.container {
position: relative;
z-index: -1;
}
.container:before {
content: "";
position: absolute;
z-index: 1;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.5);
}
<div>
<h1>Original Image</h1>
<img src="http://i.imgur.com/WjbwTUH.jpg">
</div>
<div class="container" id="content">
<h1> With Transparent Overlay </h1>
<img src="http://i.imgur.com/WjbwTUH.jpg">
</div>
In this example, I put the image inside a container that is relatively positioned. The z-index is -1 so it will be behind the next layer.
Then I used a pseudo element that is absolutely positioned so it will stretch across the whole width of the container and cover the image. The positive z-index sets it on top of the first layer. Rather than setting an opacity, I used an rgba value for the background color. The first three numbers or the red, green, and blue values as usual, but the last number is a decimal between 0 and 1 that sets the opacity level. I made it a little darker than you probably want just so you can see the difference. You may also choose a different color to fit your image.
For reference: http://nicolasgallagher.com/css-background-image-hacks/
I'm not even sure this is possible, I'm looking to make a see-trough "border"/cut-out around an element. Like in the image below, the point is to make the background show between the magenta element in the centre and the grey elements.
So far all I have managed is a solid colour border around the magenta element. Using the following class, this gives me the desired result but only on a white background.
.app.center {
height: 40px;
width: 28px;
z-index: 5000;
border-radius: 3px;
box-shadow: 0 0 0 3px white;
}
See this fiddle for my entire CSS.
Setting a transparent border as suggested in the comments does not solve my problem (tested in FF40). I am trying to create a transparent gap around my middle div element (the magenta one). Setting a transparent border on this element does not work.
I am looking for a way to clip the sibling divs that fall behind the middle div so a small piece of the background is visible on either side of the middle element that follows the edge/shape of the centre element.
Yes, this is basically impossible. That's why I am trying to provide an answer :-)
My solution will not work on IE, and limits you to use primary colors in the elements. As far as I know, it's the only way to get this result.
The trick is to use a blend mode, that translates gray into transparent. And the borders of the element will be gray, so will show the underlying background
.bkg {
width: 200px;
height: 200px;
border: solid 1px black;
background-image: repeating-linear-gradient(45deg, white 0px, lightblue 40px);
}
.button {
width: 100px;
height: 100px;
border-radius: 20%;
border: solid 10px gray;
position: absolute;
font-size: 80px;
}
#bt1 {
left: 40px;
top: 20px;
background-color: red;
}
#bt2 {
left: 80px;
top: 90px;
background-color: rgb(255,0,255);
}
.panel {
position: absolute;
top: 0px;
width: 200px;
height: 200px;
mix-blend-mode: hard-light;
}
<div class="bkg"></div>
<div class="panel">
<div class="button" id="bt1">-1-</div>
<div class="button" id="bt2">-2-</div>
</div>
If your purpose could be met with a "faux"-transparency, then you could make use of the border-image. However, this is not a true solution. Also, you would lose border-radius when you use a border-image.
The trick is to use as border-image the same image that you use for your background-image on lower-layer div or body. This will give the "illusion" of transparency clipping through the sibling divs which are at a lower-level.
Example:
* { box-sizing: border-box; }
body { background-image: url(http://i.stack.imgur.com/lndoe.jpg); }
.sphere {
position: relative; background-color: #444;
left: 200px; top: 100px; height: 100px; width: 200px;
border-top-right-radius: 100px; border-top-left-radius: 100px;
text-align: center; padding-top: 10px; color: white;
}
.app {
position: absolute; transform-origin: center 75px; background: #cc4489;
border-radius: 5px; left: 72px; top: -72px; height: 64px; width: 52px;
}
div.sphere > .app:first-child {
transform: scale(0.9) rotate(-30deg);
background: #adabae; top: -72px;
}
div.sphere > .app:last-child {
transform: scale(0.9) rotate(30deg);
background: #79787a; top: -72px;
}
.app.center {
height: 64px; width: 52px; z-index: 5000;
background-clip: padding-box; background-origin: padding-box;
border-image: url(http://i.stack.imgur.com/lndoe.jpg) 10;
border-width: 5px;
}
<div class=" sphere">
<div class="app"></div>
<div class="app center">3</div>
<div class="app"></div>
</div>
Fiddle: http://jsfiddle.net/abhitalks/aoh8vc8v/
As applied to your fiddle: http://jsfiddle.net/abhitalks/L6deaazy/3/
Disclaimer: This is faux clipping. clip-path and mask could be better put to use.
I have the following code: http://jsfiddle.net/Leytgm3L/ and as you can see, I use here extended resource - bootstrap.min.css. So far the page looks like in the result of this fiddle. I would like to change it so the darker background is blurred (exactly like in this tutorial http://jordanhollinger.com/2014/01/29/css-gaussian-blur-behind-a-translucent-box/ ). Is it possible without modifing the bootstrap css file?
I tried to replace this line:
background: rgba(0, 0, 0, 0.35);
with what they suggest on this tutorial:
#black{
-webkit-filter: blur(10px);
filter: url('/media/blur.svg#blur');
filter: blur(10px);
}
#black p, #black h1{
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px
}
but all I get is blurred text: http://jsfiddle.net/Leytgm3L/1/
could you help me with that?
You're going to need a blank "background" div that matches the width/position/etc of the content you want it on using the blur property and z-index: -1;. For example, say I had a box that was 300px wide and 100px tall. I'd have to make a #blurredbackground div that matches that same width, height, and position with filter: blur and z-index: -1 added.
HTML:
<div id="blurredbackground></div>
<div id="content">
...
</div>
CSS:
#content {
position: absolute;
bottom: 72px; left: 72px;
width: 300px;
height: 100px;
}
#blurredbackground {
position: absolute; /*matches #content position*/
bottom: 72px; left: 72px; /*matches #content position*/
width: 300px; /*matches #content width*/
height: 100px; /*matches #content height*/
-webkit-filter: blur(10px);
filter: blur(10px);
z-index: -1;
}
I would like to create something like on attached image using only CSS. Until now I have come-up with:
.block5-header:after {
content:"";
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
width:100%;
background: url({template_relativeimagepath}{template_imagesfolder}blocks/elipsa.png) no-repeat;
background-size: contain;
}
But this solution requires to use a lot of different png images, as i have many different sizes of header blocks. I have tried to use pseudo elements with radial gradients, but to no avail. If there is some simpler solution please let me know ;)
Pic of what i would like to achieve. http://i.imgur.com/pwN54o1.png
Alright, I used css position, circles, and rgba.
Pure CSS Solution (Fixed width)
It is also responsive to width changes
HTML
<header class="subNav">
<span class="headCirc"></span>
Something
</header>
CSS
.subNav {
width: 285px;
height: 60px;
overflow: hidden;
background: #4679bd;
display: block;
position: relative;
left: 30px;
top: 30px;
line-height: 60px;
font-size: 20px;
color: #fff;
padding-left: 15px;
border-radius: 10px 10px 0 0;
}
.headCirc {
position: absolute;
top: -30px;
left: -5%;
display: block;
width: 110%;
height: 70px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
}
What I did was positioned the circle absolutely inside of the header, I then gave the header an overflow: hidden to hide anything of the circle that came out of the box.
You wont be able to get the curved line but if you don't mind that you can try out http://www.colorzilla.com/gradient-editor/