Complete Examples Of JavaScript-Like Effects Using Just HTML And CSS

It was once the case that to do anything fancy with a web page, you needed a healthy dose of JavaScript. However, it’s 2016 and HTML and CSS have come a long way. You might be surprised at what you can do without a single line of JS.

Forget about searching the web for examples — there’s a site helpfully called “You Might Not Need JavaScript” that, well, tells you that you might not need JavaScript.

It provides a number of working effects — complete with source — that one would traditionally turn to JS for, but can now be achieved in plain HTML and CSS.

The effects shown include:

  • Image slider
  • Modal
  • View switcher
  • Colour picker
  • File upload
  • Form validation
  • Scroll indicator
  • Accordion
  • Tabs
  • Lightbox

Of course, if you want to build more complex interactions, then HTML / CSS will only get you so far. YMNNJS however shows you don’t need scripting in simpler cases and the less JavaScript you can get away with, the better for visitors and maintainers alike.

You Might Not Need JavaScript [via Reddit]

The Cheapest NBN 50 Plans

Here are the cheapest plans available for Australia’s most popular NBN speed tier.

At Lifehacker, we independently select and write about stuff we love and think you'll like too. We have affiliate and advertising partnerships, which means we may collect a share of sales or other compensation from the links on this page. BTW – prices are accurate and items in stock at the time of posting.