Matt Lambert

Check out my blog, or sign up to receive articles by email.

Tips for Writing Modular CSS

By admin on May 25th, 2015 in CSS3

No matter how much you love CSS, no one enjoys writing or maintaining style sheets that are 2000+ lines of awesomeness. The smart way to approach your CSS is from a modular stand point. Properly organizing your CSS, breaking it into smaller chunks, and naming classes in a generic way are a few places to start. Let’s review some of my top tips for writing modular CSS

Continue Reading →

Equal Height Columns Using Flexbox

By admin on March 11th, 2015 in CSS3

Do you hate equal height columns? In the past they have been the bane of my existence. They columns need to be equal height? Let’s just redo the layout so they don’t haha. Rejoice Flexbox has arrived and we no longer need to fear the columns! Below is a simple explanation of how you can achieve this holy grail of web design techniques.

Continue Reading →

Creating a Fading Link Transition with CSS3

By admin on January 20th, 2015 in CSS3

Thanks to CSS3, Flash is getting more and more unnecessary. Can’t say I’m sorry, as I hate actionscript. In this tutorial I’ll show you how to create a fading link transition, on mouse over, with CSS3.

Live Demo

Here’s What the CSS Looks Like

First of all, we’re going to setup a regular link as we always would. Second, we’re going to use the transition property to add the fading.

Continue Reading →

Adding An Outline To Your Text Using the CSS3 text-stroke Property

By admin on January 20th, 2015 in CSS3

In this tutorial I’ll show you how to add an outline, or stroke, to your text using the CSS3 text-stroke property.

Live Demo

Here’s What The CSS Looks Like

The first step is to declare a text color, I’ve picked red here. Next, we use the text-stroke property to assign a color (black) and weight (1px). For this example, I’ve created a class called .stroke.

.stroke {
 color: #c00; /* text color */
 -webkit-text-stroke: 1px #000; /* stroke color and weight */

Continue Reading →

How To Create Circles With CSS3 and No Images

By admin on January 20th, 2015 in CSS3

Thanks to CSS3 it’s now possible to create circles with only code. Look ma, no images! In the following post, I’ll show you how to create full, half and quarter circles using only CSS. The trick to creating the circles, is the use of the border-radius selector.

Live Demo

Coding a full circle

Below are the styles for creating a full circle. Underneath the code you’ll see the circle that these styles will output. To create the circle simply assign the same height and width value to your class. Set the border-radius to half of the height and width value.

.full-circle {
 background-color: #c06;
 height: 150px;
 -webkit-border-radius: 75px;
 width: 150px;

Continue Reading →

Animate Bootstrap Form Labels Using CSS3 Transitions

By admin on February 27th, 2014 in Bootstrap, CSS3

I came across a post recently by Chris Coyier explaining how to animate form labels on focus. I thought this was a pretty cool effect but wanted to take it a few steps further. In this post, I’ll enhance Chris’ original code by adding:

  • integration with Twitter Bootstrap form labels
  • hide the form label until the user clicks on an input, or puts it in focus.
  • adjust the look and feel to be a little more minimal.

Continue Reading →

Create a Flat, Long Shadow Icon With CSS3

By admin on January 10th, 2014 in CSS3

Today I’m going to show you how to create a flat, long-shadow icon with the CSS3 text-shadow property. If you’re unfamiliar with the text-shadow property, it takes 4 values:

  1. Value 1 = The X-coordinate
  2. Value 2 = The Y-coordinate
  3. Value 3 = The blur radius
  4. Value 4 = The color of the shadow in hex or rgba

Before we get into the long shadow, let’s create our container, icon box, and icon text. The container doesn’t actually require any styling for this effect to work, but we’ll add a little to it for demo purposes.

Continue Reading →