|

Site Update: More glass-cards!

Save or share to

It has been a long time when we reintroduced glass-cards on our website. They are timeless, representing these four different eras of user interface design:

  • Modern version of the Flat Design, full with cards and rounded corners,
  • Windows 95-era aesthetics,
  • Fictional-yet-futuristic UIs, like Augmented UI,
  • and glassmorphism. We started on experimenting these cards before glassmorphism was even a trend.

We are first proud to introduce this as far as in 2019, before 2021, and late 2023, where we made it the foundation of our design system.

A preview of the original implementation of the glass-card effect circa 2019, originally published on CodePen.

And now, there’s a new kind of glass-cards available on our website: tables! Before, we do not have proper styling, so tables on our website didn’t have borders at all. But now we have, and with a special highlight effect on it.

A screenshot of a blog posts on reinhart1010.id in light mode, featuring colored bold texts, links, and inline code. These texts are accompanied with a table, which is now styled primarily in magenta color, based on the renowned glass-card effect primarily featured on reinhart1010.id.The blog content is originally available on https://reinhart1010.id/blog/2024/05/01/our-unwritten-rest-api-conventions .

There are not much other news to share, but we really wanted to bring back this old effect to our new website. Both sites are also powered by Highlight.js, making it technically possible for us to reimplement this cool effect:

A screenshot of the reinhart1010.id website in 2021, featuring the glass-card effect on code blocks.

And lastly, you can see that our blog posts become more colorful, as monospaced text (and commonly used for inline code snippets) are now highlighted "blue", alongside violet for links and magenta for bold. We have also optimized the contrast of these colors in the dark mode, making blog posts as attractive on dark mode as in light.

A screenshot of a blog posts on reinhart1010.id in dark mode, featuring colored bold texts, links, and inline code. These texts are accompanied with a table, which is now styled primarily in magenta color, based on the renowned glass-card effect primarily featured on reinhart1010.id.The blog content is originally available on https://reinhart1010.id/blog/2024/05/01/our-unwritten-rest-api-conventions .

So, what’s next? We’ve silently teasing a new logo for Shift and Shiftine based on a new character system that’s modular, allowing anyone to remix the assets, and we can’t wait to have these new ones on our websites.

A

And lastly, we are currently in progress for tagging accessibility-friendly articles, which contains the necessary alternative text for images (including this post). We are planning to show such labels on our site to encourage ourselves to improve such accessibility!


Thanks for reading this article! By the way, we’re also working on finishing these interesting posts. Revisit this site soon or follow us to see them once they’re published!

[display-posts post_status=”future” include_link=”false” wrapper_id=”future-list”]

Save or share to

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *