Sound interesting? Today, we’ll show you a handful of common interactive elements that you can build with nothing but HTML and CSS.
Especially when you consider that HTML now has the
summary tags built in. With some basic markup and styling, it’s possible to create an attractive and functional UI. It’s also compatible with all major browsers.
It’s worth mentioning that this method doesn’t offer the full range of special effects. As MDN notes:
Unfortunately, at this time there’s no built-in way to animate the transition between open and closed.
Below is a basic example of what can be done with just a few lines of HTML and CSS.
A Simple HTML Accordion Using
<details> by Eric Karkovack
See the Pen A Simple HTML Accordion Using <details> by Eric Karkovack
Advanced Navigation Menus
Crafting navigation that works across browsers and devices used to be quite a challenge. Particularly when creating multi-level or mega menus. Advanced features often required fallbacks to keep things working on legacy browsers.
And that’s not even taking small screens into account. An entirely separate menu may need to be implemented to ensure ease of use on mobile devices.
Thankfully, there’s been much progress in this area. By combining the HTML
Responsive Mega Menu & Dropdown Menu Using Only HTML & CSS by Muhammad Fadzrin Madu
See the Pen Responsive Mega Menu and Dropdown Menu using only HTML & CSS by Muhammad Fadzrin Madu
Web-based games have been around for a long time – dating back to the days of (gulp!) Flash. And even after that platform’s demise, the process of building them was still complex.
Creating smooth animations, processing mathematical calculations, and allowing for user input have traditionally required advanced scripting and library usage. But that’s not necessarily the case anymore.
Now, CSS can be combined with the likes of HTML
canvas, SVG, and other goodies to create some surprisingly-powerful results. While you won’t mistake these pure CSS games for the cutting-edge titles playing on your console, they’re impressive nonetheless.
At the very least, they make for compelling time-wasters!
Pure CSS Ghost Bustin’ Game with CSS Variables by Jhey
See the Pen Pure CSS ghost bustin’ game w/ CSS variables 👻🕹#CodePenChallenge by Jhey
Much like games, multimedia on the web was once browser-plugin territory. Some of that was due to proprietary formats, as vendors vied to gain market share for their codecs. Content providers (and thus, designers) were forced to choose one or more formats to make available to users. And users needed to have the right software installed to play the media. It was a mess.
But even as formats such as MP4 became open standards, playback remained complex. However, a shift to HTML5 put much of the functionality burden on browsers. The
audio elements make use of a built-in media player with a variety of optional features.
HTML5 Audio CSS Style by Dani Castaños
See the Pen HTML5 Audio CSS style by Dani Castaños
Building the Basics and Beyond
Advancements in CSS and HTML have done wonders for pushing the web forward. No longer do we need to resort to massive code libraries or overly-complicated processes to deliver basic interactivity. These natively-supported staples are more than capable of doing the job.
That’s good news, as web designers need to account for an ever-growing array of devices. Elements such as navigation and media players that simply work without the need for third-party libraries are crucial to that cause.
- How to Target Design Elements with the CSS :not Pseudo-Class
- How CSS Variables Can Improve Efficiency & Consistency
- Code Snippets That Demonstrate the Repelling Effect in Web Design