PHP-Princess.net » CSS

CSS 3: Substring Matching Attribute Selectors

daynah — Sat, 17 Mar 2007 04:37:55 +0000

I was reading up on CSS 3′s Substring matching attribute selectors and discovered a fun way to reference anchor links!

Web links can be a variety of files. PDF, DOC, and HTML are some of the familiar ones. I was wondering if we could put a small icon to denote what type of file is being downloaded, and with CSS3, it’s quite possible.

Create an HTML file. Between the tags, put

and between the tags, put:


My HTML File
My PDF File
My Word Doc File
Any Link

Save the file as mytest.html (and download these three images as well — ) and open it up in Firefox 2.0. You will then see something that looks like this:

Isn’t that great? The padding attribute moves the link 20px to the right. And the background-repeat attribute makes sure that image doesn’t repeat. So when I link a PDF file on my website, an image of a PDF file automatically shows next to the link. What a time-saver. :) The only drawback to this is that CSS3 isn’t fully implemented in all of today’s browser. It seems that Firefox 2.0 is ahead in the game. MSIE 7.0 and browsers below do not render CSS3 correctly. But it is a nice tip. Hopefully the next generation of browsers will render CSS3 the way it’s suppose to.

CSS Keyboard

daynah — Tue, 20 Sep 2005 00:51:28 +0000

How cute, a keyboard made entirely in CSS! That’s a Chris Hester creation!

CSS Gradients

daynah — Tue, 20 Sep 2005 00:47:03 +0000

Wow, you can create seamless gradients in CSS! It’s just a lot of code though. :D Here’s the full article on it.

CSS Templates

daynah — Fri, 05 Aug 2005 00:28:03 +0000

Here are some nice CSS templates that are licensed under a Creative Commons License. Thanks for the link, Dodo!

CSS Folder Tree

daynah — Wed, 13 Jul 2005 16:37:58 +0000

I really like how Seamus created this folder tree using only css, a few images, and a bulleted list. Too bad MSIE 6.0 doesn’t support CSS2. I wonder if MSIE 7.0 will…

HTML and CSS Table Border Style Wizard

daynah — Thu, 26 May 2005 23:12:33 +0000

Here’s a great HTML and CSS Table Border Style Wizard you can use.

CSS Cheat Sheet

daynah — Thu, 05 May 2005 00:03:36 +0000

How nice, a CSS Cheat Sheet! I printed myself a copy. :)

CSS Rounded Corners Generator

daynah — Wed, 30 Mar 2005 17:54:31 +0000

Want rounded corners in your layout? You don’t need an image editor to create the images. Nor do you need an html editor to create the code. Try out the CSS Rounded Box Generator! It’ll save you time by generating the images, Html and CSS code for you!