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.

A crystal-blue sky on a sunny day, the stars twinkling at night. Then too, the thoughts of space exploration and our galaxy also ignite our imagination. What’s above us brings both an everyday reality and curiosity of the unknown.

It’s no surprise that some very creative developers have used the sky and space as a subject of experimentation. The potential use of light, color, movement and the latest web technologies are all a natural fit.

Today, we’ll introduce you to some amazing examples that, in one way or another, utilize the sky and space. They run the gamut from scientifically accurate to pure fantasy. Enjoy!

Scroll Down the Sky

The parallax scrolling effect is just about everywhere these days. It’s one of those trends that has taken on a life of its own. However, this is one of the most unique and compelling examples we’ve seen. Scrolling down the page results in a 3D shifting of clouds, while a changing background color makes it seem like you’re falling towards the Earth.

See the Pen
Canvallax Demo: Parallax Sky Background by Shaw

Map to the Stars

What makes this star map so interesting is the CSS and JavaScript-powered interactivity. Click on a system and it comes into focus, complete with silky-smooth transitions. The map also shows a simulated orbit path and some fun emoji as icing on the cake.

See the Pen
CSS Star Maps by Scott Weaver (@sweaver2112)

Northern Lights

One of the true wonders of the universe, the northern lights (aurora borealis) is something not many of us get to see in person. But we can at least try to recreate the experience. Here, a pure CSS version of a glowing green and purple night sky can light up your screen.

See the Pen
Pure CSS Northern Lights? 😎 by Jhey

The Sun Sets on the Web

A stunning sunset is, on the contrary, something just about everyone can experience. But that doesn’t make it any less stunning. This snippet allows you to put the sunset in motion anytime of day, just by clicking the great yellow sphere. The changing colors make for a attention-grabbing effect.

See the Pen
Sunset by Aleksandra

The City of Lights at Night

Want to know when the full moon will shine on Paris, France? This delightful animation tells you, and gives you a bedroom window view of the Eiffel Tower. The only mystery here is whether the cozy black cat does anything special when the event arrives.

See the Pen
Full Moon in Paris? by Paulina Hetman

Pure CSS Saturn

Saturn’s rings are a massive source of fascination among us humans. This CSS-only rendering of the planet offers a slightly different take. It’s dark and the rings aren’t quite as prominent as usual. But it provides a beautiful example of how CSS gradients can help us produce some amazing art.

See the Pen
Saturn 🪐 by Luciano Felix

Approaching the Sun

The use of WebGL makes this solar animation otherworldly. As the sun drops down from the top of the screen, notice the blurry effects around its edge. The level of detail here is just incredible. Thankfully, no heat makes it through the screen.

See the Pen
Solar by Scott Weaver

Colors for Every Sky

Rounding out our collection is a snippet that is a bit more utilitarian. It’s a set of beautiful CSS gradients you can use to reproduce several different sky color combinations. You’ll find everything from the dead of night, sunrise, sunset and the perfect blues of midday.

See the Pen
Sky gradients by zessx

Exploring the Heavens Through Code

As the code snippets above demonstrate, the sky and outer space can add elements of fun and beauty to the web. Whether they recreate our world or aim to show us new ones, they offer a unique way to enhance the user experience.

The post 8 CSS & JavaScript Snippets that Celebrate the Sky & Outer Space 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

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

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

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

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

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

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

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

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.

But thanks to ever-evolving web technologies, we can use textures and patterns to even greater effect. They no longer have to be confined to static display. Now, they can be combined with motion and shading techniques to produce some mind-blowing graphical features.

We have collected some highly creative code snippets that use classic assets in new and exciting ways. Enjoy, and be sure not to operate any heavy machinery for a few minutes after viewing! Your eyes may play some tricks on you.

Big Torus, Little Code

The mathematical concept of a torus is a fascinating ring-shaped revolution. This example is simply stunning. It demonstrates the concept better than anyone could explain it. What’s more, it uses a mere 33 lines of JavaScript to create. You may have the urge to stare at this one for a few hours.

Is That a Petri Dish?

Beyond the beautiful detail of this “circle packing” animation, there could be some very useful real-world adaptations. This could be used, say, to demonstrate how bacteria grows or to re-create a pointillistic painting. Regardless, it’s quite mesmerizing to watch.

Night Glow

Textures still make for great backgrounds. And this night sky full of glowing (and occasional shooting) stars shows that special effects don’t have to be overbearing. You can create something that has movement while maintaining usability.

Dynamic Disco Ball

This one is quite interesting. It uses reflection mapping with Three.js to create a disco-ball like surface that changes as you move your cursor. Moving up and down results in a change to the smoothing, while sideways movement increases the “bumpiness” of the texture.

Feed the Tree

Here we have an animated tree that is reminiscent of a hand-drawn flipbook. The tree sprouts up and forms leaves as a scribbly background moves furiously about. Even better is that it uses just HTML5 Canvas and JavaScript – no images necessary.

That’s a Lot of Dots

At first, this example could be mistaken for footage of a cosmic event. In reality, it’s a script that uses WebGL2 to create transform feedback particles. There are 500,000 color-shifting particles here that react to your cursor movement. If this is indeed happening in space, we’d better take cover.

Back to Math

Let us not even try to explain the concept of a Logarithm. Just know that, in animated form, it is quite compelling to watch. A colorful, shape-shifting texture gives off an incredibly retro vibe. As a bonus, clicking on the animation will create a new effect.

Hello, Sunshine

If this doesn’t bring a smile to your face, you might do better studying the mystery math above. With spinning shapes layered on top of an ever-changing background, there is a lot going on here. While probably not a great fit for a page background, it certainly would bring focus to a banner or hero area.

A Pattern of Change

The examples above have taken something basic (a shape, a pattern, etc.) and transformed it into something else completely. These snippets are colorful, interactive, and compelling.

It just goes to show what the right mix of coding knowledge and creativity can achieve.

More CSS Effects Snippets

The post 8 CSS & JavaScript Snippets for Texture & Pattern Effects appeared first on Speckyboy Design Magazine.

Timelines are among the more popular visual elements we have at our disposal. A good one can present a story in an easy-to-follow and interactive manner, and they gently grab a user’s attention and invite them to participate in the experience.

And it’s no surprise that, as CSS and JavaScript are becoming ever more powerful, timelines are popping up all over the place. These technological advances mean easier implementation and a more compelling visual.

That gives us the perfect opportunity to share some top CSS and JavaScript snippet examples of attractive and engaging timelines.

Bringing History into Focus

One potential pitfall of a content-heavy timeline is that all of its entries can get bunched together. This makes it difficult to give each item the focus it deserves.

This example takes a unique approach, where each entry’s image is faded until it comes to the top of the viewport via scroll. Once that occurs, the image is fully realized, thus allowing the entry some time to shine.

See the Pen timeline by Stefan Kyurkchiev.

Post Up

A timeline can be used to display all sorts of chronological or even categorized content. Here, this attractive date-based layout is used to list blog posts.

The format is simple and easy to follow, and it offers a different perspective on the standard vertical listing of posts.

See the Pen Posts Timeline by Tracy.

Change Your View

Let’s look at another unique method for displaying lots of information in a limited space. What’s great about this example is how versatile it is. You can navigate via keyboard, drag, or click.

Then there is the ability to zoom in or out of the listings and rewind things back to the beginning. Not only does it look great, but it also gives users some choice in how they interact.

See the Pen Centennial Timeline by Sean.

Look Behind the Door

Sometimes the most interesting examples are the ones that look nothing like you’d expect. We’ve come to see timelines as very linear, with text or images jutting out from a line of some sort.

Here, not so much. Instead, we have a series of tall, skinny panels. Hovering over a panel reveals a full-color image and some text. Even more impressive is that it was all done with pure HTML and CSS.

See the Pen WIE_ Box Slider (4 Panel Timeline CSS) by Alejandro Santacroce.

Learn as You Scroll

Scroll-based animations are a big deal these days. And it makes perfect sense that some of the best timeline examples we found integrate them to some degree.

This summary of the great Albert Einstein’s life features some slick animations, thanks to jQuery. It makes the user experience feel a bit more interactive and just flows along naturally with the content.

See the Pen jQuery Scrollable timeline (Responsive design) by Stefan Tudoran.

Going In-Depth

At first glance, there doesn’t appear to be much behind this look at artists in Amsterdam. However, click on one of the artists, and you’re taken to a page that features a second timeline displaying their works. The timeline format works beautifully here, complementing the overall aesthetic.

See the Pen Timeline of artists in Amsterdam by Mees.

The Beauty of Simplicity

There’s still much to be said for simple solutions. After all, not everything has to knock the user’s socks off. This Vue.js example isn’t overdone in the least. But what it does offer is an interactive way to navigate through a listing of important events. It’s fast, legible, and intuitive. What more could you want?

See the Pen Horizontal Timeline by Adhitama Fikri.

Top of the Charts

Finally, let’s explore another unexpected type of setup. This horizontal timeline is reminiscent of a chart or graph.

Again, it’s very simplistic in design. But that also means that you won’t struggle to discern one entry from another, as each is on its own line. Text is also kept to a minimum, with hyperlinks leading to more information.

See the Pen Horizontal Life Timeline by Milan Milošev.

All Kinds of Time

The examples above show that timelines can be incredibly versatile, and they can be anything from a minimally formatted layout to a fully animated and interactive experience.

So, no matter the type of information you’re looking to display or your personal style, odds are that one of these snippets will be the perfect fit.

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

Yet, these visual assets have become so common that we sometimes leave creativity out of the equation. And while there’s nothing wrong with using a more conventional look, there’s much to be said for standing out.

That’s why we went on a search for unique social media icon implementations. Ones that feature different takes on layout and even the icons themselves. Then there are those that look a bit more mundane – that is, until you interact with them.

Ready for something different? Then check out our collection that takes social media icons to another level.

Take a Profile

City-dwellers will recognize the inspiration behind this UI. Links to various social media profiles look similar to the “take a number” flyers often seen on community bulletin boards and telephone poles. The paper-like look, complete with creases and shadows, make this a can’t-miss feature.

See the Pen
“Take a number” contact list by Suzanne Aitchison

Fancy Box

This example is different in that it requires the user to hover over the element to reveal a set of social media icons. True, it does make for a little more work on the user’s end. But with the right labeling, it could add a bit of fun to a personal portfolio or resume site.

See the Pen
Social Icon Hover Effect by Mike Young

A Simple, Yet Familiar Look

These are not your standard social media logos – they’re not logos at all. Still, these simplistic letter icons are intuitive. That’s in part because they use each service’s primary color as a background. Upon hover, they also display the service’s name as part of the “Follow us” headline at the top. CSS and jQuery power this attractive set.

See the Pen
Social media minimal icons by Anton Petrov

Exploding Layers

OK, maybe that headline makes you think of some crazy action movie sequence. This example doesn’t go quite that far. But it does offer a beautiful hover effect that brings each icon to life with 3D-colored layers. Perhaps the only tweak would be to have the colors reflect those of the services – but that’s a minor quibble. Otherwise, this one is sure to grab some attention.

See the Pen
Code Challenge 2020 || 3D Social Media Button by Nour Ibram

Peek-a-Boo Profiles

Here we have a set of social icons that are just begging you to interact with them. Each one peeks out just above a flat border and are fully revealed upon hover. It nicely straddles the line between usability and the element of surprise.

See the Pen
Social Media icon reveal with transition by Stefan Göllner

Founder Cards: Collect Them All

Would you like to have a picture of Mark Zuckerberg or Jack Dorsey on your site? No? Well, this is still an attractive way to display social sharing cards. You could always swap out those images for something a little more relevant. Even better is that the cards in this demo link to a YouTube video tutorial. And don’t worry about those social media titans. They likely know everything about your website anyway.

See the Pen
Social Media Share Cards by Himalaya Singh

SVG Rainbow Paradise

There’s nothing like a blast of color and slick animation to get a user’s attention. These animated SVG line icons have it all. Each icon features a unique color gradient. From there, a draw-and-fill effect takes place when hovering.

See the Pen
Creative Social Media Icon by Chouaib Belagoun

Etched in Glass

Glass effects and neumorphism offer subtle beauty to any design element. It was only a matter of time before they were applied to social media icons. This pure CSS UI falls more into the former category, with a cool frosted effect. The neon “glow” of each item makes them reminiscent of a set of fancy wall lights.

See the Pen
Glass effect social media buttons with neon glow by Kevin Miranda

Uniquely Social UIs

It’s amazing what some creative use of CSS and JavaScript can do. They can turn some of the most recognizable logos on earth into a new and fun experience. The examples above offer just a few ways to achieve it.

The post 8 CSS & JavaScript Snippets for Social Media Icons & Buttons appeared first on Speckyboy Design Magazine.

That’s what makes reveal effects so compelling. They can serve dual purposes. The first is to keep our layouts nice and tidy. The second is to add a bit of flair to the user experience (UX).

And there are many intriguing options for web designers. Using CSS and JavaScript offers a path to creating high-end effects. They not only look great, though. There are ways to build features that are performant and accessible as well.

Want to explore some possibilities? Check out our collection of fantastic reveal effects. They run the gamut in terms of use cases and technology.

Scratch Card CSS Reveal

Designed by Nicolas Jesenberger

This reveal effect mimics a real-world experience – using a scratch card. Use your finger or pointing device to “scratch” off the silver foil. You’ll find a little surprise underneath. It’s both clever and well-executed.

See the Pen Scratch Card by Nicolas Jesenberger

Magic Wand Reveal

Designed by Kalis Network

Here’s a snippet that takes web magic to the next level. Move the magic wand from left to right to reveal the image gallery underneath. There’s also a subtle effect for nearby images. They’re blurry and displayed with a lower opacity.

See the Pen Magic Reveal by Kalis Network

Circular Reveal Animation

Designed by Liza Shermayster

You don’t need to go overboard with reveal effects. This simple presentation reveals more of the image upon hover. And it also adds a classy text animation. It would work well on a portfolio or About Us page.

See the Pen circular reveal animation by Liza Shermayster

Text Reveal Animation

Designed by Owlypixel

How about a reveal effect that happens automatically? This animated headline is beautiful and sure to get a user’s attention. It’s also powered by CSS. That means there are no messy scripts to slow down your page load times. The JavaScript used in the snippet refreshes the demo.

See the Pen Text Reveal Animation by Owlypixel

Ink Transition Reveal

Designed by Ryan Yu

These scroll-based animations are incredible. The artwork appears to be drawn on your screen as you scroll. The effect creates a mood to enhance the UX. It’s a case of special effects fitting the content to a tee.

See the Pen Ink transition effect with PNG sprite by Ryan Yu (@iamryanyu)

Movie Poster Interaction Reveal

Designed by Ethan

Card UIs are a popular design element these days. But there’s only so much content they can hold. This snippet offers a solid workaround. Hover over a card to reveal further content. The layout remains neat while adding a bit of interactivity.

See the Pen Movie Poster Interaction by Ethan

Page Reveal Effect

Designed by Kevin Levron

Yes, you can use reveal effects for an entire page! And this tool can help you create the perfect fit for your project. Choose from several animation types and other options to build a beautiful presentation. Plus, it’s just plain fun to experiment with.

See the Pen Page Reveal Effect (CSS/VueJS) by Kevin Levron

Accessible Offcanvas Reveals

Designed by Vasileios Mitsaras

Offcanvas elements are a handy place to store extra info. They’re often used to hide mobile navigation so that users can focus on content. This demo uses jQuery to add elements that can be revealed in multiple ways.

See the Pen Accessible Offcanvas by Vasileios Mitsaras

A Revealing Way to Build a UI

Reveal effects can take many forms. They’re suitable for everything from a corporate website to an online game. Their potential is vast and varied.

It’s still important to consider the impact on users, though. The best implementations feel natural and add to the UX. Therefore, it’s best to avoid effects that get in the way of accessing content.

Thankfully, CSS and JavaScript provide plenty of leeway. You can use the combination that works best for your project.

Want to see even more reveal effects? Check out our CodePen collection!

The post 8 CSS & JavaScript Snippets for Awesome Reveal Effects appeared first on Speckyboy Design Magazine.

The great thing is that a wide variety of 3D effects can be created using CSS and JavaScript. When thoughtfully implemented, this enables text to stay accessible and responsive. It’s a far cry from the days when such effects were only available through the use of images.

Today, we’ll take a look at some snippets that feature beautiful 3D text effects. They run the gamut from calm and classy to outrageously animated. There’s something here for just about every need.

Letters on a Shelf

Here’s a fun example that shows off the power of the Three.js library. 3D text appears on a series of shelves – but there’s more than meets the eye. Click or touch a letter, and it goes tumbling to its imminent doom.

See the Pen Interactive 3D-Letters using Three.js &Cannon.js by Angela Galliat

Dot Matrix Signage

This text snippet simulates the look of a dot matrix sign and even lets you input your own custom text. As the sign rotates horizontally, note the subtle changes in hue. It nicely mimics the type of shading effect you’d see in the real world. Moving your cursor up and down also tilts the viewing angle.

See the Pen Pseudo 3D text by JK

Comic Book Heroes

The use of a cartoonish font and CSS animation make this example stand out. Rather, each word “jumps” at you in staggered intervals. Text outlines and shadowing help to bring out that third dimension.

See the Pen CSS 3D Text Effect by Kyle Wetton

Wavy Words

Amazingly, this 3D wave effect is done with pure CSS (and just over 50 lines, to boot). A unique layered look is combined with a blend mode to add a touch of mysticism. The gentle animation means that you can call attention to text without overwhelming users.

See the Pen Only CSS:Text Wave by Yusuke Nakaya

In the Shadows

Perhaps it sounds simplistic, but CSS shadows offer an effective way to add a 3D effect. Here we have a demonstration of two different ways to achieve three dimensions. Using the CSS filter property allows some of the page background to come through, while text-shadow provides a more traditional look.

See the Pen 3D effect with shadows by zastrow

Going Retro

We admit that this particular effect may not be appropriate for most projects. But it’s still great fun. The retro video game vibe and pulsating text go together like PAC-MAN and dots. It may even make you want to pull that old Commodore 64 out of storage.

See the Pen ’80s Inspired Pure CSS graphics by CurleyWebDev

The Strokes

3D doesn’t have to mean undignified. Take this stroked text for example. It offers plenty of multi-dimensional impact but has been designed to blend in. This minimal effect could be great for article headlines or page titles.

See the Pen YPZJQz by @TimLamber

Set In Stone

Want even more subtlety? This engraving effect adds dimension and a bit of class. The styling was crafted with CSS, while the current date is generated via JavaScript. It’s going 3D without getting into anyone’s face.

See the Pen CSS only 3D engraved stone by Michael Burridge

Add 3D Text Effects with CSS & JavaScript

Whether you’re looking to add movement and interactivity or subtle decoration, 3D text effects can help. They call attention to important content and allow you to break out of the mundane.

What’s more, you don’t necessarily have to write a massive amount of code to create something unique. Some of the examples above were built with a relatively small amount of CSS. You can start small and work your way up to something grander if need be.

More Text Effect Snippets

The post 8 CSS & JavaScript Snippets for Creating 3D Text Effects appeared first on Speckyboy Design Magazine.

Today, we’re going to focus on an area that is sure to grab your attention: Background patterns. Note that there is no subtlety here. The code snippets we’re about to show you turn up the volume to 11. Some even include far-out animations to enhance the effect.

In that way, they may not be ideal for use on your new portfolio, but they are terrific examples of what is possible with some coding knowledge and a lot of creativity. Enjoy!

Oh, and you may want to put on your sunglasses first.

60’s Wallpaper

This retro-inspired mix of orange and blue was created with a whopping eight lines of SCSS. While it’s not animated, staring at it in just the right way does provide the feeling of movement. Now, if they only made pants with this pattern…

See the Pen Orange &Blue 🧡💙 by Gemma Stiles

Moiré, Please

Here we have another orange and blue example, this time with motion added to the mix. It’s a Moiré (interference) pattern and is quite intense to watch. The noisy look is reminiscent of an old video game played on a cheap television. *Those who have adverse reactions to such visuals may want to avoid this one.

See the Pen Moire pattern orange-blue [p5.js] by Marjel

Sun King

This psychedelic animation looks like it belongs on a huge screen at a rock concert. The JavaScript-powered effects are attractive and intricate. And due to its somewhat tame movement, you might even be tempted to use it in your own project.

See the Pen Promesse dorée by Bailh

The ‘G’ Stands for Generator

SVG is a great tool for creating background patterns and effects, as they’re sharp and flexible. This snippet offers a way to create your own pattern, either randomly or via a settings panel.

See the Pen SVG Background Pattern Generator by Brandon Brule

On Target

Few things get a user’s attention, like the combination of movement and color. Here, we have an example that employs this tandem quite effectively. The mesmerizing, ghost-like bullseyes are enhanced with bands of color as they fly past. The result is a pattern that holds your interest rather than scaring you away.

See the Pen Ripples in Time 2 by Liam Egan

It’s All Triangles

Some things are just better when they’re simple. Here’s an example of how a few shapes can be combined to create something that looks entirely more complex than it actually is. This set of variously-hued SVG triangles (check out the white outline on the upper left of the snippet) gives off a 3D vibe that encourages users to keep on staring.

See the Pen SVG triangle pattern by huibvg

Interlock Engaged

Keeping with the theme of simplicity, take a look at this CSS-only pattern. It’s essentially a set of interlocking shapes that repeat across the screen. And, once again, the result looks like something more than the sum of its parts. Especially so when you consider that this snippet is less than 70 lines of code. Repeating this with, say, Photoshop, would be multitudes more time-consuming.

See the Pen CSS Background Pattern by carpe numidium

Thrice the Fun

Multiple animated patterns on the same screen? “Heresy,” you say. In reality, it’s actually pretty cool. Three equal columns, each featuring a different coloring and animation style. They’re loud but also seem to fit together nicely. As a bonus, hover over a column, and it expands. In a way, it’s reminiscent of a TV show with a wall of monitors in the background.

See the Pen Background Pattern Animation by ichimonzi

In most cases, the snippets above are not practical for everyday use (unless you’re into that whole brutalist thing). But that’s part of what makes them fun. Heck, that’s what makes CodePen itself so great. It’s for experimentation and creating things that you might not otherwise attempt.

And sometimes, the knowledge you gain from building something like a colorful pattern might be used again for a more general purpose. Just the experience in itself can be rewarding.

So, while these patterns may stick out like a sore thumb, they do serve an important purpose. Perhaps they fit right in with a web designer’s quest for self-improvement.

The post 8 CSS & JavaScript Snippets for Wild & Crazy Backgrounds 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

Designed 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

Designed 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

Designed 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

Designed 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

Designed 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

Designed 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

Designed 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

Designed 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.