Texto
CategoríaArtículos que explican como estilizar el texto con CSS y recursos para conseguirlo.
Guía sobre el uso de las fuentes en la Web
La fuente juega un papel fundamental en el diseño de nuestro sitio web, ya sea su diseño interior o exterior. Esto es así porque de ella dependerá que un lector abandone la página por culpa de la ceguera de esta, o siga leyendo. (Esto se conoce como percepción del observador). En esta entrada se resumen … Lee más!
Enlaces con fondo en CSS
Algunas veces queremos destacar los enlaces de otra manera, indicando una imagen de fondo que acompañe a ese enlace, para indicar por ejemplo, que es un enlace externo. Una manera sencilla de hacerlo es aplicarle una clase al enlace, para ello debemos indicar este código CSS: dtsv.dtse_post_1076_permalink = ‘http://www.cssblog.es/enlaces-con-fondo-en-css/’; dtsv.dtse_post_1076_title = ‘Enlaces con fondo en … Lee más!
CSS: El enlace y la fuente
Un enlace es un vínculo con el que enlazamos unas páginas con otras. El enlace en CSS tiene varias propiedades: A:link = Enlace normal (Sin pulsar ni mantener el cursor encima) A:visited = Cuando el enlace ha sido visitado anteriormente. A:active = Cuando hacemos click sobre el enlace. A:hover = Cuando situamos el cursor sobre … Lee más!
Crea tus forms con estilo
Los forms (cajas de texto) en cada navegador se ven distinto, así que, ¿Por qué no aplicarle un poco de personalidad?. Simplemente vamos a aplicarle CSS para que parezca más bonito y no cambie según cada navegador. El resultado sería algo parecido a esto: form.example input { background: url(‘http://www.cssblog.es/ejemplos/box.gif’) no-repeat 0 -58px; border: none; width: … Lee más!
CSS: Id del elemento
El atributo “id” es similar a class (Permite llamar desde un elemento a un código CSS) con la diferencia de que el atributo id solo puede aplicarse a un elemento, no a tantos como quisiéramos, como se hacía con el atributo class. Es decir, el atributo ID sirve para identificar un elemento, y solo debe … Lee más!
Tipos de tamaños de textos en CSS
En CSS podemos encontrar varias formas de declarar el tamaño de un texto, acompañadas de medidas. Todas estas van declaradas gracias a la propiedad font-size. dtsv.dtse_post_739_permalink = ‘http://www.cssblog.es/tipos-de-tamanos-de-textos-en-css/’; dtsv.dtse_post_739_title = ‘Tipos de tamaños de textos en CSS’;
Degradar texto con una imagen y CSS
Existe un truco para poder crear un texto degradado, con texturas u otra decoración, sin tener que usar Photoshop para crear la letra, solo el degradado que queramos hacer, la ventaja de degradar un texto o decorarlo por este método, sería que no usaríamos imágenes para crear el texto (sí la decoración), lo que nos … Lee más!
Efecto de degradado en el bottom con una imagen
Fade out bottom es un efecto interesante que hará que nuestros contenidos se degraden al llegar al bottom de la página. El truco está en una imagen .png de degradado que tiene un valor z-index muy elevado para asegurarse que siempre se situará por encima del texto. Existe un fix de arreglo de PNG para … Lee más!
Convierte unidades absolutas en relativas con PXtoEM
Uno de los valores más importante en la accesibilidad web son las medidas. Por ejemplo, el valor de la propiedad font-size se puede declarar de varias maneras: Mediante porcentaje y mediante unidades de longitud. dtsv.dtse_post_667_permalink = ‘http://www.cssblog.es/convierte-unidades-absolutas-en-relativas-con-pxtoem/’; dtsv.dtse_post_667_title = ‘Convierte unidades absolutas en relativas con PXtoEM’;
Centrar la estructura de tu web horizontalmente usando CSS
La resolución más baja que existe ahora es la de 1024 x 768, así que deberemos programar de acuerdo a esta resolución como mínimo. Una de las cosas que debemos hacer siempre que sea posible, es crear la estructura de nuestro sitio de forma fixed, es decir, que sea una anchura y altura determinada, y … Lee más!
Crear un mensaje secreto con CSS, posición y transparencia
Podemos crear un mensaje oculto con CSS, que cuando vayamonos desplazándonos por la página, las letras se coloquen en su lugar y recreen este mensaje oculto, gracias a la propiedad position y a la transparencia. dtsv.dtse_post_829_permalink = ‘http://www.cssblog.es/crear-un-mensaje-secreto-con-css-posicion-y-transparencia/’; dtsv.dtse_post_829_title = ‘Crear un mensaje secreto con CSS, posición y transparencia’;
