JMiur [E]

En DailyCoding hay un artículo que muestra una curiosidad del CSS. Sacando provecho de ella, lo que han creado es una manera simple de crear recuadros muy llamativos.

Las propiedad border es algo que usamos habitualmente, generalmente son bordes "finos" pero nada impide usar bordes más grandes:

<div style="border: 10px solid #0080C0; height: 100px; width:200px;"></div>

Tampoco nada impide que en lugar de colocar los cuatro bordes, sólo usemos uno o varios de ellos de manera indistinta:

<div style="border-bottom: 10px solid #0080C0; border-left: 10px solid #0080C0; height: 100px; width:200px;"></div>

Por supuesto, a nadie se la va a ocurrir colocar como color del borde un color transparente, o sea, igual al color del fondo ya que, a simple vista, suena absurdo colocar un borde y luego ocultarlo. Sin embargo, si lo hacemos, ocurrirá esto:

<div style="border-bottom: 10px solid #0080C0; border-left: 10px solid transparent; height: 100px; width:200px;"></div>

No, no es magia, lo que ocurre es que cuando le damos dos colores distintos a dos bordes adyacente, se produce un "conflicto" y la unión se marca sesgada. Si ambos son del mismo ancho, el ángulo formado es de exactamente de 45º.

<div style="border-bottom: 10px solid #0080C0;border-top: 10px solid #FF0000; border-left: 10px solid #008000; border-right: 10px solid #FF8040; height: 100px; width:200px;"></div>

Así que, aprovechando esta particularidad y usando bordes de color transparente, parece sencillo dibujar triángulos sólo con CSS:

border-bottom
border-left
border-bottom
border-right
border-top
border-left
border-top
border-right
border-bottom + border-left + border-rightborder-top + border-left + border-right

De allí en adelante, la creación de formas no rectangulares para mostrar ciertos contenidos parece depender de la imaginación y estos son dos de los modelos sugeridos por DailyCoding:

HACIA ARRIBA
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam dignissim tincidunt turpis. Mauris pede. Vestibulum gravida magna id nibh. In nec urna. Sed ut purus. Duis sit amet lacus ornare massa mattis consequat. Donec nec tellus. Nam quis nulla viverra diam faucibus dictum. Nulla facilisi. Donec sit amet dolor at sapien accumsan consectetuer.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam dignissim tincidunt turpis. Mauris pede. Vestibulum gravida magna id nibh. In nec urna. Sed ut purus. Duis sit amet lacus ornare massa mattis consequat. Donec nec tellus. Nam quis nulla viverra diam faucibus dictum. Nulla facilisi. Donec sit amet dolor at sapien accumsan consectetuer.
HACIA ABAJO

Este es el código CSS de ambos ejemplos:

<style type="text/css">
.calloutUp { /* es el borde del triangulito hacia arriba */
border-bottom: 12px solid #FFFFFF;
border-left: 12px dotted transparent;
border-right: 12px dotted transparent;
left: 0px; top: 0px;
height: 0; width: 0; /* no tendrá dimensiones */
margin-left: 20px; /* lo separamos del borde izquierdo */
z-index: 10;
}
.calloutUp2 { /* un triangulito más chico adentro del anterior */
border-bottom: 10px solid #9999FF;
border-left: 10px dotted transparent;
border-right: 10px dotted transparent;
position: relative;
left: -10px; top: 2px; /* lo posicionamos desplazado */
height: 0; width: 0; /* no tendrá dimensiones */
z-index: 11;
}

.calloutDown { /* es el borde del triangulito hacia abajo */
border-top: 12px solid #FFFFFF;
border-left: 12px dotted transparent;
border-right: 12px dotted transparent;
left: 0px; top: 0px; /* lo posicionamos */
height: 0; width: 0; /* no tendrá dimensiones */
margin-left: 20px; /* lo separamos del borde izquierdo */
z-index: 11;
}.calloutDown2 { /* un triangulito más chico adentro del anterior */
border-top: 10px solid #9999FF;
border-left: 10px dotted transparent;
border-right: 10px dotted transparent;
height: 0; width: 0; /* no tendrá dimensiones */
position: relative;
left: -10px; top: -12px; /* lo posicionamos despalazado */
z-index: 10;
}

.divContainerUp { /* el contenido del recuadro hacia arriba */
background-color: #9999FF;
border: solid 1px #FFFFFF;
color: #000000;
padding: 10px;
position: relative;
text-align; justify;
top: -1px;
width: 500px;
z-index: 9;
}
.divContainerDown { /* el contenido del recuadro hacia abajo */
background-color: #9999FF;
border: solid 1px #FFFFFF;
color: #000000;
padding: 10px;
position: relative;
text-align; justify;
top: 1px;
z-index: 3;
width: 500px;
}
</style>

Y este es el código HTML que debemos emplear para utilizarlos:

<div class="calloutUp"><div class="calloutUp2"></div></div>
<div class="divContainerUp"> ... el contenido del ejemplo superior ... </div>

<div class="divContainerDown"> ... el contenido del ejemplo inferior ... </div>
<div class="calloutDown"><div class="calloutDown2"></div></div>

REFERENCIAS:
  • Cosas Sencillas
  • 20 comentarios:

    Anónimo  

    JMIUR qué bonito...he descubierto hace poco tiempo lo de los bordes, has realizado una recopilacióm preciosa, cariños!!!

    Responder
    Fender Stratokaster  

    Disculpa la ignorancia, JMuir. (tal vez esto no tenga nada que ver con el tema) Pero este asunto de los bordes en las imágenes lo traigo como duda desde hace tiempo en la cabeza:

    Cuando publico una imagen en el blog, ésta aparece con un margen, (creo que esto depende del tipo de plantilla) cómo puedo quitarselo de manera que por ejemplo, si deseo colocar una imagen seguida en la linea de texto como lo haces , esta imagen y su margen no distorsione la linea de texto como me sucede una vez publicado en el blog. ¿Se debe al tipo de plantilla? Esto no sucede en la vista previa.

    Saludos.

    Responder
    Saldamando  

    Espléndido blog que visitamos desde hace tiempo. Enhorabuena por él y gracias por tanto que aprendemos.

    Saludos y a seguir en la misma e inmejorable línea.

    Responder
    Gem@  

    Que bonito resulta hacer las cosas con CSS yo sigo buscando crear sombra en los bordes, vi que es posible con CSS pero un poco confuso ya que era necesario crear capas y al ser creado con CSS se añadía a todas las imágenes y obliga a teber que mostrar las imágenes de la misma medida.

    Responder
    Stranno  

    Y hasta en el RSS sale con el borde (en iGoogle), buen detalle xD

    Responder
    Mariano Planells  

    Hola JMiur:
    He cambiado a WordPress: te agradecería mucho que me cambiaras la url.
    Mil gracias.

    http://marianodigital.es

    Responder
    Admin  

    Hola JMiur, muy buen post!
    No tiene nada que ver con esto pero quería informarte que ayer quise poner el widget-logo de Vagabundia (el que se pone con un click) en mi blog y no lo aceptaba, probé mil veces, supuse que sería problema de mi servidor, hasta que se me ocurrió volver aquí y ver las propiedades de la imagen: url de la misma, y no coincide con la que tenés en el código del widget.
    Así que copié la url y ahora si, ya estás en FolkTango :D

    Te lo quería decir por si a alguien le pasa lo mismo, el widget no sale porque la url no es la misma que la de la imagen, tal vez la cambiaste y te olvidaste de actualizarlo :D

    Saluditos ;)

    Responder
    Anahí  

    Hola, JMiur, para variar el "no puedo con mi genio", tengo una consulta para hacerle (y ojo con lo que me contesta, mire que lo puedo contagiar de "spamoccia", soy una de las nuevas en cuarentena de Blogger)
    Va la question: si quisiera aplicar esto en lso comments, por ej., un color en los de autor, otro color en los del lector, ¿se puede, cómo lo haría?
    (tengo media idea de cómo hacerlo en los comments de autor, pero ni pizca en los del visitante)
    Gracias maístro, saludos.

    Responder
    JMiur  

    Fender: eso tiene que ver las definiciones de tu plantilla, las imágenes de los posts tienen un pagging de 6 pixeles:
    .post img {..........
    padding:6px;
    }
    eso hace que se vea el recuadro alrededor de ellas pero, cuando no hay recuadro, el padding continua. Podrías pobar varias cosas, una es crear una clase para imagenes recuadradas. Otra es crear una clase para imágenes NO recuadradas. También puedes colocarlo a mano: style="padding: 0 !important;"

    Gem@: las sombras son complicadas, es que no están implementadas en los navegadores excepto Safari así que hay que recurrir a trucos más o menso engorrosos.

    Mariano: ya está hecho. Suerte en la nueva experiencia :)

    k_nelita: lo voy a revisar, aparentemente ImageShack hizo alguna limpieza de archivos :D

    Anahí: se me ocurre que este post puede ayudarte para empezar.

    Responder
    Admin  

    JMiur la limpieza dudo que la haya hecho ImageShack porque la imagen la tienes alojada en Blogger es esta: http://bp0.blogger.com/_hljKDuw-cxQ/RtJazr_Wd6I/AAAAAAAACQg/2QT46_gyFQw/s00/vagaWidget.gif

    Me parece que tu "disco" es el que está fallando ja ja :D

    O el código para agregar el Widget...

    Responder
    Fender Stratokaster  

    ¡Hecho!

    Muchas gracias, JMiur.

    Responder
    JMiur  

    k_nelita: lo decía porque el widget usa una imagen que está en ImageShack: ESTA :D

    Fender: mucho mejor, sin duda.

    Responder
    Anónimo  

    Lo siento, te he tenido que dedicar un post, es que me parecía curiosísimo. Pero he citado las funtes :D
    Una pregunta: ¿tú qué servicio me recomendarías: ImageShack o Flickr?

    Responder
    JuliansMG  

    me sirvio mucho el comentario en el que enseñas a sacar el margen a las imagenes (padding), un saludo, gracias

    Responder
    Anahí  

    JMiur, leí el post que me sugiere, pero sigo perdiéndome con cuáles son las indicaciones para el autor del blog y cuáles para los del visitante, porque por lo que veo todas se llaman "author", y ahí es donde patino, ¿alguna otra sugerencia que me pueda dar de cómo localizar la parte a modificar del visitante? Así, dígame a lo bruto nomás, pa´ que lo entienda.
    Gracias y saludos.

    Responder
    JMiur  

    Anahí:

    No hay una dato para autores y otro para visitantes, es el mismo, lo que debe hacerse es compararlo y es lo que muestra el post:

    <b:if cond='data:comment.author == &quot;Jmiur&quot;'>
    ....... soy yo y muestro una cosa .......
    <b:else/>
    ....... es un visitante y muestro otra cosa .......
    </b:if>

    Responder
    Anahí  

    Ahhh, sí, ya vi la luz, gracias JMiur!

    Responder
    santo santo soy  

    Mil gracias, me viene excelente, era justo lo que estaba buscando.
    Saludos!:)

    Responder
    Elkin C  

    Muchas gracias... aunque te falto colocar el codigo mas explicito, pq me toco buscar viendo el codigo fuente de la pagina.,

    MUCHAS GRACIAS!!!

    Responder
    JMiur  

    No, no faltó. Los códigos están e el post.

    Responder

    ¿Quiere dejar un comentario?

    recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

    Nota: sólo los miembros de este blog pueden publicar comentarios.

    Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

    Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

     
    CERRAR