Perhaps that’s because the styling options used to be limited. Link color and underlining were the primary options. Hover and focus states seemed to be where most of the creativity occurred. Other enhancements tended to require add-ons like JavaScript.

CSS has changed the game in recent years. Several properties are available to customize the look of hyperlinks. They also provide a higher level of control regarding details like spacing and sizing.

It’s a whole new world of possibilities. Let’s check out some CSS properties that help make hyperlinks more attractive.

A Default Link

We’ll start with a default link configuration. A link color and CSS states were added – but that’s it. It will serve as a baseline as we explore the CSS properties below.

See the Pen Link Styling:Plain by Eric Karkovack

text-decoration-color

It used to be that a link’s underline had to be the same color as its text. The text-decoration-color property allows us to choose a separate hue. It also works with overlines, strikethroughs, and anything else set by the text-decoration property.

We’ve added a brown underline to compliment our green link text.

See the Pen Link Styling:text-decoration-color by Eric Karkovack

text-decoration-skip-ink

This niche property determines how the link’s text decoration interacts with glyphs. The default setting is auto, where the browser interrupts underlines and overlines so they don’t touch a glyph. You’ll notice this with lowercase letters that go below the baseline.

Setting the property to none means the underline or overline draws a straight line – regardless of where glyphs are located.

See the Pen Link Styling:text-decoration-skip-link by Eric Karkovack

text-decoration-thickness

The thickness of a link’s underline typically follows what’s defined in the font-weight property. That is, bold text will result in a thicker underline. This property lets us set a consistent value for every link in the cascade.

See the Pen Link Styling:text-decoration-thickness by Eric Karkovack

text-decoration-style

Text decorations don’t have to be a straight line. This property lets you change the style to dashed, dotted, double, or wavy lines.

See the Pen Link Styling:text-decoration-style by Eric Karkovack

text-underline-offset

Here’s a way to specify how closely (or not) an underline is to the text above. Adding a few pixels of space between them can improve legibility.

Note that this property doesn’t impact instances of the HTML underline tag (<u>). It only affects instances where the text-decoration property is set.

See the Pen Link Styling:text-underline-offset by Eric Karkovack

text-underline-position

Another niche property, text-underline-position specifies the position of the underline relative to its text. Setting it to under is ideal for mathematical and scientific formulas. It makes subscript characters easy to read – even when underlined.

See the Pen Link Styling:text-underline-under by Eric Karkovack

Going Further with Link Styles

Hyperlinks don’t have to be bland. There are now plenty of ways to make them as much a part of your brand as other design elements.

The properties above are all worth considering when styling links. They’re relatively simple to implement and can make links more attractive and accessible. Best of all, they’re native CSS and won’t impact page load performance.

You can also use them beyond default styles. Style them for various states, such as changing the link’s underline color during a hover event. In addition, there’s an opportunity to add animation and transitions to create all sorts of fun micro-interactions.

Just beware – it’s possible to take things a little too far. Always keep best practices in mind to enhance the user experience. Anything that makes links harder to read or use isn’t worth doing.

It’s time to get creative! Experiment with these CSS properties and see how you can bring a little life to your links.

The post CSS Properties to Make Hyperlinks More Attractive appeared first on Speckyboy Design Magazine.

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

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

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

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

CSS-Only Wavy Pattern

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

See the Pen CSS only wavy pattern by Temani Afif

Repeatable Pattern Design with CSS

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

See the Pen css pattern design by Naresh

Gradient CSS Pattern

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

See the Pen CSS pattern by Justyna J

Pure CSS Blue Plaid Pattern

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

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

CSS Frog Pattern

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

See the Pen CSS Pattern Frog by Kaylee Murray

Animated H1 CSS Pattern

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

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

CSS Pattern Noise

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

See the Pen Css Pattern-Noise by Vijay

Bold Pattern with CSS Grid

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

See the Pen CSS-Pattern by Christina Stephan

Coding a Pattern of Success

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

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

The post 8 Code Snippets for Creating Amazing Patterns with CSS appeared first on Speckyboy Design Magazine.

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.

One of the keys to getting conversions (clicks, sales, etc.) is having a clean, easy-to-read newsletter template. But that’s not all. Your newsletters must also be responsive to account for the variety of mobile devices out there.

All told, the goal is to craft emails that are informative and look good on every screen. Thankfully, you don’t have to look far for inspiration. That’s exactly what the simple responsive email newsletter code snippets in today’s collection are for.

These sharply-designed snippets cover a variety of potential use cases. And they’d make a great starting point for your own project. Let’s get started!

You might also like our collection of free responsive newsletter templates.

Email Template Practice

This highly-visual email template provides the perfect look for showcasing your products. The mix of photos and short passages of text will help get the point across without overwhelming users. It encourages readers to click for more details.

See the Pen Email Template Practice by Regina Catipon

Simple Abandoned Cart Email Template

Sticking with eCommerce, abandoned cart emails offer an opportunity to casually remind customers about what’s waiting for them. In this attractive snippet, the message is simple and provides actionable information. It also leverages the popular Tailwind CSS framework.

See the Pen Simple Abandoned Cart Email Template by Maizzle

UI Guild / Email Template

Email clients are still quite limited when it comes to compatibility with the latest CSS techniques. But here’s proof that you can still create something unique. The use of color and typography make this template stand out from the ordinary.

See the Pen UI Guild / Email Template by Edmundo Santos

Invoice email template

Some types of email messages should be as simple as possible – invoices are one of them. Some basic branding and a clear call to action are vital. It’s a solid example of a single-purpose message that provides users with exactly what they need to know.

See the Pen Invoice email template by chetan

VOH Facebook Live

Event invitations are a great way to drum up interest in virtual or in-person happenings. This snippet not only looks great but also serves as a guide for content strategy. Recipients will instantly know what the event is, when it takes place, and how to register. That’s how you do it!

See the Pen VOH Facebook Live by Alisa Longoria

HTML Email Template – Blog

Not everyone has time to check out your blog regularly. That’s where an email newsletter can help keep readers up-to-date. What makes this template sparkle is that it allows for effective branding and breaks posts down into bite-sized chunks. It’s easy for a reader to digest in a short period of time.

See the Pen HTML Email Template – Blog by Josh Beard

BMIC Newsletter Template

Here’s another approach to a news-based email. It focuses on a single article while providing additional clickable headlines below. This might be a terrific option for non-profits who want to highlight a fundraising campaign while also listing other relevant news. In addition, the typography in this snippet makes the newsletter very easy to read.

See the Pen BMIC Newsletter Template by Tom Markart

Welcome Email Template

An onboarding email is a great way to welcome new users. Once again, simple is better. This snippet uses white space and clean typography to fill newbies in on the relevant details. Colorful icons also help to make specific items stand out.

See the Pen Welcome Email Template by Jude Francis

Email Templates for Every Need

In many ways, email template design lags in terms of available features. While that may be disappointing, it’s also an opportunity. Because email clients aren’t as savvy as modern web browsers, it forces designers to strip all the bells and whistles away.

This allows us to focus more on simplicity. It’s about promoting the message within rather than wowing readers with fancy extras. That’s something each of the snippets above does quite well.

The post 8 HTML Code Snippets for Creating Responsive Newsletter Templates 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.

Similarly, we’re also seeing some very interesting logos created with CSS, along with copious amounts of JavaScript and SVG thrown in for good measure. Together they offer a degree of flexibility that other formats do not.

Let’s take a look at ten examples of logos built with a combo of CSS, JavaScript, and SVG. Some are originals, others are from well-known brands:All are worth admiring.

Animated Fireworks

This anime.js logo animation uses a combo of CSS and (of course) JS to create a colorful and dynamic animated logo. Not only is there a cool intro animation, but subsequent clicks on the logo release more fireworks. It’s kind of addictive.

See the Pen anime.js logo animation by Julian Garnier

Scaling With Ease

One interesting advantage of using CSS for your logo is the ability to scale to match any size – much like an SVG file. The example logo below for Shop Talk shows off the pixel-perfect scaling of CSS, right alongside a PNG that can’t quite keep up.

See the Pen Shop Talk logo made in CSS by Hugo Darby-Brown

Handwritten

This example has been around for a while, but it’s still beautiful. The scripted text of the logo is revealed as if it were being handwritten across the screen. It’s simple but effective.

See the Pen Faithmade:Animated Logo by GRAY GHOST

Open & Close

While this white logo looks fabulous on the multicolored background, the real gem here is the play/reverse functionality that was built in. Hitting “play” will make the logo appear via a slick animation, while reverse (you guessed it) does the whole process backwards. This could be useful in situations where, for example, you want to signify the closing of an element.

See the Pen Logo by Marco Barría

Pure Chrome

Here’s a faithful rendition of the Chrome logo, done with pure CSS and in a single HTML element. It shows how much can be accomplished with CSS in terms of creating a seamless look and complicated shapes. The spinning hover effect is also a nice touch.

See the Pen Single Element Google Chrome Logo by Mike King

In the Spotlight

Hovering on either of the logos in this pen will give a “spotlight” effect on the immediate area of your cursor. It adds an element of cool and encourages interaction.

See the Pen Z24 Logo Anmitaion by Nikk Tifan

Unique Drawing Effect

This example is outstanding on a couple of levels. First, the animation that takes the logo from a sort-of technical drawing through to a finished product is fun to watch. Second, the subtly animated gradient background perfectly complements the entire scene.

See the Pen Animating Gradient with CSS by Cody

Minimal, Yet Fun Logo

Okay, minimal and fun don’t usually get mentioned together. But in this case – it fits. This simple logo with a rainbow of animated blocks in the background adds personality to something that would otherwise be quite plain.

See the Pen Logo by Melissa Cabral

Subtly Telling a Story

Animation is one of the big fads in logos, but sometimes it can be a bit too much. What makes this example so great is that the opening book animation is complimentary of the brand without overdoing it.

See the Pen Learnosity Logo by Sam Chahine

Logos Can Do More

For years, we’ve used logos as a mostly static resource. But when you combine the power of CSS, JavaScript, and SVG, a logo can become a place where we can add some real interactivity. And interacting with a logo is, in essence, interacting with a brand.

So not only is this a practice of adding another cool feature to your site – but it’s also an exercise in increasing brand awareness as well.

The post 10 CSS, JavaScript & SVG Snippets for Creating Logos 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.

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.

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.