CSS Snippet

Exploring Neumorphism Through Code Snippets – Website Design Article

The web design industry has always been great at throwing around buzzwords. One of the most recent examples is neumorphism – which is supposedly the “new skeuomorphic” for design elements. It’s a UI trend where an element looks like it’s breaking free (or extruding) from its background. If you’re looking for a reference point, it seems reminiscent of that Star Wars scene where Han Solo is frozen in carbonite. But I digress. As with any hot new idea, the web…

Read More

Excellent News and Magazine CSS Layouts – Website Design Article

For those of us who experiment with CSS, it’s an exciting time. The advent of CSS Grid and Flexbox have opened up a whole new world of page layout possibilities. And one of the more interesting uses for these tools is their integration within news and magazine-style websites. They often have more complex and unique layout requirements than other genres. It has led to some very creative solutions. Today, we’ll show you some exciting examples of both news index page…

Read More

8 Fantastic Examples of Audio Visualization CSS & JavaScript Code Snippets – Website Design Article

At the turn of the 21st century, MP3 audio was just hitting the mainstream. Certainly, the portability of these sound files was a big part of their allure. But there was also the unique side benefit of being able to visualize the sound on our computer screens. Audio players such as WinAMP came with visualization plugins, making the experience of listening to our favorite tunes even more engaging. Not only could we hear the music, but we could also see…

Read More

Code Snippets Inspired by Star Wars – Website Design Article

Perhaps no movie franchise has more fans than Star Wars. For over 40 years, each new episode has generated great anticipation – not to mention monster profits. Both the movies and their long list of unforgettable characters have also served as a great inspiration to popular culture. Web design is no exception, as it seemed like the minute people started building websites, online tributes to the franchise began popping up. Naturally, CodePen is teeming with Star Wars-related creations. Everything from…

Read More

Add Scroll Effects & Utilities to Your Website with These CSS & JS Snippets – Website Design Article

Scrolling is among the most basic tasks we ask of users. And, judging from the amount of scrolling on websites and apps these days – we’re asking a lot. Adding scroll-based effects can be a great way to enhance user experience. That is, so long as they don’t interfere with the ability to navigate through long stretches of content. If anything, effects should make things easier and add a bit of flair to the mix. Here is a collection of…

Read More

The Silly Side of Code Snippets – Website Design Article

Sometimes the daily grind of web design can make us take things a little too seriously. While that’s good for getting things done, it can also drain us of the passion we have for our work. It’s not a place where you want to be for the long term. Creating something fun is a great way to rediscover that joy. It’s often the most casual experiments that can relieve stress and bring about excitement. And it’s also an opportunity to…

Read More

A Collection of Clock and Timer Code Snippets – Website Design Article

The act of displaying time is quite popular on the web. But it’s not at all limited to what we typically wear on our wrist or hang on the wall. Sure, a traditional clock can add to the aesthetic of a website or app. However, that’s only genuinely useful in certain situations, considering our device screens already display the basics. An area where time really shines is in counting up or down. Whether you’re displaying the elapsed time of an…

Read More

Shining Examples of the Flashlight Effect Web Design Trend – Website Design Article

2019 has already seen numerous tiny trends where the mouse cursor played first fiddle: mouse trails, repelling effects, interactive 3D globes and fantastic hover effects – to name a few. Playing with the canvas has become mainstream. Everyone wants to become a proud part of it and make a valuable contribution. Indeed, HTML5 and modern experimental JavaScript libraries have opened enormous possibilities for web developers. And, it seems that we have finally moved from the stage of dipping the toe…

Read More

Creating Wild and Crazy Backgrounds with CSS & JavaScript – Website Design Article

The ability of developers to do amazing things with code never ceases to amaze. Sure, functionality still plays a huge role. But these days, we’re also seeing some otherworldly visuals come to life through the help of CSS and JavaScript, among others. 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.…

Read More

10 Examples & Snippets of the Curtain Effect in Web Design – Website Design Article

Bringing a user’s eyes up to content in a non-intrusive way is a kind of a dream for every website owner. We are always looking for ways to draw attention to the message that we want to convey to our audience. Whether it is a promo page, personal portfolio, corporate portal or a travel blog, we need a small helping hand from dynamic solutions. The goal is to enrich otherwise static content and meet the expectations of the modern world.…

Read More

8 Fantastic Pure CSS Border Effect Code Snippets – Website Design Article

Borders are often thought of as small details that are used as a finishing touch to an image or container element. They serve as a nicety, but hardly anything to get excited about. But as CSS evolves, they have the potential to become something more. With more complex coloring and special effects, designers can leverage borders to draw attention to important information. They can also play a role in user engagement and microinteractions. With that in mind, let’s take a…

Read More

12 Stunning Retro Neon Effects in Web Design – Website Design Article

Evolved from the Geissler tube, the neon sign was a characteristic trait of America from the 1920s to the ’60s. It has marked several decades and created its own distinct era – an era of bright, colorful nights with neon marquee signs on every corner. Without a doubt, the neon sign is a thing from the past. It is synonymous with retro style. But it is not as dull as the archaic stuff from the good old days. It has…

Read More

10 Powerful & Inspiring Examples of Explosions in Web Design – Website Design Article

There are many ways to grab the audience’s attention. We are spoiled with choice, even though the current state of technologies is still imperfect. We are experiencing some browser compatibility issues, and not every device can deal with all those grandiose solutions that web developers bring to us. Nevertheless, the days of static websites where images were the main driving force and sliders with fancy transitions were the only spice have gone. We are witnessing an era of bold ideas…

Read More

9 Fantastic Examples of Adding Some Style to HTML Lists – Website Design Article

The HTML list is one of the true survivors in the throwaway world of web design. Trends come and go, but both ordered <ol> and unordered <ul> lists are still as useful as ever. Like most basic HTML elements, these old-timers are quite boring to look at when used within a site’s content (as opposed to navigation, where much more effort goes into styling). Even with a little bit of basic CSS applied, they don’t really quicken the pulse. But…

Read More

12 Stunning Examples of Text Distortion Effects in Web Design – Website Design Article

We all love typography. And when type is set in motion or spiced-up with some dynamic effects, we love it even more. There are so many powerful instruments that encourage us to let our imaginations run wild, so it’s not surprising that there is a rich diversity of solutions. It seems that the sky’s the limit when it comes to prettifying the headlines, taglines or just regular blocks of text. Text distortion effects have recently caught our attention. The “glitch”…

Read More

10 Creative Code Examples of Media Player Design – Website Design Article

With the power of HTML5 and the ease adding multimedia through technologies such as WordPress oEmbed, anyone can add compelling video or audio content to their website. And, while it’s great that default media players are included from a purely functional standpoint, so much more can be done to improve the user experience. The default player may provide basic functionality, but it doesn’t necessarily match your branding or offer some more advanced features. So designers have taken it upon themselves…

Read More

Forge Your Own (Animation) Path with These Snippets – Website Design Article

In some ways, it seems like we’re in the golden age of animation on the web. Mainly because there are so many options for implementing it into our projects. Certainly, you can leverage some high-powered JavaScript libraries to create something other-worldly. But you can also use the effects already built into CSS3 to add movement to your website. Either way, the end user doesn’t necessarily need any fancy hardware or browser plugins to view your creation. That brings us to…

Read More

Better Layouts Through CSS Flexbox – Website Design Article

For many years, it seemed like columns were one of the toughest layout challenges web designers faced. It often took various hacks, such as clearfixes, to get them aligned and looking good. Thankfully, the advent of CSS Flexbox has helped to make this previously-difficult process a much simpler one. Because Flexbox was created with multi-container (columns or rows) layouts in mind, we’ve said goodbye to all of those old hacks. The result is that we can create some absolutely amazing…

Read More

Using Shaders to Create Realistic Special Effects in Web Design – Website Design Article

WebGL has become the subject of experimentation and testing the limits of what is possible on the web. Almost each day we stumble upon grandiose solutions powered by it. As proof, we have already examined a number of real projects. Today we are going to explore some concepts that show the benefits of using shaders. We are going to focus on GLSL. GLSL stands for Graphics Library Shader Language. It is an integral part of WebGL, and responsible for the…

Read More

Code as an Ode to Hackers – Website Design Article

Over the last 40 years or so, it seems that society has become fascinated by the art hacking.  Of course, the nefarious kind is always of concern when it comes to security. But it’s not all bad. Many hackers use their skills to actually improve security and work on projects that are otherwise fun or beneficial to society. Beyond what hackers do, we’re more intrigued by how they do it. Or, at least our perception of how they go about…

Read More

Set Your Text in Motion with These Dazzling Effects – Website Design Article

The trend of setting everything in motion rules the roost these days. You cannot help but to follow this madness and develop an obsession of injecting life into every detail of a website. The static era is gone. Everything is dynamic. And you know what? Users are perfectly aware of it. For some, that is bad news, since it will take Herculean efforts to trick users into believing that a static website brings an exciting experience. For others it is…

Read More