Uteis 02

  • Object-fit
  • Opacidade
  • Shadow
  • Fieldset
  • Overflow

Ajuste de Objeto [ Object-Fit ]

Altere o valor da propriedade objf com nossas classes de utilitário object-fit responsivas.
Essa propriedade diz ao conteúdo para preencher o contêiner pai de várias maneiras,
como preservar a proporção ou esticar para ocupar o máximo de espaço possível.


.objf-c = contain - Conter;
.objf-co = cover - Cobrir;
.objf-f = fill - Preencher;
.objf-s = scale - Escalar;
.objf-n = none;


... ... ... ... ... 
              
                
                    <img src="..." class="objf-c" alt="..." />
                    <img src="..." class="objf-co" alt="..." />
                    <img src="..." class="objf-f" alt="..." />
                    <img src="..." class="objf-s" alt="..." />
                    <img src="..." class="objf-n" alt="..." />

Opacidade

A propriedade .opa define o nível de opacidade de um elemento. O nível de opacidade descreve o nível de transparência, onde 1 não é nada transparente, 0,5 é 50% visível e 0 é completamente transparente.


.opa-100 = opacidade 100%
.opa-75 = opacidade 75%
.opa-50 = opacidade 50%
.opa-25 = opacidade 25%
.opa-0 = opacidade 0%

100%
75%
50%
25%
0%
              
                
                    <div class="opa-100">100%</div>
                    <div class="opa-75">75%</div>
                    <div class="opa-50">50%</div>
                    <div class="opa-25">25%</div>
                    <div class="opa-0">0%</div>

Sombra [ Shadow ]

Embora as sombras em componentes sejam desabilitadas por padrão pode ser habilitadas via $swcss,
você também pode adicionar ou remover rapidamente uma sombra com nossas classes de utilitário box-shadow.
Inclui suporte para .somb-n e três tamanhos padrão (que têm variáveis ​​associadas para corresponder).


.somb-n = Sem Sombra;
.somb-p = Sombra pequena;
.somb = Sombra Media;
.somb-g = Sombra Grande;
.somb-gg = Sombra Extra Grande;


Sem Sombra
Sombra pequena
Sombra Media
Sombra Grande
Sombra Extra Grande 
              
                
                    <div class="somb-n">Sem Sombra</div>
                    <div class="somb-p">Sombra pequena</div>
                    <div class="somb">Sombra Media</div>
                    <div class="somb-g">Sombra Grande</div>                  
                    <div class="somb-gg">Sombra Extra Grande</div>

Fieldset


Legend

Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat rem corrupti blanditiis in aspernatur.

              
                
                    <fieldset>
                        <legend>Legend</legend>
                        <p>
                            Lorem ipsum dolor sit amet consectetur adipisicing
                            elit. Placeat rem corrupti blanditiis in
                            aspernatur.
                        </p>
                    </fieldset>

Overflow

Ajuste a propriedade overflow dinamicamente com quatro valores e classes padrão. Essas classes não respondem por padrão.


.over-a - auto;
.over-h - hidden;
.over-v - visible;
.over-s - scroll;

              
                
                    <div class="over-a">auto</div>
                    <div class="over-h">hidden</div>
                    <div class="over-v">visible</div>
                    <div class="over-s">scroll</div>