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

[@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

[@harrisonwells713]

A mí me funcionó pero con z-index:2 ; pero lo que no puedo solucionar es cuando se cierra el sobre la carta se desaparece por detrás no hace la animación que le hace a el

[@asra125fcn35]

Prueben con , busquen . container > . envelope-wrapper > . envelope : : before, le ponen el z- Index en 2.
Abajito de el esta el after. A ese se coloca el z-index en 3.
Busquen . letter y en. El habra uno que dice bottom pongan 0
Luego por el último en . flap > . envelope . before se pone tmb z index en 3 y el de abajo
. flap > . envelope. Letter tmb el z index en 3

[@ghofur4057]

​@@alinaansari9377 yooo broooo that's workk thank youu soo muchh🔥

[@HadiAbdullah-t8p]

go on chat gpt and write this same to same coding appear and same to same envlope make it
CSS Envelope + Letter Animation (Open/Close on Click) | CSS3 Tips & Tricks

[@cristinabautistaadegas2356]

GREAT!!

[@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

[@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

[@alizafatima5277]

how do i share this??without sharing the code

[@elcrispe9191]

But what if i would want to put a larger text?

[@gunadAgp]

Mantap, saya suka

[@jonatastmz6214]

thanks i lov u

[@VardhanVikul]

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.

[@that_girl_blizy]

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

[@talambayanjohnleim.7082]

how can i expand the envelope or just it stay the same size although the letter is long

[@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

[@squurrel73837]

can i use notepad for this?

[@swaranpaulathyala07]

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

[@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.

[@hypermania2082]

How can I send to someone

[@arhaankhan7822]

Sir how to share it with anyone by link ?

[@probablyonmc]

deploy it with netlify!

[@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

[@kanehuxleybook8767]

I code it but the letter was behind the envelope 😢

[@alizafatima5277]

i can't download the source code help

[@Bnchurs3]

how can I share it?

[@DesirezAJ]

did you figure it out?

[@LynaPlayss]

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

[@MaryamMudassir-j7d]

Can we code this in c++?

[@AgentFoxyy]

No😂

[@isabelsotorivera6294]

Como instalo el programa?🥺

[@darknessuzumaki9888]

amiga busca VS CODE en tu PC o laptop y ese es el programa que vas a necesitar

[@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

[@shirleypocon2319]

Que aplicación es

[@darknessuzumaki9888]

VS Code amig@

[@narendiranv.b5868]

Sir can you pls share the source code

[@aysantutorials1415]

Check Description.😊

[@narendiranv.b5868]

Thanks sir

[@NAYANMETI-t9n]

not working

[@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

[@Coc6-yw7dw]

I'm reposting permission

[@wallyshark11]

its not animating for me

[@thobeboy]

👎🏽