Tema: Convertir de Mayusculas a Mayusculas y minusculas
Ver Mensaje Individual
  #5 (permalink)  
Antiguo 29/03/2012, 09:17
Avatar de emprear
emprear
Colaborador
  
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 16 años, 10 meses
Puntos: 1567
Respuesta: Convertir de Mayusculas a Mayusculas y minusculas
Cita:
Iniciado por livemusic Ver Mensaje
Estoy intentando convertir MAYÚSCULAS - Mayúsculas y minúsculas pero no se puede.

Este código no me funciona, espero su pronta ayuda...

<style type="text/css">
h1.uppercase { text-transform: capitalize !important; }
</style>
<h1 class="uppercase">ESTE ES UN DEMO</h1>

Si se puede
Para capitalizar primera letra en mayúsculas, de esta manera

Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <title>titulo</title> 
  6. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  7.  
  8. <style type="text/css">
  9. /*<![CDATA[*/
  10.  
  11. h1.uppercase{
  12. font-variant: small-caps;
  13. text-transform: lowercase;
  14.  
  15. font-family: arial;
  16. font-size: 17pt;
  17. }
  18. h1.uppercase:first-letter{
  19. text-transform: uppercase;
  20. }
  21.  
  22. /* otra variante */
  23.  
  24. h2{
  25. text-transform: uppercase;
  26. font-size: 15pt;
  27. }
  28.  
  29. h2:first-letter{
  30. font-size:120%;
  31. letter-spacing: -2px;
  32. }
  33. /* otra variante + letter spacing */
  34.  
  35. h3{
  36. text-transform: uppercase;
  37. font-size: 15pt;
  38. }
  39.  
  40. h3:first-letter{
  41. font-size:180%;
  42. letter-spacing: -2px;
  43. }
  44.  
  45. /*]]>*/
  46. </style>
  47. </head>
  48. <body>
  49. <h1 class="uppercase">FOROS DEL WEB</h1>
  50. <h1 class="uppercase">Foros del web</h1>
  51. <h1 class="uppercase">foroS deL WEb</h1>
  52.  
  53. <h2>FOROS DEL WEB</h2>
  54. <h2>Foros del web</h2>
  55. <h2>foroS deL WEb</h2>
  56.  
  57. <h3>FOROS DEL WEB</h3>
  58. <h3>Foros del web</h3>
  59. <h3>foroS deL WEb</h3>
  60. </body>
  61. </html>

La variante 1 funciona en IE8+ y el resto
La dos si funciona en IE7
Aumente el tamaño y cambié tipografía para que destaque
Si usas la variante dos y aumentas mucho el procentaje, lo podés corregir con letter-spacing negativo (ejemplo en los h3)
Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
Última edición por emprear; 29/03/2012 a las 09:48