I want to create a blur effect like the blue and green in the image
.right-wrapper {
width: 50%;
display: flex;
justify-content: flex-start;
align-items: center;
position: relative;
}
.right-wrapper .backdrop-filter-top {
width: 70%;
height: 70%;
position: absolute;
left: 5%;
top: 5%;
background-color: #43d9ad;
clip-path: polygon(25% 0%, 75% 35%, 100% 100%, 75% 100%, 5% 90%, 0 20%);
opacity: 0.4;
filter: blur(87px);
}
.right-wrapper .backdrop-filter-bottom {
width: 70%;
height: 70%;
position: absolute;
right: 5%;
bottom: 5%;
background-color: #4d5bce;
clip-path: polygon(0 0, 80% 0, 100% 45%, 80% 100%, 10% 70%, 0 25%);
opacity: 0.4;
filter: blur(87px);
}
<div class="right-wrapper">
<div class="backdrop-filter-top" />
<div class="backdrop-filter-bottom" />
</div>
Dont want to add the radial gradients or even okay with radial gradients, but this kind of blur is not coming properly
It doesn't work, because i was using the clip-path, not sure why, so when i remove clip-path, it worked
I have used clip-path in the div, so the filter blur option doesn't work, after I remove the clip-path, the filter blur option works perfectly,
Related
How could I create a border somewhere among the lines of this?
I've tried using linear gradients for backgrounds (found here) but can't seem to get it to draw the shape I'm looking for.
You could use before and after pseudo elements on the main element to create a background. One would be a red rectangle, and in front of it a white rectangle with CSS clip-path used to get the shape.
Here's an example. Obviously change the % values to be what you want (could be px if that is required).
body {
background: black;
width: 100vw;
height: 100vh;
}
div {
width: 30vmin;
height: 50vmin;
display: inline-block;
position: relative;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
div::before,
div::after {
position: absolute;
content: '';
left: 0;
right: 0;
width: 100%;
height: 100%;
z-index: -1;
}
div::before {
background: red;
}
div::after {
background: white;
clip-path: polygon(5% 5%, 50% 0, 95% 5%, 100% 30%, 100% 70%, 95% 95%, 70% 100%, 30% 100%, 5% 95%, 0 70%, 0 30%);
}
<div></div>
If you are looking for a gradient, here is an idea using conic-gradient. All you have to do is adjust a few variables to control the shape
.box {
--size: 15px;
--angle: 250deg;
--g: red var(--angle), lightblue 0; /* the colors here */
background:
conic-gradient(from calc(var(--angle)/-2 - 45deg)
at top var(--size) left var(--size),var(--g)) top left,
conic-gradient(from calc(var(--angle)/-2 + 45deg)
at top var(--size) right var(--size),var(--g)) top right,
conic-gradient(from calc(var(--angle)/-2 - 135deg)
at bottom var(--size) left var(--size),var(--g)) bottom left,
conic-gradient(from calc(var(--angle)/-2 + 135deg)
at bottom var(--size) right var(--size),var(--g)) bottom right;
background-size: 51% 51%;
background-repeat: no-repeat;
width: 300px;
height: 300px;
display: inline-block;
}
<div class="box"></div>
<div class="box" style="--size:10px; --angle: 255deg"></div>
Hi there I'm trying to build the current design
I used the skew transform but the whole div skewed not on border
tried using clip-path but I cant use border radius with it
any ideas?
As the outline is just visual rather than having meaning we can add it without adding extra elements in the DOM. We can do this with CSS pseudo elements which paint the border - the top one being skewed, the bottom one not.
Essentially this snippet is using a combination of your two methods - skew and clip-path - to give this:
.container {
background-color: pink;
display: inline-block;
padding: 2vmin;
}
.container>* {
width: 20vmin;
height: 10vmin;
position: relative;
}
.container>*::before,
.container>*::after {
content: '';
top: 0;
left: 0;
border: 1px red solid;
border-radius: 10px;
width: 100%;
height: 100%;
position: absolute;
}
.container>*::before {
transform: skew(0, -5deg);
clip-path: polygon(0 0, 100% 0, 100% 80%, 0 80%);
}
.container>*::after {
clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
}
<div class="container">
<div></div>
</div>
Try having another div as the container of your div, then use the skew transform on that. If that still skews the inner div, you can try having another div that has position: absolute; and position it over your div, then skweing it. It will have to be transparent.
Try this:
div {
position: relative;
display: inline-block;
padding: 1em 5em 1em 1em;
overflow: hidden;
color: #fff;
}
div:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
-webkit-transform-origin: 100% 0;
-ms-transform-origin: 100% 0;
transform-origin: 100% 0;
-webkit-transform: skew(-45deg);
-ms-transform: skew(-45deg);
transform: skew(-45deg);
z-index: -1;
}
<div>slanted div</div>
And then just reverse it
I have been trying to make a custom shape with a border and transparent background.
The initial approach, i tried was with transfrom skew but that couldn't give me the shape i was after.
I have also been experimenting with clip paths, my first attempt i managed to control the angle based off the height and also the right padding, which is a benefit. I would prefer to use this for that reason but unfortunately putting border on it doesn't work.
I found a bit online about having a shape inside a shape but then i cant have a clear background but its the shape i'm after.
If any one knows how i can create this shape either amending the code i tried using or a different approach i haven't thought about that would be great.
For visual reference this is what i'm trying to achieve.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<style>
:root {
--cta-height: 60px;
--cta-angle: calc(var(--cta-height) - 20px);
--cta-side-padding: 40px;
--cta-height-inner: calc(var(--cta-height) - 4px);
--cta-angle-inner: calc(var(--cta-height-inner) - 20px);
}
.img1 {
background: url("https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg");
}
.bk-image {
background-repeat: no-repeat;
background-size: cover;
background-position: center;
padding: 50px;
}
/* attemp one with angle and right padding based off of the height */
.cta {
clip-path: polygon(0% 0%, 100% 0%, calc(100% - var(--cta-angle)) 100%, 0% 100%);
-webkit-clip-path: polygon(0% 0%, 100% 0%, calc(100% - var(--cta-angle)) 100%, 0% 100%);
display: flex;
align-items: center;
height: var(--cta-height);
padding-right: calc(var(--cta-angle) + var(--cta-side-padding));
padding-left: var(--cta-side-padding);
margin-bottom: 50px;
}
.cta__ora {
border: 2px solid orange;
color: #ffffff;
}
.flex-p {
display: flex;
align-content: center;
}
/* attemp two */
.outside {
position: relative;
background: tomato;
clip-path: polygon(0% 0%, 100% 0%, calc(100% - var(--cta-angle)) 100%, 0% 100%);
-webkit-clip-path: polygon(0% 0%, 100% 0%, calc(100% - var(--cta-angle)) 100%, 0% 100%);
height: var(--cta-height);
padding-right: calc(var(--cta-angle) + var(--cta-side-padding));
padding-left: var(--cta-side-padding)
}
.inside {
position: absolute;
top: 4px;
left: 4px;
right: 4px;
bottom: 4px;
background: white;
clip-path: polygon(0% 0%, calc(100% - 4px) 0%, calc(100% - var(--cta-angle)) 100%, 0% 100%);
-webkit-clip-path: polygon(0% 0%, calc(100% - 4px) 0%, calc(100% - var(--cta-angle)) 100%, 0% 100%);
}
</style>
</head>
<body>
<div class="bk-image img1 ">
<div class="flex-p">
<a class="cta cta__ora">clip path angle adjust from the height</a>
</div>
<div class="outside">
<div class="inside">
hello
</div>
</div>
</div>
</body>
</html>
You can work a little bit with ::after and position like a slash
body {
background: url("https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg") no-repeat;
}
.inside {
height: 50px;
width: 300px;
border: 2px solid black;
display: flex;
align-items: center;
justify-content: center;
position: relative;
clip-path: polygon(0 0, 100% 0%, 89% 100%, 0% 100%);
}
.inside::after {
content: "";
position: absolute;
height: 65px;
width: 300px;
top: -2px;
right: -1.5px;
border-right: 2px solid black;
transform: rotate(31.8deg);
transform-origin: right top;
}
<div class="inside">
Find out more
</div>
I was wondering if it was possible to split a screen into 2 parts diagonally as shown on the picture. Once I'd hover over Picture A, the diagonal line would shift a bit to the right, revealing more of picture A while hiding a bit of picture B (I'm thinking transition?), and when I'd hover over picture B the opposite would happen.
Thanks in advance,
Martin
The diagonal image transition effect is unique request. I tried my best, Can you please check revealing effect.
section {
border: 1px solid black;
display: flex;
width: 400px;
box-sizing: border-box;
}
.diagonalHover {
position: absolute;
width: 66%;
height: 200px;
transition: all 0.3s ease-out;
}
.diagonalHover.first,
.diagonalHover.second {
background-image: url(https://cdn.pixabay.com/photo/2016/07/20/22/33/vajdahunyadvar-1531470_960_720.jpg);
background-repeat: no-repeat;
background-size: cover;
}
.diagonalHover.second {
background-image: url(https://cdn.pixabay.com/photo/2020/02/05/22/17/vendetta-4822543__340.jpg);
}
.diagonalHover.first:hover {
width: 75%;
z-index: 1;
}
.diagonalHover.second:hover {
width: 75%;
z-index: 1;
}
.diagonalHover.first:hover + .second {
}
.diagonalHover.first {
left: 0;
top: 0;
-webkit-clip-path: polygon(0 0, 100% 0%, 50% 100%, 0% 100%);
clip-path: polygon(0 0, 100% 0%, 50% 100%, 0% 100%);
}
.diagonalHover.second {
right: 0;
top: 0;
-webkit-clip-path: polygon(50% 0, 100% 0%, 100% 100%, 0% 100%);
clip-path: polygon(50% 0, 100% 0%, 100% 100%, 0% 100%);
}
<section>
<div class="diagonalHover first">
</div>
<div class="diagonalHover second">
</div>
</section>
I'm trying to create a border to my clip path using pseudo-elements. I have already tried to change positioning in them and my pseudoelement still stay on top of it. How can I change this?
You can see my code in here.
#shield {
z-index: 1;
background-color: red;
box-shadow: 1px 1px 1px black;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/9/91/Bras%C3%A3o_Porto_Feliz.png");
background-size: 50%;
background-repeat: no-repeat;
background-position: center;
background-blend-mode: multiply;
display: inline-block;
height: 120px;
width: 200px;
-webkit-clip-path: polygon(100% 0, 100% 75%, 50% 100%, 0% 75%, 0 0);
clip-path: polygon(100% 0, 100% 75%, 50% 100%, 0% 75%, 0 0);
}
#logo {
width: 100px;
height: 100px;
}
#shield::before {
top: 0;
left: 0;
transform: scale(1.2);
content:"";
display: block;
width: 100%;
height: 100%;
background-color: black;
position: absolute;
z-index: -1;
}
<div class="navbar-brand navbar-brand-centered" id="shield">
</div>
To see what I wanted to be in top of things, just delete the ::before element
Full example is in here
Thanks in advance :)
Just flip it around. Use your background image in your ::after and your black color for the actual div.
#shield {
z-index: 1;
background-color: black;
box-shadow: 1px 1px 1px black;
position: relative;
display: inline-block;
height: 120px;
width: 200px;
-webkit-clip-path: polygon(100% 0, 100% 75%, 50% 100%, 0% 75%, 0 0);
clip-path: polygon(100% 0, 100% 75%, 50% 100%, 0% 75%, 0 0);
}
#logo {
width: 100px;
height: 100px;
}
#shield::before {
top: 0;
left: 0;
transform: scale(1.2);
content:"";
display: block;
width: 100%;
height: 100%;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/9/91/Bras%C3%A3o_Porto_Feliz.png");
background-repeat: no-repeat;
background-position: center;
background-blend-mode: multiply;
position: absolute;
z-index: 1;
background-size: 50%;
}
<div id="shield"></div>