Chuleta para crear formas simples con CSS3 | Oloblogger Las siguientes formas no son imágenes, sino CSS que incluye algunas de las últimas propiedades del estándar. Puedes probar a descargarlas, p...

13 de julio de 2011

Chuleta para crear formas simples con CSS3

Las siguientes formas no son imágenes, sino CSS que incluye algunas de las últimas propiedades del estándar. Puedes probar a descargarlas, pero sólo para comprobar que efectivamente sólo tenemos ante nosotros fondos, bordes y unas pocas curvas.



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;
}

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.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

14 comentarios :

  1. 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?

    Uno de ellos es:http://actosescolareseempa.blogspot.com/
    Todos están así, con las columnas laterales fuera de su sitio!!

    Gracias.Elsa

    ResponderEliminar
  2. 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...

    ResponderEliminar
  3. No 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.
    Ahora 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

    ResponderEliminar
  4. Ohh! que interesante esta lo de las figuras! haber cuando intento usarlo, gracias Oloman!

    ResponderEliminar
  5. No hay de qué... a ambos ;)

    ResponderEliminar
  6. ¡Qué alegría, Oloman! Sabes lo mucho que te aprecio por todo lo que tú haces por los "migrantes digitales" (que somos muchos).
    Respecto 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

    ResponderEliminar
  7. 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.
    He 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

    ResponderEliminar
  8. Hola y buenas noches..

    La llegada de las vacaciones es una oportunidad para vivir de modo diferente al resto del año.

    Es necesario que disfrutemos, descansemos y compartamos con la familia este período vacacional y hacerlo como la ocasión para practicar el ocio en familia.

    Besotes y buen verano

    ResponderEliminar
  9. 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í:
    .post-thumbnail {
    float:left;
    margin:0px 10px 10px 0px;
    }

    Eso suena a despedida temporal Balovega, así que te deseo que lo pases muy bien ;)

    ResponderEliminar
  10. No queria decir eso se refiere a algo asi: http://btemplates.com/2011/blogger-template-destyle/demo/

    ResponderEliminar
  11. Hola, buenas, gracias por toda la ayuda que me has brindado.

    querí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!

    ResponderEliminar
  12. 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.

    Nac-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

    ResponderEliminar
  13. Ya he conseguido lo que queria, muchas gracias Oloman, pero tengo otra pregunta ahora acerca de un slideshow:
    http://workshop.rs/projects/coin-slider/
    Me gustaria saber como instalarlo en mi blog, gracias por adelantado.

    ResponderEliminar
  14. 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