Introducción a CSS3

Introducción a CSS3

________________________________

¿Como se divide esta introducción?

°Que es CSS3

°¿Puedo aprender CSS3 sin saber css?

°Repaso rapido de CSS

°CSS para principiantes

_______________________________

°Que es CSS3°

Desde el anuncio en 2005 de las hojas de estilo de nivel 3, mejor conocidas como CSS3, cada día son más los diseñadores y desarrolladores web que utilizan la potencia de CSS3 para maximizar el rendimiento de sus diseños. Para que no te quedes atrás, aquí tienes una guía de introducción a CSS3 para principiantes en la que descubrirás todo lo que debes saber sobreCSS3, como por ejemplo crear sombras, gradientes y esquinas redondeadas. A pesar que CSS3no es todavía un estándar de la W3c, cada día encontramos mayor soporte por parte de los navegadores, por lo que vale la pena utilizar CSS3 para mejorar la experiencia visual de las personas que utilizan navegadores modernos y actualizados. 

_______________________________

°¿Puedo aprender CSS3 sin saber CSS?°

La respuesta es si.Puedes iniciarte en css3 si saber css pero te costara al principio,pero es mejor porque ya vas a tener incorporado conocimientos avanzados.

_______________________________

°Repaso rapido a CSS°

Si conoces CSS sabrás que la hoja de estilo en cascada se puede colocar en el la etiqueta " head" de la estructura HTML con las etiquetas <style></style>,pero tambien para una mejor comodidad en la lectura del codigo HTML se puede insertar desde un archivo externo con extencion ".css" y colocando las etiquetas <link rel="stylesheet" type="text/css" href="style.css"> el Head.

_______________________________

°CSS3 para principiantes°

Prefijos del navegador 

Una de las primeras cosas que veremos es que para especificar las propiedades de CSS3, como norma general hacen falta los vendor prefixes o prefijos del navegador. El motivo es que los navegadores web van implementando las diferentes propiedades de manera gradual, por lo que hay que especificar cada una de las propiedades para los distintos navegadores. 
El principal inconveniente del uso de prefijos del navegador es que nuestro código CSS puede parecer un tanto caótico y que hemos de especificar varias veces los parámetros de una misma propiedad. La ventaja de esto es que podemos dar un toque diferente a la misma página web para que se vea de manera diferenciada en los distintos navegadores. 
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 
Las extensiones más comunes son las basadas en navegadores que utilizan Webkit(por ejemplo, Chrome y Safari), que empiezan con -webkit-, y los navegadores basados en Gecko(por ejemplo, Firefox), que empiezan con -moz-. Opera (-o-) e Internet Explorer (-ms-) tienen sus propias extensiones. 

_______________________________

Propiedades básicas de CSS3 

Esquinas redondeadas con border-radius 

La regla número uno de la Web 2.0 es: si tiene esquinas redondeadas, es moderno. Gracias a la propiedad border-radius de CSS3 ya no hace falta que utilices imágenes ni JavaScript para conseguir esquinas redondeadas. Veamos un ejemplo: 

<div class="rounded">Ejemplo de esquinas redondeadas con CSS3</div>

Para conseguir que las esquinas se vean redondeadas, sólo necesitas este código CSS

div.rounded { 
    background-color: DimGray; 
    line-height: 20px; 
    text-align:center; 
    padding: 20px; 
    border-radius:15px; 
    -moz-border-radius: 15px; 
}

_______________________________

En el caso de border-radius hemos de utilizar también -moz-border-radius para Mozilla. 
Esto lo que hace es que todas las esquinas sean redondeadas. Pero supongamos que no queremos que lo sean todas, entonces aplicamos esta regla: 

4 valores: 
border-radius: ArribaIzquierda ArribaDerecha AbajoDerecha AbajoIzquierda; 

3 valores: 
border-radius: ArribaIzquierda AbajoIzquierda+ArribaDerecha AbajoDerecha; 

2 valores: 
border-radius: ArribaIzquierda+AbajoIzquierda ArribaDerecha+AbajoDerecha; 

1 sólo valor: 
border-radius: Todos; 

En el caso que el navegador no de soporte a la propiedad border-radius, en lugar de verse las esquinas redondeadas se verán esquinas en ángulo recto, al igual que un rectángulo. 
Crear sombras con box-shadow 

_______________________________

La propiedad box-shadow permite a los diseñadores web el implementar fácilmente sombras tanto dentro como fuera de elementos de caja, especificando valores como el color, tamaño, borrosidad (blur) y offset. 

El soporte de los navegadores está aumentando con Mozilla (Firefox), Webkit (Safari y Chrome), Opera e IE9. Aún así, Mozilla y Webkit necesitan todavía sus prefijos -moz- y -webkit- respectivamente (nota: Mozilla Firefox 4.0+ ya no requiere el prefijo -moz-). 

Veamos un ejemplo: 
Firefox, Safari/Chrome, Opera y IE9 muestra una sombra AzulOscuro. 
Código HTML del ejemplo: 

Código CSS: 

div.boxshadow { 
    background-color: silver; 
    -moz-box-shadow: 10px 10px 5px darkblue; 
    -webkit-box-shadow: 10px 10px 5px darkblue; 
    box-shadow: 10px 10px 5px darkblue; 
    text-align: center; 
   width: 600px; 
}

_______________________________

Esto es una muestra de lo que puedes hacer en css3 con varios ejemplos.Esta introducción es la primer entrega del curso de CSS3 par que puedas crear sitios web mas elegantes y profesionales.

Tweet