CSS-Tricks PSD to HTML: You Design - We XHTML

Links of Interest

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.


Theoretically Related Articles:

Discussion Elsewhere


Responses


  1. 1

    Gravatar

    this is definitely a good trick


    Comment by sir jorge — January 15, 2008 @ 3:28 pm

  2. 2

    Gravatar

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


    Comment by Brendan — January 15, 2008 @ 6:27 pm

  3. 3

    Gravatar

    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 ;)


    Comment by andreic — January 18, 2008 @ 12:32 am


Leave a comment

Sick of typing in all this info everytime you comment? Register or Login and save yourself time!

LINKS: You can use <a href="">LINK</a> tags here.
CODE SAMPLES: Please wrap code samples in BOTH <pre> and <code> tags.

Thank you for visiting CSS-Tricks! I'm glad you found an article useful enough to print out! Remember to visit css-tricks.com often for more fresh content.