Estirar un texto? con css?

[djkiku]

Hola quisiera saber si es posible hacer al texto lo mismo que con fireworks... aqui muestro el ejemplo:



Haber si alguien tiene el codigo milagoros ^^ Mi iria muy bien por que mi logo esta hecho con esas letras estiradas.. y ya sabeis que para el SEO es mejor texto ^^

GRACIAS!

[pzin]

Hay una propiedad font-stretch en CSS moderno. Pero no está soportado por ningún navegador aún. Es la única propiedad relativa en concreto al texto.

No obstante, puedes usar transform scaleX(), que es como scale() que usaste en el tema anterior.

Código CSS:

div {
  transform:scaleX(3);
}
 

Aunque tendrías que usar los prefix de los navegadores, ya que sino en algunos no te va a funcionar.

[djkiku]

Joer, dios te vendiga, muchisimas gracias!!!!! Gracias a ti me esta quedando una pasada de web!!! :)

[djkiku]

Una pena, no me lo quiere estirar.. supongo que es lo que comentas sobre navegadores...

Entonces lo are sin estirar el logo jejeje :)

Muchas Gracias! ^^

[ArturoGallegos]

ante la posibilidad de errar, no se vera mejor si usaras la propiedad letter-spacing???

Código CSS:

.banner{letter-spacing:14px;}
 

esta propiedad no distorsiona la fuente ni la estira solo aumenta o disminuye el espacio entre las letras, con lo que yo consideraría una mejor experiencia para el visitante, aparte según recuerdo es soportado en todos los navegadores.

[pzin]

Iniciado por ArturoGallegos

ante la posibilidad de herrar, no se vera mejor si usaras la propiedad letter-spacing???

Como bien dices letter-spacing es para el espaciado entre letra y letra —el tracking. Él quería estirar la fuente, como dijo, para ajustarla a cómo lo tiene en el logo.

Yo subiría el logo hecho. Pero hoy en día la mentalidad es SEO over user.

Por cierto, errar con hache es de hecho un error.

[djkiku]

Gracias a los dos..! Lo que estoy pensando, es que no hay una fuente que sea baja y alargada? También me valdria!

Y si no.. como dice Bonez, a subir el logo y ya esta jejeje! :)

[djkiku]

Arreglado!!!! :) Haber si me podeis comentar que pinta tiene el Logo?! ^^

(Espero que no se considere spam.. es un sitio en plena construccion xD)

http://nueva-marca.blogspot.com.es/

[ArturoGallegos]

veo que decidiste dejarlo con letter-spacing, se ve bastante bien... pero lo que mas me gusto fue el monito con el dedote arriba

ñ.ñ yo uso el mismo en mi web pero sentado con la tablet

[djkiku]

jajaja Vaya casualidad!! Pensaba que era el unico que lo usabara! ^^

Si Gracias a los dos! :) Me esta quedando la web de lujo!^^

[NJS]

Gracias a ambos.
Desconocía

transform:scaleY(); y transform:scaleX();

[Rafael]

NOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO. ¿A quién demonios se le ocurre implementar una herejía como font-strech?. ¡Ojalá ningún navegador lo haga!

Djkiku. Evita eso por favor. Es peor que usar tablas para tu diseño. Si tu logo tiene las letras así... hace falta un rediseño de logo.

Revisa en google fonts alguna que sea mas extended. Y de verdad... habría que revisar tu logo.

Ojo: si es por SEO, para un logo, pones el logo como imagen y usas los atributos alt y title (además de un nombre de archivo cadecuado).

Seguramente una empresa como nike la buscan por nombre... seguramente google la indexa bien, y seguro no aplastan la palabra nike. Pero si quieres que tu marca sea reconocida tanto que la busquen por nombre, de verdad es más importante tener una buena imagen a que Hola esté escrita con texto y no en un png.

[siddartha23]

Si es por SEO solo se le agrega un <h1>MI EMPRESA</h1> y se le desaparece visualmente con {font-size:0; text-indent: -1000px;}

Los robots detectan el h1 en el html y los usuarios ven la imagen...

[ArturoGallegos]

Notaron la fecha del post original?

hace mas de año y medio ->>> 13/01/2013

text-indent -1000px ??? aun usas pantallas de 800px? o falto complementarlo mencionando que el contenedor debe tener ancho definido y con overflow?

[siddartha23]

Siempre uso full-width fluido en mi maquetación con el logo en el lado superior izquierdo por eso que me funciona sin problemas pero sabemos que hay mas de una manera de desaparecer visualmente un texto.

Así es, el post es de hace tiempo pero siempre hay algo que agregar si la discusión se reactiva ;)