TAILIEUCHUNG - CSS Mastery- P4

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 .

• Đồ họa - Thiết kế - Flash
• thiết kế web
• giáo trình CSS
• kĩ năng photoshop
• flash căn bản
• thiết kế layout
• Thiết kế trang web
• hướng dẫn Thiết kế trang web
• kinh nghiệm Thiết kế trang web
• tài liệu Thiết kế trang web
• cẩm nang Thiết kế trang web
• kỹ thuật Thiết kế trang web
• Bài giảng Thiết kế Web
• Đại cương Thiết kế Web
• Tổng quan Thiết kế Web
• Môn học Thiết kế Web
• Mục tiêu Thiết kế Web
• Giáo trình Thiết kế giao diện web
• Thiết kế và quản lý website
• Thiết kế giao diện web
• Nhận dạng các trang web
• Cấu trúc trang web
• phương pháp thiết kế trang Web
• kỹ thuật thiết kế Web
• thiết kế web nhanh
• thực hành thiết kế web
• thiết kế web đẹp
• tài liệu về thiết kế web
• thủ thuật thiết kế web
• mẹo dùng web
• học thiết kế web
• Thiết kế web động
• tài liệu Thiết kế web động
• hướng dẫn Thiết kế web động
• kinh nghiệm Thiết kế web động
• cẩm nang Thiết kế web động