CSS Mastery- P4: The human race is a naturally inquisitive species. We just love tinkering with things. When I recently bought a new iMac, I had it to bits within seconds, before I’d even read the instruction manual. We enjoy working things out ourselves and creating our own mental models of how we think things behave. We muddle through and only turn to the manual when something goes wrong or defies our expectations. | STYLING LINKS box-shadow 2px 2px 2px ccc Last Safari includes another proprietary property called box-reflect which as the name suggests allows you to create reflections of an object. This property contains a number of different arguments including the position and distance of the reflection along with a masking image. Interestingly you can use the -webkit-gradient value to automatically generate this mask. In this instance I m positioning the reflection 2 pixels below the button and using a mask that fades to white see Figure 5-14 . a display block width height line-height text-align center text-decoration none border 1px solid 66a300 -moz-border-radius 6px -webkit-border-radius 6px border-radius 6px background-image -webkit-gradient linear left top left bottom from abe142 to 67a400 background-color 8cca12 color fff text-shadow 2px 2px 2px 66a300 -moz-box-shadow 2px 2px 2px ccc -webkit-box-shadow 2px 2px 2px ccc box-shadow 2px 2px 2px ccc -webkit-box-reflect below 2px -webkit-gradient linear left top left bottom from transparent color-stop transparent to white 127 CHAPTER 5 Figure 5-14. A rounded corner button using Safari specific extensions to CSS There is some debate around whether these types of effects should be done using CSS or not so it s uncertain if they will ever make it into the official specification. Because of this and the lack of cross-browser support it would be unwise to use these techniques in a production environment. However that shouldn t stop you from playing around with them on your personal sites just as long as you realize that they re invalid CSS and may get removed or changed in future versions of the browser. Pure CSS tooltips Tooltips are the little yellow text boxes that pop up in some browsers when you hover over elements with title tags. Several developers have created their own custom stylized tooltips using a combination of JavaScript and CSS. However it is possible to create pure CSS tooltips by using CSS .
