What You'll Be Creating Google's new design efforts are vast and justify a significant amount of conversation. But instead of talking about the theory of Material Design and the implications of Google's newest efforts, we're going to focus on an interesting technique Google has employed on their Design landing page. When the user clicks on one of the blocks, an SVG circle expands from the point of the user's click to fill most of the box. We're going to recreate this effect using a few lines of jQuery, some simple HTML and CSS. Let's get started! The Basic Grid Before we start, we need to set up a basic grid. We are going to build the grid elements without using a framework, but this technique would work with a framework perfectly fine. The column classes map to fractions, so that "col-1-3" means 1/3 the width of the containing element. Basic CSS Next, we will set up our column classes.
↧