We Keep Coding

Add blurred edges to a div but keep the content inside transparent

I have a slider, I want the edges of the content div to have a blur effect, blurring the background image behind it. The background image is from the parent div. As you can see the content inside it is not blurred and you can see through the background, but the edges are blurred. Any ideas on how to achieve this effect?
It doesn't matter if it's CSS only or mixed with JavaScript, I'm using React anyways.

Here's an approach using clip-path (documentation) and backdrop-filter (documentation) Both are relatively new rules, so check your browser compatibility.
We use the clip path to select a 10% "frame" around the inside of your box, and then apply a 10px blur with backdrop-filter
body {
min-height: 100%;
background-image: url('https://i.picsum.photos/id/502/1000/1000.jpg?hmac=L-KRcO3K2TOyaVRnDSO13QrAo73FnHrIBApbvfakTOw')
}
.box {
position: relative;
width: 300px;
height: 300px;
margin: 30px 100px;
}
.frame {
position: absolute;
width: 100%;
height: 100%;
clip-path: polygon(0% 0%, 0% 100%, 10% 100%, 10% 10%, 90% 10%, 90% 90%, 10% 90%, 10% 100%, 100% 100%, 100% 0%);
backdrop-filter: blur(10px);
}
.content {
position: absolute;
border: 1px #fff solid;
top: 10%;
left: 10%;
right: 10%;
bottom: 10%;
}
<div class="box">
<div class="frame"></div>
<div class="content"> Your text here</div>
</div>
Here's a version using CSS variables so you can quickly/easily adjust the blurred border thickness. Just change the --b CSS variable:
body {
min-height: 100%;
background-image: url('https://i.picsum.photos/id/502/1000/1000.jpg?hmac=L-KRcO3K2TOyaVRnDSO13QrAo73FnHrIBApbvfakTOw')
}
.box {
/* The border thickness (Can be a percentage or pixel value) */
--b: 6px;
/* Work out the inverse value for the right/bottom sides of the clip path */
--b2: calc(100% - var(--b));
position: relative;
width: 300px;
height: 300px;
margin: 30px 100px;
}
.frame {
position: absolute;
width: 100%;
height: 100%;
clip-path: polygon(0% 0%, 0% 100%, var(--b) 100%, var(--b) var(--b), var(--b2) var(--b), var(--b2) var(--b2), var(--b) var(--b2), var(--b) 100%, 100% 100%, 100% 0%);
backdrop-filter: blur(10px);
}
.content {
position: absolute;
border: 1px #fff solid;
top: var(--b);
left: var(--b);
right: var(--b);
bottom: var(--b);
}
<div class="box">
<div class="frame"></div>
<div class="content"> Your text here</div>
</div>

You don't need to use clip-path if you set the same background image on the content box. Caveat: background-attachment needs to be fixed. And if you use flex for all the boxes, just setting position: absolute on the content would be enough to center it on top.
html, body, .bg {
height: 100%;
width: 100%;
}
.bg, .blur-box, .content-box {
display: flex;
align-items: center;
justify-content: center;
}
.bg, .content-box {
background: url(https://picsum.photos/seed/1/1920/1080/) no-repeat fixed 0 0 / cover;
}
.blur-box {
position: relative;
width: 70vh;
height: 70vh;
backdrop-filter: blur(5px);
}
.content-box {
position: absolute;
width: 50vh;
height: 50vh;
color: white;
border: 1px solid white;
}
<div class="bg">
<div class="blur-box">
</div>
<div class="content-box">
TEXT
</div>
</div>

Overlapping rotated images in javascript

I am trying to get the arrows to start at the exact same point and vary the rotations of the arrows. Below is an example of my code in HTML/JS/CSS and a picture of what i am running into. Any ideas as to how to make the pictures of these arrows overlap better at the origin?
HTML/JS
content.innerHTML= '<div id = "contain"><img class = "arrow" style="transform: rotate(90deg)" src="img/arrow_0]+'.png"</img><img class = "arrow" style="transform: rotate(60deg)" src="img/arrow_1.png"</img><img class = "arrow" style="transform: rotate(75deg)" src="img/arrow.png"</img></div>'
CSS:
#contain {
position: relative;
width: 104%;
height: 132%;
}
#contain img {
position: absolute;
top: 0;
left: 0;
}
.arrow {
transform-origin: 0% 0%;
max-width: 100%;
max-height: 100%;
display: inline-block;
vertical-align: middle;
position:absolute;
}
Any pointers appreciated many thanks!!

I think your issue is because the container size & then the transform-origin is at 0%, where as 50% from the top would work better.
.arrow {
width: 200px;
height: 10px;
position: absolute;
left: 200px;
top: 200px;
transform-origin: 100% 50%;
}
#contain-1 .arrow { background-color: red; transform: rotate(90deg); }
#contain-2 .arrow { background-color: green; transform: rotate(45deg); }
#contain-3 .arrow { background-color: blue }
<div id="contain-1">
<div class="arrow"></div>
</div>
<div id="contain-2">
<div class="arrow"></div>
</div>
<div id="contain-3">
<div class="arrow"></div>
</div>

How can I centre a div dynamically to where my page is and make the page 'disabled' when the div shows? [duplicate]

This question already has answers here:
How to center a "position: absolute" element
(31 answers)
Closed 2 years ago.
I'm trying to do that when a button is pressed, it will display a div in the middle of the page no matter where my page is, it can be on the bottom part or top part of the page and still it would be in the middle.
I'm using position: absolute because I need it to be 'floating' above other elements.
I searched everywhere and didn't see how to do it. Only in the middle, but not 'dynamically'.
Also, how can I make the rest of the page that is behind the div disabled?
my current css:
#buyComponentTesting{
background-color: blue;
z-index: 99;
width: 200px;
height: 200px;
position: absolute;
top: 26%;
left: 40%;
}

As already suggested, it should be position:fixed instead of position:absolute. Please avoid other CSS written for demo.
.page{
pointer-events:none;//page disabled
/*Not required for this solution*/
width:100%;
height:100%;
/*Not required for this solution*/
}
#buyComponentTesting{
position:fixed;
width:100px;
height:100px;
top:calc(50% - 50px);
left:calc(50% - 50px);
pointer-events:all; /*but the div is accessible*/
/*Not required for this solution*/
display:inline-flex;
align-items:center;
justify-content:center;
border:1px solid transparent;
background:beige;
cursor:pointer;
/*Not required for this solution*/
}
#buyComponentTesting:hover{
border-color:#333;
}
<div class="page">
<div id="buyComponentTesting">The DIV</div>
</div>

#buyComponentTesting{
background-color: blue;
z-index: 99;
width: 200px;
height: 200px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%);
}
The code above will center the div. top and left will move the upper right corner of the div to the center of the page but to actually have the div sit in the center we would need to move if left by its width / 2 and up by its height / 2 which is done with transform property.
Also you cloud center the div horizontally use left: 50%; transform: translateX(-50%);
Note: Code above has position: fixed to have the div appear even when scrolling.
To have the rest of the page "disabled" as You mentioned, one option would be to create an overlay with fixed or absolute position which will sit above all element except for the div. You can either use ::before selector or separate element to create overlay
div::before, .overlay{
content: ""; //Add this property only when using ::before or ::after, otherwise they won't be displayed
position: fixed;
top: 0;
left: 0;
z-index: 80; /*Less then z-index of the div*/
background-color: rgba(0, 0, 0, 0.7);
width: 100%;
height: 100%;
}

#buyComponentTesting{
background-color: blue;
z-index: 999;
width: 200px;
height: 200px;
position: relative;
margin : auto;
transform: translate(-50%, -50%);
}
Please try the above code share your feedback

Use position: fixed; instead of position: absolute;.
From below code, this is will be show in the middle.
#buyComponentTesting {
background-color: blue;
z-index: 999;
width: 200px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
But If you want to create like popup than use this
.container {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 999;
background: rgba(0, 0, 0, 0.3);
}
#buyComponentTesting {
background-color: blue;
width: 200px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="container">
<div id="buyComponentTesting">
</div>
</div>
I think, it will be helpful for you.

Preserving div ratio when height is the limiting factor

I am trying to create a "slide" div that is centered in the middle of the screen with a constant aspect ratio.
Combining this trick for centering and this one for the ratio, I came up with this:
HTML
<div class="slide">
<div class="slide-content">
Percentage sized and still centered.
</div>
</div>
CSS
/* slide centered in the middle of the screen + width = 80% */
.slide {
position: fixed;
width: 80%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: red;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
}
/* aspect ratio of 2:1 */
.slide:before{
content: "";
display: block;
padding-top: 50%;
}
/* stretch the content to the slide size */
.slide > .slide-content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 40px 60px;
transition: all 0.6s ease-in-out;
}
Fiddle is here: https://jsfiddle.net/3jph853w/
It works beautifully, expect on mobile in landscape view: the trick being based on width, the div is not resized properly and part of it "overflows" outside the screen. You can see it when you resize the fiddle output vertically.
How can I fix it ? I would rather keep it css only, with additional html markup is necessary. I am open to JS, but my project is Angular based and does not use jQuery.

This might be a start
Fiddle demo 100% of viewport
Fiddle demo 80% of viewport
html, body{
margin: 0;
}
.slide{
position: absolute;
width: calc(100vh * 2);
height: calc(100vw * 0.5);
max-width: 100vw;
max-height: 100vh;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.slide-content{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: red;
padding: 40px 60px;
box-sizing: border-box;
transition: all 0.6s ease-in-out;
}
<div class="slide">
<div class="slide-content">
Percentage sized and still centered.
</div>
</div>

add text-align:center; to the bottom of .slide > .slide-content {

CSS Scaled Div Centring

I am having an issue centring a <div id='divTwo'> inside another <div id='divOne'>. This is normal an easy thing to do, however in this instance i have transform: scale(); with transform-origin: 50% 50% 0px; applied on 'divTwo'
#divOne {
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
#divTwo {
width: 1024px;
height: 768px;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
border-left: 131px solid #333333;
border-right: 131px solid #333333;
border-top: 47.5px solid #333333;
border-bottom: 47.5px solid #333333;
border-radius: 55px;
}
if the scale applied to the transform and the window is larger than the outerWidth(), 'divTwo' has no issue centring. However when the 'divTwo' is scaled and the window is smaller or equal to the outerWidth(). The div will no longer centre, instead it will place its centre point to be right side of the browser, resulting if half the of 'divTwo' being off the right hand-side of the browser. Changing transform-origin: 50% 50% 0px; to transform-origin: 0% 50% 0px; works so long as you don't scale vertically, and vice versa.
jsfiddle example : https://jsfiddle.net/yvyz49zp/
Thank you. I feel like am missing something of obvious.

I knocked this up relatively quickly in jsfiddle - no javascript needed. Just play around with the values until you get something you like.
Code:
body {
background: lightblue;
}
#container {
display: inline-block;
position: absolute;
width: 50%;
right: 50%;
top: 50%;
transform: translate(50%, -50%);
}
#dummy {
margin-top: 75%; /* Using the dummy is the trick - it locks the aspect ratio (at 4:3 in this case) */
}
#device {
position: absolute;
top: 10%;
bottom: 10%;
left: 0;
right: 0;
background-color: #333;
border-radius: 10%;
}
#screen {
position: absolute;
width: 70%;
height: 80%;
background: #0f0;
right: 50%;
top: 50%;
transform: translate(50%, -50%);
}
<div id="container">
<div id="dummy"></div>
<div id="device">
<div id="screen"></div>
</div>
</div>