The possibilities have never been greater. Modern CSS and JavaScript allow us to do more than mimic print design. We can use them to add movement and interactivity to the mix. But it goes deeper.

Gradients are no longer limited to container backgrounds. They can also style text content. It’s an opportunity to enhance headlines and calls to action.

So, what kinds of things can you do with gradients? We scanned the archives of CodePen to find eight great examples.

Grainy & Gradients Text Using color-mix by LukyVJ

This snippet uses the recent CSS color-mix property. The property simplifies the process of darkening, lightening, and desaturating colors. The result is a beautiful text gradient that allows the page background to come through. We don’t often associate gradients with graininess. But it works to perfection here.

See the Pen Grainy & Gradients text by LukyVJ

Single Element Gradient Background Patterns by Ana Tudor

Conic gradients add a unique twist to the element. The color transitions rotate around a center point. You can see it on display in this example. Each card sports a unique and intricate pattern.

See the Pen 1 element card background patterns (see description) by Ana Tudor

Animated Radial Gradient Pattern by Loktar

Gradients still make great backgrounds. And this animated presentation demonstrates how far they’ve come. It looks amazing. The relatively few lines of code that powers it are equally impressive.

See the Pen Moving Radial Gradient Pattern by Loktar

Single DIV Radial Gradient Swirl by Adam Argyle

How can a single div element contain so many colors? The magic is in multiple radial gradients. Four gradients start at the edges and meet in the middle. The result is a colorful delight.

See the Pen 4 Corner Radial Gradient Swirl by Adam Argyle

AI Prompt UI with Subtle Gradient by Vincent Durand

Check out the subtle gradient on this artificial intelligence (AI) interface. It cleverly mixes with glassmorphism to produce a unique aesthetic. The effect brings life to the page.

See the Pen Imagica – AI prompt UI by Vincent Durand

Radial Gradient Cursor Trailer by Uzo Awili

Here’s an example of gradients shining a light on a background image. Move your cursor and watch as it casts a bright pink hue. A tiny bit of CSS and JavaScript makes it work.

See the Pen Radial Gradient Cursor Trailer – Using Gradient Positioning by Uzo Awili

Magical CSS Blossoming Flowers at Night Md Usman Ansari

Gradients play a sizeable role in this “magical” snippet. They add dimension and allow the virtual plant life to fade into black. The CSS repeating-linear-gradient function simplifies the effect’s usage.

See the Pen CSS Blossoming Flowers at Magical Night by Md Usman Ansari

Complex Gradient Examples by Drew McConville

Combining multiple gradients into a CSS background can produce compelling results. Scroll through this snippet to see four such examples. You’ll find a mix of colors and gradient types. It may even convince you to do some experimentation.

See the Pen Complex Gradient Examples by Drew McConville

A Fresh Look at a Design Staple

There was a time when designers shied away from gradients. The era of flat design encouraged the use of solid colors. But we rightfully came back to them.

The examples above show that gradients are still a valuable tool. They add flavor to all sorts of design elements. And it seems like designers are constantly finding creative uses.

That speaks to their flexibility. You can tweak gradients in endless ways. Make them as simple or complex as you like.

Want to see even more CSS and JavaScript gradient ideas? Be sure to check out our CodePen collection!

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

And they’re also important for users. Notifications provide details regarding orders, messages, and other account information.

Thus, it’s interesting to see how notification UIs are evolving. Designers are using their creativity and adding personality. They’re proving that notifications can have both form and function.

With that, let’s take a look at eight unique notification UIs. They use CSS and (in some cases) JavaScript to go beyond the basics.

Neon Notification System with hover Effects by CleverYeti

This notification UI is perfect for websites using dark mode. The look is elegant while also being easy to digest. We’ll give bonus points for including some smooth CSS animation effects.

See the Pen Neon notification system by CleverYeti

Vertical Timeline Notifications by Alina N.

Here’s a neat way to organize multiple notifications. This timeline layout makes each item stand out. The spacing between entries keeps things easy to follow. The search field is also a welcome addition.

See the Pen Vertical Timeline – Notifications by Alina N.

Notification Badge Animation by Valery Alikin

Want to add an element of fun? This bright little UI resembles a “Minions” character. And if the colors don’t get your attention, the splatter animation will do the job.

See the Pen Notification Badge Animation by Valery Alikin

Project Notifications by Landon Messmer

Perhaps the “bell” icon is a bit overused. But in this case, it’s more about what’s inside. This notifications panel is beautiful and functional. It features a clean look and some handy features.

See the Pen Project Notifications by Landon Messmer

Error, Success, Warning, and Alert Notifications by Swarup Kumar Kuila

This notification UI brings a simple yet high-tech aesthetic. With bright colors and simple animation, it’s sure to draw attention. It’s powered by CSS, with an assist from the popular Font Awesome icon library.

See the Pen error, success, warning and alert Messages by Swarup Kumar Kuila

Info, Warning, and Alert Site Components by Dom Jay

These notification components are a fit for long-form content. Use them to display important details in an online course. Or as a call-out box within a blog post. Alerts aren’t just for user-specific info, after all.

See the Pen Site Component – Info/Warning/Alert by Dom Jay

Success, Error, Alert Flat Notifications by AbrarK

Click a button and watch as a colorful notification appears. This presentation uses a flat style reminiscent of Facebook and other popular services. It also features some slick animation.

See the Pen Flat Notify by AbrarK

Pop-Up Social Media Notification by Nooray Yemon

Here’s a highly stylized take on a notification UI. It shows that notifications can go beyond utility. They can also be a branding opportunity.

See the Pen Pop up social feed notification by Nooray Yemon

Serve Notice with These Awesome UI Examples

Notification UIs are now a staple of web design. They’re impacting all types of websites. Odds are that you’ll need to consider them in an upcoming project.

We can certainly stick with a generic look. But there’s an opportunity to do much more. CSS and JavaScript enable us to create a unique user experience. The examples above are just the tip of the iceberg.

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

Crafting this look used to require photo editing software. But that’s no longer the case. You can add stunning blur effects using CSS and JavaScript. And it’s easier than you may think.

There is also a wide array of possibilities. You could opt for that simple blur on a photo. But you can also combine the effect with animation and user actions. This allows you to add some creativity to the mix.

With that in mind, let’s explore eight excellent examples of CSS and JavaScript blur effects in action.

The post 8 CSS & JavaScript Snippets for Creating Blur Effects 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 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.

Adding scroll-based effects can be a great way to enhance user experience. That is, so long as they don’t interfere with the ability to navigate through long stretches of content. If anything, effects should make things easier and add a bit of flair to the mix.

Here is a collection of scrolling effects and utilities that will wow your visitors and (hopefully) stay out of their way.

The post 8 CSS & JavaScript Snippets for Adding Scroll Effects to Your Website 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.

The web offers its own unique advantages for infographics: Interactivity and responsiveness. Instead of a plain old graphic, these storytelling elements can become even more user-friendly. Animation can be used to demonstrate an idea. And, infographics built with web technologies can also greatly improve accessibility.

We’ve put together a collection of snippets that aim to do more with infographics. Some may not necessarily feature a traditional composition. But they still seek to make information easier to understand.

Big Steps by Ana Tudor

Outlining a multistep process is something quite common on the web. However, it takes some work to make things easy to understand. What’s great about this snippet is that the numbered steps are both bold and highly detailed. They also degrade nicely on smaller viewports.

See the Pen Responsive infographic/ CSS variables, grid layout (no Edge support) by Ana Tudor

The Wheel of Information by Sarah Drasner

Sometimes, it takes creative solutions to get your point across. This circular chart rotates, outlining various ways to combat climate change. The format is both fun to watch and easy to follow. It also demonstrates how we can go that extra mile to make information more compelling for users.

See the Pen Responsive Animated Infographic. by Sarah Drasner

Interactive Pie by Shalabh Vyas

Simple, intuitive and easy on the eyes, this pie chart makes great use of interactivity. Click on the company logo and its container opens to up reveal more information. It’s colorful and integrates some slick animation.

See the Pen Infographic Pie (SVG based) by Shalabh Vyas

Say It with Stats by Tiffany Rayside

Television news and sports programs love to dazzle us with animated statistical presentations. Here we have a series of animated charts that is reminiscent of what we often see on TV. This snippet utilizes movement and bold styling to grab attention.

See the Pen CodePen Stats InfoGraphic by Tiffany Rayside

Dynamic 3D Chart by Archer

Interactivity is on full display here, as you can adjust both the numbers and colors used on this stunning 3D chart. Pop in a hexadecimal color of your choice for each entry and use a slider to play with percentages. As a bonus, you can also reposition it on the screen!

See the Pen Dynamic Infographic by Archer

Card Game by Sergiu Mocian

This is a really unique way to build an infographic and make it interactive. It’s a series of CSS content cards that are displayed in an overlapping and staggered format. Hover over a card, and an animation reveals more info. You could conceivably make each card clickable, leading users to related content.

See the Pen Infographic smooth cards view by Sergiu Mocian

Clickable Details by Ntara

Here we have an interactive infographic where clicking on an icon loads relevant content within the green sidebar. This type of implementation would be great for a full-screen presentation, allowing users to learn more in an immersive format.

See the Pen Bosma – Interactive SVG Infographic by Ntara

Know Your Coffee by Julie Park

At the most basic level, an infographic should be attractive and easy to understand. This CSS-only example accomplishes both quite nicely. The illustrated coffee cups not only look tasty, but they are also representative of their ingredients. That, along with the flavor scale and ingredient key, all come together beautifully.

See the Pen Types of Coffee | Pure CSS by Julie Park

Doing More with Data

Static text or images aren’t always enough to help users better understand your message. Just as they have for decades in the print universe, infographics offer a more user-friendly means of communicating data on the web.

When combined with the latest CSS and JavaScript techniques, we can create infographics that go beyond just a fancy layout for statistics. Instead, they can become an interactive and immersive experience that both entertains and educates.

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