CSS Inset(Box Shadow interno) na imagem.

Marcos A.A · 7 de maio de 2018

Estou tentando colocar inset na imagem através do css, só que não funciona primeiro pensei que era por causa que estava tentando fazer em um slide em js, mas mesmo quando separo uma imagem no meio do código o inset não funciona, já tentei colocar inset em uma 'div' separada e user z-index para q essa 'div' sobre ponha a imagem, também não funcionou...

<?php  
    
    $path = "upload/artigo/"
?>
<div class="carousel carousel-slider center" data-indicators="true" style="margin-top: 30px;">
        <?php 
            $rs = $con->query("SELECT * FROM artigos ORDER BY titulo ASC");

            

            while($linha = $rs->fetch(PDO::FETCH_OBJ)){
            
            $image = $linha->image;
            $titulo = $linha->titulo;
            
        ?>

        
            <div class="carousel-item red white-text" style="width: 34%; height: 350px; min-height: 0;" href="#!">
              <h2 class="" style="position: absolute; "><?=$titulo?></h2>
              <img class="slider-image" style="height: 350px; border-right: thin black solid; border-left: thin black solid; 

              box-shadow: inset 0px -42px 10px 0px #ABABAB,5px 5px 5px 1px #DDDDDD;
              -webkit-box-shadow: inset 0px -42px 10px 0px #ABABAB,5px 5px 5px 1px #DDDDDD;
              -moz-box-shadow: inset 0px -42px 10px 0px #ABABAB,5px 5px 5px 1px #DDDDDD;
              -o-box-shadow: inset 0px -42px 10px 0px #ABABAB,5px 5px 5px 1px #DDDDDD; z-index: 99999;"

             

              src="<?=$path . $image?>">
            </div>
        
             
        <?php 
            } 
        ?>
</div>

Leonardo0308 · 7 de maio de 2018

Bom dia @Marcos A.A

Segue a sintaxe da borda Inset.

<!DOCTYPE html>
<html>
<head>
<style>

	p.inset {border-style: inset;}

</style>
</head>
<body>

	<p class="inset">Texto com borda inset</p>

</body>
</html>

Você tem que usar o "border-style", espero ter ajudado.

Marcos A.A · 7 de maio de 2018

Eu quero inset na imagem, um Box-Shadow interior no parte inferior da imagem para colocar texto legível, ate faria o tratamento no canvas mas ainda não sei mexer o bastante nele assim, teria que salvar mais de uma imagem etc...

Esse e um pedido de cliente, infelizmente tenho que arrumar um jeito direto no css, que não mexa com responsivo.

7 de maio de 2018

Para ficar fácil da gente te ajudar, providencie um "reduced test case".

https://css-tricks.com/reduced-test-cases/

Leonardo0308 · 7 de maio de 2018

9 minutos atrás, Marcos A.A disse:

Eu quero inset na imagem, um Box-Shadow interior no parte inferior da imagem para colocar texto legível, ate faria o tratamento no canvas mas ainda não sei mexer o bastante nele assim, teria que salvar mais de uma imagem etc...

Esse e um pedido de cliente, infelizmente tenho que arrumar um jeito direto no css, que não mexa com responsivo.

Na teoria você teria que colocar uma div contendo esse elemento do box-shadow e dentro dessa div ter a imagem, algo tipo assim.

<!DOCTYPE html>
<html>
<head>
<style> 

div.inset {
    box-shadow: inset 0px -42px 10px 0px #ABABAB,5px 5px 5px 1px #DDDDDD;
}


</style>
</head>
<body>

<div class="inset">
  <img src="imagem.jpg">
</div>


</body>
</html>