I am looking for a way ONLY in CSS to adjust the height of a container <div> tag whenever one of its children have been rotated. I am very much aware (and can totally implement) a solution for this using JavaScript, but I was hoping to find a CSS solution.
This fiddle shows my quandary: http://jsfiddle.net/spryno724/yX56u/
HTML:
<div class="container">
<p>Test</p>
<img class="rotate" src="https://tse1.mm.bing.net/th?id=HN.608054218431465781&pid=1.7" />
</div>
CSS:
.container {
border: 1px solid red;
overflow: auto;
position: relative;
width: 100%;
}
.rotate {
-moz-transform: rotateZ(45deg);
-ms-transform: rotateZ(45deg);
-o-transform: rotateZ(45deg);
-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg);
position: absolute;
top: 160px;
}
Does anyone have any insight as to how to have the container automatically adjust its height regardless of the rotated object's natural height or rotation amount?
Personally I don't think it can be done with pure css. To calculate the height of the container you would need to do something like this:
heightContainer = sin(angleImg) * (widthImg + heightImg)
And that is something that just can't be done in pure css. You could use Javascript inside the css, or use something like Less to generate the code. But putting js inside your css is just awful (that's what you have js files for). And the Less solution would require set values for the angle and dimensions, and if those would be fixed you could just set the container height fixed as well...
Other then calculating the height, I don't see any solutions that could work. Making the img relative again won't help, since the transform won't be taken into account. And I tried playing with the answer to this related question (which is quite clever), but I don't think it can be applied to your case.
So imo: No, it can't be done with pure css But I would love to see someone prove me wrong!
Related
Is it possible to cut a triangle from a <div> like in the picture below?
The background is actually not just colour, but in my case is a blurred picture, so I can’t simply cover the green <div> with a brown triangle image. Is there some other CSS way to achieve this effect? Thanks.
The illusion of it is possible: http://jsfiddle.net/2hCrw/4/
Tested with: IE 9, 10, Firefox, Chrome, Safari on PC and iPad.
::before and ::after pseudo elements are skewed to provide a side of the triangle each.
Wrapper used for clipping skewed pseudo elements. You may be able to avoid this by using your outer container as the wrapper.
Elements can still be styled with borders, shadows, etc.
Anything underneath will show through properly.
Demo with borders and drop shadow: http://jsfiddle.net/2hCrw/8/
This demo also adds a tweak for iPad with Retina to prevent a gap between the element and the pseudo elements (either caused by drop shadow bleed or sub-pixel rendering behavior).
<div id="wrapper">
<div id="test">test</div>
</div>
#wrapper {
overflow: hidden;
height: 116px;
}
#test {
height: 100px;
background-color: #ccc;
position: relative;
}
#test::before {
content:"";
position: absolute;
left: -8px;
width: 50%;
height: 16px;
top: 100px;
background-color: #ccc;
-webkit-transform: skew(-40deg);
-moz-transform: skew(-40deg);
-o-transform: skew(-40deg);
-ms-transform: skew(-40deg);
transform: skew(-40deg);
}
#test::after {
content:"";
position: absolute;
right: -8px;
width: 50%;
height: 16px;
top: 100px;
background-color: #ccc;
-webkit-transform: skew(40deg);
-moz-transform: skew(40deg);
-o-transform: skew(40deg);
-ms-transform: skew(40deg);
transform: skew(40deg);
}
As an alternative, you can use a transparent image and "extend" the element above it with pseudo elements. I have answered a similar question regarding a circle cut from an element and show support options down to IE7 (as well as future options for true clipping/masking in CSS).
You can do something like this with CSS masks (examples):
http://codepen.io/anon/pen/vgbEH (anti-triangle mask)
http://codepen.io/anon/pen/pEufn (triangle mask)
I used clip-path: polygon(…) property but only my Chrome seems to support it; you could instead create polygon images and reference them with mask-image for broader support.
It isn't possible to cut from divs in css, but it is possible to use an image overlaying the div to make it look like it has been cut.
.triangle{
background-image: url('cut.png');
width: 24px; height: 24px;
z-index: 1;
position: absolute; top: 32px; left: 15px;
}
It looks like there’s a bit of a drop shadow on your <div> as well, which I’m guessing the triangle should respect.
CSS doesn’t currently provide a way to achieve this directly. One approach would be to create an image of the green bottom area of the <div> with the triangle cut-out in it (using e.g. Photoshop), set it as the background of a <div> inside your original <div>, and position it outside of your original <div>.
Here’s a JS Fiddle example that hopefully explains the idea:
http://jsfiddle.net/7y6nz/
I was trying to position the right edge of a div element 300px from the center of the page with the following code:
HTML:
<div id="content">
<div id="login">
<!-- login area -->
</div>
</div>
CSS:
#content {
width: 100%;
position: relative;
top: 0px;
}
div#login {
position: absolute;
text-align: right;
right: 50%;
transform: translate(300px, 0px);
}
However, strangely, this results in the div being moved to the right by 374px.
Is there anything I forgot to think about?
Or is there a better way to reach the same result?
Another solution without using transform -
use right: calc(50% - 300px);
See this JSFiddle first
Now check this fiddle
don't forget to widen the jsfiddle result window to see the result properly
Hope this works as you want. If this doesn't work then please feel free to share it, also check if another CSS is overriding some styles of the div, I doubt this is happening.
Well, as it turned out, the problem was not CSS, but Windows 10 settings. Be careful when measuring screenshots in GIMP while having set the general display size at 125%...
After that, all solutions worked fine, thanks!
I'm building a carousel/slideshow-type widget that rotates between 3 quotes. Let's say the markup looks like this:
<div class="carousel">
<blockquote>...</blockquote>
<blockquote>...</blockquote>
<blockquote>...</blockquote>
</div>
I want the three quotes to overlap in place, and I'll then transition their opacity property to create fade in/out transitions. My CSS looks something like this:
.carousel{
position: relative;
}
.carousel blockquote{
position: absolute;
top: 0px;
left: 0px;
}
Now if I leave it at this, the .carousel div will default to a height of 0px, and will not push the rest of the page's content down.
So I need to specify a height, but the problem is each quote can be of different length, and as a result each blockquote can have a different heights.
So my question is this: how can I make sure that the .carousel div stretches to fit the blockquote with the biggest height?
I'd prefer a pure-CSS solution, but if it doesn't exist, an elegant JS or jQuery solution works for me as well.
Here's my own answer, using a simple jQuery loop to find out which blockquote is the tallest:
var tallest = 0;
$('blockquote').each(function (i, e){
var h = $(e).height();
tallest = h > tallest ? h : tallest;
});
$('.carousel').height(tallest);
It turns out it is possible without JavaScript! All props to Hugo Giraudel for finding the solution:
http://codepen.io/HugoGiraudel/pen/d6006e5bb32f13d50d1ab07d6cadbc8f?editors=010
The trick is floating all blockquotes and giving them a width of 100%. Hugo was then able to use margin-left: -100%; instead of position: absolute and top: 0px to overlap them, which doesn't disrupt the normal flow of the layout.
Note that the JS code in there is only used to animate each blockquote's opacity (which could also be done in CSS, but that's another problem), not to set the layout.
I guess what you could eventually do is trying to center every blockquote vertically so that whatever their size is, and even if they overflow the container height, they remain centered anyway ?
Using that method maybe : http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
Classic problem and unsolvable without javascript.
If you want to do it without javascript I guess you could use a dirty hack like this: (if you know the width at least...)
<style>
.carousel{
position: relative;
border: solid 1px #000;
}
.carousel blockquote{
float: left;
width: 300px;
}
.carousel blockquote.next{
float: left;
margin-left: -340px;
width: 300px;
}
</style>
<div class="carousel">
<blockquote>...</blockquote>
<blockquote class="next">...<br>second</blockquote>
<blockquote class="next">...<br>...<br>third</blockquote>
</div>
The problem example can be seen here http://codepen.io/anon/pen/EDgiz.
As you can see, a square(1:1) proportion element is positioned perfectly fine. But two others - not.
Is there a pure CSS solution for such cases?
If not, what can you propose as gentle solution? Because I actually can position those with javascript manually, but i think that's more or less - dirty solution.
Just found a very delicate solution here: http://www.paulund.co.uk/absolute-center-images-with-css, using transform: translate() function
So my final example looks like this - http://codepen.io/anon/pen/EDgiz:
img{
position: absolute;
max-width: 100%;
max-height: 100%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
}
Works Awesome for me
I have tried using
In HTML:
<img src="../Resources/title.png" />
In CSS:
img {
width: 200%;
height: 200%;
}
But this scales the images based on the parent tag the image is in. If an image is 150px by 150px I want to scale it to 300px by 300px. I want this to work for all images no matter their size or parent tag. And I only want to use CSS. ideas?
You can do this with the scale() 2D transform, but being one of the flashy new CSS3 features support is incomplete at this time and you need vendor prefixes:
img {
-moz-transform: scale(2);
-ms-transform: scale(2);
-o-transform: scale(2);
-webkit-transform: scale(2);
transform: scale(2);
}
However I don't believe this takes into account the flow of content, as transforms are done on individual elements and as such do not affect layout. See also the transform-origin property.
If you need good browser support, or you need the content to reflow properly, you'll have to make do with an alternative such as using JavaScript or restructuring your HTML, such that the width and height properties will scale it correctly and affect element flow in a natural way.
You can't using CSS < Version 3 only.
When you set the width/height on an element it is relative to it's container.
Update, as it's been quite some time since this answer was posted.
As a commenter points out, this can be achieved by simply using the zoom CSS property. However, it's not recommended, as it was first implemented solely by IE, in the IE6/7 days, and never formalized into the W3C standard. Instead, what's commonly used nowadays is a CSS transform using the scale function.
More on the scale() CSS function:
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale
Example:
https://jsfiddle.net/2n5zLhz3/
You can enclose the image in a div and then set its size relative to the parent.
<style type="text/css">
.double{
display: inline-block;
}
.double img{
width: 200%;
}
</style>
<div class="double"><img src="../Resources/title.png"></div>
You can use min-width property on your image to force your width to be larger than its parent div, e.g.
.parent {
width: 300px;
height: 200px;
overflow: hidden;
}
img {
min-width: 200%;
/* center image */
margin-left: -50%;
height: auto;
}
<div class="parent">
<img src="https://upload.wikimedia.org/wikipedia/commons/b/bc/Information_example_page_300px.jpg" alt=""/>
</div>
You can double the image by taking the percent you need from window size.
p > img {
width:100%;
height:60vh;
}
"height:100vh;" means 100% from your browsing window.Just have to do the math.
Use the width 110%, because it is in a div and there was extra space.
img {
height: 400px;
width: 110%;
}