Sabiendo que en una capa con ancho o alto igual a cero los bordes sí que se muestran del ancho con que se definan, que estos se solapan formando ángulos que pueden ser a su vez redondeados y como no, con un poco de lógica, se pueden construir estas y otras muchas más formas simples... o más complicadas.
La cosa funciona con un div vacío al cual le hemos asignado una ID. Previamente, a esa ID le hemos asignado una serie de propiedades CSS. Por ejemplo, lo que parece un banderín violeta (que me perdonen la señoras por mi incultura sobre los colores) se construiría con este código.
En la parte CSS de nuestra plantilla incluimos la ID bookmark-ribbon y sus propiedades:
#bookmark-ribbon {
width: 0;
height: 100px;
border-left:50px solid purple;
border-right: 50px solid purple;
border-bottom:35px solid transparent;
}
width: 0;
height: 100px;
border-left:50px solid purple;
border-right: 50px solid purple;
border-bottom:35px solid transparent;
}
Y dónde queramos que aparezca la forma, se colocaría una capa como esta:
<div id="bookmark-ribbon"></div>
Experimentando un poco sobre este tipo de código, podéis comprobar mejor cómo funciona, pero por si acaso, en Land of Web han sido tan amables que han recopilado 36 de estas en una estupenda hoja de ayuda que incluye el código CSS ilustrado con la imagen que podremos formar ► CSS3 Simple Shapes – Cheat Sheet.
CSS3: Como es habitual, sólo disponible en los navegadores más modernos...
¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.
Y muchos más artículos interesantes si nos sigues en...
Hola Oloblogger...hoy abrí mis blogs, y los hallé DESASTROSOS...todo fuera de lugar..¿podrías decirme qué pasa? Tiene que ver con lo de Blogger en draft (o algo así)? ¿Como se recompone este lío?
ResponderEliminarUno de ellos es:http://actosescolareseempa.blogspot.com/
Todos están así, con las columnas laterales fuera de su sitio!!
Gracias.Elsa
Elsa, no sé cómo estaba antes ese que me indicas, pero yo lo veo bien. Quizás no te cargó la hoja de estilo cuando tú lo viste...
ResponderEliminarNo sé qué puede haber ocurrido...todos mis blogs estaban desenfocados. El ancho de las columnas,el del cuerpo de las entradas...todo desacomodado. Fui a otros blogs amigos, y estaban en las mismas condiciones que los míos. El tuyo, no.
ResponderEliminarAhora volví a abrirlos, y están nuevamente como antes.
Disculpa la molestia causada, pero no tenía a quien recurrir más que a un gran maestro.GRACIAS..Elsa
Ohh! que interesante esta lo de las figuras! haber cuando intento usarlo, gracias Oloman!
ResponderEliminarNo hay de qué... a ambos ;)
ResponderEliminar¡Qué alegría, Oloman! Sabes lo mucho que te aprecio por todo lo que tú haces por los "migrantes digitales" (que somos muchos).
ResponderEliminarRespecto a lo que me dices sobre "sólo para lectores invitados" nunca lo programé para que sea así. Algo no anda bien, pero bueno, haré copias de seguridad y a esperar...
Además te agradezco el comentario. Un gran saludo.
Elsa
Hola, soy Javi Magán director de Hablando República (www.hablandorepublica.blogspot.com y te quería plantear una cuestión, estoy interesado en que las entradas de mi blog aparezcan de la siguiente forma: quiero que la imagen aparezca a la izquierda tal como está en esta web (http://www.izquierda-unida.es/) y a la derecha el título y una parte de la noticia para luego al pulsar dicho titulo conduzca a la entrada completa.
ResponderEliminarHe visitado este post: http://oloblogger.blogspot.com/2009/06/post-en-forma-de-sumarios-leer-mas-en.html
Intento conseguir este mismo sistema pero con la imagen en la posición que te he indicado.
Muchas gracias anticipadas.
Saludos
Javi Magán en ese mismo post se explica que la clase post-thumbnail es la que controla la posición de la imagen. Sólo tienes que cambiar esta parte y dejarla así:
ResponderEliminar.post-thumbnail {
float:left;
margin:0px 10px 10px 0px;
}
Eso suena a despedida temporal Balovega, así que te deseo que lo pases muy bien ;)
No queria decir eso se refiere a algo asi: http://btemplates.com/2011/blogger-template-destyle/demo/
ResponderEliminarHola, buenas, gracias por toda la ayuda que me has brindado.
ResponderEliminarquería preguntarte que hacer para tener un menú desplegable, del mismo diseño que tengo ahora, pero que al pasar el cursor por arriba se desplieguen otras opciones, gracias.
disculpa pero no encontré una entrada que me explicara eso D:!
el blog es (www.bocetomanga.blogspot.com)
gracias!
Nirvana, voy a suponer que tu comentario es continuación del de Javi Magán. Eso que queréis se consigue con el sistema que se explica en la entrada que en el comentario #7 citabais. Luego, para que quede como esos ejemplos que me remitís (a la izquierda), hay que cambiar lo que dije en el comentario #9. No hace falta hacer nada especial más. Probad.
ResponderEliminarNac-Ho, supongo que quieres algo así como sub-opciones dentro de alguna de las pestañas. No sabría modificar el que tienes, pero puedes buscar aquí alguno con múltiples ramas y luego cambiarle el aspecto (CSS) para dejarlo como el actual --> http://goo.gl/57v2e
Ya he conseguido lo que queria, muchas gracias Oloman, pero tengo otra pregunta ahora acerca de un slideshow:
ResponderEliminarhttp://workshop.rs/projects/coin-slider/
Me gustaria saber como instalarlo en mi blog, gracias por adelantado.
Tendría que montar un post para explicarlo Nirvana, pero realmente sólo hay que traducir del inglés esta página. No lo haré pronto... ;)
ResponderEliminar