La regla CSS @font-face permite definir una tipografía e importarla para su uso en una página web. Antes de su existencia se podía definir una lista de familias en orden decreciente de prioridad con la regla font-family y se utilizaría la primera...

Los elementos <div> son elementos tipo block, y como cualquier otro elemento tipo block se puede centrar horizontalmente si se conoce su anchura con tan sólo aplicar un margen «auto» a izquierda y derecha. Por ejemplo: En el ejemplo anterior...

La regla @import permite cargar uno o varios archivos CSS dentro de otro. Puede ser muy útil en determinados casos. Por ejemplo, cuándo trabajas en una web grande y compleja, el archivo CSS se vuelve descomunal e intratable y para hacernos la vida...

Por defecto, el contenido de los elmentos <pre> (tipo block) y <code> (tipo inline) no pasa a una nueva línea cuándo su longitud supera a la anchura del elemento contenedor. El contenedor no «envuelve» (wrap) al contenido. Esto se debe a...

En este tutoriales en linea he recopilado los snippets CSS para crear formas básicas como cuadrados, círculos y triángulos. Derivadas de estas se pueden construir fácilmente otras formas tales como rombos, trapecios y otros paralelogramos. Espero...

Fabuloso CSS3. Las animaciones, antes reservadas a jаvascript y otras tecnologías, ahora son posibles con CSS. Existe la propiedad animation, más específica para animaciones, pero en este post voy a hablar de transition. No es que sea la panacea...

Si tenemos una palabra muy larga puede pasar que ocupe más ancho que su contenedor y que no se pueda leer o, en el mejor de los casos, rompa el layout de nuestra web. Este problema puede provocar más de un calentamiento de cabeza, especialmente en...

En el diseño responsive las imágenes tienen algunos inconvenientes: carga de archivos innecesariamente pesados para pantallas pequeñas y necesidad de redimensionar las imágenes con la posible distorsión y pérdida de calidad. Hay múltiples soluciones...

Muchos servicios multimedia, como YouTube o SoundCloud, utilizan el viejo elemento <iframe> para insertar el contenido en otras webs. Y que conste que digo «viejo» con todo el cariño. En los días que corren dónde el diseño adaptativo es más...

Cuándo seleccionamos texto en una página web, el fragmento seleccionado queda resaltado con un color de fondo y un color de fuente determinado. Los colores utilizados dependen del navegador y sistema operativo, no hay un estándar al respecto, pero...

La propiedad CSS cursor especifica el tipo de cursor que se mostrará cuándo se señala un elemento. Se puede especificar directamente mediante el nombre del tipo de cursor que queremos utilizar de entre los tipos de cursores de sistema, por ejemplo,...

Los spinners, esos típicos símbolos que nos muestran que estamos a la espera de algún proceso de carga, han sido durante mucho tiempo imágenes tipo GIF. Pero CSS le ha comido casi todo el terreno. Con las propiedades animation, transform y...