cbox . . . !

codes . . . !

here are some codes! no credit needed for any of them unless asked for! ☆ (๑′ᴗ‵๑)Ｉ Lᵒᵛᵉᵧₒᵤ♥
🌠 = FAV

TEXT + BORDERS + IMAGES + LINKS + JAVASCRIPT
SCROLLBOXES + BACKGROUND & MENUS + CURSORS + MISC

text codes . . . !

here are some codes! no credit needed for any of them unless asked for! ☆ (๑′ᴗ‵๑)Ｉ Lᵒᵛᵉᵧₒᵤ♥
🌠 = FAV

scrolling textbox + pop text (also for imgs) 🌠 + text stroke
glitch text + marquee text + offset text + cool effects 🌠
gradient text + gifs besides text + gif as text bg
hover effects website + randomized quotes
breeze text optimized cr jake carrduser
+ that tumblr wobble, cr jake carrduser
vertical text 🌠 + curved text + scratch filter text

border codes . . . !

here are some codes! no credit needed for any of them unless asked for! ☆ (๑′ᴗ‵๑)Ｉ Lᵒᵛᵉᵧₒᵤ♥
🌠 = FAV

double borders + wacky border 🌠+ img borders (lace etc)
inset borders + scrollbox bow border + blurred borders
nene's lace borders, cr nene + animated clouds
black lace

img&div codes . . . !

here are some codes! no credit needed for any of them unless asked for! ☆ (๑′ᴗ‵๑)Ｉ Lᵒᵛᵉᵧₒᵤ♥
🌠 = FAV

shaking images + heart mask + glow img stroke
blur and zoom 🌠+ paper mask from gnome + custom div over container + fixed footer + 2 img slideshow
image with tooltip + circular gradient border
star mask + little swinging img + twitching img
floating image 🌠 + fog mask for pro plus
+ shadow filter for text&imgs + container&img popif you want more masks, i cannot link them but check out some in the carrds under resources!

javascript codes . . . !

here are some codes! no credit needed for any of them unless asked for! ☆ (๑′ᴗ‵๑)Ｉ Lᵒᵛᵉᵧₒᵤ♥
🌠 = FAV

draggable box 🌠 + peeping graphic 🌠 + typing tab
cool javascript effects 🌠 + blobs in a jar effect 🌠
general draggable elements

cursor codes . . . !

here are some codes! no credit needed for any of them unless asked for! ☆ (๑′ᴗ‵๑)Ｉ Lᵒᵛᵉᵧₒᵤ♥
🌠 = FAV

custom cursors 🌠 + fake custom cursor + image trail
heart clicksplosion

bg&menu codes . . . !

here are some codes! no credit needed for any of them unless asked for! ☆ (๑′ᴗ‵๑)Ｉ Lᵒᵛᵉᵧₒᵤ♥
🌠 = FAV

scanlines + different bg on section + tabs + simple drop menu
mobile dropdown, cr 805online 🌠 + slide up menu
slide menu 2 + scrolling menu + fog bg img + book flipmy own menus coming soon!

scrollbox codes . . . !

here are some codes! no credit needed for any of them unless asked for! ☆ (๑′ᴗ‵๑)Ｉ Lᵒᵛᵉᵧₒᵤ♥
🌠 = FAV

old web scrollbar + hidden scrollbar
skewed scrollbox

music players. heh

images for these coming soon
🌠 = FAV

carrd tips & tricks

- you don't need carrd pro to make a good carrd! some of my best carrds have been without carrd pro.
- remember: you can use color codes in order to have different colored letters.
- remember carrds are suppossed to be accessible and mobile friendly, and if your carrd is not mobile friendly please make a version of it that is ^_^ if you're on desktop go to the mobile editor and make all column containers "default" in stacking.
- highlights are your best friend for regular text.
- !! this is important... a lot of code does not make a good carrd !! you have to know what you're doing!
- there are tons of guides for website themed carrds like the one in the right and arch!ve kpop stuff so i will leave links to ksjcrop if you want to make similar carrds here

google and stackoverflow are your best friends. at the end of the day we're all learning and copying each other. code is not "owned" however it is common courtesy to ask before taking something someone coded from scratch and please do not copy people's personal layouts without permission. there's a lot of generic templates out there. also please don't ask credit for code/a layout that isn't fully thought of and made by you.a lot of people don't use them but headers and footers are very useful in certain kinds of "open scroll" carrds.

spirals/swirls

music

nukos

misc

put this in style css or on a hidden embedbox-shadow: 0 0 10px 10px #000000 inset;it looks best if you match the blur with a solid color bg

2 make a custom div that goes over another div you have to use relative positioning and z-index. edit the div to your liking, here's one for example:<style>
#index {
background-color: white;
width: 200px;
border-top: 4px double #000000;
border-left: 4px double #000000;
border-right: 4px double #000000;
border-bottom: 4px double #000000;
padding: 5px;
position:relative;
top:-20px;
z-index: 999;
float: right;
}
</style>put a text element on the page and make its id/class the one you gave the div. boom you got a div on top of a container.

to do custom cursors you can either do them for the entire carrd, on hover, or for specific sections of the carrd.for the entire page:
<style>
html, body {
cursor: url("cursor.png"), default;
}
</style>on hover:
<style>
a:hover {
cursor:help; (or cursor url)
}
</style>on section:
<style>
.wawa {
cursor: url("https://benzos.neocities.org/images/monoko%20cursor.gif"), default;
}
</style>

in order to put gifs beside text, you have to make the text an inline embed and do <img src="picture.png"> and then the text, like this:

hello this is text hello
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus leo lorem, efficitur in nibh vitae, molestie mollis ante. Pellentesque et lectus dignissim, maximus velit nec, maximus lectus. In purus turpis, commodo ac nisl vitae, feugiat vehicula lectus. Nullam quis lectus efficitur, ullamcorper nisl sed, rutrum velit. Pellentesque pharetra justo lectus, id pretium lacus blandit placerat. Fusce bibendum placerat tempus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus leo lorem, efficitur in nibh vitae, molestie mollis ante. Pellentesque et lectus dignissim, maximus velit nec, maximus lectus. In purus turpis, commodo ac nisl vitae, feugiat vehicula lectus. Nullam quis lectus efficitur, ullamcorper nisl sed, rutrum velit. Pellentesque pharetra justo lectus, id pretium lacus blandit placerat. Fusce bibendum placerat tempus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

here's the link to the codewhat you wanna do is make an inline embed and edit the css of the card on flip card front and back!under body is the content of the card's front and back, edit this to your liking. you can put images, text and all kinds of html stuff. . .

i actually have an example of absolute positioning in this very carrd! basically here's how it goes:<style>
.embedclass {
position: absolute;
top: -0.5em;
left: -0.5em;
z-index: 50;
}
</style>make sure the z-index is very high, position with top and left and bottom and right. add png to where you want to place it (inside or outside container) and make sure it is hidden in the head! to rotate it use transform.

inset borders are very easy to do just replace "solid" with "inset" or "outset" for any border or in css style do border style.i love the way these look! <3example:
border-style: inset;
border: 4px inset #9fb7cc;

basic rotation:
transform: rotate(10deg);
add this to any embed or to css (also works with containers/divs) and adjust as necessaryhere's hover up and down text. you can also use it for images and you can either do it with embeds or css style.

i'm hovering! (link to pastebin)

animated rotations for text and images in order: blink, spin (hover), tilt (hover), tossing, twist, infinite spin

requires carrd pro plus for this version...!put this in css style:display:inline-block;
line-height: 0em;
position:relative;
z-index1
bottom:30px;adjust where it goes with bottom, top, left and right accordingly. it also helps to make the container position also relative and adjust the margins. basically play with margin and relative positioning on the container and text/image. you can see an example of it on this carrd that's also rotated

this is text

<div id="woo"> <marquee behavior="scroll" direction="right"> text </marquee>
</div>make another embed styling the text etc of the div id OR class in order to edit the marquee text.you can also edit the marquee inline. here's an example of this marquee i have on my carrd with a gradient and it's all inline:<marquee scrollamount="10"><span style="background: -webkit-linear-gradient(#000 ,#8f8f8f);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-stroke: 0.2px black; font-size: 1.5em;">this is text</span></marquee>

.div {
background-color: transparent;
width: 150px;
height: 150px;
overflow: scroll;
overflow-x: hidden;
overflow-y: scroll;
border: 1px double #000000;
}you can put this in an embed OR if you have carrd pro plus you can put it in a text's css style :) play with the width and height to fit the container if you have one!

.double {
border-top: 4px double #000000;
border-left: 4px double #000000;
border-right: 4px double #000000;
border-bottom: 4px double #000000;
}embed or css style by removing .double and { }. you can also simply use border: 1px double #000;

.stroke {
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black, 0 0;
}OR-webkit-text-stroke: 1px black;you can complicate text shadows to extreme amounts to create various amounts of cool strokes, here's one I use on my carrd:text-shadow: 2px 2px 0 #4074b5, 2px -2px 0 #4074b5, -2px 2px 0 #4074b5, -2px -2px 0 #4074b5, 2px 0px 0 #4074b5, 0px 2px 0 #4074b5, -2px 0px 0 #4074b5, 0px -2px 0 #4074b5;

<style>
img:hover {
/ Start the shake animation and make the animation last for 0.5 seconds /
animation: shake 0.5s;
/ When the animation is finished, start again /
animation-iteration-count: infinite;
}
@keyframes shake {
0% { transform: translate(1px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(3px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-1deg); }
60% { transform: translate(-3px, 1px) rotate(0deg); }
70% { transform: translate(3px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(1px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
}
</style>if you only want 1 image to shake make sure to give it a class, like this:.gay img:hoverTHIS IS NOT RECOMMENDED FOR ACCESSIBILITY!!!example:

in order to change the direction they wipe in, change the numbers after insetadd .links as a class/id to your text, adjust width to cover text as necessary.source and more information: herethe code:<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>

you can use any image instead of the heart in order to mask it (for example: a star)
<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>if the image cuts off etc change the webkit mask size. can also use gifs.

this is pure css but you can use it in an embed and add the class/id to an image.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);credit to teaclub.crd.co

black lace border

white lace border
(not visible in this)

pink lace border

you can pretty much use any image as a border if you know how to center it etc. experimenting with images as borders is always fun ^__^

brown lace border

do you want this effect?

code:
<style>.containerhhh {
display: inline-block;
margin: 20px;
border: 1px solid black;
overflow: hidden; / clip the excess when child gets bigger than parent /
}
.containerhhh img {
display: block;
transition: transform .4s; / smoother zoom /
}
.containerhhh:hover img {
transform: scale(1.3);
transform-origin: 50% 50%;
webkit-filter: blur(2px);
filter: blur(2px);
}</style>

here's a simple zoom:

<style>.zoom img {max-width: 100%;
transition: all 0.3s;
display: block;
width: 100%;
height: auto;
transform: scale(1);
}
.zoom:hover img {
transform: scale(1.1);
}</style>

here's a simple blur:

<style>
.blur img:hover {
webkit-filter: blur(4px); / Chrome, Safari, Opera /
filter: blur(4px);
transition: .3s all;
}
</style>