Introducción CSS3 Los Bordes


  • CSS3 es completamente compatible con anteriores versiones de CSS. Usted si ha diseñado anteriormente con este lenguaje no deberá cambiar absolutamente nada de sus anteriores diseños con esta nueva versión.
CSS3 ha sido “cortado” en módulos estos contienen las viejas especificaciones para CSS, han sido divididas y nuevos módulos han sido añadidos.


Los módulos más importantes son:
  • Selectores.
  • Fondos y Bordes.
  • Modelos para Cajas.
  • Valores de una imagen y Contenido que se Reemplaza.
  • Efectos para Texto
  • Transformaciones en 2D y en 3D
  • Animaciones
Y muchos más


Consejos CSS3
Las recomendaciones y los informes de CSS3 que actualmente se encuentra todavía en desarrollo por la W3C (World Wide Web Consortium). Aunque está en desarrollo sus principales características ya funcionan en los navegadores más populares.


Los Bordes CSS3

Qué tipo de bordes puedo crear usando CSS3:

  • Bordes redondeados.
  • Bordes de tipo caja con sombras.
  • Usar una imagen como borde. Sin la necesidad de programas de terceros como Photoshop.


Propiedades más famosas para aplicar a los bordes:

  • border-radius: Permite aplicar bordes redondeados.
  • box-shadow: Permite crear cajas con sombras.
  • border-image: Aplicar a nuestro elemento un borde de tipo imagen.
Estas 3 propiedades funcionan en los navegadores tanto: Mozilla Firefox, Google Chrome, Safari y Opera. En Internet Explorer 9 no es compatible no es posible dar a un elemento un borde de tipo imagen.  


Crear bordes redondeados con CSS3


Antes crear bordes redondeados con CSS2 era un dolor de cabeza había que crear las imágenes para los 4 bordes lo cual hacía muy pesado el flujo de trabajo y este requería de mucho trabajo con programas editores de imágenes.


Ahora la W3C y sus colaboradores entre ellos Apple nos lo han simplificado.

Ejemplo de Código para crear bordes redondeados

<!DOCTYPE html>
<html>
<head>
<style>
div
{
border:6px solid #a0a0a0;
padding:10px 40px;
background:#dddddd;
width:300px;
border-radius:40px;
}
</style>
</head>
<body>


<div>Ejemplo de la propiedad border-radius y de elementos con bordes redondos</div>


</body>
</html>

Sombras a las cajas CSS3 box-shadow

Esta propiedad CSS3 le permitirá añadir sombras lo que dan un efecto en las páginas como sui hubiera luces y trabajáramos con elementos de 3 dimensiones que generan sombras al contacto con una luz virtual.


<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:200px;
height:100px;
background-color:red;
box-shadow: 10px 10px 5px #888888;
border-radius:20px;
padding: 2px 2px 2px 2px;
}
</style>
</head>
<body>


<div><p>Caja con color de fondo</p></div>


</body>
</html>



Introducción CSS3 Los Bordes Reviewed by Pablo Arturo on 10/21/2013 Rating: 5

No hay comentarios:

All Rights Reserved by Libusvideo © 2014 - 2015
Powered By Blogger, Diseñado por byros

Formulario de contacto

Nombre

Correo electrónico *

Mensaje *

Con la tecnología de Blogger.