.una-regla { background-image: -moz-linear-gradient(#000,#FFF); background-image: -webkit-linear-gradient(#000,#FFF); background-image: -o-linear-gradient(#000,#FFF); background-image: -ms-linear-gradient(#000,#FFF); background-image: linear-gradient(#000,#FFF); }
.una-regla { background-image: linear-gradient(#000,#FFF); }
¿En que navegadores funcionará? En todos aquellos que usen ese tipo de prefijos, Firefox, Chrome, Safari, Opera, IE9 en adelante y las versiones móviles más comunes. Obviamente, como IE8 no soporta la mayoría de las propiedades CSS3, nada ocurrirá allí pero tampoco tendrá influencia alguna, todo seguirá como antes.
¿Funciona en Blogger? Si, no debería haber problemas ya que el script se ejecuta tanto sobre etiquetas <style> </style>, estilos externos agregados con la etiqueta LINK o incluso, en estilos agregados inline con el atributo style en la misma etiqueta.
¿Cómo lo usamos? Descargamos el script desde la página del desarrollador (es muy pequeño) y lo alojamos en un servidor:
<script src='URL/prefixfree.min.js' type='text/javascript'/>
<script type='text/javascript'> //<![CDATA[ ....... acá pegamos el contenido del archvo js ....... //]]> </script>
Tres ejemplo rápidos:
/* un fondo con gradiente */ #pf1{background-image:linear-gradient(#000,#FFF);} /* una transición */ #pf2{font-size: 0;line-height: 100px;border-radius:0;background-color: #000;transition:all 1s;} #pf2:hover{background-color:#F0F8FF;border-radius:50px;background-color: #F00;font-size: 80px;} /* una animación*/ #pf3{background-color:#000;animation: recrojo 1s infinite alternate;} @keyframes recrojo {from {background-color:#000;} to {background-color:#F00;}}
23 comentarios:
Qué bueno Jmiur
Está muy bueno! lo malo es que no funciona con animaciones ='(
Funciona perfectamente con las propiedades @keyframes y animation, tanto en etiquetas style como en estilos inline.
Hola jmiur, perdona que te moleste por aqui, pero necesito de nuevo tu ayuda. He cambiado la plantilla de mi blog y he borrado las metetags para aparacer en google, también la etiqueta de verificación de google. he visto información por la web, pero cada uno dice algo diferente. ¿Me puedes decir cómo poner de nuevo estos contenidos?. Muchas gracias
¿La etiqueta de verificación de qué servicio? Sea el que sea (Goolgle Anaytics, Google Webmaster Tools, Bing, etc), bastaría que entraras en tu cuenta y volvieras a copiar y pegar el código que ellos te dan.
En el caso de Google Analytics puedes usar la Configuración de Blogger, Otros, en el último item colovas el ID de tu cuenta y se agrega automáticamente.
¿Que otra etiqueta META falta?
Me refería a la verificación de google webmaster. En la cuenta ya me lo dan por verificado y no me vuelven a dar el código. He optado por borrar el sitio añadido y añadirlo de nuevo, pero cuando lo hago ya me lo dan por verificado.
Lo otro que me falta son las "metas" para aparecer en buscadores como google. Miles de gracias.
SI dice que está verificado no hace falta nada más. Si usas Google Aalytics, ambos datos se complementan.
Justamente, pregunto cuáles son esas meta que dices que te faltan o dime cuál es el blog para ver cuáles hay.
Un método es el que muestra esta entrada.
Ok. Creo que me estoy liando y no consigo explicarme. Sólo pretendo que mi blog aparezca en Google.
El blog es www.descubre-bollullosdelcondado.com
Gracias
Excelente, es un verdadero cacho estar escribiendo las propiedades lol
Se agradece, Saludos!
Hola: De nuevo molestándote.Me encanta estos ejemplos y me gustaría poner uno.He descargado y pegado el script. Pero el ejemplo no sé dónde y como debe ponerse (Lo intenté y no lo consigo).Quería añadirlo a los títulos de mi página "Un respiro"Si no es molestia puedes mirarlo y me indicas.Gracias
No sé cuál es la página a la que te refieres; coloca la url para guiarme.
En cuanto al ejemplo, dime cuál es.
Esto lo ke se necesitaba para no escribir tanto codigo
Hola: De acuerdo
http://localizarecursos.blogspot.com.es/p/blog-page_9739.html
Los ejemplos me encantan los tres,aunque tal vez el primero será el que ponga.
Si los títulos son esos que están en en la entrada, ADICCIONES:, APOYOS, etc; deberías cambiar la forma de escribirlos; simplificarlos o usar una clase.
También se lo puedes agregar a la etiqueta SPAN de cada uno de ellos:
<span style="color: red; font-family: Verdana, sans-serif;background-image: linear-gradient(#000, #FFF);">
<b> ADICCIONES:</b>
</span>
Convendria usar una etiqueta h4 h5 o h6 y definir la regla de estilo una sola vez.
JMiur: Muchísimas gracias eres muy amable.
Si vienes por España,concretamente a Asturias tienes pagadas unas botellucas de sidra.Aunque estamos en crisis para tí hay sidra.
Un saludo
Gracias, lo tendré en cuenta
Esto está muy bien. Práctico como ninguno. Yo acaba de encontrar sitios que te convertían códigos CSS de esa manera pero evidentemente es mejor que un sistema automático lo haga. Además supongo que lo irán actualizando para futuras propiedades.
Lo dicho, útil, muy útil.
Sí, claro, es mejor que se haga de modo automático y olvidarse del asunto; sin duda. además, funciona bastante bien.
Esto es excelente.
No veo la hora de probarlo en mi blog.
No sólo eso, esto sí que hace honor a "vagabundía".
Promete ahorrarme mucho trabajo y concentrarme en lo que uno realmente quiere hacer sin preocuparse tanto por cada navegador que habita este gran mundo.
no lo he podio hacer funcionar en localhost con xampp
No veo problema alguno. Es JavaScript así que no tiene que haber inconvenientes.
ayuda ..! como lo hago funcionar en mi localhost..
lo llamo en mi archivo y no jala que pasaraa=?
gracias..
Es imposible responderte sobre eso ya que no hay manera de chequear nada.
¿Quiere dejar un comentario?
recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...
Nota: sólo los miembros de este blog pueden publicar comentarios.
Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.
Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...