Glassbox, compacto Javascript para crear bordes transparentes

Publicado por Nikko el dia 27 Feb 2008 - Guardado en Diseño Web, Javascript, Scripts Leido 1,380 Veces

glassbox.jpg

Glassbox compacto Javascript que pretende ser una solución simple para crear bordes transparentes y diseños coloridos. Es fácil de usar, y probado bajo IE 6, Firefox, Opera 2,0 y 9,1. Necesita de Prototype y Script.aculo.us para los efectos.

Enlace Glassbox - Descarga

Demos

Ejemplo Simple: GlassBox
Ejemplo en Lightbox: Lightbox-gone-glass
Uso
Descomprimir GlassBox.zip. Incluir la llamada al script GlassBox desde nuestra cabecera. Dentro de la etiqueta < head >.

JavaScript:
<script src="glassbox/glassbox.js" type="text/javascript"></script>

Recodar también agregar la llamada a prototype y scriptaculous. Se incluye con el paquete Zip.

JavaScript:
<script src="../javascripts/prototype.js" type="text/javascript"></script>
<script src="../javascripts/scriptaculous/effects.js" type="text/javascript"></script>

Crear un nuevo objeto y definir en la 5ta línea (myGlassBox.init) el “id” de inicio (Div donde usaremos GlassBox), anchura, altura y bordes.
En la Línea 6 (myGlassBox.apos), definir posición de la izquierda y de arriba (ver API DOC).

JavaScript:
<script type="text/javascript">
window.onload = function(){
    path_to_root_dir = "../";
    var myBox = new GlassBox();
    myBox.init( 'myBox', '135px', '60px', 'hidden' );
    myBox.apos( '170px', '150px' );
};
</script>

Por ultimo, poner el contenido de tu GlassBox en un div.

HTML:
<div id="myBox">Hello, World!</div>

Gracias Maximiliano

Publicado por Nikko

Soy un diseñador y desarrollador web situado en la Patagonia Argentina. Disfruto testear y conocer nuevos scripts, además de experimentar nuevas técnicas tanto en impresión como en desarrollo web. Como propietario de Patagonia Creative, divido mi tiempo entre la empresa, trabajos para Pymes, ONG y Gob. ////////// Facebook / linkedin / xing

Nikko ha publicado 1142 posts en Xyberneticos - Leer todos mis articulos Nikko

  1. [...] PLAIN TEXT [...]

  2. Nicolás - Gravatar

    Nicolás

    27-02-2008

    Permalink

    Queda perfecto en el Lightbox!

    Gracias

  3. manu - Gravatar

    manu

    27-02-2008

    Permalink

    que interesante, hace tiempo que buscaba la forma de hacer estos bordes en mi blog, pero no sabia como hacer con java. gracias por enseñar y compartir estas cosas que nos ayudan ha mejorar,..
    todo lo que sirva para ayudar y mejorar nuestros sitios hay que compartirlo y enseñarlo a los demás.
    por eso aquí dejo el link de un concurso que acabo de encontrar, en donde podemos "ganar un dominio y hosting profesional gratis", quizás para que te inscribas ;) o lo compartas con todos los que te visitamos

    http://www.bloggea2.com/2008/02/26/gana-un-dominio-y-hosting-profesional-gratis-con-bloggea2/

    yo ya me apunte, je,je,.. a ver si tengo suerte,..

    suerte también a todos, :) chau

  4. [...] Glassbox, compacto Javascript para crear bordes transparentes - Xyberneticos [...]



Nombre: (Necesario)

E-mail: (Necesario)

Website:

Escribe tu comentario: