Tag Archives: css

New Utility: Reverse Color Lookup

This is a great utility to use when reverse engineering themes and styles. I’m sure that very few people know how a hex color code looks without testing it, and that’s what this utility is for. Simply type in the color code and view the effect! Visit the utility.

CSS: Rollover Fade

This short tutorial will teach you how to create a rollover color change/fade effect for your text. An great example of this would be our site title. Here’s the code: #myFade { color: #000000; -moz-transition: color 0.3s ease;   /* Firefox 4+ */ -o-transition: color 0.3s ease;  /* Opera 10.5+ */ -webkit-transition: color 0.3s ease;  /* […]

CSS: Boxes and Shadows

A short article on putting boxes around items and including shadows. If you’d like an example of what we’ll be making, it’s below: This is a box filled with text. If you roll over me, a shadow appears…cool! While it is a lame example, this effect is good for eye candy and makes for a […]

HTML: Linking to Stylesheets

Let’s say I have a webpage called: page.html and a CSS file for the webpage called: style.css How do I link them?   With this line of code, placed in the <head> tags: <link rel=”stylesheet” href=”style.css” type=”text/css”> If the stylesheet is in another directory do this: href=”http://mysite.com/folder/style.css”   It’s that easy!

Lightbox in CSS

If you don’t know what a lightbox is, you can: Click here for an example.   Many lightboxes are created using Javascript. These lightboxes are hard to modify and don’t always support many scripts. That’s why I’m going to show you how to create a simply lightbox effect with only CSS!   The CSS Here […]