Ir ao conteúdo
  • Comunicados

    • Gabriel Torres

      Seja um moderador do Clube do Hardware!   12-02-2016

      Prezados membros do Clube do Hardware, Está aberto o processo de seleção de novos moderadores para diversos setores ou áreas do Clube do Hardware. Os requisitos são:   Pelo menos 500 posts e um ano de cadastro; Boa frequência de participação; Ser respeitoso, cordial e educado com os demais membros; Ter bom nível de português; Ter razoável conhecimento da área em que pretende atuar; Saber trabalhar em equipe (com os moderadores, coordenadores e administradores).   Os interessados deverão enviar uma mensagem privada para o usuário @Equipe Clube do Hardware com o título "Candidato a moderador". A mensagem deverá conter respostas às perguntas abaixo:   Qual o seu nome completo? Qual sua data de nascimento? Qual sua formação/profissão? Já atuou como moderador em algo outro fórum, se sim, qual? De forma sucinta, explique o porquê de querer ser moderador do fórum e conte-nos um pouco sobre você.   OBS: Não se trata de função remunerada. Todos que fazem parte do staff são voluntários.
    • DiF

      Poste seus códigos corretamente!   21-05-2016

      Prezados membros do Fórum do Clube do Hardware, O Fórum oferece um recurso chamado CODE, onde o ícone no painel do editor é  <>     O uso deste recurso é  imprescindível para uma melhor leitura, manter a organização, diferenciar de texto comum e principalmente evitar que os compiladores e IDEs acusem erro ao colar um código copiado daqui. Portanto convido-lhes para ler as instruções de como usar este recurso CODE neste tópico:  
Marcos A.A

CSS Inset(Box Shadow interno) na imagem.

Recommended Posts

Postado (editado)

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>


 

   

Editado por DiF
Botão CODE <>

Compartilhar este post


Link para o post
Compartilhar em outros sites

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. :D

Compartilhar este post


Link para o post
Compartilhar em outros sites

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.   

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

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

Compartilhar este post


Link para o post
Compartilhar em outros sites
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>

Só que você teria que arrumar a div para a imagem não sobrepor ela, se não a div com o box-shadow some.

  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário






Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×