I'm trying to scale the elements in my body tag so that my website looks the same on differing screen sizes. However, when I apply transform: scale(), the fixed elements associated with bottom disappear. Why is this and how can I fix it?
css
body
{
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
-webkit-transform: scale(1, 1);
}
#invite
{
position: fixed;
bottom: 20px;
right: 31px;
text-align: center;
cursor: pointer;
}
The invite element disappears when I scale with 1.
It will be more helpful if you could include your code and I think you should use media query if you are trying to make your page responsive.
transform:scale(0.5) will create a new binding box for the position:fixed; element, (when that element is a child of the transformed item)
relevant Stackoverflow question
and further explanations in the chromium bug tracker
Example 'buggy' behaviour:
div {
margin: 20px;
padding: 20px;
}
.body {
background: olive;
min-height:600px
}
.main {
background: pink;
}
.bottom {
background: orange;
position: fixed;
bottom: 0;
}
.body:hover {
transform: scale(1)
}
<div class='body'>
<div class="main">
main content</div>
<div class="bottom"> bottom content </div>;
</div>
As for alternatives: responsive design; the general philosophy is to re-arrange elements into a single vertical stack as the viewport gets smaller.
Related
I have a link that has been rotated and fixed in the window. Problem is I don't know how to position it on the right edge without adding a negative position right.
Negative right position doesn't work when changing the screen sizes, so I need to find another solution..
Any ideas?
Codepen for reference also.
.section {
height: 100vh;
}
.section-one {
background-color: #f8f9fa;
}
.section-two {
background-color: #e9ecef;
}
.section-three {
background-color: #dee2e6;
}
.section-four {
background-color: #ced4da;
}
.fixed-link {
position: fixed;
top: 50%;
/* Need to be fixed to right without adding a negative position right */
right: 0;
transform: translateY(-50%);
transform: rotate(270deg);
transform-origin: 0 0;
}
<div class="container">
<div class="section section-one"></div>
<div class="section section-two"></div>
<div class="section section-three"></div>
<div class="section section-four"></div>
</div>
FIXED LINK
The reason why it doesn't stick to the edge with using transform rotate is because it adjusts the container of the text, but not the text itself which uses the containers borders to stick to the edge of the screen.
A proposed solution without having to use negative right position is to use writing-mode instead, this targets the text directly instead of its container with:
writing-mode: vertical-rl; // This makes your text appear vertical
You can read more about it here for more details: Writing-mode
Try this. although this is a few different on different screen sizes:
.section {
height: 100vh;
}
.section-one {
background-color: #f8f9fa;
}
.section-two {
background-color: #e9ecef;
}
.section-three {
background-color: #dee2e6;
}
.section-four {
background-color: #ced4da;
}
.fixed-link {
width: max-content;
position: fixed;
top: 50%;
/* Need to be fixed to right without adding a negative position right */
left: 95%;
transform: translateY(-50%);
transform: rotate(270deg);
transform-origin: 0 0;
}
<div class="container">
<div class="section section-one"></div>
<div class="section section-two"></div>
<div class="section section-three"></div>
<div class="section section-four"></div>
</div>
FIXED LINK
I have an arrow that I want to scale with screen size, But I don't understand why negative margin doesn't scale properly for different screens is it because of the rotation? http://jsfiddle.net/1yab70ns/:
Edit: I realized it is because of the space from the inline-block and I fixed it wiht float, but why doesn't it also scale with screen?
.pointer span {
width: 1.7vh;
height: 4.5vh;
background: #41291B;
border-radius: 5vh;
display: inline-block;
position: relative;
}
.pointer span:nth-child(1) {
transform: rotate(45deg);
}
.pointer span:nth-child(2) {
transform: rotate(-45deg);
margin-left: -0.3vh;
}
<div class="pointer" id="pointer">
<span></span>
<span></span>
</div>
By using transform: rotate without specifying the point around which rotation will take place, the system defaults to rotating about the mid point of each element. That, coupled with the natural distance between two block elements can cause a problem.
If we make the rotation about the mid point of the top of each element and just enough down so that when they turn they overlap at the top and start them off overlapping each other exactly you get a more aligned result. We don't need to compensate by using margin left, we absolutely know that they are rotating about the same point.
.pointer{
position:absolute;
top: 50%;
left:50%;
}
.pointer span {
margin: 0;
padding: 0;
width: 1.7vh;
height: 4.5vh;
background: #41291B;
border-radius: 5vh;
display: inline-block;
position: absolute;
transform-origin: 0.85vh 0.85vh;
}
.pointer span:nth-child(1) {
transform: rotate(
45deg
);
}
.pointer span:nth-child(2) {
transform: rotate(
-45deg
);
}
<div class="pointer" id="pointer">
<span></span>
<span></span>
</div>
I am using css transform: scale to animate the entering of a modal. The problem is that the text scale with the <div> that contains it.
How can I avoid?
I want to use scale because it is the suggested way for obtaining smoother animations.
Without your code, it is hard to give you a working answer.
Basically, you cannot exclude a child element from its parent element being scaled. You can accomplish what you want by separating the two elements.
There is more information here.
What you can do is transform both the container and text.
The container is scaled up, while the text is scaled down - so it appears to stay the same.
Here is a very basic example:
button:focus + div {
transform: scale(2);
}
button:focus + div p {
transform: scale(.5);
}
div {
width: 200px;
margin: 0 auto;
text-align: center;
background: black;
color: white;
}
<button>Click to scale box</button>
<div>
<p>Do not scale this text</p>
</div>
#MalloreeEady answer, I just enhanced the answer from the post. Text that are related from the parent container usually get affected by any transformation. To able to avoid that, you may need to create another tag inside or use the pseudo-elements.
h2 {
color: #ffffff;
}
.box {
position: relative;
width: 50%;
height: 50%;
padding: 10px;
text-align: center;
margin: 50px auto;
}
.box::before {
content: '';
position: absolute;
top: 0; left: 0;
display: block;
background: #000;
width: 100%;
height: 100%;
z-index: -1;
}
.box:hover::before {
-webkit-transform: scale(1.3);
-ms-transform: scale(1.3);
transform: scale(1.3);
}
<div class="box">
<h2>TEST TEXT</h2>
</div>
I have two right triangle images that I want to put together like this (solid colors only for example):
I can think of a couple of ways to do this:
Divs with background images, and positioning them on top of each
other
A similar approach to the above, but with images instead of divs
The problem comes from the fact that I want to be able to hover (and click) on each individual triangle and have it change it's state (such as change color on hover).
Both of my above solutions create the problem where one is on top of the other, and I cannot click or hover over the other. I was thinking of doing this with CSS shapes, but those usually involve borders and I don't know of a way to overlay the image on those.
I need to be able to accomplish this with just CSS and HTML, and ideally without an image map.
Is this what you want?
Edit: I didn't notice there was another answer with similar approach, had the answer window opened for awhile, sorry.
.container {
width: 100px;
height: 100px;
overflow: hidden;
position: relative;
}
.triangle {
position: absolute;
width: 100px;
height: 100px;
top: 0;
left: 0;
overflow: hidden;
}
.triangle:hover {
border: 1px solid red;
}
.top_right {
transform: skewX(45deg);
transform-origin: 0 0;
}
.top_right img{
transform: skewX(-45deg);
transform-origin: 0 0;
}
.bottom_left {
transform: skewX(45deg);
transform-origin: 0 100%;
}
.bottom_left img{
transform: skewX(-45deg);
transform-origin: 0 100%;
}
<div class="container">
<div class="triangle top_right">
<img src="http://www.avatarsdb.com/avatars/spongebob_happy.jpg">
</div>
<div class="triangle bottom_left">
<img src="http://www.avatarsdb.com/avatars/say_cheese.jpg">
</div>
</div>
Another option is to use css skew:
your html:
<div class="img-container">
<img src="http://www.natureasia.com/common/img/splash/thailand.jpg" />
</div>
<div class="img-container">
<img src="http://www.worddive.com/blog/wp-content/uploads/2014/06/nature-and-environment-course.jpg"/>
</div>
The css:
.img-container, .img-container img { width: 100%; height: 100%; }
.img-container {
overflow: hidden;
position: absolute;
transform: skewX(-68deg);
}
.img-container:first-child {
left: -.25em;
transform-origin: 100% 0;
}
.img-container:last-child {
right: -.25em;
transform-origin: 0 100%;
}
.img-container img {
transform: skewX(68deg);
transform-origin: inherit;
}
It will probably work better with square images, however you can play around with the skew until it looks right.
Check out this Fiddle or rotating the other way
Again, not 100% sure on browser compatibility tho. If you need to guarantee that all browsers render properly you might be best of using images.
I'm trying to have pure HTML text rotated vertically and be sided with horizontal HTML text.
Here's a example image of what I want to do. Can someone give me an idea of how to do this?
I have had a go at getting something like this to work. Have a look at the result here at jsFiddle.
I'm using a container div which is set to scale while keeping its height relative to its width using this approach.
Inside this container div I have set all div's to be absolutely positioned. To get the positioning of the rotated div's right I have set them to stick to the left bottom corner first, set their transform-origin to 0 0 and then rotated them -90 degrees using transform: rotate(-90deg);, then I have moved the second rotated div along a little by setting its left property.
I'm using em's for positioning to ensure the position of the div's changes depending on the size of their font.
I'm using a jQuery plugin named FitText to tune the div's font-size properties.
I've used transform: scale(); to stretch some of the div's contents.
You'll find it will take a little tuning of the FitText plugin settings, the em values of the div's top and left properties and the scaling to make your texts fit. But once you've got it right it will scale beautifully when changing the width of the container div.
If you want to change the aspect ratio of the container, you'd have to create your own transparent image with the right aspect ratio.
HTML
<div>
<div class="container">
<div>ABCDEFGHIJKLMNO</div>
<div>ABCDEF</div>
<div>ABCDEFGHIJKLMNO</div>
<div>HELLO</div>
<div>QRSTUVWXWZABC</div>
<div>DEFGHIJKL</div>
</div>
<img src="https://dl.dropboxusercontent.com/u/6928212/threebytwo.png" />
</div>
CSS
html, body {
width:100%;
height: 100%;
font-family:"Arial Black", "Arial Bold", Gadget, sans-serif;
}
body > div {
position: relative;
}
img {
display: block;
width: 100%;
}
div.container {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
border: 1px dashed black;
overflow: hidden;
}
div.container > div {
width: 100%;
position: absolute;
line-height: 1em;
background-color: #FFF;
}
div.container > div:nth-child(even) {
-webkit-transform:rotate(-90deg);
-webkit-transform-origin: 0 0;
transform:rotate(-90deg);
transform-origin: 0 0;
-moz-transform:rotate(-90deg);
-moz-transform-origin: 0 0;
bottom: -1em;
}
div.container > div:nth-child(odd) {
z-index: 1;
}
div:nth-child(3) {
top: 1.1em;
left: 1.6em;
}
div.container > div:nth-child(4) {
left: 1em;
}
div.container > div:nth-child(5) {
-webkit-transform: scale(1, 2);
-moz-transform: scale(1, 2);
transform: scale(1, 2);
top: 2.8em;
left: 3.8em;
}
div.container > div:last-child {
-webkit-transform: rotate(0deg) scale(1, 2);
-moz-transform: rotate(0deg) scale(1, 2);
transform: rotate(0deg) scale(1, 2);
top: 2.3em;
left: 2.3em;
}
JS
$(function () {
$("div.container > div:nth-child(1)").fitText(1.15);
$("div.container > div:nth-child(2)").fitText(0.8);
$("div.container > div:nth-child(3)").fitText(1.31);
$("div.container > div:nth-child(4)").fitText(0.75);
$("div.container > div:nth-child(5)").fitText(1.46);
$("div.container > div:nth-child(6)").fitText(0.9);
})
Here I made an example:
<!doctype html>
<html>
<head>
<style type="text/css">.vertical{
width: 0px;
word-wrap: break-word;color:grey;float:left;margin-left:10px;}
.horizontal{float:left;margin-left:10px;}
</style>
</head>
<body>
<div class="horizontal">l e t t e r s</div><br>
<div class="vertical">abc</div>
<div class="horizontal">l e t t e r s</div><br>
<div class="vertical">abc</div>
<div class="horizontal">l e t t e r s</div><br>
<div class="vertical">abc</div>
<div class="horizontal">l e t t e r s</div>
</body>
</html>