true circle (or any non-rectangle shape) element in html5? - html

I haven't seen any documentation on them, so they probably don't exist, but it's always good to check.
I'm looking for a truly-circular (or polygon of any type other than rectangle) element. I can draw a circle in canvas, but the canvas is still a rectangle. I can draw a circle using border-radius, but it's still a square element with pretty round corners.
I'm looking for an (easy) way to make complex shape buttons that are very precise on their clickable areas.
My current method is to use JavaScript, listen to clicks and measure position. It would be much more ideal if this were handled in html5/css3.

Well, all elements start as a block, square or rectangle in one shape form or another. Outside of that through CSS you manipulate the block, to appear as a circle. But its not to go without saying not all browsers support this fully, but its mostly the older browsers you have to worry about in that essence.
If your looking for something 100% compatible old and new, theres http://pixlr.com you can draw one there and use an image tag.. But even then the image is still square/rectangle. Theres really no escaping that notion any route you go.
All in all..
<div class="full-circle"></div>
.full-circle {
background-color: #c06;
border: 3px solid #333;
height: 150px;
border-radius:75px;
-moz-border-radius:75px;
-webkit-border-radius: 75px;
width: 150px;
}
As far as your current method, thats the only plausible logic for the most part, doing things outside the "norm" usually requires a bit more work then a single line of code or three to do it for you.

Border-radius just makes the element look round (except in firefox, reportedly).
Maps kind of work, but I want to avoid forcing an image.
SVG works, but it's still not pure html/css because javascript is needed for links to work. The SVG element is still square too, though the shapes inside are elements that respond well to javascript events. So it's not 100% perfect, but it is workable.
Would definitely be cooler if we had the ability to control the shape of elements on the page beyond drawing inside of a canvas. Maybe I'll play around with building an entire site inside a canvas...
Thanks for the suggestions!

There are no truly circular elements, but try using a regular box element and using the CSS3 specification border-radius. For example:
border-radius: 50px;
height: 50px;
width: 50px;
overflow: hidden;
This creates an element which is effectively circular, and Firebug respects the curved form when hovering over elements.

Related

Using CSS1 how can I hover over an image and swap it with a different image?

I'm being forced to use this browser called Fresco by ANT. In it's specs it says it can handle CSS1. So I'm trying to create a link that has an image, and when hovered over, have the image change.
I've tried:
<td width="30% valign="top" align="left">
<div id="changeImage"></div>
</td>
My CSS is as follows:
#changeImage{
background: url(somefilepath1);
width: 218px;
height: 52px;
}
#changeImage:hover{
background: url(somefilepath2);
}
It works fine in Chrome, Firefox, etc... But in this awkward browser called Fresco, it doesn't show the image at all. I'm not even sure if this is considered CSS1 approved? I've googled and found CSS1 stylings, but nothing to exactly define what I'm trying to do. Any web guru have any tips on this for me?
Sounds like it has trouble reading the psuedo :hover. Technically this was implemented in the early days to be used with only an anchor. I believe Internet Exploder 6 has :hover support only for anchor elements still. This soon has been changed to support all elements on a page.
I would say, try using a sprite sheet where the backgrounds are loaded already and changing the background position of this element. Which would be best practice to do anyways because, you will get instant action, instead of triggering a server request and having the user wait for the new content to arrive.
Here is more detail on the technique and CSS1 does support the background position element
https://developer.mozilla.org/en-US/docs/Web/CSS/background-position

How do I set a border-image?

I have this HTML code in which a QR-code is generated via AJAX :
<div class="qr-border">
<p id="qr" class="ajax_qrcode{if $cart_qties < 1} hidden{/if}"></p>
</div>
and I would like to set a border image around the QR-code. I have this image :
and a right corner image :
So I tried this in the CSS :
div.qr-border p.ajax_qrcode {
text-align: center;
padding-bottom: 1.0em;
float: center;
border-image: url('../img/qr-code-border/border.png') 27 27 27 27 stretch stretch;
border-bottom-right-image: url('../img/qr-code-border/corner.png');
}
but nothing works... Do someone has any suggestion ?
thank you for your help !
I don't think it's possible at the moment in any browser. I don't know of any browser that has implemented the full set of rules. Webkit, for example only seems to have implemented the shorthand border-image property. So you will not be able to set a separate right image.
This site has the best explanation of how CSS3 border-image works. It also has an interactive demo from which I take the following quote:
The border-image property in CSS3 is freakin' complicated. Way beyond a simple border, it is really like 9-slice scaling.
I don't actually think it's even possible to do what you want with CSS3 border-image even if a browser had implemented the full set due to the way in which a single image is sliced up to make a border.
border-image is a very new property in CSS3, and as far as i know, no browser supports it natively.
However, you can probably get it to work in Chrome and Safari by using the proprietary -webkit-border-image property instead.
Edit: try -moz-border-image for firefox as well.
Edit again: Your css selector is wrong, there's your problem. It should look like this:
div.qr-border p.ajax_qrcode
You treated the qr-border class as an ID.
If you just want a straight black border, why not just place the image in a slightly larger box (div) and make the background color black? The margin between the outside of the box and the QR-image should be black, and should ultimately provide the same effect right? Unless QR codes work differently with transparency...

CSS dotted border renders as dashed in Chrome

I applied "border-bottom:#F60 dotted .3em;" to a div and while Firefox renders the dots as round, Chrome shows them as blocky dashes. Any takers?
If it's important that the borders are the same you can look into the CSS3 border image property: http://www.css3.info/preview/border-image/ for Chrome it will be -webkit-border-image:
The specification doesn't define what 'dotted' means to that level of detail. The two browsers just interpret it differently. This is not a problem.
As a graphic designer, this is indeed a problem for me.
:dotted; and :dashed; are specified separately for a reason - a rectangle is not a circle. While it is possible to work around, web builders working at a remove often don't spot the difference. As far as they are concerned, the brief has been met.
to be fair, at 1px, it is less of a problem but when heavier weight dotted lines are used as design elements and code is selected over graphics to save on page load, things can go quite wrong.
For those needing a single dotted line that absolutely has to be a true dotted line, I would suggest a div with a small repeating background image. Could also try styling up a <ul> if you want to keep it all code.

Bluring a div with CSS

Is it possible to blur a div with CSS3? And I don't mean the javascript blur, I mean the photoshop blur.
I don't want the edges of the div to be blurred, I want to contents of the div to be blurred as well. (Am I asking too much out of browsers?)
If not possible, what would be some good workaround techniques?
It is possible with an SVG filter.
The basics of it is that it's just a simple feGaussianBlur.
Here it is: http://jsfiddle.net/aXUtU/1/
This works in Firefox 4, and should work from 3.5 up except for the matter of using the svg element without namespace/xmlns stuff (I think it should work in 3.6).
There are some issues with how much space it gives it to flow in; if you take that text down to one line you'll see the last in particular is getting clipped.
Depending on your content, combining multiple box-shadows (inset and outset) and text-shadow could achieve a similar effect. The link above also contains a start on achieving a similar effect on text.
Well... I came up with this:
.blur {
color: transparent;
text-shadow: 0px 0px 2px #000000;
}
This will make the text blurry, for sure! Only thing is that it will make only text blurry. No images affected or anything. But I think that together with this http://plugins.jquery.com/project/blurimage you could make it more powerful!
Have fun with experiments!

Orientation for a div

Is there a way to change the orientation for a div using css.
ie I need to display a div in a slanting position.
Is there a way by which I can define the four corners of the div
(x1,y1) , (x2,y2) , (x3,y3) and (x4,y4)
Edit
Is there a way to do it using javascript or C#??
Is there a way to change the orientation of an image and not for a div??
This is not possible.
You will need to either use an image or VML/SVG
Please note that IE doesn't natively support SVG, and no other Browsers support VML, but there is an SVG to VML wrapper. Check google
Impossible with pure css, you'll need to use something else like svg, flash or silverlight. Svg will also let you embed arbitrary divs into it, so they will get rotated like you want, but svg isn't supported in IE yet and this particular feature was quite slow when i last tested it.
You could always use border slants instead?
Slants allow you to draw boxes on angles but they won't let you put text on an angle.
My need was to do in IE only and I did using matrix filter and setting the values for M11, M12, M21 and M22.
<style>
.SlantingDiv { padding: 2px; filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',M11=1.0,M12=0.4,M21=-0.2,M22=1.0); width: 60; height: 60; padding: 6px; border: #a9a9a9 1px solid }
</style>
<div class="SlantingDiv">
Slanting Text or Image
</div>