Archive for the 'CSS' Category


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

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 more »

Updates & Checkboxes & Loadbars! Oh My!

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.

Vision, Simple PHP/JS/CSS Photo Viewer

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 more »

Displaying PNG’s in IE - Inline vs External CSS

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.