please remember to prioritize accesibility over aesthetic


pixels

ng emoticons

misc

borders!

srry there arent too many ;__; i reccommend looking on tumblr or gifcities for images, thats where i found most of these!



place a text element then use this code to copy into the style settings:

div {
background-color: transparent;
width: px;
height: [put a number here]px;
overflow: scroll;
overflow-x: hidden;
overflow-y: scroll;
}

effect (i used 120px for this):

holy crap louis im in a carrd !
look at me go ! im scrooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooolling !


place a text element then copy this into the style settings:

line-height: 0em;
position: relative;
z-index: 10;

(make sure there isnt too much spacing between the elements)

effect:

louis look im in a carrd

i had to use outlines to make it readable sry


copy and paste this into an embed bucket

(place the image url between the parentheses don't remove em)

effect:

holy crap louis, im in a carrd


place a text element then use this code to copy into the style settings:

text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff, 0 0;

or alternatively

-webkit-text-stroke: 0.3px white;

effect:

text shadow

webkit outline (use this for larger text)


copy and paste this into an embed bucket:

<style>
a:hover {-webkit-filter:blur(2px);
-webkit-transition: .1s ease-in;
-moz-transition: .1s ease-in;
transition: .1s ease-in;}
</style>

effect (hover over the image with your mouse):


copy and paste this into an embed bucket:

<style>
a:hover {
webkit-filter: blur(1px);
filter: blur(1px);
font-style: italic;
text-decoration: none;
color: #000000;

-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;

}
</style>

effect (hover over the text with your mouse):

copy and paste this into an embed bucket:

<style>
img {
filter: saturate(0%);
transition: all 300ms ease;
}
img:hover {
filter: saturate(100%);
}
</style>
</head>
<img src="[place url here]">

effect:

place a image element then use this code to copy into the style settings:

border: 3px double white;
or alternatively
outline: 3px double white;

effect:

border

outline

i only recommend using outlines if the borders aren't working the way you want, it can overlap with other elements, BUT it doesn't take away from the actual element itself

you can fiddle around with the pixel amount, and change the border style, the current styles are...


I REALLY HOPE THIS ISNT CUT OFF IM SORRY IF IT IS AAAAAHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH]carrd hates me sorry guys </3

place a (preferably transparent) image element into a container, then go to settings on the element youd like to change and rename the element id, then copy this into an embed bucket:

<style>
#[element id name, can be whatever you want] {
position: absolute;
top: -1em;
left: -2em;
z-index: 50;
}
</style>
you can fiddle around with the "top" and "left" lines if you dont want it where brian on this one would be, you can also make it on the bottom and on the right!

then take your element id name, and name the actual image element that name

like this !

you should have your carrd dashboard look like this once youre done

effect:

go to settings on an element and change the element id, and then copy and paste this into an embed bucket:

#[element name] {
transform: rotate(20deg);
}

or on pro plus just put

transform: rotate(20deg);

effect:

hes fucking dead oh shit oh god

go to settings on an element and change the element id, and then copy and paste this into a hidden embed bucket:

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

effect:

copy and paste this into an embed bucket:

<html>
<head>
<script language="javascript" type="text/javascript">
alert("Welcome to my website!") /* you can make this anything, keep it in the quotes though */
</script>
</head>
</html>

effect on desktop:

effect on mobile:

copy and paste either of these codes into an embed bucket

effect:

family guy funny moments

go to settings on an element and change the element id, and then copy and paste this into an embed bucket:

<style>
#[element id] {
color: white;
background: url(https://teaclub.crd.co/assets/images/image02.gif?v=f524affa) no-repeat;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>

shoutout to teaclub.crd.co fr

effect:

peter griffin is my comfort character