Tagged Under: CSS

CSS Quirks with :after and :before Pseudo Elements

May 11th, 2013

My colleague came across some quirks with the less commonly used :after and :before pseudo elements.

Read the Rest... This post currently has no responses.

Bare Bones CSS-based Drop-down

October 4th, 2012

Drop-downs are nothing new at this point. In fact, this trend that started to take off in the late 1990’s has seen many changes and evolution in it’s technology, development and design. Through the use of modern CSS, we are able to ditch the clunky JavaScript, Flash and Applet implementations of yesteryear.

Read the Rest... This post currently has 3 responses.

Fading A Background Image In

September 14th, 2012

Fading in a website background image is not generally an easy task. This is because there’s no opacity state for background images in specific. Fading a solid background is pretty easy using RGBa – not so easy for images. There’s also the issue of when you change the opacity of body (or wrapper) element, everything inside (or the children) are effected as well. In this example, I will be using jQuery to animate the effect.

Read the Rest... This post currently has 5 responses.

Horizontal Menu with a Dynamic Number of Elements Fit As 100% Evenly

September 6th, 2012

Yikes, that title is a mouthful. So why would one need a menu that has elements fit as 100%? Well, for aesthetic reasons┬áprimarily. Unfortunately (fortunately), since tables are no longer around, this has been a big issue for some web designers – especially for those who design for content management platforms or sites that have a menu that changes a lot. Sure, it’s easy to hard code widths in for each menu, but this breaks each time you want to add or remove a item from your menu. Here’s the solution:

Read the Rest... This post currently has 5 responses.

Vertically Aligning Content in a Floated Element

August 26th, 2012

Vertical alignment is a pretty weird thing. It usually only works within table elements depending on the browser. It’s even harder to get working when you are using floats. There’s a cool work-around that is available at your disposal if you do need to use vertical alignment.

Read the Rest... This post currently has one response.

CSS Based Image Dropdown

August 25th, 2012

I was inspired by a recent Steam community page preview where a long image was cropped, but upon mouse hover, it expanded down. It seems like their implementation was using JavaScript; however, I knew I could do this without JavaScript and with some added graphical style for good measure.

Read the Rest... This post currently has no responses.