Recreating the Fade Scrolling Text Marquee on Twitter

Written on 19/11/10 • 0 Comments

Scrolling marquees were widely used on many early webpages that used the now defunct non-standard marquee tags and have fallen out of vogue in recent years. The homepage show that the effect can still be used to good effect today in a more subtle manner. We can use client side scripting to create the effect without the use of proprietary tags.

Taking a look at the twitter homepage code show us how they make the text fade in and out, it is remarkably simple. They have placed two PNG images that fade from 100% opaque to 100% transparent, it’s actually a single sprite called fade-trends2.png. The two elements are placed inside their own <li>s at the end of a list of <li>s and inside a <ul>, and then positioned using CSS to float at either side of the <ul>.

Continue Reading

Hanging Quotation Marks

Written on 08/10/10 • 1 Comments

Having recently released a Joomla Module that allows you to add blockquotes to your Joomla sites I have had a few requests for some further information on styling blockquotes. Blockquotes are intended to be used separately from other text in its own block, if you want to include an inline quote you should be using the Q tag. The Q tag adds quote marks, Internet Explorer being the exception to the rule, the blockquote tag does not.

Continue Reading

Making Smiles using only CSS & Vertical Text

Written on 24/09/10 • 0 Comments

This week I needed to create a 404 error page for a project, I wanted to create something simple that was purely CSS with no images. I wanted the page to have something graphical as well and decided on a large sad smilie. The challenge here is to get the text :-( to display vertically.

Continue Reading

Create a Simple CSS Pin Map with Ease

Written on 19/03/10 • 3 Comments

It is easy to create a map with pins that you can position to correspond to a point of interest then hyperlink the pin to another page or get creative and use javascript to trigger an event. In this example we have a map of the UK with pins positioned roughly over the top ten cities by population. The pins link to the cities Wikipedia page and use the title attribute to show the name when hovering over the pin. This is a bare bones example for you to build on, you could use image sprites to change the image of the pin to a marker of your choice or use javascript to create information bubbles when you mouse over the marker the choice is up to you.

Continue Reading

Not So Clear CSS Opacity and RGBa

Written on 18/12/09 • 0 Comments

Support for transparent PNG paved the way for the use of semitransparent elements within website designs. CSS3 introduced the ability for developers to alter the transparency of an object with the opacity property. This method has some inherent problems, luckily there is a solution; the much less well know RGBa model.

Continue Reading

Using Numbers as CSS Class or ID Values

Written on 20/11/09 • 1 Comments

This week I found myself in a situation where I needed to apply CSS to an element only on a specified page. The best way to do this is to add an id to the body tag of the said page thus allowing you to apply a style only to that page. The example below shows an ID applied to the body tag. This is good practice when building your sites but sometimes easier said then done when using a Content Management System to dynamically generate your pages.

Continue Reading

More articles can be found in the archives, feel free to have a look around and leave your comments.

Save a massive 36% on a subscription to .net magazine!

We love .net magazine (known as "Practical Web Design" outside the UK) and have teamed up with Future Publishing to get our readers up to a massive 36% off a years subscription.