20.- Como crear una capa circular con CSS.
CSS ha revolucionado el formato de las páginas Web, algunas cosas que antes solo era posible hacerlas con imágenes, ahora pueden hacerse con un lenguaje de programación.
En este caso, vamos a crear una capa de forma circular sin usar imágenes de ningún tipo. Con las debidas modificaciones de la propiedad “webkit-border-radius” las modificaciones posibles son muchas, y con ellas podemos encontrar formas de capas CSS muy sugerentes. Para ello partiremos de una capa cuadrada a la que le redondearemos los vértices.
La propiedad “webkit-border-radius” con un valor de 180, la mitad de una circunferencia en grados, nos permite dar forma cuadrada a cada uno de los vértices de una capa de manera independiente. Cuando el valor de esta propiedad es 0, tenemos un vertice cuadrado, tal y como estamos acostumbrados. Dado que podemos asignar a cada vertice un valor diferente, las posibilidades que tenemos son muchas.
Solo un pego, no he podido verificar el funcionamiento más allá de Chrome y Opera. La propiedad “moz-border-radius” para Mozilla, parece no surtir efecto alguno.
Sin más, os dejo es código, os resultará muy útil.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="iso-8859-1" />
<title>Capa circular con CSS.</title>
<style type="text/css">
<!--
.circunf{
-moz-border-radius: 20px 40px 60px 80px; /* Para Firefox, pero parece que no funciona */
-webkit-border-radius: 180px 180px 180px 180px; /* sup izq - sup der - inf der - inf izq. PARA Chrome y Opera */
width: 300px;
height: expression(this.scrollHeight < 301? "300px": "auto");
min-height: 300px;
border: 1px solid #CCCCCC;
background-color: #990000;
}
.texto{
display:table-cell;
height: 300px;
vertical-align: middle; /* Otros valores: top - ARRIBA, middle - CENTRO, bottom - ABAJO */
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 1.8em;
color: #FFFFFF;
}
.fra{
font-size: 0.6em;
text-align: center;
}
-->
</style>
</head>
<body>
<div class="circunf">
<div class=texto>
UTERRA.COM Formato en tu Web
<div class=fra>
Se pueden hacer cosas que en tiempos parecín impensables con CSS.
</div>
</div>
</div>
</body>
</html>
