Fuentes en web ¿Con cual te quedas?

No es la primera vez que escribo un post sobre el uso de diferentes fuentes en páginas web, pero recientemente he hablado sobre esto con varias personas y me veía en la necesidad de volver a escribir sobre ello y organizar mejor mis pensamientos. Así que allá voy: Como norma general, la fuente que indiquemos en nuestra web, tiene que ser una fuente que tenga instalada en su ordenador la persona que acceda a ella. Por eso, estamos limitados a una lista de fuentes muy corta. Pero por suerte para los diseñadores todos, hoy en día podemos ampliar esta lista…

Leer más

CSS3: Transformaciones en 2D

Mientras esperamos a la llegada definitiva de la versión 3 de CSS, no puedo evitar ir trasteando las nuevas propiedades, y esta vez le he echado el ojo a “transform” y “transform-origin”. Con transform podemos modificar elementos de varias formas: 1. Transladar el elemento a otra posición: elemento{transform:translate(a,b);} 2. Escalar el elemento: elemento{transform:scale(a);} 3. Rotar el elemento: elemento{transform:rotate(a);} 4. Sesgar el elemento: elemento{transform:skew(a,b);} 5. Deformar el elemento: elemento{transform:matrix(a,b,c,d);} Por defecto, la mayoría de los navegadores asignan como punto de origen de las transformaciones el centro del elemento (50% 50%), pero podemos modificar este punto con la propiedad transform-origin: Poniendo, por…

Leer más

CSS: Trabajando con espacios en blanco

Cuando trabajamos con espacios en blanco sobre html lo normal es que nuestro navegador los elimine, interpretando sólamente aquellos que aparecen entre palabras. Para mí eso es perfecto, pero habrá quien añore el preformato tipo procesador de texto, para vosotros aquí tenéis una solución con css. La propiedad white-space te permite manejar los espacios en blanco a tu antojo ¿Cómo? Simple, con un mismo ejemplo os demuestro su funcionamiento, el código que voy a usar es el mismo, cambiaré solo la propiedad en css. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sit amet mauris et sapien sollicitudin semper…

Leer más

CSS3: Un vistazo a los nuevos selectores

En cuanto nos descuidemos tenemos encima la nueva versión de CSS así que ya es hora de que empecemos a ponernos las pilas con el CSS3. Con esta nueva versión de las hojas de estilo aparecen muchos más selectores que los que teníamos hasta CSS2 y la verdad, ya nos iban haciendo falta. Por eso vamos a ir acostumbrándonos a ellos poco a poco ¡Empecemos! Selectores generales en CSS3 * selecciona todo E selecciona un elemento (E) E.warning selecciona un elemento (E) con la clase warning E#home selecciona un elemento (E) con la id home E F selecciona el elemento…

Leer más

CSS: Posicionar elementos con z-index

Flickr: CSS z-index Muchas veces queremos posicionar un elemento delante de otro, ya sea por estética o por optimizar, y no encontramos la forma de hacerlo o tiramos por el camino más fácil. Por ejemplo, la imagen que he puesto en la cabecera del artículo, más de una vez me he encontrado con eso, una imagen. El hecho de no saber cómo superponer un bloque con otro hace que tengamos que añadir un peso extra a nuestra web. Por eso, para quienes no sepáis como hacerlo (quienes lo sepáis ya, también podéis leer eh) os lo explico: Con la propiedad…

Leer más