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
click text 4 preview!
Text Scramble
Text Stroke Mask
Rubberband Text
Glitch Text
Glitch
Rainbow
IMAGE EFFECTS
Animations
Masks
Borders
hover/tap effects
hover/tap to view effect
MISC CODES
(Some have previews, some do not)
Ink Wipe Effect cred teaclub
Dropdown Menu
Title
Menu Appear on Hover
<style>
#elementID {
position: absolute;
top: -0.5em;
left: -0.5em;
z-index: 50;
}
</style>
<style>
#image01 {
transform: rotate(20deg);
}
</style>
Blurred Edges on Container
box-shadow: 0 0 20px 20px black inset;
goes in container style
Scrollboxes!
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
Text TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
Text TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
tutorial on how to add custom borders here
Music Players!
Tutorial on how to use music players here
Backgrounds!
Snow that gathers at bottom of page
Image Falling in Bg cr soleilios
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
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.
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!
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!
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
<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!
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.
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
How to add a link to an embedded image
Add this code to the <div> section!
<a href="link" target="_blank">
<img src=image link>
</a>
Replace link with the site/section you want it to take you to, and image link with the link to your image.
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.
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
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
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
11/1/21 - Site was launched! Thank you for visiting, everyone!