Triángulos en negativo o mordisquitos en los bordes puro Css 30.12.15
Mordisquitos triangulares a los laterales de elementos para dejar ver lo que hay debajo de ellos. O cómo realizar cortes triangulares a los bordes.
Triángulos en negativo o mordisquitos en los bordes puro Css
A estas alturas hacer figuras geométricas con css no reviste mayor dificultad. Son muchas las demos al respecto. Aquí ya dejé constancia en más de un artículo. Desde espirales logarítmicas, pasando por huevos y limones hasta hexágonos y otras formas.
Y sin faltar los triángulos tan utilizados últimamente. De éstos vimos 6 técnicas para hacer triángulos
Pero un detalle común a estas realizaciones es que las formas tienen su propio color o fondo. Pero si lo que queremos hacer es restar el triángulo a un elemento, como en la imagen de al lado, para que deje ver lo que hay debajo ¿sería posible?
La respuesta, como es lógico ya que aquí estás leyendo el artículo, es que sí. Y de una forma de lo más simple.
Antes de entrar en detalles, primero la demo en vivo:
See the Pen Mordisquitos a los bordes by Kseso (@Kseso) on CodePen
Los vaciados
Como todos los códigos están accesibles en el pen, pestaña css, una somera explicación de la idea. Pero antes, fíjate que he optado por repetir los estilos comunes en los dos ejemplos en vez de optimizarlos.
La idea es sencilla. El vaciado triangular se crea al colocar dos elementos adyacentes, en este caso pseudoelementos. En la primera imagen con los bordes superiores sólidos y los laterales adyacentes transparentes.
En en segundo ejemplo, es el borde lateral el sólido y el inferior del :before y superior de :after los transparentes.
Complementado con 'outline' para que el triángulo vacío no llegue hasta el límite exterior sino que haya ese pequeño falso borde se prolongue un poco más allá del vértice del triángulo. Sólo por una cuestión de estética.
En esta demo empleo algún elemento más en el html porque utilizo el pseudoelemento :before del 'section' para que éste elemento tenga una relación de aspecto 16:9. Prueba a redimensionar la ventana en la demo a pantalla completa.
Sencillo, fácil de lograr y vistoso, ¿no?. Si necesitas alguna explicación complementaria haz uso de los comentarios.
Y si decides jugar con esta idea y creas algún ejemplo, deja el enlace en un comentario y lo incluyo en el artículo.
See the Pen Mordisquitos Css 2 by Kseso (@Kseso) on CodePen
Variaciones de lectores
Furoya
See the Pen hAkji by solipsistaCP (@solipsistacp) on CodePen
Kseso
the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso
muy ingenioso Kseso me encanta, no se me había pasado por la cabeza el como hacerlo, gracias :)
ResponderEliminarCoincido con Alex Aguiar.
ResponderEliminarCuando lo vi inmediatamente me quedé pensando en esos portarretratos tipo "sobre", que están abiertos arriba para insertar la fotografía y tienen una muesca para después retirarla. Claro que ese corte en el marco va "del lado de afuera"; y estos mordiscos están hacia adentro.
Se me ocurrió una forma de simular un triangulito (medio curvado) imaginando que al ponerlo adelante (en los verdaderos va por dertrás, porque la idea es que no se vean) podría servir como botón de slider manual y que con un clic muestre más imágenes.
Claro que esto último va a requerir de muchas capas y seguramente algo de javascript, porque no estoy seguro de que se pueda solamente con CSS.
De momento, aprovecho a colaborar con la primera parte.
<!DOCTYPE html>
<html lang="es-ar">
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
</script>
<style type="text/css">
figure {
background-image: url(http://imageshack.com/a/img163/6792/agustinfernandez.jpg);
background-size: cover;
width: 640px;
height: 480px;
margin: auto;
position: relative;
}
figure::before {
content: '';
display: block;
width: 50%;
height: 100%;
border: 40px inset maroon;
border-right: 0 solid transparent;
border-radius: 0 80px 0 0 / 0 40px 0 0;
-moz-box-sizing: border-box;
box-sizing: border-box;
left: 0;
top: 0;
position: absolute;
}
figure::after {
content: '';
display: block;
width: 50%;
height: 100%;
border: 40px inset maroon;
border-left: 0 solid transparent;
border-radius: 80px 0 0 0 / 40px 0 0 0;
-moz-box-sizing: border-box;
box-sizing: border-box;
left: 50%;
top: 0;
position: absolute;
}
figure:hover {
background-image: url(http://imageshack.com/a/img703/1940/podrida.jpg);
}
</style>
</head>
<body>
<figure></figure>
</body>
</html>
El 'hover' está nada más para que se note bien que el recorte muestra la imagen que aparece por detrás.
Al final no fue tan difícil hacerlo en CSS, aunque esto no es más que un "borrador operativo".
EliminarNo lo pude probar en todos los navegadores, pero sé que Opera tiene un problema con la transparencia al clic donde no hay borde pintado : para él es "opaco", y no permite el efecto de cambiar las fotos desde la muesca (el triangulito mordido).
Habrá que inventar algún hack hasta que lo corrijan (como separar las mitades de marco y rellenar el hueco del borde inferior con un pseudo elemento o con sombras).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title>SLIDER DE FOTOS CSS.</title>
<style type="text/css">
body {
background-color: bisque;
}
#portaRetrato {
position: relative;
width: 640px; height: 480px;
margin: auto;
background-color: silver;
}
#marcoI {
position: absolute;
left: 0; top: 0;
width: 50%; height: 100%;
-moz-box-sizing: border-box;
box-sizing: border-box;
border: 30px inset maroon;
border-right: 0 inset transparent;
border-radius: 0 50px 0 0 / 0 30px 0 0;
}
#marcoD {
position: absolute;
left: 50%; top: 0;
width: 50%; height: 100%;
-moz-box-sizing:border-box;
box-sizing:border-box;
border: 30px inset maroon;
border-left: 0 inset transparent;
border-radius: 50px 0 0 0 / 30px 0 0 0;
}
#foto0, #foto1, #foto2, #foto3, #foto4, #foto5, #foto6, #foto7, #foto8 {
display: block;
position: absolute;
top: -700px; left: 0; right: 0;
margin: auto;
width: auto; height: 480px;
cursor: pointer;
}
#foto0 {
top: 0;
}
#foto0:target, #foto1:target, #foto2:target, #foto3:target, #foto4:target,
#foto5:target, #foto6:target, #foto7:target, #foto8:target {
transition: top 3s ease;
top: 0;
}
#foto1:not(:target), #foto2:not(:target), #foto3:not(:target),
#foto4:not(:target), #foto5:not(:target), #foto6:not(:target),
#foto7:not(:target), #foto8:not(:target) {
transition: top 2.5s ease;
top: -700px;
}
</style>
</head>
<body>
<h2>Click en la muesca del portarretratos para cambiar la foto.</h2>
<div id=portaRetrato>
<a href=#foto1><img src="http://imageshack.com/a/img685/2254/brillos.gif" id=foto0></a>
<a href=#foto2><img src="http://imageshack.com/a/img855/3555/89an.jpg" id=foto1></a>
<a href=#foto3><img src="http://imageshack.com/a/img856/5730/norbertogomez.jpg" id=foto2></a>
<a href=#foto4><img src="http://imageshack.com/a/img109/3200/barbarakaplan.jpg" id=foto3></a>
<a href=#foto5><img src="http://imageshack.com/a/img687/2534/marialuzras.jpg" id=foto4></a>
<a href=#foto6><img src="http://imageshack.com/a/img195/148/guadalupegomezpintus.jpg" id=foto5></a>
<a href=#foto7><img src="http://imageshack.com/a/img825/6176/alejandronoguera.jpg" id=foto6></a>
<a href=#foto8><img src="http://imageshack.com/a/img208/5394/rafaelgil.jpg" id=foto7></a>
<a href=#foto0><img src="http://imageshack.com/a/img521/8642/omarpanosetti2.jpg" id=foto8></a>
<div id=marcoI></div><div id=marcoD></div>
</div>
</body>
</html>
Para no complicar el código (¡y con las limitaciones que te pone Blogspot! ¿por qué no admite un 'textarea' y se deja de embromar?) dejo aquí afuera la lista de imágenes, por si alguien las quiere probar en local.
EliminarBrillos.
Marino Santa María.
Norberto Gómez.
Bárbara Kaplan.
María Da Luz Ras.
Guadalupe Gómez Pintus.
Alejandro Noguera.
Rafael Gil.
Omar Panosetti.
Interesante Furoya. Me recordó ciertas realizaciones de Cssplay.
EliminarPara que se pueda ver tu ejemplo me tomé la libertar de colocarlo en jsFiddle:
Ver demo de Furoya
Y sobre el otro tema, las limitaciones de blogger en los comentarios voy a ver si encuentro algo para poder ampliar lo poco que permite.
Un saludo
Te agradezco el comentario; aunque un poco exagerada la remembranza al sitio de Stu Nicholls, a menos que sea como alusión al "robo". Que no me extrañaría, pero te aseguro que no fue intencional; seguro vi algo parecido y me quedó en el subconsciente.
EliminarPara que no tengas que tomarte el trabajo (de nuevo) de publicar un ejemplo en vivo, al fin lo subí yo.
Pero esta vez de la versión para Opera, que también funciona en Internet Explorer (10), Chrome, Firefox y me faltó probarlo en Safari. Tiene algún agregado (como que ahora es "sinfin", y la nueva foto siempre pasa delante de la anterior); pero lo hice de vicio: esto era nada más para probar si se podía hacer con CSS y no tiene mucho que ver con el artículo original.
http://codepen.io/solipsistacp/full/hAkji
Otro saludo, y gracias de nuevo.
Me alegra que os haya gustado la idea a los dos.
ResponderEliminarFuroya creo que esto te gustará.
Un saludo
Las animaciones 3D en CSS son muy impresionantes. En los últimos navegadores parece que sus escripts superan en eficiencia a los que podamos hacer con JS. Bueno, están integrados, por lo menos deberían ser "iguales" ...
EliminarLa compatibilidad no es "igual" todavía, y la interpretación de los movimientos tampoco, hay diferencias de velocidad, de posición y algo más, dependiendo de cuál usemos.
Estoy esperando que decanten un poco mejor para empezar a estudiarlas con más ganas. Si mal no recuerdo, ya escribiste un artículo (creo que era sobre 2D) en el que te quejabas sobre las incompatibilidades y el uso de prefijos.