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 twitter.com 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
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
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
Written on 19/03/10 • 3 Comments
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
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.
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.