I'm a web developer, graphic designer, type designer, musician, comicbook-geek, LEGO-collector, food lover … as well as husband and father, located just south of Copenhagen, Denmark.
Nice! But it has the same issue on Chrome (MacOS), as I encountered - the edges are blurry :-(
That's why I went the svg-way, although the CSS-way is way simpler!
Looks great in Safari, though!
yes it's a known issue when the gradient contain a lot of color stops. You can fix it by using multiple background instead: codepen.io/t_afif/pen/VwPqEmr
I'm a web developer, graphic designer, type designer, musician, comicbook-geek, LEGO-collector, food lover … as well as husband and father, located just south of Copenhagen, Denmark.
I am a Full stack .NET Developer, I like to work with C#, Asp.Net Core, SQL, Mongo DB, Azure, JavaScript...
Always eager to learn new technologies. I am here to share, ask & eventually learn.
Nice 😄, Can you show us how to make CSS based animations like Thank you and Successful and congrats messages to users, using confetti css or some other technique. Like below:
I am a Full stack .NET Developer, I like to work with C#, Asp.Net Core, SQL, Mongo DB, Azure, JavaScript...
Always eager to learn new technologies. I am here to share, ask & eventually learn.
Such animations are generally made using canvas. If you inspect the code you will notice a <canvas> element and then you have to dig into the JS because it's there where you will find the whole logic
Hi, but your solution doesn't let pick a color. As I understand for this purpose you HAVE TO have this color wheel on canvas to extract data with ImageData
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
My CSS only idea: codepen.io/t_afif/pen/VwPqGyj and with rotation: codepen.io/t_afif/pen/KKabxJJ (need more html here)
Nice! But it has the same issue on Chrome (MacOS), as I encountered - the edges are blurry :-(
That's why I went the svg-way, although the CSS-way is way simpler!
Looks great in Safari, though!
yes it's a known issue when the gradient contain a lot of color stops. You can fix it by using multiple background instead: codepen.io/t_afif/pen/VwPqEmr
Wow! I'm super-impressed - also at the speed you've been making these demos!
Nice 😄, Can you show us how to make CSS based animations like
Thank you and Successful and congrats messages
to users, usingconfetti css
or some other technique. Like below:tympanus.net/Development/AnimatedM...
Example:
are you challenging me ? 😛
Ok, I will think about it, maybe this will be my next post 😉
Not challenging. Just asking if you have seen those kind of messages anywhere. I dont know how they do those kind of animation maybe using
CSS or SVG
.Just want to learn cool CSS animations 😄
Such animations are generally made using canvas. If you inspect the code you will notice a
<canvas>
element and then you have to dig into the JS because it's there where you will find the whole logicHi, but your solution doesn't let pick a color. As I understand for this purpose you HAVE TO have this color wheel on canvas to extract data with ImageData