What isn't secret is my love for interactive sections. Things to click, hover, move, slide, all sorts of fun things. And it's all using one little trick that I'd like to share with you in this final small section!
So this trick is something that's available to all on WA who can write their own CSS, but it's best used by Grandmasters and above, as they're able to combine it with containers and truly go wild. It is slightly on the complicated side of things, as it ties multiple targets together -- the easiest I find is to hook other things to spoiler buttons, contextually. Let me open the doors to the secret symbol for all who are unaware:
If you haven't opened the door to reveal the secret... how dare you! :O
Open it! :O
...
That's right, the answer is TILDE!
Tilde is what's known as a CSS Combinator. There's a few different ones (including a simple space) that let you specify descendants, children, or siblings in your CSS. This means you can pick very specific things at very specific times and give them styles. Tilde is great, because it's a "general sibling selector" -- and you can use it in conjunction with :hover, :active, or all sorts of things.
For example, if you do something like have two containers next to each other,
box_A, and
box_B, you can mess with box_B depending on what you're doing with A. I'll write out some very simple CSS here, just to give them a border and a colour, and then show you the simple power of
TILDE!
This is the initial styling of the boxes.
.user-css .box_A,
.user-css .box_B {
border: 2px solid red;
width: 100%;
margin: 5px;
background: gray;
color: black;
padding: 10px;
transition: all 0.25s;
}
This is the code that tells .box_B to change when .box_A is ':hover'ed. Note that for '~' to work, the two things must be siblings -- contained within the same container/row/element/div/whatever.
.user-css .box_A:hover ~ .box_B {
border: 2px solid green;
background: black;
color: white;
}
This is box A content! Try hovering your mouse over it, and watch what happens to box_B.
And this is box B content! If you hover your mouse over box A, you will see this one change.
This example is intentionally as simple as I can make it. But with some imagination, there is SO MUCH you can do with it. Keep the rules in mind and try playing around with it. Key
CSS Pseudo Classes I've found to be very useful with this trick are...
:hover, :focus, and
:active.
Spoiler buttons are also great because using
.spoiler-button[aria-expanded$=true] lets you trigger things based on if the spoiler is opened or closed. Those doors that opened up above? Made using this very trick!
This is a nice little collection of awesome tips and tricks. Thanks for sharing! :)
Check the latest in the wonderful world of WILLOWISP...
Find out what I'm up to...
Support my creative efforts <3
Thank you so much! I'm happy to have been able to share them and take part :D