and to change slides. 2 for comments. estelle.github.com/CSS

Images

https://estelle.github.io/CSS/borders/images.html

Due to CanIUse quirks, please click on headers that read "Browser support:" to load caniuse

CSS Images

CSS <image> functions

  • url() function
  • Gradients
  • cross-fade() function
  • element() function
  • image() function
  • image-set() function
  • paint() function - a.k.a. Houdini

<image> functions

<image> functions

url(test.jpg)
linear-gradient(blue, red)
radial-gradient(blue, red)
conic-gradient(blue, red)
repeating-linear-gradient(blue, red 20%)
repeating-radial-gradient(blue, red 20%)
repeating-conic-gradient(blue, red 20%)
cross-fade(url(twenty.png) 20%, url(eighty.png)) 
element(#realid)
image(ltr 'arrow.png#xywh=0,0,16,16', red) 
image-set('test.jpg' 1x, 'test-2x.jpg' 2x)
paint(worklet)

Where <image> is used.

background-image:
list-style-image:
border-image-source:
mask-image:
shape-outside:
mask-border-source:
symbols: /* for @counter-style */
content:  /* for ::after and ::before pseudo elements (/)
-webkit-box-reflect:

Default image sizes

Some images have default sizes when used:

Kind of Object (CSS Property) Default object size
background-image The size of the element's background positioning area
list-style-image The size of a 1em character
border-image-source The size of the element's border image area
cursor* The browser-defined size matching the usual cursor size on the client's system
symbols for @counter-style The usual cursor size on the client's system
content for a pseudo-element (::after/::before) A 300px × 150px rectangle

The cursor takes an url() with an .cur file, but no other type of image.

url()

url() function

The url() function for images works wherever the image value works. It is the only global image function right now.

background-image: url("https://mdn.mozillademos.org/files/16761/star.gif");
list-style-image: url('../images/bullet.jpg');
content: url("pdficon.jpg");
border-image-source: url(/media/diamonds.png);
mask-image: url("masks.svg#mask1");

The url() function is not just for images

cursor: url(mycursor.cur);
src: url('fantasticfont.woff');
offset-path: url(#path);

url() values

url(singleImage.png)

url(SVGImages.svg);

url(sprite.png#xywh=40,0,20,20)

url(data:image/gif;base64,fOulrS123hEAAa517sdfQfdafsPFRjuy187xxRM221...)

url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='200'><circle cx='55' cy='190' r='25' fill='#FFF' />^lt;path d='M160 213h-34a82 82 0 0 0 -82 -82v-34a116 116 0 0 1 116 116z' fill='#666'/><path d='M184 213A140 140 0 0 0 44 73 V 38a175 175 0 0 1 175 175z' fill='#666'/></svg>"); SVG Example

Media fragment will not break backwards... hash will be ignored

url() Example

Gradient Functions

Gradients

They get their own chapter

6 Gradient Types

  • linear-gradient();
  • radial-gradient();
  • conic-gradient();
  • repeating-linear-gradient()
  • repeating-radial-gradient()
  • repeating-conic-gradient()

cross-fade()

cross-fade() function

Used to blend two or more images at a defined transparency.

cross-fade( [<percentage>? && [ <image> | <color> ] ]# )

the cross-fade() image function takes other image functions as a parameter

cross-fade(40% url(image1.jpg), 
           30% url(image2.jpg), 
           35% url(image3.jpg))

If any %s are omitted, the missing split the difference up to a total of 100%.

This syntax is not yet supported anywhere.

cross-fade() Example

Browser support: cross-fade() image value

Open

element()

element() function

Defines an <image> value generated from an HTML element. Allows the use of any element, including <canvas> anywhere CSS images can be used (since FF4).

element(#someID)

Pass the ID of an element

background-image: -moz-element('#someID');
background-image: element('#someID')

This image is live: if the HTML changes, the image is automatically updated.

Works prefixed. In FF only

element() Example

element() Example

image()

image() function

Not supported anywhere yet!

Similar to url() but with additional features, including directionality, fallback image, fallback color, and image fragments.

image( <direction>? [ <image-src>? , <color>? ]! )
direction
Optional, either ltr or rtl
image-src
Zero or more <url>s or <string>s specifying the image sources, with optional image fragment identifiers. image(sprite.png#xywh=40,0,20,20);
color
Optional solid color fallback.
image("sprite.webp#xywh=0,20,40,60", red);
image(ltr 'leftarrow.png');

More on image()

Define which portion of the image to show:

background-image:
    -moz-image-rect(url(ico_sprite.jpg), 32, 64, 16, 16);
background-image: image('ico_sprite.jpg#xywh=32,64,16,16')

Fallback in case your images doesn't load:

background-image:
     image("try1.svg", "try2.png", "try3.gif", blue)

Flip the image if the direction is rtl.

background-image: image("arrow.png" rtl)

image-set()

image-set() function

Provide a set of images and information, allowing the browser to pick the most appropriate option.

image-set( <image> <resolution># ) 

General goal is serving high resolution images.

background-image: image-set( "cat.png" 1x,
   "cat-2x.png" 2x,
   "cat-print.png" 600dpi);
  • Resolution in x or dppx, dpi, or dpcm
  • Every image within an image-set() must have a unique resolution.
  • Can not be nested inside another image-set() function.

Browser support: image-set() image value

Open

paint()

a.k.a. “Houdini”

paint() function

Enables pulling in JavaScript drawing directly into an element's background, border, or content.

background-image: paint(myJSDrawing);

To programmatically create a CSS image with JavaScript:

  1. Define a paint worklet using the registerPaint() function
  2. Register the worklet
  3. Include the paint() CSS function

Has to be over HTTPS!!

A JS Worklet

registerPaint('nameOfMyworklet', class {
  // use this function to retrieve any custom props defined for the element, 
  // return them in the specified array
  static get inputProperties() { return ['--myColor']; }

  // Input arguments that can be passed to the `paint` function
  // static get inputArguments() { return ['']; }
  // Whether Alpha is allowed? - This is set to true by default, 
  // if it is set to false all colours used on the canvas will have full opacity, or alpha of 1.0
  static get contextOptions() { return {alpha: true}; }

  paint(ctx, size, props) {
    // ctx -> drawing context
    // size -> size of the box being painted
    // props -> list of custom properties available to the element

    // set where to start the highlight & dimensions
    const x = 0;
    const y = size.height * 0.3;
    const blockWidth = size.width * 0.33;
    const highlightHeight = size.height * 0.85;

    // Paint uses Typed OM to retireve the custom property 
    // value, so we have to use the get method on it
    ctx.fillStyle = props.get( '--myColor' );

    // block
    ctx.beginPath();
    ctx.moveTo( x, y);
    ctx.lineTo( blockWidth, y );
    ctx.lineTo( blockWidth + highlightHeight, highlightHeight );
    ctx.lineTo( x, highlightHeight );
    ctx.lineTo( x, y );
    ctx.closePath();
    ctx.fill();
    // dashes
    for ( let i = 0; i < 4; i++ ) {
      let start = i * 2;
      ctx.beginPath();
      ctx.moveTo( ( blockWidth ) + ( start * 10 ) + 10, y );
      ctx.lineTo( ( blockWidth ) + ( start * 10 ) + 20, y );
      ctx.lineTo( ( blockWidth ) + ( start * 10 ) + 20 + (highlightHeight ), highlightHeight );
      ctx.lineTo( ( blockWidth ) + (start * 10 ) + 10 + ( highlightHeight ), highlightHeight );
      ctx.lineTo( ( blockWidth ) + ( start * 10 ) + 10, y );
      ctx.closePath();
      ctx.fill();
    }
  } // paint
});    
  

Register the worklet

Add the module, or "register" the worklet

CSS.paintWorklet.addModule('houdini.js');

Now it can be referenced with the paint() function with the name of the worklet

 element {
  background-image: paint(nameOfMyworklet);
}
h1 { --myColor: hsla(155, 90%, 60%, 0.7); }
h3 { --myColor: hsla(255, 90%, 60%, 0.5); }
h6 { --myColor: hsla(355, 90%, 60%, 0.3); }

CSS Painting API

This is a header

This is a heading level 3 with more text than the h1

Hello H6

Browser support: paint() image value

Open

Backgrounds

Next ➹