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%;
}
Related
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>
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>
I'm creating a website where I'll need to add a video. the video will be triggered using a javascript click event, the video is contained with an iframe.
The video when invoked needs to fit the height and with of the parent div. I'm using bootstrap layout to help me create a responsive layout.
I followed an example online but for some reason the video does not fit the entire width of the parent div.. I'm using the container fluid class with the col-**-12 grid layout.
I've included a jsfiddle link with an example of what I have implememnted.
https://jsfiddle.net/JuiceJay/rt9L69ya/6/
<div class="container-fluid remove-padding">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="vid_thumb embed-responsive embed-responsive-16by9" id="bio_vid">
<h1> A leader in the world of photography</h1>
<span id="play-btn"><img src = "http://www.rockinrranch.com/wp-content/themes/rockinr2013/images/play-button.png" alt = "thumb"/></span>
</div>
</div>
</div>
h1{
position: relative;
top: 240px;
text-align: center;
margin: 0 auto;
width: 70%;
color: #FFF;
letter-spacing: 0.2em !important;
font-family: "Arial Black", Gadget, sans-serif !important;
text-transform: uppercase !important;
font-weight: 100 !important;
font-style: normal;
font-size: 2em;
text-shadow: 0 4px 0 rgba(0, 0, 0, 0.1);
-moz-transition: .2s ease-in;
transition: .2s ease-in;
}
`.vid_thumb{
background-image: url('https://images3.alphacoders.com/823/thumb-1920-82317.jpg');
background-attachment: local;
background-repeat: no-repeat;
background-position: center center;
-webkit-background-size: cover;
-o-background-size: cover;
-ms-background-size: cover;
-moz-background-size: cover;
background-size: cover;
width: 100%;
height: 400px !important;
max-height: 400px !important;
margin: 0px;
padding: 0px;
filter: grayscale(60%);
-webkit-filter: grayscale(60%);
border: 1px solid green;
}
.vid_thumb img{
width: 100%;
height: auto;
margin: 0 auto;
}
span img{
width: 100%;
height: 100%;
margin: 0 auto;
}
#play-btn{
position: absolute;
overflow: hidden;
width: 100px;
height: 100px;
top: 50%;
left: 50%;
opacity: 0.3;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
display:none;
}
.vid_thumb:hover #play-btn{
display: block;
}
.vid_thumb:hover h1{
display:none;
}
#play-btn:hover{
opacity: 1;
}
.remove-padding{
padding: 0px !important;
}
document.getElementById('bio_vid').addEventListener('click', function() {
this.innerHTML = '<iframe class = "embed-responsive-item" src= "https://www.youtube.com/watch?v=t6uSHOp2Uj0" width="100%" height="400px allowfullscreen="false">';
if (document.getElementById('bio_vid').ended) {
document.getElementByTagName("iframe").style.display = 'none';
}
});
Somehow, if i use the col--6, and dive the grid in two, it fills the width of either but not col--12.. I've even tried using the bootstrap embed-responsive-16by9.
Or any help on ditching boostrap and implementing a whole new and easier method.
I would also like to know how to detect the end of a video through iframe using javascript.
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