Simulating Drop Shadows with the CSS Paint API

Most front-end developers are familiar with the box-shadow CSS property. While effective, shadows present challenges within the CSS box model: they don't affect element dimensions and are easily clipped by parent overflow settings. Workarounds exist, but the emerging CSS Houdini specifications offer exciting alternatives. The CSS Paint API, in particular, enables programmatic image generation at runtime. Let's explore using it to create sophisticated shadows integrated within a border image.

A Glimpse into Houdini

Houdini provides enhanced access to the browser's painting process. It's a suite of low-level APIs exposing parts of the CSS engine, empowering developers to extend CSS by interacting with the browser's rendering engine's styling and layout.

The CSS Paint API

The CSS Paint API, a W3C Candidate Recommendation, is one of Houdini's first APIs to gain browser traction. Currently, Chrome and Edge offer full support, while Safari requires a flag, and Firefox considers it suitable for prototyping. A polyfill exists for unsupported browsers (excluding IE11). Note that while enabled in Chromium, passing arguments to the paint() function might still need experimental web platform features enabled.

Our Approach: Shadow Integration

We'll generate a shadow image and apply it as a border-image. Shadows, unlike padding or margins, don't inherently increase element dimensions. Our approach embeds the shadow directly into the element's border, offering several benefits:

1. border-width contributes to the element's overall dimensions.
2. Content avoids overlapping the shadow.
3. Padding doesn't require extra width.
4. Margins don't interfere with sibling elements.

The border-image property uses image slices for corners and sides. The CSS Paint API will generate this image, layering multiple shadows.

The process involves:

1. Setting up HTML and CSS for the target element.
2. Creating a module to draw the image.
3. Loading the module into a paint worklet.
4. Calling the worklet in CSS using the paint() function.

Preparing the Canvas

The CSS Paint API functions similarly to the HTML <canvas></canvas> element. We'll create a 300x300 div as our canvas:

<div class="foo"></div>

And style it:

.foo {
  border: 15px solid #efefef;
  box-sizing: border-box;
  height: 300px;
  width: 300px;
}

Constructing the Paint Class

HTTPS is mandatory for JavaScript worklets, including paint worklets.

Next, create the module (a simple file with registerPaint()). This function takes the worklet's name and a class containing the painting logic:

registerPaint(
  "shadow",
  class {
    static get inputProperties() {
      return ["--shadow-colors", "background-color", "border-top-width"];
    }
    static get inputArguments() {
      return ["<integer> ", "<integer> ", "<integer> "];
    }
    paint(context, size, props, args) {
      // Painting logic here...
    }
  }
);</integer></integer></integer>

inputProperties specifies CSS properties to access (custom and standard). inputArguments (currently behind a flag in some browsers) allows passing arguments directly to the paint() function. The paint() method uses the provided context, size, properties, and arguments to draw.

Implementing the paint() Method

Inside paint(), we'll adjust dimensions for border width:

const width = geom.width - borderWidth * 2;
const height = geom.height - borderWidth * 2;

We'll access properties and arguments:

const borderWidth = props.get("border-top-width").value;
const shadowColors = props.getAll("--shadow-colors");
ctx.fillStyle = props.get("background-color").toString();

const blurArray = args[2].toString().split(/\s /);
const xArray = args[0].toString().split(/\s /);
const yArray = args[1].toString().split(/\s /);

Then, we'll draw the shadows:

shadowColors.forEach((shadowColor, index) => {
  ctx.shadowOffsetX = xArray[index];
  ctx.shadowOffsetY = yArray[index];
  ctx.shadowBlur = blurArray[index];
  ctx.shadowColor = shadowColor.toString();
  ctx.fillRect(borderWidth, borderWidth, width, height);
});

This iterates through shadow colors, setting shadow properties and drawing a filled rectangle. Alternative methods, like using a canvas drop-shadow filter, are also possible.

Registering and Applying

Register the paint module:

CSS.paintWorklet.addModule("path/to/your/module.js");

Register custom properties (optional but recommended):

CSS.registerProperty({
  name: "--shadow-colors",
  syntax: "<color> ",
  initialValue: "black",
  inherits: false
});</color>

Finally, apply the paint function in your CSS:

.foo {
  border-image-source: paint(shadow, 0 0 0, 8 2 1, 8 5 3) 15;
  border-image-slice: 15;
}

Remember to handle device pixel ratio for proper scaling using devicePixelRatio and calc(). Fallbacks (padding, margins, gradients, pseudo-elements) are crucial for broader browser compatibility.

Conclusion

The CSS Paint API offers a powerful way to create custom effects, but it's important to consider browser support and provide appropriate fallbacks. While more complex than simpler solutions, it provides precise control over visual elements, opening up creative possibilities beyond shadow effects.

The above is the detailed content of Simulating Drop Shadows with the CSS Paint API. For more information, please follow other related articles on the PHP Chinese website!