CSS3 Segunda Parte

Continuacion de Lo Nuevo del CSS3

.:Programacion Web:.

Sombras en CSS3 {box-shadow}

Lo que nos permite hace esta propiedad es agregarle al contenedor una sombra. Se puede no colocar o colocar una o mas sombras en donde cada una se compondria de [longitud (2,4) && color?] && inset.

Los valores que puede tener las longitudes van desde 2 a 4 valores lo que significa:

• El valor inicial sera para la separacion horizontal de la sombra, los valores ques on positivos dibujaran una sombra con separacion por el borde derecho de la caja una negativas sera por el borde contrario, si colocar cero entonces la sombra coincidiria con la misma caja.

• El segundo valor se considera para la separacion vertical, comenzando la separacion desde abajo para los valores positivos y de arriba para los valores negativos y de nuevo si el valor es cero concide con la caja.

• El tercer valor es para darle un radio del difuminado, aca no se permite ningun valor negativo, y si el valor fuese cero no habria difuminado.

• El cuarto y ultimo valor es para la propagacion del difuminado, los valores que son positivos haran una propagacion del difuminado en todas las direcciones, mientras que los valores que son negativos lo contraen

la propiedad del color es una propiedad opcional y si no se le colocara entonces el navegador lo elegiria, es muy probable que lo eliga de la propiedad {color} establecida para algun elemento.

Si se colocara la palabra inset entonces se dibujaria la sombra en el interior de la caja.

Ejemplo:

 <div id="ejemplo-box-shadow" style="-webkit-box-shadow: 20px 15px 10px 5px rgba(0,0,255,0.5); 
background-color: red; 
border: black solid 1px; 
box-shadow: 20px 15px 10px 5px rgba(0,0,255,0.5); 
height: 75px; 
width: 200px;"></div>

Hay que tener en cuenta que se le puede hacer a la caja los bordes redondeados con solo agregarle la propiedad {border-radius} antes comentada.
Compatibilidad con Firefox, Opera, Google Chrome, con Safari para que funcione necesita -webkit-


Colores

Comenzaremos diciendo que los que hemos trabajado con el CSS conocemos que normalmente se utiliza para darle color a los elementos la propiedad RGB ( que no es otra cosa que los valores que se le coloca a los colores rojo, verde y azul, para que nos de otra gama de colores), y que lo normal es que se coloquen los colores en valores hexadecimales esto quiere decir por ejemplo para el color blanco sera #FFFFFF y en valor de RGB sera (255,255,255), con el CSS2 se podia usar cualquiera de estas dos formas, hoy con el CSS3 tambien se le puede agregar un cuarto valor que seria el de opacidad, entonces esta seria RGBA siendo A el alfa el cual vas de 0 a 1 siendo 1 totalmente opaco y 0 totalmente transparente.


Ejemplo

Color Normal

div { 
   background: rgb(0, 0, 0); 
   width: 50px;
   height: 50px;
}

Resultado un cuadrado negro

Color con Transparencia

div { 
   background:  rgba(0, 0, 0, 0.5); 
   width: 50px;
   height: 50px;
}

El Resultado final sera un cuadrado con 50% de transparencia:

Lo nuevo del CSS3

LO NUEVO DEL CSS3

.:ProgramaciónWeb:.

Todo desarrollador web, utiliza el CSS que es una tecnología desarrollada por el World Wide Web Consortium de siglas W3C la cual combinada con lenguajes de estructura tales como HTML, XHTML o XML, brindan a los navegadores la posibilidad de presentar la información de diferentes formas con lo cual se puede dar diferentes diseños a esta.

CSS es compuesta de diferentes tipos de selectores los cuales al aplicarlos a elementos estructurales de la programación nos permite darle diferentes estilos visuales tales como bordes, sombreados, imágenes de fondo, colores, etc.

Pero la realidad es que lo que para nosotros que somos desarrolladores y programadores lo que nos interesa saber es cuales son la novedades de este CSS3 y obviamente cual es la compatibilidad con los navegadores más comunes como Firefox, Safari, Goggle Chrome y nuestro “Gran Amigo” Internet Explorer.

Empecemos con la compatibilidad en los diferentes navegadores, cabe señalar que el CSS3 está en fase de desarrollo hay algunos selectores que todavía no pueden ser usados en los diferentes navegadores.

En lo referente a Firefox por la misma cantidad de usuarios que maneja se sabe que desde su versión 3.1 ya se da soporte a una amplia gama de funcionalidades que nos brinda el CSS3, el Goggle Chrome más o menos brinda el mismo soporte, en cuanto a funcionalidad se refiere, Safari en particular nos da un extenso soporte a las nuevas funciones del CSS3, hay que tener en cuenta que desde el lanzamiento de estos navegadores los usuarios de Windows han estado reemplazando al Internet Explorer por alguno de estos antes mencionados.

En el caso particular del Internet Explorer ya se tiene conocimiento que no se pueden usar todas las nuevas funciones, aunque se dice que el nuevo Internet Explorer  10 ya brindara soporte a CSS3, pero habrá que seguir esperando, en particular yo no recomiendo ya utilizar el Internet Explorer aunque si todavía aun así quieren seguir utilizándolo existen algunos parches para poder simular algunos de los efectos. En el caso del resto de personas a los que nos ayuda poder implementar estas nuevas funciones lo que podemos hacer es crear un código alterno para que de todas maneras la página web se pueda mostrar en el Internet Explorer.

Problemas aun con CSS

Uno de los mayores problemas que se tiene es que más del 50% de usuarios sigue utilizando como navegador al Internet Explorer .

Lo otro es que el nuevo CSS3 está todavía en fase de desarrollo eso quiere decir que hay código que está en proceso de experimentación y para cada uno de los navegadores todavía se utiliza de diferente forma por ejemplo en el caso de si se le quiere agregar un borde de color para Mozilla seria -moz-border-color, para Chrome seria -webkit-border-color, etc. Esto traería como consecuencia como antes se mencionó que para cada uno de los navegadores se deberá colocar un código para cumplir la misma función con lo cual se tendrá un exceso de código CSS.

Siempre trata de no utilizar 100% de código CSS, lo que debes hacer es ir adaptando los diferentes selectores que te brinda la programación para que estos se han vistos de igual forma en los diferentes navegadores y no tengas que codificar en exceso solo para poder dar un efecto.

Ahora para lo que se creó este tema en el Blog los nuevos selectores que nos brinda el CSS3

Lo primero con lo que vamos a empezar es con el link de la página de CSS3 la que nos proporcionara los estatus actuales donde usted podrá ver cómo es que cada uno de los módulos esta, si ya se terminó, si está en fase de prueba, si está estable, etc.; el enlace es www.w3.org/style/CSS/current-work.
Estos son algunos de los módulos:

• Modelo de Cajas
• Background y Bordes
• Colores
• Tipografía y efectos de textos
• Layout Multicolumna
• Animaciones y Transiciones

Ahora iremos adentrándonos en cada uno de los módulos en una vista general

Backgrounds y Bordes

• Fondos en CSS3 { background }
• Bordes en CSS3 {border}, {border-radius}, {border-image}
• Sombras en CSS3 {box-shadow}
• Salto de la decoración de caja {box-decoration-break}

Estas son las nuevas propiedades de CSS3

La propiedad Border CSS3

CSS3 {border-radius} Esquinas con bordes redondeados.

CSS3 {border-image} Son bordes con imágenes, todavía no tiene un soporte en los navegadores completo, las propiedades parciales son:

                CSS3 {border-image-source} Archivo del borde de la imagen

                CSS3 {border-image-slice} Recorte del borde de la imagen.

                CSS3 {border-image-width} Grosor del borde de la imagen.

                CSS3 {border-image-outset} Extensión del borde de la imagen.

   CSS3 {border-image-repeat} Repetición del borde de la imagen.

Esquinas redondeadas {border-radius}

Esta es una nueva propiedad del CSS3 con la cual podemos poner esquinas redondeadas en los bordes. {border radius} es una propiedad resumida del {border x radius} donde la x puede ser top, bottom, left o right radius, esto quiere decir que se declara cada esquina por separado.

Ejemplo 1:

<div style="background-color: red;
    border-top-left-radius: 1em;
    border-top-right-radius: 1em;
    border: red solid 1px; color: white; float: left;
    font: bold 1.2em 'Lucida Sans';
    padding: 0.5em;
    text-align: center;
    width: 10em;">
   BORDER-RADIUS
</div>

Ejemplo 2:

<div style="border-radius: 20px; border: solid 1px;
   margin-left: 15em;
   padding: 0.5em;
   text-align: center;
   width: 10em;">
   BORDER-RADIUS
</div>

BORDER-RADIUS

BORDER-RADIUS

Bordes con imágenes CSS3

    {border-image-source} : Es una imagen que se sube para colocarlo en el borde

    {border-image-slice}: Es un recorte de la imagen para poder formar la matriz    lateral y esquinas. En Firefox y otros navegadores es necesario un valor.

    {border-image-width}: Se puede añadir junto al recorte (slice) una / y luego introducir un ancho de borde de imagen.

    {border-image-repeat}: Opcionalmente se puede colocar una repetición del mosacio de imágenes en la lateral. El valor inicial es stretch. Los navegadores no admiten el valor space.

Es gracioso como la tecnología va cambiando y haciéndonos la vida más fácil, me acuerdo que hace unos años atrás cuando se quería trabajar con bordes redondeados uno tenía que primero colocar 4 imágenes (borde superior izquierdo, borde superior derecho, borde inferior izquierdo, borde inferior derecho y los bordes laterales y superior). Con la finalidad de facilitar la carga de las imágenes, tanto los bordes superior, inferior y laterales se creaban con un ancho de 1 px, toda vez que estas imágenes se repetían.

              

  

Asimismo, como se puede apreciar las esquinas y los bordes llevaban el color de fondo igual que el de la pagina, ya que la gran mayoría de usuarios hacia uso de Internet Explorer 6, el cual no manejaba transparencias de archivos png. En algunas ocasiones para superar este inconveniente, se hacia uso de scripts de java para manejar transparencias en el referido navegador.

Aquí se muestra el resultado final

Otro ejemplo

Aqui se muestra una imagen que llamaremos border.png

 

#round

{

             -moz-border-image:url("border.png") 30 30 round; /* Firefox */

             -webkit-border-image:url("border.png") 30 30 round; /* Safari */

             -o-border-image:url("border.png") 30 30 round; /* Opera */

               border-image:url("border.png") 30 30 round;

}

#stretch

{

            -moz-border-image:url("border.png") 30 30 stretch; /* Firefox */

            -webkit-border-image:url("border.png") 30 30 stretch; /* Safari */

            -o-border-image:url("border.png") 30 30 stretch; /* Opera */

              border-image:url("border.png") 30 30 stretch;

}

 

Archivo borde de imagen {border-image-source}

Se debera utilizar una url la cual hara referencia a un archivo de imagen el cual podra ser utilizado en el borde en lugar del estilo simple dado anteriormente.

Las propiedades de {border-image} no estan implementads del todo en los navegadores, por lo que se recomienda utilizar para cada uno de los navegadores sus respectivas propiedades.

Esto quiere decir que debera ser de esta forma:

• -moz-border-image para Firefox
• -webkit-border-image para Safari y Chrome
• -o-border-image para Opera