Report Blog Entry
Some people are having trouble figuring out how to make a custom design for their username on their profile. Here's how you do it!
This is mine! Go ahead and highlight, it's not a gif! It's text!
はなち
Here's how you can make your own!First let's start off with the base code!
Each part of the code is color coded:
Important
Optional
Interchangable
Your base code should look like this. Simply copy this into your about me section in between the <style> and </style> parts:
.profile h1 {
font-size: insert text size here (50px is the standard);
font-family: insert font here;
font-weight: insert font weight here(bold, light, normal, etc);
background: insert background here;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: insert animation here;
z-index: 100;
}
The -webkit-background-clip: text and -webkit-text-fill-color: transparent are optional if you want to use an image pattern or gradient on your text! What this does is that it creates a layer based on the background you chose and clips it to the text! It's like glueing a piece of wrapping paper onto a box and cutting the excess off.
If you want to add an image pattern, your background should be this:
background: url(insert image url here);
If you want to add a gradient background, your background should be this! Keep in mind you must also set a gradient direction, if you want the colors to progress from left to right, you should set your direction to left. If you want to start from the top, your direction should be top:
background: -webkit-linear-gradient(insert direction and colors here (separate by commas));
For those looking for a simple color, you just need to delete the optional webkit clipping code and simply set your text as a single color by replacing the background property with:
color: (insert color here (hex code,rgba values, color name e.g: white);
You can also add custom fonts and animations to it!
Here's a tutorial on how to import your own fonts from your computer
And...
Here's an animation generator!
Here's an example I whipped up for y'all to understand!
Catlover
This is it's code (Not color coded):
<style>
.profile h1{
font-size: 130px;
font-family: cursive;
font-weight: 550;
background: url(https://media.istockphoto.com/id/165812714/vector/ornate-seamless-pattern.jpg?b=1&s=612x612&w=0&k=20&c=2NyiysVMAlsS4_ngh9sdwP2FmXCYlKJnrcRNo2q6p4o=) ;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: floating 3s ease-in-out infinite;
z-index: 100;
}
@keyframes floating {
0% { transform: translate(0, -8px); }
50% { transform: translate(0, 8px); }
100% { transform: translate(0, -8px); }
}
</style>
Hope this is helpful! Get creative and go crazy!!!(ﾉ◕ヮ◕)ﾉ*.✧
Comments
Displaying 14 of 14 comments ( View all | Add Comment )
Ángel
Hi! It's not working for me. You explained it very well and I think I did everything correctly. As I saw that you posted in response to a comment, I downloaded the font and took the link from catbox. When I put the code in my profile my name is not visible it's just transparent. I am from a phone, I don't know if it has anything to do with it. thanks anyway!!
May I see your code? It could just be a loading issue or support issue device if you're using an older OS or slow internet. But there's also a chance it could be an issue with the code formatting itself.
by はなち; ; Report
Here it is, it's no longer transparent, but the font is not visible in the name, the rest works :)
.profile h1{
font-size: 130px;
font-family: https://files.catbox.moe/tsd4p5.zip;
font-weight: 550;
background: url(https://files.catbox.moe/vvbmtn.jpg) ;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: jelly 5s ease-in-out infinite;
z-index: 100;
}
@keyframes jelly {
0% {
transform: scale3d(1, 1, 1);
}
30% {
transform: scale3d(1.2, 0.95, 1);
}
40% {
transform: scale3d(0.9, 1.2, 1);
}
50% {
transform: scale3d(1.2, 0.85, 1);
}
65% {
transform: scale3d(0.95, 1.05, 1);
}
75% {
transform: scale3d(1.05, 0.95, 1);
}
100% {
transform: scale3d(1, 1, 1);
}
}
by Ángel; ; Report
Oh! That's not the file you need to link.
It's a ".zip" file as you can see. I think the font file is inside of the zip file, so you'll need to open the zip with an app.
A zip file is basically a file format that acts like a big bag that contains multiple files, so you can transport multiple files as one.
The font file should be either a ".ttf" or ".otf" file. Try opening the zip and finding a file with one of those end extensions. That's the file you need to upload to catbox and link.
by はなち; ; Report
Ooh ok thank you
by Ángel; ; Report
Awuwapi
woahhh this is really awsome ! thank you very much, especially for taking the time to make it very complete ans easy to follow with the colour-coding and examples ! <3
Thank you! I just like to help people with css because I'm a total nerd about it :P
by はなち; ; Report
𓈒⠀݁⠀﹙ 𝓛﹚yney 𝖎𝖗𝖑 ྀི ₊⠀ ⟡
yoyo, not up on my profile yet cuz im using a css preview, but whenever i input the text only the transparent property shows up from -webkit-text-fill-color: ,, any idea how to fix that??
Lemme see your code :/
by はなち; ; Report
Hostuu
THANK YOU SO MUCH for this blog post. I've been coding for HOURS trying to find a way to change the font on the profile's username until I found this code, and it finally worked. I gave credit to you in a comment in the code.
AAAA you really didn't have to, what I did really wasn't that special
by はなち; ; Report
Freaky ruu
Idk if this is dumb question but what font did u use on the first one? My brain is fried trying to do this
Here! https://eng.m.fontke.com/font/19652296/download/
by はなち; ; Report
How do you get the link to the font to put in the code thing
by Freaky ruu; ; Report
You're gonna need to download the file and reupload it to a file host like dropbox or catbox
by はなち; ; Report
J4Y G4Y
How do I make it rainbow?
You'll either have to use a rainbow image as background or manually input every color into a gradient.
by はなち; ; Report
spottydogs
im super late, but how can I change the font of the example one you gave?
It's the line of code that says "font-family"! ^^
by はなち; ; Report
Pawis (°ロ°) ★彡
tysm !! I was looking for this ;v
Np!
by はなち; ; Report
Rēsh-1
Thank you, thank you, thank you!!!
𝕩𝔼𝕎-𝔼𝕄𝕆𝕩
If you doing mind me asking- What other commands can you use one this?
Not really commands but more of css properties, u can look on W3Schools for every possible css property u can edit!
by はなち; ; Report
Oooh! Okay! Thank you so much!!
by 𝕩𝔼𝕎-𝔼𝕄𝕆𝕩; ; Report
RoseSick
I am so not smart enough to do this but you are a genious for coming up with something like this ^^
Np!!!!
by はなち; ; Report
ㅓbluemule/aka tsukimo hikaruㅏ
how do i make it bounce (this is so cool tho i love it)
Tutorialhere!
by はなち; ; Report
thanks i'm also adding a gradient but it wont work :(
by ㅓbluemule/aka tsukimo hikaruㅏ; ; Report
Oh, u need to use -webkit-linear-gradient instead!
by はなち; ; Report
Maiden Death
People that know how to code are so hot and smart. Couldn't be me ಥ‿ಥ
Not hot lol, I'm bbyfaced as fuck so I'm just cute if anything. Btw a site I reccomend u to learn simple coding tips and tricks is w3schools, it has a cool menu on the side for all sorts of coding instructions.
by はなち; ; Report
silly / arcade / cabby
WHOAAH this is super neat, i had no idea about this stuff o: !
Np buddy!!!
by はなち; ; Report
Fucking hater blocking me and shit 🙅♂️!11!1!!
by C.W; ; Report
W h a t
by はなち; ; Report
not u the person who made the comment
by C.W; ; Report