Nuevas técnicas de borde CSS3 - dummies

Los bordes han sido parte de CSS desde el principio, pero CSS3 agrega algunas nuevas opciones realmente emocionantes. Los navegadores modernos ahora admiten bordes hechos de una imagen, así como esquinas redondeadas y sombras de caja. Estas técnicas prometen agregar nuevas capacidades emocionantes a sus diseños.

Bordes de imagen

CSS3 le permite usar una imagen para un borde de elemento. El mecanismo es bastante potente porque detecta los bordes de una imagen y la "corta" para crear los bordes y las esquinas del borde desde los bordes y las esquinas de la imagen.

La imagen de marco se almacena como marco. png en el mismo directorio que el archivo HTML. Tiene un centro transparente. Aplique el siguiente código para agregar un borde de imagen alrededor de todos los elementos en la página:

h2 {border-width: 15px; border-image: url ("frame. png") 25% de repetición; -webkit-border-image: url ("frame. png") 25% de repetición; -moz-border-image: url ("frame.png") 25% repeat;}

Así es como se agrega una imagen de borde:

1. Adquiera su imagen.

   La imagen ya debería estar diseñada como un tipo de borde. Típicamente será una forma alrededor de los bordes, con un centro de color sólido o un centro transparente.

2. Especifique el ancho del borde.

   Deberá indicar el ancho del borde directamente. El borde de la imagen de marco se escala para adaptarse al tamaño que desee.

3. Calcula la cantidad de borde de la imagen que deseas.

   Si deja fuera el signo de porcentaje, el valor se calcula en píxeles. Puede agregar cuatro valores si prefiere usar diferentes cantidades de la imagen original para cada límite.

4. Indique el comportamiento que desea.

   La imagen original casi nunca tiene el mismo tamaño que el elemento que desea rodear, por lo que puede proporcionar un consejo para explicar cómo el navegador debe manejar elementos más grandes que el original. Las opciones más comunes son repetir (repetir la imagen original) o estirar (para ocupar todo el espacio). Con una imagen simple como el marco. png utilizado en este ejemplo, los resultados serán los mismos.

   

Cómo agregar esquinas redondeadas

El CSS antiguo era conocido por ser muy rectangular, por lo que los diseñadores web intentaron suavizar sus diseños agregando esquinas redondeadas. Este fue un efecto difícil de lograr. CSS3 simplifica enormemente la creación de esquinas redondeadas con la regla de radio de borde.

Es bastante fácil obtener esquinas redondeadas en los navegadores compatibles con la etiqueta:

esquinas. html h1 {ancho: 60%; color de fondo: # 000066; color: # 9999ff; borde: # 9999ff 3px surco; margen: automático; text-align: center; radio del borde:. 5em;}

Round Corners Demo

La regla funciona cortando un arco desde cada esquina del elemento.El arco tiene el radio especificado, por lo que para las esquinas agudas, querrá un radio pequeño. Puede medir el radio en cualquiera de las mediciones comunes, pero los píxeles (px) y el ancho del carácter (em) son los más utilizados.

El borde no es visible a menos que el elemento tenga el color de fondo o el borde definido. Tenga en cuenta que hay variaciones de cada etiqueta para admitir esquinas específicas. Esto puede ser útil si no desea aplicar el mismo radio a las cuatro esquinas de su elemento. Los navegadores más recientes ahora admiten la regla genérica border-radius.

Puede seleccionar varios navegadores de la generación anterior mediante el uso del prefijo específico del proveedor. Si su navegador no comprende la regla del radio del borde, simplemente creará las esquinas cuadradas ordinarias.

Cómo agregar una sombra de caja

Las sombras de caja a menudo se agregan a los elementos para crear la ilusión de profundidad.

El efecto de sombreado de caja no es difícil de conseguir, pero normalmente se realiza como parte de una definición de clase, por lo que se puede reutilizar en toda la página. Aquí hay un código de muestra:

boxShadow. html. shadow {box-shadow: 10px 10px 10px # 000000; altura: 200px; ancho: 200px; relleno: 1em; borde: 1px negro sólido; radio del borde: 5px; background-color: #EEEEEE;}

Box Shadow Demo
Este cuadro tiene una sombra

Agregar una sombra de cuadro es mucho más fácil en CSS3 de lo que era. Estos son los pasos:

1. Definir una clase.

   Con frecuencia querrá aplicar la misma configuración a varios elementos en una página, por lo que la sombra del cuadro a menudo se combina con otros elementos como color de fondo y borde en una clase de CSS que puede reutilizarse en toda la página.

2. Agregue la regla de sombreado de caja.

   Los últimos navegadores son compatibles con la regla de sombra de cuadro estándar, pero es posible que también desee incluir prefijos de navegador para acomodar navegaciones más antiguas.

3. Especifique el desplazamiento.

   Una sombra normalmente se compensa con el rectángulo al que pertenece. Los primeros dos valores indican el desplazamiento horizontal y vertical. Mida usando cualquiera de las medidas estándar de CSS (normalmente píxeles o ems).

4. Determine el desenfoque y las distancias de dispersión.

   Puede modificar aún más el comportamiento de la sombra especificando qué tan rápido se difumina la sombra y qué tan lejos se propaga. Estos son parámetros opcionales.

5. Indique el color de sombra.

   Puedes hacer que la sombra tenga el color que desees. El negro y el gris son comunes, pero puedes obtener efectos interesantes eligiendo otros colores.

Muchos otros efectos de sombras son posibles. Puede agregar varias sombras y también puede usar la palabra clave insertada para producir una sombra interior para que parezca que parte de la página está cortada.