{"id":3135,"date":"2009-07-28T04:57:47","date_gmt":"2009-07-28T11:57:47","guid":{"rendered":"http:\/\/css-tricks.com\/?p=3135"},"modified":"2009-07-28T04:57:47","modified_gmt":"2009-07-28T11:57:47","slug":"date-display-with-sprites","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/date-display-with-sprites\/","title":{"rendered":"Date Display Technique with Sprites"},"content":{"rendered":"

LearningjQuery.com<\/a> has a pretty cool presentation of the dates of their blog posts. Check it:<\/p>\n

\"\"<\/p>\n

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:<\/p>\n

<\/p>\n

\"\"<\/p>\n

A quick peak in Firebug reveals the beautiful simplicity!<\/p>\n

\"\"<\/p>\n

Sprites at Their Best<\/h3>\n

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!<\/a>), 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<\/a> nearly a year ago.<\/p>\n

Take a look at this beauty:<\/p>\n

\"\"<\/p>\n

The HTML:<\/h3>\n

The end result HTML is going to be like this:<\/p>\n

<div class=\"postdate\">\r\n        <div class=\"month m-06\">Jun<\/div>\r\n        <div class=\"day d-30\">30<\/div> \r\n        <div class=\"year y-2009\">2009<\/div> \r\n<\/div><\/code><\/pre>\n
We have a wrapper, and three regions. This gives us what we need to match these schematics:<\/p>\n
\"\"<\/p>\n
In a CMS like WordPress, the backend code to produce that would be like this:<\/p>\n
<div class=\"postdate\">\r\n        <div class=\"month m-<?php the_time('m') ?>\"><?php the_time('M') ?><\/div>\r\n        <div class=\"day d-<?php the_time('d') ?>\"><?php the_time('d') ?><\/div> \r\n        <div class=\"year y-<?php the_time('Y') ?>\"><?php the_time('Y') ?><\/div> \r\n<\/div><\/code><\/pre>\n
The CSS<\/h3>\n
The CSS is where the sprite action really happens. With those special class names that we have set up in the HTML, we can set which portions of the image to use. <\/p>\n
First, we set relative positioning on the parent. Then we absolutely position each of the three regions within. We set all three of them to use the same background image (our sprite), set their respective widths and heights, and kick the text off the page. <\/p>\n
Then, we set each of the months (12 possibilities), days (31 possibilities), and years (goes 10 years out) with the specific background positioning needed to show the specific region we need.<\/p>\n
.postdate {\r\n  position: relative;\r\n  width: 50px;\r\n  height: 50px;\r\n  float: left;\r\n}\r\n.month, .day, .year { \r\n  position: absolute; \r\n  text-indent: -1000em;\r\n  background-image: url(\/wp-content\/themes\/ljq\/images\/dates.png);\r\n  background-repeat: no-repeat;\r\n}\r\n.month { top: 2px; left: 0; width: 32px; height: 24px;}\r\n.day { top: 25px; left: 0; width: 32px; height: 25px;}\r\n.year { bottom: 0; right: 0; width: 17px; height: 48px;}\r\n\r\n.m-01 { background-position: 0 4px;}\r\n.m-02 { background-position: 0 -28px;}\r\n.m-03 { background-position: 0 -57px;}\r\n... more like this ...\r\n\r\n.d-01 { background-position: -50px 0;}\r\n.d-02 { background-position: -50px -31px;}\r\n.d-03 { background-position: -50px -62px;}\r\n... more like this ...\r\n\r\n.y-2006 { background-position: -150px 0;}\r\n.y-2007 { background-position: -150px -50px;}\r\n.y-2008 { background-position: -150px -100px;}\r\n... more like this ...<\/code><\/pre>\n
\"\"<\/p>\n
Enjoy!<\/p>\n","protected":false},"excerpt":{"rendered":"
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:<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":158,"url":"https:\/\/css-tricks.com\/css-sprites\/","url_meta":{"origin":3135,"position":0},"title":"CSS Sprites: What They Are, Why They’re Cool, and How To Use Them","date":"October 24, 2009","format":false,"excerpt":"This article has been revised and re-written several times since its very first publication in 2007, to keep the information current. The most recent revision was done by Flip Stewart in January 2015. What are CSS Sprites? Spoiler alert: they aren't fairies that write your stylesheets for you. I wish.\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":300115,"url":"https:\/\/css-tricks.com\/freak-flags\/","url_meta":{"origin":3135,"position":1},"title":"Freak Flags","date":"December 11, 2019","format":false,"excerpt":"I don't see image sprites used that much anymore, but it's still a good technique for reducing downloaded decorative image assets when you have multiple on a page. The big idea is combining all the graphics into one and then shifting around the size and background-position to reveal one at\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/flag-sprite.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":195227,"url":"https:\/\/css-tricks.com\/spriting-img\/","url_meta":{"origin":3135,"position":2},"title":"Spriting with <img>","date":"February 6, 2015","format":false,"excerpt":"Sprites aren't limited to background-image, as with the object-fit and object-position properties we can nudge an inline image around its content-box to act just like a sprite. For example, let's say we want the image below to be added to our HTML page like a regular ol' image: Sprite Then\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":3427,"url":"https:\/\/css-tricks.com\/css-sprites-with-inline-images\/","url_meta":{"origin":3135,"position":3},"title":"CSS Sprites with Inline Images","date":"August 19, 2009","format":false,"excerpt":"CSS Sprites is a technique where you use a background-image, a set width and height, and adjust the background-position to display only the portion you need to show. This way you can use a single image and display lots of different graphics with it, saving server requests and speeding up\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/clipsusage1.jpg?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":4586,"url":"https:\/\/css-tricks.com\/holy-sprites\/","url_meta":{"origin":3135,"position":4},"title":"Holy Sprites","date":"November 2, 2009","format":false,"excerpt":"Lots of folks joined in on the fun with the Show Off Your Sprites! contest. I used the ol' random number generator and came up with Lee Kowalkowski as the big winner, congrats Lee! Now let's take a look at some of the submissions. Looking at sprites I find strangely\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/dragon-sprite.jpg?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":7059,"url":"https:\/\/css-tricks.com\/css-sprites-workflow\/","url_meta":{"origin":3135,"position":5},"title":"CSS Sprites Workflow","date":"August 12, 2010","format":false,"excerpt":"When you are coding up a brand new site, I think this is a pretty efficient workflow for how to handle CSS Sprites. Ignore sprites entirely. Make every background image its own separate image and reference them as such in the CSS.When you are reasonably sure the design is \"done,\"\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/3135"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=3135"}],"version-history":[{"count":7,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/3135\/revisions"}],"predecessor-version":[{"id":3149,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/3135\/revisions\/3149"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=3135"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=3135"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=3135"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}