Las diferentes propiedades en CSS3

Mayo 2017



En este artículo presentaré las nuevas propiedades de CSS3.

Nota: Internet Explorer solo interpreta CSS3 a partir de la versión 9.

Aquí utilizo el prefijo -moz- para Mozilla Firefoz

Los bordes


El W3C permite efectuar nuevas acciones sobre los bordes.

Borde con colores diferentes


La propiedad -moz-border-colors: permite crear varios bordes de colores diferentes.

Esta propiedad puede ser utilizada también como: -moz-borders-top-color: (adición de bordes, top, bottom, left, right)

#midiv {          
border:8px solid #000000;              
-moz-border-colors : #CC0000 #BB0000 #AA0000 #990000 #880000 #770000 #660000 #550000;              
padding: 5px ;              
}              


En imagen:

Imágenes como bordes


CSS3 permite el uso de imágenes como bordes de los elementos de la página
Las dos propiedades:
border-image:
border-top-image
border-right-image
border-bottom-image
border-left-image

border-corner-image:
border-top-left-image
border-top-right-image
border-bottom-left-image
border-bottom-right-image

#mi-div {        
border-image: url(border.png) 27 27 27 27 round round;        
}        


En imagen:


        
#mi_div {        
border-image: url(border.png) 27 27 27 27 stretch stretch;        
}       

Bordes redondeados en las esquinas


La propiedad <gras<border-radius</gras> de CSS3 permite a los desarrolladores web definir bordes redondeados en las esquinas, sin necesidad de imágenes de esquinas ni recurrir al uso de etiquetas div multiples.


#contenedor {       
-moz-border-radius: 15px; /* Prefijo Moz para Mozilla  (no valido W3C)*/       
border-radius: 15px; /* Ningún prefijo para los navegadores que incorporan la propiedad sin prefijo (valido W3C) */       
}        

Crear sombras en CSS3


Una nueva funcionalidad de CSS3 implementada a partir de la versión 3.1 de Firefox, es la posibilidad de crear sombras de colores: esta es la propiedad box-shadow

Esta propiedad requiere de algunos parámetros para definir las características de la sombra:
  • 1. Desplazamiento horizontal de la sombra: un valor positivo significa que la sombra aparece desde la derecha, un desplazamiento negativo hará que la sombra aparezca desde la izquierda.
  • 2. Desplazamiento vertical de la sombra: un valor negativo significa que el box-shadow aparecerá desde arriba, un valor negativo hará aparecer la sombra desde abajo.
  • 3. En cuanto al difuminado, cuanto más cerca de cero esté este valor, la sombra será más definida. En cambio, cuanto más se acerque de 1, la sombra estará más difuminada.


Ejemplos:

.sombra {     
box-shadow: 10px 10px 5px #888;     
padding: 5px 5px 5px 15px;     
}     



.sombra_2 {     
box-shadow: -10px -10px 0px #000000;     
border-radius: 5px;     
padding: 5px 5px 5px 15px;     
}     



Es el equivalente de text-shadow en CSS2 .

Imágenes de fondo de elementos en CSS3

background-clip y background-origin


La propiedad background-origin de CSS3 permite determinar la manera en que la imagen de fondo se posicionará en un elemento.
Esta propiedad toma 3 valores: border-box, padding-box y content-box.


Las implementaciones experimentales tienen como propiedades:
-Webkit-background-origin / -moz-background-origin   
-Webkit-background-clip / -moz-background-clip   


Las implementaciones estables
background-origin   
background-clip   

background-size


CSS3 permite especificar un tamaño a las imágenes de fondo. Este tamaño puede ser especificado en pixeles, (height y width), o en porcentaje. Si se especifica una tamaño en porcentaje, el tamaño es relativo al ancho o altura de la zona a la que se ha atribuido la propiedad background-origin.

Imágenes de fondo multiples en CSS3


Es simple:
background: url(body-top.gif) top left no-repeat, url(banner_fresco.jpg)  top 11px no-repeat, url(body-bottom.gif) bottom left no-repeat, url(body-middle.gif) left repeat-y;   


Nota: estas son propiedades experimentales!

Los colores en CSS3


CSS3 podria ver la introducción de la propiedad HSL (Matiz, Saturacion, Luminosidad).

HSL toma tres valores:

Matiz: corresponde a la tinta: 0 (0 360) es de color rojo, verde vale 120 y, 240 es azul. Los otros valores son matices de colores.

Saturación: La saturación es un valor en porcentaje. 100% es el color exacto.

Luminosidad: La luz es igualmente un porcentaje. 0% es la sombra (negro), y 100% completamente claro (blanco), 50% corresponde al valor medio.

Esto da una amplia gama de posibilidades en cuanto al tono de los colores.

Hasta el momento, HSL ha sido implementado en Opera 9.5, safari 3, Konqueror y Mozilla.

Ejemplo:
#mi_div_hsl {  
background-color: hsl(240,100%, 50%);   
}  


Fuente (Inglés)

Consulta también

Artículo original escrito por . Traducido por Carlos-vialfa. Última actualización: 5 de octubre de 2010 a las 19:57 por Carlos-vialfa.
El documento «Las diferentes propiedades en CSS3» se encuentra disponible bajo una licencia Creative Commons. Puedes copiarlo o modificarlo libremente. No olvides citar a CCM (es.ccm.net) como tu fuente de información.