I would like to design some sort of a map, of a country, in which every state behaves as a different 'div'. Then I would link different pages to each of the states. But the borders of the state are not square/rectangle/any_regular_shape. The borders are complex shapes. How do I go about doing this?
Even though I break them in Photoshop, how do I recombine them perfectly in CSS?
Thank you!
You want something like this map, you should go for SVG and maybe RaphaelJS is a good start.
Try using an HTML image map:
http://www.htmlgoodies.com/tutorials/image_maps/article.php/3479741
Lots of good tutorials out there.
Consider using D3.js Geo Projections. This post written by one of the main developers behind D3 should be a good start.
Related
I'd like to make a 'dashboard' page and show some figures in a graphical nice way.
My idea is to use an Illustrator design, export it as SVG and change the charts with CSS according to the values from the database.
Like these elements: http://graphicriver.net/item/infographic-elements/2656503?WT.ac=category_thumb&WT.seg_1=category_thumb&WT.z_author=REDPENCILMEDIA
I would like to use those donut charts to visualize percentages. But how do I adjust the graphic with CSS (or jQuery).
Found some tutorials on d3.js and other libraries, but I'd like to use the Illustator design instead of generating the graph. Been on Google for 2 days now..
Any tips, hints, links, etc are welcome! Thanks :)
I think this is what you've been looking for: http://www.chartjs.org/
It's a lightweight js-library that allows you to make piecharts, doughnutcharts, .. easily.
Pretty easy to customize too.
Customization is always a pain in the ass for such things, but starting from scratch is much harder, so i highly recommend this.
I am really hoping someone can help me. I am trying to create a round menubar in CSS and I've searched and searched for solutions but have found nothing. I know how to create round areas (by setting the radius), and I know how to create a simple straight line menu using <ul> & <li> but, as said, I want to create a round one.
there is a picture of something alike what I'd love to get working:
If anyone could help me on this I'd be so thoroughly grateful.
Closest things I know of are these:
http://www.cssplay.co.uk/menus/cssplay-round-and-round.html
http://codepen.io/tgrant54/pen/lBHwK
Is that what you're after?
This menu looks almost like Path's Button.
You can find the link to Path's Button here.
You just need to modify it a bit so the menu displayed in full sphere.
This isn't something you really want to be doing in pure CSS.
You may be able to make circle shapes with border-radius, but you're not actually making a circular object -- it's still a regular box shape as far as the browser is concerned, just with the corners rounded off. This has absolutely no bearing at all on your ability to do anything else to do with circles or curves in CSS.
Yes, it's possible to do something along the lines you're after, by putting every character into its own element, and styling each of them with a specific position, but that's going to be painful, inflexible, and difficult to work with. If you really want to do this, there's a code generator you could try out here, but I'd say you're barking up the wrong tree.
If you want to do this kind of thing properly, what you really need to be thinking about is doing it in graphical format, using either Canvas or SVG, plus plenty of javascript code.
I'd suggest looking into a JS library like Raphael for this; there are people who have tried similar things already using Raphael, which may help you -- see here, for example: Radial Pie Menu With Raphael JS
Hope that helps.
I would like to know how I can create a colored canvas but with transparent parts with the font. I want the font to create a hole in this canvas. Is this possible and how ? My goal is to create the impression that an image is embbed in a font...
Thank you :)
<canvas> offers something called composite operations for cut off and such effects. I believe the operation you want is called destination out:
https://developer.mozilla.org/samples/canvas-tutorial/6_1_canvas_composite.html
And here is some more technical details in the spec:
http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#compositing
I cannot provide you an actual working code (your use case is pretty rare), but you should be able find a globalComposite tutorials and with little playing with their code you can find out how to apply the operation for your case.
Is there a way to create a background like so in css? I didn't know how to describe it so google coudn't help me. Thanks!
You might be able to do it with an SVG image, but be aware that the support could be spotty. It would probably be easier to just create it in Photoshop or GIMP and make it really big (say 1620x1080)
A quick search on CSS and SVG backgrounds came up with this page; but it's from 2009.
What is a good 'image spriting' tool to turn single images into one big sprite with different background-position?
I know about http://spriteme.org/ but it doesn't seem to produce a result as nice as:
goDaddy's or Behance's
I've been doing it by hand for small hovers and icons but doing the entire website would take a while to hand-code all the background-position properties.
Thanks
You can try SASS/COMPASS. Even if you are only using the sprite functionality (called sprite mixin) it is worth using it. There are some nice tutorials like this one.