Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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
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
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
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.
>
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>Exemplo como do site citado: http://codepen.io/anon/pen/emMwoz
VAleuuuuuuu.... ;D vi só hj... mas valeu mesmo... ;D
>
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
Olá oliverajr, blza!
Segue o link
http://hasinhayder.github.io/ImageCaptionHoverAnimation/index.html
http://jquerydemo.com/demo/bouncing-captions.aspx
Espero ter ajudado.
vlw