An alliteratively artistic gal
- she/her 🏳️⚧️
- aqueousablution.carrd.co/
Clara | 27 | Bumblefuck, NJ
Farewell chost | Emotes | Commissions
ACNH IDs:
MA-1981-5432-5238
DA-0342-7833-8925
| I'm an amateur illustrator who'd like to someday do that whole "art" thing for a living. In the meantime, I'm hyperfixated on Monster Hunter, Mega Man, polearms, and probably several other things. Also aspiring to become an IRL amalgamation of leading ladies from Professor Layton games (officially girlpilled since 3/25/2023!!). |
Tools of the trade:
- · 0.7mm HB #2 Bic Velocity mechanical pencil
- · Artist's Loft kneaded eraser
- · Factis BM2 mechanical pencil eraser
- · Samsung XCover 6 Pro's camera (formerly Galaxy S5)
- · Snapseed
- · GNU Image Manipulation Program
- · Aseprite
| "Lives with plenty of food and comfort... People have stopped bothering to think with their heads... There may still be some people who want to do something. If we could somehow let those kinds of people know what Dr. Weil is really thinking... We might be able to change Neo Arcadia." -Ciel, Mega Man Zero 3 |
Art-only page
cohost.org/AqueousArt
Not sure if I'll finish it since he's a pain to draw, but I wanted to break my artblock before it calcified too much and what better way to do that than by drawing the best Mega Man Killer, Punk (who I am rotating in my mind like a Screw Crusher) 
Used his Maniax redesign here since I'm a sucker for even Ariga's minor redesigns, which often add just enough extra visual interest to really make them tickle my brain just right.
A <details> element without styling looks like this:
<details>: The Details disclosure element
The details HTML element creates a disclosure widget in which information is visible only when the widget is toggled into an "open" state. A summary or label must be provided using the summary element.
(read more on MDN)
Its appearance (a block element with a little arrow inside the summary element) is fairly consistent across browsers. That's about as far as it goes though.
Hiding the arrow
What you're supposed to do is
details > summary {
list-style: none;
}
details > summary::marker,
details > summary::-webkit-details-marker {
display: none;
}
we can't do that second part on cohost though!
So what if we change display and list-style of summary?
Click me
Very well?Depending on your browser you may already see the caveat - this works in Chromium and Firefox (even display: block is enough), but not Safari (which wants that -webkit-details-marker after all).
The size of the arrow depends on the size of the font, so we can just set that to 0, and set it back in a span element inside the summary:
Click me
Very well.And we probably want to indicate to the user that our now-regular-looking summary is interactive, so let's give it an underline:
Click me
Very well.And that's about it, but if you don't get an underline in Safari, you might have to separate text-decoration: underline dotted into text-decoration: underline; text-decoration-style: dotted.
Most interactive tricks that you'll see around here are variations of this formula - the summary is what you can click and the rest of the elements inside the details-element are what should appear/disappear.
🍎 take a bite
all gone!
The elements can overlap (position: absolute), be click-through (pointer-events: none), push each other around (via flexboxes or even just float), and so on - inspect an element in your favorite CSS crime and you might find something new.
Inline disclosure
So you want a little clarification or a bit of trivia right in the middle of the text. You should be able to
just make details and summary inline
(by giving themdisplay:inline)
Alright, maybe not that easy - , it should be fine.
details is a block element so it breaks the paragraph, but if we
make our own paragraph
(out of a DIV element, of course - it doesn't need much apart of `margin: 1.25em 0` to mimic the regular paragraphs)
Apparently not! For reasons that probably require digging into the specification, disclosure element can only be an inline-block, not inline.
But there is this funky new-ish (2018 and onward) display style called "contents", which kind of just pretends that a container doesn't exist and flows its children individually. So we
, and that's it for real?
give it to details
(and don't give it to summary, because that renders the disclosure element non-interactive on Safari)
Well, mostly. Since the disclosure element isn't real anymore, it can't have a background (not that you really wanted it to, I bet), and also Chromium is a problem this time! When a display: contents disclosure is closed, it adds a newline after it for some reason. Here, have a look:
and a bit of trailing text.
A disclosure
(now open!)But still, good for trailing details in a paragraph, I suppose?
Inline block disclosure
Given the right conditions, we can like an inline block is what we wanted to achieve all along.
make it seem
If you have enough text to push your little inline box to screen width, you can style it like a little window or an infobox.
I'm also making this one into an
inline-flex container so that the entirety of the "title bar" remains clickable when it's open.
I wrote a generator for these.
Floating disclosure
I also had this idea to create through a combination of factors, and it sure looks neat, but I feel like this is going to combust at first opportunity.
tooltips
The little arrow-tip is a relative-positioned element, and this content-div is an absolute-positioned element - try inspecting it.
Conclusions
Fun element, isn't it?
For less-esoteric purposes you may also be interested in eevee's tutorial
prechoster source files for this post can be found on GitHub
