Over the past year I’ve had several sites listed on a variety of CSS galleries. CSS Mania has always provided the most traffic and comments/votes and I thought it would be interesting to chat with the founder, Gabriel Segura. Gabriel was kind enough to answer our questions and the transcript is below.

Allen: Can we start with a brief overview of yourself?
Gabriel: My name is Gabriel Segura. I was born in 1975. I am a telecomunications engineer (working at Ericsson during the day), flash designer, front-end web developer and CSS Mania’s father (at night). Married with a beautiful woman, Susana, and father of a “real” daughter Claudia (3 years old). We also have a Himalayan Persian cat at home called “Yuna” (Final Fantasy X). God gave me a wife that loves to play PS3/Xbox/Wii more than me.

Allen: What is CSS Mania?
Gabriel: We believe that CSS Mania is the largest CSS showcase in the world.

Allen: Why did you start CSS Mania and when did it launch?
Gabriel: CSS Mania was born in March 2004 as a section on my personal blog as I loafed around the few CSS Showcases that existed during that time. In 2005, before our admired Paul Scrivens sold CSSVault to Jacob Gower, we realized that other CSS Showcases sites, except ours, weren’t updating very regularly. We know that updates are what make a difference to readers.

We aren’t interested in the geek insights or trivial discussions common on other similar sites. We are interested in learning what any CSS afficionado or professional might want to learn.
(more…)

A while ago, I heard rumors that the next incarnation of HTML would include support for easily replacing HTML elements (such as headers) with images by simply adding a “src” attribute to the HTML tag. For instance, you might be able to do something like:

<h1 src="myimage.png">This is my alt text</h1>

However, it seems that the advent of this type of thing, if it ever happens, is still quite a ways off. Therefore, if you’re looking for an easy way to replace a plain text header with a nice image, for instance, a banner, you need to find another way of doing so.

This article will briefly explain how to do so using purely CSS. (more…)

Here are today’s Eight Links — links for web developers:

1. JsPDF – create PDF files completely using JavaScript
2. The Database Rant – begins with “It’s time for SQL to die.”
3. iPhone app sales – a developer explains the income his app has generated and how changing pricing didn’t change sales
4. Why writing software is like writing
5. 18 Seriously Helpful Cheat Sheets for Easier Coding
6. Google Analytics API Launched
7. Finding and Fixing Memory Leaks in Python
8. A Design for a Distributed Transaction Layer for Google App Engine

With Web 2.0, rounded corners have become wildly popular. Unfortunately, as of right now, you need to use transparent images, some fancy CSS hacks and some extraneous HTML to make them work properly.

However, Mozilla (Firefox) and Webkit (Safari, Konqueror) browsers have implemented a property called border-radius, which will apparently be included in the CSS3 spec, allowing you to easily create rounded corners on any bordered HTML element.

At this time, you have to use browser-specific properties for Mozilla and Webkit browsers, as the border-radius property is not yet fully implemented. You can find more information about the -moz-border-radius and -webkit-border-radius implementations on The Art of Web. More info about the proposed CSS3 spec on border-radius can be found on the W3 site.

This is a simple tutorial to explain how to implement semi-transparent backgrounds for your HTML elements in all browsers. By now, most people are probably aware of the fact that you can use 24-bit PNG images to create semi-transparent backgrounds in newer browsers. However, because a large percentage of Internet users have still not adopted Internet Explorer 7; which means that they’re still using IE6, which doesn’t support 24-bit PNG images, we have to find a way to mimic that behavior. It should be noted that the fix described in this tutorial is only applicable to solid color backgrounds; it cannot be applied to backgrounds that include some sort of image. (more…)

As CSS becomes more and more popular and Web designers are using it more and more to develop the look of their Web sites, browsers are causing more and more problems when trying to print Web pages. CSS styles do not always translate nicely when printed. Some browsers actually freeze or crash when using specific CSS style definitions.

(more…)

I found myself wondering a while back how Wikipedia identifies external links the way they do. I’ve seen the same concept on many other sites, but I had never really looked into how it was done. I always just assumed that an image was dynamically added to any code that included external links.

It turns out that I was wrong, and I was kind of happy to find that out. The answer I found makes much more sense, and is much more simple to implement.

(more…)

NetTuts has a good look into 5 common css issues and how to resolve them easily and quickly. The five css issues are:

• Why are my styles not effective?
• The difference between relative and absolute positioning
• Internet Explorer 6 double margin issue
• Specific selector issues
• Testing your site in multiple browsers

As always, if you run into trouble, post your questions in our CSS help forum.

Videojug has put together a simple video about what CSS is and how to use it. It’s just the really simple basics but still worth a view. And if you have questions, stop by our CSS help forum.

First of all, to dispel any misinformation that is apparently still going around on the Internet (and, I, too, once believed this when I was first introduced to CSS), CSS is not capable of inserting content into your pages. CSS cannot be used to create headers and/or footers to be used on every page of your site.

For those of you looking for ways to use the same menu on every page of your site, and keep that menu in a single location so that it’s easy to update, CSS won’t do that for you. That’s what server side includes are for, actually. Server side includes can be used with pure HTML (provided that includes are enabled on your server), with PHP, Perl, ASP or basically any other server-side language.

In fact, CSS does almost the opposite. CSS is intended to separate the content from the design within a Web site. CSS is strictly intended to facilitate the “look” of the pages on your Web site. No content is interpreted from CSS.

Now, for the quick lesson on how CSS works.

First of all, we should examine the name. CSS is an abbreviation of the phrase “cascading style sheets”. Let’s pick that apart for a moment.

Cascading

items that overlap, with each new item taking precedence over the previous

Style

refers to the particular look or appearance of a specific item

Sheet

figuratively, this is intended to refer to a collection of items gathered together in a single location, like a sheet of music

(more…)