Imagery so you can see what it does…
Shadowed yellow text right now, but you can change to hot pink if you want…
You can see the images blurred as well… Good for hiding baker bewbs from your suspicious girlfriend, wife or a kid… mine actually likes to check them out.
Tweaking CSS stuff for those who want to customize this board…
/ 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"; /
body {
background: #6897bb;
color: white;
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
font-size: 10pt;
margin: 0 4px;
padding-left: 4px;
padding-right: 4px;
}
/ 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 /
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 /
-webkit-border-radius: 12px 12px 12px 12px;
border-radius: 12px 12px 12px 12px;
-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;
}
See photo for results…