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
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.
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.
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.
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.
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 */
}
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.
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;
-moz-border-radius:75px;
-webkit-border-radius: 75px;
width: 150px;
}
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:
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:
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.