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.
Related
I wonder if its possible to use the browsers cursor as an image.
So for example that I could use somewhere on the page the resize image of the cursor.
I tried to find some answer to this, all I could find is how to use an image as a cursor.
And interesting enough,
Microsoft uses images to show the cursors:
https://msdn.microsoft.com/en-us/library/aa358795.aspx
Mozilla also uses images:
https://developer.mozilla.org/en-US/docs/Web/CSS/cursor
Which makes sense, since one might have complete different set of cursors (maybe even a broken set - not having all variants) defined in the Operating System. And so it wouldn't show what they actually wanted to show. So my hopes are still up that there is some way.
I suppose what I want is not possible, but I thought lets ask.
Maybe its very simple and I am really overlooking something I hope.
It is simply not possible to use the image which is used by the browser.
I want to know how to draw a text like this style ( curved) using only CSS please help me
It isn't super straightforward, but I suppose it could be done. Take a look at this article: Set Text on a Circle. Not the exact same thing, but same idea. You'd need to do it per character or section of words to do it.
A potentially easier solution would be to use Javascript/jQuery. But I know this doesn't meet your CSS only requirement. Consider looking at ArcText.js as an option if you feel CSS isn't doable for you.
There is also a tool that does this for you: CSS Warp - CSS Text to Path Generator. This would match exactly what you want, and generate the code for you for various browsers. I've never used it before, but seems nearly fool-proof.
Here is an example using CSS Warp. I spent about 5 minutes. It gets you pretty close to what you want, and you can polish it up more. Then just use CSS to add the rest of the styling.
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.
I have just been trying out and sort of learning bits and bobs in html5. I basically have this little animation: http://jsfiddle.net/Hazza/dJgC9/4/ It is just some images falling out the sky repeatedly. Fun. I was just wondering if there was some way to make them look a bit more exciting. They are supposed to be meteors, or something. So I was looking to try and add the illusion of fire to them. I thought I could have a few different images with different CSS effects like blur and load them randomly as they fall. But it looked...yeah. Retarded. This was kinda the effect I was going for: http://gw2101.gtm.guildwars2.com/en/ . That is flash. And looks fancy as.
Is this at all possible do you think? Or is it something best left to photoshop and then alternate between a few different images? I suck at photoshopping. :D
Anyway I was just playing around for a bit of fun. I'm already secretly proud of my terribad little firestorm but hey, it's a start. Thanks for any input or insight.
Try this, my friend. http://mentadreams.com/2011/03/fire-effect-with-css3/
Hey guys I have a question, I plan on making a website for a friend that wants a nice description about them, for in terms of design they want something like this:
dsdsdsds
sdsdsdsdsdsdsd
sdsdsdsdsdsdsdsdsds
sdsdsdsdsdsdsdsdsdsdsdsd
sdsdsdsdsdsdsdsdsdsdsdsdsd
sdsdsdsdsdsdsdsdsdsdsdd
sdsdsdsdsdsdsdsdsdsd
sdsdsdsdsdsdsds
sdsdsdsdsdsd
sdsdsdsd
So basically small line of text at the start, and increase for the middle, then decrease in size near the end, so basically a circle type. Any ideas?
One bad way is to have a fixed number of lines (and maybe no word-wrap). Just do spans and have the id's of each span have a pre-defined width.
A better (somewhat) way is to do something along these lines css circle via stack-overflow. You may have to tweak it though (and I haven't tried it), but you could play around to see of you like it.
I'm pretty certain the latter is the way you would go, but the ease of constructing it may not be overly fast.
Good luck!
After looking around in Google, I have found this:
CSS Text Wrapper
It involves javascript, but you dont really need to know javascript in order to use it.
if you want to achieve that use
<pre></pre>
then apply the css to the text.
Its the easiest way to do that.