Ary .s

Commençons l’aventure
hello !

Vous avez un projet ? N’hésitez pas à me contacter et retrouvons-nous autour d’un café pour en discuter.

🌞 Hello world ! 🌞 Third and last part of th

🌞 Hello world ! 🌞

Third and last part of this How to? So let's finish with filters!

7. The way to make our shadow on our circle.
We write the properties of our filter above our svg element. In this case <circle />.
- feGaussianBlur for the blur.
- feOffset to create a gap.
- feFlood for the color and the opacity.
- feComposite to combine two inputs.

8. We are going to merge all the layers in order to have our final image for display.
We add our filter in the circle adding "shadow", the id we defined earlier.

9. Let's centering our number in the circle using dy.
In this case I did not use dominant-baseline: middle, because of the tspan.

And here we are.

Want to go further ? So you can animate the ring with JS, add an inset shadow in order to have a neumorphic design, etc...

I hope you liked this new series, it was a pleasure to share this with you all.

See ya all 😎✌🏽!
-
-
-
-
-
#webdesign #webdevelopment #howtocode #htmlcss #html5 #css3 #svg #frontenddeveloper #frontenddevelopment

🌞 Hello world ! 🌞 Second part of this How t

🌞 Hello world ! 🌞

Second part of this How to? So let's continue with CSS this time!

4. Here we add stroke-dasharray and stroke-dashoffset.
- stroke-dasharray to create dashed lines.
- stroke-dashoffset to define where the dash of our stroke will begin.

In this case it is 754px but why ?

🤓Maths moment🤓

Circumference = 2πr
Circumference = 2 * π * 120 ~= 754

5. Here we make the animation of our progress bar. But our ring is not in the right way. Let's fix this.

6. In order to fix this, we use rotate and the origin of our transformation (here, the center). At least, let's design a little our progress bar with stroke-linecap.

Here we are. Almost done! Next time we will finish with the SVG filters!

See ya quickly! 😎✌🏽
-
-
-
-
-
#webdesign #webdevelopment #howtocode #htmlcss #html5 #css3 #svg #frontenddeveloper #frontenddevelopment

🌞 Hello world ! 🌞 Here again with something

🌞 Hello world ! 🌞

Here again with something new, something I want to try and I called : "How to ?". It will not be about to teach code or to explain each line, but show and explain how to make some little elements simply. So let's start with :

SVG Progress Bar

1. Here just simple HTML. Note that the radius is 120. It's because I substracted the stroke.

r (radius).
cx - cy (position from the center of the circle on axis x and y).

🤓 Maths moment 🤓

r = (width / 2) - (strokeWidth * 2).
r = (340 / 2) - (25* 2)
r = 120

2. Just some CSS to put the elements in the right place and give them a size.

3. We add the colors of our circles (just the stroke) and the size.

Here we are for the first part ! Simple isn't it ? See you around for the next part 😉✌🏽.
-
-
-
-
-
#webdesign #webdevelopment #howtocode #htmlcss #html5 #css3 #svg #frontenddeveloper #frontenddevelopment

Universe is full of beautiful colors. Never forget

Reborn, rebirth, back from ash, resurrection... Wh

Logo concept for Cin'amon, shop of spices. This re

Septembre, on est de retour ! Webdesign pour une

Septembre, on est de retour !
Webdesign pour une boutique d'épices en ligne 🎨.
-
-
-
-
-
#webdesign #webdesigner #affinitydesigner #responsive #boutiqueenligne #ui #uiux #userinterface #userinterfaces

Hello !

Je vous présente un CV en ligne réalisé pour pour un client dans le secteur du webmarketing.

Même si on passe beaucoup par la traditionnelle version papier, il est judicieux de se présenter et de gagner en visibilité en ligne 🤓. Hi !

Time to show you a online CV designed for a customer in webmarketing.

Even if we are still using paper version, it's a good idea to show your skills online to be more visible 🤓.
-
-
-
-
-

#webdesign #webdesigner #affinitydesigner #responsive #webmarketing #ui #uiux #userinterface #userinterfaces