Este es un tip muy útil, a la hora de diseñar, cada vez utilizamos mas los “pop up divs” y no tanto los Pop up Windows.
Cuando vamos a crear un div, absoluto o fixeado, por lo general utilizamos para centrar “top” y “left” en porcentaje o en pixeles. Pero en algunas pantallas, chicas o grandes, no nos va a quedar como mas nos gustaría, y eso influye negativamente en la experiencia del usuario.
Con esta solución, se acaba el problema.
Acá les dejo la funcion en jQuery que vamos a utilizar.
jQuery.fn.center = function () {
this.css("position","absolute");
//this.css("position","fixed"); Tambien podemos usar FIXED si queremos que al scrollear se quede fijo.
this.css("top", (($(window).height() - this.outerHeight()) / 2) + $(window).scrollTop() + "px");
this.css("left", (($(window).width() - this.outerWidth()) / 2) + $(window).scrollLeft() + "px");
return this;
}
Una vez que escribimos la función, lo aplicamos en nuestro div.
Muchas veces nos pasa que al testear en Safari o Chrome, nos encontramos con que los forms al posicionarte sobre ellos, muestran un bordeado tipo sombra celeste, algunas veces, está bueno, pero en otras, queremos un diseño mas simple.
Aca te dejo un simple TIP para solucionar ese problema.
Muchas veces los bloggers para darle valor a sus contenidos utilizan videos complementando la nota que escriben.
Encontramos una solución muy práctica para todos los generadores de contenido. Vidiofy ofrece con un minimo script incrustado al final de la página, un sistema de relacionar videos y además compartirlos y comentarlos con varias redes sociales.
Les voy a dejar un buen tip que lo usamos en DreamDesigners, para varios proyectos.
Como animar un div mediante una acción con el mouse (mouse over) que en la sintaxis de css sería :hover
La idea será realizar un tooltip hecho 100% con las transiciones de CSS3 sin necesidad de utilizar Javascript o JQuery.
Antes que nada, tenemos que saber que los nuevos browsers ya soportan css3, aunque muchos todavía no de forma nativa, por lo tanto debemos utilizar a la hora de “animar” ciertos prefijos en el código del style.
Bueno, este es un ejemplo muy sencillo y muy útil. 100% para CSS3.
Imaginen que queremos hacer un fondo en Degrade y ademas. pretendan que todos los browsers lo interpreten… bueno, para eso vamos a tener que esperar un poquito, pero aca les dejo una manera muy sencilla de lograr un degrade sin necesidad de utilizar imagenes. Este código fue pensado para Webkit y para Mozilla. Proximamente será un standard.
Como sabrán, hace un tiempo los mejores browsers (firefox, safari…etc) todos menos IE8 (que tampoco forma parte de los mejores browsers) ya dan soporte a css3, lo cual significa que aunque un 70% use explorer, ya se pueden empezar a hacer pruebas con css3, que realmente nos van a simplificar la vida a la hora de maquetar, o codear xhtml + css.
En esta oportunidad, voy a hablar de declarar las variablesen css3.
En web2.0-tips, cualquiera puede publicar un consejo, truco o articulo relacionado con el desarrollo y diseño web. Tu puedes registrarte y postear, aparte te quedas con el 80% de impresiones de adsense en tus publicaciones.
Ultimos comentarios