Convertir de Mayusculas a Mayusculas y minusculas

livemusic · #1 (**permalink**) 28/03/2012, 17:25

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>

ArturoGallegos · #2 (**permalink**) 28/03/2012, 19:29

hace algún tiempo me enfrente a este problema lamentablemente no se puede capitalizar un texto cuando esta totalmente en mayúsculas, es decepcionante pero es la realidad.

#3 (**permalink**) 29/03/2012, 06:40

Supongo que esto servirá:

Código HTML:

<html>
<head>
	<style type="text/css">
		h1.uppercase
		{
			text-transform: lowercase;
		}
		
		h1.uppercase:first-letter
		{
			text-transform: uppercase;
		}
	</style>
</head>
<body>

<h1 class="uppercase">ESTE ES UN DEMO</h1>

</body>
</html>

IsaBelM · #4 (**permalink**) 29/03/2012, 08:13

como te comenta Ag666

, css no tiene esa capacidad. tendrás que usar javascript

código de danihxh

emprear · #5 (**permalink**) 29/03/2012, 09:17

Cita:

Iniciado por livemusic

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<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
<style type="text/css">
/*<![CDATA[*/
 
h1.uppercase{
font-variant: small-caps;
text-transform: lowercase;
 
font-family: arial;
font-size: 17pt;
}
h1.uppercase:first-letter{
text-transform: uppercase;
}
 
/* otra variante */
 
h2{
text-transform: uppercase;
font-size: 15pt;
}
 
h2:first-letter{
font-size:120%;
letter-spacing: -2px;
}
/* otra variante + letter spacing */
 
h3{
text-transform: uppercase;
font-size: 15pt;
}
 
h3:first-letter{
font-size:180%;
letter-spacing: -2px;
}
 
/*]]>*/
</style>
</head>
<body>
<h1 class="uppercase">FOROS DEL WEB</h1>
<h1 class="uppercase">Foros del web</h1>
<h1 class="uppercase">foroS deL WEb</h1>
 
<h2>FOROS DEL WEB</h2>
<h2>Foros del web</h2>
<h2>foroS deL WEb</h2>
 
<h3>FOROS DEL WEB</h3>
<h3>Foros del web</h3>
<h3>foroS deL WEb</h3>
</body>
</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

IsaBelM · #6 (**permalink**) 29/03/2012, 13:44

Ag666, re referías a este tema, no??

livemusic · #7 (**permalink**) 29/03/2012, 16:51

Gracias a todos por sus respuestas.