FITZY'S RESOURCES!

codes
tutorials
resources
cbox
log

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

Sky Blue Bow Tie

CODES

text - images - scrollboxes - misc - music - bgs
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

Image Mask

Code Here

Gradient Text

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

blink text

Code Here

tumblr text

Code Here

Marquee Text Marquee Text Marquee Text Marquee Text Marquee Text

Code Here

+MORE

home - back

click text 4 preview!

home - back

Text Scramble

code

back - home

Text Stroke Mask

Image Stroke

code

back - home

Rubberband Text

rubberband

code

back - home

Glitch Text

Glitch

code

back - home

Rainbow

code

back - home

IMAGE EFFECTS

Animations

Code Here

Code Here

Code Here

Code Here

Code Here

Code Here

Masks

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

00 01 02

Code Here

Code Here

Code Here

Code Here

home - back

MISC CODES

(Some have previews, some do not)

Dropdown Menu

Dropdown 2 (gina.crd.co)

Menu Appear on Hover

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

Alert Box

Blurred Link on Hover

WebNeko

Absolute Positioning

Rotating Elements

Img Slideshow

Image Clicksplosion

Blurred Edges on Container

Gif/Image as scrollbar

home - back

Dropdown Menu

Code Here

home - back

Dropdown 2 (gina.crd.co)

Code Here

home - back

Custom Highlight

highlight me!

Code Here

home - back

TV Filter

Code Here

home - back

Windows Buttons

_
X

Code Here

home - back

Carrd Pet

Code Here

home - back

Absolute Positioning

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

home - back

Rotating Elements

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

home - back

Blurred Edges on Container

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

goes in container style

home - back

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

DASHED BORDER goes your text here goes your text here goes your text here goes your text here goes your text here goes your text here goes your text here goes your text here goes your text here goes your text here goes your text here goes your text here goes your text here goes your text here goes your text here goes your texthere goes your text here goes your text here goes your text

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

NO BORDER goes your text here goes your text here goes your text here goes your text here goes your text here goes your text here goes your text here goes your text here goes your text here goes your text here goes your text here goes your text here goes your text here goes your text here goes your text here goes your texthere goes your text here goes your text here goes your text

Code Here

CHANGE BG. here goes your text here goes your text here goes your text here goes your text here goes your text here goes your text here goes your text here goes your text here goes your text here goes your text here goes your text here goes your text here goes your text here goes your text here goes your text here goes your texthere goes your text here goes your text here goes your text

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

home - back

Music Players!

Code Here

Code Here

Tutorial on how to use music players here

home - back

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

home - back

Tutorials!

How does absolute positioning work?
How do headers/footers work?
How do music players work?
How to put custom borders onto scrollboxes
How to style embed text
How to center embeds
How to put an image/gif next to text
How to put link in embedded text
Custom Font
How to put custom font in embedded text
Linebreaks in Embedded text
How to add link to embedded image
Removing Underline from links
Image at top of page
Change clicksplosion Symbol
My personal carrd tips

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.

home - back

How do Headers/Footers work?

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!

home - back

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.

How do I add music?

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.

When you are in dropbox, press copy link/get link or something along those lines on your downloaded music file. It should look something like this.

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!

home - back

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.

home - back

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;

home - back

How to center embeds

Add margin: auto; under style tags :)

home - back

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!

home - back

How to put a link in embedded Text

<div id=”tag”><a href=link target="_blank">text</a></div>

Replace link with either your section name or link outside of page
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!

home - back

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!

When you pick a font you like, press download.

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

Press share, then create then copy link. Your link should look like this.

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.

home - back

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

home - back

Removing Underline from Links

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.

home - back

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.

home - back

Change symbol for image Clicksplosion

Copy this code

Find this

Replace the * in quotations with any symbol you want!

home - back

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...

Use W3Schools
-

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

home - back

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

Gifs4Crds - Graphics - Pixel - Eridan - literature - barbara - gallery - pix

Graphics and Code

codes - frogpop - mori - xyz - madness - gnome - watermelon - peko - teaclub

More graphics

pixels masterpost - gifcities - dividers masterpost - more dividers - y2k - bonibel's collection - button colection(flash) - glittergraphics - cute kawaii resources - studio pixels - SFW Pixels - keep it cute

Helpful Sites

remove bg - img color picker - Spriters resource - kaomojis - cursors - coolors - textanim - Blinkie Maker - Button Maker

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!