I need to add curved lines connecting nodes of a diagram in HTML. I want to create them using only HTML and/or CSS. I'm ok with CSS3 even if not all browsers support the feature I need (particularly don't care so much about IE8 and below). Here are solutions I could use with reasons against them:
canvas or svg - don't like it because I have to then deal with browser differences and not sure of performance when I have hundreds, maybe thousands, of these objects floating between my nice nodes
image - I would need a ridiculous number of images to deal with all the possible curved lines and an image doesn't scale nicely at all when zooming in and out
div with a css border-radius and another div that covers the portion of the lines we don't want - not worried about IE8 and below not supporting this, but this is an ugly hack where I can't have the resulting curved lines over anything like a background or other lines overlapping. Can I?
What options am I missing? Is it possible to have a div with a border-radius that is visible for only 1 corner (and work on all browsers except IE8 and below)?
You should probably be using canvas, since canvas is designed for drawing stuff. The performance of using canvas should be better than using DOM elements, especially with newer versions that uses GPU acceleration for drawing.
Anyway, you can always use border-radius combined with border-width or border-color to create curves by showing only one side of the border of element, while hiding all others:
#curves.width div {
border-color: transparent transparent transparent #999;
}
#curves.color div {
border-width: 0 0 0 1px;
}
Combining this with different combinations of border-radius, and you've got yourself some curves. I've whipped up a very simple demo for this here: http://www.jsfiddle.net/yijiang/nDxYJ/
You can even combine it with CSS3 transform rotation and transformation for more flexibility. It is, however, still more restrictive than using canvas, and more difficult to control too.
I think for hundreds, even up to thousands of objects, then SVG performance is not going to be too bad, certainly no worse than any other way you might approach it. The main performance issue would be in IE where you'd have to use some method to fall back to VML or Flash and you say you're not too concerned about IE8 support.
You could draw all the lines in a single path and only have one object to deal with, as long as you're not going to be adding and removing lines all the time. All the lines in a path would have to be the same colour, so you'll need as many paths as you have colours of lines.
Related
If creating a web graphic that's meant to be used in many places and overlaid on top of other elements, is it possible for the graphic to composite with whatever's beneath it -- like setting a Photoshop layer to be "Difference" -- such that its colors invert?
Specifically, picture a "Left" and "Right" image arrow that could be placed on top of an image carousel. Many images could appear beneath it and, if the arrows are lightly colored on a lightly colored image, they may be difficult to see. As such, an image whose color is the difference of what's behind it would turn dark on a light background.
I'm picturing doing this with an SVG, potentially, but if it could be accomplished with a png or other bitmap of sorts, that'd be neat too.
If you're on bleeding edge browsers you have the option of using CSS blend modes, see this tutorial.
For more details, see the specification, which covers html, svg and css.
yes it can, but the support is really poor if you want a CSS only solution. You had the inverse filter on IE versions and now you have Webkit support, but that's about it. However, you can use JQuery Invert plugin by Paul Irish. It does exactly what you want, and obviously has better support than CSS
My goal is to create a curved arrow like this one, on an html5 canvas:
I have found several resources on how to draw lines but none of them seem to work. I also found a related stackoverflow post.
Also, is it possible to animate it on hover in order to expand the arrow, using an elastic effect maybe?
Raphael and canvas both have some limitations when it comes to drawing lines in a pen-on-paper style. I've found the best way to simulate such a thing is to iteratively transform a 1-pixel path into a target path, as in this fiddle: http://jsfiddle.net/zPRha/31/ With a little work, you could calculate the angle between the last two points along the path and transform/rotate an arrow path to match the line as it is drawn. It's not an ideal solution, but it would work.
Raphael's built in hover support makes zooming/unzooming extremely easy. My understand is that such handling would be rather more obtuse using canvas natively, though I'm sure some canvas libraries have automated away this concern.
Here is an updated fiddle with optional support for an arrow: http://jsfiddle.net/kevindivdbyzero/JPqXF/
I think you should use SVG with CSS3 transitions to do this kind of stuff.
I have an idea in my mind for a simple technical demo. It will have a good amount, maybe up to 100, different text labels with varying rotations and Z-orders. Also, there will be constant animation so the size, rotation and position of the labels will change.
This could be done using CSS3 or Canvas as far I can tell. The CSS3 approach should be more accessible but are there any other real differences to consider?
Edit: I also need be able to place labels quite accurately with their centre point.
Either should be fine. I'd start with making a CSS3 one and then make a Canvas one only if somehow unsatisfied. Some considerations:
As of today text in the DOM looks a lot better than text on Canvas for a lot of browsers. Some browsers don't do subpixel rendering on Canvas text (While others do) making it something written in the same font in the DOM and in canvas look very different. For visual consistency, CSS3 is better right now.
Ask yourself what you might want to do with this later, if anything. Turn it highly interactive? Increase the number of objects above 10,000? Then you'll want to do Canvas, in short because 10,000 DOM objects is a "bad thing".
I'm not sure which one would be faster with merely 100 text labels. It shouldn't be hard to write up a quick test on your target platforms to see.
The CSS one will probably be much faster to make.
Canvas text gradients don't work on all mobile devices last I checked
Canvas text rotation + scaling used to look AWFUL in Chrome and Opera. Chrome has it fixed since version 12, Opera still looks awful. You can check your target browsers here: http://simonsarris.com/misc/scaleText.html Opera sort of looks like this.
while css3 would be the nicest solution, you should at least consider svg too.
see a live example : http://jsfiddle.net/gion_13/DhqEN/show/
p.s. : a big minus for canvas, because it does not have text selection
I have this page mockup.
How do I realize that cut-Out border on the left?
thanks
There are several possible solutions to this question:
Just use a triangle graphic.
Easy, obvious answer. Probably not what you were looking for, though.
Use a filled in square div, and rotate it 45 degrees.
It works, but is probably overkill for something so simple. Plus rotation can be a bit painful in older versions of IE (it works, but the filter syntax is horrible, and the default rotation point is different from all other browsers, so it can be hairy to get it right). Probably too much effort for a simple effect like this.
Use the CSS triangular-borders hack to make triangles.
It's a bit hacky, but it works well. Read more about it here: http://jonrohan.me/guide/css/creating-triangles-in-css/
Use SVG.
SVG is an XML-based vector graphics format. It is trivial to create something like this in SVG. This would be a great solution, except that IE8 and earlier don't support SVG. Fortunately though, the do support VML, a competing format (IE9 supports SVG, so VML is going to die, but we need to deal with it for the time being). A good solution to this is to use one of the javascript libraries that do SVG-VML conversion on the fly. There's several of them - try this one for example: http://code.google.com/p/svg2vml/. Or you can use the Raphael library to draw in either SVG or VML using javascript.
Which one of these solutions you use is up to you; it depends on what browsers you want to support, whether you're happy with using Javascript, whether you want to avoid adding unnecessary graphics, etc.
I would suggest that the CSS triangular borders hack is probably the best solution for the time being. In the future, SVG will be a better answer, but for now the fact that IE8/7/6 don't support it is a bit of a killer.
The only problem with the triangular borders hack is that it doesn't work in 100% IE6 (see the page linked above for details on that), but even then it's usable. And frankly, I'd just drop support for IE6 anyway.
See: http://jsfiddle.net/WP7gY/
This is the simplest technique I can think of: put a background on the h2, and position it left center.
h2 {
padding-left: 30px;
background: url(black-triangle-image.png) left center no-repeat
}
You'll have to replace any margin-left with padding-left on the h2.
If the container has some padding-left, you can set margin-left: -??px on the h2 to pull it to the left edge.
I'm developing a web application that has a certain layout.
I'm mainly using CSS for styling the buttons and using divs and styling them for other layout items.
The problem is that sometimes I need a layout item to be non-rectangular.
Also- designing SVG is easeer and sometimes may produce better results.
My question is: should I use CSS always for the layout, and for instance- combine divs to achieve the non-rectangular effect- or should I use SVG for some of the layout items?
Also- what about the buttons- CSS or SVG?
Thanks!
Bear in mind that SVG isn't supported in older browsers. In particular, in IE8 and earlier. Using SVG will therefore limit your audience.
It is possible to rig older versions of IE to support SVG - there are a number of Javascript libraries which can convert SVG into VML, which was Microsoft's proprietary alternative to SVG. However, this does mean you're running Javascript code unnecessarily; you could cause performance issues in IE, or worse, it could load slow enough that the layout redraws after its loaded.
Therefore, for cross-browser compatiblity reasons, I would suggest not using SVG for your basic page layout.
Where I would use SVG is for graphs and charts, etc. For these, I would use the Raphael javascript library, which makes drawing SVG very easy, and also renders it as VML in IE, without you having to do any explicit conversion.
For creating non-square elements in CSS, there is a hack which uses the CSS borders to draw triangles and other shapes. This works in all browsers (with some minor caveats in IE6), so is great for creating spot-effects like marker arrows and speech bubbles.
See http://jonrohan.me/guide/css/creating-triangles-in-css/ for more info on this.
Great for spot effects, but should stress that I wouldn't recommend it for complex shapes; I have seen some people drawing entire pictures using it -- see http://www.cssplay.co.uk/menu/fivestar and other hacks on the same site -- but as I say, I wouldn't suggest actually doing this, except just to demo a hack like this guy.
Hope that helps.
[EDIT]
Per the OP's comments, he only wants to add a rectangular protruding part to a larger rectangular <div>, so in fact the shape he's trying to create isn't all that complex after all; in fact, it sounds a lot like a tab. Given this, the best recommendation by far is to forget about drawing it with SVG, and simply create two divs: one for the main content and one for the tab. If necessary, a third div can be created to wrap the other two. This may be helpful for referencing the two others together via CSS or Javascript.
I tend to advise you not using SVG for the layout, it's not really its purpose. It's best suited for diagrams, pictograms, charts or maps etc.
using SVG will have disavantages:
-First, support: IE<9 doesnt support SVG, or you'd need an external plugin.
-Integration: it's easy to have SVG inside HTML, but emmbeding HTML in SVG is quite unpractical.
-flow in layout: you can draw shapes easily, but placing blocks/text has to be done manually. in html two consecutive blocks will be displayed one below the second. In SVG you have to place them absolutely, ensure text inside them isn't too long cause their size won't adjust automatically.
I'm almost sure it would be easier to layout with HTML+CSS. And now with CSS3 you can rotate blocks, round borders, cast shadow. I would like to know which particular layout cause you problems.
We are in 2017 now, I belive that all major browsers support SVG.
So I would say SVG is a good option. You will probably need to use JavaScript to adjust elements on the screen and make them responsive, because SVG does not provide things such as flexbox, tables, float, etc. The advantage with that is that you will have more flexibility and will not have to deal with the limitations and side effects of CSS.