CSS Envelope + Letter Animation (Open/Close on Click) | CSS3 Tips & Tricks

Create an Awesome animated envelope + letter animation with open and close on click.
#CSS #HTML #JS
source code:
github.com/hossaini-f/css-env...

[@cristinabautistaadegas2356]

GREAT!!

[@gunadAgp]

Mantap, saya suka

[@xlfrostyy6274]

hey for anyone struggling with the part where it the wrapper is overlapping the letter when it comes out dont worry i found a solution. so what you need to do is go to the .flap > .envelope .letter and add z-index: 3; and in the ( . letter ) i added z-index:0; this is not a full solution however and will bring out the entire letter but the heart will still be there to reset the animation and the letter will be readable and is the only solution i have found

[@alinaansari9377]

Hey i just changed the z-index from 3 to 2 in .flap> .envelope .letter and didn't add z-index in .letter . It worked

[@lautii8810]

It won't let me fix the bottom part of the envelope, it was long at the bottom and it won't let me fix it. please help

[@arhaankhan7822]

Sir how to share it with anyone by link ?

[@that_girl_blizy]

How do I make the page loaf with the envelope closed first?

[@isabelsotorivera6294]

Como instalo el programa?🥺

[@swaranpaulathyala07]

The letter text was appearing in front how can I fix it

[@pauwixqt]

hi, i read your suggestion on the same prob i've encounter which my wrapper is still in front but when i changed it into negative z-index as what you've said, my envelope-tab became transparent. how to fix this? :

[@aysantutorials1415]

Hmmm! One last solution in order to solve, is to change orders of the elements and you can control by zIndex to be front or behind accordingly

[@MaryamMudassir-j7d]

Can we code this in c++?

[@OSamuelCoutinho]

Hello from Brazil, I want to make an animation but with several envelopes on the website, how can I frame them so that I can place, for example, a 3 row with 4 cards?

[@shuhanli]

I would recommend using grid! And then putting an envelope (div) in them, or use flex box

[@aysantutorials1415]

you can simply use flex box or grid for that purpose.

[@STAARDUST]

if we have our own design for the envelope how would I insert it?

[@aysantutorials1415]

Simply use z index to show or hide the letter

[@shirleypocon2319]

Que aplicación es

[@user-nx3vb9fb6t]

In which site we can code it?

[@aysantutorials1415]

here is no such website to generate card animations for envelop, you can simply try this and modify as you wish.

[@Bnchurs3]

how can I share it?

[@DesirezAJ]

did you figure it out?

[@TheLynaPlayss]

i copied and pasted it, but it doesn't work, it's blank, only with the text on top

[@gunelabdulrahmanova]

That happened to me too

[@kanehuxleybook8767]

I code it but the letter was behind the envelope 😢

[@leopixelstudio8098]

how to create box instead of envelop

[@aysantutorials1415]

Using Flexbox or Grid 😊

[@leopixelstudio8098]

@@aysantutorials1415 can you make it like box opening like gift box open and something come out from inside
can you make a video about this

[@aysantutorials1415]

Next time

[@user-pk1tj7wy6c]

not working

[@ankushjana3999]

My wrapper is still in front of the letter, I do everything but it does not go behind....plz help

[@rishikeshlokhande4319]

same buddy I got stuck too

[@aysantutorials1415]

you can use negative z-index to manage that problem, if it is not working.

[@johncarlrana5934]

Use z-index

[@johncarlrana5934]

z-index 2 for the letter and z-index 1 for the envelop add this in your css

[@hotarudenki313]

help, it doesn't work too @@johncarlrana5934

[@narendiranv.b5868]

Sir can you pls share the source code

[@aysantutorials1415]

Check Description.😊

[@narendiranv.b5868]

Thanks sir

[@A2zShorts__01]

How I send it to my girlfriend

[@sinchanmallick135]

Host it on some platform and then send the link to her

[@sinchanmallick135]

Host it on some platform and then send the link to her

[@thobeboy]

👎🏽