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>
Related
I'm putting together a webpage which has a large image on the left side, and I'd like to have it seem tilted away from the viewer. I know that the transform function isn't quite capable of it. Is there a way to keystone an image using only CSS? If not, is there some extension to the language that I could safely (i.e. in a cross-browser manner) use to create this effect programmatically? For reference, keystoning as a visual effect looks like this: Keystone diagram. It is not the same thing as a skew, and it is an image distortion, rather than a crop.
It sounds like you're looking for axial rotations with perspective. Suppose that you have two nested divs, #back and #fore. The following CSS will achieve the effect. See also http://jsfiddle.net/4j8pn/6/. (In general, by the way, -webkit-transform is capable of any 3D transformation.)
#back {
margin:25px;
width:300px;
height:200px;
background-color:#555;
/* pull the viewer back; without this the div will look flat */
-webkit-perspective: 1000px;
}
#fore {
width:300px;
height:200px;
background-color:#999;
/* set origin to upper left (default is center) to get desired look */
-webkit-transform-origin: 0 0 0;
/* rotateY tilts the div like a door, rotateX tilts it like an awning */
-webkit-transform: rotateY(35deg);
}
<div id="back">
<div id="fore">
<img src="image_to_tilt.png"/>
</div>
</div>
I need to allocate some background image to a certain div, the thing is it needs to be positioned from right and not the usual left in CSS. So when defining background-position, it can read, say , right, or some big percentage (which is also calculated from the left side of the screen but anyway works) and.. that's it. I cannot use pixels and get it to go with a fix distance from the right side of its container. Am I right here? So, is there a work-around for this? Anything to do with LESS if that helps? Theoretically, I can have it set to right and somehow decrease a couple of pixels then.
We have margin-right:+-px, padding-right:+px, but not background-position-right:+-px ?
background-position: right 20px;
https://developer.mozilla.org/en-US/docs/CSS/background-position
JSBIN example: http://jsbin.com/ixejey/1/
UPDATE:
Oops, I may have misunderstood the question. The above positions the background image to the right side and 20px from the top--but not a set distance away from the right side. I don't think you can do that at this time with CSS alone.
For now what you could do is instead of using a background image on the element directly, wrap the element inside a wrapper div, then add a second div to hold the "background" image and position it absolutely--which you can do from the right a specific distance.
Example of the alternative option:
<div id="yourContainer">
<div id="yourBackGroundImage"></div>
<div id="yourContent">your content</div>
</div>
css:
#yourContainer {
position: relative;
}
#yourBackGroundImage {
width: 100;
height: 100;
position: absolute;
right: 50px;
}
The first value (calc(100% - 0%)) is the horizontal position and the second value (calc(100% - 10%)) is the vertical. The top left corner is 0% 0%. The right bottom corner is 100% 100%. If you only specify one value, the other value will be 50%. . Default value is: 0% 0%
<div id="hero-content"></div>
CSS
#hero-content{
background-position:
calc(100% - 0%) /* 0px from the right */
calc(100% - 10%) /* 10% from the bottom */
}
<div id="background"></div>
and
#b {
height:100%;
width:100%;
background: ; //put background style here
}
I'm creating a wordpress theme and both sides of the content should have diagonally border. I can solve this with pictures but this is the ugly way and the content has not the same length on every page.
In this case i think two triangles on the right and left side is the correct solution. I tried it with this tutorial, but the problem is that I have to use fixed width for the borders and the triangle should have the height of the content, dynamically adjusted.
How can I solve this, that I come up with two triangles (marked red in the sketch).
You can achieve this (albeit somewhat imprecisely) with the CSS skew transform:
Demo: http://jsfiddle.net/cUWm2/2/
<div class="shape">
A variable amount of content.
</div>
.shape {
position: relative;
}
.shape:before {
content:"";
-moz-transform: skewX(10deg);
-webkit-transform: skewX(10deg);
transform: skewX(10deg);
width: 140%;
left: -20%;
height: 100%;
background-color: #555;
position: absolute;
top: 0;
z-index: -1;
}
This achieves the requested shape with minimal markup and decent (IE9+ and all other modern) browser support. However, when scaling height up or down, eventually the triangles cease to be triangles and a fourth edge becomes visible. You have several options:
Find dimensions that work for a practical amount of content and code to that.
Dynamically alter the skew amount using JavaScript.
Blend the background of the edge shapes with the main shape.
Ignore it (depending on the layout, it doesn't necessarily look bad).
All that said (after playing with various CSS options) I'd probably consider an image-centric solution first. You can use the :before and :after pseudo-elements to create containers which resize vertically along with your main content while staying the same width. You can then use a background image to cover the desired area, or put a 100% x 100% image into the container.
I also agree with using SVGs. I find them easier to manipulate since they're scalable and cross compatible between browsers as they're images. Here's an answer I posted to a similar question, which should get you started: Make CSS3 triangle with linear gradient
From there, it will be easy to set the image heights to match the content's. Here's a jQuery example:
$(document).ready(function() {
$(".triangle").height($(".content").height());
});
I would solve this by the use of SVGs (Scaleable Vector Graphics). You create the two triangle-SVGs and then make a 3 column layout where all columns are equally heigh (for example by using display: table-cell). You chose the left triangle as background-image for the left column and the right triangle as bg-image for the right one. The middle one is for your content.
Dont forget to use preserveAspectRatio(https://developer.mozilla.org/de/docs/SVG/Attribute/preserveAspectRatio) in your SVG.
I am trying to create a div element with a rounded border. I am aware of the use of the border-radius, but I noticed that using this property will curve the corners only, like the top-right, top-left etc. so i was wondering if there is some property to curve the side of a div element, something like border-radius for top, down, left and right.
For example, a div with a straight top, bottom and left but a rounded right side. i would like to create the right side so that it is more rounded at the top than the bottom.
My aim is to create a div element with rounded right side which will not affect the top and bottom sides. i mean the curve in the right side should stop as soon as it reached the top or bottom side. (so that the top and bottom remains straight rather than slightly curved).
Is there a way to get this effect using css?
You can specify horizontal and vertical border-radii via the slash notation to achieve such an effect...
div{
width:100px;height:100px;
border:3px solid #bada55;
border-radius:10px/50%;
}
<div></div>
This would set a vertical border-radius of 50% and a horizontal border-radius of 10px for all sides. You can define this for each corner individually (So you have up to eight values).
You can use the / effect which defines the horizontal and vertical radii. 10px is horizontal, 100px is vertical
div
{
height: 200px;
width: 200px;
border: 2px solid #000;
border-radius: 10px/100px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
With the border radius set to 10px/100px this makes the sides slightly curved. Set the left corners to 0 and you have only one side that is curved :)
http://jsfiddle.net/UWbKf/
You can still use border-radius for this. You just have to be a bit more creative with the parameters you give it.
border-radius allows you to specify both a horizontal radius and a vertical radius for each corner. Using these gives you the flexibility to stretch a curve effect across the whole of one side your element if you wish.
An random example that makes an odd shaped box:
.myElement { border-radius: 24% 41% 31% 9%/44% 6% 32% 40%; }
And here it is on jsFiddle.
Rather than give you loads of detailed examples, I'll link you to this site, which demonstrates the flexibility of border-radius, and allows you to design the shape you want: http://www.webtutorialplus.com/border-radius.aspx
Hope that helps.
How to rotate an element with respect to a defined point i.e. defined x & y coordinate in CSS (webkit)?
Normally rotation make element's center point as reference.
You could use transform-origin.
It defines the point to rotate around from the upper left corner of the element.
transform-origin: 0% 0%
This would rotate around the upper left corner.
For other options look here: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin
for the safer side if this link not available then here are a couple of more options
transform-origin: center; // one of the keywords left, center, right, top, and bottom
transform-origin: top left; // same way can use two keywords
transform-origin: 50px 50px; // specific x-offset | y-offset
transform-origin: bottom right 60px; // third part is for 3D transform : z-offset
As far as I know there isn't an option to rotate around a fixed point (although this would be handy).
If you need a specific offset, one way is to edit your image to make it larger, such that the centre lies in the middle of your image. You can then place this within a DIV with "overflow: none" and position it with relative positioning. The div will mask off the area of the image you don't wish to display.
It is now August 2022, older answers do not include the use of px as mentioned in the documentation.
transform-origin accepts keyboards (left, right, top, bottom, or center), percentage (50%, 69%...) or length describing how far from the left edge of the box the origin of the transform is set.
Therefore transform-origin: 360px 540px; is absolutely fine and works as expected.