News Networks
Topics
Stories
People

  • My Networks
  • Popular
  • Recent
  • ABC...XYZ
  • Create New
  • Search
  • Popular
  • Recent
  • Rising Fast
  • ABC...XYZ
  • Popular Today
  • Popular Week
  • Popular Month
  • Rising Fast
  • Hot Discussions
  • My Newsmakers
  • My Followers
  • Recently Active
  • Popular
  • Find
  • Invite Friends
Connect
Sign in using facebook |
Log in |
Sign Up


Hi there. I'm Jason, one of the founders of socialmedian.
socialmedian delivers the news, filtered by your network.
We'd love to have you join in.
You can use facebook connect to sign in.
Connect
OR
Log in 
|
Sign up


Create your socialmedian account
Email
Required

Password
Required

The password must be atleast 6 characters
Username
Required

http://www.socialmedian.com/username
This is same as my twitter ID
Security check

I agree to the terms and conditions and the privacy policy.
Loading...


Already a user? Please Log In
Invalid Login!
Email

Password

Remember me:
Loading...


Forgot Password?

Email:

By
Add News Flash
User-submitted headlines for this story

Loading

4
Clips
Date Display Technique with Sprites
Source: CSS-Tricks
Jul 28, 2009


Dislike
 
0%
 
0%

Like

Summary

LearningjQuery.com has a pretty cool presentation of the dates of their blog posts. Check it:



The typeface and the year being vertical should tip you off right away that images are being used to accomplish this. But also note that the date information is presented as text, as it should be, in the markup:




A quick peak in Firebug reveals the beautiful simplicity!



Sprites at Their Best

Hopefully it’s fairly obvious that each date doesn’t have it’s own unique graphic. The dates are pieced together from a single graphic (css sprites!), where different smaller parts of the graphic are shown in the three different regions: day, month, and year. Perhaps you’ll recognize this from a similar technique Joost de Valk posted about nearly a year ago.


Take a look at this beauty:



The HTML:

The end result HTML is going to be like this:



Jun

30

2009


We have a wrapper, and three regions. This gives us what we need to match these schematics:



In a CMS like WordPress, the backend code to produce that would be like this:





Comments (0)
Add Your Comment
Please enter your Email Id to get a new password
Forgot your password?
Email:

Add something

Snip
News
Site

Instantly Clip News From Any Website
Clip it! on s|m
Or, Enter News Directly Here
Headline:

URL:
(Optional)

Description:
(Optional)

Adding a News...


Add Snip
Adding a Snip...


Now you can import your favorite sites to your socialmedian page
Loading...

Loading...


Is this you?
Stats

Mood
0% Like

0% Dislike

4 Clips

Loading...

Anulman
Johngrinde
The00rig
Mathewballard

Share this story

Network
Email
Tweet
Share with the News Network
Email ID's
(multiple Email ID's separated by commas)
Message
Also post this message as a public comment
Don't worry. We won't share the name or email address of the person that you sent the story to.
Loading...

Message
119

bit.ly (short) url will be added to the message.
Link to discuss this story on socialmedian

Link to the original story

Twitter ID

Password

Save my twitter password
Tweet will be sent using   (change)
Topics

blog
cms
Code
css
html
simplicity
wordpress
Show more
Show less
Add Topics

Comma Separated.
Belongs to News Networks

productivity (Users: 64)
Stories in 24 hours: 1
Content Management Systems (CMS) (Users: 24)
Stories in 24 hours: 1
VBA network (Users: 1)
Stories in 24 hours: 0
Web 2.0 Marketing News (Users: 57)
Stories in 24 hours: 19
Social Media Philosophy (Users: 130)
Stories in 24 hours: 589
Social & Business Networking (Users: 114)
Stories in 24 hours: 90
Joomla (Users: 20)
Stories in 24 hours: 3
wordpress (Users: 224)
Stories in 24 hours: 6
Web Development News (Users: 95)
Stories in 24 hours: 84
Web 2.0 (Users: 4875)
Stories in 24 hours: 783
The Tech 200 News Network (Users: 109)
Stories in 24 hours: 198
Blogging (Users: 946)
Stories in 24 hours: 136
Web 2.0 Apps (Users: 52)
Stories in 24 hours: 54
Tech News (Users: 3921)
Stories in 24 hours: 1053
Wordpress News (Users: 19)
Stories in 24 hours: 68
Online Reputation Management Network (Users: 31)
Stories in 24 hours: 20
software development (Users: 399)
Stories in 24 hours: 25
Show more
Show less
Register using your Twitter ID and we'll help you easily connect
your accounts and find people you already know.

We constantly make updates and enhancements based on user feedback. Follow socialmedian on Twitter
Help us out and report a bug or suggest a new feature! Check out our blog for regular company updates, notables, and to see what we're currently working on.
Report a Bug
Suggest a Feature


 Sending...
close
socialmedian Inc. 2008 - 2009
About socialmedian    |        |    Terms of Service    |    Privacy Policy