SOLLIE'S RESOURCES!!!!

please consider following me if used!!
i won't be answering carrd questions on cbox anymore, I'M SORRY ND HOPE U CAN UNDERSTAND!!!!
BUT feel free to send me a dm if yuo need any help or have any suggestions!!!!! :D

last update: june 28, 2021

PIXELS !!!

BACKGROUNDS !!!

DIVIDERS & OTHERS !!!

CODES & LINKS !!!

please note that you'll need carrd pro (preferably pro plus) for all of the codes!!!
i'll mark the codes that require pro plus with a + !!
★ = highly recommended!!

<style> #glitch { } #glitch { font-size: ; /* Change glitch effect here */ /* animation: glitch-2 1s infinite linear; */ animation: glitch-1 2s infinite linear; } @keyframes glitch-1 { 0%, 12%, 15%, 52%, 55%, 82%, 85%, 100% {opacity: 1; transform: scaleX(1) scaleY(1); } 13% {opacity: .8; transform: scaleY(2); color: #;} 53% {opacity: .8; transform: scaleX(.7); color: #;} 83% {opacity: 8; transform: rotate(-10deg); color: #;} } @keyframes glitch-2 { 13% {color: #;} 53% {color: #;} 83% {color: #;} } </style>
go to settings > element and then change the ID to #glitch !!!
it might work with images as well!!

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

this goes in element settings > styles!

div {
background-color: transparent;
width: 150px;
height: 150px;
overflow: scroll;
overflow-x: hidden;
overflow-y: scroll;
}

this goes in element settings > styles!
you can change the width and the height to whatever you want! just play around with it!!!

.strokeme {
color: #;
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;
}
this goes in element settings > styles!

<style>
#pop{
text-shadow: -1px 0 #ff639f, 0 1px #ff639f, 1px 0 #eb6a88, 0 -1px #eb6a88, 0 0;
font-style: bold;
font-size:2.5em;
font-weight:bold;
color: #;
line-height:0em;
-webkit-animation: pop 1s ease-in-out infinite alternate;
animation: pop 1s ease-in-out infinite alternate;
-moz-animation: pop 1s ease-in-out infinite alternate;
}

@keyframes pop {
from {
transform:scale(0.95)
}

50% {
transform:scale(1)
}

to {
transform:scale(0.95)
}
}

@-webkit-keyframes pop {
from {
-webkit-transform:scale(0.95)

}

50% {
-webkit-transform:scale(1)

}

to {
-webkit-transform:scale(0.95)

}
}

</style>

go to settings > element and then change the ID to #pop !!!
it works with images as well!!

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* width */
::-webkit-scrollbar {
width: 8px;
}

/* Track */
::-webkit-scrollbar-track {
background: #ffd1d7;
}

/* Handle */
::-webkit-scrollbar-thumb {
background: #fc88a7;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #f76a8f;
}
</style>
</head>

<body>

if you wanna make the handle rounder, add border-radius: 0.25em; below ::-webkit-scrollbar-thumb !!

<script type="text/javascript">
var rev = "fwd";
function titlebar(val)
{
var msg = "wonderhoi";
var res = " ";
var speed = 340;
var pos = val;
msg = "YOUR TITLE";
var le = msg.length;
if(rev == "fwd"){
if(pos < le){
pos = pos+1;
scroll = msg.substr(0,pos);
document.title = scroll;
timer = window.setTimeout("titlebar("+pos+")",speed);}
else{
rev = "bwd";timer = window.setTimeout("titlebar("+pos+")",speed);}}
else{
if(pos > 0){
pos = pos-1;
var ale = le-pos;
scrol = msg.substr(ale,le);
document.title = scrol;
timer = window.setTimeout("titlebar("+pos+")",speed);}
else{
rev = "fwd";
timer = window.setTimeout("titlebar("+pos+")",speed);
}}}
titlebar(0);
</script></div>

this goes in an embed!

h1 {
background: -webkit-linear-gradient(#eee, #333);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

this goes in settings > style !!! if you want an outline for your text, add -webkit-text-stroke: 1px black;

<div id="embed01"><head> <style> p2{ font-size: 110%; font-weight: bold; color: #000; font-family: “times new roman”; font-style: ; filter: blur(0px); } </style></head><marquee direction='left'><p2>YOUR TEXT GOES HERE</p2></marquee>

BLINKING MARQUEE:

<head>
<style>
p3{
font-size: 2em;
color: #000000;
font-family: “georgia”;
animation:blinkingText 1.2s infinite;
line-spacing: 150%;
margin: auto;
}
@keyframes blinkingText{
0%{ color: #000000; }
49%{ color: #000000; }
60%{ color: white; }
99%{ color:white; }
100%{ color: #000000; }
}
</style>
</head>
<p3>YOUR TEXT</p3>

both of them go in an embed!!!

<script type="text/javascript">
function tb8_makeArray(n){
this.length = n;
return this.length;
}
tb8_messages = new tb8_makeArray(5);
tb8_messages[0] = "first message";
tb8_messages[1] = "second message";
tb8_messages[2] = "third message";
tb8_messages[3] = "fourth message";
tb8_messages[4] = "fifth message";
tb8_rptType = 'infinite';
tb8_rptNbr = 5;
tb8_speed = 150;
tb8_delay = 1750;
var tb8_counter=1;
var tb8_currMsg=0;
var tb8_tekst ="";
var tb8_i=0;
var tb8_TID = null;
function tb8_pisi(){
tb8_tekst = tb8_tekst + tb8_messages[tb8_currMsg].substring(tb8i, tb8i+1);
document.title = tb8_tekst;
tb8_sp=tb8_speed;
tb8_i++;
if (tb8_i==tb8_messages[tb8_currMsg].length){
tb8_currMsg++; tb8_i=0; tb8_tekst="";tb8_sp=tb8_delay;
}
if (tb8_currMsg == tb8_messages.length){
if ((tb8_rptType == 'finite') && (tb8_counter==tb8_rptNbr)){
clearTimeout(tb8_TID);
return;
}
tb8_counter++;
tb8_currMsg = 0;
}
tb8_TID = setTimeout("tb8_pisi()", tb8_sp);
}
tb8_pisi()
</script>

this goes in an embed!

<div><div id="embed01"><style> a:hover { -webkit-filter: blur(2px); /* Safari 6.0 - 9.0 */ filter: blur(1px); } </style></div></div></div></div></div>

this goes in an embed!

<style> ::selection { color: #ffffff; background: #FF4D979E; } </style>

this goes in an embed! you can change the color & the background to whatever you want!!

<style>
img:hover {
/* Start the shake animation and make the animation last for 0.5 seconds */
animation: shake 0.5s;
/* When the animation is finished, start again */
animation-iteration-count: infinite;
}
@keyframes shake {
0% { transform: translate(1px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(3px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-1deg); }
60% { transform: translate(-3px, 1px) rotate(0deg); }
70% { transform: translate(3px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(1px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
}
</style>
this goes in an embed!

this goes in an embed!

<script type='text/javascript'>
//<![CDATA[
var rate = 50;
if (document.getElementById)
window.onerror=new Function("return true")

var objActive; // The object which event occured in
var act = 0; // Flag during the action
var elmH = 0; // Hue
var elmS = 128; // Saturation
var elmV = 255; // Value
var clrOrg; // A color before the change
var TimerID; // Timer ID
if (document.all) {
document.onmouseover = doRainbowAnchor;
document.onmouseout = stopRainbowAnchor;
}
else if (document.getElementById) {
document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT);
document.onmouseover = MozilladoRainbowAnchor;
document.onmouseout = Mozilla
stopRainbowAnchor;
}
function doRainbow(obj)
{
if (act == 0) {
act = 1;
if (obj)
objActive = obj;
else
objActive = event.srcElement;
clrOrg = objActive.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}
function stopRainbow()
{
if (act) {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
function doRainbowAnchor()
{
if (act == 0) {
var obj = event.srcElement;
while (obj.tagName != 'A' && obj.tagName != 'BODY') {
obj = obj.parentElement;
if (obj.tagName == 'A' || obj.tagName == 'BODY')
break;
}
if (obj.tagName == 'A' && obj.href != '') {
objActive = obj;
act = 1;
clrOrg = objActive.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}
}
function stopRainbowAnchor()
{
if (act) {
if (objActive.tagName == 'A') {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
}
function MozilladoRainbowAnchor(e)
{
if (act == 0) {
obj = e.target;
while (obj.nodeName != 'A' && obj.nodeName != 'BODY') {
obj = obj.parentNode;
if (obj.nodeName == 'A' || obj.nodeName == 'BODY')
break;
}
if (obj.nodeName == 'A' && obj.href != '') {
objActive = obj;
act = 1;
clrOrg = obj.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}
}
function Mozilla
stopRainbowAnchor(e)
{
if (act) {
if (objActive.nodeName == 'A') {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
}
function ChangeColor()
{
objActive.style.color = makeColor();
}
function makeColor()
{
// Don't you think Color Gamut to look like Rainbow?
// HSVtoRGB
if (elmS == 0) {
elmR = elmV; elmG = elmV; elmB = elmV;
}
else {
t1 = elmV;
t2 = (255 - elmS) * elmV / 255;
t3 = elmH % 60;
t3 = (t1 - t2) * t3 / 60;
if (elmH < 60) {
elmR = t1; elmB = t2; elmG = t2 + t3;
}
else if (elmH < 120) {
elmG = t1; elmB = t2; elmR = t1 - t3;
}
else if (elmH < 180) {
elmG = t1; elmR = t2; elmB = t2 + t3;
}
else if (elmH < 240) {
elmB = t1; elmR = t2; elmG = t1 - t3;
}
else if (elmH < 300) {
elmB = t1; elmG = t2; elmR = t2 + t3;
}
else if (elmH < 360) {
elmR = t1; elmG = t2; elmB = t1 - t3;
}
else {
elmR = 0; elmG = 0; elmB = 0;
}
}
elmR = Math.floor(elmR).toString(16);
elmG = Math.floor(elmG).toString(16);
elmB = Math.floor(elmB).toString(16);
if (elmR.length == 1) elmR = "0" + elmR;
if (elmG.length == 1) elmG = "0" + elmG;
if (elmB.length == 1) elmB = "0" + elmB
elmH = elmH + rate;
if (elmH >= 360)
elmH = 0;
return '#' + elmR + elmG + elmB;
}
//]]>
</script>