We can use it to craft virtually any layout imaginable. Special effects and interactivity that used to require JavaScript or browser plugins are now supported natively. The language has gone from a basic tool to one of the foundational technologies behind every website.

But like any powerful tool, CSS can also have unintended side effects. Accessibility is among the biggest areas of concern. Some implementations can indeed do more harm than good.

With that in mind, let’s look at a few CSS practices that can hurt accessibility. They include common features that require careful consideration before you start writing code. Let’s get started!

Displaying Important Text Using the content Property

The CSS content property offers a slick way to add visual enhancements to an element. For example, you might use it in combination with a pseudo-element to add an icon before a passage of text or list item. It can also display images or strings of text.

But that last one can be particularly troublesome. Text added via the content property is not included in the document object model (DOM). That means assistive technology such as screen readers may not recognize it.

This is fine for purely decorative items. However, it could lead to accessibility issues if the text provides vital context to a page. Users may miss out on important information.

Therefore, it’s best to avoid using the content property for displaying text. That is unless you’re confident that it won’t interfere with a user’s ability to comprehend the page.

Creating Intense Flashing Animated Sequences

Animation is an area where CSS has seen a major evolution. Effects that were once the territory of third-party libraries can now be crafted with relative ease. And since they’re natively supported, they can take advantage of features such as hardware acceleration to boost performance.

Basic transitions and transforms can do wonders to create a mood and grab a user’s attention. And it’s also possible to construct incredibly realistic effects with the help of JavaScript.

But certain animation styles can have negative effects. For some users, too much movement can be disorienting – or much worse. Intense flashing or strobe effects can lead to seizures. This is possible on the web – just as it is in movies, television programming, and video games.

The WCAG 2.0 offers some research-backed guidance for creating animations that won’t trigger seizures or other adverse reactions. For instance, it’s recommended that a presentation is set to flash no more than three times per second, along with keeping sizing small and avoiding the color red.

Thankfully, this doesn’t limit our ability to impress users with movement. There are still plenty of opportunities to enhance our work. But the types of animation used and their potential impacts must be scrutinized.

Unintuitive :hover or :focus States on Interactive Elements

CSS is adept at styling interactive elements. Consider what’s possible with everyday items such as hyperlinks and form fields. They can be customized to the point of being unrecognizable when compared to their default look.

That’s all well and good. But it’s also important to think about what happens when a user interacts with an element. Imagine clicking a button that doesn’t offer any visual cues to confirm what has happened. Or using a keyboard to tab through a menu that doesn’t highlight the current link.

They may be simple, but these micro-interactions help provide users with context. Confirming a button click or understanding what menu item your cursor is focused on are just two examples. And each brings a sense of confidence as a visitor browses a website.

The initial styling of an interactive element is only half the battle. Offering intuitive styles for the :hover and :focus pseudo-classes complete the user experience.

It’s worth noting that these styles should be easily perceptible. In practice, that means using more than just color as an indicator. Adding animations, outlines, or icons can help ensure that no one is left out.

Taking the Basics of Accessible Design for Granted

We’ve all been there. A project deadline is rapidly approaching and you need to get things done. In the race to launch, some accessibility-related items might slip through the cracks.

Quite often it’s the basics of accessible design that get left behind. Those CSS practices that designers might take for granted and assume are already up to standard.

Prime examples include fundamentals such as legible typography and acceptable color contrast ratios. Without considering and testing these items, a website might not be as accessible as you think.

That’s why it’s worth taking some extra time to review the broader aspects of your site’s styles. Even if an item passes the “eyeball” inspection, go the extra mile to perform an audit. You might be surprised at how many opportunities for subtle improvement you’ll find.

It’s about Using CSS Responsibly

Because CSS is so powerful, it’s easy to be tempted by the possibilities it has to offer. Why settle for a basic animation when you can create something cinematic? And how could we not love the convenience of using it to generate content?

It all comes down to empathy and responsibility. Like any tool, CSS is capable of great things. But just because we can implement a specific feature doesn’t mean it’s right for accessibility. We live in a world where people from all walks of life will consume what we build. And it’s our job to ensure they can do so without obstacles.

The bright side is that avoiding the practices above is within everyone’s reach. For the most part, it’s a matter of thinking about the potential impact of what we do. From there, testing provides us with the data we need to refine things further.

CSS is there to make accessibility easier. It’s all in how we choose to use it.

The post The CSS Practices That Can Hurt Accessibility 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.

They’re great for keeping the user’s interest as new content loads while maintaining a minimal impact on performance.

With that in mind, here are 10 examples of page transitions that can add a little something special to your next project:

Vue.js Variety

With the help of the Vue.js framework, the examples here sport a quick and slick set of transitions. There’s a nice mix here of basic transitions (fade, zoom) and a few that are a bit unique compared to what we normally see (flipX, flipY and slideUp).

See the Pen Vue2 page transitions with GSAP by Tim Rijkse

Old School Television

Intentional or not, this transition is reminiscent of an old CRT television being turned off. The colored background shrinks down to a single line, much like what my old TV did after a night of watching MTV (when they still played music, that is). Then, the transition finishes off by reversing the effect (as my TV did when I woke up the next morning).

See the Pen Page Transitions by Mergim Ujkani

Morphing SVG

A circular SVG is used in this transition to add a clock-like effect. The movement adds a cinematic quality that seems like a perfect fit for a multimedia site.

See the Pen Page Transition Loader by Arsen Zbidniakov

Speedy Transition with Preloader

If you’re going to use page transitions in multiple places throughout your site, then they’d better be quick. That’s what is so cool about this example. There’s a colorful animated preloader that quickly makes way for the content to reveal itself. It’s interesting to look at while not wasting precious time.

See the Pen Page Transition with Loader by John Heiner

Thumbnail to Full Page

This is quite a unique effect, as clicking a thumbnail image transitions to a modal using that very same image as a full-screen background. The effect is a combination of CSS transitions and Angular.js.

See the Pen Thumbnail to fullscreen page transition by Steve Gardner

Wipe it Clean

A good old wipe effect has been a staple of TV and film transitions for decades. Here, we see a variation of it activated with CSS and a tiny bit of jQuery.

See the Pen Page transition CSS3 by TOMAZKI

Cubic Bezier with GSAP

GSAP is a library that enables super-fast animations. This example utilizes it to create a “slide up” transition effect, along with some animated background fun.

See the Pen GSAP Cubic bezier page transition by Maciej Siwanowicz

Splish-Splash

With a cool “splash” effect, this responsive modal transition will certainly get a user’s attention. It’s quick, colorful, and fun. It’s built with Lottie, which brings After Effects transitions to the web.

See the Pen Responsive bodymovin modal / page transition by Jonas Sandstedt

There’s a Glitch

There’s something about the dystopian glitch effect that is just timeless. Countless sci-fi shows and movies wouldn’t be the same without it. This example from nclud shows how they built a page transition with all kinds of glitchy goodness.

See the Pen Canvas Glitch Intro by nclud team

3D Cubes

Imagine that each page on your site is a panel on a cube (or pentagon, or hexagon, etc.). Going to the next page is just flipping that shape around to show the correct panel. That’s kind of the point behind this rotating cube effect that utilizes jQuery and Velocity.js.

See the Pen 3D Cube Page Transition by Hubert Warzycha

Page transitions have come such a long way in recent years. They’ve gone from simple fades and color changes all the way to effects that wouldn’t look out of place in a movie.

The combination of CSS, along with the right JavaScript library, can produce compelling visuals. When used responsibly, transitions can a fun way to enhance UX.

More CSS Effects Snippets

The post 10 CSS & JavaScript Snippets for Page Transition Effects appeared first on Speckyboy Design Magazine.

But it doesn’t stop there. CSS is also being utilized to build fully-interactive UIs. Things that used to require JavaScript can now be done with code that is natively supported in all modern web browsers.

Among the best examples of this trend are the bevy of pure CSS games that are popping up. They’re fun to play and give us a hint at what can be achieved with a bit of creativity.

Here’s a look at some of the best pure CSS games on CodePen. They range from the stupefyingly simple all the way to “wow, CSS can do that?” – enjoy!

Rock, Paper, Scissors

A rock, paper, scissors session is always a great way to beat boredom. If you don’t have a partner to play along with, you can give this virtual version a go.

Click on your weapon of choice and then on the “Fight!” button to see how you did. The game uses HTML radio buttons and some random CSS to power the match.

See the Pen Pure CSS Game Rock Paper Scissor by Jerry Low

Minesweeper for Git Commits

This game combines the classic premise of Minesweeper with the look of a GitHub contribution graph.

See how many squares you can paint before hitting one of those pesky mines. Again, CSS is used to generate “random” locations for each mine.

See the Pen CommitSweeper – Pure CSS Game by Stephanie Eckles

Save the World from Demons

Here’s a simple shooter game that asks you to take out some demonic minions (no, not those minions).

Place your cursor over a demon and click to send them packing. A quick look under the hood reveals that HTML checkboxes and animated GIFs make the whole thing work.

See the Pen Demon Killer II by Mark Sottek

You Want Cake? You’d Better Earn It

Sure, everybody wants some cake. But this game may drive you mad in its pursuit, as it takes some skill with your mouse.

Hover over a tiny box and avoid the little crumbs and sprinkles. If you make it through, you shall be rewarded. Move your cursor too far, though, and you’ll have to start all over again.

See the Pen Pure CSS Cake 100×50 Game 🎂🎉 by Jhey

Guess the Movie

This little trivia/hangman-style game makes clever use of the CSS :valid and :invalid pseudo-classes to guide you towards a correct answer.

First, you’re shown a set of emojis that represents a movie. From there, you’re expected to type in the movie’s name. But each form input only has a single valid letter. CSS will tell you if you’ve entered the right one (or you could just look at the source code).

See the Pen Guess The Movie – a mini CSS game by Inès

I Ain’t Afraid of No Ghosts

Here’s another shooter game – but with a twist. This time around, we’re hunting down ghosts in a whack-a-mole type of setup. The difference here is that you only have 15 seconds to work with. It’s a good demonstration of timing animations with CSS. How many can you blast?

See the Pen Pure CSS ghost bustin’ game w/ CSS variables 👻🕹#CodePenChallenge by Jhey

Stack ‘em High

Reminiscent of Tetris, this game challenges you to stack groups of moving blocks on top of each other. It may sound easy enough but requires precise timing to get right. Now, if I could just find my old Game Boy!

See the Pen Pure CSS Game:Stacker by Jerry Low

You Sunk My Battleship

Grab a friend (or your alter ego) and play a spirited game of Battleship – powered only by CSS.

While it’s not quite as secretive as the physical version, it does provide an excellent foray into conditional logic. Take a look through the code to see how it works.

See the Pen CSS Game:Battleships by Daniel Schulz

Playing Around With CSS

CSS provides us with more than just a way to make our websites look attractive. It can bring movement and interactivity as well.

And, though the games in this collection may not be practical for everyday use, they demonstrate just how powerful the language has become. Studying these examples can provide you with an idea of how to leverage CSS to build more interactive experiences.

More Game Code Snippets

The post 8 Pure CSS Games You Can Play in Your Browser 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.

Here are some free WordPress plugins you can use to add a variety of effects to your site:

Blocks Animation – CSS Animations for Gutenberg Blocks

If you’re looking for an easy way to draw attention to an element of your page, Blocks Animation is worth a look. It works natively with the Gutenberg block editor, allowing you to add animation to any block via a settings panel. Choose your desired animation style, delay, and speed.

Animator – Scroll Triggered Animations in WordPress

Scroll-triggered animations are very popular these days but can be tricky to set up. Animator provides a slick GUI that takes the pain out of the process. The plugin features a selection of ready-to-use animations, but you may also create your own. Pick an animation, set the scroll position, and you’re good to go.

Image Hover Effects Ultimate for WordPress

Image Hover Effects Ultimate includes several handy and compelling animations for your images. The image comparison effect, for example, allows visitors to compare “before” and “after” versions of an image. Also included are hover animations for buttons, flip boxes, captions, and more.

Greenshift – WordPress Animation & Page Builder Blocks

Greenshift is built with an eye toward performance. Rather than use large frameworks to power animation, elements are generated on-the-fly. The plugin also utilizes CSS3 and SVG, allowing for flexibility without hurting your site’s load time.

Animate It! WordPress Plugin

Adding CSS3 animations to your site is easy with Animate It!. The plugin combines the Animate.css and Animo.js libraries in one package containing over 50 animations. Animations can be applied on user events like scroll, hover and click.

Page Animations & Transitions WordPress Plugin

Page Animations and Transitions offer a selection of nine different “in” and “out” page transitions. You can also set duration times for transitions.

Easy Textillate WordPress Plugin

Add animations to any text on your site with Easy Textillate. The plugin includes the textillate.js, animate.css and lettering.js libraries to provide all sorts of excellent effects for your typography. Generate Shortcodes with the animation styles you want, place them into your content and watch them go!

Ultimate Hover Effects WordPress Plugin

Use Ultimate Hover Effects to add some life to your image captions. Select an image from the WordPress Media Library and set up the hover effects you want to use. Then it’s just a matter of embedding it into a post or page. A Shortcode generator is also included.

Page scroll to id WordPress Plugin

Page scroll to id adds smooth-scrolling effects to in-page navigation using CSS ID elements. You can set the scroll duration and easing – with over 30 easing types to choose from. Both vertical and horizontal scrolling is supported and offsets can be configured for individual links.

CSS3 Rotating Words WordPress Plugin

CSS3 Rotating Words is a handy plugin with a simple function: Rotating a word or words in a sentence using animation. For example, you might have a sentence where you want to change one word:

• WordPress is Fun
• WordPress is Awesome

Choose from five animation styles and also set the font color and size.

Make Your Site Special

The right mix of special effects can bring elements of both fun and utility to your WordPress website. Of course, it’s best to pick and choose carefully when deciding what to use.

A good rule of thumb is to always keep the best interests of users in mind. If a feature increases usability or makes your site more enjoyable to use, then it might be worth your while.

The post 10 Best Free Plugins for Adding Animation Effects to WordPress 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.

That’s where our collection comes in, as we’ve curated a selection of free custom spinners all powered by CSS. Whether you’re designing an Ajax-powered app or just want to add a fun preloader to your site, these snippets are built for the job.

From simple designs to more elaborate animations, our collection offers a range of options to choose from. And the best part? All of the custom spinners are available for free, making it easy to experiment with them and incorporate them into your own projects.

So why settle for a generic spinner when you can create a unique and engaging animation using CSS and SVG? Check out our collection and add some personality to your websites and applications today!

1. Various CSS Spinners

This brilliant collection of custom CSS spinners comes from developer Iulian Savin. You’ll find a slew of animation styles in here, from rotating circles to animated bars and even a custom Pong-style loader. These loaders all come as fully usable assets that you can copy & paste right into your own projects.

Just note these spinners can also be downloaded from this GitHub repo.

See the Pen CSS spinners by Iulian Savin

2. Eclipse Spinner

Here’s a unique spinner that mimics a solar eclipse. Or some kind of light show… I’m not exactly sure, but I know it looks incredible.

The whole thing relies on very little HTML and it’s cut down even smaller thanks to Haml templating. You can compile the Haml and Sass code into plain HTML & CSS if that’s easier for you to customize.

See the Pen CSS Spinner Animation by Hakim El Hattab

3. Super Simple CSS Spinner

It doesn’t get much simpler than a rotating lit-up circle. And that’s precisely what you’ll find with this design. It’s a super basic code snippet, and the CSS spinner is a true sight to behold.

It’s not one of the most stylish designs in this collection, but it does the job. If you need a basic spinner that’ll match any website, keep this example snippet in mind.

See the Pen Super Simple CSS Spinner by Thomas Mandelid

4. Beaulti Circle

I’m not exactly sure what the name for Beaulti Circle has to do with anything, but I am sure that this custom CSS spinner is very cool. The animation style is just so fun to look at, and when you realize that this was built entirely using CSS, that’s even more impressive.

I think this spinner is a little too flashy for corporate sites, but if you update the color to a lighter tone and make it a little smaller, it could work for you.

See the Pen Beaulti Circle Load CSS3 by Elias

5. Pure CSS Spinners

There’s a really fun mix in here alternating between various colors, plus a spinner of all the colors together in a rainbow. They look pretty radical and tech-focused.

If you like the black design on this spinner, it can work well for your site. Just make sure you customize the spinner’s color to match your layout.

See the Pen Pure CSS Spinners by zyklus

6. Spinners with Font Icons

Here’s a really fun idea merging CSS animation with icon fonts. In this example, you’ll find a bunch of icons from the Icomoon set. But they’re all animated using CSS to create rotating graphics that look like custom spinners.

Basically, they are custom spinners, just with a bit more to them since they operate on font properties in CSS. Take a look at this snippet and try messing around with the designs. With 15-20 minutes of tinkering, you might like the result.

See the Pen Spinners using Font Icons by Keyamoon

7. Olympic Rings

This has to be one of the most creative loaders I’ve seen in a while. If you take the Olympic rings and merge them into an HTML document with a dash of CSS, you get this excellent spinner design.

You will find a small amount of JavaScript code, but it doesn’t directly handle the animation. That code handles the delay, which is easier to manage via JavaScript. Everything else is just CSS. Still, you can turn this into a pure CSS solution with just a few alterations.

See the Pen Olympics CSS Spinner by Boomer

8. Pure CSS Android Preload Spinners

If you’ve ever used Android, you’ll recognize many of these loading graphics. They certainly aren’t 100% replicas, but they’re pretty darn close.

And this example uses nothing but pure CSS making it an excellent choice for any web developer to dive in.

See the Pen Pure HTML / CSS Android Preloader Spinner by Andre

9. Bounce Delay Loader

While this example isn’t technically a spinner, it’s still way too cool to leave out. Developer Joni Trythall created these bouncing loader balls from scratch with a bit of CSS and some creative whimsy.

The code itself runs on Haml and SCSS, but you can easily compile that down to raw HTML and CSS within CodePen. That might be easier to copy & paste into your page if you aren’t familiar with preprocessing.

See the Pen Bounce Delay Loader by Joni Trythall

10. Rotating Dots

Last but certainly not least is this super fun rotating spinner loader. It’s made of smaller dots that all go through a cycle rotation. That means it has been designed to slow down at specific points where all the dots align, then speed up to complete another revolution.

This spinner will turn heads on your page, and it’s also subtle enough that it can blend into any layout with ease. Developer Ömer Fatih created this snippet with simplicity in mind so you can get it working with only eight lines of HTML and less than 50 lines of CSS.

See the Pen Pure CSS Spinner by Ömer Fatih

The post 10 CSS Snippets for Creating Loading Spinners appeared first on Speckyboy Design Magazine.