DOCSEARCHbyAlgolia
Submit Docs

CSS Web UI Demos

repository·main·Indexed 41 days ago

https://github.com/googlechromelabs/css-web-ui-demos

A collection of demonstrations by the Chrome DevRel team showcasing web technologies and UI patterns. Includes examples for CSS anchor positioning, the experimental HTML-in-Canvas API (Chrome 148+), Liquid Glass SVG filter effects, and tests for PopStateEvent and NavigateEvent#hasUAVisualTransition.

Tokens
3.6K
Snippets
13
Records
20
Agent score
52%

What's inside CSS Web UI Demos

  1. Overview of CSS and Web UI Demos

    main
    This repository is a collection of demos maintained by the CSS and Web UI Chrome DevRel team. Each demo is contained within its own subfolder and includes its own specific setup and usage instructions. To use a specific demo, navigate to its respective directory to find its unique documentation.

  2. Test PopStateEvent and NavigateEvent#hasUAVisualTransition

    main

    This project provides test pages to verify the hasUAVisualTransition property on PopStateEvent and NavigateEvent.

    To test the implementation:

    1. Launch the project.
    2. Choose the specific flavor/scenario you want to test.
    3. Click the provided links several times to build up navigation history.
    4. Navigate back using either the User Agent (UA) back button or a swipe gesture.
    5. Observe and verify the reported value for hasUAVisualTransition.

  3. Liquid Glass Reference file structure

    main

    The Liquid Glass reference folder contains the following assets required to replicate the effect:

    • index.html: Contains the HTML structure for the "Switch" demo (fully functional) and the "Music Player" demo (reference structure).
    • styles.css: A full stylesheet containing utility classes (Tailwind-like) used in the HTML.
    • *.png: The displacement and specular maps required by the SVG filters.

  4. Understand the carousels-gallery project structure

    main

    The carousels-gallery package is built using Astro. The project follows a standard Astro directory structure:

    • src/pages/: Contains .astro or .md files. Each file in this directory is automatically exposed as a route based on its filename.
    • src/components/: A directory for reusable components (Astro, React, Vue, Svelte, or Preact).
    • src/layouts/: Contains layout components used to wrap pages.
    • public/: Stores static assets like images and favicons that are served directly.
    • package.json: Defines project dependencies and scripts.

  5. Basic Implementation Pattern for HTML-in-Canvas

    main

    The HTML-in-Canvas API allows you to draw DOM content directly into a <canvas> or a WebGL/WebGPU texture.

    Key Concepts:

    • layoutsubtree attribute: Adding this attribute to a <canvas> element allows it to contain DOM children. These children are processed by the layout engine but are not rendered as standard HTML elements; instead, they are available for drawing into the canvas.
    • ctx.drawElementImage(element, x, y): This method draws a specified DOM element onto the canvas context at the provided coordinates. It returns a transform object.
    • canvas.onpaint: An event handler used to trigger the drawing logic.
    • Hit-testing: To keep the UI interactable and accessible, you should sync the DOM element's style (e.g., transform) with the transform returned by drawElementImage.
    <canvas id="my-canvas" layoutsubtree>
  <!-- DOM content lives inside, processed by layout engine but not rendered -->
  <div id="ui-overlay">Hello World</div
</canvas>

<script>
  const canvas = document.getElementById('my-canvas');
  const ctx = canvas.getContext('2d');
  const el = document.getElementById('ui-overlay');

  canvas.onpaint = () => {
    ctx.reset();
    // Draw the HTML element at (100, 100)
    const transform = ctx.drawElementImage(el, 100, 100);
    // Sync DOM for hit-testing
    el.style.transform = transform.toString();
  };
</script>

  6. How the Liquid Glass effect works

    main

    The Liquid Glass effect is a visual technique that uses SVG filters to create a distorted, glass-like appearance on elements. It relies on the following mechanism:

    1. Displacement Map: A grayscale image (e.g., displacement-map-*.png) defines how the background is distorted.
    2. Backdrop Filter: The effect is applied to an element using the CSS property backdrop-filter: url(#filter-id).
    3. SVG Filter Pipeline:
      • feImage is used to load the displacement map image into the filter context.
      • feDisplacementMap uses that image to perform the actual distortion.
      • An optional specular map (e.g., specular-map-*.png) can be used to add highlights or reflections by compositing it with the result using feComposite and feBlend.

  7. Run HTML-in-Canvas examples locally

    main

    To run the examples in this repository, navigate to the html-in-canvas directory and serve the public directory using a local static file server.

    Ensure you are using Chrome 148+ with the #canvas-draw-element flag enabled to view the results.

    # 1. Navigate to the directory
cd html-in-canvas

# 2. Start a server (Option A: Node.js)
npx serve public

# OR (Option B: Python)
python3 -m http.server --directory public

  12. Publish the demo to chrome.dev

    main

    Note: Publishing is restricted to Googlers with proper access. The demo is published to https://chrome.dev/has-ua-visual-transition/ using gcloud storage rsync to sync the src directory to the Google Cloud Storage bucket.

    gcloud auth login
gcloud storage rsync --recursive --delete-unmatched-destination-objects src gs://chrome-dev-demos/public/has-ua-visual-transition