Currently browsing: efectos

Efectos CSS increíbles

Beware: This post was published 8 years ago and its content may be outdated.

Vía CSSBlog descubro 4 efectos increíbles creados enteramente con CSS1 y CSS2, que van desde una lata de Cocacola que gira sobre sí misma hasta un efecto de distorsión sobre el Starry Night de Van Gogh pasando por un efecto de aparicióncon barras corredizas y un cuadrado que se desplaza por encima de una imagen y deforma el fondo.

Todos los efectos han sido creados por Román Cortés.

Añade un efecto nieve a tu WordPress

Beware: This post was published 8 years ago and its content may be outdated.

Cada día están más cerca las Navidades, y ya hay algunas webs que han actualizado su diseño cambiando el logo, colores, iconos… Otros optan por añadir algún que otro efecto a la página, como por ejemplo, un efecto que simule que nieva. Anteayer publicaron en Anieto2k un plugin que añadía este efecto navideño a WordPress mediante MooTools o jQuery.

Podéis encontrar más información y los enlaces de descargar del plugin (versión MooTools) aquí o (version jQuery) aquí.

Agrupa ventanas en pestañas en Windows

Beware: This post was published 8 years ago and its content may be outdated.

Vía Genbeta descubro WindowsTabs , un programa que nos permite agrupar las ventanas que tenemos abiertas en el escritorio en pestañas, al como lo que podemos hacer en Linux con Compiz Fusion. WindowsTabs funciona tanto en Windows XP como en Windows Vista y Windows 7.

Lamentablemente, WindowsTabs cuesta 19 $, aunque podemos usar una versión gratuita que sólo nos permite tener agrupadas hasta tres aplicaciones.

Por último os dejo un par de vídeos, el primero, Windows agrupando pestañas con WindowsTabs y el segundo Ubuntu agrupando pestañas con Compiz Fusion.

Crea un carrusel con jQuery

Beware: This post was published 8 years ago and its content may be outdated.

jQuery - Carrusel

En muchas páginas webs hay carruseles que muestran una imagen y un pequeño texto. Un ejemplo de estos carruseles lo podemos ver algunas páginas de empresas de diseño web, donde nos muestras el nombre de uno de sus diseños y una pequeña captura. También son frecuentes en webs de revistas, usados para mostrar los artículos más destacados.

Desde hacía tiempo quería crear un carrusel con jQuery y hace un rato he encontrado un plugin de este framework que es precisamente lo que andaba buscando: Step Carousel.

Para añadir el carrusel basta con enlazar jQuery y el plugin mediante <script /> y luego añadir el siguiente código Javascript, que inicia el carrusel:

<script type="text/javascript">
stepcarousel.setup({
galleryid: 'carousel', //ID del div que contiene el carrusel
beltclass: 'belt', //Clase del primer div dentro del carrusel, que contiene al resto de divs
panelclass: 'panel', //Clase de cada panel individual
autostep: {enable:true, moveby:1, pause:3000},
panelbehavior: {speed:500, wraparound:true, persist:true},
statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: ['external'] //content setting ['inline'] or ['external', 'path_to_external_file']
})
</script>

También es necesario incluir un poco de CSS para que el carrusel funcione correctamente:

#carousel {
position: relative; /* Necesario */
overflow: hidden; /* Necesario */
height: 250px;
margin-left:35px;
background:#5B5B5B url(carousel-bg.png) bottom left repeat-x;
}
#carousel .belt {
position: absolute; /* Necesario */
left: 0;
top: 0;
margin:0 10px 10px 0;
}
#carousel .panel {
width:265px;
float: left; /* Necesario */
overflow: hidden;
margin: 15px;
padding:7px;
border:1px solid #5B5B5B;
background:#383838 url(carousel-panel-bg.png) bottom left repeat-x;
}

Finalmente, este es el código HTML que usaremos en el carrusel:

<a href="javascript:stepcarousel.stepBy('carousel', 1)">Anterior</a>
<a href="javascript:stepcarousel.stepBy('carousel', -1)">Posterior</a>
<div id="carousel" class="stepcarousel">
<div class="belt">
<div class="panel">
<img src="img1.png" />
<div class="panel-text">
<p>Este carousel es una demostraci&oacute;n</p>
</div>
</div>
<div class="panel">
<img src="img2.png" />
<div class="panel-text">
<p>de un tutorial de <a href="http://sumolari.com">Sumolari.com</a>.</p>
</div>
</div>
</div>
</div>

El código es sencillo de entender y fácil de personalizar. Por ejemplo, para añadir más paneles basta con añadir más bloques, que tienen la siguiente estructura:

<div class="panel">
<img src="img2.png" />
<div class="panel-text">
<p>de un tutorial de <a href="http://sumolari.com">Sumolari.com</a>.</p>
</div>
</div>

Si lo que queremos es que el link pase dos paneles en lugar de uno, basta con cambiar el -1 o el 1 por -2 o 2 respectivamente.

He montado una demostración del carrusel que se puede ver aquí.

Por último, podéis descargar la demostración desde aquí (incluye imágenes, Javascript y CSS).

Resumen de la historia de Compiz

Beware: This post was published 9 years ago and its content may be outdated.

Vía Genbeta descubro un breve resumen de la historia de Compiz, llena de separaciones, uniones y demás.

Os resumo un poco más la historia de Compiz:

Año 2006

En 2006 Novell presentó Compiz junto con XGL (una capa de OpenGL). Con ambos se pudo componer un gestor de ventanas con muchas posibilidades visuales, además de afectar a todas las ventanas del escritorio.

Poco después apareció Beryl, como una “bifurcación” de Compiz, dirigida por una parte de la comunidad que no estaba de acuerdo con lo que se estaba haciendo en la rama Quinnstorm (de Compiz).

Además, Beryl incluía el decorador de ventanas Emerald, su gestor de temas y un montón de plugins.

Read more →

Cómo instalar KDE 4.2 en Ubuntu, openSUSE y Fedora

Beware: This post was published 9 years ago and its content may be outdated.

Hoy han publicado en Genbeta un tutorial para aprender a instalar KDE 4.2 (liberado ayer) en Ubuntu, openSUSE y Fedora.

Actualmente no tengo instalado Linux en el equipo (estoy esperando un portátil, en el que instalaré alguna distribución de Linux y comenzaré a aprender a usarlo y trabajar con él), pero he usado Ubuntu y Kubuntu (con Gnome y KDE respectivamente) y veo que han habido muchos avances en KDE 4.

Realmente el aspecto de KDE 4 es increíble… y la próxima vez que instale una distribución de Linux, probablemente use KDE en lugar de Gnome.

¿A vosotros os gusta más KDE o Gnome?

Miniaturas de los archivos HTML en Windows Vista

Beware: This post was published 9 years ago and its content may be outdated.

Vía Genbeta descubro HTML Explorer Thumbnails, un complemento para Windows Vista que nos permite ver las miniaturas de los arhivos HTML, MHTML y URL.

Los pasos a seguir son sencillos:

  • Descargamos un archivo ZIP y lo descomprimimos
  • Dentro encontraremos dos carpetas, para la versión de 64 y 32 bits de Vista
  • Abrimos la carpeta que corresponde a nuestra versión de Windows
  • Cuando la hayamos abierto encontraremos dos archivos: register.bat y unregister.bat
  • Abrimos el archivo register.bat con permisos de administrador para poder ver las miniaturas
  • Si en algún momento queremos deshabilitar las miniaturas, basta con ejecutar el archivo unregister.bat

Descarga HTML Explorer Thumbnails.

Crea un panel deslizante con jQuery

Beware: This post was published 9 years ago and its content may be outdated.

Si ya os conté cómo evitar conflictos entre jQuery y Mootools, hoy os explico para qué estaba usando jQuery en el nuevo diseño.

Probablemente os habréis fijado en el link que dice Sidebar, en el index del blog. Pues bien, este link despliega la sidebar superior del blog.

Para añadir este efecto a tu web debes seguir unos pasos sencillos, comenzando por descargar jQuery.

Read more →