tailieunhanh - giới thiều ebook HTML5 và CSS3 in the real world phần 6

Tham khảo tài liệu 'giới thiều ebook html5 và css3 in the real world phần 6', công nghệ thông tin, kỹ thuật lập trình phục vụ nhu cầu học tập, nghiên cứu và làm việc hiệu quả | 140 HTML5 CSS3 for the Real World Drop Shadows CSS3 provides the ability to add drop shadows to elements using the box-shadow property. This property lets you specify the color height width blur and offset of one or multiple inner and or outer drop shadows on your elements. We usually think of drop shadows as an effect that makes an element look like it s hovering over the page and leaving a shadow however with such fine-grained control over all those variables you can be quite creative. For our advertisement link we can use a box-shadow with no blur to create the appearance of a 3D box. The box-shadow property takes a comma-separated list of shadows as its value. Each shadow is defined by two to four size values a color and the key term inset for inset or internal shadows. If you fail to specify inset the default is for the shadow to be drawn outside of the element Let s look at the shadow we re using on our element so that we can break down what each value is doing css excerpt -webkit-box-shadow 2px 5px 0 0 rgba 72 72 72 1 -moz-box-shadow 2px 5px 0 0 rgba 72 72 72 1 box-shadow 2px 5px 0 0 rgba 72 72 72 1 The first value is the horizontal offset. A positive value will create a shadow to the right of the element a negative value to the left. In our case our shadow is two pixels to the right of the a. The second value is the vertical offset. A positive value pushes the shadow down creating a shadow on the bottom of the element. A negative value pushes the shadow up. In our case the shadow is five pixels below the a. The third value if included is the blur distance of the shadow. The greater the value the more the shadow is blurred. Only positive values are allowed. Our shadow is not blurred so we can either include a value of zero 0 or omit the value altogether. The fourth value determines the spread distance of the shadow. A positive value will cause the shadow shape to expand in all directions. A negative value contracts Introducing CSS3 141 the shadow.