CSS 3: Substring Matching Attribute Selectors

March 16, 2007 by  
Filed under Code Snippets, CSS, Tips and Tutorials

css-iconI 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 <head> tags, put

<style>
body { 
  font-size: .9em; font-weight: bold; 
}
a { color: blue; line-height: 1.5em; }
a[href$=".html"] { 
   padding-left:20px; background-image:url(html.gif); 
   background-repeat: no-repeat; 
}
a[href$=".pdf"] { 
   padding-left:20px; background-image:url(pdf.gif); 
   background-repeat: no-repeat; 
}
a[href$=".doc"] { 
   padding-left:20px; background-image:url(msword.gif); 
   background-repeat: no-repeat; 
}
</style>

and between the <body> tags, put:

<ul>
<li><a href="myfile.html">My HTML File</a></li>
<li><a href="myfile.pdf">My PDF File</a></li>
<li><a href="myfile.doc">My Word Doc File</a></li>
<li><a href="http://php-princess.net">Any Link</a></li>
</ul>

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

CSS 3 Links
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.

Related Products:

CSS Keyboard

September 19, 2005 by  
Filed under CSS

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

CSS Gradients

September 19, 2005 by  
Filed under CSS, Daily Ramblings

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

August 4, 2005 by  
Filed under CSS

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

CSS Folder Tree

July 13, 2005 by  
Filed under CSS

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

May 26, 2005 by  
Filed under CSS, Links and Resources

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

CSS Cheat Sheet

May 4, 2005 by  
Filed under CSS

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

CSS Rounded Corners Generator

March 30, 2005 by  
Filed under CSS, Daily Ramblings

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!

CSS Beauty.com

March 29, 2005 by  
Filed under CSS

Wow, check out CSS Beauty! Definitely a great place to look for inspiration!

CSSBeauty.com is a project focused on providing its audience with a database of well designed css based websites from around the world.

It’s purpose is to showcase designers’ work and to act as a small portal to the css design community.

If you are “in need of inspiration”, you have come to the right place.

Thanks Hector Alexander Giron, Creative Director for Creativo Media, for creating this beautiful gallery.

Cute and Unique Menu CSS Tabs

March 29, 2005 by  
Filed under CSS, Daily Ramblings

Cute Menu tabs at Komodomedia.com! I love the unique and fresh look. A great display of CSS. ;) Thanks for the link, Simon!

CSS: W3C buttons Made Without Images

March 29, 2005 by  
Filed under CSS, Daily Ramblings

Wow, these W3C buttons are made without images. Only CSS is used to make them. Very interesting!

Thanks for the link, Dodo!

CSS: Resizing Large Images to Fit in Containers (also work in MSIE!)

March 28, 2005 by  
Filed under CSS, Scripts and Coding

In my post about CSS: Resizing Large Images to Fit in Containers, I hadn’t noticed that the CSS2 code, “max-width” didn’t work in MS Internet Explorer. So I looked around and found this nice piece of code from Ozone Asylum Forums (based on this article).

So to make an image resize in MSIE, use this CSS Code.

<html>
<head>

<style type=”text/css”>

.resizeImage {

/* for Firefox, Opera and others: */

max-width: 250px;

}

</style>

<!–[if gte IE 5]>

<style type=”text/css”>

.resizeImage {

/* For Internet Explorer: */

width: expression(Math.min(parseInt(this.offsetWidth), 250 ) + “px”);

}

</style>
<![endif]–>
</head>

<body>

<img src=”myimage.jpg” class=”resizeImage” alt=”my image” />
</body>
</html>

So that’s how you get the ‘max-width’ CSS property to work in Internet Explorer? …You don’t. ;) Just use width and the Javascript trick! Thank you for pointing this out to me how max-width didn’t work in MSIE, John Adams.

Resources: Ozone Asylum Forums, svendtofte.com.

CSS: Resizing Large Images to Fit in Containers

March 26, 2005 by  
Filed under CSS, Wordpress

I was playing around with the MX4 theme by Mike. And I noticed how the images I post are resized to fit within the container.

For example, my last post with the snapshot has a 450px image in it. When I changed to the MX4 theme, my image was resize (with CSS!) to by 342px.

So I was looking through the stylesheet and found this nice code:

p img { max-width: 100%; }

This CSS code will resize the image to fit the container if there is any overflow. That’ll come in very handy. ;)

I’m in love with this MX4 WordPress 1.5 theme. If you like it to, download it here.

Javascript: Nifty Nice Titles

March 25, 2005 by  
Filed under CSS, Javascript, Scripts and Coding

I noticed that some websites had these nifty popup divs that came up when I hovered over the titles. I was curious, so I googled, and found this “Nice Titles” article. I decided to test it on my site, and viola, I have nice titles! It was pretty easy to install. I just uploaded the nicetitle.js file to my theme directory. Then add the CSS classes from nicetitle.css into my style.css. Then modified the background image and uploaded that to my images/ directory. Then I added:

<script type="text/javascript" src="nicetitle.js">
</script>

to my header.php file. :) I love transparent PNG! You can see through the div!

While looking at the stylesheet definitions, I also learned something new.

-moz-border-radius: 12px;

This style attribute make the edges of it’s class rounded. Unfortunately, it only works in Mozilla/Firefox. But it’s nifty nevertheless!

CSS: Same link text, just different colors

March 23, 2005 by  
Filed under CSS, Daily Ramblings

CSS Trick: Same link text, just different colors

I thought this was a cute CSS trick. I never thought about doing that, but then again, I probably wouldn’t use it in my designs. But who knows. ;)

CSS: Animated Examples

March 21, 2005 by  
Filed under CSS

This is certainly an interesting way to demonstrate CSS! It’s a free service from VisiBone.com.

Resources: Style-Sheet.info

CSS: Fun with Forms (Input Elements)

March 21, 2005 by  
Filed under CSS

This is one of my favorite articles — Fun with forms – customized input elements. Søren Madsen shows you how to create forms that is both customizable as well as cleaner and accessible. This is all done with a touch of CSS.

Turn a regular html form like this to this lovely form:
Fun with Forms

Resources: Picment.com

A CSS styled Table

March 17, 2005 by  
Filed under CSS

We all know that DIVs and CSS go hand-in-hand, but let’s not leave the table tag in the dust. Tables can be beautiful too! And Veerle Pieters shows us how. With a little bit of CSS, tables can turn into very stylish elements.

Thank you Digital Media Minute for the link!

Resources: A CSS styled table

Amazing CSS

March 2, 2005 by  
Filed under CSS

Here are some very amazing games made with ONLY CSS!

CSS Scrollbar Script

February 25, 2005 by  
Filed under CSS, Links and Resources

Here’s a very nifty scrollbar color changing tool. Of course, you can only see this style sheet in a MSIE browser.