Sign in
Log inSign up
Yosra Emad

360 likes

Β·

10.1K reads

38 comments

Sumudu Siriwardana
Sumudu Siriwardana
Nov 19, 2021

I love this blob menu. And this is a comprehensive guide on how to create!

4
Β·
Β·1 reply
Yosra Emad
Yosra Emad
Author
Β·Nov 20, 2021

thank you so much Sumudu! I'm glad you liked it!

Β·
Mansour Koura
Mansour Koura
Nov 19, 2021

That's fantastic Yosra! but why I can't see Live-version?

1
Β·
Β·1 reply
Yosra Emad
Yosra Emad
Author
Β·Nov 20, 2021

ahh! I'm sorry I forgot to add the codepen link in the blog, you can find it here: codepen.io/yosraemad/pen/GRvBrxR

1
Β·
Akebu
Akebu
Nov 19, 2021

The blob is amazing, this is cute and creative 😊

1
Β·
Β·1 reply
Yosra Emad
Yosra Emad
Author
Β·Nov 20, 2021

thank you so much Akebu!

Β·
Yuri
Yuri
Nov 20, 2021

Great tutorial, Yosra! So well explained i can't wait to put this to practice! Thank you for sharing :)

1
Β·
Β·1 reply
Yosra Emad
Yosra Emad
Author
Β·Nov 20, 2021

thank you for your kind words Yuri!

Β·
Ayodele Samuel Adebayo
Ayodele Samuel Adebayo
Nov 20, 2021

Lovely, thanks for sharing !!!

1
Β·
Β·1 reply
Yosra Emad
Yosra Emad
Author
Β·Nov 20, 2021

thank you for reading!

Β·
Davi Santos
Davi Santos
Nov 20, 2021

Nossa isso ficou Γ³timo, jΓ‘ tenho ate umas ideias para implementar. Obrigado.

1
Β·
Β·1 reply
Yosra Emad
Yosra Emad
Author
Β·Nov 20, 2021

thank you! (i translated this haha)

Β·
Roel Magdaleno
Roel Magdaleno
Nov 20, 2021

That menu looks creative, thanks for your guide.

The only thing that concerns me is the use of @import, which is bad for performance because slows down the initial render.

Check these links explaining that:

gtmetrix.com/avoid-css-import.html

csswizardry.com/2018/11/css-and-network-pe…

1
Β·
Β·3 replies
Yosra Emad
Yosra Emad
Author
Β·Nov 21, 2021

thanks! I only used it to get a new font :) It only downloads one font and there is no other way to get that font in codepen other than that :)

Β·
Roel Magdaleno
Roel Magdaleno
Nov 22, 2021

Yosra Emad Yes you can, just go to your HTML settings and insert your font links, like this:

image.png

:)

1
Β·
Yosra Emad
Yosra Emad
Author
Β·Nov 22, 2021

Roel Magdaleno i didnt know that! i thought it wasnt available in codepen to add things in the head tag! thank you so much for telling me!

1
Β·
Moustapha
Moustapha
Nov 21, 2021

Great work Yosra. It looks awesome though there is no live version for viewing the code pen, but may allah give you energy to achieve more

1
Β·
Β·1 reply
Yosra Emad
Yosra Emad
Author
Β·Nov 21, 2021

thank you so much! your words mean a lot to me :D

Β·
Amer Sikira
Amer Sikira
Nov 21, 2021

Love the article Yosra. Real comprehensive guide on how to create blob menu. πŸ‘

1
Β·
Β·1 reply
Yosra Emad
Yosra Emad
Author
Β·Nov 21, 2021

thank you!!

Β·
Daniel Cranney
Daniel Cranney
Nov 21, 2021

Yosra, you genius! What a great component and a brilliant article to go with it.

Fantastic work!! πŸ‘πŸ‘πŸ‘

1
Β·
Β·1 reply
Yosra Emad
Yosra Emad
Author
Β·Nov 21, 2021

thank you for your kind words Daniel!

1
Β·
Shad Mirza
Shad Mirza
Nov 22, 2021

This is cool. Bookmarked

1
Β·
Β·1 reply
Yosra Emad
Yosra Emad
Author
Β·Nov 22, 2021

thank you!

Β·
Mudita
Mudita
Nov 22, 2021

Great tutorial. Thank for sharing

1
Β·
Β·1 reply
Yosra Emad
Yosra Emad
Author
Β·Nov 22, 2021

thank you so much!

Β·
Deactivated User
Deactivated User
Deactivated User
Nov 22, 2021

Loved this article Yosra!! That's very informative blog. Really liked that blob menu..😍

1
Β·
Β·1 reply
Yosra Emad
Yosra Emad
Author
Β·Nov 23, 2021

thank you so much! I'm glad you liked it!

1
Β·
Ygritte tully
Ygritte tully
Nov 22, 2021

Wow. Great!!

1
Β·
Β·1 reply
Yosra Emad
Yosra Emad
Author
Β·Nov 23, 2021

thank you!

Β·
Mohamed Mohamud
Mohamed Mohamud
Nov 23, 2021

This is a comprehensive guide on how to make the blob menu. Excited to put this into action, thank you for the guide Yosra!

1
Β·
Β·1 reply
Yosra Emad
Yosra Emad
Author
Β·Nov 23, 2021

thank you so much! would love to see your results!

1
Β·
Ajeet Yadav
Ajeet Yadav
Nov 24, 2021

It's really πŸ†’

Β·
Andrew Baisden
Andrew Baisden
Dec 4, 2021

That design is ace πŸ”₯

Β·
MrakCw
MrakCw
Jan 31, 2022

Nice work πŸ‘ but semantic tags would be better)) .nav > nav & div > ul & li + a 😝 πŸ€™πŸ§‘β€πŸ’»

Β·
Deactivated User
Deactivated User
Deactivated User
Feb 14, 2022

great tutorial

Β·
Mike Shake
Mike Shake
Feb 17, 2022

I have a question which is how can i highlight my code in my portfolio blog??

Β·