FITZY'S RESOURCES!

Last updated 11/3/21 - Added more resources. THANKS FOR 1000 VISITS!

CODES

home

Not all text will preview on this page, so to view more text effects press more. If text doesnt animate, reload the page! Questions on how to use should be redirected to my cbox

TEXT EFFECTS

Not all text will preview on this page, so to view more text effects press more. If text doesnt animate, reload the page! Questions on how to use should be redirected to my cbox

Code Here

Code Here

Popping Text

Code Here

Pulsing Text

Code Here

NEWS-TICKER

Code Here

Bubbling Text

Code Here

# Shake text

Code Here

Glowing Text

Code Here

tilting text

Code Here

floating text

Code here

B

o

u

n

c

y

t

e

x

t

Code Here

Code Here

tumblr text

Code Here

Marquee Text Marquee Text Marquee Text Marquee Text Marquee Text

Code Here

+MORE

click text 4 preview!

Text Scramble

code

Image Stroke

code

Rubberband Text

rubberband

code

Glitch Text

Glitch

code

Rainbow

code

## IMAGE EFFECTS

Animations

Code Here

Code Here

Code Here

Code Here

Code Here

Code Here

Code Here

Code Here

Code Here

Code Here

Code Here

Code Here (Cr Diacoded)

Borders

Code Here

Code Here

Code Here

Code Here

Code Here

Code Here

Code Here

Code Here

Code Here

Code Here

Code Here

Code Here

Code Here

hover/tap effects

hover/tap to view effect

Code Here

Code Here

Code Here

Code Here

Code Here

Code Here

Code Here

## MISC CODES

(Some have previews, some do not)

Dropdown 2 (gina.crd.co)

Typing web title

Custom Highlight

Marquee Tab Title

TV Filter

Img that follows Cursor

Windows Buttons

Animated Heart Img

Book

Floating text/symbol in bg

Chatbox

Ink Wipe Effect cred teaclub

Carrd Pet

Peeping Img

Website Counter

WebNeko

Absolute Positioning

Rotating Elements

Img Slideshow

Image Clicksplosion

Blurred Edges on Container

Gif/Image as scrollbar

Code Here

Dropdown 2 (gina.crd.co)

Code Here

Custom Highlight

highlight me!

Code Here

TV Filter

Code Here

Windows Buttons

_
X

Code Here

Carrd Pet

Code Here

Absolute Positioning

<style>
#elementID {
position: absolute;
top: -0.5em;
left: -0.5em;
z-index: 50;
}
</style>

Rotating Elements

<style>
#image01 {
transform: rotate(20deg);
}
</style>

Blurred Edges on Container

box-shadow: 0 0 20px 20px black inset;

goes in container style

## Scrollboxes!

double border

text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text

Code Here

Code Here

rounded edges

text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text

Code Here

Code Here

Code Here

hello~ text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text

Code Here

SKEWED SCROLLBOX text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text

Code Here

lace border by @baeyhkun text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text

Code Here

text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text

Code Here

Text TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText

Code Here

Text TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText

Code Here

tutorial on how to add custom borders here

## Music Players!

Code Here

Code Here

Tutorial on how to use music players here

## Backgrounds!

Snow

Snowflakes

Floating text/symbol in bg

Snow that gathers at bottom of page

Fireworks

Rain

Bubbles

Stars

Image Falling in Bg cr soleilios

## Tutorials!

home

How does Absolute Positioning Work?

As we know, the code for absolute positioning is

<style>
#elementID {
position: absolute;
top: -0.5em;
left: -0.5em;
z-index: 50;
}
</style>

So lets break this down into simple terms.

#elementid is the id of your element. You can find the element id by clicking your text, image, container, etc, and going to the settings button. Go to where it says id. This will show you the id of your image. You can leave it as it is, or change it.

Top and left control the way your element is positioned. The lower the number, the farther it will move in that direction. For example: left: -2em; would move your image to the left, while left: 2em; would move your image to the right. You can change left to right and top to bottom if you want.

Z index is how your image appears in relation to the other elements on your page. If the z index is higher, it will appear in front of other elements. If its lower, it will appear behind them.

Headers and footers are a way to keep certain elements present on every page of your carrd. First, lets discuss how to create them.

To create a header, first go to +, then #control. It should look something like this.

Then click on the control. It will open a menu. Under type, choose either header marker or footer marker.

When making a header, put it under everything you want to stay on every page. When making a footer, put it before.

After this, add two more sections under your header or footer. Leave the first one as it is. Change the name of the second one to whatever section you want it to take you to. For example, if you wanted to go to the about page, make it #abt or whatever.

It should look something like this:

and you're done!

But Fitz, what if I dont want my header to appear on every section of my carrd?

That's a simple fix! Lets say you dont want your header to appear in the about section of your carrd. Click the about section control (in this case, I would select #deeznuts)

Scroll to the bottom. There, you should see an options section.

Check one of these two boxes! It depends on if you are using a header or a footer. Your header/footer will no longer appear on this section of your carrd!

How do music players work?

Here's how to change some aspects of your music player! Remember- all music players are different. This is a general tutorial. For more specific questions, vistit my cbox.

How do I change the Title?

Find this (or something similar) in your code!

Change the part that says 'Moonlit Night' (or whatever it says in the code) to your title! for no title- just leave it blank!

How do I change the pixel (for music players with pixels)

Find something that looks like this.

Delete the link in between the quotations. Next- go to a graphics carrd and find a gif you like. Right click it, then press "copy image adress" paste the copied link in between the quotation marks.

Go to youtube and find your song. Copy the link, and paste it into this website. When it's done, press dropbox. Sometimes this doesn't work. If it doesn't, press download mp3, then right click the downloaded mp3 and press view on dropbox.com.

https://www.dropbox.com/s/hjfvrnterdwca40/Pokemon%20Sun%20%26%20Moon%20-%20Lillie%20Encounter%20Music%20(HQ).mp3?dl=0

If it doesn't, just try copying it a few more times.

Remove the ?dl=0. Replace www with dl.

Find this.

Replace the link in the quotations with the one you made. You're done!

How to put custom borders on scrollboxes

First, lets find a scrollbox that already has an image border. Lets use our pink bow border from my scrollbox section.

Open the code. Now, find an image border you like. It can be from my images section, or really anywhere you like. Im going to be chosing the pink lace border!

Open both codes. Find border img url in both.

Replace the url from the scrollbox with the border url from the img. And you're done! But you might have to mess around with some settings to make it look good.

How to style embed text

Add any of these under the style tags of your embedded text.

font-family: Arial;
font-size: 40px;
color: #ff00a9;
font-weight: bold; / font-weight: normal;
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;

How to center embeds

Add margin: auto; under style tags :)

How to add an image/gif next to text

When using embed text, simply put <img src= "imglink"> next to your embed text!

Tutorial on how to put a gif next to normal text here!

How to put a link in embedded Text

Replace text with what you want it to be called. for example, if I wanted it to lead to my lovemail page, link would be #lovemail and text would be 'boyfriend' or 'lovemail' or whatever!

Custom Font

PRO PLUS

Let's start off using this code.

<style>
@font-face {
font-family: cutie;
src: url(https://dl.dropbox.com/s/xo075bh6tbd4f7d/CP.ttf);
}

#cutie {
font-family: cutie;
}
</style>

Now, you can get fonts from a resource carrd, but I personally love dafont's fonts!

Open the zip file! Find the file ending in .otf or .tff and right click, then transfer to dropbox.

Right click again, then view on dropbox.com

https://www.dropbox.com/s/ajfhuqrifa9qxh1/Halloween%20Morning.ttf?dl=0

remove the ?dl=0 and replace www with dl.

Replace the link in red with your new link! Change the font family to whatever you want it to be called.

change #cutie to the id of your text!

PRO STANDARD

repeat the process above, but now use this code.

<style>
@font-face {
font-family: cutie;
src: url(https://dl.dropbox.com/s/xo075bh6tbd4f7d/CP.ttf);
}

#cutie {
font-family: cutie;
}
</style>
<div id="cutie">TEXT HERE></div>

Same process as above, but instead of changing #cutie to the id of your text, put your text in TEXT HERE.

How to put your custom font in embedded text

Put font-family: YOUR FONT NAME HERE; in the style tags!

Whatever you named your embedded font, thats what it would be called!

How to create a line break in embedded text

To create
this effect

put <p></p> in between your lines

to create

a space

Put <br> before your new paragraph

When creating a link, it is automatically underlined. Here's how to change it.

Click on your text, and go to the little paintbrush icon.

Scroll down till you find like style, then select plain.

Image at top of page

Set your background as the image you want to be at the top. Make sure the image is transparent.

Set position to top and Tile to Horizontal.

Make the transparency color the color you want your page to be.

Set size to custom and mess around with it until it looks right.

Change symbol for image Clicksplosion

Copy this code

Find this

Replace the * in quotations with any symbol you want!

Fittys Carrd Tips :)

Try not to clutter your carrd with unnescecary elements! As fun as they are, too many elements are hard on the eyes

Adding too many animations can make your carrd very hard on the eyes. Try to limit the amount of animations in your carrd!

Keep your text at a readable size. Especially if you are using a complicated font!

When making a pastel themed carrd, make sure your text isn't too light! It makes it very hard to read. If it is light, keep it on a darker background.

Try to avoid eyestrain carrds. It's a cool aesthetic, but those types of carrds are very rarely reader friendly.

and now for my most important tip...

-

Im so serious. W3Schools is literally the best site!! For those unaware: It allows you to preview your embeds to see what they look like! I seriously wish I had used W3Schools when I first started. Its much easier then publishing and reloading your carrd 80 times. Just look up W3Schools tryit editor!!

Aw also find the flaming text above here

## Resources!

My fav resource carrds!

Just Codes

resource (my fav) - limonysal, - bubblegum, - Pochi, - gloss, - Callie, - Lesbiana, Cakepop - duvet

To get your site added here, send me the url in my cbox!

Just Graphics

Graphics and Code

More graphics

home

## CBOX!

For more complicated questions, dm @guywifes, @meiplush, or @muggthree. I will answer questions very frequently!

FITZ - he/pup/she/glam
MEG- she/him/it/aer
VINCE - he

home

11/1/21 - Site was launched! Thank you for visiting, everyone!