Es increible lo que podemos hacer con el estilo CSS. En este caso os esplicare una variante del tipo 'gradient', en el que podemos utilizar multitud de colores circulares de mayor a menor, dandole un estilo similar al de una diana.
Aqui teneis un ejemplo de lo que os estoy hablando:
¿Queda chulo, no? ¿Y si ahora quiero poner una imagen encima de este fondo multicolor? En este caso, voy a poner un logo de este blog:
Aqui teneis el codigo que he empleado. Si quereis utilizarlo, solo teneis que modificar el nombre de los colores (en ingles, como por ejemplo blue, orange o red). Y añadir una imagen donde esta indicado en rojo.
<center><div id="diana" style="border: 1px solid #ccc; height: 200px; margin-bottom: 30px; width: 500px;"> <div style="left: 10px; position: relative; top: 80px;"> <img border="0" src="AQUI LA URL DE TU IMAGEN" /></div> </div> </center> <style> #diana { background-image: -moz-radial-gradient(red,green,blue,purple,orange); background-image: -webkit-gradient(radial, center center, 0, center center, 220, color-stop(0.20,red),color-stop(0.40,green), color-stop(0.6,blue), color-stop(0.8,purple), color-stop(1,orange)); /* old */ background-image: -webkit-radial-gradient(red,green,blue,purple,orange); /* new syntax */ background-image: radial-gradient(red,green,blue,purple,orange); } </style> |
