Archive for the ‘CSS’ Category

July 1, 2010 5

CSS & JS Coding Standards / Organization [OOP]

CSS Javascript

By no means should this article serve as the bible of CSS & JS coding standards, though it should get the ball rolling for those who are unsure where to start. Over the years, I’ve had the privilege of working with many talented developers, each of whom have left little bits and pieces of their coding style behind. From those pieces I’ve assembled this article.

Let’s begin…

Alphabetize Your Code

Alphabetizing your code is an extra organizational step often overlooked. It’s especially helpful in PHP classes containing getter and setter functions, but it also comes in handy for CSS and JS. Often times similarly named elements will be somewhat related in function, so clustering them together makes them easier to find.

I’d recommend alphabetizing everything from JS class and function names, to CSS classes and ID’s. You’ll notice that every code example in this article is alphabetized to further exemplify the point.

Read the rest of this entry »

February 13, 2008 7

Websites Dedicated To Design Inspiration: Web Showcasing, Typography, Digital Art

Art CSS Inspiration

Personally speaking, preparing a new web design isn’t as simple as opening Photoshop. I need constant influence from many creative sources to keep my mind fresh on what’s hot and what’s not. When I need inspirational eye-candy, my sources include CSS galleries, digital prints, and typography demonstrations.

For those who have similar inspirational needs, allow me to lend a helping hand. I’ll list my personal favorite websites categorized by three major design pools: web showcasing, typography, and digital art.

Read the rest of this entry »

Tags: , , , , ,

December 21, 2007 Off

Updates & Checkboxes & Loadbars! Oh My!

CSS Inspiration Javascript Labs

Yep. I’m mixing programming references with The Wizard of Oz. Shut up.

The all-too-awesome PHPMailer class has been updated and is awaiting your download.

If you use MooTools (or even if you don’t), Vacuous Virtuoso’s Fancy Form is totally worth checking out. It’s a mix of CSS and Javascript that enables you to create custom form checkboxes. There are other script on the net that claim to do the same thing, but none are as cross-browser compatible.

Lastly, to add a splash of color to your ajax load processes, check out Bram Van Damme’s Progress Bar Handler. It’s probably the smoothest, best looking non-flash based progress bar on the net.

November 19, 2007 5

Vision, Simple PHP/JS/CSS Photo Viewer

CSS Labs PHP

The simplest image viewer known to man has been created. Visión uses a light touch of PHP, Javascript and CSS to create a straightforward, stylish image viewer. It can be incorporated into any website in under three minutes and takes up less than 20kb of space. Stop reading this and download Visión.

Read the rest of this entry »

October 15, 2007 Off

Displaying PNG’s in IE – Inline vs External CSS

CSS IE

According to Microsoft support , correctly displaying PNG’s in Internet Explorer should be as simple as copying & pasting their example. This is the CSS that Microsoft claims will correctly display :

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png', sizingMethod='crop');

The above code will work for inline CSS, that is, CSS mixed with HTML:

<div id="png_bg" style="position:absolute; left:140px; height:400; width:400;
     filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
     src='image.png', sizingMethod='crop');" >
</div>

If you don’t want to mix your CSS with your HTML, external style sheets are the obvious choice. However the above example won’t work in an external style sheet. Instead, the path to image.png needs to be absolute, like this: /direct/path/to/image.png

Your external style sheet would look something like this:

#png_bg {
    background-image: none;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop, src='/path/to/image.png');
}

Shout at me if I got this all wrong.