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>
Related
I need to build the following screenshot, and I can't figure out how to do the angles responsively:
https://imgur.com/a/e9IJV
I tried using pseudo classes to add diagonal edges to a solid-color div.
But this design requires two images side-by-side so that won't work there. Also, the slants have to stay on the same angle through different sections with variable heights. I can't use clip-path because I need to support IE.
Here is my feeble attempt:
https://codepen.io/lsterling03/pen/zPEgaq
As you can see, I am having trouble! Is this design possible? Do you have any advice on how to approach this? Will it require javascript?
UPDATE
I have made a little progress. Here is an updated pen:
https://codepen.io/lsterling03/pen/GOOqmo
I can't get the slant right on the last section, which needs a variable height and width. I tried using javascript, but I don't have the right calculations:
$(".slant").css('width', $('.main').width() * 0.5 - 100);
$(".slant").css('border-top-width', $('.main').height());
I also haven't figured out how to do two images in a row yet.
Does anyone have suggestions to fix either of the above issues?
Here is something you can work with:
Bootply: https://www.bootply.com/4QuGRXY11d
.container{position:relative;width: 500px; overflow:hidden;}
.flex{display:flex;overflow:hidden;}
.cinq{overflow:hidden;width:50%;height:150px;background:blue;}
.cinq + .cinq{oveflow:hidden;right:-25%;width:75%;height:150px;position:absolute; transform: skewX(-20deg) translateX(-50px);background:red;}
.flex + .flex .cinq + .cinq{transform: skewX(20deg) translate(-50px)}
.cinq .img{height:100%;background-size:cover; background-image:url(https://s-media-cache-ak0.pinimg.com/564x/ca/9b/ca/ca9bca4db9afb09158b76641ea09ddb6.jpg); position: absolute;
width: 100%;
top: 0;
left: -50px;transform: skewX(20deg);}
.flex + .flex .cinq + .cinq .img{transform: skewX(-20deg);}
<div class="container">
<div class="flex">
<div class="cinq">1</div>
<div class="cinq">
<div class="img"></div>
</div>
</div>
<div class="flex">
<div class="cinq">3</div>
<div class="cinq"><div class="img"></div></div>
</div>
</div>
And, here is another example that you can start to investigate some more: CodePen
body {
background-color: #00bcd4;
}
div { box-sizing:border-box; }
.row {
overflow: hidden;
position: relative;
width: 100%;
}
.image {
background: url(https://s-media-cache-ak0.pinimg.com/564x/ca/9b/ca/ca9bca4db9afb09158b76641ea09ddb6.jpg) center center no-repeat #eee;
background-size: cover;
height: 400px;
width: 50%;
float: right;
}
.image2{
background: url(https://s-media-cache-ak0.pinimg.com/564x/ca/9b/ca/ca9bca4db9afb09158b76641ea09ddb6.jpg) center center no-repeat #eee;
background-size: cover;
height: 400px;
width: 64.5%;
float: left;
-webkit-clip-path: polygon(0 0, 100% 0, 78% 100%, 0% 100%);
clip-path: polygon(0 0, 100% 0, 78% 100%, 0% 100%);
}
.image3{
background: url(https://s-media-cache-ak0.pinimg.com/564x/ca/9b/ca/ca9bca4db9afb09158b76641ea09ddb6.jpg) top left no-repeat #eee;
background-size: cover;
height: 400px;
width: 50%;
float: left;
-webkit-clip-path: polygon(28% 0, 100% 0, 100% 100%, 0% 100%);
clip-path: polygon(28% 0, 100% 0, 100% 100%, 0% 100%);
position: absolute;
right: 0;
}
.text {
background-color: #eee;
padding: 30px;
position: relative;
width: 50%;
float: left;
height: 400px;
}
.text > div {
position: relative;
z-index: 1;
}
.text2 {
height: 400px;
width: 50%;
float: left;
background: #fff;
padding: 30px
}
.corner:after {
transition: all .3s ease;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
position: absolute;
display: block;
content: "";
top: 0;
}
.corner-right:after {
border-left: 150px solid #eee;
border-top: 400px solid transparent;
border-right: 270px solid transparent;
}
.corner-left:after {
border-right: 150px solid #eee;
border-top: 400px solid transparent;
border-left: 270px solid transparent;
right: 50%;
}
i have 2 div like this
<div class="container">
<div class="one"></div>
<div class="two"></div>
</div>
CSS :
.container {
width:100%;
}
.one , .two {
width:50%;
display:inline-block;
}
I want to give this 2 divs a diagonal side color to be like this
I tried rotate but it gave me some white spot.
Can any one help me please ?
A single gradient on the parent will do the visual:
html {
min-height:100%;
background:linear-gradient(140deg, rgb(153, 180, 211)50%, rgb(217, 181, 150) 50%)
}
example on HTML background sized at 100% viewport's height at the minimum.
You can use clip paths and 2 div within a container,
https://codepen.io/anon/pen/OOXPmv
HTML
<div id="wrapper">
<div id="left"></div>
<div id="right"></div>
</div>
CSS
body, html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background: #ccc;
}
#wrapper {
width: 100%;
height: 100%;
background: #111;
}
#left {
position: absolute;
top: 0;
left: 0;
width: 101%; /* If you make it 100%, you get a bit of black showing along the diagonal */
height: 100%;
background: #99b4d3;
-webkit-clip-path: polygon(0 0, 76% 0, 24% 100%, 0% 100%);
clip-path: polygon(0 0, 76% 0, 24% 100%, 0% 100%);
}
#right {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
background: #d9b596;
-webkit-clip-path: polygon(76% 0, 100% 0, 100% 100%, 24% 100%);
clip-path: polygon(76% 0, 100% 0, 100% 100%, 24% 100%);
}
Try using an svg path css background property. See example below.
.container {
background: red;
height: 117px;
}
.one {
float: left;
width: 50%;
height: 117px;
background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 100 100' fill='blue' preserveAspectRatio='none'><path d='M0 0 L0 100 L50 100 L100 0 Z' /></svg>") no-repeat;
}
.two {
float: left;
width: 50%;
height: 117px;
}
<div class="container">
<div class="one"></div>
<div class="two"></div>
</div>
Without scale code works fine, but I need to center vertically an already scaled element. I am looking for solution using CSS or JS approaches.
Also I can not use transform-origin CSS property because it's unsupported in some browsers that I need to support...
https://jsfiddle.net/o62ja9r6/17/
.container {
position: fixed;
border: 2px dashed blue;
width: 400px;
height: 300px;
}
.slide {
position: absolute;
width: 76px;
height: 169px;
background-color: red;
}
.vertical-center {
top: 50%;
transform: scale(0.4) translateY(-50%);
/* transform: translateY(-50%); // <--- it works */
}
<div class="container">
<div class="slide vertical-center">
</div>
</div>
Order matters, swap translateY with scale.
.container {
position: fixed;
border: 2px dashed blue;
width: 400px;
height: 300px;
}
.slide {
position: absolute;
width: 76px;
height: 169px;
background-color: red;
}
.vertical-center {
position: relative;
top: 50%;
transform: translateY(-50%) scale(0.4);
}
<div class="container">
<div class="slide vertical-center">
</div>
</div>
Quick Explination
If you have an element that is 100px tall and you translate it along the y-axis by -50% it will move up 50% of it's height, which would be 50px. If you scale that 100px tall element first, down to 40% of it's height, then it will be 40px tall when you try to translate it along the y-axis, which will only move it up 20px.
Instead of translate you can use simple CSS for this
.vertical-center {
top: 0;
left:0px;
bottom:0px;
right:0px;
margin: auto;
transform: scale(0.4);
}
for working demo click here
I'm designing a little web page, just for practicing(I'm a begginer), and as the title says, I need to create a triangle with a background image.
I have this model that I created :
My website
I'm talking about the triangles on the up-right corner of the "posts"
The only way I know of creating a triagle is with borders in CSS, but that won't help because of the image I need to use.
Maybe you have other idea
Thanks !
Tell me if you need help getting this in to your own code, here's the example:
div {
position: absolute;
width: 128px;
height: 128px;
background-image: url(http://i.imgur.com/envk4PP.png);
background-repeat: no-repeat;
background-size: cover;
-webkit-clip-path: polygon(0 12%, 0 86%, 35% 50%);
clip-path: polygon(0 0%, 100% 100%, 100% 0%);
}
<div></div>
I have to do something similar for a website, this is my example. I hope you can use it.
.overheader{
padding: 40px 0;
-webkit-clip-path: polygon(0 0, 0% 0, 20.3% 100%, 0% 100%);
-moz-clip-path: polygon(0 0, 0% 0, 20.3% 100%, 0% 100%);
clip-path: polygon(0 0, 0% 0, 20.3% 100%, 0% 100%);
background-image: url('http://www.todofermentacion.cl/assets/img/cerveza.png');
}
.page-header {
padding: 50px;
}
<div class="page-header">
<div class="overheader">
</div>
</div>
You have to modify the parameters of polygon to make the triangle anyway you want
Another option:
.post {
/* not important */
margin: 100px;
width: 10rem;
height: 5rem;
border: solid 1px black;
background: ivory;
padding: 1rem;
/* important */
position: relative;
overflow: hidden;
}
.post:after {
position: absolute;
display: block;
content: " ";
background-image: url(https://www.gravatar.com/avatar/614f3577183f1a9219884f73ec2538fd);
transform: rotate(45deg);
width: 50px;
height: 50px;
/* move it half the width*/
top: -25px;
right: -25px;
}
<div class="post">
Here is my post
</div>
:root{
--imageblockwidth: 105px;
--imageblockheight: 80px;
/*css variables*/
}
.imagediv {
width: var(--imageblockwidth);
height: var(--imageblockheight);
background-image: url(https://i.ytimg.com/vi/2fb-g_V-UT4/hqdefault.jpg);
background-size: contain;
background-repeat: no-repeat;
}
.imageoverlapper {
width: var(--imageblockwidth);
height: var(--imageblockheight);
box-sizing: border-box;
/*triangles using borders*/
border-top: var(--imageblockheight) solid rgba(0,0,0,0);
border-left: var(--imageblockwidth) solid yellow;
position: relative;
top : calc(-1*var(--imageblockheight));
}
<div class="imagediv"></div>
<div class="imageoverlapper"></div>
Just overlap rectangle with background image by triangle
I was trying to show a gif on my page and succeeded in showing it.
But now i want to show two gifs next to each other.
I was wondering is it possible to do so.
CSS
#loader {
position: fixed;
z-index: 1000;
margin-left: 0%;
margin-top: 0%;
height: 100%;
width: 100%;
background: rgba( 255, 255, 255, .8 ) url('../Images/loading.gif') 50% 50% no-repeat;
}
HTML
<div id="loader"></div>
Jquery
$(window).load(function () {
$('#loader').fadeOut(500);
});
Now can i add one more gif in background using url???
I tried following but it does not seem to work
#loader {
position: fixed;
z-index: 1000;
margin-left: 0%;
margin-top: 0%;
height: 100%;
width: 100%;
background: rgba( 255, 255, 255, .8 ) url('../Images/loading.gif') , url('../Images/ajax-loader.gif') 50% 50% ;
}
Check the fiddle
HERE
Code
div#loader {
background-image: url('http://www.misd.gov.sc/misdsd/Assets/programmer.gif'), url('http://www.misd.gov.sc/misdsd/Assets/programmer.gif');
background-repeat: repeat-y;
background-position: top left, top right;
width: 385px;
height: 100px;
border: 1px solid #000000;
}
You can have an element like this:
<div id="loader">
<span id='loadtxt'></span>
</div>
then two css classes like this:
#loader {
position: fixed;
z-index: 1000;
margin-left: 0%;
margin-top: 0%;
height: 100%;
width: 100%;
background: url('http://i837.photobucket.com/albums/zz296/sayalie30/loading.gif') 50% 50% no-repeat;
}
#loadtxt {
position: fixed;
z-index: 1000;
margin-left: 0%;
margin-top: 0%;
height: 100%;
width: 100%;
background: url('http://lotyd.xtgem.com/images/bg-loading.gif') 50% 70% no-repeat;
}
you can adjust it as per your need.
CSS3 does support multiple backgrounds (http://www.css3.info/preview/multiple-backgrounds/)
check out the examples below