Small Pirate

Como veran muchas paginas tiene un background muy personalizado como tuenti por ejemplo tiene ese efecto claro al centro y mas oscuro a los bordes bueno hoy les enseñare como hacerlo si por acaso no lo saben.

Este es mi ejemplo:



para esto utilizaremos el css editando el body{} quitandole el background que contenga y agregandole esto:


   background:url('images/noise.KmQE111qYh.png') repeat left top #f1f0e5;
   background:url('images/noise.KmQE111qYh.png') repeat left top,-moz-radial-gradient(center,circle cover,#6e90bc 0%,#426990 100%);
   background:url('images/noise.KmQE111qYh.png') repeat left top,-webkit-radial-gradient(center,circle cover,#6e90bc 0%,#426990 100%);
   background:url('images/noise.KmQE111qYh.png') repeat left top,radial-gradient(center,circle cover,#6e90bc 0%,#426990 100%);


esta imagen la guardan en images del theme:



nos quedaria asi:




ahora bien si nos fijamos en el codigo css que agregamos estan 3 lineas que componen hacks para firefox chrome etc esos tienen codigos de colores asi:


#6e90bc y #426990


el primero es el que da el color del centro y el segundo el de los bordes, por lo cual el segundo se mantiene al 100% y el primero en 0% para darle un efecto matiz de lo contrario solo apareceria el primer color, y si s epondrian los dos al 50% quedaria asi un obalo:


   background:url('images/noise.KmQE111qYh.png') repeat left top #f1f0e5;
   background:url('images/noise.KmQE111qYh.png') repeat left top,-moz-radial-gradient(center,circle cover,#6e90bc 50%,#426990 50%);
   background:url('images/noise.KmQE111qYh.png') repeat left top,-webkit-radial-gradient(center,circle cover,#6e90bc 50%,#426990 50%);
   background:url('images/noise.KmQE111qYh.png') repeat left top,radial-gradient(center,circle cover,#6e90bc 50%,#426990 100%);


se mostaria un obalo incorrectamente asi:


por lo que el primer color debe quedar en 0% y el segundo en 100% en caso de quererlo asi de lo contrario se pueden cambiar los valores para probar nuevos diseños.

Saludos,

Mr.Freack.-

Gracias por el tuto , este aporte si se merece un +1! no como los posteos de iconos xd

Muy buen tutorial,muy merecido +1,encima tapa los cuadraditos al poner color  ¿puedes hacer un tutorial para el header,maincontainer y pie? porque con este se ve raro eso,que "sobresalte" del fondo,como hacen las demas imagenes

Excelente freack se te agradece :P +1

Cita de: Nuthers en Febrero 13, 2012, 08:46:39 pm

Muy buen tutorial,muy merecido +1,encima tapa los cuadraditos al poner color  ¿puedes hacer un tutorial para el header,maincontainer y pie? porque con este se ve raro eso,que "sobresalte" del fondo,como hacen las demas imagenes

jaja no entenid explicame y pongo un tuto

Cita de: santyyx en Febrero 13, 2012, 09:24:34 pm

Genial freack, gran aporte +1

Saludos!

Cita de: lPc_lF4lN_Sp1r4t3r0 en Febrero 14, 2012, 10:25:08 pm

Excelente freack se te agradece :P +1

Pidan tutos y si puedo los pongo

Lo que simula este tutorial es tener una imagen de fondo,pero con css,lo que quiero yo es que el color se vea como si fuera una imagen normal,como por ejemplo el maincontainerbg que dejo adjunto,nada mas que quiero que se pueda hacer con una imagen transpea que estaarente(como esta) pero que se sobresalta,por decirlo de una manera(fijate la diferencia entre la imagen adjunta y este tuto,en la adjunta se nota que esta delante del fondo,pero,si pongo tu imagen,parece parte del fondo,pero escrito

tu lo que quieres es un tipo degradado en el header?? sin ponerle imagen

algo asi:

Sí así es, puedes crearlo al tutorial?