Categoría: Front Página 1 de 3

UI – App installer y wireframes

Diseño de interfaz y maquetación responsive (flexbox) para configurador de software.

Spinners animados – SVG y CSS3

Muestrario de 20 spinners animados basados en SVG y CSS3.

Aprender Flexbox y CSS Grid gratis

En este artículo se van a ir recopilando diferentes recursos gratuitos para aprender Flexbox y CSS Grid. Visita regularmente este artículo para aprender las últimas tecnologías  y técnicas de maquetación online.

Full size background image

Seguramente has visto webs con una imagen de fondo que inicialmente ocupa todo el espacio del navegador (alto y ancho). Al hacer scroll se ve el resto del contenido de la página, ya sea texto, otras imágenes, una mezcla de ambos, etc.

Datatable con filtros – responsive design

Plantilla de Datatable con menú de filtros y también de cambio de sección.

HR Giger – Museum and Bar

Homenaje a unos de mis artistas favoritos, HR Giger (1940-2014). Este genio fue el creador del xenomorfo de la película ‘Alien’ (1979).

Liverpool history

Liverpool history es una galería con 20 imágenes históricas de la ciudad.

CSS Filters

Muestra de 10 filtros para imágenes que se pueden aplicar en navegadores modernos, especialmente aquellos basados en webkit.

Long Shadow con jQuery

Plugin basado en jQuery que sirve para generar el ya famoso “efecto Long Shadow” sobre textos HTML.

Superslides es un gran slider en jQuery

Superslides es un gran slider en jQuery que permite pantalla completa y es muy fácil de configurar. Además está preparado para aceleración por hardware.

Vibrando con CSShake

CSShake es un pequeño pero divertido proyecto alojado en Github. Se trata de una serie de clases CSS para “agitar” el DOM.

Cambiar color de la barra de direcciones en Android

Se trata de un “truco” muy sencillo que funciona en Android, a partir de Lollipop.

Puzzle snapPuzzle – De imagen a puzzle

snapPuzzle Alien es un plugin de jQuery para convertir una imagen en un puzzle.

Parallax 3D

Parallax 3D es un experimento que usa las transformaciones 3D de CSS3. Utiliza 3 imágenes distintas para crear el efecto.

Horizonte de Madrid – jQuery

Un experimento de paisaje con el Horizonte de Madrid y jQuery. El cielo está creado mediante gradientes de CSS3 y cambiará en función de la hora del día en que se visite esta página. Mediante jQuery se comprueba la hora actual y se aplican cambios a clases CSS distinguiendo entre “mañana”, “tarde” y “noche.

Parallax 2D

Parallax 2D es un experimento utilizando el scroll como “motor” para el desplazamiento vertical de los distintos elementos que forman el layout.

Foundation – offcanvas demo

Foundation – offcanvas demo es un ejemplo sencillo del uso de Foundation para una maquetación totalmente responsive.

Bootstrapshop – plantilla responsive tienda online

Bootstrapshop es una plantilla responsive para tiendas online creada con Bootstrap.

Animación sprite sheets con CSS3

Animación sprite sheets con CSS3 es un ejemplo de uso de distintos fotogramas para crear sensación de movimiento.

Detectar el navegador

Ejemplo de cómo usar la propiedad “userAgent” de JavaScript para detectar el navegador.

Logotipo Responsive

Logotipo Responsive es un tutorial de cómo adaptar un logotipo a distintos tipos de dispositivos.

Lyrics CSS3

Lyrics es un homenaje al disco ‘Jar of Flies’ del grupo Alice in Chains.

Fondo vídeo YouTube

Fondo vídeo Youtube es un ejemplo sencillo de cómo utilizar un vídeo como background de una web.

Los mejores libros de fantasía

Los mejores libros de fantasía. Es totalmente responsive. Una manera muy visual de mostrar los libros que incita a adquirirlos.

Filtrando post portfolio

Filtrando post portfolio es una pequeña aplicación que utiliza jQuery y animación CSS3 para mostrar sólo los post pertenecientes a cada una de las categorías del menú superior.