JMiur [E]

csstxt.com es un sitio donde ingresamos un texto y seleccionando una serie de opciones de formato, nos devuelven un código HTML que podemos usar en nuestra página web.

Contempla todas las propiedades que afectan los textos, tanto las elementales como font, text-align, text-decoration y text-weight, así como las menos usadas tales como letter-spacing, word-spacing y line-height. También podemos establecer colores, fondos, márgenes, etc.

En cualquier momento, Generate nos muestra una previsualización y el código resultante:
<p style="font-weight:normal;font-family:palatino linotype, palatino, serif;text-decoration:none;text-align:center;color:#DDEEFF;background-color:#556677;letter-spacing:-1pt;word-spacing:1pt;font-size:20px;line-height:1;border:dotted 2px #99AABB;padding:10px;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
Basta copiarlo y pegarlo tal cual o bien usar las definiciones de estilo que nos dan para aplicarlo a otros textos:
<style type='text/css'>
.mycss{
background-color: #556677;
border: dotted 2px #99AABB;
color: #DDEEFF;
font-weight: normal;
text-align: center;
text-decoration: none;
font-family: palatino linotype, palatino, serif;
font-size: 20px;
letter-spacing: -1pt;
line-height: 1;
padding:10px;
word-spacing: 1pt;
}
</style>

<p class="mycss">
.......
</p>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.


REFERENCIAS:wwwhatsnew.com

10 comentarios:

Dña. Urraca  

La de horas que me habría ahorrado cuando estaba dando forma, pero no habría aprendido nada. Claro que tampoco se demasiado.

Responder
Espineli  

Wow! justamente esos colores quedan de maravilla en mi blog junto con un marco gris redondeado que le he añadido a las imágenes recientemente, asias. ;-)

Un saludo.

Responder
JMiur  

Dña. Urraca: De alguna manera, también sirve para aprender ya que vas viendo que hace cada cosa. Bah ... todo sirve para aprender :D

Me alegro que sirviera amigo Espineli.

Responder
Graciela  

Es buenísimo para aprender, genial :)
Que tengas un día tranqui, sin esos carteles...:O

Responder
MamaNunes  

:D Muy útil y más completa que http://www.csstypeset.com/ (sabes?). Gracias por compartir! Abraços!

Responder
Adriana Paoletta  

Que bueno tener un amigo como tu que siempre trae buenas noticias!!!!! :D

Responder
Juan Pedro  

Excelente ayuda, gracias!

Responder
jano  

hola Jmiur soy nuevo en esto de los blogs :O y he hido visitando tu blog desde hace ya un tiempo y me a resultado muy interesante y educativo ahh , :D bueno sin mas revueltas mi pregunta era como puedo hacer para q las entradas antiguas se muestren en miniatura con el enlace de leer más. espero puedas ayudarme;).

Responder
Gem@  

Estas herramientas me gustan, son muy útiles. Le falta un vista previa para que sea perfecto ¿no crees?

Responder
JMiur  

Si, es interesante de verdad. Muy útil.

MamaNunes: me gusta ese de http://www.csstypeset.com. Muy bueno también :)

jano: Intentaré explicarlo en los próximos dias.

Gem@; Fíjate en el que recomienda MamaNunes. Ese tiene menos opciones pero se previsualizan.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR