Etiquetas

Border-radius,Shadow CSS3.Ejemplo practico.



Border-radius.






Sin necesidad de imágenes con css3 y html5  podemos directamente aplicar flexibilidad a nuestros cuadros  con el estilo dentro del <head > y el contenido dentro de un div .  Colocare un ejemplo .




<html>
<head>
<style type="text/css">
div{
border:1px solid blue;
padding 5px 5px;
background:#990000;
width:400px;
border-radius:10px 5px;
-moz-border-radius:10px;

}
</style></head>
<body>
<div>Cuadro redondo <br>
Cuadro redondo <br>Cuadro redondo <br>Cuadro redondo <br></div>

</body>



</html>


Con una anchura (width:400px;) y un color (background:#990000;) aplique uno borde azul  (border:1px solid blue;) con padding (padding 5px 5px;) conseguí la compatibilidad con mozilla (-moz-border-radius:10px;).

donde el borde redondeado dependerá de(  border-radius:10px 5px;)
10px para la esquina superior izquierda   e  inferior derecha.
5px para la  esquina  superior derecha e inferior izquierda .

Shadow.

Sombras para nuestras imágenes es un  recurso importante que nos deja el css3  con una sola linea de código.


<html>

<head><style type="text/css">
div{
       width:200px;
        height:200px;
background-color:red;
box-shadow:10px 05px 15px #000000;
}

</style>
</head>
<body><div><div></body>
</html>



donde  box-shadow:10px 05px 15px #000000;

10px representan la distancia en x.
05px representan la distancia en y.
15px  cantidad  de desenfoque de la sombra .


Es todo   saludo.



Etiquetas:

Comentarios

Publicar un comentario