JMiur [E]

CurvyCorners es un script que nos va a permitir utiliar curvas en Internet Explorer y otros navegadores donde la propiedad CSS3 no está disponible.

En principio, todo lo que debemos hacer es descargar el ZIP desde la página de los desarrolladores y allí veremos varios demos y los archivos necesarios que, en realidad, sólo es uno: el script en si mismo, que viene en dos versiones, una minimizada (curvycorners.js) y otra no (curvycorners.src.js) así que, cualquiera de ellas, la subimos a un servidor y la agregamos a nuestra plantilla antes de </head>:
<script type="text/javascript" src="URL_curvycorners.js">
o bien, copiamos su contenido y lo pegamos directamente:
<script type='text/javascript'>
//<![CDATA[
  ... aquí pegamos el contenido del archivo ...
//]]>
</script>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur mi est, cursus sit amet, pellentesque et, ultricies a, ipsum. Nulla facilisi. Sed quis lacus. Aenean ut risus et lectus blandit gravida.


¿Qué más? Nada. Si no queremos opciones, eso es todo, el script se encargará del resto, basta que el CSS tenga las propiedades agregadas con la sintaxis de Chrome:
.redondeado {
  -moz-border-radius:10px;
  -webkit-border-radius: 10px;
}
o bien:
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla ac ante sit amet metus hendrerit euismod. Aenean vestibulum, lectus in eleifend tempor, quam libero iaculis dolor, pellentesque pellentesque lorem nibh ut urna. Nulla rhoncus, ante sit amet tristique interdum, eros nulla nonummy justo, eu dapibus risus quam sit amet metus.


Obviamente, nada es perfecto y esto tiene sus limitaciones:
  • los elementos redondeados por el script no peuden ser redimensionables.
  • si tiene bordes, conviene que sean del mismo ancho
  • no pueden usarse bordes que no sean de estilo sólido
  • no interpreta bordes elípticos
  • las etiquetas IMG no se redondean, deben colocarse dentro de un DIV
Además, siempre se deben usar reglas de estilo con referencias a IDs o clases; por ejemplo:
.redondeado {}
#ejemplo {}
#ejemplo div.redondeado {}
y elemento a redondear es el que debe ser identificado por un ID o clase asi que estos ejemplos no funcionarían:
#ejemplo div {}
div #ejemplo {}
div.redondeado #ejemplo {}

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.


En todos los casos, si hay un error o el script no puede modificar algo, aparecerá una ventana indicando el problema; llegado el caso, eso puede obviarse agregando lo siguiente:
<script type="text/javascript">
  var curvyCornersVerbose = false;
</script>

2 comentarios:

Fran Rodríguez  

Hola J.Miur, hace unos días me descargué el archivo de curvycorners, lo subí a google sites y seguí los pasos en la plantilla que indicas en esta entrada. Funcionó perfectamente. Las esquinas de mi blog se veían redondas también en explorer, pero ahora me he comprado un dominio y los bordes han dejado de verse redondos. Mencionas que se puede aplicar el código a la plantilla directamente sin necesidad de subir el archivo a un servidor, pero no consigo el código que tengo que pegar en la plantilla. ¿Me lo podrías proporcionar?
Gracias.

Responder
JMiur  

Hasta donde sé, Google Sites no permite que los dominios fuera de blogspot usen el servicio para alojar archivos y enlazarlos; los bloquea y seguramente es por eso que ahora no funciona. Simplemente, n ose carga el script así que deberás subir ese y cualquier otro a otro servidor.

Puede ponerse en la plantilla y para eso, basta que uses el block de notas para abrir el archivo curvycorners.js que tienes, copias su contenido y lo pegas como indica esta entrada.

Eso, es válido para este script como para cualquier otro. No hay ninguna necesidad de alojar scripts en servidores externos. Todo puede ponerse en la plantilla sin problemas y sin que signifique una carga extra, por el contrario, será más rápido.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

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 ...

 
CERRAR