This is a CSS tutorial on how John Brooks of Pup Inc created the image browser controls for Shacknews. He came up with this technique using nothing but CSS and images
…The arrows should be vertically centered in the image. Setting background-position to center center is good enough for most browsers because the height of the controls is determined by the height of the image. However, because we had to manually set the height of the controls to 10000px in IE, the vertical centers of the controls in that browser are 5000px - way past the bottom for most images. To remedy this, the background-position is set to center 150px in IE. Sadly, this means the arrow won’t be vertically centered in that browser. 150px looks pretty good for the demo image, but if your site’s images are taller or shorter on average, you can adjust the number to suit your needs….
Link:
Pup Inc’s Arrow Over Lay Screen Shot Browers Explained
- Related posts on background ajax
- generadores online de background, ajax load, stripe, badges, logos …
- Related posts on browser background
- BerryWeather 2.1 goes live for a Public Beta
- CSS Transparency in All The Browsers | Design Dazzling
- Extensions, Personas and Jetpack! Oh, My!
- Related posts on code browser
- JavaScript Singletons in Firefox Add-ons
- GeSHi Wordpress Plugin
- Хакер DVD » Хакер DVD, январь-февраль 2010
Related posts:
- “Glee” Explained in 60 Seconds [VIDEO]
- First Look: Microsoft’s Browser Choice Screen for Europe
- Microsofts Random Browser Choice Screen in Europe
- DICOM Viewer
- Exproz » 10 Free Favicon Hosting Sites
Tags: ajax, background, browser, code, explanation, height, image, javascript, opacity, source