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 9 of 9 comments ( View all | Add Comment )
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
Lara
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
Emaemaema
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
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