nowfound

Life & fun · April 7, 2012

NL

Nokia Lumia ad recreated with CSS transforms

Nokia Lumia ad recreated with CSS transforms launched on April 7, 2012 with 27 votes, #67 of 446 launches that month and more than 75% of that year's launches.

Visit kuanyen.net ↗Alternativestop 15% of April 2012

In plain words

This project recreates the famous Nokia Lumia advertisement using only CSS transforms. Built in 2012, it demonstrates how geometric shapes and animations can be achieved through web styling without additional graphics or plugins. The recreation captures the original ad's distinctive visual style and movement through pure CSS code. It's useful for web developers interested in animation techniques and creative CSS applications.

written from the facts on this page · September 2026

Does a similar job

all alternatives →
  • Webflow 3D Transforms2015 · 3d-transforms.webflow.com · ▲318

    Build 3D interactions visually, without writing any code

  • CSS generator for a high-def glass effect2025 · glass3d.dev · ▲420

    There are lots of glassmorphism generators out there, but I wanted to push the effect further! This project is the result of months of experimenting with CSS property layering and battling browser quirks. Cross-browser compatibility is actually the reason I rely on ::before and ::after pseudo-elements to build up the effect. Move the color/opacity to the main element, and you’ll get weird color bleed on the corners in Chrome. Move the texture, and it muddles the bevel’s specular highlight. Move the bevel, and it gets blurred out by the backdrop-filter. And so on! Layers include: *…

  • CSS Pokemon – created with clip-path and CSS variables2016 · projects.lukehaas.me · ▲79

    A demonstrates of the use of the CSS clip-path property in combination with CSS variables and CSS transitions to create a low-poly animated Pokémon.

  • An old rotary phone converted into a mobile phone2015 · stavros.io · ▲222
  • CSS Wand2019 · csswand.dev · ▲330

    Easy copy-paste beautiful CSS animations

  • Transforms in CSS2016 · get.oreilly.com · ▲117

    Free eBook for learning to code animations

More life & fun this month

the category →

Source: Show HN post ↗

Launched alongside, April 2012

the whole month →