Tumgik
#https://stackoverflow.com/a/17756378
citrusinicake · 4 months
Text
#workskin .rainbowStroke { -webkit-text-fill-color: black; background-image: -webkit-linear-gradient(-45deg,blue,magenta,red,orange,yellow,green,cyan); -webkit-background-clip: text; -webkit-text-stroke: 2px transparent; padding-left: 5px; margin-left: -5px; padding-right: 5px; margin-right: -5px;
}
edit: added four new lines to prevent bg clipping
spokeishere text (black text with rainbow stroke) if anyone wants it
idk if theres already a workskin that works just like/similar to this but i havent checked lol
breakdown of code for anyone too intimidated to play around with it (not an expert tho this is mainly just me listing down my conclusions after playing around with it, also written in a way thats assuming the reader knows fuckall about coding):
#workskin .rainbowStroke { -webkit-text-fill-color: black; background-image: -webkit-linear-gradient(-45deg,blue,magenta,red,orange,yellow,green,cyan); -webkit-background-clip: text; -webkit-text-stroke: 2px transparent; padding-left: 5px; margin-left: -5px; padding-right: 5px; margin-right: -5px;}
code name
> can be changed
> is what you use to define the code aka attach the properties to the actual text using text
text color
> webkit is what supports the existence of stroke hence why it's there and why you cant just use {color: black;}
> fill is what thickens the text, you can delete it but it makes the text harder to read
stroke colors aka the text outline
> deg is the way the colors are rotated, feel free to change the number and to make it positive or negative
what makes the stroke not just a square
> clipping for those of you unfamiliar with it just means it follows the shape of whats underneath it
stroke properties
> the px means pixels and indicates the size of the stroke
> transparent means it'll actually show whats underneath, it can be deleted but doing so will make the text moremuddy/desaturated
background overflow
> there to prevent the colors from being cut too short since nackground normally is almost the exact size of the text
> can be changed but will affect the colors, also having it too small will cause clipping
anything in black/white is code language properties, you cannot make anything without them
5 notes · View notes