And web designers aren’t immune from Halloween fever. Indeed, some are decorating the web much like they do their front yards.

That presents us with the perfect opportunity to review some creative examples of how you can turn the latest web technologies into something scary. So, turn the lights down and prepare yourself for some Halloween fun – web designer style!

Beware of The Hockey Mask by Kevin Lehtla

Nothing quite says Halloween like a tribute to a scary movie. This hockey mask is an instantly-recognizable symbol of the Friday the 13th franchise. Notice the subtle red fill animation underneath the mask. That’s no Kool-Aid, kid.

A Friendly Ghost by Anthony Simone

Did you know that some ghosts are more afraid of you than you are of them? Seriously. Check out this shy-yet-smiling ghost, who disappears into a black hole when you hover over him. Thankfully, he reappears elsewhere on the screen just a few seconds later. After all, we mean no harm.

Select a Spooky Sidekick by Diogo Gomes

We’ve seen a lot of cool toggle switches. But we’ve not seen one that toggles from a Jack-O-Lantern to a vampire (most likely because we don’t need one). But here, the theme fits.

Ghost Hunting by Liam Egan

This snippet is not “officially” Halloween-themed, but it sure looks scary. It sports an x-ray style moving background that utilizes Three.js. Move your mouse over an area and it lights up, much like a flashlight beam in the dark. Even more creepy is that everything reacts to your clicks. No, we’re not scared – you are!

Where’d I Put My Head? by Sarah Drasner

There’s nothing quite like a Headless Horseman to get you thinking about Halloween. This gorgeous rendition features the famous “The Legend of Sleepy Hollow” character riding about in a darkened forest. The level of detail here is just stunning.

Better Than the Neighbor’s Yard by Amanda Ashley

As we mentioned earlier, some people really go all-out on the decorations this time of year. This animated example, which uses GSAP, puts them all to shame. A house just doesn’t get more haunted than this.

Make it Your Own by Mike White

One of the true joys of childhood is carving your very own pumpkin. It’s one of the few times you get to make a mess without consequences. But we’re older now, so no more messes. Instead, we can enjoy creating something scary with this drag-and-drop pumpkin. Much cleaner!

Nightmare on My Street by kittons

You want something really scary? Then feast your eyes on every developer’s worst nightmare. The sad thing is that this can happen all year round – not just Halloween.

All Hallows’ Eve on the Web

Halloween has indeed invaded the web. In fact, it was difficult to narrow down the snippets above to just a chosen few. Designers, like seemingly everyone else, can’t get enough of the scary stuff.

May these creepy-crawly examples inspire you to turn your own website into the devil’s playground. At least, for one night.

The post Get into the Halloween Spirit with These Spooky Snippets appeared first on Speckyboy Design Magazine.

But this venerable HTML tag is capable of doing so much more – thanks to some clever CSS. Horizontal rules can be quite decorative, whether you prefer a bold or subtle design. They can also be used as an enhanced branding mechanism, complete with color and logo elements in tow.

If you’re looking to take your HR up to the next level, you’ll want to check out this collection of fanciful dividers that go beyond the default. Let’s dig in!

The Measure of an HR by John W

This example is incredibly clever, if a bit on the extreme side. It features a large conglomerate of <hr> tags (100 in all) that are styled to simulate the look of a ruler. Practical? Maybe not. But it’s certainly creative.

See the Pen A Horizontal rule-er by John W

Inline Lines by Ohad

While this snippet doesn’t use an actual horizontal rule, it simulates the effect with CSS. Text or other design elements can be placed inline with the divider, making for an attention-grabbing effect. It’s also delightfully simple in terms of code.

See the Pen Inline horizontal rule by Ohad

Iconic HR Shapes by szpakoli

Here’s proof that subtlety can still stand out. A standard horizontal rule is enhanced with shapes (circle, diamond, star, etc.) and provides for an attractive visual. Combined with the rule’s short width and bright color, it helps readers delineate one section of content from another.

See the Pen Fancy Horizontal Rules by szpakoli

Accordion Rules by Will Boyd

Accordions have become one of the more popular UI elements due to their penchant for being space savers. This pure CSS take on the feature includes horizontal rules as part of the user interface. A rare instance of the good old <hr> being used for functional purposes.

See the Pen Accordion Effect with Horizontal Rules by Will Boyd

Simple HR Style Variations by Mark Murray

This snippet offers nine interesting horizontal rules that can fit a variety of styles and use cases. Examples include the usage of symbols, centered text, colors and border patterns. There’s something here for everyone.

See the Pen Some HR Styles by Mark Murray

Medium Style with Accessibility by Zoë Bijl

Placing text inside a horizontal rule can be tricky. It often involves techniques that aren’t very accessible. This snippet is different, as it utilizes content from <h2> tags. It not only offers a cool Medium-style aesthetic, but it’s friendly to screen readers as well.

See the Pen Accessible Medium Style Dividers by Zoë Bijl

Decorative & Minimal HR Designs by Ibrahim Jabbari

Perhaps you’d like your dividers to look nice without distracting from the rest of your content. This collection of 18 simple styles is for you. The effects are well-executed without going over the top with flashy features.

See the Pen 18 Simple Styles for Horizontal Rules (hr CSS Design) by Ibrahim Jabbari

Charlie Brown’s Shirt or Bart Simpson’s Hair? by m0cha

When viewing this zig-zag pattern, one conjures up images of cartoon characters. But its also a clever bit of code. It’s a combination of two <hr> tags with angled CSS gradients. Now, which character does it best represent? Let’s go with Bart’s hair.

See the Pen Zigzag Horizontal Rule by m0cha

(Horizontally) Divide and Conquer

Sure, the default styling of a horizontal rule gets the job done – but where’s the fun in that? Take a cue from the examples above and create something that compliments all of your great design work.

The post 8 CSS Snippets for Creating Horizontal Rules & Dividers appeared first on Speckyboy Design Magazine.

While chat has changed quite a bit since those early days, it’s still every bit as relevant. Only now it has become a staple of customer service and team Slack channels.

And communication has been further improved by the latest CSS and JavaScript techniques. They allow for creating amazingly interactive UIs, while providing more advanced functionality as well.

Today, we’ll show you eight interesting and unique chat UIs. They’re so great, you might even LOL.

Messaging App UI with Dark Mode by Aysenur Turk

Facebook Messenger is wildly popular and it’s no wonder developers are looking to imitate it. The look is simple, effective and instantly-recognizable. Here’s a remix that includes an ever-so-trendy dark mode option.

See the Pen Messaging App UI with Dark Mode by Aysenur Turk

Daily UI #013:Direct Messaging by Fabio Ottaviani

Glassmorphism is a popular look these days. Here, a touch of its style is used to liven up this private messaging UI. Thankfully, the result is miles away from the boring, plain-text chat apps of the past.

See the Pen Daily UI #013:Direct Messaging by Fabio Ottaviani

MSN Messenger 7.5 Visual Demo with WebComponents (HTML+CSS+Javascript) by Manz

Speaking of the past, this UI snippet recreates the look of MSN Messenger. It’s pretty authentic, right down to the chunky 3D icons. Not only does this show how far we’ve come, but it’s also a nice exercise in using modern styling to bring back an old favorite.

See the Pen MSN Messenger 7.5 Visual Demo with WebComponents (HTML+CSS+Javascript) by Manz

floating website chat button (intercom inspired) by neil kalman

Here’s a trend we’re seeing just about everywhere. The “floating” chat UI that’s uncomfortably stuck on the bottom right of the screen. Click the button and start typing away. It certainly is handy, especially for sales and support purposes. Just beware:you’re probably talking to a bot, rather than a real human.

See the Pen floating website chat button (intercom inspired) by neil kalman

Mock Chat Animation by Jacob Foster

Perhaps you’re in the beginning stages of a chat-based project and haven’t fully figured out the UI just yet. No worries, as this mock chat animation snippet can serve as a solid stand-in. The demo is clean, colorful and inspiring. That makes it perfect for wireframing.

See the Pen Mock Chat Animation by Jacob Foster

Stylish chat window design by Mamun Khandaker

For those who use chat to provide customer support, it’s likely that you’re dealing with multiple conversations. This UI snippet provides a solution in the form of neatly-arranged windows. Each one can be minimized and maximized. Notice the status indicator icons within the title – making it easier to see what’s going on.

See the Pen Stylish chat window design by Mamun Khandaker

Simple Chat UI by Sajad Hashemian

Like most design-related things, simple is often better. Chat UIs can become littered with goofy effects and unreadable fonts. But not here. Instead, this “Simple Chat” is intuitive. Best of all, you won’t need to zoom in to read it.

See the Pen Simple Chat UI by Sajad Hashemian

Club Command Line by Jon Kantner

There’s no rule that says chat has to be a text-only experience. Certain instances may call for something a bit more fun. And that’s exactly what this video game-like chat UI does. Use your arrow keys to move your character around and chat up a storm. If you want to keep better track of the conversation, the “View Chat” button pulls up a text archive.

See the Pen Club Command Line by Jon Kantner

BRB, Building a Better Chat UI

With so many cutting-edge technologies available, there are a world of possibilities for chat UIs. Yet, the overall goal should be the same. No matter what bells and whistles we add to the mix, the idea is to create something that’s easy to use and understand.

The other lesson here is that the design choices we make should be based on need. For example, some of the snippets above would be great for an online gaming community – but not so much for a corporate sales channel. A user interface works best when it reflects the people it will serve.

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

Accordions are also evolving quite a bit. Thanks to advancements in CSS and JavaScript, it’s now possible to go well beyond the standard UIs we’re used to seeing. Everything from animation to alignment can be tweaked to create something unique.

Today, we’ll introduce you to eight accordion UIs that showcase what can be achieved with modern coding techniques. Let’s get started!

Pure CSS Horizontal Accordion by Aysha Anggraini

Accordion UIs have traditionally been vertical – but no rule says things have to stay that way. This horizontally-oriented snippet reveals content on hover. Even better is that there’s no JavaScript required.

See the Pen Pure CSS Horizontal Accordion by Aysha Anggraini

Funky Pure CSS Accordion by Jamie Coulter

CSS both powers and styles this accordion, turning it into an interactive event list. Animation is used to aid in tab transitions and introduce decorative icons. Overall, it’s a slick UI and demonstrates that accordions can be both useful and beautiful.

See the Pen Funky Pure CSS Accordion by Jamie Coulter

Minimal Accordion in React by Matthew Vincent

JavaScript libraries such as React are also fertile ground for building accordion components. This attractive snippet features smooth animation and a minimal design. It’s a perfect fit for modern web applications.

See the Pen Accordion – React by Matthew Vincent

Native Accordion with <details>by Giana

With the details HTML element, you no longer need other languages to create an accordion UI. As in this example, CSS is merely used as a way to enhance the styling. This native feature means great performance and more accessibility. Oh, and it’s also supported by all modern browsers!

See the Pen Native accordion with <details> by Giana

ARIA Accessible Accordion by Kiri Egington

Accessibility is a prime concern for all UI elements. For accordions, the focus is on more than just having readable fonts and acceptable color contrast ratios. The ability to navigate each section via keyboard is also important – which is where this snippet comes in. By using the TAB and ENTER keys, it’s possible to go through each section and consume its content.

See the Pen ARIA Accessible Accordion by Kiri Egington

Gracefully-Degrading <details>Accordion (Vanilla JS) by Keith Pickering

As we previously mentioned, an HTML-powered accordion is possible via the details element. However, the user experience can still be enhanced. Here, CSS and vanilla JavaScript has been used to add animation and calculate each section’s height. If a user doesn’t have JavaScript enabled, the UI will gracefully degrade.

See the Pen Gracefully-degrading <details>accordion (Vanilla JS) by Keith Pickering

Pure Accordion CSS by Tuna

This pure CSS accordion demonstrates what a few clever design features can add to the mix. The author makes great use of typography to ensure that each section’s title stands out. In addition, hashtag links are used to theoretically take users to related subjects. There are a lot of possibilities to fit into a relatively tiny space.

See the Pen Accordion by Tuna

Responsive CSS Accordion Gallery with Zoom Animation by Daniel Subat

An accordion-based photo gallery? Not only is it possible, but also very nicely implemented in this snippet. There’s a lot to explore:CSS image filters, hover effects and transforms make for a compelling UX. Despite all of that goodness, the amount of code behind the scenes is minimal.

See the Pen accordion gallery zoom animation (css, responsive) by Daniel Subat

Bring Out the Accordions

Accordion UIs have withstood the test of time. Thankfully their looks have finally caught up to their utility. Designers can take advantage of the latest CSS to achieve virtually any style, while JavaScript can add advanced functionality.

Perhaps the biggest revelation is the ability to create these interfaces using native HTML. This puts compatibility and accessibility at the forefront. It also ensures that we’ll be adding accordions to our projects for years to come.

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

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

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

The post 8 CSS & JavaScript Snippets for Adding Scroll Effects to Your Website appeared first on Speckyboy Design Magazine.

For example, a split-screen can also be used to great effect as a full-page layout or even as a transitional animation.

Here are 10 examples of split-screen UIs, complete with source code that you can edit to fit your needs. Each has something unique to offer.

The post 8 CSS Snippets for Creating Split-Screen Layouts appeared first on Speckyboy Design Magazine.

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

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

Big Steps by Ana Tudor

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

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

The Wheel of Information by Sarah Drasner

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

See the Pen Responsive Animated Infographic. by Sarah Drasner

Interactive Pie by Shalabh Vyas

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

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

Say It with Stats by Tiffany Rayside

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

See the Pen CodePen Stats InfoGraphic by Tiffany Rayside

Dynamic 3D Chart by Archer

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

See the Pen Dynamic Infographic by Archer

Card Game by Sergiu Mocian

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

See the Pen Infographic smooth cards view by Sergiu Mocian

Clickable Details by Ntara

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

See the Pen Bosma – Interactive SVG Infographic by Ntara

Know Your Coffee by Julie Park

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

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

Doing More with Data

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

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

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

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 look at some examples of borders that are further enhanced with the best that CSS (and maybe a little JavaScript) have to offer.

The post 8 CSS Code Snippets for Creating Stunning Border Effects appeared first on Speckyboy Design Magazine.

When designed well, each card can stand out from the list and is easy to read. The use of additional effects like hover states and image filters can enhance things even further.

Here are ten examples of CSS content cards that are both beautiful and functional. Best of all, you’ll have access to source code to inspire your own projects.

Responsive Material Design Card by David Foliti

These cards feature Google’s Material Design principles and are gorgeously interactive. Clicking the hamburger menu sets off a slick animation in which the photo shrinks and detailed content is displayed. Think of it sort of like the online version of a traditional trading card.

See the Pen Material Design – Responsive card by David Foliti (@marlenesco)

Google Inspired Flip Cards by Ettrics

Inspired by the information shared in the Google Now personal assistant, each card features a dramatic drop-shadow effect and “flips” upon click or touch to reveal more content.

See the Pen Google Now Inspired Flip Cards by Ettrics (@ettrics)

Parallax Depth Cards by Andy Merskin

Designers looking for something truly unique will love Andy Merskin’s creation. Hovering over these photo cards will result in their changing perspective with a parallax scrolling effect tied to your cursor position. Text content is also simultaneously revealed. This one is just breathtaking.

See the Pen Parallax Depth Cards by Andy Merskin (@andymerskin)

Product Card by Virgil Pana

When it comes to online product listings, simple is usually better. Such is the case with the beautiful simplicity of this product card. Need more detail? Hovering reveals sizing and color information. The result is an exquisite UI.

See the Pen Product Card by Virgil Pana (@virgilpana)

Article News Card by Andy Tran

For a news or blog-focused website, this card design offers just about everything you could want in a well-organized format. Category, date/time, commenting, headlines, and plenty of room for a photo is all right there. Hovering reveals a story excerpt as well.

See the Pen Article News Card by Andy Tran (@andytran)

Blog Cards by Chyno Deluxe

We’re so used to seeing cards in a vertical format. That’s one reason why seeing Chyno Deluxe’s horizontal layout is so striking. The other reason is they just look amazing.

The design is very well put together, with the angled photo edge adding a classy effect. Hovering reveals more content layered above the photo.

See the Pen Blog Cards by Chyno Deluxe (@ChynoDeluxe)

Material Design:Profile Card by Emil Devantie Brockdorff

I’m a big fan of subtlety in design, and this Material Design Profile Card has it in spades. The light border around the photo brings that extra bit of attention to it.

Depending on screen size, the card will switch between horizontal and vertical layouts. The overall layout is just so simple – just what a profile card ought to be.

See the Pen Material Design:Profile Card by Emil Devantie Brockdorff (@Mestika)

CSS News Cards by Aleksandar Čugurović

This card design is functional, beautiful, and doesn’t require any JavaScript. Either of the included looks would be great for showcasing blog posts. The full-sized photo version on the right is perfect if you really want to focus on featured images.

See the Pen News Cards – CSS only by Aleksandar Čugurović (@choogoor)

Flexbox Cards by Lindsey

One of the nice aspects of this layout is that it adapts well to multiline headlines. So often, we’re forced to trim headlines to an unnatural length, which gives us a bit more freedom. Beyond that, this pure CSS design is attractive and quite easy for the user to follow.

See the Pen Flexbox Cards by Lindsey (@cssgirl)

Recipe Card by Kevin Lesht

This Recipe Card layout will surely get some mouths watering. It’s a bit wider than most cards seen in this roundup. It’s the perfect size for showcasing a dash more content. The use of icons adds to the index card look.

See the Pen Recipe Card by Kevin Lesht (@klesht)

It’s in the Cards

While CSS content cards provide a high level of organization to your layout, they also offer an opportunity for some extra creativity.

You’ll notice that many of the examples shown here take advantage of hover and click states to both share more detailed information and show off some incredible special effects. In that way, they’re much more flexible than what you see at first glance.

Take some time to experiment with the card layouts above – they may even inspire you to come up with some designs of your own. They’ll give users a visually interesting and fun way to interact with your content.

The post 10 CSS & JavaScript Snippets for Creating Content Cards appeared first on Speckyboy Design Magazine.

At the very basic end of the scale, a polygon may be used to create a button or a simple background. But they can also serve as incredibly detailed UI elements as well. The trick is in leveraging the power of both CSS and JavaScript to put these creative ideas together.

We’ve collected some stunning examples of what polygons can do. You might just be amazed at some of these implementations – let’s get started!

Foldable Fish by Yusuke Nakaya

A series of shaded triangles has been turned into…a school of fish? That’s right. This pure CSS animation brings a little bit of ocean right to your screen. Notice the lifelike movement of each fish – complete with a perspective shadow below.

See the Pen Only CSS:Polygon Fish by Yusuke Nakaya.

Origami Bird by Simin

Here we have a masterful representation of an origami bird. The use of both shapes and shadows makes this look just like the real thing. A gentle animation serves as the perfect finishing touch. This entire piece is done with HTML and CSS.

See the Pen Origami Bird by Simin.

Over the Falls by CJ Gammon

This nature scene uses polygons to create depth and a little bit of fantasy. The jello-like liquid motion is recognizable, but still tame enough avoid conflicting with the content overlay. A fun illustration that lends itself to storytelling.

See the Pen The Great Fall by CJ Gammon.

A Fitting Tribute by Yuanchuan

Ikko Tanaka was a Japanese graphic designer whose work often made interesting usage of polygons. Therefore, it’s only fitting that his creations are remade via CSS. This presentation captures Tanaka’s style and is also a great example of CSS grid, clip paths and other advanced techniques.

See the Pen Ikko Tanaka (pure CSS) by yuanchuan.

David Bowie by Joe Harry

Speaking of beautiful tributes, here’s one to the late great David Bowie. The rock music icon is the star of this jQuery-powered low-poly animation. Ever into technology, Bowie himself may well have loved this depiction.

See the Pen Long Live Ziggy Stardust by Joe Harry.

Virtual Library by Andy Barefoot

Sporting an eye-catching CSS grid layout, this book display would be a perfect fit for an eCommerce shop. Thanks to the diamond-shaped grid, it’s at once complex, symmetrical and easy to digest. A snazzy hover effect also adds to the atmosphere.

See the Pen Responsive CSS Grid – Books by Andy Barefoot.

Matchmaker by Paulina Hetman

Check out this fun memory matching game. It utilizes super-cute polygon illustrations of animals and other common objects. CSS makes it enjoyable to look at, while JavaScript powers all the behind-the-scenes functionality.

See the Pen Tangram Memory Game by Paulina Hetman.

A Beautiful Background by Chris Johnson

Background textures are a common use for geometric shapes. You can see why when viewing this example. It utilizes Delaunay triangulation to create a colorful-yet-subtle animation that would be sure to grab a user’s attention. Imagine using it in a hero area or other prominent place.

See the Pen Tesselation Transition by Chris Johnson.

Shaping the User Experience

The level of detail in the above code snippets are an inspiration. Each takes simple polygonal shapes and turns them into works of art. It’s a testament to the power of both code and creativity.

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