Grow your CSS skills. Land your dream job.

Links of Interest

Published by Chris Coyier

Seasonal CSS

I enjoyed this idea by John Leschinski over on Blogging Tips on how to use a little PHP and CSS to make "seasonal CSS". You simply spit out the date right inside the class name of the body tag:

<BODY class="date<?php echo date("md"); ?>">

Then you can write CSS like:

.date1225 { background: url(images/christmastrees.png); }

Instead of having PHP spit out the date, you could use it to spit out a random number as well, which you could use to apply different random styles to different elements of your page on load. You know, if you were crazy like that.

Change hover image WITHOUT using background-image

Markus Bertling wrote up a technique I found interesting on how you could create image rollovers without using the CSS property background-imge. Just regular ol' <img> tags. It makes use of a CSS-Sprite-Like technique of making the image wider than it needs to be, then shifting it back and forth with margin and hiding the overflow. So you do need a browser that handles overflow correctly...

Hidden Accessibility Message

David Walsh has another awesome quick tip on including a hidden accessibility message on your webpages. Just a quick note explaining how you want to provide the best experience possible on this website and contact information in case they have any problems. Then just kick it off the screen with a huge text-indent ala CSS Image Replacement.

Comments

  1. Permalink to comment#

    this is definitely a good trick

  2. Brendan
    Permalink to comment#

    Thats pretty cool.
    You never realize this stuff until someone says it, then it makes perfect sense.

  3. Permalink to comment#

    The Seasonal CSS is pure fantastic. It wouldn’t have cross my mind that you can do this thing; i will surely start puting this in practive ;)

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".