El diseño web responsivo está muerto

El diseño fluido se refiere a un enfoque de diseño web en el que las dimensiones de los elementos son flexibles, escalando proporcionalmente al tamaño de la pantalla del usuario. En lugar de medidas fijas de píxeles, utiliza unidades relativas como porcentajes o ems para garantizar que el diseño se ajuste sin problemas, independientemente del dispositivo.

Ver Entrada

Mas Iconos con Vainilla Font

Mostramos como añadir más iconos sin la necesidad de añadir más sets de SVGs, usando la fuente denominada "vanilla" y con la particularidad de que vamos a poder usarlos de manera global en todo nuestro sitio o solo en aquellas páginas o entradas en las que sea necesario. La diferencia entre usarlos de manera global en todo el sitio o solo en aquellas páginas está en que en la primera manera cargaremos los kb de la fuente, en este caso 79Kb de manera innecesaria en aquellas páginas o entradas donde no requiramos el uso de estos iconos.

Ver Entrada

Subrayado Animado

Un pequeño tip para lograr un efecto de subrayado animado con css y Oxygen

Ver Entrada

Slider Automático

En esta ocasión estamos con la construcción de un slider de imágenes de desplazamiento automático, del tipo WooCommerce y con LightBox, el desplazamiento se producirá de manera automática sin necesidad de intervención del usuario, este desplazamiento se pondrá en pausa cuando se sitúe el puntero del ratón encima de la imagen principal o bien se haga click encima de esta imagen y esté visible en light box.

Ver Entrada

Div Cards Informativo

Efecto de desplazamiento lateral de cuatro imágenes con información interna de título, subtítulo, texto y botón. Además, con ensombrecimiento y agrandado de la imagen

Ver Entrada

Flipcards con CSS

Vamos a mostrar como con unas cuantas líneas de código CSS podemos hacer un bonito efecto "flip-cards" y sin necesidad de añadir código JavaScript alguno. El proces es muy sencillo, solo hay que respetar el orden de los elementos contenedores y por supuesto dar las clases correspondientes para el código CSS

Ver Entrada

Modificar Cabecera Admin

Supongamos que tienes una barra superior sobrecargada y que quieres eliminar alguno o algunos de los elementos que se muestran por el motivo que sea. Una barra parecida a la que mostramos en la imagen siguiente.

Ver Entrada

Tab Gallery - JavaScript

Cuando creamos tab-galleries se nos puede presentar el problema de que tengamos que incluir mas de uno de estos elementos y por lo tanto tengamos que duplicar el código. Mediante el código que presentamos podemos incluir en una misma página o entrada tantos elementos de estos como queramos sin tener que cambiar mas que las imágenes y los textos correspondientes.

Ver Entrada

Cambiar entre elementos con un click

Como cambiar entre elementos con un click de ratón. Sin importar el número de elementos.

Ver Entrada

Trabajando con Float

En esta entrada vamos a tratar la propiedad "float" que aunque no es de las mas desconocidas tampoco es de las que mas se utilizan y por lo tanto no se aprovecha todo el potencial, sobre todo en la creación de cards que incluyen imágenes, las típicas que presentan la foto y la presentación en texto de algún miembro del equipo o de la empresa.

Ver Entrada

CSS-Manipulando Texto

Estudiamos el CSS menos conocido para dar formato al texto, dejando de lado el código mas habitual y que todo el mundo DEV conoce.

Ver Entrada

Sombras a Imágenes

Hay una propideda en CSS que se utliza muy poco pero tiene una gran potencial para dar a nuestras webs un toque especial, esa propiedad es "filter". Esta función es algo similar a la propiedad box-shadow. La propiedad box-shadow crea una sombra rectangular detrás de toda la caja de un elemento. En cambio, la función de filtro drop-shadow() crea una sombra que se ajusta a la forma de la imagen.

Ver Entrada

Distorsión Fondo

El efecto conseguido será de que cuanto mas se aleje el puntero del ratón del centro de la pantalla mas se distorsionará la imagen de fondo, sin embargo el texto y todo lo que esté dentro de este div no se verá afectado.

Ver Entrada