div.scroll {
position:absolute;
-moz-transform: rotate(-7deg);
-ms-transform: rotate(-7deg);
-o-transform: rotate(-7deg);
-webkit-transform: rotate(-7deg);
background-color: #00FFFF;
width: 190px;
height: 250px;
overflow: scroll;
z-index:1;
margin:0 auto;
left:220px;
top:68px;
}
size {
max-width: 100%;
max-height:100%;
}
<div class="size"><div class="scroll"><iframe src="http://www.kopfkino-kollektiv.de"></iframe></div></div>
Im coding a portfolio site and i have a problem with iframe.
wether it has my given ratio OR it is responsive! i need both! as you can see in the screenshot i need to hover the iframe exaxtly over the ipads screen at all time ! can you guys help me?
HTML
<div class="size"><div class="scroll"><iframe src="http://www.kopfkino-kollektiv.de"></iframe></div></div>
CSS
div.scroll {
position:absolute;
-moz-transform: rotate(-7deg);
-ms-transform: rotate(-7deg);
-o-transform: rotate(-7deg);
-webkit-transform: rotate(-7deg);
background-color: #00FFFF;
width: 190px;
height: 250px;
overflow: scroll;
z-index:1;
margin:0 auto;
left:220px;
top:68px;
}
size {
max-width: 100%;
max-height:100%;
}
SCREENSHOT
now
should
Style the iframe to take up 100% width and height of parent container, and
Fix parent .scroll container to remove forced scrollbars via scroll:auto and either remove the whitespace or use font-size:0 to prevent issues caused by the whitespace in your markup (otherwise two sets of scrollbars may appear).
Adjust the iframe margin or position as needed to get the correct overlay. But you didn't include link to background image, so I can't show you this until you do that.
div.scroll {
position: absolute;
-moz-transform: rotate(-7deg);
-ms-transform: rotate(-7deg);
-o-transform: rotate(-7deg);
-webkit-transform: rotate(-7deg);
background-color: #00FFFF;
width: 190px;
height: 250px;
overflow: auto;
z-index: 1;
margin: 0 auto;
left: 220px;
top: 68px;
font-size: 0;
margin: 0;
padding: 0;
}
size {
max-width: 100%;
max-height: 100%;
}
iframe {
width: 100%;
height: 100%;
border: 0;
margin: 0;
padding: 0;
}
<div class="size">
<div class="scroll">
<iframe src="http://www.kopfkino-kollektiv.de"></iframe>
</div>
</div>
Related
Is it possible to have a div with a background image which has a skewed bottom AND round corners?
Most examples use only a background color which doesn't have the duplicate image problem that a background image has.
CSS clipping path
The clipping path option works however, it has no support on IE 11.
Closest solution so far
The HTML:
<div class="container">
<div id="parallelogram">
<div class="image"></div>
</div>
</div>
The CSS:
.container {
overflow: hidden;
padding-bottom: 40px;
}
#parallelogram {
width: 300px;
height: 150px;
margin: -41px 0 0 0;
-webkit-transform: skewY(-11deg);
-moz-transform: skewY(-11deg);
-o-transform: skewY(-11deg);
background: red;
overflow: hidden;
position: relative;
border-radius: 40px;
}
.image {
background: url(http://baconmockup.com/340/500);
position: absolute;
top: -30px;
left: -30px;
right: -30px;
bottom: -30px;
-webkit-transform: skewY(11deg);
-moz-transform: skewY(11deg);
-o-transform: skewY(11deg);
}
https://jsfiddle.net/Spindle/81e30bmx/
But the problem with this is that the round corners aren't visible anymore as well...
Adding border-radius to parent div could work, as it will work as border-radius for four corner and then individually using border-top-right-radius, border-top-left-radius,border-bottom-right-radius,border-bottom-left-radius you can change and align accordingly as below and thus it skews at bottom-left along-with border-radius at 4 sides,
.container {
overflow: hidden;
padding-bottom: 40px;
border-top-right-radius:16px;
border-bottom-right-radius:14px;
border-top-left-radius:40px;
margin-top:40px;
display:inline-block;
}
#parallelogram {
width: 300px;
height: 150px;
margin: -41px 0 0 0;
-webkit-transform: skewY(-11deg);
-moz-transform: skewY(-11deg);
-o-transform: skewY(-11deg);
background: red;
overflow: hidden;
position: relative;
border-radius: 40px;
}
.image {
background: url(http://baconmockup.com/340/500);
position: absolute;
top: -30px;
left: -30px;
right: -30px;
bottom: -30px;
-webkit-transform: skewY(11deg);
-moz-transform: skewY(11deg);
-o-transform: skewY(11deg);
}
<div class="container">
<div id="parallelogram">
<div class="image"></div>
</div>
</div>
It is possible and does seems to work on your example.
If you are talking about the top left and right corners getting chopped off, then what you need to do is add a margin to the top so:
#parallelogram { margin: -41px 0 0 0; }
Would become:
#parallelogram { margin: 23px 0 0 0; }
This will adds the hole shape in.
i have this, and i would like to keep the img normal and rotate the div to a parallelogram, which i managed like this
.parallelogram {
width: 180px;
height: 60px;
overflow: hidden;
-webkit-transform: skew(-21deg);
-moz-transform: skew(15deg);
-o-transform: skew(15deg);
position: relative;
}
.img {
position: absolute;
width: 440px;
height: 150px;
-webkit-transform: skew(21deg);
-moz-transform: skew(-15deg);
-o-transform: skew(-15deg);
left: 10px;
top: -10px;
}
<div class="parallelogram">
<div class="img">
<img src="https://archive.org/download/AILS-A79-7082/A79-7082.jpg" alt="">
</div>
</div>
My problem is that the img keeps its parent width.
even though i ask it to be 440px its 180px. and i dont understand why.
I tried with vw, and % and none of it works!
Thank you in advance
.parallelogram {
width: 180px;
height: 60px;
overflow: hidden;
-webkit-transform: skew(-21deg);
-moz-transform: skew(15deg);
-o-transform: skew(15deg);
position: relative;
background-color:blue;/*added for testing*/
}
.img {
position: absolute;
width: 440px;
height: 150px;
-webkit-transform: skew(21deg);
-moz-transform: skew(-15deg);
-o-transform: skew(-15deg);
left:-20px;
right:0px;
top:-10px;
background-color:red;/*added for testing*/
opacity: 0.5;/* makes overlap area purple*/
}
<div class="parallelogram">
<div class="img">
<img..../>
</div>
</div>
I made left:-20px; and right:0px; to make the img appear like parallelogram.
I found this Is there are way to make a child DIV's width wider than the parent DIV using CSS? so I wanted to give it try. I hope this helps.
For the image to take the width of the .img div, you also need this rule, since the <img> tag is a child of the div with class .img:
.img img {
width: 100%;
height: auto;
}
(height: auto; is actually not necessary, since it's the default)
ADDITION AFTER COMMENT:
You have to remove overflow: hidden; from the outer DIV:
.parallelogram {
width: 180px;
height: 60px;
-webkit-transform: skew(-21deg);
-moz-transform: skew(15deg);
-o-transform: skew(15deg);
position: relative;
background-color: blue;
/*added for testing*/
}
.img {
position: absolute;
width: 440px;
height: 150px;
-webkit-transform: skew(21deg);
-moz-transform: skew(-15deg);
-o-transform: skew(-15deg);
left: -20px;
right: 0px;
top: -10px;
background-color: red;
/*added for testing*/
opacity: 0.5;
/* makes overlap area purple*/
}
.img img {
width: 100%;
height: auto;
}
<div class="parallelogram">
<div class="img">
<img src="http://placehold.it/180x60/#0d0"/>
</div>
</div>
I’m making a diamond shape for a user’s image with the help of this CodePen demo.
But when I change the width and height according to my content the shape will disturb: see my JSFiddle Demo.
In the selector .losange, .losange div the original values for width and height are both 250px and in .losange .los1 they’re both 355px.
Here is my code:
.losange, .losange div {
margin: 0 auto;
transform-origin: 50% 50%;
overflow: hidden;
width: 130px; /* originally 250px */
height: 130px; /* originally 250px */
}
.losange {
transform: rotate(45deg) translateY(10px);
}
.losange .los1 {
width: 130px; /* originally 355px */
height: 130px; /* originally 355px */
transform: rotate(-45deg) translateY(-74px);
}
.losange .los1 img {
width: 100%;
height: auto;
}
You need to calculate right translate values:
.losange, .losange div {
margin: 0 auto;
transform-origin: 50% 50%;
overflow: hidden;
width: 92px;
height: 92px;
}
.losange {
transform: rotate(45deg) translateY(10px) translateX(10px);
}
.losange .los1 {
width: 130px;
height: 130px;
transform: rotate(-45deg) translateY(-27px);
}
.losange .los1 img {
width: 100%;
height: auto;
}
<div class="losange">
<div class="los1">
<img src="http://photos-d.ak.instagram.com/hphotos-ak-xpa1/10483342_1471091656483347_532843009_n.jpg" />
</div>
</div>
UPDATE:
Changed sizes - now Losange width is 130 pixels.
I'm trying to create a div with relative height and width, in which are three boxes, being diagonally aligned and also fill the complete space of the relative parent div.
It's kinda tough for me to explain, so here's a picture on how I mean it: http://i.imgur.com/s2uSTVU.png
Besides the little space between the red lines all the space should be covered by the diagonal boxes.
Is that possible somehow? I'm very grateful for every advice or tip someone can shoot me!
Following code is what I got so far. The problem now where I'm stuck is how to make the diagonal divs fill out the complete space around them.
<div class="parent">
<div class="box-1">box1</div>
<div class="box-2">box2</div>
<div class="box-3">box3</div>
</div>
CSS:
.box-1 {
-ms-transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
width: 100%;
margin: 0px 0px 10px 0px;
height: 33.33%; }
.box-2 {
-ms-transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
width: 100%;
margin: 0px 0px 10px 0px;
height: 33.33%; }
.box-3 {
-ms-transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
width: 100%;
height: 33.33%; }
Greetings, Toumazi!
You could try that: fiddle
.parent {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
.parent > div {
background: #c1c1c1;
}
.box-1 {
-ms-transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
width: 100%;
margin: 0px 0px 10px 0px;
height: 33.33%; }
.box-2 {
-ms-transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
width: 100%;
margin: 0px 0px 10px 0px;
height: 33.33%; }
.box-3 {
-ms-transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
width: 100%;
height: 33.33%; }
I am working on a project where I have a div diamond of pictures that needs to be responsive.
The picture below shows the diamond in div I have created, but it doesn't work in all sizes. I want the diamond to react responsively to the browser size, so it always fits.
I have a jsFiddle, but it is not responsive. Just to show what I want, and I have been trying to create.
<div id="page">
<div id="main">
<div class="box blue"></div>
<div class="box green"></div>
<div class="box red"></div>
<div class="box yellow"></div>
</div>
</div>
#page {
width:100%;
height:100%;
min-height:500px;
min-width:500px;
}
#main {
height:80px;
width:80px;
position:relative;
display:block;
transform: rotate(45deg);
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Safari and Chrome */
}
.box {
display: inline-block;
height:35%;
width:35%;
margin-right:5%;
margin-top:5%;
}
.blue {
background-color:blue;
}
.green {
background-color:green;
}
.red {
background-color:red;
}
.yellow {
background-color:#ffd54f;
}
Any help is very much appreciated :-)
Start with a responsive base:
#main {
width: 35%;
height: 0;
position: relative;
padding-bottom: 35%;
border: solid 1px black;
margin: auto;
}
The trick is to set the vertical dimension as padding percentage, that is calculated on the width of the parent. (So it is always a square)
Now set the diamonds, translated as percentages.
.box {
height:100%;
width:100%;
position: absolute;
}
.blue {
background-color:blue;
-webkit-transform: translate(-75%, 100%) rotate(45deg);
}
.green {
background-color:green;
-webkit-transform: translate(0, 25%) rotate(45deg);
}
.red {
background-color:red;
-webkit-transform: translate(75%, 100%) rotate(45deg);
}
.yellow {
background-color:#ffd54f;
-webkit-transform: translate(0, 175%) rotate(45deg);
}
fiddle
EDIT: OK it can be done with CSS alone. Updated fiddle here:
http://jsfiddle.net/5CfNb/5/
Not sure if this can be done with CSS alone, but here's my solution using a few lines of jQuery. Depending on the aspect ratio though, it won't be a perfect 'diamond', so still needs some tweaking. But I hope this helps.
$('#main').height($(window).height());
$('#main').width($(window).width());
$(window).resize(function() {
$('#main').height($(window).height());
$('#main').width($(window).width());
});
http://jsfiddle.net/5CfNb/4/
This could also help you a bit: http://jsfiddle.net/maximgladkov/bJLYn/1/
#main {
position: absolute;
top: 50%;
left: 50%;
margin: -15% 0 0 -15%;
height: 0px;
width: 30%;
padding-top: 30%;
overflow: visible;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.box {
display: block;
width: 45%;
height: 45%;
position: absolute;
}
.blue {
background: blue;
top: 0;
left: 0;
}
.green {
background: green;
top: 0;
right: 0;
}
.red {
background: red;
bottom: 0;
right: 0;
}
.yellow {
background: #ffd54f;
bottom: 0;
left: 0;
}