Etiqueta: css3 Página 1 de 2

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.

Texto no seleccionable con CSS

En ocasiones no queremos que ciertas partes o textos de nuestras webs  sean seleccionables. Por ejemplo en aplicaciones web o de escritorio basadas en HTML, CSS & JS.

Convertir imagen a base64

Utilizar imágenes en base64 tiene la ventaja de ahorrar peticiones al servidor, ya que las imágenes quedan “embebidas” en la propia página.

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.

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.

Foundation Motion UI – Animate.css

Aprende a usar Motion UI y Animate.css.

Indentar HTML, CSS o JavaScript con Sublime Text

Sublime-HTMLPrettify es un plugin de SublimeText para indentar HTML, CSS o JavaScript con SublimeText.

Step menu simple CSS

‘Step menu’ responsive.

Desactivar links con CSS

Aprender en un minuto a desactivar links con CSS.

Alinear horizontal y verticalmente cualquier cosa con Flexbox

Aprender a alinear horizontal y verticalmente cualquier cosa con Flexbox.

Sublime Text 3 – Las 20 mejores combinaciones de teclas

Las mejores combinaciones de teclas para Sublime Text 3.

Plantilla responsive multipropósito y dashboard

Esta plantilla se adapta fácilmente a distintos tipos de negocio, como por ejemplo un gimnasio. También he creado un dashboard que sirve como complemento a esta plantilla por su aspecto y funcionalidad.

Reordenar DIVs con Flexbox

Reordenar DIVs (visualmente) con Flexbox, sin necesidad de alterar el DOM.

UX y UI de una aplicación web

Caser – desarrollando una aplicación web. Proyecto web en el estado previo a su publicación en producción.

Truncar texto con la propiedad ellipsis de CSS3

Mediante la propiedad ‘ellipsis’ de CSS3 podemos truncar texto que sobrepase (overflow) la anchura de su contenedor.

Parallax 3D

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

CSSmatic – herramientas CSS online para diseñadores web

CSSmatic nos ofrece herramientas CSS online para diseñadores web. Se trata de una de esas webs que nos facilitan el trabajo del día a día. Tiene cuatro herramientas muy sencillas de usar y que funcionan a la perfección.

WP Google Fonts – plugin para WordPress

WP Google Fonts es un plugin para Wordpress que hace lo que esperas, permitirte usar Google Fonts en tu Wordpress sin complicaciones.

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.

Bootstrapshop – plantilla responsive tienda online

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

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.