CSS Shenanigans

Basileus
Basileus
edited January 2016 in Campaign Portal Building
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

  • GamingMegaverse
    GamingMegaverse
    Posts: 2,998
    As always, great contributions!

    Just trying to help out.

  • Bortas
    Bortas
    Posts: 645
    Good stuff, incorporating that image filter into my sight right away. To give it more browser compatibility:

    @/* 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
  • GamingMegaverse
    GamingMegaverse
    Posts: 2,998
    This should go into the CSS sticky.

    Just trying to help out.

  • Kallak
    Kallak
    Posts: 1,090
    Indeed.
    All the best,
    - Kallak
  • JaymesBolton
    JaymesBolton
    Posts: 278
    playing around with your code but I can't figure out how to make the border transparent to make the black branches pop out....
  • weasel0
    weasel0
    Posts: 36
    Those are some sweet mods there Basileus. Dunno where I'd use them...yet. But def gonna steal and log them.
Sign In or Register to comment.

March 2024
Wrath of the Highborn

Read the feature post on the blog
Return to Obsidian Portal

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Discussions