How create css semi donut menu - css

i'm try create semi donut menu by css same enter image description here
But I've found was it was written with SVG,i do not know about SVG, i'm looking for by CSS. Thanks.

As you correctly acknowledge, ideally you would use SVG, and I recommend downloading Inkscape and producing the menu there and then simply embedding the SVG.
With that said, it can be done with pure CSS using transforms. Here's a good tutorial: https://tympanus.net/codrops/2013/08/09/building-a-circular-navigation-with-css-transforms/

Related

how to make a wrinkled paper background using css

I have a image of a background that looks like a wrinkled paper and I am trying to make the same background using CSS instead of the image.
is that even possible to make using css?
this is the image:
I don't think that this is possible to do with css (at least not efficiently)

Put a responsive SVG with background-image

I make a website, and actually i have a simple rectangular images.
I want to design my image and make a design like below.
So i tried to create a svg, and i wanted to put my picture inside .. but the problem is that svg cant be responsive.
Can i do it in full css ?
Or it's better to use a SVG ?
The best way could be to use Photoshop and design the picture, but if i can make it in css or using svg, it's better. i know that some website have similar design for their pictures, how they do ?

Generate CSS from existing Sprite Image

I know there are tools to generate a sprite image and CSS from a collection of images.
But, is there a way to generate the CSS against an existing sprite image.
I was given a sprite image as-is with no CSS and am looking for a way to auto-generate the CSS instead of having to hand code it.
Like:
http://www.spritecow.com/ ?
http://www.spritebox.net/ ?
A simple Google search shows a lot of sites that will help you with this.

Creating unique background in css, image insed

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.

HTML Canvas and CSS

I am wondering if CSS can be used to style something that in being rendered by a canvas?
For example, flot uses canvas to draw the charts however highcharts uses SVG. Since SVG seems basically like a XML document, I can see that it would be very easy to style things highcharts creates with CSS. Since creating a canvas does not create any extra markup, I would think it is not possible to customize the style through CSS (though I am asking this question since I am not very familiar with canvas).
I'm not an expert, but I think that using CSS in canvas directly is not possible. But you can try to read style from other HTML element (that uses CSS) and map it to canvas using its JS API. Here is an example how it could be done:
http://tjholowaychuk.com/post/6339741902/styling-canvas-drawings-with-css
But as I mentioned I'm not an expert and maybe someone found easiest solution.

Resources