Regresar a la página www.ComoCrearTuWeb.com
Resultados 1 al 12 de 12

Tema: Como hacer títulos más bonitos

  1. #1
    Me va gustando esto... Habitante
    Fecha de Ingreso
    19 sep, 12
    Mensajes
    73
    Poder de Reputación
    4

    Como hacer títulos más bonitos

    Hola buenas a todos! me gustaría saber como poner un título como el de esta página, así de esta forma: http://www.comocreartuweb.com/
    el título naranja, como crear páginas web gratuitas. Con esa forma como en 3d y sombreado y me gustaría saber más tipos de títulos. Gracias!!! espero respuesta

  2. #2
    Esto empieza a ser un vicio... Habitante
    Fecha de Ingreso
    05 oct, 09
    Mensajes
    378
    Poder de Reputación
    9
    Te recomiendo que utilices o aprendas a usar PhotoShop para editar imágenes, ya con ellas puedes crear efectos. puede que lo que ves como si fuera letras simplemente en realidad es una imagen y esto se ve así, pero es solo un efecto visual.
    aquí en el vídeo te muestro como se utiliza para diseñar una cabecera con un video en Macromedia flash.

    http://www.youtube.com/watch?v=tFo9U-2n5s0

    Puedes diseñar imágenes a tu gusto con PhotoShop

  3. #3
    Me va gustando esto... Habitante
    Fecha de Ingreso
    19 sep, 12
    Mensajes
    73
    Poder de Reputación
    4
    si, pero entonces entonces el título se vería como una imagen, no como un título h1,h2...etc como los de esta página. Como puedo hacer para que se vea como texto, es decir, por ejemplo tu quieres copiar y pegar mi título, con h1 podrías hacerlo pero con una imagen lo que arias es copiar la imagen, espero respuesta!! un saludo!
    Última edición por Alvaro20; 19/11/2012 a las 20:57

  4. #4
    Esto empieza a ser un vicio... Habitante
    Fecha de Ingreso
    02 may, 11
    Ubicación
    Santiago, Chile
    Mensajes
    1,573
    Poder de Reputación
    14
    @Alvaro20: si te preocupa el tema de SEO (optimización para buscadores), entonces no deberías preocuparte, pues la forma correcta debería ser esta:

    Código HTML:
    <h1>
      <a href="http://misitio.algo/">
        <img src="imagen.algo"  title="Aquí pones lo que pondrías si no tuvieras imagen" alt="Una descripción alternativa también es útil" />
      </a>
    <h1>
    Sigue el consejo de Zonurb y luego incluye el logo como te expliqué :).

  5. #5
    Esto empieza a ser un vicio... Habitante
    Fecha de Ingreso
    05 oct, 09
    Mensajes
    378
    Poder de Reputación
    9
    Aquí te muestro como hacer las letras con sombra en PhotoShop
    http://www.youtube.com/watch?v=whV-IeHrIA8
    Para que no se vea como imagen tienes que hacer lo siguiente: supón que la imagen que edites con PhotoShop tiene un color de fondo, pues bien si esta imagen la quieres poner en el Div contenidos, fíjate que color tiene el div contenidos y utiliza ese mismo color para editar tu imagen en PhotoShop y encima le pones las letras, entonces parecerá como si las letras estuvieran hechas de otra forma pero en el fondo es una imagen , y las personas que entren a la web no veran la imagen, solo vera las letras

  6. #6
    Me va gustando esto... Habitante
    Fecha de Ingreso
    19 sep, 12
    Mensajes
    73
    Poder de Reputación
    4
    y el efecto tridimensional? y gracias por vuestra ayuda, me sirve de mucho! me he dado cuenta de que no tiene efecto tridimensional es solo sombreado jeejej, un saludo.
    ¡ah! otra cosa, se puede cambiar el tipo de fuente de las letras del texto, o solo el color? un saludo!
    Última edición por Alvaro20; 20/11/2012 a las 10:07

  7. #7
    Esto empieza a ser un vicio... Habitante Avatar de Lombardo
    Fecha de Ingreso
    24 jul, 11
    Ubicación
    Austria
    Mensajes
    406
    Poder de Reputación
    7
    Cita Iniciado por zonurb Ver Mensaje
    ...parecerá como si las letras estuvieran hechas de otra forma pero en el fondo es una imagen , y las personas que entren a la web no veran la imagen, solo vera las letras
    En efecto, es lo que se hacía antes del recurso font-face

    En Photoshop adornas los rótulos con Estilos de capa, segundo icono al pie de la paleta Capas. Así añades bisel, sombra paralela, resplandor, trazo... Saludos.

  8. #8
    Me va gustando esto... Habitante
    Fecha de Ingreso
    19 sep, 12
    Mensajes
    73
    Poder de Reputación
    4
    ya he cambiado el tipo de fuente con <font face="arial"> queda bastante mas bonito que con courrier, tanto el título, como el texto, un saludo! he iré practicando las sombras.

  9. #9
    Esto empieza a ser un vicio... Habitante Avatar de Doodleo
    Fecha de Ingreso
    25 abr, 11
    Ubicación
    Galicia (España)
    Mensajes
    1,255
    Poder de Reputación
    13
    Para hacerlo con CSS puedes usar text-shadow, exactamente los títulos como están en CCTW son:
    Código HTML:
    .h1-sombreado {
    text-shadow: 2px 2px 1px #FF0000, -2px -2px 6px #000000;
    text-decoration:underline;
    font-size:1.8em;
    color:#ff8800;
    }
    Y para usarlo:
    Código HTML:
    <h1 class="h1-sombreado">H1 SOMBREADO :D</h1>

  10. #10
    Me va gustando esto... Habitante
    Fecha de Ingreso
    19 sep, 12
    Mensajes
    73
    Poder de Reputación
    4
    eso es lo que quería, si señor!!! muchas gracias Doodleo!! aunque no me funciona, tengo entendido que text-shadow se puso en la versión 3.1 o 3.2 de css y yo creo que utilizo 2.1 ¿estoy en lo cierto? no se muy bien si es así...también podéis visitar mi web, que es bastante básica para ver como quedan los títulos y si puedo hacer lo de las sombras. www.mundoenigmatico.com un saludo!
    Última edición por Alvaro20; 22/11/2012 a las 12:35

  11. #11
    Recien Llegado! Merodeador
    Fecha de Ingreso
    21 oct, 12
    Mensajes
    8
    Poder de Reputación
    0
    todo se consigue con estilos css y para que se vea bien en todos los navegadores utilizar -webkit y -moz, por lo que estoy aprendiendo esto es css3, si me confundo que alguien me corrija.

    http://www.revolutionlaserie.com

    h1 {
    text-shadow: 2px 2px 1px #88A452,-5px -5px 10px #000000;
    -webkit-text-shadow: 2px 2px 1px #88A452,-5px -5px 10px #000000;
    -moz-text-shadow: 2px 2px 1px #88A452,-5px -5px 10px #000000;
    }

  12. #12
    Me va gustando esto... Habitante
    Fecha de Ingreso
    19 sep, 12
    Mensajes
    73
    Poder de Reputación
    4
    Hola thelamb, gracias por la ayuda pero no me sirve para dar sombra. Por cierto, ¿en tu página estas subiendo la primera temporada de revolución? como es posible si todavía no lo hay emitido...jaja. ¡Y gracias por tu crítica en el otro mensaje! un saludo.

Temas Similares

  1. Respuestas: 0
    Último Mensaje: 14/08/2011, 03:07
  2. Respuestas: 3
    Último Mensaje: 03/04/2010, 17:08
  3. problema, los parrafos y subitutos se ven como titulos
    Por magiatar en el foro Curso Paso a Paso con Html-Kit.
    Respuestas: 6
    Último Mensaje: 18/10/2007, 15:23

Permisos de Publicación

  • No puedes crear nuevos temas
  • No puedes responder temas
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes
  •