I would like to transform one side of an element but on top different from bottom like in the image here:
I tried with:
transform-origin: left bottom;
transform: skewY(-3deg);
But it moves left side completelly (top and bottom).
Is it possible to do?
The CSS 2d transforms resize things from the centre of the object being resized - or at least they do in firefox - and I can't find any way to set the direction.
For example,
transform:scale(0.5,1);
doesn't crush the text by pushing it from the right to the left, it crushes it by going from the left and right to the middle.
JSfiddle showing off what I mean:
http://jsfiddle.net/two5uh16/
Is there any way to define which direction it should be going? I'm using dynamic content in the form of contenteditable=true, so some hacks mightn't work.
Alternatively, is there any way to change the width of text, as in stretching it?
Use transform-origin: X Y
In this example the scale will be performed from the top left corner:
DEMO
#scale1{
background:#FF0000;
transform:scale(0.5,1);
transform-origin: 0 0;
}
#scale1{
background:#FF0000;
transform:scale(0.5,1);
transform-origin: 0 0;
}
#scale2{
background:#0000FF;
transform:scale(2,1);
}
<p>This is where the edge is</p>
<div id="scale1">Hello</div>
<div id="scale2">Bye</div>
This question already has answers here:
Using percentage values with background-position on a linear-gradient
(2 answers)
Closed 3 years ago.
I'm currently playing around with CSS gradients and position, I kind of manage to do what I want but with lucky guesses but I'd like to understand how this actually all works.
For instance, here's the French flag (merci):
.serge_testDraw {
width: 10rem;
height: 10rem;
border: 0.2rem solid black;
background-image:
linear-gradient(to right, blue 0%, blue 100%)
, linear-gradient(to right, white 0%, white 100%)
, linear-gradient(to right, red 0%, red 100%)
;
background-size: calc(100% / 3) 100%;
background-repeat: no-repeat;
background-position: 0%, 50%, 100%;
}
How come the background position is 0%, 50, 100% instead of 0, 33.33%(a third), 66.66% (two third)?
Plus, I'm clueless how to position backgrounds whose size is 100%.
A percentage value for background-position does not position the origin of a background image with respect to the background positioning area. It positions the entire image. This means the dimensions of the image itself are also taken into account (after resizing it with background-size).
A background position of 100% 100% is analogous to right bottom, positioning an image such that the bottom right corner of the image touches the bottom right corner of the background area. Similarly, 50% 50% is analogous to center center, placing the midpoint of an image on the midpoint of the background area.
Imagine sliding a rectangular tile around the interior of a rectangular frame; moving it all the way to the right (i.e. 100%) means having its right edge touch the right side of the frame (since you can't slide it through the frame), and moving it to the bottom means having its bottom edge touch the bottom of the frame.
Generally speaking, for any background-position: x y where the two values are percentages, the x point of the image is aligned with the x point of the background area, and the y point of the image is aligned with the y point of the background area.
CSS2.1's description is painful to read so I'll quote CSS3 Backgrounds and Borders instead, where there's even a graphical example:
For example, with a value pair of ‘0% 0%’, the upper left corner of the image is aligned with the upper left corner of, usually, the box's padding edge. A value pair of ‘100% 100%’ places the lower right corner of the image in the lower right corner of the area. With a value pair of ‘75% 50%’, the point 75% across and 50% down the image is to be placed at the point 75% across and 50% down the area.
But if you're like me, and you're terrible at visualizing this in real time, then just think of a sliding puzzle instead.
Note that none of this applies to absolute values; absolute values do position the origin of the image. However, the reference point can be changed if you anchor the absolute value to the right and/or bottom sides, for example right 10px bottom 10px positions a background image 10 pixels away from the bottom right corner of the background area.
If you want to position a background image whose size is 100% of the background area, you won't be able to use a percentage, since you can't move a tile that fits its frame perfectly (which incidentally would make for either the most boring puzzle or the perfect prank). This applies whether the intrinsic dimensions of the background image match the dimensions of the element, or you explicitly set background-size: 100%. So, to position the image, you will need to use use an absolute value instead (forgoing the sliding-puzzle analogy altogether).
Like Woodrow said because of your background-size rule who gonna apply for each background, each background gonna take a third of your flag so 0% it's starting point for the first background.
Second one gonna take a third again but to be more easy to understand think 50% it's center more than 50% this is why he is in the middle and take a third of container. You can use center instead of 50% if you want.
Here's mozilla's doc about background-position
The background-position property sets the position of the center of the background. You've specified that all backgrounds have a width of calc(100%/3) and a height of 100%, then you've specified the x-position for the center of each of the three backgrounds (the y-position defaults to 50%).
I know the typical way to use a sprite with background-position is to reference the images in the sprite using the upper left hand corner and provide negative coordinates. I have a rounded rectangle that I am using for buttons and I want to provide the coordinate for the upper right hand corner of the rectangle and and have it repeat-x to the left of the right edge of the triangle. Any thoughts?
From what I think you are asking, it sounds like you want to use this rule:
background-position: 100% 0;
or
background: url(image.png) repeat-x 100% 0;
That should push the background image over so that is matches up with the right side of whatever element it is in.
If I have a 1000x3000 px image and I use a negative background position, how does this exactly work?
I thought it worked by moving to the left 209 pixels then moving up 2 pixels and then showing the part that actually is left, but it seems to do the opposite of that.
Background position property actually moves the background image itself relative to the element. For the instance if you use {background-position: 0 0} that means you are positioning (0,0) which is top left of your image to the top left of your html element.
The -ve left offset means you are moving the image towards left and the -ve top offset means moving the image upwards..
In above code first 0 refers to left offset and second 0 refers to the top offset..
{background-position: -209px -2px}
means you are moving your image 209px towards left and 2px upwards.
Hope this will help you.
You should interpret the negative signs as:
background-position: -x, -y; is the same as saying...
background-position: x pixels left, y pixels up;