#codepen animation

[codingflicks]

Creative Codepen CSS Animation Snippets

[freefrontend-blog]

Enhance your UI with 20 dynamic CSS Play/Pause Buttons!

🔥 From simple icons to creative animations, these designs are perfect for multimedia controls. New updates include fresh designs from CodePen & GitHub!

🔗 https://freefrontend.com/css-play-pause-buttons/

[creativecodes]

News Reporter Ad~ Article

Omgggg this was a beast T-T first time animating images and crap.

and look! It’s completely customized to my use of this code! Don’t copy it if you want to advertise your own News Reporter team on some other WoX site, make it at least a little different (pretty please) anyways, I’m gonna try and figure out what’s eating the video quality :’)

the animation won’t work with articles, so if you want to use that just delete everything from <—Flippy 1—> to <—End Flippy—> I know this is labeled as article, but that’s what I used this as :’)

Pastebin:

https://pastebin.com/6pvUM2my

Codepen:

https://codepen.io/creativecodes/pen/NWJdPxQ

[anbroids]

hi!!! I loved ur hometsuck kids theme sm it made me want to go back into coding after so long(^^; I wanted to know how u learned it and if u have any tips for newcomers. Ty !!

oh holy shit this is ask is SO SWEET :,) thank you so much anon and i’m so happy to hear it made you want to get back into coding! we seriously need a tumblr theme renaissance. what i would give to see people coding and sharing/reblogging themes like the older days on tumblr. life could be dream.

i learned html and css from making my own tumblr themes as a kid! i think tumblr themes are literally such a good introduction into learning front-end development. BUT to be fair i also took a few programming classes and was a big coding nerd in school and that definitely helped me become a lot more comfortable with making themes from scratch and adding custom script. if you are interested in learning javascript, learnjavascript.online is a great source for starting out and getting some practice!

i think a great way to get your bearings is to look at some base themes and poke around at the code just to familiarize yourself with some of the tumblr-specific syntax. @theme-hunter has a great database of themes to look at with some tutorials for beginners compiled here. i think the best way to learn how div blocks function and what you are capable of changing is by playing around with preexisting code and seeing what you can create. i did this until i was comfortable enough to make a few base themes of my own from scratch that i can go back and reference when starting a new theme or coding project.

tumblr also has a list of their block elements online with some introduction to custom themes, which is helpful to reference when styling the features built into each tumblr blog like title, descriptions, posts, notes, etc.

as far as tips for newcomers, here’s a few things top of mind:

google is your best friend, seriously, i can't tell you how many times i am googling the most rudimentary of things because i'm always forgetting little syntax things. chances are, if there's something you want to achieve with code there will be someone on stack overflow with some advice, or a tutorial on codepen or w3schools that you can use as reference.

troubleshoot with inspect element! i usually build my code straight into the tumblr theme html and css on a sideblog, save, and then keep a tab of that blog open that i can refresh and inspect element to look for errors in the console. i think firefox works the best, but i would recommend always loading your blog in a few different browsers since there is css syntax that is specific to mozilla or chrome (eg. custom scrollbars or pure-css animations)

there are lot of browser extensions that can make the coding process easier! i recommend eye dropper for pulling and matching hex codes. i also use fonts ninja a lot for getting accurate weights and names for custom fonts. a few more that come to mind are window resizer and css viewer (chrome/mozilla) if you want to check those out!

happy coding!

[snoozealarms]

Apple Style CTA Reveal with CSS scroll-driven animations Source Code https://democoding.in/codepen-ideas/apple-style-cta-reveal-with-css-scroll-driven-animations-2dk8

[arcanetrivia]

I made this into a GIF to show the animation, but it was actually all done with CSS! 😲

Guybrush Threepwood CSS - Spyglass Animation by MercheDev (@merchedev) on CodePen.

[jcmarchi]

8 CSS & JavaScript Snippets for Creating Sticky Elements — Speckyboy

New Post has been published on https://thedigitalinsider.com/8-css-javascript-snippets-for-creating-sticky-elements-speckyboy/

8 CSS & JavaScript Snippets for Creating Sticky Elements — Speckyboy

Modern websites often feature extensive scrolling. Long pages are common on desktop devices, but are even more frequent on mobile screens. The practice creates usability challenges for tasks like navigation and referencing important information.

That’s where “sticky” design elements come in handy. They allow users to scroll without losing access to your site’s menu. You can also use them to keep ads in view, attach social media sharing buttons to the viewport, or create fun special effects.

Implementing a sticky element can be simple, as CSS has a dedicated position property for this function. JavaScript can be used for building more robust features. As usual, there are several methods to achieve your goals.

We searched the CodePen archives to find interesting examples of sticky elements in use. Below, you’ll find various options that enhance the user experience. So, get stuck in your easy chair and be inspired by these code snippets!

Pure CSS Header Animation to Sticky Navigation

Created by Amit

Sticky headers are among the most popular use cases. On Chromium browsers, this snippet uses CSS to transform a tall and narrow header into a full-screen bar upon scrolling. Unsupported browsers receive a narrower, taller, sticky header. Keyframe animation is used to create smooth transitions. The feature is useful, lightweight, and attractive.

See the Pen Pure CSS header animation to sticky nav by Amit

Sticky Responsive Sidebar Navigation

Created by Areal Alien

Sidebar navigation can also take advantage of staying put during scrolling. Hovering over the sidebar expands the navigation to include text labels – it works on mobile too. However, you might also reserve this concept for large screens and use the traditional “hamburger” menu for mobile.

See the Pen Sticky responsive sidenav by Areal Alien

CSS Sticky Table Header & Column

Created by Mike Golus

Long HTML tables can be a pain to read. You have to memorize the column headers to understand the context. Sticky headers make even the busiest tables easier to read. Using position:sticky (and a few other tricks) on the first row and column enables scrolling without losing sight of key information. The examples in this Pen demonstrate how it’s done.

See the Pen CSS Sticky Table Header and Column by Mike Golus

Long Scroll Sticky Sections

Created by Burmese Potato

Here’s a unique way to denote the various sections of a long page. Scroll down the page, and the episode number (displayed in the left column) sticks until you reach the end of the section. The snippet combines sticky positioning with the calc() property on the container’s height to keep the number in view. This little bit of CSS adds a nice touch to the user experience.

See the Pen Pretty Sticky by Burmese Potato

Just Another Sticky Section Layout

Created by Misala

Sticky design elements can also be used to show off product features. Scroll down this page and watch as featured text and videos change. The layout occupies the entire screen viewport and is responsive for mobile devices. It’s a high-end feature sure to capture a user’s attention.

See the Pen just another sticky section layout by misala

Multi-Navigation Sticky Bars & Layout

Created by Den

This snippet asks the question: What if you have more than one navigation bar? The first bar is sticky by default. Scroll past a few sections, and a second sub-navigation bar lines up underneath. That second bar also features a neat frosted glass look as content scrolls underneath.

See the Pen Sticky layout + filters #2024 by Den

Sticky Video with CSS @container scroll-state()

Created by Jhey

We’re seeing more websites implement sticky videos, where the presentation sticks to the bottom corner upon scrolling. It allows users to view the rest of your content without losing sight of the video. Here, CSS container queries are used to reposition the video player. Use the included config panel to see how different settings impact the animation effects.

See the Pen CSS @container scroll-state() faux PiP video by Jhey

Dynamic Sticky Sidebar Component

Created by Ryan Mulligan

Features like shopping carts are a perfect fit for sticky sidebars. The UI makes it easier for shoppers to keep track of their cart and, most importantly, finish their purchase. This sidebar widget keeps track of cart contents and sticks to the screen while you scroll in the page content area.

See the Pen Dynamic Sticky Sidebar Component by Ryan Mulligan

Stick With What Works in Your Designs

We may think of sticky elements as being used for site headers and navigation. However, the examples above show that they can do much more. There are so many creative possibilities for informing and entertaining users.

What’s more, CSS can do a lot of the heavy lifting for you. Several snippets in this collection don’t require a single line of JavaScript. Still, it’s nice to know you can add some DOM manipulation when needed.

We hope this collection sparked your imagination! Check out our CodePen collection for even more sticky snippets.

Related Topics

Written by Eric Karkovack

Eric Karkovack is a web designer and WordPress expert with over two decades of experience. You can visit his business site here. He recently started a writing service for WordPress products: WP Product Writeup. He also has an opinion on just about every subject. You can follow his rants on Bluesky @karks.com.

Read more articles by Eric Karkovack

[akash1618]

20 may. tuesday

barely had any work today. but honestly, got a lot of work done for myself.

did first draft for the email template, then a few screens, and documentation.

i thought i would have something on my plate, but it just didn't turn out. boss slacked me to visit his cabin, randomly post-lunch. but i was attending a bank call so couldn't go in. he messaged that he'd call me later. never did.

sat with understanding framer. because ofc react would take a lot of time. on second thought, framer is actually good. ok. somewhat. i must explore all it's possibilities before concluding. but i can definitely get a lot done with it rn the way i see it. it's just that it won't be much customisable for adding interactive elements. but ig i have found a workaround. i am super hoping it works.

i wanted to make a landing page animation. plain html/css/js. created four assets, and just put them on catbox, and then codepen. didn't write a single line of code, supplied the requirements to gpt, and with around four hours of iteration, i just got it out perfectly. i didn't write a single line of code. my js is weak. but never in my life did i think before that this would have been possible. grateful to gpt. two years of using it, and it's now that the ai models are superior. but it also ticks me off when i see people on linkedin use gpt to even reply to posts. it's a different thing to curate a post, or use it make it better. but for replies? oh. so bad. what would you do of those engagement numbers that don't even mean anything. it's not that some fortune 500 ceo is reading comments. lol, but why do i care? let them be bro. chill.

it started raining post-evening. i hate rains. but there's peace in watching it fall. when was the last time i watched it fall peacefully? long time, i don't remember. i just remember this feeling.

the smell of the mud. petrichor. when the rain has fallen enough. the smell gets lost. i get used to it. until just a random breeze hits me someday, and i love it all over again.

the best thing about rain? even if i hate it sm? i can sing. i have never sung in public before. i start yawning. my voice is bad. i sing without melody. but in rain, the sound of the rain covers my voice. the umbrella and the falling drops hide my face. i can sing the way i wish to. tried to sing "if not for you" by maneskin today. ah, it's while i sing that i realised that i remember no lyrics at all. and how much melody-less i sing. haha.

another thing i love about rain is getting to jump into pools of water on roads and splash water. yea, but i had my shoes on today. so no. phish, i forgot to order clogs.

and the famous mumbai water logging. just one rain in, and i see the streets flooded. airport street was filled. not even a proper rain, and then this :) miss, do you still love mumbai? more like, "only death do us apart" love? and maybe, just through chance, someone in it? haha. ig the only thing miss and i share in common is we both live in mumbai.

oh miss - i saw her at lunch while i was leaving. couldn't look at her because i was constantly being called by the "bank" so had to leave.

lol. yesterday - "bank" called me and told that they always had the fraud protection active on my credit card, and from the next month, charges shall be applicable. i had the option to disable it. it's around 500/pm. so makes 6000/pa. i don't even have a high credit limit on my icici cc, so asked them to disable it. that's like money being wasted. they told that a representative would call me.

the "representative" called today. things turned into him asking for OTPs. ofc cannot share OTPs right. i asked and dude said that some tasks do require me to. haha, this was the first time in my life i received such a call, so i was curious to know their mo, and how do they operate. i went ok. so stupid of me actually. shared around five OTPs with extreme "care". a rs. 1 transaction then. sure. then, a 26k transaction. haha, now i was curious. stupidly curious. asked the dude that it's a big amount. but funnily and stupidly did share that otp as well. idk what i was trying to do. i was smiling stupidly while sharing the otp. lol, the transaction got declined.

dude later called me and told that since i have set the credit limit to 30%, and already have an existing emi on it, i would have to set the limit to 100% through the app, and only then will the fraud protection be disabled. lol. now i had a big grin on my face. ty. i just blocked all the numbers he was later calling me from, and also the associates.

fraud? idk. i will check next month's statement if there's an actual extra charge levied for fraud protection. yes? i will call rm and ask him directly to assist. lol. today was so funny. why in the world did i even share otps. akash - never ever again, ok? sounded fun, but don't 😛

haha, i wanted to see what it's like to get scammed. but nah. i don't think that's cool. please mind your actions bro. also, they really seemed from the bank. i could sense that, but now blocked haha. still, the stupid is me. experiment?

no transactions were reflected for today in the statement. also changed netbanking password, just in case.

while returning from the canteen in the evening, went to get a lassi at the vending machine. uhh, well, saw miss at the coffee machine randomly. "oh. miss do you even realise how pretty you are?" is what i thought.

got two chhaas, and one lassi, and well, of three, lassi never fell. coworkers took their chhaas and left. and when i looked back at the coffee machine, miss had actually walked till the reception desk. next, i ordered two lassis, hoping one would fall. and well, the internet went slow. both my mobile and the vending machine's. lol, what timing. the next thing ik, madam had teleported to stand just right at the printer. idk how. ofc she walked, but i never saw it. we were not even two feet apart. i became nervous, my feet started tapping at a faster pace. "say a hi. say a hi" started ringing in my mind. my heart started beating faster. i looked at her. she had proly placed her coffee on the drawer that supports the printer. was busy looking in the mobile. i smiled and let her be. realised at that moment that just her existing around me makes my day. but then, since the orders of lassi had failed, and i didn't want to leave from there since miss was standing, i ended up ordering the winkin cow milk shake. miss left when the order had been processed. i kinda wanted to stay there for as long as i could there today. whispered "don't leave" ; only in mind though.

god, i think i am in love with her. deeply. i should say a hi soon.

should i cheat and ask sunny's friend to introduce me to her?

etayoh - the designer boutique. i miss it. it's closed. they used to display so many beautiful dresses. i always thought that i would get something from there someday. the last i saw it open, was on ram navami - they were selling all their kurtis for 50% off. they were shutting down. i had been watching that store since 2016. all these years. kinda hurts thinking about the store owners, or just anyone. when you put in your years, your dreams, and then one sudden day, you part with all of them.

songs - randomly remembered zehnaseeb today. so went to the hasee toh phasee album. but looped ishq bulava instead. so long i heard it . i hate punjabi songs, but this is an exception.

punjabi songs aren't my thing. i can listen to japanese or english, of which i don't understand a word, and still enjoy the melody and rhythm. hindi or marathi, and understand the lyrics somewhat fairly. but punjabi? it's the hybrid. cannot even understand the lyrics well, nor can ignore them.

ishq bulava is an exception because it's pleasing to the ears.

rain does make logging into diary difficult.

[souhaillaghchimdev]

Getting Started with Interactive Programming

Interactive programming brings your code to life by enabling users to engage with it in real-time. Whether it’s a game, a web app, or a visualization, interactive programs provide an engaging user experience. In this post, we’ll explore what interactive programming is, why it's useful, and how you can start building your own interactive applications.

What is Interactive Programming?

Interactive programming refers to writing software that reacts to user inputs or events while it's running. It can range from graphical applications and games to websites, simulations, or command-line tools that prompt user feedback.

Why Learn Interactive Programming?

Enhances User Experience: Real-time feedback makes applications dynamic and engaging.

Foundation for Games and UI: Essential for developing games, web UIs, and mobile apps.

Boosts Problem-Solving: Helps you think logically and event-driven.

Fun and Motivating: It’s exciting to see your code respond to your actions instantly.

Where to Start?

There are several beginner-friendly platforms and languages perfect for learning interactive programming:

JavaScript + HTML/CSS: Build interactive web pages with event listeners and animations.

Python with Turtle or Pygame: Great for visual learning and making simple games.

Scratch: Drag-and-drop interface for learning logic and interaction basics (perfect for kids and absolute beginners).

Processing (Java-based): A creative coding environment for art and interactive visualizations.

Example: JavaScript Button Interaction

<button onclick="sayHello()">Click Me!</button> <script> function sayHello() { alert('Hello there!'); } </script>

This simple code responds to a user clicking the button by showing a message. That’s interactivity in action!

Key Concepts to Learn

Event Handling: Responding to user actions like clicks, keypresses, and gestures.

DOM Manipulation (Web): Changing what users see on a webpage using code.

State Management: Tracking changes and conditions in your app.

Animation & Timing: Creating smooth transitions and effects over time.

Tools & Platforms

Replit – Online IDE to run interactive code instantly

CodePen – Great for experimenting with HTML/CSS/JS

p5.js – JavaScript framework for creative interactive coding

Scratch – A visual coding platform ideal for interactive storytelling

Project Ideas to Practice

Build a quiz app with score tracking

Make a to-do list with live updates

Create a drawing app with mouse input

Develop a simple game (e.g., pong, tic-tac-toe)

Design a responsive calculator

Conclusion

Interactive programming is one of the most rewarding ways to develop your coding skills. It not only improves your logic and design thinking but also brings your ideas to life in exciting ways. Start small, experiment freely, and have fun creating programs that respond to the world around them!

[hiveswap]

Your NAO-MI website is really cool! I'm so excited to see where this goes and get into the story!

The water effect on the waterchange container is a little too low, it's drowning the button.

Hi!! Thank you! I knew this was the case, but I've been putting it off. turns out I just had to modify two values. oops.

so yeah the button is ok now! and the water isn't spilling out either (which bothered me more)

most of this code is from someone's codepen iirc, it started out as a rounder glass of water that i messed around with it until it fit. I don't understand webkit animations at all.

My IT teacher in secondary school said even professional programmers always get everything from the internet so i've been living by that, hopefully it isnt crazy unethical

[codingflicks]

Hover Effects inspiration

[bootstraplib]

41+ HTML 404 Page Template 

404 Page by Naved See the Pen 404 page by Naved khan (@Navedkhan012) on CodePen. Source 404 Page by Jhery See the Pen 404 Concept Page @property by Jhey (@jh3y) on CodePen. Source 404 Page by Amli See the Pen 404 by Amli (@uzcho_) on CodePen. Source 404 Page by Namrata See the Pen 404 Page – svg animation by Namrata Podder (@namratapdr) on CodePen. Source 404 Page by Swarup See the…

[siddhiinfosof0]

Global Web Application Development Tools for Beginners

Web development tools have come a way in only a few quick years. Way to this, Siddhi Infosoft can attach the power of incredibly tested collections to enhance our workflow and benefit from more opportunities on the subject of responsive diagram. Not only that, we can construct things together way to ever-improving version manage systems. From browser accessories and plugins, to processors that streamline your code, there have in no way more possibilities for developing great web programs.

However with the number of web development tool growing almost daily, locating the quality software to get the job performed can now and again feel daunting.

"Beginner's Best Friend: Global Tools for Your First Web App Adventure!"

That will help you out, we’ve created a listing of fundamental tools for frontend development to get you started out. In case you’re interested by finding out about one in particular, certainly pick it from the listing below.

7 of the Global Web Development Tools for Beginners

Smart textual content

Let’s start with the basics: an exquisite code editor—one which functions a well-designed, extremely good efficient, and extremely rapid user interface. There are several that try this nicely, however arguably the first-class (and maximum famous) is elegant text.

Artfully run with the aid of a one-guy development team, the name of the game to fulfillment lies within the software’s full-size array of keyboard shortcuts—together with the ability to perform simultaneous editing in addition to short navigation to documents, symbols, and contours. And while you’re spending 8+ hours along with your editor each day, those precious few seconds saved for each procedure really do upload.

Chrome Developer tools

Wouldn’t it's outstanding if you can edit your HTML and CSS in actual-time, or debug your JavaScript, all whilst viewing a radical performance evaluation of your website?

Google’s integrated Chrome Developer tools can help you do simply that. Bundled and to be had in each Chrome and Safari, they allow developers get entry to into the internals in their web application. On top of this, a palette of community tool can assist optimize your loading flows, while a timeline offers you a deeper grasp of what the browser is doing at any given moment.

jQuery

JavaScript has long been taken into consideration an imperative frontend language by using developers, although it’s not besides its problems: riddled with browser inconsistencies, it’s extremely complex and unapproachable syntax meant that functionality frequently suffered.

That was once until 2006, when jQuery—a fast, small, move-platform JavaScript library tools toward simplifying the frontend process—seemed at the scene. by using abstracting numerous the functionality commonly left for developers to resolve on their own, jQuery allowed more scope for creating animations, including plug-ins, or maybe just navigating documents.

GitHub

It’s every developer’s worst nightmare—you’re running on a brand new task characteristic and also you screw up. Enter model manipulate structures (VCS)–and greater in particular, GitHub.

Through rolling out your venture with the provider, you can view any changes you’ve made or maybe cross again to your previous nation (making pesky errors a factor of the beyond). There are such a lot of motives why GitHub is indispensable to developers. The repository web hosting service additionally boasts a rich open-source development community (making collaboration among teams as easy as pie), as well as imparting several other components consisting of computer virus tracking, characteristic requests, undertaking management, and wikis for each undertaking.

CodePen

Regardless of being around when you consider that 2012, the ever-growing of humans mastering programming implies that 2024 goes to be any other bumper 12 months for this device cherished through the frontend network.

There may be almost no better way of showcasing your HTML, CSS, and JavaScript snippets, and as a result are an increasingly more commonplace sight across coding resources on line.

As well as showing off your GitHub profile, CodePen is a really beneficial device for those building or overhauling their web developer portfolio. It’s an elegant method of displaying off no longer just the code in the back of features you’ve built, however also how they're exhibited to users as nicely.

Angular

HTML is generally the cornerstone of any frontend developer’s toolbox, however it has what many understand to be a significant flaw: it wasn’t designed to manipulate dynamic views.

This is in which AngularJS, an open-supply web framework, came in. advanced by Google, AngularJS lets you amplify your application’s HTML syntax, ensuing in a more expressive, readable, and quick to develop environment that would in any other case not were constructed with HTML on my own.

The game modified with the development of Angular, that's based totally on Type Script, now not JavaScript. Crucially nonetheless open-supply, it’s nonetheless regarded as a JS-based totally technology, it’s now on Angular 14 and continues to be gaining recognition among frontend developers for its capacity to set up effective web apps across multiple structures.

Sass

Web development tools that save time are your excellent buddy, and one of the first stuff you’ll learn about code is that it needs to be DRY (“Don’t Repeat yourself”). The second one aspect you’ll in all likelihood study is that CSS is commonly no longer very DRY.

Input the sector of the CSS preprocessor, a tool that will help you write maintainable, destiny-proof code, all while reducing the amount of CSS you have to write (keeping it DRY).

Perhaps most popular amongst them is Sass, an 8-yr-old open-supply undertaking which quite much defined the genre of cutting-edge CSS preprocessors. even though a touch intricate to familiarize yourself with to start with, Sass’s aggregate of variables, nesting, and mixings will render simple CSS while compiled, meaning your stylesheets could be greater readable and (most significantly) DRY.

Final thoughts

It’s designed to educate you the core frontend technologies from scratch, as well as you with a lot sought-after skills in JavaScript development, and the selection of specializations in a number of the large programming competencies of 2024, inclusive of Python as well as cloud computing.

Not positive if this existence is for you? Properly, Siddhi Infosoft in case you’re nonetheless considering your personal profession switch to web development, a great step is to take this unfastened five-day coding brief path, to see if the existence is for you. In it, you’ll examine a few key frontend development abilities which includes HTML, CSS, and JavaScript, as you construct your first website.

Resource: Global Web Application Development Tools for Beginners

[snoozealarms]

Gooey countdown SVG Animation Source Code https://democoding.in/codepen-ideas/gooey-countdown-svg-animation-8dl7

[thesilentpotato]

there's a really cute dark mode typing/programming bongo cat that i found last yr on google images when looking for a desktop bg. i thought it was very me but always wanted to edit it to make it more my own. well! i finally looked up the person who made it.

carolineartz over on codepen! it's not a png but actually an animated svg! the cat types and listens to some music :3

....and before i knew it i had downloaded the html/css, frankensteined the code back into an svg file, opened my vector art program, and then edited it to be a pikachu. and now every time i look at it i feel like giggling. not only do i have something i made to be my own, i have it in any image size/aspect ration i want!!!!! hehehehhe

[jcmarchi]

Getting Creative With HTML Dialog

New Post has been published on https://thedigitalinsider.com/getting-creative-with-html-dialog/

Getting Creative With HTML Dialog

Like ’em or loath ’em, whether you’re showing an alert, a message, or a newsletter signup, dialogue boxes draw attention to a particular piece of content without sending someone to a different page. In the past, dialogues relied on a mix of divisions, ARIA, and JavaScript. But the HTML dialog element has made them more accessible and style-able in countless ways.

So, how can you take dialogue box design beyond the generic look of frameworks and templates? How can you style them to reflect a brand’s visual identity and help to tell its stories? Here’s how I do it in CSS using ::backdrop, backdrop-filter, and animations.

Design by Andy Clarke, Stuff & Nonsense. Mike Worth’s website will launch in June 2025, but you can see examples from this article on CodePen.

I mentioned before that Emmy-award-winning game composer Mike Worth hired me to create a highly graphical design. Mike loves ’90s animation, and he challenged me to find ways to incorporate its retro style without making a pastiche. However, I also needed to achieve that retro feel while maintaining accessibility, performance, responsiveness, and semantics.

A brief overview of dialog and ::backdrop

Let’s run through a quick refresher.

Note: While I mostly refer to “dialogue boxes” throughout, the HTML element is spelt dialog.

dialog is an HTML element designed for implementing modal and non-modal dialogue boxes in products and website interfaces. It comes with built-in functionality, including closing a box using the keyboard Esc key, focus trapping to keep it inside the box, show and hide methods, and a ::backdrop pseudo-element for styling a box’s overlay.

The HTML markup is just what you might expect:

<dialog> <h2>Keep me informed</h2> <!-- ... --> <button>Close</button> </dialog>

This type of dialogue box is hidden by default, but adding the open attribute makes it visible when the page loads:

<dialog open> <h2>Keep me informed</h2> <!-- ... --> <button>Close</button> </dialog>

I can’t imagine too many applications for non-modals which are open by default, so ordinarily I need a button which opens a dialogue box:

<dialog> <!-- ... --> </dialog> <button>Keep me informed</button>

Plus a little bit of JavaScript, which opens the modal:

const dialog = document.querySelector("dialog"); const showButton = document.querySelector("dialog + button"); showButton.addEventListener("click", () => dialog.showModal(); );

Closing a dialogue box also requires JavaScript:

const closeButton = document.querySelector("dialog button"); closeButton.addEventListener("click", () => dialog.close(); );

Unless the box contains a form using method="dialog", which allows it to close automatically on submit without JavaScript:

<dialog> <form method="dialog"> <button>Submit</button> </form> </dialog>

The dialog element was developed to be accessible out of the box. It traps focus, supports the Esc key, and behaves like a proper modal. But to help screen readers announce dialogue boxes properly, you’ll want to add an aria-labelledby attribute. This tells assistive technology where to find the dialogue box’s title so it can be read aloud when the modal opens.

<dialog aria-labelledby="dialog-title"> <h2 id="dialog-title">Keep me informed</h2> <!-- ... --> </dialog>

Most tutorials I’ve seen include very little styling for dialog and ::backdrop, which might explain why so many dialogue boxes have little more than border radii and a box-shadow applied.

Out-of-the-box dialogue designs

I believe that every element in a design — no matter how small or infrequently seen — is an opportunity to present a brand and tell a story about its products or services. I know there are moments during someone’s journey through a design where paying special attention to design can make their experience more memorable.

Dialogue boxes are just one of those moments, and Mike Worth’s design offers plenty of opportunities to reflect his brand or connect directly to someone’s place in Mike’s story. That might be by styling a newsletter sign-up dialogue to match the scrolls in his news section.

Mike Worth concept design, designed by Andy Clarke, Stuff & Nonsense.

Or making the form modal on his error pages look like a comic-book speech balloon.

Mike Worth concept design, designed by Andy Clarke, Stuff & Nonsense.

dialog in action

Mike’s drop-down navigation menu looks like an ancient stone tablet.

Mike Worth, designed by Andy Clarke, Stuff & Nonsense.

I wanted to extend this look to his dialogue boxes with a three-dimensional tablet and a jungle leaf-filled backdrop.

Mike Worth, designed by Andy Clarke, Stuff & Nonsense.

This dialog contains a newsletter sign-up form with an email input and a submit button:

<dialog> <h2>Keep me informed</h2> <form> <label for="email" data-visibility="hidden">Email address</label> <input type="email" id="email" required> <button>Submit</button> </form> <button>x</button> </dialog>

I started by applying dimensions to the dialog and adding the SVG stone tablet background image:

dialog width: 420px; height: 480px; background-color: transparent; background-image: url("dialog.svg"); background-repeat: no-repeat; background-size: contain;

Then, I added the leafy green background image to the dialogue box’s generated backdrop using the ::backdrop pseudo element selector:

dialog::backdrop background-image: url("backdrop.svg"); background-size: cover;

Mike Worth, designed by Andy Clarke, Stuff & Nonsense.

I needed to make it clear to anyone filling in Mike’s form that their email address is in a valid format. So I combined :has and :valid CSS pseudo-class selectors to change the color of the submit button from grey to green:

dialog:has(input:valid) button background-color: #7e8943; color: #fff;

I also wanted this interaction to reflect Mike’s fun personality. So, I also changed the dialog background image and applied a rubberband animation to the box when someone inputs a valid email address:

dialog:has(input:valid) background-image: url("dialog-valid.svg"); animation: rubberBand 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; @keyframes rubberBand from transform: scale3d(1, 1, 1); 30% transform: scale3d(1.25, 0.75, 1); 40% transform: scale3d(0.75, 1.25, 1); 50% transform: scale3d(1.15, 0.85, 1); 65% transform: scale3d(0.95, 1.05, 1); 75% transform: scale3d(1.05, 0.95, 1); to transform: scale3d(1, 1, 1);

Tip: Daniel Eden’s Animate.css library is a fabulous source of “Just-add-water CSS animations” like the rubberband I used for this dialogue box.

Changing how an element looks when it contains a valid input is a fabulous way to add interactions that are, at the same time, fun and valuable for the user.

Mike Worth, designed by Andy Clarke, Stuff & Nonsense.

That combination of :has and :valid selectors can even be extended to the ::backdrop pseudo-class, to change the backdrop’s background image:

dialog:has(input:valid)::backdrop background-image: url("backdrop-valid.svg");

Try it for yourself:

Conclusion

We often think of dialogue boxes as functional elements, as necessary interruptions, but nothing more. But when you treat them as opportunities for expression, even the smallest parts of a design can help shape a product or website’s personality.

The HTML dialog element, with its built-in behaviours and styling potential, opens up opportunities for branding and creative storytelling. There’s no reason a dialogue box can’t be as distinctive as the rest of your design.

Andy Clarke

Often referred to as one of the pioneers of web design, Andy Clarke has been instrumental in pushing the boundaries of web design and is known for his creative and visually stunning designs. His work has inspired countless designers to explore the full potential of product and website design.

Andy’s written several industry-leading books, including ‘Transcending CSS,’ ‘Hardboiled Web Design,’ and ‘Art Direction for the Web.’ He’s also worked with businesses of all sizes and industries to achieve their goals through design.

Visit Andy’s studio, Stuff & Nonsense, and check out his Contract Killer, the popular web design contract template trusted by thousands of web designers and developers.