How do I cutout shapes from a JS banner? - javascript

I am currently working on a PSD (pictured below) for a client and am looking for guidance on how to cut specific shapes from a JS slider. My initial thought process is to overlay css shapes at the bottom of the banner to get the desired effect, as shown in the picture.
I was wondering if there is an alternative to that method. I've looked around on the internet but can't find much info on what I'm trying to accomplish.
All advice welcomed. Thank you in advance.

You can also use viewport width to achieve this objective. I hope it is helpful to you.
.box {
width: 100%;
height: 300px;
position:relative;
background: #000;
}
.box:before
{
border-top:80px solid transparent;
border-left: 50vw solid #fff;
content: '';
position: absolute;
bottom: 0;
left: 0;
}
.box:after
{
border-top:80px solid transparent;
border-right: 50vw solid #fff;
content: '';
position: absolute;
bottom: 0;
right: 0;
}
<div class="box"></div>

You could use this tool for creating CSS clip-paths.
One example would be:
.container {
background-color: orangered;
width: 100%;
height: 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);
}
<div class="container"></div>

Related

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>

Making a complex shape like an octagon with css [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I want to create a octagon, with an inner octagon within in, the inner octagon will be divided in sections, with each section forming a new shape with names in it.
The octagon will also have trees at its edges. Any help is appreciated.
All have managed to do is create an octagon with the css below
#octagon {
width: 100px;
height: 100px;
background: green;
position: relative;
}
#octagon:before {
content: "";
width: 100px;
height: 0;
position: absolute;
top: 0;
left: 0;
border-bottom: 29px solid green;
border-left: 29px solid #eee;
border-right: 29px solid #eee;
}
#octagon:after {
content: "";
width: 100px;
height: 0;
position: absolute;
bottom: 0;
left: 0;
border-top: 29px solid green;
border-left: 29px solid #eee;
border-right: 29px solid #eee;
}
See image for clarity. Octagon image
To position other shapes inside the parent shape, you can use absolute positioning like this:
.div1 {
position:relative;
background:blue;
height:200px;width:200px;
clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
}
.other-shape {
position:absolute;
left:50px;top:50px;
width:100px;height:100px;background:red;
}
<div class="div1">
<div class="other-shape">
</div>
</div>

Style an iframe's wrapper div without css clip-path

I want to find a replacement for CSS's clip-path to assure cross-browser compatibility with internet explorer, edge and safari for the following issue.
The following example shows what I want to do, an iframe component wrapped in a style div with variable border size:
I was able to somewhat replicate this style with clip-path using rotated squares at the cutted out corners and removed the "excess" square with clip-path as you can see in the following image of my component:
The problem arises when I test this component in internet edge, since the latter does not have support to clip-path the squares are never clipped and it appears as so:
As you can verify my styled wrapper is not even similar to the original example, also it does not work in all browsers...
So I am asking for some guidance in what I can do to make this styled div wrapper be supported in all browsers and be somewhat more similar to the original example.
I have read this can be done with :before and :after div compositions but that does not allow me to completely wrap the iframe component. Also, I have read about svg masking which can not also be used due the reason of the former.
Any help is appreciated.
.preview {
width: calc(100vw / 20);
height: calc(100vh / 10);
background: rgba(83, 80, 131, 0.5);
cursor: pointer;
clip-path: polygon( 10px 0%, 100% 0%, 100% 0%, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0% 100%, 0% 100%, 0% 10px);
}
.border-corner {
transition: all 0.2s ease-in;
background: #e9f396;
transform: rotate(45deg);
bottom: -15;
right: -15;
width: 30px;
height: 30px;
position: absolute;
}
<div class="preview center">
<img class="image" src="https://static.independent.co.uk/s3fs-public/thumbnails/image/2017/09/12/11/naturo-monkey-selfie.jpg?w968" />
</div>
<div class="border-corner"></div>
You can consider a pseudo element over the iframe that you style using multiple background:
.box {
display:inline-block;
background:blue;
position:relative;
}
.box:before {
content:"";
position:absolute;
top:20px;
left:20px;
bottom:20px;
right:20px;
background:
/*top left corner*/
linear-gradient(to top left ,transparent 49.8%,blue 50%) top left/30px 30px,
linear-gradient(to top left ,transparent 49.8%,grey 50%) top left/37px 37px,
/*bottom right corner*/
linear-gradient(to bottom right,transparent 49.8%,blue 50%) bottom right/30px 30px,
linear-gradient(to bottom right,transparent 49.8%,grey 50%) bottom right/50px 50px,
/*borders*/
linear-gradient(grey,grey) top /100% 5px,
linear-gradient(grey,grey) bottom /100% 5px,
linear-gradient(grey,grey) right /5px 100%,
linear-gradient(grey,grey) left /5px 100%;
background-repeat:no-repeat;
}
iframe {
display:block;
margin:20px;
background:red;
border:none;
}
<div class="box">
<iframe scr=""></iframe>
</div>
If you can use mask, you can get a CSS only solution. Please note: That excludes IE 10 and IE 11 and it only works in Edge 18+ (partially).
caniuse.com
However, without clip-path or mask, I highly doubt you will find a solution which makes it look equal in every browser while also allowing you to see what's in the background (assuming you want that element to be "floating" via absolute positioning or something alike). For non-supporting browsers, maybe you should consider having a "simple" box.
.shape {
position: relative;
width: 200px;
height: 200px;
background: #c00;
box-shadow: 0 0 0 5px #000 inset;
overflow: hidden;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='47' height='49'%3E%3Cpath d='M11.23 0L0 11.23V49h35.77L47 37.77V0H11.23z'/%3E%3C/svg%3E") 0 0/200px 200px;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='47' height='49'%3E%3Cpath d='M11.23 0L0 11.23V49h35.77L47 37.77V0H11.23z'/%3E%3C/svg%3E") 0 0/200px 200px;
}
.shape:before,
.shape:after {
content: '';
display: block;
position: absolute;
}
.shape:before {
top: 0;
left: 0;
border-style: solid;
border-width: 55px 55px 0 0;
border-color: #000 transparent transparent transparent;
}
.shape:after {
bottom: 0;
right: 0;
border-style: solid;
border-width: 0 0 70px 70px;
border-color: transparent transparent #000 transparent;
}
.shape_content {
display: block;
width: 100%;
height: 100%;
border: 0 none;
}
<div class="shape">
<iframe src="#foo" class="shape_content"></iframe>
</div>

Split divs diagonally and responsively

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 would like to have a triangle in my web and filled it with images

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

Categories