More work on the blog tonight

March 11th, 2010

Ok, even I find that there is no navigation to get back to the main page bothersome, and this is my blog. I will correct this tonight. I apologize for the inconvenience, but this design is a work in progress. I also have to do the footer, add stuff to the slider, and probably a lot of other little things.

Oh, and I upgraded my graphics card last night to a GeForce 9800GT, and got 2 new monitors…Samsung 21.5″ jobs…..so work will be really damn fun tonight.

Aaaannnnd I’m working on a wordpress theme to attempt to sell on themeforest.net that I have to get back to.

Big list of to do’s. I also want to post a really quick and dirty WordPress theme building tutorial. Ugh…too much.

And yet MORE png hacks for IE6…

March 11th, 2010

And the best part? Its not a pain in the ass! I found this while tooling around Chris Coyier’s site css-tricks.com yet again. I was just going through his snippets to see what was there, and I believe this is some CSS I will use quite a bit. No javascript required, but I would use this in a conditional style sheet specifically for IE6.

.yourselector {
       width:200px;
       height:100px;
       background: url(/folder/yourimage.png) no-repeat;
       _background:none;
       _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/folder/yourimage.png',sizingMethod='crop');
}

If you DO use a conditional stylesheet, drop the underscores in the properties.

This ONLY works on background images that do NOT repeat. This will NOT work on inline html images. There is another thing for that, but it requires the use of a 1×1 pixel transparent gif. At that point, I probably would go with the png javascript fix.

EDIT: The container also needs to have a fixed width and height.

Cool jQuery plugin…Spritely

March 10th, 2010

Spritely jQuery pluginHaven’t tried it yet, but I will. I am generally not a fan of plugins, mostly because I am still learning, and want to know how to do things myself. But this is still freakin’ cool. It animates objects using sprites, html, and javascript. Best thing about this is that it is NOT flash. Here is a link to the plugin.

The crows that are flying around, plus the background, are all done using this plugin. The crows are 3 images on 1 sprite, animated in order. Really digging this, and I can already think of a few sites that I’ve done for work that I could have used this on.

Changing the color of text when they highlight with CSS

March 9th, 2010

I wrote this little tid-bit down a while ago, and I snagged it from Chris over at css-tricks.com. He has no idea who I am, but I’d like to think if he did, we would be on a first name basis.

Anyway, you can change the color of the highlight that shows when people select text on your site with this little bit of CSS:

::selection {
        background: #ffb7b7; /* Safari */
        }
::-moz-selection {
        background: #ffb7b7; /* Firefox */
}

If you wanted different colors depending on the paragraph they were selecting in, you would add a class to the tag and write the style like this:

p.className1::selection {
	background: #ff0000;
}
p.className2::-moz-selection {
	background: #ff0000;
}

Nice little bit of customization. Unfortunately it only works in Safari and Firefox, but try it out anyway. Its cool.

CSS Selectors – a real world example

March 5th, 2010

Today a co-worker of mine had a simple problem that he wanted some help with. He needed to find all the “a” tags within a specific div, and if its href attribute ended in .pdf, then add a background image to it. I am going to guess that most people would just go and add a class to all the “a” tags that needed the image. That just puts more html on the page, when you can effectively do this with just some css.

Take into account, this example that we used today, works in all modern browsers, but not IE6-. Worked in IE7, so that was a good plus.

Here is the css:

#divId a[href$=".pdf"] {
     background-image: url(../images/imageName.gif);
}

This says get the div with whatever id you are looking for, with an “a” tag, that has an “href” attribute that ends with exatly “.pdf”, and add the background-image to it.

I then did the same thing but for all links that got to “.docs”, and displayed a different image. So the second style was:

#divId a[href$=".doc"] {
     background-image: url(../images/imageName2.gif);
}

If you actually wanted to hit ALL the “a” tags within the site like that, just remove the #divId from the style.