The blows landed like a hammer…
As a way of finishing up the comic-books-in-web-tech trend that I’ve been on the past few weeks, I thought I’d take a look at creating dynamic comic panels with CSS.
Panels in traditional comics are rectangular, but Japanese manga and Western graphical experimentation in the late 1970s created panels that took on all kinds of shapes, the demo above being one example.
Traditional photographic vignettes – the effect seen when filming a projected image, or in photos taken with old box cameras – have more of a “pincushion” appearance, with shadows becoming more visible at the corners of the image and less at the sides. The previous example in this CSS masks series used an inner box-shadow on a background image, and therefore tended to a rectangular appearance: any circular shadowing effect we achieved was due solely to curving the border of the element with border-radius. But when we keep the corners of the element’s box at right angles, and combine that same technique with a radial gradient:
Golden Gate Bridge in fog
Vignetting is the technique of fading of an image at its edges, often seen in wedding photographs, or in shots taken by a toy camera. In essence, it creates an inner frame for an image.
We can implement a similar technique to that used by the previous example of creating simple image masks; by maximizing the border-radius, you can create elliptical cut-out effects, as shown above.
