Chapter 9. Calc, Gradients, and Shadows
In the previous chapter, we analyzed flexbox and simple structures based on flexbox model. In this chapter, we will focus on the following aspects of CSS:
- Calc function
- Gradients
- Shadows
- CSS Animations.
- Usage of data-attribute
Let's begin!
The calc() method
Have you ever had a problem with mixing units? For example, say you needed to make an equation 60%-10px? These operations could be very helpful in old browsers and this is possible right now with the calc() method in CSS. How can you use it? Let's resolve a problem with two floating boxes; one has a static width and the second is adjusting to the possible max width. The code is as follows:
HTML:
<div class="container"> <div class="first">First</div> <div class="second">Second</div> ...
Get Professional CSS3 now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
