this carrd is currently inactive with no plans of being updated, sorry!

admin doesn't check the cbox either, but feel free to still chat there and offer help to each other :)

here is my graphics carrd, i have been collecting gifs since around march and often mass update with all the gifs i find from carrd hunting :)

eridan.crd.co (eyestrain!!)

here are some other gif/resource carrds! please let me know if you would like for me to link yours!

latte + peko (horror, gore, flash warning!) + yokai + xyz + sweetie + gifs4crds + gifs + teaclub

and here is another graphics resource!

bonnibel's collection

though this carrd isn't active currently, i am still available to help if needed!

please reach out to me on discord: crunchwrap#6969!

here is the current list of tutorials! i do know more than i currently have tutorials for, so feel free to ask me about something you don't see on here!

rotating elements

all tutorials here will work on pro standard!

using this site's codes, you can find many click/tap effects under the "mouse effects" tab!
once you have selected which you want, copy and paste the code the site gives you into an embed on your carrd (make sure it's set to "hidden + head" instead of "inline")!
after doing this, it should work!! however, using more than one at once can cause them to mess each other up, so i do not recommend this. this can also happen if you use a lot of embeds at once, some of them just don't work well with each other.

back

using this site's codes, you can find different effects such as rainbow text, wobbly text, news ticker (which is basically a typewriter) and more under the "text effects" tab!!
once you have selected which you want, copy and paste the huge chunk of code the site gives you into an embed on your carrd (make sure it's set to "hidden + head" instead of "inline")!
after doing this, make another embed, and keep it set to "inline"!! in this embed, put the much smaller bit of code from the site (located underneath the bigger bit), and replace the "(EFFECT) TEXT" part with what you want it to say!!
in a sense, the "hidden + head" embed is like the blueprint or instructions, and it tells the "inline" embed how to display the text in it. after making both of these embeds, it should work!!

back

most cursor sites should offer a code for each cursor all ready to be pasted into your site!! just find a cursor you like, locate the code on the page, and paste it into your embed! (make sure it is set to hidden + head and not inline.) one that i like to use is cursors-4u!!
unfortunately, animated/gif cursors will not play, but should have a failsafe so that if you use them anyway it will still work but as a still image. and of course, cursors will not appear on mobile!

back

copy and paste this code into your (hidden + head, not inline) embed, replace each "message here" with your own tagline, and you're done! if you want to have less or more messages, change the "tb8_makearray (3)" to a different number (1-5!!) you can also try changing "tb8_speed" or "tb8_delay" to change the typing speed or how long it takes for the message to switch!!

back

to position text halfway out of its container, you'll want to copy and paste this into an inline embed, but replace the "#text01" with the text's ID (this can be found in it's settings)!
<style>
#text01 {
position: absolute;
left: 0;
width: 100%;
top: -0.5em;
z-index: 1000;
}
</style>
you may need to adjust the number following "top:", but if you place the embed in a container, when published it should appear either halfway or fully out of it!

back

to get a border around text, copy and paste this into an inline embed and change the colours to whatever you'd like:
<style>
h1 {
text-shadow: -1px 0 #ff0099, 0 1px #ff0099, 1px 0 #ff0099, 0 -1px #ff0099;
}
</style>
and then just add <h1> to the start and </h1> to the end of whatever text you want!
additionally, after putting that code in an embed, you can make bordered text with a normal text element instead of an embed by changing it to "site title" instead of "text"! (h1 = site title, h2 = main heading, h3 = subheading, p = paragraph)

back

to add a border around an image, go to the image's settings and find its ID. it will look something like #image01 though the number will vary. then, paste this in an embed:
<style>
#image01 {
border: 2px solid #ffffff;
width: 100px;
height: 100px;
margin: auto;
}
</style>
this will result in a solid white border!
change the image id to whatever your image's is, and adjust the height and width to your liking. you can also change "solid" to "dashed", "dotted", or "double" (if you change it to double you should also change the 2px to 4px).
the same thing can be done for a container, but you can remove the "height" and "width" in that case.

back

paste this code into an inline embed, but replace the "#text01" with the ID of whatever element you would like (its ID can be found in it's settings!)
this does work for both text and images, probably other things as well but i have not tested that!

back

paste this code into an inline embed, but replace the "#image01" with the ID of whatever image you would like (its ID can be found in it's settings!)
you can make all images shake by putting "img" instead of an ID (remove the hashtag as well if you do so!)
adding :hover after the ID (for example, #image01:hover) will make the image only shake when the image is hovered over (or on mobile, tapped!)

back

paste this code into an inline embed and change the "#text01" to the ID of a text element (this can be found in it's settings):
<style>
#text01 {
height: 150px;
border: 1px solid #000000;
overflow:auto;
padding: 2px;
width: 100%;
}
</style>
also adjust the height as needed, and customize the border (this is elaborated on here)!

back

here is some code that defines a font, size, and colour for any text that has <glub> before it and </glub> after it:
<style>
glub {
font-family: Arial;
font-size: 40px;
color: #ff00a9;
}
</style>
change any of these as needed, or remove the ones you don't need! if you make more styles for your text just remember to change the "glub" to something else for each one!

back

to put gifs within text, your text has to be in an embed (not a regular text element!) just put <img src="image.gif"> anywhere you would like a gif or image, but replace the "image.gif" with the link to the image!
you can put the images/gifs you'd like to use on a secret page of your carrd so that you can copy their links, or you can copy the link from where you got it! (some good sources for gifs are here)!

back

copy and paste one of these codes to an inline embed. skim through it, throughout you will find where you can change the colours etc. and near the bottom you can change the song title and song.
you can also add other tags to the song title, such as <marquee> and </marquee> to make it scroll from right to left!
in order to put your own song, you will have to download it as an mp3 and upload it to dropbox. then, get the link for it and replace the current link in the code with it. you will also have to remove the bit at the end so that the link ends at ".mp3", and change the "www" to "dl". after that, it should work!

back

tap to get the code for which player you want!

back

to get floating hearts/stars/question marks/any other text in the background, copy and paste this code into a hidden + head embed, and change the heart and colour to whatever you'd like!
this will go on top of any background you already set for your site!

back

to get gradient text, paste this into an embed, but replace the "text01" with the ID of whatever text you'd like (this can be found in it's settings!):
<style>
#text01 {
background: linear-gradient(to top, #FFE0ED 0%, #FF78B1 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #FF4593;
}
</style>
to remove the outline, remove the last two lines from the code (the ones that contain "stroke"). this code does not work with the normal way of putting borders around text, nor does it work with text shadow!

back

you can do all sorts of cool stuff with absolute positioning! absolute positioning is basically removing an element from it's position on the page and instead placing it using top, bottom, left, or right values. (an example is this tutorial)
to add absolute positioning to any element, put this in an embed but change it to an element's ID (this can be found in its settings):
<style>
#elementID {
position: absolute;
top: -0.5em;
left: -0.5em;
z-index: 50;
}
</style>
change the "top" to "bottom" if you'd like, or "left" to "right"!! mess around with the numbers too. the z-index value decides which element goes on top of another.
the higher the number with a - next to it, the further out of the box in that direction it will be. the opposite can be achieved by removing the - !!

back

feel free to ask here any questions you may have, or let me know if something on here is confusing or not working! additionally feel free to suggest something or just say something totally unrelated, it doesnt matter! :)

put this code in an embed:
<style>
a:hover {
webkit-filter: blur(1px);
filter: blur(1px);
}
</style>
if you want to blur all links keep the "a" and if you want to blur all images change the "a" to "img"!
if you'd only like the effect to apply to a specific image, put the image's id (found in it's settings) instead of "img". keep the ":hover" part after it though unless you want it to always be blurred!

back

to put multiple of the same text effect on a carrd, its a bit tedious. this will probably be a bit difficult for beginners! also, this is a new discovery of mine so right now it only seems to work on text effects where it's triggered by <span>, not <div>.
go through the code of the text effect and replace the name of every function (for example, on the rainbow text, change all instances of "raintxt" to "raintxt2", all instances of "rainbow" to "rainbow2", and so on. you can usually tell what to replace as the mf2fm guy has really silly names for all this stuff like "bubby" and "rainbeau".)
then, instead of putting "<span id="rainbow">text</span>, you'd put "rainbow2".
it's pretty easy to replace them all if you have access to ctrl+f!

to put two different text effects it is much easier! just replace each instance of "funky" on one of them with something else and then it will work.

back

to put an image or gif as the background of text, put this code in an embed but replace the #text01 with the id of your text element (this is found in it's settings):
<style>
#text01 {
background-image: url("image.gif");
-webkit-background-clip: text;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #FF4593;
-webkit-text-fill-color: transparent;
}
</style>
replace the stroke colour + width with whatever you'd like (or remove it) as well as put in the source url of the gif/image you want!

back

disclaimer, this tutorial is heavy on writing your own html!! it may be best to ask someone else for help writing it if you're very new to it.
put this code in an inline embed, and then put any styles you want for the front of the card in the code under ".flip-card-front" (e.g. text colour, background colour, border, etc). and do the same for the css under ".flip-card-back" (they can be different!)
after doing this, scroll down in the code until you see <body>, under that is what will actually show on your page. the code provided has the front entirely taken up by an image and the back with text on it, but you can remove the image and put in text.

back

to rotate an image or text element, simply put this in an embed but replace the #image01 with the id of the text or image (it's id is found in its settings):

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

and adjust the degrees as needed!

back