Sound interesting? Today, we’ll show you a handful of popular interactive elements that you can build with nothing but HTML and CSS.
Interface Box Interface
Especially when you consider that HTML is now at the
summary built-in tags. With some markup and styling basics, it is possible to create attractive and functional UIs. It is also compatible with all major browsers.
It is worth mentioning that this mode does not offer the full range of special effects. As MDN notes:
Unfortunately, at this time there is no built-in way to animate the transition between open and closed.
Below is a basic example of what can be done with a few lines of HTML and CSS.
Using Simple HTML Box
<details> by Eric Karkovack
See the Pen A Simple HTML Accordion Using
Advanced Navigation Menus
Making navigation that works across browsers and devices was a big challenge. Especially when creating multi-level or mega menus. Complex features often required fallbacks to keep things working on legacy browsers.
And that’s not even taking small screens into account. It may be necessary to implement an entirely separate menu to ensure ease of use on mobile devices.
Thankfully, much progress has been made in this area. By combining HTML
Responsive Mega Menu & Dropdown Menu Using only HTML & CSS by Muhammad Fadzrin Madu
Check out Responsive Pen Mega Menu and Dropdown 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 went down, the process of building them was still complicated.
Creating smooth animations, processing mathematical calculations, and allowing user input has traditionally required advanced scripting and library usage. But that doesn’t have to be the case anymore.
Now, CSS can be combined with things like HTML
canvas, SVG, and other items to create amazingly powerful results. While you won’t mistake these pure CSS games for the flagship titles playing on your console, they are impressive nonetheless.
At the very least, they make for a compelling waste of time!
Pure CSS Ghost Bustin’ game with CSS Variables at Jhey
Check out the Pen Pure CSS ghost game w/ CSS variables 👻🕹#CodePenChallenge by Jhey
Much like games, multimedia on the web was once in browser-plugin territory. Part of that was due to proprietary formats, as vendors wanted to gain market share for their encoders. Content providers (and thus, designers) were forced to choose one or more formats to make available to users. And users had the right software installed to play the media. It was a mess.
But even when formats like MP4 became open standards, playback remained complicated. However, transitioning to HTML5 has placed much of the functionality burden on browsers. The IS
audio features use a built-in media player with various optional features.
CSS Audio HTML5 Style by Dani Castaños
Check out the HTML5 Audio CSS Pen style by Dani Castaños
Building the Foundation and Beyond
Advances in CSS and HTML have done wonders for pushing the web forward. We no longer need to resort to huge code libraries or overly complex processes to deliver basic interactivity. These natively supported staples can get the job done.
That’s good news, because web designers need to account for an ever-increasing range of devices. Features such as navigation and media players that simply work without the need for third-party libraries are key to that cause.