Basileus
Some interesting CSS tidbits from my labors tonight. I leave them here to do with as you will.
Examples of all 3 can be found "here":https://twilight-of-the-north.obsidianportal.com/.
h1. Custom Cursor
To set a custom image as the cursor in your campaign. Note you could use a different image in the second line if you wanted one that changed (such as a glow or something) when hovering over links.
@/* CUSTOM CURSOR */
.campaign-public-layout {cursor: url('https://db4sgowjqfwig.cloudfront.net/campaigns/81241/assets/545551/cursor.png?1452568475'), default;}
.campaign-public-layout a:hover {cursor: url('https://db4sgowjqfwig.cloudfront.net/campaigns/81241/assets/545551/cursor.png?1452568475'), pointer;}@
h1. Image Filters
Some automatic filters applied to all images in the campaign to help them all blend together and into the parchment background. Note images that are links will become fully vivid if you hover on them.
@/* IMAGE STYLING */
.main-content img {filter: sepia(15%) opacity(85%); transition: all 0.3s ease-in-out;}
.main-content a img:hover {filter: sepia(0%) opacity(100%); transition: all 0.3s ease-in-out;}@
h1. Combined Background and Border Images
If you've got a partially transparent border image, you can combine that with a normal background image to make some cool overlapping effects.
@
/* PARCHMENT BACKGROUND WITH STYLED BORDERS */
.campaign-public-layout .main-content {background-image: url('https://db4sgowjqfwig.cloudfront.net/campaigns/81241/assets/360428/parchment-background-03.jpg?1408555806'); background-repeat: repeat-y; background-size: 100%; box-shadow: 0em 0em 1em 0em black; border-image: url('https://db4sgowjqfwig.cloudfront.net/campaigns/81241/assets/545582/page_border.png?1452575364') 146 143 135 123 round; border-image-width: auto; border-image-outset: 22px;}@
EDIT: Note that so far I've only been testing in Firefox, so I can't yet vouch for appearance or behavior in other browsers.
Comments
Just trying to help out.
@/* IMAGE STYLING */
.main-content img {
-webkit-filter: sepia(0.5);
-webkit-filter: sepia(50%);
-moz-filter: sepia(50%);
-ms-filter: sepia(50%);
-o-filter: sepia(50%);
filter: sepia(50%);
transition: all 0.3s ease-in-out;
}@
@.main-content a img:hover {
filter: none;
-webkit-filter: sepia(0);
-moz-filter: sepia(0);
-ms-filter: sepia(0);
-o-filter: sepia(0);
filter: sepia(0);
transition: all 0.3s ease-in-out;
}@
-bort
"Morwindl":https://morwindl.obsidianportal.com
"EIDL":https://eidl.obsidianportal.com
Campaign of the Year - 2018
Just trying to help out.
- Kallak
-Jaymes
Campaign of the Month Febuary 2013