They also serve as an inspiration for web designers. Their use of color and typography is part of how we see the world. We can see the impact all over the web.

What’s more, we can recreate and enhance the experience online. Goodies like 3D effects and animation bring posters to life. There’s also an element of interactivity. That can be just as powerful as a bold layout.

We wanted to see how designers are using their creativity. So, we perused the archives of CodePen for beautiful poster art. Here are some examples that use CSS, JavaScript, and other technologies. Enjoy!

Furiosa 3D Animated CSS Poster by Olivier 3lanc

Talk about a poster that’s brimming with life! This 3D rendering places the movie’s characters in a cut-out. The entire presentation looks like a diorama. Everything is powered by CSS – no JavaScript in sight.

See the Pen FURIOSA 3D Animated Poster by Olivier 3lanc

Replicating & Animating Zürich Tonhalle’s Poster by Jon Yablonski

This snippet is part of a project that recreates iconic posters. The beauty here is in the minimal layout and bold typography. Animated lines add a modern touch to this classic.

See the Pen Zürich Tonhalle (1955) by Jon Yablonski

CSS Grid Poster Exercise by Victoria Bergquist

A combination of Flexbox and CSS Grid fuels this example. The variation of shapes would seem nearly impossible to do without these tools. The included splash of color makes for a compelling result.

See the Pen CSS Grid Poster Exercise 1 by Victoria Bergquist

Donkey Kong Poster Collection by Daniel Fontes

Here’s a fun tribute to the past. Gamers will instantly recognize this series of images from Donkey Kong. The classic video game posters feature a fun lighting feature. Tug on the chain to illuminate your favorite poster. Bonus points for the flicker effect!

See the Pen Donkey Kong – a small poster collection by Daniel Fontes

PPL MVR CSS & SVG Poster Designby Kristopher Van Sant

Band posters are a common theme among designers. Perhaps that’s because so many of us have them on our walls. This animated sequence takes inspiration from print artwork. And it’s another example of what CSS is capable of.

See the Pen PPL MVR by Kristopher Van Sant

Grid Duotone Gradient Poster Design by Cassie Evans

The power of CSS Grid is real. The poster is beautiful and complex. Most impressively, the styles consist of less than 200 lines. A little code and a lot of imagination can go a long way.

See the Pen Grid Poster by Cassie Evans

Grunge Poster with the Wave Motion Effect by ilithya

Who can resist the retro vibes coming from this poster? It captures the look of the 1990s – complete with raining triangles. Move your cursor to change the perspective of the photo. It’s a far-out experience, for sure.

See the Pen Grunge Poster by ilithya

The Matrix Resurrections Digital Poster by Sparklingman

The Matrix movie series is known for a different kind of rain. This digital poster may appear simple. However, clicking on it shifts the green and black pattern. The effect is subtle – but fits beautifully with the movie’s aesthetic.

See the Pen The Matrix Resurrections | Sparklingman digital poster #026 by Sparklingman

A New Take on a Classic Art Form

The examples above combine classic print sensibilities with online capabilities. It’s a fun exercise that goes beyond what’s hanging on your wall.

We may think of posters as being simplistic. But they also open a world of possibilities for designers. Thus, we can take this inspiration and run with it.

For example, posters may help us rethink traditional web layouts. Elements like vertical text and unique container shapes come to mind. They can serve as a launching pad for ideas.

Want to see more examples of online poster art? Check out our CodePen collection!

The post Beautiful Poster Art Created with CSS & JavaScript appeared first on Speckyboy Design Magazine.

We see these UIs on our devices. Anyone who’s performed an update on their computer or phone will be familiar with them. Thus, it’s easy to take their design for granted.

However, we’re starting to see more creative implementations. And the web has become a driving force. Designers are using CSS and JavaScript to make progress UIs fun and informative. By adding quirky animations and other visuals, we’re well beyond the standard progress bar.

Here are eight progress bars and UIs that have something unique to offer. You might be surprised at how far these elements have come.

Animated Semi-Circular Progress Bar Chart Using SVG by Andrew Sims

We don’t always measure progress in a straight line. You can also use shapes like this beautiful semicircle. The snippet uses ProgressBar.js and SVG to create an attractive presentation.

See the Pen Animated semicircular progress bar chart using SVG by Andrew Sims

CSS Animated Download & Progress Animation by Aaron Iker

Users spend a lot of time downloading files. Progress meters keep them abreast of their status. We love that this example keeps things simple. A single button houses all the information users need.

See the Pen Download progress animation by Aaron Iker

Progress Bar Animation by Eva Wythien

Who says progress bars have to be boring? Here’s a look at how creativity can spice things up. CSS keyframe animations, patterns, and gradients add fun to the mix.

See the Pen Progress bar animation by Eva Wythien

CSS & JavaScript Progress Clock by Jon Kantner

Time is another way to measure progress, and this clock does so in a unique way. Hover on the date, hours, minutes, and seconds to focus on their meters. The effect takes a complex UI and breaks it into bite-sized chunks.

See the Pen Progress Clock by Jon Kantner

CSS-Only Order Process Steps by Jamie Coulter

Here’s a fun way to show users the steps in an eCommerce process. Clicking on a step reveals more details. Notice how the box icon changes along the way. This UI demonstrates progress and doubles as an onboarding component.

See the Pen CSS only order process steps by Jamie Coulter

Screen Wraparound Progress Bar by Thomas Vaeth

Progress UIs can also be scroll-based. In this case, a colored bar wraps around the viewport as you scroll. The effect goes in reverse as you move back to the top. Perhaps this example isn’t a fit for every use case. But it could be a companion to a storytelling website.

See the Pen Wraparound Progress Bar by Thomas Vaeth

Responsive Circle Progress Bar by Tigran Sargsyan

This snippet uses an HTML range input that syncs with a circular progress UI. The shape makes this one stand out. But so does the color-changing effect. As the slider value changes, so do the colors.

See the Pen Circle progress by Tigran Sargsyan

Rotating 3d Progress Bar by Amit

Here’s something different. These rotating 3D progress bars provide a futuristic look. That aside, they were built entirely with CSS, and they’re sure to draw attention.

See the Pen 3d progress bar v2 by Amit

Better Progress Through Code

There’s no reason to settle for an old-school progress UI. It’s now possible to create something that matches your desired aesthetic. And best of all, you don’t need a lot of complex code or imagery. Make these elements as simple or complex as you like.

The examples above demonstrate a wide range of possibilities. But they’re only scratching the surface. Combine CSS, JavaScript, and imagination to build a distinct look and feel.

Are you looking for more progress UI examples? You’ll want to check out our CodePen collection!

The post 8 CSS & JavaScript Snippets for Creating Animated Progress Bars appeared first on Speckyboy Design Magazine.

Modern CSS and JavaScript techniques are capable of so much more. Individual letters can dance across the screen in highly-sequenced animations. Special effects can add 3D-like depth, while masking introduces textures to the presentation.

If you’re looking to grab a user’s attention – you’ve come to the right place. We’ve put together a collection of CSS and JavaScript snippets that will bring your words to life.

The following snippets run the gamut with regard to complexity and potential use cases. And they’re all sure to stand out. Here we go!

Falling Words CSS Effects

Here’s one way to dissect a paragraph. This JavaScript-powered animation takes words and piles them up at the bottom of the screen. You can also drag and toss them about. This effect could be a great way to enhance an old-school tag cloud.

See the Pen Falling Words by Gayane Gasparyan

Jello Stretchy Variable Font

Sometimes a special effect can add context to a word. This squishy take on “Jello” is a perfect example. It jiggles – just like the popular dessert. A variable font is used along with SVG to create this bouncy masterpiece.

See the Pen Jello Stretchy Variable Font by Pete Barr

Montserrat Text Animation

Stylized text works great for logos and titles. But when you add movement, it takes things to a whole other level. Here we have a Google font that has been brought to life with some colorful animation.

See the Pen Text Animation:Montserrat by Claire Larsen

Move to Mars!

Even if you’re not ready to move to the red planet, this animation is otherworldly. The load sequence of the elements is an attention-getter, for sure. And it also fits perfectly with the retro aesthetic of the presentation. We might just book a flight.

See the Pen Move to Mars! A CSS only booking form by Jamie Coulter

Kinetic Typing Animation

Why settle for a boring old resume when you can do something unique? That’s the premise of this developer’s animated skills. It makes excellent use of typography, along with a simple color scheme.

See the Pen Scene.js Kinetic Typing Animation by Daybrush

Rainbow Text Hover Animation

Here’s proof that you don’t need to go overboard with movement. A CSS conic gradient was used to create the delightful “rainbow” effect on this text. Hovering transforms it to use a singular color.

See the Pen Rainbow text hover animation by Sarah Fossheim

Simple Neon Text Effect

Add this snippet to the “less is more” category. A simple neon text effect brings contrast here, but the little details make it even better. The intermittent dimming of the text adds both fun and realism.

See the Pen NEON TEXT by Mohammad H Alijany

NITW Text Animation

There’s so much to love about this presentation. It’s simple, fun, and subtle. The movement of individual letters is noticeable – but not distracting. And there’s a television-like quality to its look. Plus, the interactive elements serve to enhance the experience.

See the Pen NITW Text Animation by cpsdqs

More Than Words Alone Can Say

The ability to dress up text with code opens the door to creativity. Under the right circumstances, movement and interactivity are welcome additions to a website.

And sometimes, it’s the simplest things that make the most significant difference. Sure, it’s possible to create cinematic effects. But subtlety can also stand out. The great thing is that you get to decide what works best for your messaging.

The post 8 CSS & JavaScript Snippets for Animating Words appeared first on Speckyboy Design Magazine.

These elements are also the perfect place to add various hover effects. It’s not only attractive but also a means to improve the user experience. Even a subtle effect can help cards stand out among a group, thus making the feature more intuitive.

The design community has created some outstanding examples. From bold transformations to simple highlights, there is something for virtually every use case.

With that in mind, here are some prime examples of card UI hover effects that have been enhanced with CSS and JavaScript.

Card Hover Interactions

Displaying a large amount of content at once can overwhelm users. That’s where this snippet comes in. It consists of a simple title coupled with a background image. Hover over a card and you’ll find some descriptive text and a call-to-action. Best of all, it has been built with pure CSS.

See the Pen Card Hover Interactions by Ryan Mulligan

Profile Card Hover Effect

Here’s a similar concept, but even more minimalistic. The effect zooms in on the card’s photo and reveals the subject’s name and social media links. Overall, it’s very pleasing to the eye without becoming too busy.

See the Pen Profile Card Hover Effect by P

Pokemon Card Holo Effect

Everyone loves Pokémon, right? But that’s not the only cool thing about this snippet. Each card features a stunning holographic effect. It’s a cleverly-devised setup that uses animated GIFs and gradients to produce a sparkling beauty. Perhaps the effect is not for everyone, but it’s undeniably unique.

See the Pen Pokemon Card Holo Effect by Simon Goellner

CSS Card Hover Effects

If you’re looking for a way to make your card UI stand out, this hover effect will do the trick. It takes a grayscale card and turns it into an explosion of color. Beyond the bright pink hue, cards also expand in size to reveal more detailed content. All told, users can’t help but take notice.

See the Pen CSS Card Hover Effects by Jhonier Riascos Zapata

Pure CSS Holiday Feature Folding Cards

These mini-cards are closer in style to buttons than your typical content card. Regardless, their hover effect is pure magic. Each card “unfolds” to display a video alongside text and a call-to-action. It’s amazing how much can fit into such a small space. In addition, the responsiveness of the UI is also impressive.

See the Pen Holiday Feature Folding Cards [Pure CSS] by Madalena

Profile Card UI

Full disclosure, the hover effect here is just a minimal part of what this snippet does. But the tabs at the bottom of this profile card are nifty. They allow you to fit a large amount of content into a relatively tiny design element. The use of glassmorphism is also spot-on.

See the Pen Profile Card UI by JotForm

Player/User Cards

Crafted in the style of double-sided collectible cards, this UI shows additional information upon hovering. It’s clean, colorful, and refrains from taking over the rest of the page. This snippet would fit nicely into any project where cards are used to display data.

See the Pen Player/User Cards by Alvaro Montoro

CSS-Tricks Card Carousel

Here’s a different take on the traditional carousel. Cards are overlapped – making for an effective means to save space. Hover over an individual card, and it reveals itself. And while this example shows a circular animation on the active card, it could easily be adapted to show text or images.

See the Pen CSS-Tricks Card Carousel by William Goldsworthy

Adding Interactivity to a Staple of Web Design

Hover effects are there to bring interactivity and even a little bit of fun to any element. But there’s something unique about implementing them within a card UI. They add personality to what could be a rather static feature.

The snippets above show that there are several different ways to accomplish this. The effects can be subtle or substantial, based on the type of impact you’re looking to make. It’s something that even a buttoned-down corporate website can benefit from.

The post 8 CSS & JavaScript Snippets for Card UI Hover Effects appeared first on Speckyboy Design Magazine.

People love the simplicity of a pick-up-and-play game. They also love the childhood memories associated with old school titles. Plus, the thought of making new memories by playing with friends and family is still a strong draw.

Designers in particular seem eternally gaga over the likes of Mario, Pokémon, and Sonic. In fact, a jaunt through CodePen shows us there are several odes to classic video games made with good old HTML5, CSS, and JavaScript. Here are 10 of our favorites:

CSS Q*bert

The strange little orange creature named Q*bert was all the rage back in the 1980s, even starring in his own Saturday morning cartoon. While this is just a CSS animation, any mention of Q*bert is a good thing.

See the Pen CSS Q-Bert by Patrick Cox

Enduro HTML5 Game

Enduro is a racing game originally released back in 1983 for the Atari 2600. No worries if you don’t have a spare cartridge at home – you can play a recreation of the game with this HTML5 version!

See the Pen Enduro – Atari – Html5 Game by rafaelcastrocouto

Media Query Super Mario Bros.

CodePen is absolutely full of Mario-related goodness. Unfortunately, there’s no way to spotlight all of them. But Media Query Mario is one of the coolest tributes we’ve seen. It’s an animated remake of Super Mario Bros. 3. The only catch is that you have to resize your browser to between 320 and 420 pixels to watch.

See the Pen Media Query Mario by Ashley Watson-Nolan

CSS Sonic the Hedgehog

Nothing said Sega like good old Sonic. Originally introduced back in 1991 for the Sega Genesis console, the little blue guy sped his way into many hearts (where, like Mario, he still resides). He’s also kept up his endurance, as seen in this CSS animation.

See the Pen CSS Sonic the Hedgehog 2:Chemical Plant Zone by Ryan Petersen

The Legend of Zelda

Zelda was one of those games you could play for hours on end. Thanks to the original’s battery backup included on the cartridge, it was one of the few games of the era that let you save your progress. Here we see Link repurposed nicely for a 404 screen.

See the Pen Retro Error 404 – Zelda 2 by Stix

Asteroids

A true classic, Asteroids goes all the way back to 1979. And it’s still just as addictive as it was back in the day. It goes to show fancy graphics only get you so far. You can play right from your browser with this HTML5 Canvas version.

See the Pen Asteroids by Artem N

HTML5 Pac-Man

The little yellow dot-eater is one of the most recognizable game characters of all time. He (and later, his lady friend) became an arcade sensation. Here, you can chew up dots and outrun ghosts in your browser with this fun HTML5 offering.

See the Pen HTML5 Pacman by hellokatili

Galaxian

Another spaceship shooter from the ‘70s (1979, to be exact), Galaxian was one of the rare games for its time that was as fun to play at home as it was in the arcade. The otherworldly sound effects were great for driving parents to insanity. Here’s a HTML5/JS edition.

See the Pen Galaxian by adonis domingues vieira

JavaScript Pong

If you had Pong in your home, you probably got bored after about 20 minutes. But, as one of the first really significant video games, it paved the way for everything to come. Enjoy a JS version of the game below.

See the Pen Pong game with JavaScript by Gabriel Dubé

HTML5 Canvas Pokémon

Pokémon is the second best-selling game franchise of all time – trailing only Mario. From its humble beginnings for the Nintendo Game Boy, all the way to the hysteria of Pokémon Go, the franchise has remained a cultural phenomenon. Below is a decidedly retro HTML5 Canvas game.

See the Pen HTML5 canvas games – POKEMON ! by panagiotis vourtsis

Going Back to the Future

It’s amazing to think that, decades after their debuts, these games still resonate. But not only are the examples above a testament to the power of classic games, but it also shows how far web development has come in a relatively short amount of time.

Complex games and animations can now be created on the web with just a bit of code. Now, who’s up for some Pac-Man?

The post 10 Retro Video Games Recreated with HTML, JS & CSS appeared first on Speckyboy Design Magazine.

Plus, you wouldn’t want to treat your login area as an afterthought.

There are a number of password-related snippets worth checking out. Below, you’ll find a combination of aesthetically pleasing, unique, and functional snippets that range from simple password fields to utilities that will generate secure passwords for your users.

Checking Password Requirements

One of the most frustrating situations for a user is when a password isn’t strong enough, but it isn’t clear what they need to do in order to meet the requirement.

With this example, we have a field that uses JavaScript in conjunction with a listing of requirements to automatically “check off” each item as you type. This snippet is actually a few years old, but still a great example of providing users with the information they need.

See the Pen Better Password Form by Tony Montemorano

Hide & Show Me Password

When we’re creating complicated passwords, it can be quite useful to see what it is we’re typing. So often, fields that offer this feature do so with an eyeball icon or some other non-verbal method.

What’s nice about this particular login form is that it actually says “Show Password” on the password field toggle. It’s never a bad idea to make things as obvious as possible.

See the Pen Hide &Show password with AngularJS by Bryan Miner

The Password Genie

There are plenty of choices out there if you want to randomly generate a password. But what makes this Vue.js example so cool is that you have a user-friendly options panel for selecting the length, number of digits, and symbols.

There’s also a real-time strength meter, the ability to generate password after password, and click-to-copy functionality. What else could you possibly need?

See the Pen The Password Genie – Vue.js by Nour Saud

Wrong Password? Get Outta Here

Micro-interactions are sort of a big deal these days, and this password field uses them in a creative manner. Enter in the wrong password, and the lock icon swings, pendulum-like, and “kicks” the invalid entry away. It’s mainly for fun, but interesting nonetheless.

See the Pen Kick out the wrong Password by Amit Soni

Create Random Passwords

If you’re in a situation where you need to generate several passwords, you will love the functionality of this example.

Set the number of passwords you want to generate, how many characters they should be and even list the characters you want the generator to use. And, oh yeah, you can even save your password list as a text file or print it out. What a time saver!

See the Pen jQuery | Random Password Generator by Tobias Bogliolo

Confirm & Validate Password

In scenarios where a user is either registering or changing their password, adding a second confirmation field is pretty standard practice.

This form takes it a step further by adding several features, including the ability to show/hide the input text, a strength meter and a check to make sure the password in both fields match. The only suggestion here would be to also display the requirements for a “strong” password.

See the Pen Password Strength validator by Nodws

Super Secret Password Generator

When you combine interesting design and solid functionality, you’re on to something good. This password generator offers up a great mix.

It can be configured by clicking the various icons at the bottom of the form (the features do work in the example) – that’s the functionality portion. The UI is also very slick, using animation to make the whole experience feel more interactive.

See the Pen Super Secret Password Generator by JP Nothard

Just Like the Movies

This last selection is purely for entertainment purposes. This snippet is a tribute to all of those movies and television shows that have made password cracking look like a futuristic endeavor.

To use it, just click as the random characters pass by – once for each spot in the password. The result is a fully “cracked” password!

See the Pen Bruteforce Hacking Simulator by Marco Fugaro

Password:Protected

There you have it, a mix of password fields that can enhance usability and maybe even the security of your next project. Not to mention some interesting password generation tools that can help you create better passwords and do so in short order. Now, just don’t share them with anyone!

The post 8 Password Field Forms Built with CSS & JavaScript appeared first on Speckyboy Design Magazine.

While chat has changed quite a bit since those early days, it’s still every bit as relevant. Only now it has become a staple of customer service and team Slack channels.

And communication has been further improved by the latest CSS and JavaScript techniques. They allow for creating amazingly interactive UIs, while providing more advanced functionality as well.

Today, we’ll show you eight interesting and unique chat UIs. They’re so great, you might even LOL.

Messaging App UI with Dark Mode

Facebook Messenger is wildly popular and it’s no wonder developers are looking to imitate it. The look is simple, effective and instantly-recognizable. Here’s a remix that includes an ever-so-trendy dark mode option.

See the Pen Messaging App UI with Dark Mode by Aysenur Turk

Direct Messaging

Glassmorphism is a popular look these days. Here, a touch of its style is used to liven up this private messaging UI. Thankfully, the result is miles away from the boring, plain-text chat apps of the past.

See the Pen Daily UI #013:Direct Messaging by Fabio Ottaviani

MSN Messenger Visual Demo with WebComponents

Speaking of the past, this UI snippet recreates the look of MSN Messenger. It’s pretty authentic, right down to the chunky 3D icons. Not only does this show how far we’ve come, but it’s also a nice exercise in using modern styling to bring back an old favorite.

See the Pen MSN Messenger 7.5 Visual Demo with WebComponents (HTML+CSS+Javascript) by Manz

Floating Website Chat Button

Here’s a trend we’re seeing just about everywhere. The “floating” chat UI that’s uncomfortably stuck on the bottom right of the screen. Click the button and start typing away. It certainly is handy, especially for sales and support purposes. Just beware:you’re probably talking to a bot, rather than a real human.

See the Pen floating website chat button (intercom inspired) by neil kalman

Mock Chat Animation

Perhaps you’re in the beginning stages of a chat-based project and haven’t fully figured out the UI just yet. No worries, as this mock chat animation snippet can serve as a solid stand-in. The demo is clean, colorful and inspiring. That makes it perfect for wireframing.

See the Pen Mock Chat Animation by Jacob Foster

Stylish Chat Window Design

For those who use chat to provide customer support, it’s likely that you’re dealing with multiple conversations. This UI snippet provides a solution in the form of neatly-arranged windows. Each one can be minimized and maximized. Notice the status indicator icons within the title – making it easier to see what’s going on.

See the Pen Stylish chat window design by Mamun Khandaker

Simple Chat UI

Like most design-related things, simple is often better. Chat UIs can become littered with goofy effects and unreadable fonts. But not here. Instead, this “Simple Chat” is intuitive. Best of all, you won’t need to zoom in to read it.

See the Pen Simple Chat UI by Sajad Hashemian

Club Command Line

There’s no rule that says chat has to be a text-only experience. Certain instances may call for something a bit more fun. And that’s exactly what this video game-like chat UI does. Use your arrow keys to move your character around and chat up a storm. If you want to keep better track of the conversation, the “View Chat” button pulls up a text archive.

See the Pen Club Command Line by Jon Kantner

BRB, Building a Better Chat UI

With so many cutting-edge technologies available, there are a world of possibilities for chat UIs. Yet, the overall goal should be the same. No matter what bells and whistles we add to the mix, the idea is to create something that’s easy to use and understand.

The other lesson here is that the design choices we make should be based on need. For example, some of the snippets above would be great for an online gaming community – but not so much for a corporate sales channel. A user interface works best when it reflects the people it will serve.

The post 8 CSS & JavaScript Snippets for Creating Chat UIs appeared first on Speckyboy Design Magazine.

Accordions are also evolving quite a bit. Thanks to advancements in CSS and JavaScript, it’s now possible to go well beyond the standard UIs we’re used to seeing. Everything from animation to alignment can be tweaked to create something unique.

Today, we’ll introduce you to eight accordion UIs that showcase what can be achieved with modern coding techniques. Let’s get started!

Pure CSS Horizontal Accordion

Accordion UIs have traditionally been vertical – but no rule says things have to stay that way. This horizontally-oriented snippet reveals content on hover. Even better is that there’s no JavaScript required.

See the Pen Pure CSS Horizontal Accordion by Aysha Anggraini

Funky Pure CSS Accordion

CSS both powers and styles this accordion, turning it into an interactive event list. Animation is used to aid in tab transitions and introduce decorative icons. Overall, it’s a slick UI and demonstrates that accordions can be both useful and beautiful.

See the Pen Funky Pure CSS Accordion by Jamie Coulter

Minimal Accordion in React

JavaScript libraries such as React are also fertile ground for building accordion components. This attractive snippet features smooth animation and a minimal design. It’s a perfect fit for modern web applications.

See the Pen Accordion – React by Matthew Vincent

Native Accordion with <details>by Giana

With the details HTML element, you no longer need other languages to create an accordion UI. As in this example, CSS is merely used as a way to enhance the styling. This native feature means great performance and more accessibility. Oh, and it’s also supported by all modern browsers!

See the Pen Native accordion with <details> by Giana

ARIA Accessible Accordion

Accessibility is a prime concern for all UI elements. For accordions, the focus is on more than just having readable fonts and acceptable color contrast ratios. The ability to navigate each section via keyboard is also important – which is where this snippet comes in. By using the TAB and ENTER keys, it’s possible to go through each section and consume its content.

See the Pen ARIA Accessible Accordion by Kiri Egington

Gracefully-Degrading <details>Accordion (Vanilla JS)

As we previously mentioned, an HTML-powered accordion is possible via the details element. However, the user experience can still be enhanced. Here, CSS and vanilla JavaScript has been used to add animation and calculate each section’s height. If a user doesn’t have JavaScript enabled, the UI will gracefully degrade.

See the Pen Gracefully-degrading <details>accordion (Vanilla JS) by Keith Pickering

Pure Accordion CSS

This pure CSS accordion demonstrates what a few clever design features can add to the mix. The author makes great use of typography to ensure that each section’s title stands out. In addition, hashtag links are used to theoretically take users to related subjects. There are a lot of possibilities to fit into a relatively tiny space.

See the Pen Accordion by Tuna

Responsive CSS Accordion Gallery with Zoom Animation

An accordion-based photo gallery? Not only is it possible, but also very nicely implemented in this snippet. There’s a lot to explore:CSS image filters, hover effects and transforms make for a compelling UX. Despite all of that goodness, the amount of code behind the scenes is minimal.

See the Pen accordion gallery zoom animation (css, responsive) by Daniel Subat

Bring Out the Accordions

Accordion UIs have withstood the test of time. Thankfully their looks have finally caught up to their utility. Designers can take advantage of the latest CSS to achieve virtually any style, while JavaScript can add advanced functionality.

Perhaps the biggest revelation is the ability to create these interfaces using native HTML. This puts compatibility and accessibility at the forefront. It also ensures that we’ll be adding accordions to our projects for years to come.

The post 8 CSS & JavaScript Snippets for Creating Accordion UIs appeared first on Speckyboy Design Magazine.

As for styling, there’s a whole world of possibilities. We can use the power of CSS and JavaScript to build quote UIs to fit our desired aesthetic. Everything from subtle typographic layouts to interactive presentations is possible.

With that in mind, here are eight compelling ways to present quotes on your website. There is a style here to fit just about every need.

Quote Particle Animation

If you want quotes to take center stage, this snippet is a prime example of how to do it. The slick particle animation background looks stunning. But it doesn’t distract from the text overlay. It’s also a slideshow, as clicking on the presentation loads a new quote.

See the Pen Quotes animation made by particles by isladjan

Water Effect Quote Animation

You might say that the water effects in this quote are pretty immersive. Bad puns aside, the animation does a great job of adding context. Readability may be a concern, however. That could be cleared up with a few code tweaks.

See the Pen Become the Cup by Shane Burns

Quote Sliding Cards

Here’s a stylish way to fit multiple quotes into a small area. This quote card allows you to click through entries one at a time. It’s perfect for those who want a compact and understated look.

See the Pen Quote cards by Sabine Robart

Variable Font Quote

This snippet uses a variable font to create a smooth transition between character styles. The GSAP-powered animation targets each word, encouraging users to read along. It’s a simple formula that creates a bold look.

See the Pen Bricks by Cassie Evans

Flexible, Full-Width, and “Justified” Text Blocks

The use of justified text brings a clean, blocky aesthetic to quotes. Here, the effect is combined with varying text sizes to make for a more interesting presentation. It also scales beautifully to fit smaller screens.

See the Pen Flexible, Full-Width, Justified Text Blocks by Reuben L. Lillie

Scrolling Quote UI

This scrolling quote UI is the total package. The typography is attractive and easy to read. Its use of color creates noticeable contrast. And the blurred scroll effects add dramatic flair. What else could you want?

See the Pen Design brings challenges into focus #Codevember by Andrew Sims

Simple & Pretty Blockquotes

It’s hard to go wrong with simplicity. This snippet happens to lack fancy effects. But it more than makes up for it with detail-oriented spacing and typography. The result is a timeless look that could fit with any design.

See the Pen Simple, Pretty Blockquote by Mark Sottek

Random Quote Machine

Within this snippet’s well-worn cover are pages of quotes. The book-inspired design allows you to elegantly navigate between pages. The included social sharing buttons are a nice touch that can be changed to suit.

See the Pen Random Quote Machine by Skybird Trill

Ways To Make Your Website Quotable

Web designers no longer have to settle for boring quote presentations. The examples above demonstrate a wide range of use cases. And experimentation with layouts and special effects only adds to the possibilities.

No matter the look and functionality, you can use CSS and JavaScript to make it happen. What’s more, quotes can also be the star of the show. Advanced techniques turn them into a centerpiece, rather than a bit player.

The post 8 CSS & JavaScript Snippets for Stylish Quotes appeared first on Speckyboy Design Magazine.

They also serve as a cultural marker of sorts, helping us define an era. For example, Star Wars has come to define the late 1970s and early 1980s. These days, the title of Stranger Things has forged its own signature.

Thus, it’s no wonder that web designers use title sequences as a proving ground. By recreating their favorites in CSS and JavaScript, they’re sharpening their skills and paying tribute.

Let’s have a look at eight famous titles that designers felt worthy of imitation. Some are spot-on facsimiles, while others use a bit more artistic license. But they’re all worth celebrating in our book.

The post 8 CSS & JavaScript Snippets for Recreating Iconic Titles appeared first on Speckyboy Design Magazine.