Efecto banda plegada doble. Método fácil para gadgets | Oloblogger Hace unos días vimos como simular en los títulos de los posts un efecto que los convertía en una banda solapada con un extremo plegado hacia...

25 de julio de 2012

Efecto banda plegada doble. Método fácil para gadgets

Hace unos días vimos como simular en los títulos de los posts un efecto que los convertía en una banda solapada con un extremo plegado hacia atrás.

Alguien preguntó cómo hacer esto para los títulos de los gadgets y ya que estos suelen tener un ancho menor que el de la columna de entradas, se me ocurrió que podríamos añadir el otro extremo haciendo una pequeña variación y que así se vieran ambos.

El resultado está en la captura de la derecha que corresponde a esta demo.

A diferencia del anteriormente visto, ahora usaremos otro método para no tener que tocar la parte HTML y que consistirá en usar :after y :before para insertar los triángulos terminales.

La clase que controla los gadgets de la barra lateral en las plantillas estándar es .sidebar .widget y los rótulos de los títulos además aparecen con encabezamiento h2, así que esta será la clase que usaremos: .sidebar .widget h2

Si tenéis una plantilla que use otro nombre para la clase de los gadgets, tendréis que obtenerla echando un vistazo a vuestro HTML.

Como veréis, el código sólo crea un fondo para el rótulo, lo hace de un ancho mayor que la columna del gadget (106%) y lo desplaza a la izquierda con un margin-left negativo.

Con before y after completamos el asunto añadiendo respectivamente a cada extremo un triángulo y posicionándolo con absolute.

.sidebar .widget h2 {
display:block;
position: relative;
width: 106%;
height: 2em;
margin: 5px 0 0 -28px;
padding:2px 4px 4px 40px;
text-transform: none;
line-height:1.10em;
background: #666;
border: 1px solid #444;
border-radius:8px 8px 0 0;
}

.sidebar .widget h2::before {
display: block;
position: absolute;
left: -12px;
bottom: -12px;
z-index: -1;
content: "";
height: 0px;
width: 0px;
border-color: transparent #444 transparent transparent;
border-style: solid;
border-width: 12px;
}

.sidebar .widget h2::after {
display: block;
position: absolute;
right: -12px;
bottom: -12px;
z-index: -1;
content: "";
height: 0px;
width: 0px;
border-color: transparent transparent transparent #444 ;
border-style: solid;
border-width: 12px;
}

Nota: La caja contenedora, en este caso .sidebar, no debe tener un overflow: hidden o el efecto quedará oculto al desbordar la misma. En su caso quitar esa propiedad CSS si no es imprescindible.

Y si quieres el mismo efecto pero sencillo, con un solo triángulo, en esta otra entrada tienes otro método.

¿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

41 comentarios :

  1. Hola Olo!, sigo tu blog desde hace tiempo y me ha servido en muchas ocasiones o me ha dado idea de como hacer modificaciones en mi blog.Introduje en mi blog la banda para las entradas y quedo muy bien, ahora bien, me gustaria tambien estas bandas en las sidebar, pero mi plantilla en si no tiene lo de .sidebar .widget (es de las antiguas) y aunque pareces dejar caer en el post que se puede hacer, no me queda claro como hacerlo, ojala pudieras explicarlo o si lo has hecho, de una forma mas clara, porque no lo he entendido muy bien, gracias.

    ResponderEliminar
    Respuestas
    1. En tu caso es lo mismo. Es posible que no tengas .sidebar .widget, pero entonces, simplemente añádelo. Lo que tienes que hacer exactamente es sólo copiar el código que viste aquí y pegarlo en tu plantilla, justo antes del cierre del SKIN. Con Vista Previa ya comprobarás el resultado.

      Eliminar
    2. Gracias por responder, e intentar ayudar, pero pegandolo antes de skin, tal cual, no causa errores, pero tampoco se produce ningun cambio, incluso he cambiado los colores a ver si era eso, pero como si nada.No se aprecia tampoco algun error tipico cuando lo que insertas no funciona correctamente e incluso lo habia guardado para ver si lo que ocurria es que no se veia en la vista previa... La pena es que le iria perfecto a mi blog porque la sidebar es muy sosa, y teniendo las entradas ya con solapa, pues ver los gadgets asi, le daria un efecto visual muy chulo y algo asi era perfecto para lo que busco

      Eliminar
    3. Ya que no altera tu blog ¿te importaría volverlo a poner en la plantilla y avisarme para que lo vea?

      Eliminar
    4. Ok, ya he añadido el codigo de nuevo e igual nada de nada. Mi blog www.raudeenlared.blogspot.com "NO HAY VUELTA ATRAS". Muchas gracias por las molestias!

      Eliminar
    5. Pues efectivamente, está y no funciona. El caso es que lo he insertado a mano desde el inspector de páginas y sí ha funcionado. Eso es cosa de esas malditas plantillas del nuevo diseñador :S

      No sé, quizás funcione si lo insertas desde el susodicho Diseñador en el apartado de agregar CSS... y si lo hiciste desde ahí, pues entonces prueba directamente a añadirlo en la plantilla a mano.

      Eliminar
    6. Prueba también a cambiar .sidebar .widget h2 por #sidebar-right-1 .widget h2

      Eliminar
    7. De ninguna de las dos maneras, de la primera forma no lo habia hecho de ese modo pero al haberlo agregado en "Editar plantilla", ahi estaba ya insertado en el Diseñador y en "Agregar Css" como los demás que he ido añadiendo con el paso del tiempo. Bueno es saber este camino tambien, porque siempre lo he hecho de la misma forma y desconocia que se podia hacer tambien asi... y despues he probado cambiando .sidebar .widget h2 por #sidebar-right-1 .widget h2 y mas de lo mismo, no influye para nada en el resultado final.
      Ya se que es una tonteria, no entiendo de creacion de codigos, solo de copiarlos y pegarlos y ver el resultado, pero he visto dos cosas que me han llamado la atención y lo he probado y tampoco: 1) tras after y before hay "::" en vez de uno, asi que probe cambiandolos solo a uno y tampoco paso nada y 2)Que haya que poner en el content el nombre de las etiquetas que vayas a encuadrar, pues me parece raro que solo se pongan "" y nada dentro de ellas, y tampoco solucione nada... Pasando de la tonteria esa, era meramente de pruebas a ver si faltaba algo, ¿puede que los tiros vayan por ahi? ¿que le falte algo al codigo y por eso no se produzcan los cambios? ¿o es solo que mi plantilla al ser tan antigua y carecer de .sidebar .widget h2, con solo insertarlos no tenga el mismo efecto?... No lo se, de todas formas muchas gracias por tu tiempo y por la ayuda, siento haber causado tantas molestias.

      Eliminar
    8. Las cosas raras que observaste no lo son tanto. No sé exactamente en qué casos no funcionará pero todas las pseudoclases que he probado, han hecho su tarea correctamente tanto con un par de puntos (:) como con dos pares (::). Y lo del content con un contenido vacío normalmente no es necesario pero se suele poner para evitar errores. Esas dos cosas son correctas.

      Por lo demás casi que me rindo. Te aseguro que todas las propuestas que te hice a mí me funcionaron al aplicarlas sobre tu blog desde el sistema de inspección de Chrome. No tengo ni idea de qué puede estar fallando cuando lo haces tú, pero reitero mi maldición para con las plantillas del nuevo diseñador :S

      Eliminar
    9. Entonces sera que yo uso Mozilla, es una tonteria, pero si es cierto que dependiendo que navegadores uses ciertos efectos se dan en el blog y otros no... Me ocurre, muchas gracias por todo, te has portado genial y me has ayudado en todo lo que has podido. No entiendo que he hecho mal o porque no me funciona y a ti si, porque no soy un experto en blogs pero tampoco un principiante y me he quedado con la rabia de que no funcionase y que pueda ser error mio. Muchas gracias, eres un crack!

      Eliminar
    10. Este en concreto está hecho desde Firefox y comprobado allí. No es ese el problema. Sólo tienes que ver la demo desde tu navegador y verás que sí se ve el efecto.

      Lo de usar Chrome es porque lleva una utilidad que me permite modificar tu código online para ver cómo quedarían las modificaciones. Lo suelo probar así antes de contestaros y en este caso, como te decía, me funcionó con todas las propuestas que hice.

      Eliminar
    11. Ya creo que he entendido lo que pasa, tengo otros dos blogs y alli va, pero en el principal no... ¿por que? Pues pienso es que la sidebar de este no tiene un fondo especifico, y esta incrustado al fondo del blog, y por eso no se superponen las pestañas, asi que tendre que colocarle a la sidebar un fondo unico para ella y creo que entonces si ira... ¿hay alguna forma sencilla de hacerlo? en el diseño de plantillas no esta la opcion... Muchas gracias...

      Eliminar
    12. No creo que sea eso porque ya te digo que yo conseguí hacerlo "en caliente", pero por probar que no quede. Para poner un fondo a esa barra laterl, simplemente añade a tu CSS esto:
      #sidebar-right-1 {background: #000;}

      Eliminar
  2. Buenas, siento desvirtuar pero no he encontrado nada en las entradas anteriores, ¿podrias ayudarme?
    en la dirección de mi blog me aparece cada vez que visito una entrada o una pagina un codigo extraño al final de la direccion web. es algo así "blogspot.com/p/tutoriales.html#.UBCeE0jWRko" este ultimo codigo es el que no entiendo que es. He ido quitando gadget y probando , pero nada.
    siento la intromisión, enhorabuena por el blog me ha servido muchas veces.
    saludos.

    ResponderEliminar
    Respuestas
    1. ¿Tienes uno que añadía un enlace a tu blog cuando alguien copia su texto? Me suena que ese hacía eso.

      Eliminar
    2. Si no me equivoco ese codigo te lo pone el Add This, me parece que es un fragmento de analytics, cuando creas el codigo de Add This hay una opcion si quieres que te ponga ese codigo o no.

      Saludos!

      Eliminar
    3. Pues finalmente fue el addthis, tenia puesto el codigo modificado con contadores, al poner el codigo normal desaparecio.
      No lei tu mensaje lombervid, spongo que hubiera podido modificar el codigo, pero de todas formas solo perdi un boton :)
      Gracias!

      Eliminar
    4. Perfecto. Buen dato para todos.

      Eliminar
    5. Hola, buscando información sobre las letras y números sin sentido al final del URL, llegué acá.
      En un blog que estaba editando me aparecía eso, pero no tenía instalado AddThis. Pero al leer que AddThis era fuente de ese problema se me ocurrió que ShareThis también podía ocasionar lo mismo. Revisé mi código, saqué SahreThis y se solucionó.
      Lo comento por si a alguien le pasa lo mismo. Yo lo solucioné sacando todo el código y poniendo otros botones sociales.
      Les mando un saludo!

      Eliminar
    6. Thank you very mucho Anabel ;)

      Eliminar
    7. De nada Oloman! Gracias a vos! SIEMPRE encuentro información útil e interesante acá ;)

      Eliminar
  3. Saludos Olo,una pregunta fuera de esta entrada.Es posible crear una caja de registro para entrar a mi blog,hace poco compre un domingo en blogger con tecnología Go Daddy
    Pedro Alfonso

    ResponderEliminar
    Respuestas
    1. ¿Con "caja de registro" quieres decir un sistema para que sólo los que se registren y tú aceptes puedan acceder al blog? Si he acertado con mi suposición la respuesta es que si es posible pero no en Blogger, porque haría falta un hosting propio para poder manejar bases de datos.

      Eliminar
  4. Hola, como puedo hacer que el texto se corte antes? Osea que el lado derecho no llegue a tener tanto espacio:
    https://dl.dropbox.com/u/11723636/prueba5.png
    Gracias

    ResponderEliminar
    Respuestas
    1. Aumenta el segundo valor de este padding:
      padding:2px 4px 4px 40px;
      De nada ;)

      Eliminar
    2. Lo he probado pero con eso lo que pasa es que tengo que augmentar el tamaño del gadget también.
      Esto es lo que quiero hacer:
      https://dl.dropbox.com/u/11723636/prueba5.png

      Eliminar
    3. Es cierto. Me equivoqué.

      Lo que tienes que hacer es modificar el segundo o cuarto valor (según quieras "mover" a la derecha o a la izquierda), pero luego tendrás que reducir el WIDTH para que recupere el tamaño original. Puedes usar px en lugar de %.

      Eliminar
  5. Hola Oloman,

    He hecho esto con una imagen en vez de darle estilos CSS y una vez colocada, tapa la separación que tengo entre gadgets dando el aspecto de estar en un solo elemento sin espacios.

    He probado a aumentar el hueco entre gadgets situando propiedades como margin y padding en varios sitios de la plantilla pero no termino de dar con el adecuado.

    Blog de pruebas: http://disenoalpha.blogspot.com.es/

    Agradezco tu ayuda.

    ¡Saludos!

    ResponderEliminar
    Respuestas
    1. Hola. Ya he visto el fallo. En .sidebar .widget h2 tienes un margin: -22px; Eso lo que hace es cambiar TODOS los márgenes y tú sólo necesitas variar el izquierdo. Sustitúyelo por esto otro: margin: 0 0 0 -22px;

      Eliminar
    2. Gracias Oloman,

      Has dado en el clavo (como siempre).

      ¡Saludos!

      Eliminar
  6. Hola Olo, creo que me eh echo fanático de tu blog por tus aporte, y la verdad me encanta, por que lo compartes de manera gratuita, sigue asi! Pero mira tuve un problema me sale muy largo la banda y no se como solucionarlo, si me das una mano te lo agradecería mucho.

    ResponderEliminar
    Respuestas
    1. Perdón por meter mi cucharota pero a mi me pasaba similar situación y en .sidebar .widget h2 cambié width:106%; por width:100%; o en tu caso cambiando ese atributo por un valor que se ajuste a tu sidebar me parece que quedará bien.

      Eliminar
  7. ¡Saludos de nuevo, Olo!
    He probado el triángulo del after en mi blog de pruebas y no me sale con la orientación que debe. Sólo he copiado el código (adaptándolo al título de la entrada y no al de los widgets) y le he puesto en el índice z un valor de 1, para visualizar dónde quedaba.
    Este es el resultado, para que me entiendas mejor:
    http://pruebasrgv.blogspot.com.es/

    ResponderEliminar
    Respuestas
    1. Quítale a h3.post-title un overflow:hidden que lleva, pues es eso lo que impide que parte del triángulo se vea por fuera del cuerpo del título de la entrada.

      Eliminar
  8. Amigo el triangulo me sale solo de un lado

    ResponderEliminar
  9. Hola!
    De que manera se puede modificar para cambiarle el color y ponerle lineas punteadas??

    ResponderEliminar
  10. El color de fondo se lo tienes que cambiar en background: #666; y luego si es necesario, también tienes que cambiar el de las esquinitas inferiores que es el #444 que puedes ver dos veces en el código.

    Para lo las líneas punteadas, si es lo que imagino ya hay que complicar algo más el código: http://www.oloblogger.com/2012/10/cinta-realista-con-css.html

    ResponderEliminar
  11. Lo primero de todo, una gran ENHORABUENA por este blog, de lo mejorcito que hay, y me he leído unos cuantos.

    Te quería comentar que, al igual que lo que proponía el amigo RGV hace ya algo más de un año, yo también he empleado este recurso para los títulos de mis posts. Con la forma "simple" (http://www.oloblogger.com/2012/07/titulo-con-forma-de-banda-superpuesta.html) con un solo lado lo conseguí relativamente fácil, pero para ponerlo doble como deseaba no daba en el clavo.
    Finalmente bastaba con editar los ".sidebar .widget" por el "h3.post-title", hasta ahí me resultó lógico e intuitivo, pero no conseguía que saliese el lado derecho y no le daba explicación. Después de todos leerme los comentarios de los dos posts, resulta que el fallo era el "overflow:hidden" del "h3.post-title", que hay que eliminar, como explicabas en un comentario de respuesta al ya mencionado compañero.
    Se me ocurría que resultaría interesante que añadieses una pequeña nota al final de los dos posts. En el del modo simple un enlace que redirija aquí para informar que también se puede poner doble; y en este una pequeña aclaración para saber esta pequeña diferencia que se debe realizar en caso de títulos para posts en lugar de para gadgets.

    Espero que te guste mi sugerencia, y nuevamente, enhorabuena por este trabajo tuyo, es de gran ayuda para toda aquella gente que quiere mejorar su blog y no sabe cómo, muchas gracias ^^

    ResponderEliminar