CSS: img

.instui-img — Un <img> stilizzato con modificatori di display, ritaglio ed effetto che si sovrappongono.

Gli effetti si compongono tramite la proprietà personalizzata condivisa --pantoken-img-filter, quindi -with-grayscale e -with-blur possono applicarsi insieme; i modificatori di ritaglio -constrain-* richiedono che il consumatore dimensioni esplicitamente la casella.

Source: img.css

Accessibilità

Fornire un testo alt significativo che descriva l'immagine, e usare un alt="" vuoto per immagini puramente decorative in modo che le tecnologie assistive le ignorino.

Uso

@import "@pantoken/components/components.css";
@import "@pantoken/components/img.css";

Esempi

<img class="instui-img" alt="Gradient">

Modificatori

Modificatore	Descrizione
.-constrain-contain	Scala per adattarsi all'interno della casella (contain).
.-constrain-cover	Scala per riempire la casella (cover).
.-display-block	Visualizza come elemento block.
.-with-blur	Applica un effetto di sfocatura.
.-with-grayscale	Applica un effetto scala di grigi.

Proprietà personalizzate

Proprietà	Tipo	Predefinito	Descrizione
--pantoken-img	—	—	filter <filter-value-list> | none — Il filtro CSS composto sull'immagine; i modificatori di effetto lo impostano e puoi sovrascriverlo per un filtro personalizzato.

Token consumati

Token	Tipo	Valore
--instui-component-img-effect-transition-duration	<time>	1s
--instui-component-img-image-blur-amount	<length>	0.25em
--pantoken-img-filter	none | <filter-value-list> | <-ms-filter-function-list>	none