I just did a flickr bar for a client who requested it and it turned out cool, so I thought I’d add a similar one to my own site, and for the heck of it, I also thought I could share how I did it. First, scroll down and take a looksie…
I removed the flickr bar from my site (was a little too much for me), but you can still find it on Ben’s site.
Cool, huh? So I started with two images… a plain square with a border and a duplicate with a shadow. To get the border box, I create a plain square in photoshop and double-click the layer to get the styles box. There I select inner glow.
- choose a color
- set blend mode to normal
- set range to 0
- set opacity to 100%
- then just set the size to a size you like
You can also use STROKE for this, but I used glow because I sometimes want a softer line
Now, I duplicated that layer and went to styles again to put an outer shadow on it. I leave them positioned directly on top of one another and then crop right within a pixel of the edges of the shadow box. I hide the shadow box while I save a JPG of the main box. I then come back to the image and hide the main box (flickr.jpg) while I save a JPG of the shadow box (flickr_h.jpg).
The “Flickr” title on top of the boxes is a little trickier. I went ahead and positioned it in Photoshop just how I wanted it to look. I then cropped it to fit the title with a portion of the box (you don’t have to, but I did so I could see where to position it later with the CSS).
That’s it for the images, now for the code! Here’s the base HTML:
<div id="flickr">
<h2><span>Flickr</span></h2>
Insert Flickr script from your flickr badge
</div>
The “span” is to hide the text and replace it with your image. You COULD just insert the image here, but it doesn’t work as nicely unless you do it purely with CSS. And, if someone is reading your site with a screen reader or another machine without CSS, they’ll see the span text instead of the image.
It has been pointed (yes, I missed it), there is another way to do the header. Instead of the span, just give the header (h2) a text-indent of something outrageous like -5000px to hide. That makes it a little easier on those for whom the span would be hidden completely in another medium.
Okay, the good stuff now, the CSS…
#flickr {
width:118px;
margin:30px 20px;
text-align:center;
}
#flickr h2 {
background: transparent url(images/flickr_h2.jpg) no-repeat top left;
height: 50px;
width: 130px;
margin-left:-4px;
}
#flickr h2 span {display:none;}
#flickr_badge_image1 {
margin-top:-28px;
}
.flickr_badge_image a {
margin-left:13px;
width:75px;
display:block;
background: transparent url(images/flickr.jpg) no-repeat top left;
padding: 5px 16px 19px 5px;
}
.flickr_badge_image a:hover {
background: transparent url(images/flickr_h.jpg) no-repeat -1px -1px;
padding: 4px 17px 20px 4px;
}
That’s all. If I missed something or if I was unclear, let me know. Despite what my friends say, I’m not perfect. :)
Dennis left a comment on January 17, 2006 at 6:52 am | #
Excellent tip Nat. Thanks!
William Brown left a comment on January 17, 2006 at 7:18 pm | #
Nice tutorial. I must say you have a beautiful website.
Natalie Jost left a comment on January 17, 2006 at 7:20 pm | #
thank you!
Jon-Michael left a comment on January 19, 2006 at 1:44 am | #
Nice tutorial and site! I’m jealous of your graphic design skills! I’d just like to make a few suggestions to make the code lighter (sorry about all the line breaks from Textile):
1) A spanless way to position the flickr h2 is to use a negative text-indent value:
#flickr h2 { background: transparent url(images/flickr_h2.jpg) no-repeat top left; height: 50px; width: 130px; margin-left:-4px; text-indent: -9000px; } Also, if you’re making it clickable (a link), you need to either position, float, or display it (that last one didn’t flow so well:P).””2) For the hover image, you can get rid of the lag time using a single image with two states. There’s a tutorial at WellStyled. I use this same technique, just I like to go vertically instead of horizontally. Here’s my summary: (Assuming the width is 118px and height is 75px) 1) With your image open in photoshop, increase the canvas size by 75px vertically. Our canvas is now 118px wide and 150px tall. 2) Drag your hover state below the the “off” state. 3) Save for web 4) For the CSS, it’d look like this:
.flickr_badge_image a { width: 118px; height: 150px; background: url(/images/flickr.png) no-repeat; display: block; overflow: hidden /IE6 can be evil, but this may not be necessary/; } .flickr_badge_image a:hover { background-position: 0 -75px;/Move it up/ }”” Glad you switched to TXP too””I switched from handcoded PHP a month ago. I even converted my photo site to it. Two of the greatest things about it are the XML style templating code and the conditionals for templates.
Sorry for hogging your comment space :). JM
Natalie Jost left a comment on January 19, 2006 at 8:17 am | #
Although I appreciate your knowledge of web design, I’m a little put off by your ignorance of mine. Just a little. I understand you don’t know me.
Though I’m aware of stacked images and most of us have been using that technique for ages (see the menu tabs and the “more of nat” links in the sidebar), I appreciate the link. That’s new! I didn’t want to confuse things by trying to explain stacked images to beginners. Most people new to standards can at least understand an image and a hover image because they had to create those for the old javascript rollover days.
The negative text-indent will work too, but I personally don’t like pushing things off the page like that. I prefer to tell it whether or not to display instead of where. It’s a personal preference. Others may find they like the other way better, so thanks for sharing your tip!
Jon-Michael left a comment on January 19, 2006 at 9:12 pm | #
Sorry that came out wrong. I noticed the links right after I posted :(.Just thought I’d expand on the method I use for replacing text with images. I use the negative text indent because 1) less code for me (those 12 bytes are so hard to type :). It’s also more accessible to screen readers (some anyways). I had never tested this myself as I didn’t have access to a screen reader, but I finally downloaded JAWS a few minutes ago. I made two pages, containing the bare-minimum markup (DTD,body/html), and an h1 tag. The first page had an h1 tag using a span to hide “Hello” with display:none. The second page used Mike Rundle’s Technique of a negative text-indent on the h1 tag with the same text.Results: Display:none failed to read the text, whereas the negative text indent evoked a “Hello” from JAWS (Current version).So in the end, it’s sort of a decision between accessibility and code markup. There’s no right or wrong way. I guess a questionaire for which technique would be 1) Do people need to hear the text? [if not, use display:none and spans] 2) How much markup am I willing to add?[if you don't want to add 12 bytes of HTML (span,closing span), then use text indent]. For me, primarily since I’m lazy, I’d rather have less markup, and have the knowled. Although the negative outline is distracting in Firefox, there are ways around it.Hope I didn’t ramble too muchJMPS: Can you make the comment box bigger? I have a hard time (that’s the excuse for spelling errors!).
Natalie Jost left a comment on January 19, 2006 at 9:27 pm | #
thanks again and the comment box is that size to encourage brevity. ;)