JavaScript Best Codes

Welcome to our Resources!

this site serves as a bookmark for all of the fonts, codes and others that we use for sites of our own~ click on 'our' to know more about us and for those interested in carrd pro feel free to use admin uka's referral code "ISHIMORI" !! enjoy your stay โ—กฬˆ

Text Codes

NEW! text/link floats on hover โ— text with border 1 โ— text with border 2 โ— webkit text stroke โ— gradient text โ— floating text โ— marquee text โ— bubble text โ— color changing flicker text โ— pop text โ— wobbly text โ— curved text โ— rubberband text โ— bouncy 1 โ— bouncy 2 โ— sideways bounce โ— news ticker with pixel โ— website button with blinking cursor โ— glitch text โ— text w image as the bg โ— pulsing text โ— tumblr wobble text โ— tilting text โ— shaking text โ— animated link underlines on hover โ— triple outline

Image Codes

NEW! floating grayscale on hover โ— pastel blue lace โ— pastel pink lace โ— hot pink lace โ— pink ribbon border โ— png blur shadow โ— basic lace border โ— brown hearts lace โ— gigi's gold frame โ— hearts mask โ— hello kitty mask โ— mask batch 1 โ— mask batch 2 โ— star mask โ— paper mask โ— blurred border โ— spin img โ— twitch img โ— floating img โ— rotate and saturate on hover โ— bouncing flip heart slideshow โ— rotate and blur on hover โ— glitch img โ— ticker img โ— pop img โ— fog mask โ— img tooltip on hover โ— 3d effect box shadow

Scrollboxes

simple border โ— double border โ— no border โ— expand on hover โ— dashed border โ— colored bg โ— gradient bg โ— img/gif bg โ— uneven border โ— scrollbox with mark โ— two fonts in a scrollbox โ— lace border โ— brown lace โ— img hover to reveal scrollbox โ— img blur and shake to reveal scrollbox โ— horizontal scroll โ— title disappears when scrollbox expands โ— box shake blur and scroll to reveal scrollbox โ— beaded hearts โ— tiled flowers โ— biscuit border โ— blue lace โ— doily

Music Players

img bounce on hover โ— draggable โ— circle pop โ— marquee w pixel โ— circle spin โ— cd spin โ— pixel to music player on hover โ— cutie circular โ— speaker โ— ongaku โ— madomagi โ— mp3 with pixel โ— 2000s โ— spinning icon โ— kill bill โ— marquee โ— spinning headphone circle โ— glenthemes players found here

Backgrounds

NEW! butterfly image fall โ— radial gradient page bg โ— falling sakura leaves โ— custom image fall โ— tv set filter โ— vhs overlay โ— falling hearts โ— snowing โ— snowflakes โ— star warp โ— pixel rain blocks โ— blobs in a jar โ— blobs in a jar with symbol change โ— bubblebath โ— rain falling

Cursors & Scrollbars

NEW! 7.css scrollbar โ— hidden scrollbar โ— colored scrollbar โ— gradient scrollbar โ— old web scrollbar โ— cute cursors โ— img clicksplosion โ— tinkerbell โ— bubbles โ— normal clicksplosion โ— smokey fog โ— love hearts โ— flowers โ— music note โ— question mark โ— image trail โ— cursor trail

Miscellaneous

this carrd's update log โ— jake's blur menus โ— gina crd co menu โ— simple drop down menu โ— cbox โ— website pet โ— webneko โ— counter 1 โ— counter 2 โ— typing tab title โ— marquee tab title โ— click sound effect โ— message alert when page opens โ— disable left click + alert โ— draggable elements โ— intro animations โ— tabs thingy โ— password protection on carrd โ— cbox on hover as seen in this carrd โ— media rule โ— html forms โ— shaky hand

CSS Framework Sites

7.css โ— 98.css โ— XP.css โ— NES.css โ— clay.css โ— paper.css

Templates

NEW! miu drr ac - demo here โ— ishimori.net blog crd - demo here

Fonts

to insert custom fonts in carrd, refer to the tut in fonts.crd.co! all other fonts can be found in our pastebins~

heart โ— dinomiko โ— sakemoru โ— rainyhearts โ— bubbleboy โ— candie โ— snacker โ— mermaid โ— powerpuff โ— winkle โ— rosalie โ— stencil โ— yipes โ— paradise โ— cupcake โ— fontanio โ— kosmos โ— fenotype โ— jojoba โ— kiwi soda โ— antre โ— beatles โ— nikyukyu โ— candypop โ— protomo โ— psyche โ— Genty โ— sweetfarm โ— adabelle โ— frighted โ— stabillo โ— grandelo โ— candyful โ— Bigilla โ— WonderMagic โ— willond โ— creamy โ— stitch โ— Shutter โ— loving โ— Hantam โ— rainkiss โ— starborn โ— angelface โ— cookies ยฃยขยงยถ โ— quick love โ— melody โ— Funk โ— bohemian soul โ— keep on truckin'

Backgrounds

click on the images to expand! scroll for more~

Click on each of the imgs!

Meet UKA!

hi im uka or nera, i use any prns except they, and im the creator and owner of this resource carrd! feel free to use my referral code upgrading your crd plan! it doesn't charge you anything and it'll give me 30% of your payment upon doing so, which will help me out a lot ๐Ÿค you can find the rest of my portfolio in my crd comms, and if interested please consider commissioning me! (เท†ห™แต•ห™เท†)

my links:
twitter โ— retrospring โ— comms โ— referral โ— crd helper โ— whi

Some of my Carrds - Scroll!

Meet MIKA!

hai iโ€™m mika or giselle; please refer to me with she/it prns ๐Ÿค and im the co-owner of this crd!! (โŒ’โ–ฝโŒ’) some of you may recognize me as an admin of some carrd help accs on twitter, from my whi, or as the lili.crd.co creator~ i'm pretty ia in the cbox but i'm always adding new codes to the crd!

my links:
crdfleur โ— whi โ— twitter

Some of my Carrds - Scroll!

Meet SHIRINA!

hii everyone im shirina or kahnsi, and i use he/she prns! you probably know me as "giamgri" and im the newest admin of this resource crd! if youre interested in upgrading your carrd plan please use my referral code 'PEARL' i would appreciate it lots! i also have commissions set up and sell my crds, a small bit of my portfolio of my original designs is below (check my comms for more) and if youre interested please dm me, thats all thank you for reading! ูฉ(หŠแ—œห‹)ูˆ

my links:
code โ— twitter โ— retrospring โ— whi โ— comms

Some of my Carrds - Scroll!

Spotify Embed

click on the imgs to enlarge! if imgs dont load try refreshing your tab

1. open your playlist or track on spotify on desktop (does not work on mobile)2. click on the three horizontal dots found beside the download button and hover on "share"3. click on "embed playlist"

4. customize or edit your color or sizing in the preview menu5. check the box where it says "show code" and copy your embed!

6. paste your code into an inline embed in carrd and you're done! result:

for a spotify track click on the three horizontal dots beside your selected track, hover on "share" and click "embed track" and all the steps are pretty much the same as you would a playlist!

Blur on Hover

click on the imgs to enlarge! if imgs dont load try refreshing your tab

1. paste this code into an embed:<style>
a:hover {
webkit-filter: blur(1px);
filter: blur(1px);
}
</style>

โ— if you want to blur all links then keep the "a" and if you want to blur all image links change the "a" to "img"โ— if you want only a certain element to blur on hover, add your element id before a:hover

Remove Cursor Link

click on the imgs to enlarge! if imgs dont load try refreshing your tab

1. select whatever cursor you want from cursors4u and copy the universal css/html code

2. remove everything that comes after </style> and you're done!

Image Plays Music

click on the imgs to enlarge! if imgs dont load try refreshing your tab

for pro standard1. copy this code and paste in in an embed<script>
document.getElementById("image01").onclick = function() {
var audio = document.getElementById("audio");
if (audio.paused) audio.play();
else audio.pause();
}
</script>2. "image01" is the element id of your image element. to view this go to the settings of your image and change it to whatever the element id is (e.g image02, image03, etc.)3. in the same embed add
<audio id="audio" src="MUSIC-URL-HERE"></audio>and replace MUSIC-URL-HERE with the link of the music file you want to play. a tut on how to download and import music files can be found herethis is what your code should look like:

for pro plus1. go to the settings of your image element and click on "events", then add this code to the "on click" settingsdocument.getElementById("audio");
if (audio.paused) audio.play();
else audio.pause();2. then, in an embed add<audio id="audio" src="MUSIC-URL-HERE"></audio>and replace MUSIC-URL-HERE with the link of the music file you want to play. again, a tut on how to download and import music files can be found herehere's how everything should look like:

extra: this can also work with text elements. just replace image01 with text01 or whatever the element id of your text is and it should work the same, both for pro plus and standard!