mi diseñador me ha echado un vistazo que me encantaría poder replicar, pero no estoy muy seguro de cómo hacerlo.CSS/JS para el recorte circular de una imagen
estoy abierto a hacer la primera parte en el backend , pero preferiría tener una solución CSS/JS.
Para la parte de la burbuja del discurso que sugieren este tutorial. http://nicolasgallagher.com/pure-css-speech-bubbles/ Lo uso a menudo para obtener ideas y aprender a hacerlo yo mismo. Te doy un tutorial porque quiero que aprendas cómo hacerlo. Si me dieras el código que necesitaba ayuda, te daría una respuesta sobre cómo solucionarlo. ¿Ya tienes algún código para esto?
También para el recorte, creo que una forma rápida de hacerlo es hacer un envoltorio cuadrado div alrededor de su imagen y luego darle un radio de borde (css) que sea la mitad de la longitud de uno de los lados. Establezca el desbordamiento en oculto y está configurado.
¡Salud!
Para la imagen circular puede usar el radio de borde de CSS: simplemente haga que sea lo suficientemente grande para que las esquinas redondeadas se toquen.
.profile-img {
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
La respuesta de Luke es buena para la burbuja de diálogo: he creado burbujas basadas en ella. También he adaptado esta técnica de triángulo utilizando: antes y después de los pseudo elementos de CSS para crear algunos efectos interesantes en mi sitio web personal. Puede tener uno más grande que el otro y colocado de manera que parezca un borde si es necesario.
thanks @ tomas-mulder - terminé usando su solución también. =) –
gracias un millón! tengo un código que deseché, sentí que tenía que haber una forma más elegante de hacerlo. su enlace al tut se ve muy bien. cultivo: ¡qué idea tan inteligente! lo intentaré ahora ¡GRACIAS! –
No hay problema, solo recuerde que en Safari y Chrome puede que tenga que usar -webkit-border-radius también para que funcione en esos navegadores. – Luke
que era una solución súper inteligente =) http://i.imgur.com/SmMUm.png –