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.
Related
Is it possible to wrap text around a non rectangular image?
I want text around maps of different countries to wrap around the country's shape in such a way that the text always keeps the same distance from the country's border even though the border itself isn't straight.
Is this possible?
You can use this method, where you float divs to block off the shape's area.
So - the answer is "Yes - it can be done". But as far as I know there's no "easy" way like a CSS "text-wrap" option.
It looks like that kind of support is on the horizon.
As Dave said, there is CSSTextWrapper, which is probably the best way to do it at the moment, but a relatively recent W3C working draft outlines a method to use more complex shapes using SVGs, and perhaps raster images with outline detection.
How long it will take for it to be implemented in major browsers, let alone finished, is anyone's guess.
At the moment, it can be done, with difficulty. With luck, it will be much easier in the future.
There's a jQuery plugin called Bagon designed to do exactly this.
As others have already said: yes, it's possible... but it's not so difficult.
Customers tend to like this kind or wrapping, at the end I made a script for it: http://www.miguel-svq.com/textwrap.html
This can use floating divs or slice the image, as you prefer.
There's the well-supported shape-outside CSS property. You can even just give it the PNG and it'll figure out the shape from the alpha channel.
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'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.
I am using the following code:
-moz-linear-gradient(top , rgba(255,255,255,1), rgba(255,255,255,0));
But I would like to implement a similar gradient in the `other browsers. My problem is that I don't know if I can use the alpha channel and I don't want to use images I would just like to do it with code only.
Can someone tell me if it's possible.
Hope you can help
you'd have to create partially transparent pngs or look at using the filters MS provide (though they are much maligned I should add...)
'cross' browser gradients
Personally these are decoration facets that IMO don't destroy the exerpince of a site - to that end when possible I wouldn't even bother - IE9 will take up significant market share within 12 months and all the work you are about to do won't be needed anymore
Check out CSS3 PIE, it handles this fairly well for IE, although it requires position to be set, and can break on elements that get hidden, and there's a short delay when rendering the gradient...
Webkit has a different approach to linear-gradient, you can see an example on the link.
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.