Foros del Web » Creando para Internet » CSS »

Problema con radial-gradient

Estas en el tema de Problema con radial-gradient en el foro de CSS en Foros del Web. Hola a todos! Querría preguntaros por un problema que tengo....estoy iniciando un nuevo proyecto y no me coge el radial-gradient y no sé por qué. ...
  #1 (permalink)  
Antiguo 10/04/2013, 07:18
Avatar de madman_18  
Fecha de Ingreso: agosto-2010
Mensajes: 792
Antigüedad: 13 años, 8 meses
Puntos: 14
Pregunta Problema con radial-gradient

Hola a todos!

Querría preguntaros por un problema que tengo....estoy iniciando un nuevo proyecto y no me coge el radial-gradient y no sé por qué. Ahora mismo estoy haciendo pruebas con colores a ver si me lo coge y nada.

Tengo el siguiente código:

Código CSS:
Ver original
  1. body{
  2.     background: radial-gradient(circle,#FDFCFE,#000);
  3.     background: -moz-radial-gradient(circle,#FDFCFE,#000);
  4.     background: -webkit-radial-gradient(circle,#FDFCFE,#000);
  5. }

Pero no me está funcionando y la verdad que no veo el fallo :S :S :S

Lo que sí he probado es a ponerselo a un div cualquiera, y sí funciona mientras que al body no hay forma.... alguna idea¿? :S :S :S

Estoy montando el sitio en wordpress, ¿tiene eso algo que ver quizás?
__________________
"Si consigues ser algo más que un hombre, si te entregas a un ideal, te convertes en algo muy diferente"

Última edición por madman_18; 10/04/2013 a las 07:24
  #2 (permalink)  
Antiguo 10/04/2013, 07:29
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 9 meses
Puntos: 2114
Respuesta: Problema con radial-gradient

En principio está bien y funciona.

De todas formas, existe un buen generador de degradados que te da el código CSS compatible con todos los navegadores.
  #3 (permalink)  
Antiguo 10/04/2013, 07:35
Avatar de madman_18  
Fecha de Ingreso: agosto-2010
Mensajes: 792
Antigüedad: 13 años, 8 meses
Puntos: 14
Respuesta: Problema con radial-gradient

Cita:
Iniciado por pzin Ver Mensaje
En principio está bien y funciona.

De todas formas, existe un buen generador de degradados que te da el código CSS compatible con todos los navegadores.
Gracias por el enlace ;)

Yo acabo de probar exactamente el mismo còdigo que me da el sitio que me has pasado y el que yo tengo y nada...no me funciona....y está todo cerrado, el código css en teoría está bien....
__________________
"Si consigues ser algo más que un hombre, si te entregas a un ideal, te convertes en algo muy diferente"
  #4 (permalink)  
Antiguo 10/04/2013, 07:46
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 9 meses
Puntos: 2114
Respuesta: Problema con radial-gradient

¿En qué navegador no funciona?
  #5 (permalink)  
Antiguo 10/04/2013, 07:49
Avatar de madman_18  
Fecha de Ingreso: agosto-2010
Mensajes: 792
Antigüedad: 13 años, 8 meses
Puntos: 14
Respuesta: Problema con radial-gradient

Cita:
Iniciado por pzin Ver Mensaje
¿En qué navegador no funciona?
Pues es extraño porque me pasa en todos.... pongo un background normal y funciona, ahora pongo un radial y nada....

Lo curioso es: tengo exactamente el mismo código en otra página y funciona...lo único que me varía es que una está basada en wordpress y la otra (en la q funciona) no.

¿Eso no debería influenciar no¿?¿?
__________________
"Si consigues ser algo más que un hombre, si te entregas a un ideal, te convertes en algo muy diferente"
  #6 (permalink)  
Antiguo 10/04/2013, 07:52
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 9 meses
Puntos: 2114
Respuesta: Problema con radial-gradient

Pues si obtienes resultados distintos obviamente donde no funciona algo hay mal.

Inspecciona con el elemento con el navegador o firebug, a ver si no hay otra clase interfiriendo, o el elemento no tiene altura, o alguna otra cosa. O si no pasa el enlace si lo tienes subido.
  #7 (permalink)  
Antiguo 10/04/2013, 07:56
Avatar de madman_18  
Fecha de Ingreso: agosto-2010
Mensajes: 792
Antigüedad: 13 años, 8 meses
Puntos: 14
Respuesta: Problema con radial-gradient

Cita:
Iniciado por pzin Ver Mensaje
Pues si obtienes resultados distintos obviamente donde no funciona algo hay mal.

Inspecciona con el elemento con el navegador o firebug, a ver si no hay otra clase interfiriendo, o el elemento no tiene altura, o alguna otra cosa. O si no pasa el enlace si lo tienes subido.
Eso estoy observando ahora mismo, pero es que no tengo nada más, quiero decir sólo tengo el body como contenido...y si le pongo 100% de ancho y alto nada, no se lo traga

Viendolo en firebug, me saca el radial gradient como aceptado (sin fallo ni nada) y me muestra el color pero el body sigue igual...en blanco :S :( .

Os pongo el código a ver: como es formato wordpres os pongo header / index / footer

Header:

Código PHP:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
  3. <head profile="http://gmpg.org/xfn/11">
  4.     <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
  5.     <title>
  6.         <?php if ( is_home() ) { ?><?php bloginfo('name'); ?> | <?php bloginfo('description'); ?><?php } ?>
  7.         <?php if ( is_author() ) { ?><?php bloginfo('name'); ?> | Archivo por autor<?php } ?>
  8.         <?php if ( is_single() ) { ?><?php wp_title(''); ?> | <?php wp_title(''); ?><?php } ?>
  9.         <?php if ( is_page() ) { ?><?php bloginfo('name'); ?> | <?php wp_title(''); ?><?php } ?>
  10.         <?php if ( is_category() ) { ?><?php bloginfo('name'); ?> | Archivo por Categoria | <?php single_cat_title(); ?><?php } ?>
  11.         <?php if ( is_month() ) { ?><?php bloginfo('name'); ?> | Archivo por Mes | <?php the_time('F'); ?><?php } ?>
  12.         <?php if ( is_search() ) { ?><?php bloginfo('name'); ?> | Resultados<?php } ?>
  13.         <?php if (function_exists('is_tag')) { if ( is_tag() ) { ?><?php bloginfo('name'); ?> | Archivo por Tag | <?php  single_tag_title("", true); } } ?>
  14.     </title>
  15.     <?php wp_head(); ?>
  16.     <link href='http://fonts.googleapis.com/css?family=Noto+Sans' rel='stylesheet' type='text/css'/>
  17.     <link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" media="screen" />
  18.     <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
  19.     <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
  20.     <script type="text/javascript">
  21.         $(document).ready(function(){
  22.             $("a.enlazamenu").click(function(){
  23.                 var link = $(this);  
  24.                 var anchor  = link.attr('href');
  25.                 //busco el id..
  26.                 var idBloque = anchor.split("#");
  27.                 var bloque = '#'+idBloque[1];
  28.                
  29.                 $('html, body').stop().animate({  
  30.                     scrollTop: $(bloque).offset().top  
  31.                 }, 1100);  
  32.                
  33.             });
  34.         });
  35.     </script>
  36.   </head>
  37. <body>

- index
Código PHP:
Ver original
  1. <?php get_header();?>
  2. <header id="cabecera">
  3.     <section class="cabecera-intro" id="cabecera-intro">  
  4.         asdfasdfasfads
  5.     </section>
  6. </header>
  7. <?php get_footer(); ?>

- footer
Código PHP:
Ver original
  1. </body>
  2. </html>

Y el css es tal cual este:

Código CSS:
Ver original
  1. /* RESET */
  2. html, body, div, span, applet, object, iframe,
  3. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  4. a, abbr, acronym, address, big, cite, code,
  5. del, dfn, em, font, img, ins, kbd, q, s, samp,
  6. small, strike, strong, sub, sup, tt, var,
  7. dl, dt, dd, ol, ul, li,
  8. fieldset, form, label, legend,
  9. table, caption, tbody, tfoot, thead, tr, th, td {margin: 0;padding: 0;border: 0;outline: 0;font-weight: inherit;font-style: inherit;font-size: 100%;font-family: inherit;vertical-align: baseline;}
  10.  :focus {outline: 0;}
  11. ol{list-style: none;}
  12. a{text-decoration: none;color:#FFF;}
  13.  
  14. body{
  15.     width:100%;height:100%;
  16.     /* IE10 Consumer Preview */
  17. background-image: -ms-radial-gradient(center, circle closest-corner, #FFFFFF 0%, #00A3EF 100%);
  18. /* Mozilla Firefox */
  19. background-image: -moz-radial-gradient(center, circle closest-corner, #FFFFFF 0%, #00A3EF 100%);
  20. /* Opera */
  21. background-image: -o-radial-gradient(center, circle closest-corner, #FFFFFF 0%, #00A3EF 100%);
  22. /* Webkit (Safari/Chrome 10) */
  23. background-image: -webkit-gradient(radial, center center, 0, center center, 506, color-stop(0, #FFFFFF), color-stop(1, #00A3EF));
  24. /* Webkit (Chrome 11+) */
  25. background-image: -webkit-radial-gradient(center, circle closest-corner, #FFFFFF 0%, #00A3EF 100%);
  26. /* W3C Markup, IE10 Release Preview */
  27. background-image: radial-gradient(circle closest-corner at center, #FFFFFF 0%, #00A3EF 100%);  
  28. }
__________________
"Si consigues ser algo más que un hombre, si te entregas a un ideal, te convertes en algo muy diferente"

Última edición por madman_18; 10/04/2013 a las 08:05
  #8 (permalink)  
Antiguo 10/04/2013, 08:12
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 9 meses
Puntos: 2114
Respuesta: Problema con radial-gradient

No pongas código PHP en el foro de CSS, ya que sólo nos interesa el HTML resultante.

¿Comprobaste que la altura de body sea realmente 100% del navegador? ¿Si pones un color de fondo normal lo visualizas bien?

Uhm. Acabo de ver que dijiste que poniéndolo el fondo normal se ve. Yo no veo nada extraño en el código, ¿lo tienes subido para verlo?
  #9 (permalink)  
Antiguo 10/04/2013, 08:14
Avatar de madman_18  
Fecha de Ingreso: agosto-2010
Mensajes: 792
Antigüedad: 13 años, 8 meses
Puntos: 14
Respuesta: Problema con radial-gradient

Cita:
Iniciado por pzin Ver Mensaje
No pongas código PHP en el foro de CSS, ya que sólo nos interesa el HTML resultante.

¿Comprobaste que la altura de body sea realmente 100% del navegador? ¿Si pones un color de fondo normal lo visualizas bien?
Ok perdona ahora editaré el comentario ;)

Pues sí, cuando le pongo un color sólido (background: #000) puedo visualizarlo correctamente, y ocupa toda la página sin problemas

Edito:

No lo siento no lo tengo subido ya que estoy en un server de pruebas interno :S
__________________
"Si consigues ser algo más que un hombre, si te entregas a un ideal, te convertes en algo muy diferente"
  #10 (permalink)  
Antiguo 10/04/2013, 08:20
Avatar de madman_18  
Fecha de Ingreso: agosto-2010
Mensajes: 792
Antigüedad: 13 años, 8 meses
Puntos: 14
Respuesta: Problema con radial-gradient

Pongo una captura de firebug, mostrando que lo acepta sin problemas

http://imageshack.us/photo/my-images...nttulowso.png/
__________________
"Si consigues ser algo más que un hombre, si te entregas a un ideal, te convertes en algo muy diferente"
  #11 (permalink)  
Antiguo 10/04/2013, 09:28
Avatar de madman_18  
Fecha de Ingreso: agosto-2010
Mensajes: 792
Antigüedad: 13 años, 8 meses
Puntos: 14
Respuesta: Problema con radial-gradient

¿Alguna idea de por qué puede ser? :S :S :S
__________________
"Si consigues ser algo más que un hombre, si te entregas a un ideal, te convertes en algo muy diferente"

Etiquetas: Ninguno
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 16:12.