gallery/banner-html5-css3

CSS funciona sobre tres dimensiones: altura, anchura y profundidad. En las lecciones anteriores hemos examinado las dos primeras dimensiones. En esta lección, aprenderemos cómo hacer que diferentes elementos se conviertan en capas. En pocas palabras, esto hace referencia al orden en que los elementos se superponen unos con respecto a otros.

Para tal propósito, se puede asignar a cada elemento un número por medio de la propiedad z-index. El sistema consiste en que el elemento con un número mayor se superpone al elemento con un número menor.

Supongamos que estamos jugando al poquer y tenemos una escalera de color. La mano se puede presentar de tal manera que cada carta tiene un número asignado por medio de z-index:

 

En este caso, los números son consecutivos (yendo del 1 al 5), aunque se puede lograr el mismo resultado usando cinco numeros diferentes. Lo importante es la secuencia cronológica de los números (el orden).

El código del ejemplo de las cartas quedaría así:


#diez_de_diamantes

{

position: absolute; left: 100px; top: 100px; z-index: 1;

}

#sota_de_diamantes {

position: absolute; left: 115px; top: 115px; z-index: 2; }

#reina_de_diamantes {

position: absolute; left: 130px; top: 130px; z-index: 3; }

#rey_de_diamantes {

position: absolute; left: 145px; top: 145px; z-index: 4; }

#as_de_diamantes {

position: absolute; left: 160px; top: 160px; z-index: 5; }
 

gallery/capas

POSICIONAMIENTO DE LAS CAPAS EN CSS

En este articulo os voy a mostrar como podemos posicionar las capas en CSS y lo voy a explicar todo con ejemplos y paso a paso de la mejor forma posible, ya que es un tema importante y que hay que tener muy claro para poder trabajar bien. Antes de empezar con las propiedades propiamente dichas de posicionamiento os voy a mostrar unas etiquetas CSS que nos servirán para ello y que hay que conocer. Os pongo la lista con una pequeña explicación en cada una:

top : esta propiedad desplaza una capa tomando como referencia el borde superior de dicha capa. Se usa para desplazar la capa hacia arriba y abajo. Puede tener valores en “px” y en “%” y también pueden ser valores positivos y negativos. Si a una capa le ponemos como propiedad “top: 100px” la bajara 100 pixels respecto al lugar que debería ocupar. Si le ponemos como propiedad “top:-100px” entonces la subirá 100 pixels respecto al sitio que debería ocupar. Esta propiedad solo sirve para los posicionamientos de tipo “relative”, “absolute” o “fixed” que explicare mas abajo.
bottom : esta propiedad hace lo mismo que “top” pero en vez de tomar como referencia la parte superior lo hace con la parte inferior.
left: hace lo mismo que “top” y “bottom” pero el punto de referencia es la parte izquierda de la capa.
right : hace lo mismo que “left” pero con respecto a la parte derecha de una capa.

Ahora vamos con la etiqueta “position”. Con ella vamos a definir el tipo de posicionamiento que tendrá una capa. Tiene varios valores posibles que os voy a explicar pero el valor por defecto es “static”. Con el valor “static” las capas se van poniendo una debajo de otra en orden según las hayamos declarado en la parte HTML de la pagina. Para que lo veáis os pongo un ejemplo:

<html>

Bordes

CSS permite modificar el aspecto de cada uno de los cuatro bordes de la caja de un elemento. Para cada borde se puede establecer su anchura o grosor, su color y su estilo, por lo que en total CSS define 20 propiedades relacionadas con los bordes.

Anchura

La anchura de los bordes se controla con las cuatro propiedades siguientes:

Propiedades border-top-width, border-right-width, border-bottom-width,border-left-width
Valores ( unidad de medida | thin | medium | thick ) | inherit
Se aplica a Todos los elementos
Valor inicial Medium
Descripción Establece la anchura de cada uno de los cuatro bordes de los elementos

La anchura de los bordes se indica mediante una medida (en cualquier unidad de medida absoluta o relativa) o mediante las palabras clave thin (borde delgado), medium (borde normal) y thick (borde ancho).

La unidad de medida más habitual para establecer el grosor de los bordes es el píxel, ya que es la que permite un control más preciso sobre el grosor. Las palabras clave apenas se utilizan, ya que el estándar CSS no indica explícitamente el grosor al que equivale cada palabra clave, por lo que pueden producirse diferencias visuales entre navegadores. Así por ejemplo, el grosor medium equivale a 4px en algunas versiones de Internet Explorer y a 3px en el resto de navegadores.

El siguiente ejemplo muestra un elemento con cuatro anchuras diferentes de borde:

gallery/capa


<html>

<head> <style type="text/css"> #capa1

{ width: 50px; height: 50px; background-color: blue; }

#capa2 {

width: 50px; height: 50px; background-color: red; }

#capa3 { width: 50px; height: 50px; background-color: green;

} </style> </head> <body> <div id="capa1"></div> <div id="capa2"></div> <div id="capa3"></div> </body> </html>
 

gallery/posicionamiento-absoluto-css2

IEjemplo de propiedad border-width

Las reglas CSS utilizadas se muestran a continuación:

div {
  border-top-width: 10px;
  border-right-width: 1em;
  border-bottom-width: thick;
  border-left-width: thin; 

}Ejemplo de propiedad border-width

Las reglas CSS utilizadas se muestran a continuación:

div {

border-top-width: 10px;

border-right-width: 1em;

border-bottom-width: thick; border-left-width: thin;

}

gallery/border

Ejemplo de propiedad border-color

Las reglas CSS necesarias para mostrar los colores anteriores son las siguientes:

div {
  border-top-color: #CC0000;
  border-right-color: blue;
  border-bottom-color: #00FF00;
  border-left-color: #CCC;
}
gallery/color

Estilos

El estilo de los bordes sólo se puede indicar mediante alguna de las palabras reservadas definidas por CSS. Como el valor por defecto de esta propiedad es , los elementos no muestran ningún borde visible a menos que se establezca explícitamente un estilo de borde.

Ejemplo de propiedad border-style

Las reglas CSS necesarias para mostrar los estilos anteriores son las siguientes:

div {
  border-top-style: dashed;
  border-right-style: double;
  border-bottom-style: dotted;
  border-left-style: solid; 
}
gallery/estilos

DEGRADADOS EN CSS

Un color que se va degradando progresivamente hasta convertirse en otro es un efecto muy usado para fondos de elementos (o incluso como fondo web) ya que permite conseguir un efecto atractivo. Este efecto antiguamente no era fácil de conseguir y se solía recurrir al uso de imágenes de fondo. Actualmente disponemos de mecanismos que facilitan incluir degradados en páginas web.

gallery/1

Los degradados CSS son de dos tipos: degradados lineales (linear-gradient) o degradados radiales (radial-gradient). En el primer caso la transformación de color va avanzando línea a línea, mientras que en el segundo caso la transformación de color se produce porque sucesivos círculos concéntricos van cambiando de color. Aquí vemos la diferencia entre ambos efectos.

gallery/2

LÍNEA DE GRADIENTE

Un gradiente lineal se define a partir de una línea de gradiente. La imagen se genera creando líneas cuyo color va cambiando, perpendiculares a la línea de gradiente. Aquí vemos la línea de gradiente para distintos degradados:

gallery/3