Fronteras han sido una parte de CSS desde el principio, pero añade algunas CSS3 realmente emocionantes nuevas opciones. Los navegadores modernos soportan ahora las fronteras hechas de una imagen, así como las esquinas redondeadas y sombras caja. Estas técnicas prometen añadir prestaciones nuevas e interesantes a sus diseños.

bordes de la imagen

CSS3 le permite utilizar una imagen de una frontera elemento. El mecanismo es muy potente ya que detecta los bordes de una imagen y “cortes” para crear los bordes y las esquinas de la frontera de los bordes y esquinas de la imagen.

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

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

He aquí cómo se agrega una imagen de la frontera:

1. Adquirir su imagen.

   La imagen ya debe estar diseñado como una especie de frontera. Normalmente será una forma alrededor de los bordes, ya sea con un centro de color sólido o un centro transparente.

2. Especificar el ancho del borde.

   Tendrá que indicar el ancho del borde directamente. El borde de la imagen de trama se escala para ajustarse a cualquier tamaño que desee.

3. Calcular la cantidad de la frontera de la imagen que desea.

   Si deja fuera el signo de porcentaje, el valor se calcula en píxeles. Se pueden añadir cuatro valores si usted prefiere utilizar cantidades diferentes de la imagen original para cada límite.

4. Indicar el comportamiento que desea.

   La imagen original es casi nunca es el mismo tamaño que el elemento que está queriendo rodear, por lo que puede suministrar una punta de explicar cómo el navegador debe manejar los elementos de mayor tamaño que el original. Las opciones más comunes son repetir (Repetir la imagen original) o tramo (Para ocupar todo el espacio). Con una simple imagen como el frame.jpg utilizado en este ejemplo, los resultados serán los mismos.

   

Cómo agregar esquinas redondeadas

CSS más antiguo era conocido por ser muy rectangular, por lo que los diseñadores web trató de suavizar sus diseños mediante la adición de esquinas redondeadas. Este fue un efecto difícil de lograr. CSS3 simplifica en gran medida la creación de esquinas redondeadas con la frontera de radio regla.

Es bastante fácil de conseguir esquinas redondeadas en los navegadores que soportan la etiqueta:

Video: Maquetación CSS con Flexbox

Esquinas redondeadas Demostración

La regla funciona cortando un arco desde cada esquina del elemento. El arco tiene el radio especificado, por lo que para las esquinas agudas, usted querrá un radio pequeño. Se puede medir el radio en cualquiera de las mediciones comunes, pero píxeles (px) y el ancho de los caracteres (EM) es el más comúnmente utilizado.

La frontera no es visible a menos que el elemento tiene el color de fondo o frontera definida. Tenga en cuenta que hay variaciones de cada etiqueta para apoyar 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 apoyan ahora el genérico frontera de radio regla.

Usted puede recoger una serie de los navegadores de la generación anterior utilizando el prefijo específico del proveedor. Si su navegador no entiende el frontera de radio regla, simplemente crear las esquinas cuadrados ordinarios.

Video: Aprende HTML5 y CSS3 - Ejemplo de Maquetación 2 - Video 17

Cómo añadir una sombra cuadro

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

El efecto de caja de sombra no es difícil de lograr, pero normalmente se realiza como parte de una definición de clase para que pueda ser reutilizado en toda la página. He aquí algunos ejemplos de código:

Shadow Box Demostración
Esta caja tiene una sombra

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

1. Definir una clase.

   A menudo, usted desea aplicar los mismos ajustes a una serie de elementos de una página, por lo que el cuadro de la sombra a menudo se combina con otros elementos como color de fondo y frontera en una clase CSS que pueden ser reutilizados en toda la página.

2. Añade el caja-sombra regla.

   Las últimas versiones de navegadores compatibles con el estándar caja-sombra regla, pero es posible que también desee incluir prefijos navegador para acomodar busca más.

3. Especificar el desplazamiento.

   Una sombra es típicamente desplazado del rectángulo al que pertenece. Los dos primeros valores indican el desplazamiento horizontal y vertical. Medir usando cualquiera de las mediciones CSS estándar (normalmente píxeles o EMS).

4. Determinar el efecto borroso y propagación distancias.

   Puede modificar aún más el comportamiento de la sombra mediante la especificación de la rapidez con difumina la sombra y lo lejos que se extienda. Estos son parámetros opcionales.

5. Indicar el color de la sombra.

   Puede hacer que la sombra cualquier color que desee. Negro y gris son comunes, pero se puede conseguir efectos interesantes escoger otros colores.

Muchos otros efectos de sombra son posibles. Puede agregar varias sombras, y también se puede utilizar el recuadro palabra clave para producir una sombra interior para que se vea como parte de la página se corta.