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 by Aysenur Turk

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

Daily UI #013:Direct Messaging by Fabio Ottaviani

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 7.5 Visual Demo with WebComponents (HTML+CSS+Javascript) by Manz

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 (intercom inspired) by neil kalman

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 by Jacob Foster

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 by Mamun Khandaker

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 by Sajad Hashemian

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 by Jon Kantner

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 by Aysha Anggraini

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 by Jamie Coulter

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 by Matthew Vincent

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 by Kiri Egington

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) by Keith Pickering

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 by Tuna

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 by Daniel Subat

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 by isladjan

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 by Shane Burns

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 by Sabine Robart

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 by Cassie Evans

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 by Reuben L. Lillie

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 by Andrew Sims

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 by Mark Sottek

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 by Skybird Trill

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 Ways To Dress up Quotes With CSS & JavaScript 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.

But what if you want to implement a Bokeh aesthetic without photography? There are some unique methods for doing so.

Web designers are using CSS and JavaScript to create all manner of Bokeh-inspired effects. You’ll find the familiar blurry lens flare from photos. But there’s also the addition of movement, generative UIs, and plenty of artistic license being used.

Here are eight examples of Bokeh effects powered by code. There may be some similarities on the surface. But look closely, and you’ll also discover how detailed these presentations are. Let’s get started!

The post 8 CSS & JavaScript Snippets for Creating Beautiful Bokeh Effects appeared first on Speckyboy Design Magazine.

With more complex coloring and special effects, designers can leverage borders to draw attention to important information. They can also play a role in user engagement and microinteractions.

With that in mind, let’s take a look at some examples of borders that are further enhanced with the best that CSS (and maybe a little JavaScript) have to offer.

The post 8 CSS Code Snippets for Creating Stunning Border Effects appeared first on Speckyboy Design Magazine.

Consider the nearly endless array of colors and grain patterns. They provide us with plenty of room for customization. In addition, we can even go beyond what we see in nature.

But wood is more than just a background player. Designers are using also using it front and center in their presentations. Wooden objects can be the star of the show. And when combined with CSS and JavaScript, some incredible effects can take things to the next level.

Today, we’ll show you eight CSS and JavaScript snippets that creatively use wood textures. You might be surprised by what you see. Let’s get started!

Glass & Wooden Pegs WebGL Fragment Shader by byt3_m3chanic

This trippy interactive animation uses shaders powered by WebGL. The glass and wood textures were generated via mathematical equations. Amazingly, no external libraries or frameworks are being used here.

See the Pen Glass and Wooden Pegs / WebGL Fragment Shader by byt3_m3chanic

CSS 3D Guitar with Texture Variation by S. Shahriar

We mentioned all the potential variations that wood offers. This customizable guitar serves as proof. Use the controls to change the color and tweak the viewing angle to your liking. The look is incredibly detailed, while the animation is silky-smooth.

See the Pen CSS 3D Guitar with 5 texture variation 🎸 by S. Shahriar

Radio Buttons With Marble & Wood by Jon Kantner

On the surface, this is a rather simple form using styled radio buttons. But it’s also a clever way to blend the form’s UI into the woodgrain background. As you click on different options, the little blue marble “drops” into place – similar to a game of Chinese checkers.

See the Pen Radio Buttons With Marble and Wood by Jon Kantner

CSS Wooden Collector’s Cabinet by Lynn Fisher

The sheer volume of textures here is impressive. This wooden knick-knack shelf features tons of objects – all of them using unique textures. As you might expect, it takes quite a bit of CSS to power this snippet. The source code shows over 2,000 lines of it!

See the Pen CSS collector’s cabinet by Lynn Fisher

The Pool Table by Joshua van Boxtel

Care for a game of billiards? This interactive pool table makes wonderful use of wood. Between the textures on the table and flooring, it creates an authentic look. And the fact that you can play the game makes it all the more fun.

See the Pen The Pool Table [CPC – Bump] by Joshua van Boxtel

CSS Old TV Set by Roque Ribeiro

This example creates a full-room aesthetic. The lighting effects are outstanding, with the old-school television and wooden stand casting shadows. It’s almost like taking a step back in time!

See the Pen CSS OLD TV by Roque Ribeiro

Rotating To-Do List by Mark Boots

You might be surprised that the rotating sign in this snippet was built using an unordered list (UL). Equally as impressive is that it uses pure CSS – no JavaScript necessary. The wood texture ties it all together with a realistic look.

See the Pen cpc-list-styles | UL directions by Mark Boots

Wooden Scrabble Tiles by Ryan Mulligan

Scrabble players will love these wooden letter tiles. The presentation uses Splitting.js to power the animation. It all makes for a fun and instantly-recognizable sight.

See the Pen Splitting Demo – Scrabble Tiles by Ryan Mulligan

Wooden Wonders Enhanced With Code

Natural looks like wood don’t represent a massive trend in web design. But in a way that makes them more powerful. When you come across a website that uses them, it tends to stand out.

The examples above all add elements of depth and texture. They’re also able to create a different mood than run-of-the-mill flat designs.

Perhaps they’re not a match for every type of website. But in the right instance, it’s an excellent option for going against the grain.

The post 8 CSS & JavaScript Snippets That Feature Wood Textures appeared first on Speckyboy Design Magazine.

As it turns out, you can accomplish some pretty amazing things when combining code and hand-drawn elements. For instance, you might use SVG animation to make it appear that the element is being “drawn” in real-time. Or you can add a touch of sketch art to something more modern. The sky is the limit.

Today, we’ll show you some examples of how hand-drawn elements (authentic or simulated) can be enhanced through code. Enjoy!

Crowd Watching by Szenia Zadvornykh

Watching this animation is reminiscent of sitting on a bench in the middle of a crowded city. Various quirky characters walk about at a healthy pace. The use of JavaScript turns this collection of illustrations into a moving piece of art.

See the Pen Crowd Simulator by Szenia Zadvornykh

Outstanding Flow by Daniel

Flow fields are a type of generative, grid-based art that allows for some stunning creations. Highly-detailed works that look as though someone spent hours drawing each and every stroke by hand. This snippet features a control panel that enables you to tweak background color, speed, and more.

See the Pen Flow Field Drawing by Daniel

Not-so-Useless Sketches by Sarah Drasner

Here’s a fun animated drawing that uses everyday objects to spell out the word “Useless.” It’s a bit of a misnomer, as this snippet is a great example of how the GSAP library can be used to enhance artwork.

See the Pen A Tribute to the Useless Web by Sarah Drasner

Chalkboard Menu by Josetxu

If you have a favorite coffee shop or café, chances are you’ve witnessed the casual elegance of a chalkboard menu. Sometimes a bit messy, but always filled with good stuff. This snippet brings a similar charm to your screen, complete with hand-drawn fonts and funky borders.

See the Pen Cafe Menu Layout by Josetxu

Write Your Name in Style Craig Roblewsky

Handwritten text animations are among the more popular use cases for adding character to a design. This tool makes it even more fun by adding a hand icon (which can be turned off), along with a number of settings to tweak.

See the Pen Animated handwriting with DrawSVG (GSAP3) by Craig Roblewsky

A Moving Mural by ilithya

This virtual mural is like a Yellow Submarine cartoon for the modern age. With bright colors and gentle animations, it’s definitely an attention-getter. Even more impressive is that it’s built with pure CSS.

See the Pen Multi-Screen Mural for JSConf EU 2019 by ilithya

Hand-Drawn 404 by Sarah Frisk

As this snippet proves, there’s nothing wrong with having a little fun on your 404 page. A silly alien character is drawn with crayon-like strokes. From there, it features a choppy CSS animation that brings a bit of a homemade vibe.

See the Pen 404:Players Not Found by Sarah Frisk

Draw It Yourself by Gemma Stiles

Nothing says “hand-drawn” quite like the Etch a Sketch. Master the classic toy’s unorthodox knobs, and you can draw something incredible. Here, an online version works by using your keyboard’s arrow keys. Oh, and you’ll hit the “CLEAR” button instead of shaking to start over. Even if you’re not a great artist, you should be able to create some fun block lettering.

See the Pen Etch A Sketch 🖌 by Gemma Stiles

Two Diverse Artforms Coming Together

Whether you’re into drawing, coding, or both – you’re an artist. After all, each allows you to express your creativity in exciting ways.

And, even though these two artforms require vastly different skillsets, they go together quite well. The snippets above are proof that code can bring a new dimension to hand-drawn elements. Movement, interactivity, and other special effects work to enhance the experience.

The post 8 CSS & JavaScript Snippets for Creating Hand-Drawn Elements appeared first on Speckyboy Design Magazine.

For starters, it’s infinitely useful. Using black text on a white background provides the ultimate in accessibility. It’s always a safe bet when designing content.

But it goes beyond mere utility. Black and white can also be used to make a bold artistic statement. It’s perfect when crafting those can’t-miss elements on a website or mobile app.

Today, we’ll show you eight examples of CSS and JavaScript snippets that go all-in on B&W. Here we go!

Mesmerizing CSS Optical Illusion by Mark Boots

A few lines of CSS are all it takes to create this mesmerizing pattern. Conic gradients are used to create the lopsided orientation. Meanwhile, black-and-white boxes bring some visual chaos. Don’t stare at this one for too long!

See the Pen optical illusion by Mark Boots

Sliced Text Effect by Shireen Taj

This snippet also counts as a bit of an optical illusion. It consists of two HTML <div> tags, each containing the same word. CSS is used to overlap them and create the “slice” effect. Perhaps not great for accessibility, but it does make for a standout bit of design.

See the Pen Sliced Text Effect by Shireen Taj

Stroke Logo Animation by Jon Kantner

An animated logo can provide a great way to introduce your brand. But it’s often best to keep things subtle. That theory certainly applies to this beautiful presentation. The simple black-and-white text is revealed gently with staggered layers of stroke animation.

See the Pen Stroke Logo Animation by Jon Kantner

CSS Animated SVG Mum with Cub by Mikael Ainalem

The clever use of SVG makes this mama and baby animation a fun one. Notice how the cub slips underneath mom’s leg, adding the elements of depth and surprise. It may be incredibly simple, but also an attention-getter.

See the Pen Mum with cub by Mikael Ainalem

Black & White Abstract CSS Doodle Animation by Alisa Kin

This animation has a lot of moving parts, but surprisingly little code running it on the surface. That’s because it uses <css-doodle>, a web component that assists in drawing CSS patterns. In addition, each click produces a new version.

See the Pen Black and White Abstract CSS Doodle Animation by Alisa Kin

CSS Animated Gambit Squares by Chris Gannon

Inspired by a sequence in The Queen’s Gambit series, these rotating boxes would be the perfect complement to a logo or hero area. And because it’s built with SVG, it will look sharp at any size.

See the Pen Gambit Squares by Chris Gannon

Black & White Scrolling Effect by Crianbluff

Black and white contrast is in full effect here. As you scroll, the text instantly changes color, depending on the background. The secret sauce is CSS mix-blend-mode, which ensures black changes to white and vice-versa.

See the Pen Effect black & white scrolling by Crianbluff

Vertical Image Loop with Scroll Acceleration and GSAP by Cameron Knight

Finally, we can’t forget about the power of black-and-white photography. It’s put to good use in this scrolling photo gallery. The faster you scroll, the faster the images move vertically through the presentation. Hovering reveals the full-color image. The CSS blend effects on the text make for a seamless look.

See the Pen Vertical image loop with scroll acceleration with gsap by Cameron Knight

Timeless Colors, Bold Looks

The world is full of color. But when you want to get back to basics, there’s nothing quite like black and white. It offers a classic look that is sure to draw the attention of visitors.

The examples above demonstrate that being basic doesn’t have to mean being boring. Indeed, the use of movement and interactivity kick things up a notch.

The post 8 Black & White CSS & JavaScript Snippets That Make a Bold Statement appeared first on Speckyboy Design Magazine.

These little gems are especially important on eCommerce websites. We can use them to reinforce user actions and remove any chance of confusion. When done right, they fit seamlessly into a design.

What do eCommerce microinteractions look like in practice? We’ve rounded up a collection of unique code snippets that serve as prime examples. They utilize CSS and JavaScript to add something extra to the online shopping experience. Let’s get started!

Animated SVG Icons by Joni Trythall

Icons are used on all manner of websites but have particular importance for eCommerce.

This set of animated SVG animated icons can serve as confirmation for adding products to a cart, wish list, and more. Even better is that each icon has three variations to choose from.

See the Pen Animated Shopping Cart Icons by Joni Trythall

Rolling Shopping Cart by Aaron Iker

The simplicity of this animated button is wonderful. One click and a shopping cart icon rolls in and “fills up” with color. There’s a lot of movement, yet it doesn’t feel the least bit overwhelming. It would fit in with virtually any type of online store.

See the Pen Add to cart animation by Aaron Iker

Add a Product with Text Confirmation by Lance Jernigan

Fans of Google’s Material Design will want to check out this snippet. The look adheres to the design language, while the microinteraction is slick and informative.

Clicking the “Add To Cart” button results in a spinning loader graphic. From there, a text confirmation ensures that shoppers will know that their item has been successfully added.

See the Pen Material Add To Cart Animation by Lance Jernigan

Docking Product Image by Filip Danisko

Looking for a unique microinteraction? This snippet sends a product thumbnail image to a sidebar dock when a user adds it to their cart. And it’s not just for show. Hover on the thumbnail and you can easily remove the product as well.

See the Pen Add to cart animation by Filip Danisko

Multi-Step Cart Process by Marcus Forsberg

Here’s an example that treats eCommerce as a step-by-step process. Adding a product to your cart brings up an attractive quantity UI. Select the amount you want, click on “GO,” and the fun really begins.

A visual confirmation appears, then floats over to the cart icon on the upper right of the screen. The overall functionality is great, and the animation successfully ties it all together.

See the Pen Add to cart animation by Marcus Forsberg

Going to Checkout by Richik SC

This animated checkout button sends users onto the next step in style. It utilizes a simple CSS animation to confirm their choice and show that the redirection is underway.

See the Pen Animated Checkout Button by Richik SC

Simple Add to Cart Button by Rune Sejer Hoffmann

Simplicity is the name of the game here. Add a product to the cart, and you’ll see a quick change in both the button background color and adjacent icon. This one gets the job done nicely and without any unnecessary theatrics.

See the Pen Ecommerce animations by Rune Sejer Hoffmann

Add and Remove Items by Amirtha Shankari

Here’s a snippet that focuses on the shopping cart icon itself. Adding a product unleashes an animated box icon. It ricochets off the cart as if it were a basketball hoop.

Remove an item and just the opposite happens. While it would be great to see some microinteractions on the buttons themselves, the cart effects are brilliant.

See the Pen Add to Cart Animation by AmirthaShankari

Improving eCommerce through Microinteractions

When it comes to improving the user experience of your online store, microinteractions are a great feature to consider. They’re an easy means to make an instant impact. And, because they often rely on CSS, you don’t have to sacrifice performance.

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