I want a div to be completely covered by another layer that looks like frosted glass. The div under the frosted glass will be the background for my responsive website. It can be gradient or just a picture like in my fiddle. I managed to cover the the div with the effect. However there is still a little gap between the edges of the layers but I want the effect to cover the entire div. Thanks.
.bg {
position: absolute;
background-image: url(https://images.unsplash.com/photo-1422224832140-0e546210efc3?dpr=1&auto=compress,format&fit=crop&w=1950&h=&q=80&cs=tinysrgb&crop=);
width: 100%;
height: 500px;
margin: 0;
}
.blurred-box {
position: relative;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: inherit;
overflow: hidden;
}
.blurred-box:after {
content: '';
width: 100%;
height: 100%;
background: inherit;
position: absolute;
left: 0;
left position right: 0;
top: 0;
bottom: 0;
top position bottom: 0;
box-shadow: inset 0 0 0 200px rgba(255, 255, 255, 0.05);
filter: blur(10px);
}
<div class="bg">
<div class="blurred-box"></div>
</div>
One way to fix that is set :after to be bigger then container:
.bg {
position: absolute;
background-image: url(https://images.unsplash.com/photo-1422224832140-0e546210efc3?dpr=1&auto=compress,format&fit=crop&w=1950&h=&q=80&cs=tinysrgb&crop=);
width: 100%;
height: 500px;
margin: 0;
}
.blurred-box {
position: relative;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: inherit;
overflow: hidden;
}
.blurred-box:after {
content: '';
width: 120%;
height: 120%;
background: inherit;
position: absolute;
left: -10%;
top: -10%;
box-shadow: inset 0 0 0 200px rgba(255, 255, 255, 0.05);
filter: blur(10px);
}
<div class="bg">
<div class="blurred-box"></div>
</div>
Also you could try to scale a little the blurred image container and hide the overflow on .bg:
.bg {
overflow: hidden;
}
.blurred-box:after {
transform: scale(1.08, 1.08);
}
and set padding: 0; margin: 0; on body to get rid of the small offsets. Some styles are redundant. So, my attempt:
body {
padding: 0;
margin: 0;
}
.bg {
position: relative;
background-image: url(https://images.unsplash.com/photo-1422224832140-0e546210efc3?dpr=1&auto=compress,format&fit=crop&w=1950&h=&q=80&cs=tinysrgb&crop=);
width: 100%;
height: 500px;
overflow: hidden;
}
.blurred-box {
width: 100%;
height: 100%;
background: inherit;
}
.blurred-box:after {
content: '';
width: 100%;
height: 100%;
background: inherit;
position: absolute;
top: 0;
left: 0;
top: 0;
bottom: 0;
box-shadow: inset 0 0 0 200px rgba(255, 255, 255, 0.05);
filter: blur(10px);
transform: scale(1.08, 1.08);
}
<div class="bg">
<div class="blurred-box"></div>
</div>
Related
I am trying to create a page banner which is an image with text over it. There are two things I am facing trouble with two things.
I need a smooth vignette effect on these images so that the text is clearly visible. I have tried the following but am not happy with the end result. I would like to get something as shown in the following image which shows a kind of smooth transition.
The text hides below the vignette effect. I tried using z-index but it does not work.
body {
margin: 0px;
}
#page-banner img {
width: 100%;
object-fit: cover;
height: 48vh;
}
#page-banner .vignette:after {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
-webkit-box-shadow: inset 20em 5em 15em black;
-moz-box-shadow: inset 20em 5em 15em black;
box-shadow: inset 20em 5em 15em black;
z-index: 0;
}
#page-banner .text {
width: 50%;
right: 50%;
z-index: 1;
}
#page-banner .text-over-image {
position: relative;
}
#page-banner .text-over-image p {
font-size: 60px;
color: white;
margin: 0;
position: absolute;
top: 50%;
left: 15%;
right: 45%;
transform: translate(-10%, -50%);
}
<section id="page-banner">
<div class="text-over-image vignette">
<img src="https://wallpaperaccess.com/full/5117570.jpg">
<div class="text">
<p>I am trying to learn adding vignette to images</p>
</div>
</div>
</section>
In your example, you used:
#page-banner .vignette::after
but you could just use:
#page-banner .vignette::before
instead.
That would position the pseudo-element underneath the content of .vignette, rather than over the top of it.
Working Example:
body {
margin: 0px;
}
#page-banner img {
width: 100%;
object-fit: cover;
height: 100vh;
}
#page-banner .vignette::before {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
box-shadow: inset 20em 5em 15em black;
z-index: 0;
}
#page-banner .text {
width: 50%;
right: 50%;
z-index: 1;
}
#page-banner .text-over-image {
position: relative;
}
#page-banner .text-over-image p {
font-size: 60px;
color: white;
margin: 0;
position: absolute;
top: 50%;
left: 15%;
right: 45%;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
transform: translate(-10%, -50%);
}
<section id="page-banner">
<div class="text-over-image vignette">
<img src="https://wallpaperaccess.com/full/5117570.jpg">
<div class="text">
<p>I am trying to learn adding vignette to images</p>
</div>
</div>
</section>
You need change z-index: 1 to #page-banner .text-over-image p to show the text.
To simulate smooth effect I put an opacity property.
If you want a really smooth effecty try change your font or use font-smooth but this feature is non-standard:
https://developer.mozilla.org/en-US/docs/Web/CSS/font-smooth
body {
margin: 0px;
}
#page-banner img {
width: 100%;
object-fit: cover;
height: 48vh;
}
#page-banner .vignette:after {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
-webkit-box-shadow: inset 20em 5em 15em black;
-moz-box-shadow: inset 20em 5em 15em black;
box-shadow: inset 20em 5em 15em black;
z-index: 0;
}
#page-banner .text {
width: 50%;
right: 50%;
}
#page-banner .text-over-image {
position: relative;
}
#page-banner .text-over-image p {
z-index: 1;
opacity: 0.88;
font-size: 60px;
color: white;
margin: 0;
position: absolute;
top: 50%;
left: 15%;
right: 45%;
transform: translate(-10%, -50%);
animation: fadeIn 8s infinite alternate;
}
#keyframes fadeIn {
from {
left: 13%;
opacity: 0.69;
color: white;
}
to {
left: 18%;
opacity: 0.88;
color: whitesmoke;
text-shadow: 2px 2px 8px gray;
}
}
<section id="page-banner">
<div class="text-over-image vignette">
<img src="https://wallpaperaccess.com/full/5117570.jpg">
<div class="text">
<p>I am trying to learn adding vignette to images</p>
</div>
</div>
</section>
Update:
I put an animation suggestion using #keyframes alternating:
opacity, left and text-shadow values in 8s
#keyframes fadeIn {
from {
left: 16%;
opacity: 0.69;
text-shadow: 2px 2px 8px whitesmoke;
}
to {
left: 18%;
opacity: 0.88;
text-shadow: 2px 2px 8px gray;
}
}
Dont' use box-shadow. Instead give your ::after this:
background: hsla(0, 0%, 0%, 0.50);
then give your text z-index = 1;
Just play with your color's alpha to get the desired look.
I want to do this:
So far I got this:
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #red;
z-index: 10000;
height: 10px;
overflow: visible;
}
.header:after {
content: '';
position: relative;
top: 100%;
display: block;
margin: 0 auto;
background: red;
width: 50px;
height: 25px;
border-radius: 10px 10px 50px 50px;
}
<div class="header"></div>
Codepen.
I can't get the top radius to go outwards the half circle like in the image.
How to do this with CSS?
You cannot make a negative radius on a border.
There is the possibility to make an SVG path or radial gradient... I made a new div as circle and radial gradient on pseudo-elements. It's not perfect, but it will possibly show you the direction to solution :)
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: red;
z-index: 10000;
height: 10px;
overflow: visible;
}
.header-circ {
position: relative;
top: 100%;
display: block;
margin: 0 auto;
background: red;
width: 500px;
height: 250px;
border-radius: 10px 10px 250px 250px;
}
.header-circ::before, .header-circ::after {
content: "";
position: absolute;
width: 100px;
height: 100px;
z-index: -1;
}
.header-circ::before {
left:-94px;
background: radial-gradient(circle at bottom left, white 0%,white 75%,red 75%);
}
.header-circ::after {
right:-94px;
background: radial-gradient(circle at bottom right, white 0%,white 75%,red 75%);
}
<div class="header"></div>
<div class="header-circ"></div>
I'm using the following HTML / CSS to overlay a box on a website i'm working on. I want the box to center in the screen, not start based on the centering already going on. So basically the white box should be on the center of the page, not the text test
.loading {
position: fixed;
z-index: 999;
height: 2em;
width: 2em;
overflow: show;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
/* Transparent Overlay */
.loading:before {
content: '';
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.3);
}
.centrediv {
height: 200px;
width: 800px;
background-color: white;
border: 1px solid black;
}
<div class="loading"><div class="centrediv">Test</div></div>
Use transform: translate(-50%, -50%), top: 50% and left: 50% on .centreDiv to center it horizontally and vertically.
.loading {
position: fixed;
z-index: 999;
height: 2em;
width: 2em;
overflow: visible;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
/* Transparent Overlay */
.loading:before {
content: '';
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.3);
}
.centrediv {
position: absolute;
height: 100px;
width: 200px;
background-color: white;
border: 1px solid black;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
<div class="loading">
<div class="centrediv">Test</div>
</div>
I need to create a CSS shape like this image..
Please check this fiddle of my work
I have created something like that, but I cannot give a curve to it.
#shape {
border-left: 70px solid transparent;
border-top: 100px solid red;
height: 0;
width: 200px;
}
Can anyone help me?
You can use a pseudo element with border-radius and background-shadows to create the curve and enable a transparent background for the curve.
Output :
#shape {
width: 300px; height: 100px;
position: relative;
overflow: hidden;
}
#shape:before {
content: '';
position: absolute;
top: 10%; right: 0;
width: 300%;
padding-bottom: 300%;
border-radius: 100%;
background: none;
box-shadow: 10px -10px 5px 300px #F15723;
z-index: -1;
}
body{background:url(https://farm9.staticflickr.com/8461/8048823381_0fbc2d8efb.jpg);background-size:cover;}
<div id="shape"></div>
demo
Variant #01:
CSS3 linear-gradient() can draw this background as well:
CSS:
div {
background: linear-gradient(45deg, transparent 50px, tomato 50px);
}
Output Image:
body {
background: linear-gradient(lightgreen, green);
min-height: 100vh;
margin: 0;
}
div {
background: linear-gradient(45deg, transparent 50px, tomato 50px);
height: 150px;
margin: 20px;
width: 400px;
}
<div>
</div>
Variant #02:
We can use :before and :after pseudo elements and use css3 transformation to make this shape with round corners.
body {
background: linear-gradient(lightgreen, green);
min-height: 100vh;
margin: 0;
}
div {
border-radius: 10px;
position: relative;
overflow: hidden;
height: 150px;
margin: 20px;
width: 400px;
}
div:before {
border-radius: 0 0 10px 10px;
transform-origin: 100% 0;
transform: skewY(45deg);
background: tomato;
position: absolute;
width: 45px;
z-index: -1;
content: '';
bottom: -5px;
left: 0;
top: 0;
}
div:after {
border-radius: 0 10px 10px 10px;
background: tomato;
position: absolute;
content: '';
left: 35px;
bottom: 0;
right: 0;
top: 0;
}
<div>
</div>
Trying to create a contact form in an overlay. I have the overlay div working, but it only works if I set it to "position: absolute". The div inside of the overlay, will not position properly, regardless of what I try.
Need the "form-wrap to be centered vertically & horizontally.
<div id="overlay">
<div id="form-wrap">
<img id="close-btn" src="images/framework/close.png">
<form id="form-box">
<input name="first-name" id="first-name" type="text" maxlength="32">
</form>
</div>
</div>
#overlay{
top: 0;
left: 0;
height:100%;
width: 100%;
position: absolute;
z-index: 899;
display: none;
background-color: rgba(0, 0, 0, 0.41);
}
#form-wrap{
width: 400px;
height: 600px;
position: relative;
z-index: 900;
margin: 0;
background-color: white;
}
try this:
#overlay{
top: 0;
left: 0;
right: 0;
bottom: 0;
position: fixed;
z-index: 899;
display: none;
background-color: rgba(0, 0, 0, 0.41);
}
#form-wrap{
width: 400px;
height: 600px;
position: relative;
top: 50%;
left: 50%;
margin: -300px 0 0 -200px;
background-color: white;
}
Example
This will only work if the height of your overlay is greater than 600px!
#overlay{
top: 0;
left: 0;
height: 100%;
width: 100%;
position: absolute;
z-index: 899;
display: none;
background-color: rgba(0, 0, 0, 0.41);
}
#form-wrap{
width: 400px;
height: 600px;
top: 50%;
position: relative;
z-index: 900;
margin: -300px auto 0 auto;
background-color: white;
}
Example