Foros del Web » Creando para Internet » CSS »

Titulo con efecto solapa

Estas en el tema de Titulo con efecto solapa en el foro de CSS en Foros del Web. Hola!. Quisiera saber como se puede lograr el efecto de el recuadro con la solapa en los titulos que se muestra en esta pagina, como ...
  #1 (permalink)  
Antiguo 15/10/2009, 13:09
 
Fecha de Ingreso: febrero-2009
Mensajes: 176
Antigüedad: 8 años, 10 meses
Puntos: 1
Titulo con efecto solapa

Hola!.

Quisiera saber como se puede lograr el efecto de el recuadro con la solapa en los titulos que se muestra en esta pagina, como se hace con CSS?.

Si no se dan cuenta de que hablo, para ser mas especifico, me refiero al efecto del recuadro del primer titulo que dice "Brothers Streep".

Voy bien con el recuadro, pero no se como añadirle ese triangulo debajo que le da una sensacion de venir de atras del fondo.

Muchas gracias!.
  #2 (permalink)  
Antiguo 15/10/2009, 13:23
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Titulo con efecto solapa

El cuadro no es una imagen, sino esto:

#main .post-title, #main .page-title, #main .comments-title {background-color:#98BDC6;
border:1px solid #6E8D94;
display:inline;
float:left;
margin:0pt 30px 0pt -21px;
padding:12px 25px;
position:relative;
}

Y el triángulo esta imagen:

__________________
Visita mi nueva web idplus.org
  #3 (permalink)  
Antiguo 15/10/2009, 13:26
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Titulo con efecto solapa

el html
Código html:
Ver original
  1. <div class="post-title">
  2.                         <h2><a title="Brothers Streep" rel="bookmark" href="http://www.markforrester.co.za/2009/10/11/brothers-streep/">Brothers Streep</a></h2>
  3.                         <span class="postfold"> </span>
  4.                     </div>
y el css
Código css:
Ver original
  1. #main .post-title, #main .page-title, #main .comments-title {
  2. background-color:#98BDC6;
  3. border:1px solid #6E8D94;
  4. display:inline;
  5. float:left;
  6. margin:0 30px 0 -21px;
  7. padding:12px 25px;
  8. position:relative;
  9. }
  10. #main .post-title h2 {
  11. display:inline;
  12. font-size:24px;
  13. padding:0;
  14. text-shadow:1px 1px 1px #7D9DA5;
  15. }
  16. #main span.postfold {
  17. background:transparent url(images/post_fold.png) no-repeat scroll center center;
  18. bottom:-15px;
  19. display:block;
  20. height:15px;
  21. left:0;
  22. position:absolute;
  23. width:20px;

como verás sólo utiliza una pequeña imagen para simular la sombra con el span.

Un saludo

Edito:

leñes!!! padiez!!! cuán rápido andáis vos!!!
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #4 (permalink)  
Antiguo 15/10/2009, 14:17
 
Fecha de Ingreso: febrero-2009
Mensajes: 176
Antigüedad: 8 años, 10 meses
Puntos: 1
Respuesta: Titulo con efecto solapa

Muchas gracias por responder!.

Lo que pasa es que no se como aplicarlo bien.

Coloque ambos codigos, y modifique la ruta de la imagen para que la tome en mi pc, pero no me funciona.

:S
  #5 (permalink)  
Antiguo 16/10/2009, 14:55
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: Titulo con efecto solapa

que raro...

no te funciona = no sale la imagen?
no te funciona = no sale la imagen donde quieres?
no te funciona = no pasa absolutamente nada?
no te funciona = ninguna de las anteriores XD

recuerda que el CSS no es magia igual en el HTML tienes que tener dichas clases
como sea pega tu codigo para que veamos que pasa... chao y suerte!...
  #6 (permalink)  
Antiguo 29/10/2009, 14:55
 
Fecha de Ingreso: febrero-2009
Mensajes: 176
Antigüedad: 8 años, 10 meses
Puntos: 1
Respuesta: Titulo con efecto solapa

Hola gente!.

Disculpen por demorar tanto en responder.

Les cuento que solucione el problema.

Tenia que cambiar #main por el nombre que tengo en mi hoja de estilos. Una tontera.

Gracias!!!.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 01:26.