Is there any way to make a pure CSS circle border look clear and crisp at smaller sizes? Or some way to make the border not appear "jagged" around the outer edge? Thanks so much!
Use box-shadow CSS property for this issue.
Please see the next example: http://jsfiddle.net/RJMWR/
Related
I want to envelop my div in borders that look somewhat like this:
http://na.leagueoflegends.com/ ,
but I'm wondering what's the right approach to make this.
Is it just a border with images or is it something more complicated to get that border shape?
You can create any shape of your div using CSS3 and then apply borders to it. Have a look at
https://css-tricks.com/examples/ShapesOfCSS/
Having the situation described in this image, I need to find solution for such a border using CSS-only, if it is possible. The height is not fixed, it can be variable. And the border should start and end like it is shown. And there is a border for that wavy line.
Red color on the screen is just to show you how it works.
I need this to work on IE9+.
IE 9+ is difficult, since border-image property won't work here...
If you can do it withour proper endings, you can just use the border-color in combination with a background image, that is y-repeated and right aligned.
How would one create the following 'paintbrush' effect as a border around a div in CSS? The div in this case would be the red box.
Here is another example of a similar situation. The div in this case would be the blue box.
I would say that your best bet is to go with the border-image property
You can find some more info/examples here http://www.css3.info/preview/border-image/ You just need to find the stroke effect that you like and apply it in your case to the border-image
Heres a example
Codepen http://codepen.io/noobskie/pen/EVgaQL
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.