Day: March 2, 2021

Posted on

How to Animate the Details Element

Category Image 091

Here’s a nice simple demo from Moritz Gießmann on animating the triangle of a <details> element, which is the affordance that tells people this thing can be opened. Animating it, then is another kind of affordance that tells people this thing is opening now.

The tricks?

  1. Turn off the default triangle: details summary::-webkit-details-marker { display:none; }. You can’t animate that one.
  2. Make a replacement triangle with the CSS border trick and a pseudo element.
  3. Animate the new triangle when the state is open: details[open] > summary::before { transform: rotate(90deg); }.

This only animates the triangle. The content inside still “snaps” open. Wanna smooth things out? Louis Hoebregts’ “How to Animate the Details Element Using WAAPI” covers that.

Here’s a fork where I’ll combine them just because:

I see Moritz put the cursor: pointer; on the summary as well like Greg Gibson suggests.

The post How to Animate the Details Element appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.

Posted on

YIELD App Adds API for Decentralized Financial Products

Featured Imgs 23

YIELD App, a provider of traditional and decentralized financial (DeFi) services, has announced a new API that is intended to provide third-party organizations with access to high-yield cryptocurrency products.

This new offering is announced in partnership with Finxflo, a popular liquidity aggregator, and will allow their customers to engage with YIELD App products without leaving the Finxflo ecosystem. 

Posted on

Code Folding of Sass

Category Image 052

The .sass variant of Sass isn’t nearly as popular as SCSS. If I had to guess, it would be because SCSS is totally compatible with CSS in that any valid CSS file is a valid SCSS file, which makes SCSS easier to transition to both in terms of coding and the mental shift.

But anyway, the .sass variant is still kinda cool. It doesn’t use curly braces ({}) or semicolons (;) so it can be a little easier on the eyes, perhaps. It uses “white space” indentation, so like:

body
  background: red 
  margin: 1rem

What’s new around here is that you can now code fold that on CodePen, which never used to work. Here it is in action:

Hopefully this is useful to all y’all that like the .sass syntax.

The post Code Folding of Sass appeared first on CodePen Blog.