Spencer Fuston

How to use Transitions in CSS3

2009-11-14T20:06:00.000-06:00

So CSS3 is getting a lot of hype right now & I've been playing around with a few new features, One of them being CSS Transitions. As you can probably tell from the name it's a way to animate between an "on" state and an "off" state. Now this will only work in Safari but has a nice fall-back for other browsers(which we'll talk about).

How to use it

Like most new properties in CSS3 it uses a browser extension Ex: -moz-box-shadow.


a { color: #999; -webkit-transition: color 0.3s linear; }
a:hover { color: #000; }

At first, it was a little confusing but I'm used to it now. First, you declare what property you want to animate between, the amount of time it will take to go from "off" to "on", & the easing. If you're familiar with After Effects, easing will make much more sense to you at first. If you aren't, all it is, is the interpolation between the two points(It'll go fast then ease into the "on" state or visa-versa). The other properties you can pass into it are ease-in, & ease-out.

The nice thing about using this is that it has a really nice fall-back for older browsers or browsers that us not support it. It just does a hard change from "off" to "on". Not a big deal but you just don't get that extra level of niceness.

Back Up & Running

2009-10-30T20:42:00.002-05:00

You might have noticed that I took a little break threre—sorry—but I'm back and ready togo. I haven't been posting for awhile because the hp I was running on died… ya. So after a few trips to Best Buy & a whole weekend of talking my parents into getting me one I am now happy to announce that my a Mac! I got the new 27"(Which is amazing!) iMac & it's awesome.

I've been wanting a mac for what feels like forever & for good reason: Textmate(among other reasons), and it's awesome. I won't go into it too deeply in an effort to not sound like a fan-boy or to make it seem like I'm reviewing Textmate. I'm also enjoying Mail, Tweetie, Spaces, & Terminal.

Not only am I rockin' a new iMac but I'm also working on several different projects. Some of which I'm keeping secret for now but others are open for everyone. One of those being, I'm working on my own CSS framework. Not to reinvent the wheel but I thought that I'd just take the time to make my own that is personalized for me specifically. For instance: I have my own reset that I like to use that kinda makes me nervous while using with another framework. Maybe I'm being superstitious but it bugs me.Anyway I should be on my regular schedule from here on out.

Sketch of the Week #1

2009-10-14T23:54:00.004-05:00

In an attempt at improving my drawing ability, I've decided that I'm going to start a new series called The Sketch of the Week. As the name implies it's a weekly sketch by me. This will hopefully turn blogging into a regular thing for me since I've been putting it off. The sketches will start today but will normally be posted on Friday. This should give me enough time to draw at school.

Octo-burger

Dream text editor

2009-10-04T21:05:00.002-05:00

Today all my wishes came true, I found Textshell. I've been looking for a good text editor for awhile… I used Intype for awhile but found it a little depressing how long of a wait it'll be until it launches. Admittedly, I used Dreamweaver for a week or two, being very strict on the features that I used. My most recent code-editing blunder happened this week, I gave in & installed the monstrosity that is e text-editor(ewww!).

Today, I just happened to stumble across a link to Textshell. I took one look at it & new that it was the answer to my prayers. Now this goes without saying but what defines a good text editor on Windows is how close it is too Textmate. Say what you want but that's what it all boils down too. Textshell could definitely use a UI face lift but it's not horrible.

The killer feature for me is the integration with Texmate specific files. For instance I can use a theme made for Textmate with Textshell—how awesome is that!

I do have a few problems though:

It has this weird always-on-top thing going on & it kinda bugs me.
It comes pre-packaged with all of the Textmate snippets & some of them only work in Textmate.
I can't just close a project I have to open a whole new window.

Demo

Typography 101

2009-09-28T22:15:00.002-05:00

Typography is kind of a hot topic right now, with Typekit is getting closer to launching & other technologies like sIFR ,FLIR, & Cufón. Typography is one of those things that's kinda hit & miss. Most of the time you just have to experiment with line-height, font-size, font-weight, text-indent, etc… But there are a few core concepts that you should keep in mind.

Leading


p { line-height: 15px; }

When I was building my first site I didn't give that much thought to line-height but it really can help or hurt the readability of your site. For example a nice average height is nice to read but if it's too short the letters can overlap and totally kill your readability. In contrast if the height is way too much it can make it a little tiring to read.

Measure

The length of a line of type is known as the measure. Your eyes get into a rhythm will reading & you should try not to disrupt that. When you read a paragraph, your eyes tend to wander & get distracted if a line is too long. A measure that is too short is tiring or even painful to read. Try to keep your measure to around 40, at the least, to 80, at the max, but this depends on your font size.

Rhythm

To achieve good readability using a baseline grid is essential. The key here is to Stay consistent! In order to do this keep all of the margins the same as the line-height, basically. On this site I did the following:


p { font-family: Helvetica; font-size: 14px; line-height: 20px; margin-bottom: 20px; }
h3 { font-family: Helvetica; font-size: 37px; font-weight: bold; letter-spacing: 0.1px; line-height: 20px; }

You'll want to play around & develop your own style but again stay consistent.

Contrast

Traditionally white text on black is the most readable type. Truthfully, black on white can get boring & may not fit your design in the first place. The concept remains, if your against white try to stay above #cccccc & don't go too dark if your against black.

Scale

If you've ever tried to read an article with a huge body type size, you'll know how important scale is. For body text I wouldn't go over 21px but I wouldn't go under 12px. Headers are a little more fexible, don't go over 60px in most cases.

Did I miss anything? Thing I'm an idiot? Leave a comment & let me know.

Use CSS to format text

2009-09-27T11:57:00.002-05:00

Some people don't realize that CSS can format text. For instance, you could hard-code all your titles in all caps(you probably shouldn't ever do that) but what are you going to do when you go to redesign & don't want all your titles in all caps? You'd have to go & retype every title on your entire site. CSS has a couple of properties that will allow you to type your titles any way you want & they will all be formatted the same.

Text-Transform

Text-transform, the property we are talking about, has three properties that you can pass it. Capitalize, uppercase, & lowercase. Capitalize literally capitalizes the first letter in each word, uppercase capitalizes every letter in each word, & lowercase capitalizes none of the letters in each word.

Examples

This IS Capitalized.

THIS IS UPPERCASE.

this is lowercase.

The CSS


#div h1 { text-transform: capitalize/uppercase/lowercase; }

Marble Machine

2009-09-26T13:36:00.001-05:00

Recently, I've been playing around with Cinema 4D & the new Mograph 2 dynamics. I was inspired by Nick's marble machine & decided to make my own. I've only built the parts so far but I'm definitely working on the full working thing. So stay tuned for that.

Marble Spiral

This was the first major roadblock in building this. First of all, I couldn't figure out how to make a real object out of a spline... later I found out that the Extrude Nurbs did the trick. Secondly, just trying to keep the marbles on the track was almost impossible but I keep tweaking the Rigid Body tag until they stuck.

Track prototype before/after

Before

After

I thought it would be kinda cool to see how much better textures can make your whole scene look.

Random Awesomeness

Circles and Spheres

2009-09-22T21:56:00.004-05:00

If you don't know, Five Second Projects are a weekly or bi-weekly projects created by Nick Cambell. This weeks project theme is Circles and Squares. A focused on experimenting with sound, timing, & I also render the sphere in Cinema 4D and brought it into After Effects as a .mov with transparency.

How I Made the Growing Boxes Video Part 1

2009-09-19T21:43:00.014-05:00

If you've been following my Vimeo videos you'd see that lately I added a new one called "Growing Boxes" & as promised I'm doing a two-part series about how I made it. This first part will be focused on making the pre-comps & the next one will be about positioning & timing the boxes.

Final Effect Preview

Download The After Effects Project File.

Step 1

Make a new composition with a width of 1280px, a height of 720px, a length of five seconds, & a frame rate of 30fps(below).

Step 2

Make a new solid with a width & height of 600px with a color of orange(or any color).

step 3

Mask out the bottom of the square & set a Mask Path keyframe at the beginning of the comp.

Move the playhead a few frames down & make a keyframe that reveals the rest of the square.

This is optional but I used the Graph Editor to make it go really fast at the beginning & get slower as it goes on.

Step 4

Next, make the square 3D & set the anchor point to 300px on the z axis. If you didn't make your solid 600*600px set the anchor point to half of your size. I did that so that when I rotated the squares later they line-up perfectly. You could also set the squares to Alpha Add to get rid of the little one pixel border around the box later.

Step 5

Duplicate the layer 3 times & set the rotation on the x axis to 90, 180, & -90.

Step 6

Now that your layers are organized into a box you need to stagger them in the timeline.

Step 7

Now, your going to have to duplicate all of those layers(important!) and pre-comp them.

Step 8

Now comes the boring part, change the color of each layer(ctrl+shift+y), duplicate, & pre-comp. Your going to have to do that a bunch of times until your happy. I made a orange, gray, & blue of each.

How to make a fading in/out back to top button

2009-09-16T22:50:00.005-05:00

As you have probably noticed, if you scroll down far enough on my blog a little button fades in & you can click it to go back to the top of the page. I accomplished this using jQuery & two plugins. The first one, that does most of what we want was made my David Walsh. The second one, that actually scrolls back up was, made by Ariel Flesler.

What are we doing?

Ok, we want to make a link that fades in as you scroll down & then brings you back to the top of the page right? It's just a little nicety that's not really appropriate on every site so I'll let you be the judge on whether or not it is for your site.

Down to business

Right, so the first thing you'll want to do is get both of the plugins I mentioned above installed along with the jQuery library. Next you'll need to make a anchor with a href to a blank div at the top of your page, or something at the very top of the page… Ex: #logo-div.

Style your link

Realistically, you'll have your own CSS but this just what I had.


a#top { 
  display: none; 
  position: fixed; 
  right: 10px; 
  bottom: 10px; 
  color: #fff; 
  font: normal bold 12px Helvetica;
  text-decoration: none; 
  background: #888; 
  padding: 5px 10px;  
}
a#top:hover { 
  background: #111; 
}

Now for the good part

This the real meat & bones of the effect here.


$(document).ready(function() {
 $('#top').topLink({
   min: 400,
   fadeSpeed: 500
 });
 $('#top').click(function(e) {
   e.preventDefault();
   $.scrollTo(0,300);
 });
});

Hi

2009-09-15T22:45:00.000-05:00

Well, this is my first post on my soon to be official blog. I'm not quite done with the theme just yet but I'm definitely close. When that's done i'll hopefully post a new article every sunday whether it be a tutorial, update, random crap, etc. So what do you guys think? Any suggestions? Screencasts? Q and A kinda thing? Don't care? Let me know.

Quick Update: I think I've decided what I'll be posting mainly tutorials about Web Design, Development(well kinda), Motion Design and 3D

Typography Test

2009-09-15T21:35:00.001-05:00

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus

Heading 1

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Spencer Fuston

This is a link.

Something
Something else
Another thing