dChan - Q Origins Project Archive

Add some flair to your 8chan using CSS:

/ Decrease RED TEXT size and recolour to Hot Pink for teh lulz. /

span.heading {

color: #ff00f0; / Hot Pink /

font-size: 6pt; / Real small, default is 11pt /

}

/ Add a blur and opacity change to images that fades-to-normal when moused over /

.post-image {

opacity: .2; / Can be between .01 - 1 /

filter: blur(5px); / Can be 1 - 10+ /

transition: all 233ms;

/ Permalink - Adds a gradient around image borders: http://colorzilla.com/gradient-editor/#f3c5bd+0,e86c57+50,ea2803+51,ff6600+75,c72200+100;Red+Gloss /

background: rgb(243,197,189); / Old browsers /

background: -moz-linear-gradient(top, rgba(243,197,189,1) 0%, rgba(232,108,87,1) 50%, rgba(234,40,3,1) 51%, rgba(255,102,0,1) 75%, rgba(199,34,0,1) 100%); / FF3.6-15 /

background: -webkit-linear-gradient(top, rgba(243,197,189,1) 0%,rgba(232,108,87,1) 50%,rgba(234,40,3,1) 51%,rgba(255,102,0,1) 75%,rgba(199,34,0,1) 100%); / Chrome10-25,Safari5.1-6 /

background: linear-gradient(to bottom, rgba(243,197,189,1) 0%,rgba(232,108,87,1) 50%,rgba(234,40,3,1) 51%,rgba(255,102,0,1) 75%,rgba(199,34,0,1) 100%); / W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ /

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3c5bd', endColorstr='#c72200',GradientType=0 ); / IE6-9 /

/* Adds a radiused border, customize as needed

-webkit-border-radius: 12px 12px 12px 12px;

border-radius: 12px 12px 12px 12px;

}

.post-image:hover {

opacity: 1; / Can be between .01 - 1 /

filter: blur(0px); / Can be 1 - 10+ /

transition: all 89ms;

}

>>4120837

More flair to 8chan…

Just in case you like something different…

Added fade images from blurred to clear transition time

/ Enter here your own CSS rules… /

/* If you want to make a redistributable style, be sure to

have a Yotsuba B theme selected. */

/ These will be applied on top of whatever theme you choose below. /

/ You can include CSS files from remote servers, for example: /

/ @import "http://example.com/style.css"; /

span.body {

color: #333333;

font-size: 13pt;

font-family: Century Gothic, sans-serif;

}

/ Decrease RED TEXT size and recolour to Hot Pink for teh lulz. /

span.heading {

color: #f7a500; / Yellow /

font-size: 11pt; / Real small, default is 11pt /

text-shadow: 1px 1px 3px #0E2E2D;

}

/ Add a blur and opacity change to images that fades-to-normal when moused over /

.post-image {

opacity: .2; / Can be between .01 - 1 /

filter: blur(5px); / Can be 1 - 10+ /

transition: all 233ms;

/ Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f3c5bd+0,e86c57+50,ea2803+51,ff6600+75,c72200+100;Red+Gloss /

background: rgb(243,197,189); / Old browsers /

background: -moz-linear-gradient(top, rgba(243,197,189,1) 0%, rgba(232,108,87,1) 50%, rgba(234,40,3,1) 51%, rgba(255,102,0,1) 75%, rgba(199,34,0,1) 100%); / FF3.6-15 /

background: -webkit-linear-gradient(top, rgba(243,197,189,1) 0%,rgba(232,108,87,1) 50%,rgba(234,40,3,1) 51%,rgba(255,102,0,1) 75%,rgba(199,34,0,1) 100%); / Chrome10-25,Safari5.1-6 /

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3c5bd', endColorstr='#c72200',GradientType=0 ); / IE6-9 /

-webkit-border-radius: 12px 12px 12px 12px;

border-radius: 12px 12px 12px 12px;

/* blurred to clear transition = 2s change value for faster or slower transition

-webkit-transition: all 2s ease-in-out;

-moz-transition: all 2s ease-in-out;

-ms-transition: all 2s ease-in-out;

-o-transition: all 2s ease-in-out;

transition: all 2s ease-in-out;

}

.post-image:hover {

opacity: 1; / Can be between .01 - 1 /

filter: blur(0px); / Can be 1 - 10+ /

transition: all 89ms;

}