SANTA HAT:
<style>
.general-about{
position: relative;
margin-top: 30px;
}
.general-about .profile-pic::before{
content: '';
background: url('https://media.giphy.com/media/rXyIg5TrQ3jYuZME1G/giphy.gif') no-repeat;
background-size: cover;
display: block;
width: 100px;
height: 100px;
z-index: 999;
position: absolute;
top: -43px;
left: -32px;
}
</style>
FLYING SANTA:
<style>
@keyframes flying-santa{
from{ left:-400px; }
to{ left:calc(100% + 20px); }
}
#santa{
position: fixed;
left: -400px;
top: 200px;
width: 200px;
animation: flying-santa 7s infinite linear;
pointer-events: none;
}
</style>
<img id="santa" aria-hidden="true" src="https://static.spacehey.net/img/special/santa-sleigh.svg"/>
FONT CHANGE:
<style>
@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');
h1{
font-family: 'Lobster', cursive;
font-size: 2.5em !important;
}
</style>
FALLING SNOW:
<style>
/* customizable snowflake styling */
.snowflake {
color: white;
font-size: 1em;
font-family: Arial, sans-serif;
text-shadow: 0 0 5px black;
}
@keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@keyframes snowflakes-shake{0%,100%{transform:translateX(0)}50%{transform:translateX(80px)}}.snowflake{position:fixed;top:-10%;z-index:9999;user-select:none;cursor:default;animation-name:snowflakes-fall,snowflakes-shake;animation-duration:10s,3s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running}.snowflake:nth-of-type(0){left:1%;animation-delay:0s,0s}.snowflake:nth-of-type(1){left:10%;animation-delay:1s,1s}.snowflake:nth-of-type(2){left:20%;animation-delay:6s,.5s}.snowflake:nth-of-type(3){left:30%;animation-delay:4s,2s}.snowflake:nth-of-type(4){left:40%;animation-delay:2s,2s}.snowflake:nth-of-type(5){left:50%;animation-delay:8s,3s}.snowflake:nth-of-type(6){left:60%;animation-delay:6s,2s}.snowflake:nth-of-type(7){left:70%;animation-delay:2.5s,1s}.snowflake:nth-of-type(8){left:80%;animation-delay:1s,0s}.snowflake:nth-of-type(9){left:90%;animation-delay:3s,1.5s}.snowflake:nth-of-type(10){left:25%;animation-delay:2s,0s}.snowflake:nth-of-type(11){left:65%;animation-delay:4s,2.5s}
</style>
<div class="snowflakes" aria-hidden="true"><div class="snowflake">❅</div><div class="snowflake">❆</div><div class="snowflake">❅</div><div class="snowflake">❆</div><div class="snowflake">❅</div><div class="snowflake">❆</div><div class="snowflake">❅</div><div class="snowflake">❆</div><div class="snowflake">❅</div><div class="snowflake">❆</div><div class="snowflake">❅</div><div class="snowflake">❆</div></div>
SPINNING PFP:
<style>
@keyframes spin{
from{ transform:rotate(0deg); }
to{ transform:rotate(-360deg); }
}
.general-about .profile-pic img{
border-radius: 50%;
animation: spin 7s infinite linear;
}
</style>
ANIMATED GRADIENT BG:
<style>
body{
background: linear-gradient(90deg, #0e66dd, #25d8d3);
animation: gradient 10s ease infinite;
background-size: 400% 400%;
}
@keyframes gradient{
0%{ background-position: 0% 50%; }
50%{ background-position: 100% 50%; }
100%{ background-position: 0% 50%; }
}
</style>
BG PATTERNS:
<style>
body{
background-color: #e5e5f7;
opacity: 0.5;
background-image: linear-gradient(135deg, #1D4ED8 25%, transparent 25%), linear-gradient(225deg, #1D4ED8 25%, transparent 25%), linear-gradient(45deg, #1D4ED8 25%, transparent 25%), linear-gradient(315deg, #1D4ED8 25%, #e5e5f7 25%);
background-position: 19px 0, 19px 0, 0 0, 0 0;
background-size: 38px 38px;
background-repeat: repeat;
}
</style>
STAR SHAPE PFP:
<style>
.general-about .profile-pic img{
clip-path: polygon(50% 0%, 67% 29%, 98% 35%, 75% 58%, 79% 91%, 50% 75%, 21% 91%, 25% 58%, 2% 35%, 33% 29%);
}
</style>
ROUNDED CORNERS:
<style>
*{
border-radius: 9px;
}
.profile .contact .heading, .profile .table-section .heading, .home-actions .heading{
border-radius: 6px 6px 9px 9px;
}
</style>
TEXTS:
1. Scolling:
<marquee>Text</marquee>
2. Blinking:
<blink>Text</blink>
3. Highlighted:
<mark>Text</mark>
4. Bold:
<b>Text</b>
5. Italic:
<i>Text</i>
6. Underlined:
<u>Text</u>
7. Strikethrough:
<del>Text</del>
Link:
<a href="https://example.com">Text</a>
LAST MINUTE FESTIVE PFP:
<style>
.general-about .profile-pic img,
.comments-table,
.profile-info{
border: 10px dashed #ee1b22;
}
.profile .blurbs .heading, .profile .friends .heading,
.profile .contact .heading, .profile .table-section .heading, .home-actions .heading{
background: #ee1b22;
color: white;
}
.profile .blurbs .heading, .profile .friends .heading a,
.profile .contact .heading, .profile .table-section .heading, .home-actions .heading a{
color: white;
}
.profile .contact, .profile .url-info, .profile .table-section, .home-actions{
border: 2px solid #ee1b22;
}
</style>
GLITTER TEXT:
Use sites like textanim.com or glittermaker.com
<style>
h1{
background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/191814/blue_glitter.gif') repeat;
color: transparent;
background-clip: text;
font-size: 20em;
}
</style>
Comments
Displaying 0 of 0 comments ( View all | Add Comment )