Border com ápice!

[oliveirajr 0]

Boa noite Pessoal.

 

Seguinte, eu já vi em alguns tipos de sites, umas bordas que possuem uma ápice, uma ponta, tanto para fora da div como para dentro da mesma. A principio pensei que fosse imagem mas creio que não é.

 

no link http://bonstutoriais.com.br/category/web-design/page/2/ os links que aparecem mais abaixo possuem um tipo de ápice interior voltado para cima, quando se passa o mouse em cima dele tudo em volta fica azul. deem uma olhadinha. obrigado

[wilnet 92]

Olá oliverajr, blza!

 

 

Segue o link

 

http://hasinhayder.github.io/ImageCaptionHoverAnimation/index.html

 

http://jquerydemo.com/demo/bouncing-captions.aspx

 

 

Espero ter ajudado.

 

vlw

[Emet 6]

Existe em pequeno "truque" usando as bordas no CSS o que nos permite fazer bordas triangulares.

Eu pessoalmente insiro essas bordas com :after ou :before.

.example {

  position: relative;

  width: 300px;

  height: 150px;

  margin: 100px;

  background: #DDD;

  text-align: center;

}


.example:after {

  content: "";

  width: 0;

  height: 0;

  position: absolute;

  border-left: 15px solid transparent;

  border-right: 15px solid transparent;

  border-bottom: 20px solid #DDD;

  top: -20px;

  left: 70%;

}


.example span {

  position: relative;

  top: 50%;

  transform: translateY(-50%); 

  font: 17px bold "Trebuchet MS", sans-serif;

}

<div class="example">

  <span>Example</span>

</div> 

JSBIN: http://jsbin.com/qiguhosibu/1/edit

Exemplo como do site citado: http://codepen.io/anon/pen/emMwoz

[wilnet 92]

Faltou o Link referente de como fazer um Triangulo com CSS:

 

Segue o tutorial para sua pesquisa.

 

http://css-tricks.com/snippets/css/css-triangle/

 

vlw

[Carlos de Oliveira Júnior 1]

Para fazer o efeito fade-in e fade-out quando você passa o mouse sobre a imagem, é só usar um transition (CSS3), esse ápice que você está falando, dá para fazer como o rapaz aqui em cima disse, com uma div meio cortada, de maneira que fique triangular, ou até mesmo uma imagem.

[oliveirajr 0]

 

Existe em pequeno "truque" usando as bordas no CSS o que nos permite fazer bordas triangulares.

Eu pessoalmente insiro essas bordas com :after ou :before.

.example {
  position: relative;
  width: 300px;
  height: 150px;
  margin: 100px;
  background: #DDD;
  text-align: center;
}

.example:after {
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 20px solid #DDD;
  top: -20px;
  left: 70%;
}

.example span {
  position: relative;
  top: 50%;
  transform: translateY(-50%); 
  font: 17px bold "Trebuchet MS", sans-serif;
}

<div class="example">
  <span>Example</span>
</div> 

JSBIN: http://jsbin.com/qiguhosibu/1/edit

Exemplo como do site citado: http://codepen.io/anon/pen/emMwoz

 

VAleuuuuuuu.... ;D vi só hj... mas valeu mesmo... ;D

[oliveirajr 0]

Faltou o Link referente de como fazer um Triangulo com CSS:

 

Segue o tutorial para sua pesquisa.

 

http://css-tricks.com/snippets/css/css-triangle/

 

vlw

valeu... ;D