[Megathread] CustomCSS Showoff

[35]

Makes the postbit labes more unique (instead of all of them being blue), and adds rainbow animation to the 2 years of service one

code:

Show ContentSpoiler:

Code:

 
.postbit-staff.postbit-label{
  background-color: #2BE0D3;
   text-shadow: 0px 1px 1px #000;
  color: white;
}

.postbit-label.years_1{
  border-bottom: 2px solid yellow;
   text-shadow: 0px 1px 5px yellow;
  color: yellow;
}

.postbit-label.years_2{
animation: rainbow;
animation-duration: 5s;
animation-iteration-count:infinite; 
}

Accounts.sh

[50]

So I used some css and got this:



https://i.gyazo.com/10ecafdd098ccd259e6c...3d1056.mp4

https://i.gyazo.com/a32255bc50a94517f4da...f7d701.mp4

https://i.gyazo.com/38839a96f1cbdf896c06...86c273.mp4





And that's the css code to it. Changed my Themecolor to #880000

Show ContentSpoiler:

Code:

/* Thanks to clowns! */
.header-logo {
filter: hue-rotate(180deg);
}

    .header-logo{
        -webkit-animation: cracked-rainbow 3.5s infinite;
        -moz-animation: cracked-rainbow 3.5s infinite;
        -o-animation: cracked-rainbow 3.5s infinite;
        -ms-animation: cracked-rainbow 3.5s infinite;
        animation: cracked-rainbow 3.5s infinite;
    }

    @-webkit-keyframes cracked-rainbow {
        0%{filter: hue-rotate(180deg);}
        10%{filter: hue-rotate(18deg);}
          20%{filter: hue-rotate(36deg);}
        30%{filter: hue-rotate(54deg);}
          40%{filter: hue-rotate(72deg);}
        50%{filter: hue-rotate(90deg);}
          60%{filter: hue-rotate(108deg);}
        70%{filter: hue-rotate(126deg);}
        80%{filter: hue-rotate(144deg);}
        90%{filter: hue-rotate(162deg);}
          100%{filter: hue-rotate(180deg);}
    }
    @-moz-keyframes cracked-rainbow {
      0%{filter: hue-rotate(180deg);}
      10%{filter: hue-rotate(18deg);}
      20%{filter: hue-rotate(36deg);}
      30%{filter: hue-rotate(54deg);}
      40%{filter: hue-rotate(72deg);}
      50%{filter: hue-rotate(90deg);}
      60%{filter: hue-rotate(108deg);}
      70%{filter: hue-rotate(126deg);}
      80%{filter: hue-rotate(144deg);}
      90%{filter: hue-rotate(162deg);}
      100%{filter: hue-rotate(180deg);}
    }
    @-ms-keyframes cracked-rainbow {
      0%{filter: hue-rotate(180deg);}
      10%{filter: hue-rotate(18deg);}
      20%{filter: hue-rotate(36deg);}
      30%{filter: hue-rotate(54deg);}
      40%{filter: hue-rotate(72deg);}
      50%{filter: hue-rotate(90deg);}
      60%{filter: hue-rotate(108deg);}
      70%{filter: hue-rotate(126deg);}
      80%{filter: hue-rotate(144deg);}
      90%{filter: hue-rotate(162deg);}
      100%{filter: hue-rotate(180deg);}
    }
    @-o-keyframes cracked-rainbow {
      0%{filter: hue-rotate(180deg);}
      10%{filter: hue-rotate(18deg);}
      20%{filter: hue-rotate(36deg);}
      30%{filter: hue-rotate(54deg);}
      40%{filter: hue-rotate(72deg);}
      50%{filter: hue-rotate(90deg);}
      60%{filter: hue-rotate(108deg);}
      70%{filter: hue-rotate(126deg);}
      80%{filter: hue-rotate(144deg);}
      90%{filter: hue-rotate(162deg);}
      100%{filter: hue-rotate(180deg);}
    }
    @keyframes cracked-rainbow {
      0%{filter: hue-rotate(180deg);}
      10%{filter: hue-rotate(18deg);}
      20%{filter: hue-rotate(36deg);}
      30%{filter: hue-rotate(54deg);}
      40%{filter: hue-rotate(72deg);}
      50%{filter: hue-rotate(90deg);}
      60%{filter: hue-rotate(108deg);}
      70%{filter: hue-rotate(126deg);}
      80%{filter: hue-rotate(144deg);}
      90%{filter: hue-rotate(162deg);}
      100%{filter: hue-rotate(180deg);}
    }

/*Space Header Background */
.header-bg {
  background-image: url(https://i.ytimg.com/vi/3rAb586Wkgs/maxresdefault.jpg) !important;
  opacity: 0.7 !important;
  height: 20rem !important;
}

/*Background looks like wall :D*/
body {
 background: transparent url(https://www.elitepvpers.com/images/bg.jpg) fixed  !important;
}

/*Background of footer a bit transparent*/
.footer-back {
  background-color: rgba(21,21,21,.6);
}
 
/* Links get bigger if u hover*/
a:hover, a:link, .large-text {
  transform: rotate(1deg) scale(1.1) !important;
}

/* Awards with glow*/
div.post-awards  img {
  box-shadow: 1px 1px 8px #fff !important;
}

/*Avatar rotate on hover */
.post-avatar-mobile:hover {
  transform: rotate(0deg) scale(1.1);
}

/*Stats with red glow */
ul.index_stats li {
  text-shadow: 2px 2px 6px #880000 !important;
}

/* Usertitle with glow */
.post-usertitle span {
  text-shadow: 1px 1px 8px #50a9b2 !important;
}

/* Red glow at vouches and Credit balance */
.ml-auto a {
  text-shadow: 1px 1px 8px red !important;
}

/* Rotating icons */
i:hover {
    -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

[1.823]

Hey,

show the community how you are modifying your own version of Cracked.to with CustomCSS.

Use code highlighting to show your CSS code.

Post in this format:

Screenshot

Code snippet
 [.code]
Your CSS code here
[./code]
Without the dots.

https://cracked.to/Thread-Supreme-Custom...cracked-to?

Where am I?

 

[20]

Show ContentSpoiler:

This is about as good as my CSS skills get

ty need this

[3.601]

Made this during Halloween. It's responsive, changes the layout slightly.


Get the CSS: https://cracked.to/Thread-Supreme-Sp00ky...Responsive

you make this really cool,
awesome man
Res++

Alphabin.cc

   Best Paste Site   ️