CSS: img

.instui-img — Um <img> estilizado com modificadores de exibição, corte e efeito que se empilham.

Os efeitos se compõem através da propriedade customizada compartilhada --pantoken-img-filter, então -with-grayscale e -with-blur podem ser aplicados juntos; os modificadores de corte -constrain-* exigem que o consumidor defina explicitamente o tamanho da caixa.

Source: img.css

Acessibilidade

Forneça um texto alt significativo que descreva a imagem, e use um alt="" vazio para imagens puramente decorativas para que tecnologias assistivas as ignorem.

Uso

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

Exemplos

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

Modificadores

Modificador	Descrição
.-constrain-contain	Escalar para caber dentro da caixa (contain).
.-constrain-cover	Escalar para preencher a caixa (cover).
.-display-block	Exibir como um elemento de bloco.
.-with-blur	Aplicar um efeito de desfoque.
.-with-grayscale	Aplicar um efeito em escala de cinza.

Propriedades personalizadas

Propriedade	Tipo	Padrão	Descrição
--pantoken-img	—	—	filter <filter-value-list> | none — O filtro CSS composto na imagem; os modificadores de efeito o definem, e você pode sobrescrevê-lo para um filtro personalizado.

Tokens consumidos

Token	Tipo	Valor
--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