Now Viewing
the tutorial

Subscribe via RSS

Using @supports To Test For Clip-Path

I stopped using Modernizer a few years back for a few reasons, mainly because I wanted to drop as many dependencies and scripts as I could. I was using Modernzier mainly for smaller visual items that wouldn’t be missed if certain users couldn’t see them, so I didn’t see it as a critical script. Since then, I’ve been using CSS3 features...

Read More

Replacing JS Functionality with CSS Properties

One of the things that excites me most about the newest features of CSS, is the ability to replace a lot of the JS I’ve been using. While I’m not hating on Javascript (or jQuery, which is what I use), there’s no argument that script languages come with a lot of potential issues. There’s more overhead involved, more files to...

Read More

Fancy Animated Hamburger Menus

I made a quick pen for yall to create a hamburger icon that animates to an X for close. Super simple with just a few lines of CSS and JS! <a class="fancy-menu" href="#"> <span></span> <span></span> <span></span> </a> <a class="fancy-menu" href="#"> <span></span> <span></span> <span></span> </a> .fancy-menu { display: inline-block; }   .fancy-menu span { background: #000; border-radius: 3px; display: block; height:...

Read More

Responsive Angles

I had a design I needed to code that was a bit of a fun challenge. Here were the requirements: The header looked like a “tab” on top of a utility nav that was transparent There was a diagonal angle on the right side of the logo, on top of the utility nav, with a white background expanding 100% of...

Read More

CSS3 Transforms Card Flip Animation

Short and simple this week! I needed to code a card flip animation on hover for a client. I love how simple it is to create cool animations in CSS3. Just a couple lines of code needed! Just uses CSS3 transforms and some backface-visibility. See the Pen CSS3 Transforms Card Flip Animation by Amber Weinberg (@amberweinberg) on CodePen.

Read More

Vertically and Horizontally Align Any Element with CSS3 Transforms

A super simple and foolproof way of centering anything. It works with relative or absolute positioning, which makes it more versatile than other methods I’ve seen. Note: if you’re using position relative to horizontally align your element, it must have a definite width See the Pen Horizontal and Vertical Align Anything by Amber Weinberg (@amberweinberg) on CodePen.

Read More

CSS3 Content Rollover Animations

I’ve recently had a few different clients request some snazzy rollover animations. Basically an image with a title at the bottom, that on rollover moves to the top of the image with a bit of content below. Not one to make things jerky and plain – I decided to jazz this up with smooth animations and fading content – and...

Read More

Using JS to Hide Site Until Loaded

I recently needed to hide the entire site until everything was loaded and ready, due to using a scroll loading script, which was making the content flash before it was ready to fire. I made a super easy way to do this, using CSS opacity, a tiny bit of JS and a non-JS fallback for usability. In your CSS: body...

Read More

Advanced WordPress Tutorial: Making a Switching Category Menu

A client of mine wanted to make a horizontal menu that listed all of their categories. Easy enough! But the client was going to have lots of categories, which meant that most would either have to be left out, or the horizontal list of categories was going to have to be multi-line. Not so good. So they asked if I...

Read More

Quick Sticky Headers with jQuery

I had to write a quick little script for sticking my header to the top of the viewport after the user scrolled past it in the document. It was originally about 200px down the document, and then as soon as it hit the top of the viewport, it sticks permanently. It’s quite an easy thing to do: $(window).scroll(function() { var...

Read More