CODES
Made by me unless stated otherwise.

Mainly for crd pro plus (embeds + element styling.) Can be recreated with pure embeds but that requires prior coding knowledge.

The <style> css goes in an embed, not the element's style. It won't show up in the preview.

Wipe links
Popping element
Heart mask
The. Ink thing in the first carrd underneath? I don't know how to describe it
Transparent image stroke (with glow)
Sound effect

POP CODE
This has spread so far at this point, however as I made it I feel it'd be weird if I didn't include it. The code can be found here.
Fun fact: This code can be applied to any (div) element you want to pop! Simply apply #fuck or whatever you set the id as to the element.

MASKED HEART IMAGE
I am using a heart for this tutorial, but you can use any directly linked image for this.

Simply set the image element's id to #heart.

<style>
#heart {
-webkit-mask-image: url(https://i.imgur.com/bIX4M8u.png);
-webkit-mask-size: 50%;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
}
</style>

Just change the mask size if it cuts off weirdly..

INK THING except it's just a background image clipped over text so you can apply any image or gif to it.

1. Make an extra section to your carrd and add the image you want for the text. For this tutorial, I will be using an ink blot gif.

2. Open the image in a new tab and copy the url (you only need the part shown in the image.)

3. Add this to an embed:

<style>
#imagetext {
color: white;
background: url(the url you copied) no-repeat;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>

4. Set the text element to #imagetext.

You should be done. If the image doesn't cover the text fully, just add this:
background-size: cover;
to the embed styling inside of the <style> tags.

what the

IMAGE STROKE with glow (pure css) (for transparent images)

Just put this in the image styling and adjust the colour. You can use any valid colour recognised by html

In the example I have changed the stroke to black for visibility
+ If the shadow cuts off just add padding to the style css

filter: drop-shadow(1px 1px 0 black) drop-shadow(-1px 1px 0 black) drop-shadow(0 2px 0 black) drop-shadow(0 -1px 0 black) drop-shadow(0 1px 1.5px black) drop-shadow(0 -1px 1.5px black) drop-shadow(1px -1px 1.5px black) drop-shadow(-1px -1px 1.5px black);

If you use this to add ensemble stars voicelines to your carrd I hope you know I'm judging you
Make sure to put an audio warning visibly on the first page

Anyway this tutorial was made by @dramaclubP/@hokutohidaka. Talek, the floor is yours...

Step 1: Upload your sound effect to Dropbox
Step 2: Make a new embed and put in this code:
<audio id="sound" src="Dropbox Link Here" preload="auto"></audio>
* Note: Change the www in the dropbox link to dl and remove the "?dl=0" at the end
Step 3: Go to the element you want to make the sound effect upon clicking and put this code in the "on click" in "events":
document.getElementById('sound').play();
Step 4: You're done!!!!

*Note 2: If the sound effect doesn't work on a picture that you don't want to lead to a different page, put a link to the same page it's on in the url!

*Note 3: You can add and play different sound effects as long as they have different ids! Just replace everywhere that says "sound" with a different id.

*Note 4: If you want to put the sound effect on a link text when you click it, you have to make an embed of the text you want and put:
onClick="document.getElementById('sound').play();"
within the first <a> bracket!
Like this:
<a onClick="document.getElementById('sound1').play();">link text here</a>