Ems are still the best units for sizing text on the web. There’s only one reason you’re relying on pixels, and that’s because you haven’t yet gotten the hang of ems. Let’s change that! Decorative M courtesy of Frances Mcleod - winner of TypeFight #34 Size is Everything When we build websites, we need to tell the browser how “big” stuff is: “this heading is so big”, “this container is yay high”, “this form is wider than that”, it’s how we layout a page. Pixels have always made perfect sense as the chosen unit of measurement; we’re outputting to a screen, so what else would we use?! However ..read more

It’s possible to build a surprising amount of graphics with CSS alone. Let’s create a cute ladybug icon with just a single div element! A Single Div Demo Here’s our cute ladybug (hover over it). And take a look at the HTML markup; just one single <div> element! We’ll use a combination of CSS gradients, pseudo elements, and box shadows to build our graphic. Let’s jump in! How to Get Creative With a Single Div Before we begin, there are some CSS skills you’ll need. The main problem with single elements resides in the fact that we’re limited to the number of “building blocks” we can us ..read more

Previously, we learned how to create a JavaScript page loading animation with GSAP. Today, let’s make another beautiful loading animation—this time without using any external JS libraries! What You'll Be Creating To better understand what we’re going to build, check out the demo page. Be sure to click on the menu links to repeat the animation. As both animations have similarities, I’ll borrow some content sections from the previous tutorial. This will help keep each tutorial detailed and independent.  Page Animation Demo For this tutorial our demo won’t live on CodePen. As we need diff ..read more

Time to refresh our parallax knowledge with a new exercise, folks! In today’s tutorial, we’re going to create a beautiful parallax scrolling animation and contrast the heading text against the image behind it.  What We’re Going to Build Here’s our parallax demo page—scroll down to see how the text contrasts to the background by changing color! Quick Tip: Create a Very Simple Parallax Effect With CSS & JavaScript In this short tutorial, we'll learn to add a simple yet useful parallax scrolling effect to a hero image. To achieve it, we'll use some JavaScript code. Keep... George Ma ..read more

Interested in building a responsive menu for your next project, but need some inspiration? Whether you’re looking for a mega menu, a dashboard menu, an off-canvas menu, or a menu that will adapt nicely to different screen sizes, you’re in the perfect place; today we’ll explore the best CSS and JavaScript header menu tutorials that are available on Tuts+. For all demos, check them at different screen sizes to see how the layout changes—these embedded versions show at a maximum of 850px wide, which is usually too narrow to see the “desktop” menu variant. 1. Responsive Mega Menus Many website ..read more

Animations are a great way to make a website more interesting; let me show you how. Most animations depend on JavaScript in one form or another, especially when they deal with complicated sequences or occur after a user interaction such as scrolling or clicking. However, if we’re building a simple animation that doesn’t require any user interaction at all, then it can be done purely with CSS. CSS Loading Animation Demo In this tutorial, we’re going to build a banner that with moving elements using only CSS. It uses keyframes, interesting backgrounds, masking—there’s a lot going on! Here’s ..read more

We've covered plenty of techniques for developing different types of charts using CSS or/and JavaScript. Today, I’ll show you how to make a bubble chart with CSS. What We’re Building Here’s the bubble chart we’ll be working on (hit reload to see it animate, and hover over the bubbles to reveal the tooltips): What is a Bubble Chart? A bubble chart is a chart type, considered to be the cousin of the scatter plot, and its primary goal is to visualize relationships between three different dimensions/variables: one is represented by the X axis, one by the Y axis, and one by the bubble ..read more

Interested in some inspiration for creative header effects on scroll? I’ve got you covered! Today we’ll explore the best Javascript-driven scroll header effects tutorials that are available on Envato Tuts+. And most importantly, without using any external libraries! 8 Examples of Animated Headers on Scroll But before going through our implementations, let’s examine eight examples of animated headers during scrolling. Be sure to scroll through the sites to see the effects! Ethan SueroPangram Pangram FoundryFarm to Peoplethe Design MusuemUniversity of AmsterdamThe ServiesRDJÉditions Alto ..read more

In this tutorial, we’ll learn how to embed random content inside a grid layout, a popular technique used in different sites to catch visitors’ eyes and promote their products/services. This is the perfect way to display ads, or promo blocks for your own content. It also gives your layouts an interesting visual break from repetitive grids. As usual, to better understand what we’re going to build, there’s an accompanying demo. But, as this demo uses some PHP code, it needs a server to run. You can download the project files from this GitHub repository. As soon as you’re able to run the demo ..read more

In this tutorial, we’re going to implement an animated snow effect on a webpage using CSS and vanilla JavaScript, just in time for the holiday season. 'Tis the season to be jolly so let it snow, let it snow, let it snow! Animated Snow Demo And that’s exactly what we’ll be doing in today’s tutorial. Here’s the final holiday-themed product we’ll be building: 1. Markup with Holiday HTML For our markup, we’ll have two primary containers: a main element containing the content of our page and a snow-container element that will display the snow. <main> <h1>Happy Holidays!</h1 ..read more