In this demo you can rotate the x axis to give a 3d illusion. Trying the rotatex() css option only seems provide part of the illusion.
In the top section of this image you can see the 3d illusion from the 'bigtext' demo. The text is not only rotated on the x angle but the edges of the text are slightly angled in towards each other making for a much better illusion.
What is the best method to achieve this?
I found the answer here. I needed to add the perspective to the parent div.
Related
We all know it's possible to have rounded corners in plain CSS using the border-radius property. Is it also possible to have arbitrary corner shapes, specifically, using cubic-bezier?
It most definitely is, by using CSS masking. If you only care about the shape (so, not the color/thickness/etc that you get when you use the CSS border property) then setting up a "border shape" is identical to using "a clipping mask", with the kind of shape that is set up by border-radius is simply clipping with a "rectangle with rounded corners" mask.
html5rocks.com has lots of examples of absolutely crazy border shapes done this way.
With css3 is it possible arc a div or draw and arc like the image below... I've seen a few examples for circles but not an arc.
Yes, you can do it with border-radius.
See an example here: http://jsfiddle.net/jQ5gu/
Is it possible to have an iframe in the shape of a hexagon or diamond or anything other than a rectangle or square?
Or possibly even a div?
You could fake it with a CSS mask.
But portions of it will be obscured by it. You can't make the iframe render its contents inside of one of these shapes.
You could set an iframe shape (or, rather, an iframe container shape) to something oval farily easy, however the problem with a diamond/hex shape is that you can't set any html element to render in that shape in the first place.
You could try using a mask as alex suggested.
I think you have to use an image as a mask and then absolute position it
Depending on what browsers you want to support, you can use border radius, transparency, and other tricks to create many shapes in css.
No, it is not. There is no posibilites in HTML standard to do this. You can wrap iframe with DIV and get some effects like rounded corners only
I'm skewing and rotating an element with CSS transform and I'd like to make the inner element appear normal again by applying a "reverse" transformation. With rotation it's easy: if you have an element that is rotated 45 degrees then the inner one would have a rotation of -45 degrees to look "normal" again.
Now, with rotation and skew it's not so easy. See this example here: http://jsfiddle.net/8R4ym/56/
The text is rotated and skewed in a way that it's at least positioned correctly but I can't seem to find the "rules" for making it look perfectly normal applying some kind of reverse transforms. Any ideas? Thanks a lot!
I believe this is the effect you're looking for: http://jsfiddle.net/8R4ym/108/
I believe the non-communicative operations are messing up your image. It matters in what order the skew and rotate are performed. "transform" seems to perform them from left to right (first rotate and then skew) and won't let you use the "transform" attribute twice in a single definition space. I couldn't find any way to change the order in which the operations are performed so I instead inserted another div so that skew would be performed before rotate the second time around. I hope this is what you're looking for.
Edit: I just noticed a small difference in text size. I think you might have to put in a hack to increase text size by some percentage.
I'm trying to create a group of chevron shaped divs, and came across this article where the ribbon has an internal triangle shape.
http://css-tricks.com/snippets/css/ribbon/
I was trying to add an external border which would follow the triangle, which would achieve the affect I'm looking for without needing to use images.
Unfortunately, when I tried adding a box-shadow, I ended up with a square shadow around the div, not a shadow around the triangular bit.
Any suggestions on how to acheive this?
I don't think there is currently any simple solution to create CSS shadows of shapes other than rectangles and rounded rectangles (using border-radius). But I think a possibility (albeit more complicated) would be using CSS3 transform rotations along with the box-shadow. You can pick up some techniques here which perhaps you can modify to suit your need.