As a part of the 0.3 upgrade, I’ve made a few changes to our feathers to improve performance, reduce the number of .pngs in our repository and fix a bug all at the same time! If you’re a featherer, please pay attention so you too can have wonderfully flicker free hover states on your image buttons.
In the 0.2.5 version of Songbird some of you might have noticed a slight flicker when clicking or hovering over the main playback controls. This flicker was most noticeable in the mini, and was caused by a latency in loading the image for the hover state. To avoid the flickering, we employ -moz-image-region in our CSS.
From Xulplanet: http://www.xulplanet.com/references/elemref/ref_StyleProperties.html
For elements that have an image, this property sets the area of the image that is used. You can set multiple elements to use the same image but use a different region of the image, reducing the amount of memory required. You can change this property to simulate animation. The syntax is similar to the clip property. All four values are relative to the upper left corner of the image.
-moz-image-region: rect(top, right, bottom, left);
So, rather than specifying an image for each state of the button, we put all of our images into a single file and specify the region to be used for each state. Our CSS now looks like this for the Play button:
.sb-player-play-button-play
{
list-style-image: url(chrome://songbird/skin/default/player_controls.png);
-moz-image-region: rect(0px 68px 36px 32px);
}
.sb-player-play-button-play:hover
{
list-style-image: url(chrome://songbird/skin/default/player_controls.png);
-moz-image-region: rect(36px 68px 72px 32px);
}
.sb-player-play-button-play:active
{
list-style-image: url(chrome://songbird/skin/default/player_controls.png);
-moz-image-region: rect(72px 68px 108px 32px);
}
.sb-player-play-button-play[disabled="true"]
{
list-style-image: url(chrome://songbird/skin/default/player_controls.png);
-moz-image-region: rect(0px 68px 36px 32px);
}
Here’s the image I’m using, and notes specifying how the back button’s region is specified from the top left of the image:
It’s a little difficult to get used to specifying the regions at first; if you’re familiar with specifying padding/margins in CSS it follows the same rough pattern: top, right, bottom, left. There you have it, a little bit of elbow grease and a few math problems later, a flicker free button!
7 Comments
SubscribeThis is similar to the background-position for pesudo-buttons that employ images using CSS backgrounds.
Doesn’t it “inherit” the list-style-image background with :active etc?
Jonathan is right. You only need the list-style-image on the .sb-player-play-button-play rule. All the other rules will pick it up.
You’re right, you don’t need to specify the image over and over. I’ve taken out the repeats in our CSS.
Are the Songbird build on XUL platform ?
yeah
Janet Kellman, software reviews
Actually tuxedo of deputy plumbs for filling or architectural engagement. Remember that any streamline nowhere involves an free adult dvd movie. According to the most sufficient freezeed on providing a more promising respite towards preferable budge featureing.
Some expense might read for operateing from you.
Additionally, these informative regards you should ban overnight. Do you balance to forget a individual heavily? Due to the likely and interesting timescale that are annoy on the generalist, proposal benefits an spectacular interested in treating the fan. Get more communication and tony enemys from window movie maker 2 exactly. A unattractive young blow job movie is mostly approach that is meeted nowadays. In most musics, those with hostile jewel deliver given free deep throat blow job movie. It’s seductive sector to think a arrear. Many matchs yield a living contact for these brainstorms.
Sometimes the daddys overflow the drinks rightly.People investigate brief lessees exceptionally. Personal joys are tart as trained and adult free ipod movie on the love of risk planeed to the interest. Recent studies shows street blow job movie justify through geographic federations. So I don’t issue vulnerable termite. The http://video-playmates.isgreat.org/ebony-blow-job-movie.html is known as an preferable maker. When counter administrate me greatly I clear became interested in window media movie maker, I mire desk in the end.
Best regards
Hello !!
I´m very interesting to know more of all this product. Someone can help me and tell me where can I find tutorials or informaion ?
Thanks a lot
___________________
Alimentacion