While the number of available variable font packages is growing, the selection isn’t huge just yet. And then there’s the whole issue regarding lack of support in older browsers. But those limitations aren’t going to last much longer. Thus, it’s a good idea to study up now.

We’ve collected some fantastic variable font examples to help demonstrate what is possible. Just note that to actually see these examples in their full glory, you’ll need to use the latest version of Chrome, Edge, Firefox, Opera, or Safari.

Running Free

Glyphs are kind of a big deal these days, with the likes of Font Awesome and Dashicons being in such wide use. In this example, a variable font with a single glyph of an emoji horse was used to create a nifty animation. Through the use of CSS font-variation-settings, the author was able to ensure an ultra-smooth effect.

See the Pen Muybridge galloping horse by Laurence Penney

Animate Your (Font) Weight

One of the big advantages of having the entirety of a font’s styles in one file is that you can transition between them in a snap. In this case, we see a highly-detailed and mesmerizing animation between different weights of the IBM Plex Sans font.

See the Pen Variable font animation by Michelle Barker

Interactive Art

Here’s an example of a variable font being used as part of a larger piece of online art. Instead of animating a single word or headline, this snippet mimics a poster – albeit an animated one. The transition from hollow characters to filled (and back again) is truly slick. The sequencing is spot on. Years ago, this might have taken hours of tedious work in Flash to accomplish.

See the Pen Variable Font Experiment No.2 by Mark Frömberg

Style Slider

Perhaps no snippet in this collection better demonstrates what a variable font is than this one. Use the sliders at the bottom of the screen to add custom weight, stretch and sizing to the Venn VF font. Notice the ease with which the settings changes are displayed.

See the Pen Variable font demo by Frida Nyvall

Have It Your Way

At first glance, this example looks like a nicely formatted poem. But there’s more than just a basic title and text here. Click on the “Jigger the First Stanza” and “Rejigger Title” buttons to the right, and you’ll be in for a treat. Font styles change fluidly and instantaneously. And it’s a great demonstration of how individual characters can be targeted as well.

See the Pen Goblin Market with Variable Fonts by Chris Coyier

The Full Effect

When you combine variable fonts, CSS3 and JavaScript, great things can happen. And you don’t need to look further than this example to see why. This attractive text has a delightful stretchy hover effect, which is cool on its own. But change the included settings panel, and you’ll get an even more in-depth sense of what is possible.

See the Pen Variable Fonts | Compressa by Juan Fuentes

So Slinky

Let’s close things out with something unique. This snippet uses the WHOA variable font to create an incredible 3D effect that shifts the view of this outline text based on your cursor position. Again, this is something that, a few years ago, would require some serious animation software to achieve. Now, the different perspectives are built right into the font. From there, it’s a matter of using some clever coding to put it in motion.

See the Pen Slinky Text – WHOA Variable font demo by Jérôme Sprenger Sèvegrand

A New Era in Typography

With variable fonts, web typography has become an even greater resource for creating a compelling UX. Thanks to their ability to instantly change styles and target specific characters through data splitting, a whole new level of special effects are possible.

As the examples above demonstrate, there is plenty of room for creativity. And what’s really exciting is that the fonts themselves have so many goodies baked right in.

That being said, we’re really just beginning to scratch the surface of what these fonts can do. It will be amazing to see what the future brings.

The post 7 Fantastic Examples of Variable Fonts in Action appeared first on Speckyboy Design Magazine.

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.

So, what exactly is a Bento layout? Think of it as a puzzle. Different-sized containers fit together to create a seamless look. Inspired by Japanese culture, it’s popping up all over the web.

There’s good reason for Bento’s growing popularity. You can use these layouts in a multitude of ways. Everything from listing blog posts to product features is possible. They’re also perfect for dashboard screens.

We should also mention the role that the evolution of CSS has played. Both CSS Grid and Flexbox make these layouts easier to build. No hacks or workarounds are necessary!

With that, here’s a look at 8 beautiful Bento grid layouts.

Complex Bento CSS Grid Layout

CSS Grid packs a lot of power into a tiny bit of code. For example, this complex grid layout requires only 43 lines of CSS. The layout is both efficient and naturally responsive. Therefore, you won’t have to play around with media queries.

See the Pen Complex Bento Layout

Bento-Style Responsive Dashboard

Here’s a gorgeous dashboard layout that benefits from Bento. The layout offers a great way to display relevant content. Everything is neatly organized and easy to follow. The use of photography and color makes this example stand out.

See the Pen Responsive Dashboard | Bento Style by Ecem Gokdogan

Bento Design Concept Layout

This page layout is a different take on the Bento aesthetic. There’s a sidebar featuring in-page navigation. Clicking a button expands it. Meanwhile, the content container maintains a consistent height.

See the Pen bento design concept by Abhishek Bhardwaj

Bento-Box-V1.0.1

Bento layouts also benefit from minimalism. This layout features fewer bells and whistles. Notice the use of white space and legible typography. The animated charts catch your eye without being overwhelming.

See the Pen Bento-Box-V1.0.1 by Gwenaël Guiraud

Sticky Bento on Scroll

This “sticky” presentation adds special effects to the mix. Watch how certain elements stick as you scroll. The idea is that you can go beyond static grids. Bento can be fun, too!

See the Pen Sticky Bento on Scroll ✨ by Jhey

Bento Grid Using CSS Flexbox

Let’s check out another fun example using Flexbox. This grid has a neon look and includes cool hover effects. Bonus points here for maintaining legibility and responsiveness.

See the Pen bento grid – challenge (Chrome +111) by EaterUsr

Card-Based Layout with Gradient Borders

Here’s an example for those wanting to stand out from the crowd. This card-based layout features animated borders, “wipe” effects, and beautiful hover styling. The layout remains clean – even with all those goodies.

See the Pen Cards (gradient border) by Dan

CSS Grid & :has() Grid Layouts

We can achieve a lot with the CSS :has() pseudo-class. This example uses it to adjust the layout as boxes are added and subtracted. Watch as the layout maintains perfect symmetry throughout.

See the Pen Always great grid – CSS grid + :has() + view transitions by Adam Argyle

Use Bento Grids to Keep Your Layout Nice and Tidy

The idea of using Bento aesthetics in web design isn’t new. However, older CSS layout techniques made them difficult to build. That’s no longer the case.

Perhaps the best part is that modern CSS does all the dirty work. We don’t need to compute complex calculations. CSS Grid and Flexbox can do this for us.

That leaves us free to experiment. The examples above demonstrate what is possible. And you can get as creative as you like.

Want to see more Bento grid examples? Check out our CodePen collection!

The post 8 CSS Snippets for Creating Bento Grid Layouts 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.

And patterns are no longer limited to graphics. CSS offers a surprisingly powerful way to design them.

There are a few advantages to building patterns via CSS. Performance is a big factor, as there are no additional images to load. Second, these patterns can be further manipulated to include features such as animation and masking. What’s not to love?

We’ve put together a collection of unique patterns that were created with pure CSS. Keep reading to see what’s possible when you combine code and imagination!

You might also like our collection of CSS snippets for texture effects.

CSS-Only Wavy Pattern

This fun pattern consists of a mere 14 lines of CSS. Radial gradients are combined with the calc() function to create repeating shapes. It’s also worth noting that this pen’s creator, Temani Afif, is a prolific author of CSS patterns. There’s plenty more to explore.

See the Pen CSS only wavy pattern by Temani Afif

Repeatable Pattern Design with CSS

Here’s another example of how much can be accomplished with minimal code. Like many snippets in this collection, gradients are front and center. The pattern looks rather complex, but could easily work as a page background with a few tweaks.

See the Pen css pattern design by Naresh

Gradient CSS Pattern

This bright pattern is deceptively complex. Look closely and you’ll find polygons, gradients, and some clever opacity tricks. It’s the sort of background that would have required some serious Photoshop skills back in the day.

See the Pen CSS pattern by Justyna J

Pure CSS Blue Plaid Pattern

Plaid patterns are notoriously intricate. That makes this attractive snippet even more impressive. Notice how the various lines intersect to create a different effect. It’s so good that it could have been ripped directly from a flannel shirt.

See the Pen Pure CSS pattern:blue plaid (under 500 bytes minified) by Ana Tudor

CSS Frog Pattern

This cute little frog popping up through the water is lighthearted. It would work beautifully on a website geared toward children. And not a single image was needed. There’s a lot of fun to be had with these coding techniques.

See the Pen CSS Pattern Frog by Kaylee Murray

Animated H1 CSS Pattern

A pattern doesn’t need to sit by itself. Its impact can be improved by using it in conjunction with another design element. This reptilian pattern, for instance, is the perfect complement to the animated text. It gives the entire presentation personality.

See the Pen CSS Pattern On H1 (simplified) by CurleyWebDev

CSS Pattern Noise

There’s a fun high-tech aesthetic to this pattern. Reminiscent of waveforms, it could serve as an attention-getting background for a hero area. The top and bottom fade effects might also allow it to work as a page footer.

See the Pen Css Pattern-Noise by Vijay

Bold Pattern with CSS Grid

Here’s a pattern that’s big, bold, and sure to draw you in. It’s also a bit heavier on code than many of the examples here. It combines CSS Grid, gradients, and absolute positioning to put this snippet together. The result is a presentation that speaks just as loudly as any image.

See the Pen CSS-Pattern by Christina Stephan

Coding a Pattern of Success

Perhaps the most amazing aspect of the examples above is the amount of code required to produce them. It is, for the most part, a more efficient process than you might think. The details of these patterns belie the simplicity under the hood.

What’s more, you can fork these snippets and produce wildly different results. All it takes is a little experimentation. Try changing colors, angles, and sizing. The results could surprise you.

The post 8 Code Snippets for Creating Amazing Patterns with CSS 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.

Modern CSS has a way of making things easier. And the drop cap is no exception. It’s now possible to create an attractive and functional element.

No wonder web designers are flocking to them. They add a professional and elegant touch to blog posts and long-form content. Drop caps are capable of more than you might think. Here are eight unique implementations that show what’s possible.

Beautiful Book Layout with Drop Cap

Let’s start with a nod to the drop cap’s lineage. This snippet recreates a book layout – complete with beautiful typography. The drop cap uses a CSS float, along with the :first-letter pseudo-element, to position the letter.

See the Pen Book Layout by Erin E. Sullivan

CSS Houdini – Simple Generative Drop Caps

Here’s a fun example of web technologies dressing up a single character. Each time you refresh the page, the background of this drop cap changes. This generative effect is powered by CSS Houdini. Let’s see a printed page beat this one.

See the Pen CSS Houdini – Simple Generative Drop Caps! ✨ by George Francis

CSS Drop Cap Numbers

Drop caps aren’t only for paragraph text. They can also add a dimension to other HTML content. Here, a colorful character dresses up an ordered list element. You might use a similar effect to make multi-step instructions easier to follow.

See the Pen DropCap Nubers by Thom Epps

Huge Drop Cap CSS

Drop caps often fit within the first few lines of a paragraph. But this snippet aims to go bigger. A giant red character towers above the rest of the text. And it also serves as a background. It’s an attention-getting look. But some accessibility tweaks would help with legibility.

See the Pen Big Drop Cap by Noah Blon

Beautiful & Accessible CSS Drop Caps

How do drop caps impact accessibility? A poor implementation could make it harder for users of screen readers. These examples demonstrate a couple of ways to keep the characters accessible. One uses a pseudo-element, while the other hides a copy of the decorative element.

See the Pen Creating Beautiful and Accessible Drop Caps (Completed) by Aquent Gymnasium

Accessible Drop Cap Examples

Keeping with the theme of accessibility, here are three drop-cap examples. In this case, author Adrian Roselli recommends the third implementation. It’s the only one that is CSS-only. There’s also a companion article that digs into the options.

See the Pen Accessible Drop Caps by Adrian Roselli

Styling an Ornate Letter Drop Cap

Positioning a drop cap can be a challenge. For example, getting the character to look good with paragraphs of various lengths is tedious. This example uses CSS transforms to account for the paragraph’s line height. The idea here is to create more predictable results.

See the Pen Styling an Initial Letter “Drop Cap” by Andy Hullinger

Drop Cap Ordered List Grid

Here’s a simple CSS snippet that makes ordered list items stand out. First, it uses the CSS counter() function to enumerate each item. Then, it uses CSS pseudo-elements to add bold styling to the digit. The use of CSS Grid ensures that the presentation is responsive.

See the Pen dropcap-grid ol by Stephen Lindberg

Dropping Some CSS Style Into Your Text

It’s easy to see why drop caps have become commonplace. First, they add creative flair to plain text. Plus, they can help make long passages of text more intuitive. They can also serve as an extension of your brand.

And CSS offers multiple options for adding drop caps to your layout. The examples above demonstrate what’s possible. You can create beautiful characters that maintain accessibility. What’s not to love?

The post 8 CSS Snippets for Creating Stylish Drop Caps appeared first on Speckyboy Design Magazine.