Watermelon Slice

last update: 10/10/21
created: 04/30/21

pixels, gifs, dividers! go back

codes for crd pro! go back

double borders
text stroke
text that overlaps container
pop out effect (©)
website title
blurred links on hover
music player tutorial
typing text effect
floating hearts background
image in corner of container
change color on cursor highlight
custom font - standard + plus
image rotate on hover
notification when page opens
peeping body

links + resources! go back

gifs + cute stuff
more gifs
dividers / banners
html codes and scripts
teaclub.crd.co
yokai.crd.co
codes.crd.co
peko.crd.co (cw: eyestrain)
lili.crd.co
cakepop.crd.co
ed's carrd document
frogpop.crd.co
resource.ju.mp
limonsyal.crd.co

chatbox!

i don't rlly check this... you can dm me through twt or ig~!
BTW; check out my carrd commissions :-)

tips + things to know! (scroll)

here are some fonts i like!

1.) tumblr has good resources for gifs/pixels, dividers, backgrounds, and other pretty things! i recommend checking it out~ it helps me lots!

2.) please dont use eyestrainy colors and gifs, dark text on dark backgrounds, lighter text on lighter backgrounds, and anything that is harsh on the eyes in your carrds. make your carrds easy to read and accessible!

3.) making text transparent can work better than the divider feature since you can size it better and more easily.

4.) don't make your carrd super complicated... meaning: don't use a bunch of images that link to each section. your carrd shouldn't be a maze that people struggle to get through ^^

5.) if you're an avid carrd maker, i highly recommend taking screenshots or screen recordings of your carrds! (to see how much you improve over time and stuff... its nice to see your progress) i saw someone else make this recommendation and im glad i listened

6.) colorzilla is a chrome extension that's good for colorpicking quickly!

7.) i highly recommend against making your carrds black + red themed... they can be extremely difficult to read and understand because of the eyestrainy color combination.

8.) don't use those copy-paste fonts, as most screenreaders can't read them. keep in mind that making your carrd accessible is very important.

9.) if you need to make an "easier to read" carrd, then there's likely a problem with your main one... if i were you, i would just make your main one easier to read; it makes more sense that way

10.) weheartit, pinterest, and instagram (sometimes) have good carrd inspiration if you're ever stuck! i also like searching random words and then putting ".crd.co" after them. get creative! :-)

<

double borders!

.double5 {
border-top: 4px double #000000;
border-left: 4px double #000000;
border-right: 4px double #000000;
border-bottom: 4px double #000000;
}

<

text stroke/outline!

text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;

<

overlapping text!

position:relative;
bottom:35px;
z-index:1;

<

symbols!

♡ ♥ ✩ ✰ ★ ⋆ ✩ ✭ ✹ ❥ ✧ ☁ ◛ ❆
♪ ♫ ♬ ♩ ☽ ❦ ❧ ✎ ✐ ☏ ✄
❀ ❁ ❃ ✿ ❉ ✾ ♔ ♚ ♛ ♕
꒰ ꒱ ˗ˏˋ ˎˊ˗ ୨୧ ❝ ❞ ⌦ 𖦹
↳ ↱ ⇢ ➯ ↝ ➸ ➹ ↬ ↫ → ➥
( ̲̅:̲̅:̲̅:̲̅[̲̅♡]̲̅:̲̅:̲̅:̲̅ ) (:̲̅:̲̅:̲̅[̲̅:☆:]̲̅:̲̅:̲̅:̲̅)

<

fonts!

gaegu ☆

nunito

fredoka one

times new roman

gamja flower

averia sans libre ☆

averia serif libre

anonymous pro

beth ellen

vollkorn

spectral

pacifico

mansalva ☆

homemade apple ☆

comic neue

grandstander ☆

(☆ = my personal favorites)
all carrd fonts can be found here

<

blurred links!

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

<

image in corner!

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

example: the pngs in the corners of the containers of this crd...

note: just play around with the positioning to get it to fit!

<

tips + such for free carrd

just a reminder that im by no means an expert at making carrds! these are just some tips and recs that helped me back when i stuck to using free carrd features!

having borders on containers tend to look better than not having them... carrd lets you do dotted, dashed, and straight lined borders and they're usually really nice looking depending on what carrd look you're going for.

if you struggle with making things line up properly, use transparent borders or text-boxes... this is helpful for people with any carrd plan but i figured i'd include it here!

if you want to get rid of the "made with carrd" text at the bottom of the screen... the first textbox of your carrd determines what color the "made with carrd" will show up as!

this goes for people with any carrd plan, but especially free carrd users: please stop making those website looking carrds with a bunch of useless text and information crammed in... they're usually very difficult to navigate and read and most likely are not supported by screen-readers!!

using the drop shadow feature usually makes things look nicer! but make sure that if you include drop shadow in your text that it does not make it too difficult to read or understand.

since carrd limits the amount of sections of a container to 4, use the "gallery" feature if you want to put multiple images next to each other~

also... i see a lot of people who use the "button" or "icon" features and they don't link anything with it. i recommend that if you're going to use either feature, make sure that it links to your carrd or something else important instead of the "domain.ext" link that it auto registers as.. (i have no idea if this makes sense)

if you have any questions or things you think i should add to this section, please let me know! i know a lot of people who don't have carrd pro think that they can't make their carrds look good without pro features, but its totally possible to make really pretty carrds without having to pay~ just practice and mess around with things and you'll eventually get the hang of it!

<

free carrd

carrd pro

<