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>
Related
-webkit-transform: perspective(500) rotateY(13deg);
-webkit-transform-origin: 0% 45%;
DIV is left side position.
i just want to know how to place it right side(opposite)?
The code you provided will produce something that behaves like this JSFiddle.
Typically, the CSS3 transform property is used to rotate, scale, are move an element about a point. To move an element to the right of the page, like what I think you are describing, you should just simply float the element to the right or use the margin property instead.
div {
float: right;
}
This source discusses all the various CSS3 transform functions. The most common are:
translate(x,y)
scale(x,y)
rotate(angle)
skew(x-angle,y-angle)
These would not 'move' an element to the right side of the page like you are describing.
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>
I'm trying to clip my images so that they are all circles; however, using css clip-path doesn't appear to be working? What am I doing wrong? I think I am using the spec correctly.
Here is my CSS:
img{
height:200px;
width:200px;
position:absolute;
-webkit-clip-path: circle(50%, 50%, 50%);
}
Here is a JS Fiddle of this code in action: http://jsfiddle.net/vLer8/
What am I doing wrong? And how can I clip my images so that they are all circles?
It looks like you are going to want to go through a different approach as shown here.
The reason being that most browsers are not compatible with the -webkit-clip-path, as far as research has shown and even less are compatible with the circular function of that.
With that being said ,your best bet will be using the border radius approach, which dictates that you probably want to have the height/width to be the exact same when in use. Here is the example HTML/CSS below from my JsFiddle:
img {
position:absolute;
border-radius: 50%;
}
<img src="http://i.stack.imgur.com/NB1OV.jpg"
width="200px" height= "200px"/>
Which will still render your photo to be a circle, and it easily used. If you want to do anything that is not circular, then the webkit would be a good approach as seen in this JsFiddle
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.
Is there a way to have a diagonal gradient in IE? In Chrome I could do something like this:
body{
background-image:-webkit-gradient(
linear,
left top,
right bottom,
color-stop(0%,#f00),
color-stop(50%,#0f0),
color-stop(100%,#00f));
}
but this doesn't work in IE.
Yes, it is possible! Although it does not work as well as a real diagonal gradient in other browswers.
There are two important aspects of this solution that make it work:
Two divs with the same position and different z-index values (one on top of/in front of the other) and different gradient directions (one horizontal, one vertical)
Transparent/translucent colors in gradients (you can read about this in CSS3 Transparency + Gradient)
Simply place the div with the vertical gradient behind the div with the horizontal gradient (or vice-versa, it doesn't really matter), and make sure the coloring of the topmost gradient is not opaque.
The result looks like this (Internet Explorer 8):
And the CSS:
//left sample
.back
{
filter: progid:DXImageTransform.Microsoft.gradient(GradientType="0", startColorstr='#880088', endColorstr='#110011');
z-index:0;
}
.front
{
filter: progid:DXImageTransform.Microsoft.gradient(GradientType="1", startColorstr='#55ffa885', endColorstr='#55330000');
z-index:1;
}
//right sample
.diaggradientback
{
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
overflow:hidden;
filter: progid:DXImageTransform.Microsoft.gradient(GradientType='1', startColorstr='#ffa885', endColorstr='#330000');
}
.diaggradientfront
{
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
overflow:hidden;
filter: progid:DXImageTransform.Microsoft.gradient(GradientType='0', startColorstr='#bbffa885', endColorstr='#bb330000');
}
Update:
The documention on this filter does say that multiple filters may be applied together. However, as it turns out, applying more than one gradient filter results in only the last one being applied, so simply applying both filters to one layer doesn't work, and two layers are necessary.
The short answer is, unfortunately, no, you can't. Microsoft's gradient filter is binary - only left to right or top to bottom.
You might, however, be able to use CSS3 PIE to do what you want. Keep in mind that PIE's support for gradients in IE9 is somewhat sketchy, though, and may or may not work, even if IE7 and 8 do (see their forums for some more info).