« Older Entries

Archive for the ‘CSS’ Category

Little jQuery Slider Navigation

Wednesday, February 2nd, 2011
Little jQuery Slider Navigation

I love the little stuff jQuery can do
I was noodling around the other day with jQuery, and decided to share another simple little navigation script. It is only 8 lines of code, which includes the ready function, and closing brackets, so if you actually take into account just the stuff that matters, only 5 lines. You can check out the demo below.

View Demo

Yes, all it does is move the arrow around on rollover, but it is a simple effect and you might be able to come up with something better knowing how to do this.

(more…)

Posted in CSS, Javascript | No Comments »

Tutorial – CSS And jQuery/Ext Trap Door Navigation

Thursday, January 27th, 2011
Tutorial – CSS And jQuery/Ext Trap Door Navigation

Dual library action

I’ll be showing you how to do a trap door navigation, which I’m sure has been done before. But I’ll be showing you how to do it in jQuery AND Ext. Why? Because I had to do it in both at work. A trap door navigation is basically a two image system where the ‘li’ gets one image, and the ‘a’ tag gets another so that as the link expands, the image grows with it. When you rollover each navigation item, the images then change.

Why thought can’t you do this with just CSS? You could try like I did using something like ‘li:hover’, but the problem occurs on when the images actually change on rollover. There are issues with the ‘li’ image changing because the ‘a’ tag is on top and that is what you are rolling over. Javascript is used then to correct the issue. Check out the result:

View Demo

(more…)

Posted in CSS, Javascript, Uncategorized | No Comments »

CSS Variables, Mixins and Nesting Might Be Coming

Friday, January 21st, 2011
CSS Variables, Mixins and Nesting Might Be Coming

If you don’t know Sass…you might want to now

I’ve read a couple of posts/articles in the past week that REALLY got me excited again about CSS. A guy over at Google, Tab Atkins, has hinted at it, and then this article by Johan Brook talks about it as well.

What the hell am I talking about you ask? Well by the title of this post you should have figured it out.You know all those articles I’ve posted about my experience with Sass and how much I love it? Or maybe my artilce on LESS.js? There are other articles around the net where people commented their worries and complaints on why they didn’t need or use it. Well guess what…you might want to rethink that and start learning. Variables, mixins and nesting might be coming to CSS itself. If you didn’t read the article I linked to above, Webkit is thinking about it, and it may be here as soon as the end of this year.

(more…)

Tags: , ,
Posted in CSS, Sass/Less/Compass | 4 Comments »

Trying Out A Simple CSS3 Animation

Thursday, November 11th, 2010
Trying Out A Simple CSS3 Animation

Simple animation, harder to implement

That sums it up quite nicely I think. If you click on the demo below (my actual redesign) and look at it in Chrome (or Safari, though I didn’t look I’ll assume it works there), you will notice that when you roll over the social media icons in the right sidebar, they will change size. I was very proud of myself for accomplishing what I think very few web developers actually use. I’ll go over what I think about CSS3 Animations at the end of the article, but for now, let’s go over how I accomplished this.

View Demo

(more…)

Tags:
Posted in CSS | No Comments »

A review of the 960 Grid System

Tuesday, October 12th, 2010
A review of the 960 Grid System

Thank god for a good tutorial!

NOTE: I am going to review it, not go into detail into how things work – there are plenty of tutorials on that (one of which is listed below.
If not for this tutorial by Joshua Johnson, I will have to admit that the 960gs is terribly confusing. He explains how the grid works in plain english, and what the push/pull classes do. I started my redesign build last night, and as previously stated before, I was going to try my hand at this whole grid thing. Follow along, and you will see what I think.

Learning Curve

Either I’m an idiot, or the 960gs is way harder than I thought it was going to be. How could I not understand what is going on under the hood from the get go? First, it didn’t help that I started with the 16 column while designing in Photoshop, only to realize that I wanted the 24 when I started building it. I am already down for the count, because the grids do not line up the same way, due to there being more margin in the 16 column version.

(more…)

Tags: ,
Posted in CSS, Web Development | 2 Comments »

« Older Entries