Efeito de balão de comentario no css

Front-end

21/06/2014

Oi galera estou desenvolvendo um miniblog e estou com um pouco de dúvida na hora de desenvolver o Designer dos comentarios :P

tipo assim:
http://www.tutoriart.com.br/21-otimas-ferramentas-online-para-designers/
achei muuuuuito foda o designer dos comentarios, tipo aquele balao de fala.........
[img]http://arquivo.devmedia.com.br/forum/imagem/366949-20140621-000733.png[/img]
quero fazer igualzinho, principalmente aquela setinha que aponta pra quem comentou... na verdade é justo isso que eu nao sei.... me ajudem PFV
Dudu Barbosa

Dudu Barbosa

Curtidas 0

Melhor post

Raphael Souza

Raphael Souza

24/06/2014

Oi galera estou desenvolvendo um miniblog e estou com um pouco de dúvida na hora de desenvolver o Designer dos comentarios :P

tipo assim:
http://www.tutoriart.com.br/21-otimas-ferramentas-online-para-designers/
achei muuuuuito foda o designer dos comentarios, tipo aquele balao de fala.........
[img]http://arquivo.devmedia.com.br/forum/imagem/366949-20140621-000733.png[/img]
quero fazer igualzinho, principalmente aquela setinha que aponta pra quem comentou... na verdade é justo isso que eu nao sei.... me ajudem PFV


Boa tarde, amigo. Segue abaixo o esqueleto do balão. Personalize da forma que achar melhor. Não coloquei conteúdo interno.
Para imagem de usuário eu coloquei um avatar do google local. Vai aparecer aí pra vc em branco. Substitua a parte do CSS que contém o background: url('user.png'); por uma imagem local na sua máquina.

HTML

       <section class='box-comentario'>
		<aside class='foto-contato'>
			<div></div>
		</aside>
		<article class='comentario'>
			<header class='titulo-comentario'>
			</header>
		</article>
	</section>


CSS

               .box-comentario {
			width: 500px;
			height: 200px;
		}

		.foto-contato {
			width: 100px;
			height: 80px;
			float: left;
			display: block;
		}

		.comentario {
			width: 398px;
			height: 200px;
			background: #e3e3e3;
			float: left;
		}

		.comentario:before {
			content: '';
			display: inline-block;
			position: absolute;
			border-color: transparent transparent #969696 transparent;
			border-width: 8px;
			border-style: solid;
			margin-left: -8px;
			margin-top: 25px;
			transform:rotate(45deg);
			-ms-transform:rotate(45deg); /* IE 9 */
			-webkit-transform:rotate(45deg); /* Opera, Chrome, and Safari */
		}

		.foto-contato > div {
			width: 80px;
			height: 100%;
			background: url('user.png') no-repeat;
			background-size: 80px;
			border-radius: 50%;
		}

		.titulo-comentario {
			width: 100%;
			height: 60px;
			background: #969696;
		}


Fiz rapidinho aqui por falta de tempo.
Qualquer problema posta aqui que vejo pra vc.
Abraço.
GOSTEI 3

Mais Respostas

Raphael Souza

Raphael Souza

21/06/2014

O resultado é esse: [img:descricao=balão de comentário]http://arquivo.devmedia.com.br/forum/imagem/358006-20140624-173711.png[/img]
GOSTEI 2
POSTAR