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.
Related
I'm trying to use spritesheets for my background and border needs. I have a spritesheet of borders and am attempting to use it with border-image, but I'm struggling to understand the interplay of slice and width to carve up a specific region, rather than the whole thing.
Is this possible? Or does border image require a single image asset for slicing?
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.
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 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.
Is it possible to draw a circle using -webkit-border-radius in CSS3 whilst constraining the width and height to specific variables (such as height:100px and width:100px) so when text is added inside the circle the text wraps instead of forcing the size of the circle to change?
If you want to handle this with only CSS and make it responsive, it's not possible in the way you would like.
However, it can be done with some rather tedious JavaScript.
I provide three alternatives.
1. CSS only, imperfect solution.
_-==-_
-########-
- # # -
| # # |
- # # -
-########-
-.__.-
Which mathematically, is 14.65% of the radius on each side (which is the same as the width or height), assuming a perfect circle.
Don't forget that padding inside an element is relative to it's container's width, so padding: 14.65% won't work unless the circle is inside an element with the same width.
2. JavaScript.
Font characters have different sizes. To do this, you will need either:
a monospace (or close) font.
to come up with a script to calculate the width on the fly.
The script could do this by having an inline-block element with the CSS display: pre; to calculate the width of all the breakpoints (i.e. words). On browser resize, you would use these widths to calculate how many you could fit on each line.
However, each line would have a different length inside a circle, so you'd have to work out from the line-height, the circle height and the number of lines how wide the containing line would be.
This isn't a slow process but doing so onresize would be problematic, so I'd advise either using fixed ratio sizing of the font-size and the circle-size, so you wouldn't have to redo it all.
Alternatively, another way to resize the circle after it had been generated on load would be to use a CSS3 Transform with a scale factor.
3. HTML Canvas + JS
You could use a canvas instead, as per the solution below? It would be far easier. Even then, the width of the text is calculated but is likely much faster than loading each word into an inline-block in the DOM.
Wrap text to a circle shape in svg or canvas
There is no way to make the element actually be circular, but you can definitely make the circle be of set size and make the text fit into the largest square that would fit inside the circle using padding:
http://jsfiddle.net/pk7yk/2/
(Example only works in WebKit browsers)
Although you do have to make sure there isn't too much text inside the circle to fit.
It is possible to wrap text inside a circle created using css3 border radius.
you just have to add the padding amount to the border radius
eg:
border-radius is the width/ height divided by 2. The element must be
a perfect square to get a perfect circle. then add the padding amt to
the border radius
CSS:
.testCircle{
width:200px;
height:200px;
border-radius:150px;
background-color:#333;
padding: 50px;
}
HTML:
<div class="testCircle">
Text inside a circle
</div>
This will cause the text to wrap inside the circle. Tested in FF.
To know more about creating circles using css3
css circle with text wrapped inside.
P.S You have to be careful about the corners, though its looks circular the element is actually box shaped so have a comfortable padding so as to avoid the text being placed in the corners.