Javascript Scroll linking

JS: Repeat write text

Menu pop up

CSS: Text Shadows

Did you know pure text drop shadows can be elastic and yet remain stable? Did you know pure text drop shadows can be elastic and yet remain stable?

Rounded borders with images

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ornare ultricies libero. Donec fringilla, eros at dapibus fermentum, tellus tellus auctor erat, vitae porta magna libero sed libero. Mauris sed leo. Aliquam aliquam. Maecenas vestibulum.

Rounded borders without images

Everybody loves rounded corners. A plethora of articles have been written about how to do it, but this is going to be different. This article is going to show you how to make rounded corners without images. That’s right. Without images.

Why would we do such a thing? Here are a few advantages:

Speed: No images to download, therefore the page is quicker loading and less bandwidth is used.

Time: Does anyone like the tedious work to make rounded corners, splice them, upload them, etc.? I know I don’t. This saves time and frustration.

Scalability: One refined, this would allow for easy scaling along with the font size, which image corners do not (normally) do.

Future: This is the future of rounded corners–well, I think so anyway. Images should only be used when necessary, and if we can eliminate images and still make rounded corners with a decent amount of control, the world is one step closer to being a better place.

Coolness: You can do it well, and it is way cool. Your boss will dig it and your mom will be impressed.

Okay, well maybe not the coolness one. But the rest are pretty good reasons.

Cool CSS Image Pop-up

This is an Pop-UP image effect that is similar to the ones you see using JavaScript on mouseover or on click but THIS ONE uses ONLY CSS!

When you hover your mouse over the thumbnail the larger image appears beside it (or different images). Move your mouse off the thumbnail image to pop-down the enlarged image.

It is NOT perfect but it does validate.

Curve example

I saw a great looking style sheet driven site a while back from one of the major phone companies, either sprint or verizon, that included a curve that wrapped around an image. It caught my eye because a lot of the times I don’t think to use textual curves in my designs. These elements seem to be heavy in magazines and other print collateral but have yet to make their way onto the web.

After seeing the curve I had to try to figure out how they did it. So here I am showing you in my ‘experiment’.

The basic idea here is simple. Use a pack of floated block level spans with various widths to simulate a curve. I started off by creating a couple spans and assigning them all a class and an ID. Here’s an example of the CSS I used to create a curve on the left side of my page.

The important thing i found is that you need to calculate the height of the spans based on the size and line-height of your font. In my example I’m using a simple 12px Arial so I’ve set the height of the spans to 16px. If you try to implement this you’ll most likely have to change those heights. The goal is to have one span be equal to one line of text.