Archivo de la categoría: CSS

Modelo de cajas en CSS (Introducción a CSS)

El modelo de cajas o “box model” es seguramente la característica más importante del lenguaje de hojas de estilos CSS, ya que condiciona el diseño de todas las páginas web. El modelo de cajas es el comportamiento de CSS que hace que todos los elementos de las páginas se representen mediante cajas rectangulares.

Las cajas de una página se crean automáticamente. Cada vez que se inserta una etiqueta HTML, se crea una nueva caja rectangular que encierra los contenidos de ese elemento. La siguiente imagen muestra las tres cajas rectangulares que crean las tres etiquetas HTML que incluye la página:

modelo-de-caja-elementos-html

Las cajas se crean automáticamente al definir cada elemento HTML

Las cajas de las páginas no son visibles a simple vista porque inicialmente no muestran ningún color de fondo ni ningún borde. Los navegadores crean y colocan las cajas de forma automática, pero CSS permite modificar todas sus características. Cada una de las cajas está formada por seis partes, tal y como muestra la siguiente imagen:

Sigue leyendo

Propiedades shorthand, resumiendo las propiedades CSS

Muchas veces, nuestra hoja de estilos CSS, queda de un tamaño inmenso al terminar nuestro sitio. Pero CSS nos permite acortarla, haciendo uso de las propiedades Shorthand.

Dentro de CSS 2.1, algunas propiedades permiten establecer simultáneamente varios valores diferentes. Se las denominan “propiedades shorthand”. Estas propiedades shorthand poseen la gran ventaja de permitir crear hojas de estilos mucho más cortas y rápidas de leer.

Es decir que las propiedades shorthand son basciamente son las propiedades CSS que le permiten establecer los valores de otras propiedades CSS simultáneamente. El uso de una propiedad resumida, un desarrollador web puede escribir hojas de estilo más legibles más concisas y, a menudo, ahorrando tiempo y energía.

La especificación CSS define propiedades abreviadas o shorthand properties al grupo la definición de propiedades comunes que actúan sobre el mismo tema.

Asi que vamos a ver como simplificar nuestro CSS con algunas de las principales propiedades.

Sigue leyendo

Propiedad border en CSS, (Introducción a CSS)

Propiedad border

La propiedad border establece algunas o todas las propiedades de todos los bordes de los elementos.

La propiedad border presenta los siguientes valores en cualquier orden: ancho, estilo del borde, color del borde

Propiedad border, ejemplo de uso

La propiedad border es una de las “propiedades shorthand” que define CSS y que se utilizan para establecer de forma abreviada el valor de una o más propiedades individuales. En este caso, se trata de una de las propiedades shorthand más completas, ya que permite establecer hasta 12 propiedades de forma simultánea.

Sigue leyendo

Columnas Multiples CSS3

La idea de diagramar contenido con columnas múltiples es ajustar el contenido para aumentar la capacidad del lector de seguir la misma línea de texto sin perderse en su continuidad. El texto de divide en varias columnas de menos ancho facilitando la comprensión del tema que se está tratando.

CSS3 incorpora nuevos atributos para que el navegador se encargue de producir contenido multicolumna, es decir, que maquete directamente los elementos en varias columnas sin tener que hacer nosotros nada.

En este artículo vamos a tratar como crear Columnas Multiples CSS3, una de las nuevas características que hoy en dia se encuentran disponibles.

Sigue leyendo

Tablas Responsive con CSS

Garrett Dimon:

Dijo “Las tablas de datos no se comportan bien en un diseño responsive.”

Garrett tiene razon. Las tablas de datos o tablas HTML son elementos bastantes amplios, necesariamente una sola fila de datos debe mantenerse junta para darle sentido a la tabla. Las tablas pueden flexionar sus dimenciones, pero hasta cierta medida hasta que se comienzan a descomponer volviendose incómodas en dispositivos moviles como celulares y tables que no cuentan con una amplia pantalla.

Este comportamiento se relaciona con el ajuste que trata de hacer el navegador para acomodar la tabla a los tamaños de las diferentes pantallas. Entonces, ¿Qué sucede cuando la pantalla es más estrecha que la anchura mínima de una tabla? ¿Como solucionarlo? Usted puede aljear y ver toda la tabla, pero el tamaño de texto será demasiado pequeño para leer o puede acercar hasta el punto de legibilidad, pero no podra realizar una lectura rapida del contenido.

Sigue leyendo

Efecto Hover en Botones y Enlaces

Empecemos diciendo que el efecto Hover de manera general, consiste en la alteración del aspecto grafico de un elemento cuando se sitúa el puntero del mouse sobre este, pero dicho elemento no ha sido seleccionado aún.

Hover como pseudo-clase CSS se presenta cuando el usuario coloca el puntero sobre cualquier elemento HTML. Cualquier regla definida en dicho elemento puede ser sobre escrita.

Sigue leyendo