small medium large
sites with good pixels
xyz codes

organizing codes currently wahh need to stop being lazy

border-top: 4px double #000000;
border-left: 4px double #000000;
border-right: 4px double #000000;
border-bottom: 4px double #000000;
}
paste in element > settings > style
OR
<style>
.double {
border: 4px double #000;
width: 100px;
height: auto;
}
</style>
<img class=double src="Image link here">
paste in embed > code
if you want rounded borders simply just add border-radius: 5px; to the code and adjust it to your liking.
back

<style>
a:hover {
webkit-filter: blur(1px);
filter: blur(1px);
}
</style>
back

<style>
#scroll2 {
height: 100px;
width: 100%;
padding: 10px;
font-size: 16px;
font-family: Times;
overflow: auto;
}

</style>
<div id="#text01">
text text text text text text text text text text text text text text text text text text
</div>
back

<style>
#text01 {
position: absolute;
left: 0;
width: 100%;
top: -0.5em;
z-index: 1000;
}
</style>
you may need to adjust the number following "top:"
back

CR US

<html>
<head>
<style>
img {
filter: saturate(100%);
transition: all 3s ease;
}
img:hover {
filter: saturate(0%);
}
</style>
</head>
<img src="[#image01]">
<body>
</body>
</html>
back

<style>
#embedID {
position: absolute;
top: -0.5em;
left: -0.5em;
z-index: 50;
}
</style>
paste in embed > code
CR gnome.crd.co
+ the lower the number is, the farther the png goes out of the box/container. you can also change the top > bottom” or left > right” depending on where you want to place your png.
+ add your png on the section where you want to place it and make sure the embed code is hidden from other sections
+ to rotate your image, add transform: rotate(20deg); to the code
back

Paste in embed

<style> #glitch { } #glitch { font-size: ; / Change glitch effect here / / animation: glitch-2 1s infinite linear; / animation: glitch-1 2s infinite linear; } @keyframes glitch-1 { 0%, 12%, 15%, 52%, 55%, 82%, 85%, 100% {opacity: 1; transform: scaleX(1) scaleY(1); } 13% {opacity: .8; transform: scaleY(2); color: #;} 53% {opacity: .8; transform: scaleX(.7); color: #;} 83% {opacity: 8; transform: rotate(-10deg); color: #;} } @keyframes glitch-2 { 13% {color: #;} 53% {color: #;} 83% {color: #;} } </style>
back

text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;
.strokeme:
color: #fff;
paste in element > settings > style OR
<style>
#shadow {
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;
font-style: bold;
font-size:2em;
font-weight:bold;
color: #ffffff;
}
</style>

<div id="shadow"> TEXT </div>
back

CR callie.crd.co
using this site's codes, you can find many click/tap effects under the "mouse effects" tab
once you have selected which you want, copy and paste the code the site gives you into an embed on your carrd (make sure it's set to "hidden + head" instead of "inline")
after doing this, it should work however, using more than one at once can cause them to mess each other up, so i do not recommend this. this can also happen if you use a lot of embeds at once, some of them just don't work well with each other.
back

<style>
#float {
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;
font-style: italic;
font-size:2em;
font-weight:bold;
color: #fff;
animation-name: floating;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}

@keyframes floating {
0% { transform: translate(0, 0px); }
50% { transform: translate(0, 15px); }
100% { transform: translate(0, -0px); }
}

</style>
<div id="float">floating text</div>
back

CR teaclub.crd.co
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);
back

<style>
#grad {
background: linear-gradient(to top, #FFFDFE 2%, #FF78B1 100%);
font-style:bold;
font-size:3em;
position:relative;
bottom:-30px;
z-index:1;
font-weight:bold;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-text-stroke-width: 0.5px;
-webkit-text-stroke-color: #FE62B6;
}
</style>
<div id="grad"> TEXT </div>
back

made by ocotomoosey on tumblr!
<style>
.links {
display:block;
}
.links a {
display:inline;
width: 150px;
box-shadow: inset 0 0 0 0 #000;
overflow: visible;
-webkit-transition: all ease 0.5s;
-moz-transition: all ease 0.5s;
transition: all ease 0.5s;}
.links a:hover {
box-shadow: inset 0 50px 0 0 #000;}
</style>
paste in embed > code
add the code to an embed and then go to all the textboxes that you want the wipedown to work on > settings > classes > add class > type “links”
back

PASTE INTO INLINE EMBED AND PLACE WHEREEVER U WANT THE TEXT
original code from www.javascriptfreecode.com; cr @mitsuyafuji on ig for fixing it

<style>
body {
margin: auto
height: 100%;
width: 100%
background-color: transparent;
background-size: cover;
}

p {
margin: 0px;
}

h1, p {
text-align: center;
line-height: 18px;
font-family: arial;
}

.glowIn {
color: black;
}
.glowIn span {
animation: glow-in 0.8s both;
}

@keyframes glow-in {
from {
opacity: 0;
}
65% {
opacity: 1;
text-shadow: 0 0 25px grey;
}
75% {
opacity: 1;
}
to {
opacity: 0.95;
}
}
</style>
<h1 class="glowIn"></h1>
<p class="glowIn"> cr @mitsuyafuji for firguring how to edit this shit oh my gof </p>

<script>
"use strict";
var glowInTexts = document.querySelectorAll(".glowIn");
glowInTexts.forEach(function (glowInText) {
var letters = glowInText.textContent.split("");
glowInText.textContent = "";
letters.forEach(function (letter, i) {
var span = document.createElement("span");
span.textContent = letter;
span.style.animationDelay = i * 0.05 + "s";
glowInText.append(span);
});
});
</script>

back

we will open the cbox once we're done organizing the rest of the sections if u have any questions feel free to dm @mitsuyafuji on instagram