« Web, HTML, Tech Forum

need help with custom text formatting in profiles!

Posted by nenkaii

posted

Forum: Web, HTML, Tech

Hi there!! I'm completely clueless when it comes to HTML or CSS, and i'm a windows39 migrator. 


My profile on windows 39, (which you can see here) had custom text formatting that I added created by utf-4096 on there.

I was able to get the code itself from my myspace profile, but simply adding it to my profile here doesn't seem to do anything. Ideally I'd want to be able to type [Text](fmt_red) and it would turn "Text" red, but it doesn't look like it's working. Any help is appreciated!

/* credit to utf-16 / utf-4096 */

a[href^="#fmt_"] {
    text-decoration: none;
    pointer-events: none;
    color: inherit;
}

a[href*="fmt_red"]      { color: #ff4444 }
a[href*="fmt_yellow"]   { color: #ff4 }
a[href*="fmt_green"]    { color: #4f4 }
a[href*="fmt_cyan"]     { color: #4ff }
a[href*="fmt_blue"]     { color: #44f }
a[href*="fmt_magenta"]  { color: #f4f }
a[href*="fmt_white"]  { color: #ffffff }

@keyframes fmt_rainbow {
    to {
        background-position: 200px;
    }
}

a[href*="fmt_sex"] {
    background: linear-gradient(90deg, #ffffff, #4ff, #4f4, #ff4, #fb97e8, #ffffff );
    background-clip: text;
    -o-background-clip: text;
    -webkit-background-clip: text;
    background-size: 200px;
    color: #0000;
    animation: fmt_rainbow 1.5s linear infinite;
}

a[href*="fmt_rainbow"] {
    background: linear-gradient(90deg, #f44, #ff4, #4f4, #4ff, #44f, #f4f, #44f, #4ff, #4f4, #ff4, #f44);
    background-clip: text;
    -o-background-clip: text;
    -webkit-background-clip: text;
    background-size: 200px;
    color: #0000;
    animation: fmt_rainbow 1.5s linear infinite;
}


a[href*="fmt_fixed"] {
    background-attachment: fixed;
}

a[href*="fmt_cover"] {
    background-size: cover;
}

@keyframes fmt_flash {
    0% {
        background: #fdff00;
        color: #55f;
    }
    
    50% {
        background: #55f;
        color: #fdff00;
    }
}

a[href*="fmt_flash"] {
    padding: 0 2px;
    animation: fmt_flash steps(1) .7s infinite;
}

a[href*="fmt_tilt"] {
    display: inline-block;
    margin: 6px 0;
    transform: rotate(6deg);
}

@keyframes fmt_togglecase {
    to {
        font-variant: small-caps;
    }
}

a[href*="fmt_togglecase"] {
    animation: fmt_togglecase .7s linear infinite;
}

a[href*="fmt_nopad"] {
    padding: 0 !important;
}


p > a[href*="fmt_delay_inc"]:nth-of-type(1) { animation-delay: .1s }
p > a[href*="fmt_delay_inc"]:nth-of-type(2) { animation-delay: .2s }
p > a[href*="fmt_delay_inc"]:nth-of-type(3) { animation-delay: .3s }
p > a[href*="fmt_delay_inc"]:nth-of-type(4) { animation-delay: .4s }
p > a[href*="fmt_delay_inc"]:nth-of-type(5) { animation-delay: .5s }
p > a[href*="fmt_delay_inc"]:nth-of-type(6) { animation-delay: .6s }
p > a[href*="fmt_delay_inc"]:nth-of-type(7) { animation-delay: .7s }
p > a[href*="fmt_delay_inc"]:nth-of-type(8) { animation-delay: .8s }
p > a[href*="fmt_delay_inc"]:nth-of-type(9) { animation-delay: .9s }
p > a[href*="fmt_delay_inc"]:nth-of-type(10) { animation-delay: 1s }
p > a[href*="fmt_delay_inc"]:nth-of-type(11) { animation-delay: 1.1s }
p > a[href*="fmt_delay_inc"]:nth-of-type(12) { animation-delay: 1.2s }
p > a[href*="fmt_delay_inc"]:nth-of-type(13) { animation-delay: 1.3s }
p > a[href*="fmt_delay_inc"]:nth-of-type(14) { animation-delay: 1.4s }
p > a[href*="fmt_delay_inc"]:nth-of-type(15) { animation-delay: 1.5s }
p > a[href*="fmt_delay_inc"]:nth-of-type(16) { animation-delay: 1.6s }
p > a[href*="fmt_delay_inc"]:nth-of-type(17) { animation-delay: 1.7s }
p > a[href*="fmt_delay_inc"]:nth-of-type(18) { animation-delay: 1.8s }
p > a[href*="fmt_delay_inc"]:nth-of-type(19) { animation-delay: 1.9s }
p > a[href*="fmt_delay_inc"]:nth-of-type(20) { animation-delay: 2s }


a[href*="fmt_line_delay_1"] { animation-delay: .1s }
a[href*="fmt_line_delay_2"] { animation-delay: .2s }
a[href*="fmt_line_delay_3"] { animation-delay: .3s }
a[href*="fmt_line_delay_4"] { animation-delay: .4s }
a[href*="fmt_line_delay_5"] { animation-delay: .5s }
a[href*="fmt_line_delay_6"] { animation-delay: .6s }
a[href*="fmt_line_delay_7"] { animation-delay: .7s }
a[href*="fmt_line_delay_8"] { animation-delay: .8s }
a[href*="fmt_line_delay_9"] { animation-delay: .9s }
a[href*="fmt_line_delay_10"] { animation-delay: 1s }
a[href*="fmt_line_delay_11"] { animation-delay: 1.1s }
a[href*="fmt_line_delay_12"] { animation-delay: 1.2s }
a[href*="fmt_line_delay_13"] { animation-delay: 1.3s }
a[href*="fmt_line_delay_14"] { animation-delay: 1.4s }
a[href*="fmt_line_delay_15"] { animation-delay: 1.5s }
a[href*="fmt_line_delay_16"] { animation-delay: 1.6s }
a[href*="fmt_line_delay_17"] { animation-delay: 1.7s }
a[href*="fmt_line_delay_18"] { animation-delay: 1.8s }
a[href*="fmt_line_delay_19"] { animation-delay: 1.9s }
a[href*="fmt_line_delay_20"] { animation-delay: 2s }

/* credits end */


Report Topic

0 Replies