I was able to create a neat pointy flow-chart, as shown here: http://jsfiddle.net/R8Gx3/3/
However, the rendering is not consistent across the major browsers (Chrome, Firefox, IE).
Any thoughts on how to achieve this same effect but in a more reliable way?
Obviously I could use images, but I prefer CSS wherever possible since it's easier to edit colors in CSS (rather than create new images).
I can't just use a triangle character since there is a textured background behind the elements, so I need transparency.
I think you'll have better luck placing UTF-8 triangles, two at one end and one at the other, rather than depending on border-hacks.
http://www.fileformat.info/info/unicode/char/25bc/browsertest.htm
http://en.wikipedia.org/wiki/Geometric_Shapes
For modern browsers you could use CSS tranforms (for IE that would be 9 and above)
so you make a box with top/right border and rotate it 45 degrees.
This way you can simplify the html and just apply the arrows with :after and :before (each one being one of the tips)
Demo at http://jsfiddle.net/gaby/FJEFP/1/
Related
So, I'm looking to do a background image in CSS using a sprite sheet. And just to be clear, no I am not going for this effect. I have a full sprite sheet, and I would like to take a 16px by 16px square on the sheet and set it as the background that will be repeated.
At some point in the future, I hope to be able to do this via spacial dimensions using media fragments in the URL parameter, but since this isn't supported yet I'm looking for an alternative. Is there any way to get this same effect via modern CSS techniques or hacks?
Some notes:
I don't need to support old browsers, just the latest FF or Chrome will do.
I would prefer pure CSS solutions. I can and will create a JS/Canvas solution with data:URI's if I need to but considering how many elements I may need this for, I would prefer to not have to do that if I can get better results via pure CSS.
Need to repeat in both x and y directions
Looking for solution that takes advantage of a single image in memory/cache so that I don't have to load the sprite-sheet for every sprite I want to insert
Here's a pure CSS solution that works in Firefox only, but seems to meet all your requirements.
body{ background-image: -moz-image-rect(
url('http://placekitten.com/500/500'),
0,100,100,0
); }
Example at http://jsfiddle.net/47CMr/2/
There is only one method that falls under your conditions (the hardest one is the need to repeat): using the border-image.
The dabblet with the demo: http://dabblet.com/gist/1635890
The point is: you can mark the part that you want to use using the border-image-slice part of the border-image property. The syntax is a bit tricky, but using it you could create different repeating paterns from border-images. Also, when the needed parts are not on the edge, or when you need to repeat the image both on X and Y, you'll need a clip property, so you'll need a block to be absolute positioned. All these things work even in Opera.
But, there is one bad, bad thing: the rendering of central part of border-image is a kelly hell: there is a difference not only between webkit and mozilla, but even between the Safari and Chrome, so I added a lot of hacks there.
In conclusion: the goal can be achieved, but with a hell of a hacks.
So, I'd advice you to use the data:uri, 'cause there are no other ways to do this in webkits and Fx both (in Fx-only you could use the -moz-image-rect as mentioned above).
So I'm looking at a specific application for a web browser which requires me to express color as a straight alpha channel with a black and white alpha channel as a separate element. (an example of both types
I know many moons ago, IE supported some perverse filter options, but since I'm doing css3 transforms, I need this to work in a modern browser, preferably Chrome.
Basically what I'd like to do is have an element with CSS transforms applied, specifically rotation most likely, then I'd like to take that and copy it to another equivalently sized element which has the black / white transformation applied. An additional bonus would be setting the original element to use straight alpha, but I can live without that for now.
I haven't been able to find any routes with which to start investigating. If you have one, I'd be super grateful. My last resort is to start doing things in WebGL or Canvas and modifying the output there.
Two or three different elements stacked on top of each other using absolute positioning and z-index? This would require you to save two different images which I'm guessing you're trying to avoid.
You can do CSS 3D transforms. Browser support is basically there in newer IE, Chrome, Firefox, iOS and Android.
where can you use them
how to use them
MDN
I've actually figured out the answer... it's CSS Shaders.
https://dvcs.w3.org/hg/FXTF/raw-file/tip/custom/index.html
Not yet available, but soon.
The reason not to use Canvas is for simplicity in authoring. (Long story.)
Even though I've read alistapart - slidingdoors, I'm stuck.
Here's what I want to do:
The problem, you may have guessed, is in the middle.
Here's how I've "cut" into divs the tab (I'm sorry it's ugly but it's faster to explain this way) (a green square = a div):
Even though it's not IE6-7 compatible (many thanks Microsoft), here's what it gives under Firefox, Chrome and Opera:
Now I want to finish the borders left, and right, and finish with round corners on the bottom (like the first picture). Have you any idea how I should do (and keep in mind that I'm planning to give the work to another person whose task will be to make my work compatible with IE 6 and 7)? I'm stuck.
[EDIT] After hours of searching, and thanks to the help of "Gaby aka G. Petrioli" (many many thanks), I've managed to do almost all want I wanted.
Here's what I get:
And here's what I'd like to get:
If you have any idea...
You can do that with css and a single image for the right side of the tab.
Have a look at this demo http://jsfiddle.net/uwUwK/3/ and add a background-image to the red element (the one with class .tab-separator)
If you could do with a different right side of the tab (less elongated), you do not need an image at all, demo at http://jsfiddle.net/uwUwK/4/
if it should be compatibel to IE 6 and 7 the only way would be to use images.
Either as one big background image (which only works, if the height and width is noct dynamic) or use a set of images (divs with background-image and repeat for borders) for each border and corner.
which could work too (i found it with a short google search) is http://css3pie.com/
But depending on the methods they use, it coul affect the performance on ie heavily.
btw. if you use pure css3, you have border-radius and even border-image to do such things.
( http://www.css3.info/preview/border-image/ )
I'm trying to make a wheel, which will be sliced into different coloured sections (kinda like a pie chart) but they may have extra elements on top of them, e.g., a stitched border across the borders at the side and an icon at the edge of each, etc.
So my question is do I just use css3 (examples: http://www.css3shapes.com/)
and then use something like http://css3pie.com/ for Internet explorer 6-9?
Or am I just better off doing it in Photoshop and slapping it on a div as a background image? And use absolute positioning for extra elements?
Which is the best practice?
I would (and do) use PHP's GD extension to create a pie chart based on input data, save the image generated by that, and optionally generate an imagemap so parts of the chart can be highlighted, have tooltips, etc.
I really wouldn't use CSS for drawing shapes. It's hacky at best, and can get really messy. Quite a few of the examples in the cssshapes site you linked to don't even work in Firefox 3.6 - which is still quite heavily used - let alone other older browsers, and in IE you'd really struggle; css3pie won't give you the kind of fine-grained control you'd need for a pie chart.
If you want to draw stuff on the browser using on the client side, there are a number of ways to do so without resorting to hacks like CSS shapes.
Both SVG and Canvas are relatively new technologies for placing and manipulating graphics on the browser. SVG draws vector graphics and Canvas is for pixel-based graphics.
Both of them are supported on a wide variety of browsers. The obvious exception being IE8 and earlier. However, IE does support an alternative graphics format called VML, and there are javascript tools for IE which allow it to convert both SVG and Canvas into VML, so you can use either of them and they will work in IE using these tools, which makes both SVG and Canvas effectively cross-browser compatible.
But if you're drawing pie charts, or similar sorts of things, my personal recommendation would be to use the Raphael library. This is a javascript library which works in all browsers, and can be used to draw and animate pretty much anything, including graphs and charts (it even has a separate graphing add-on library. See the demos on those two sites to see what it's capable of; I think you'll be impressed. (I certainly was)
Hope that helps.
I want to use a diagonal gradient in my background.
I have read this, and I found that it has just only horizontal gradient and vertical gradient in IE.
Is it possible to make the gradient in IE show in the diagonal like Firefox?
You can do it using CSS, but it's kind of a hacked together solution involving two layers. You can read about the details of it here.
Yes, you have to use a background-image though so there may be a limited element size depending on how much you want a page to cost, and you will need to use a separate image.
HTML5 brings along SVG images though which are scalable and take up little space.