How to: ¿Cómo se hace con HTML y CSS?...

Seguro que te has encontrado en alguna de las situaciones que aparecen en esta sección. ¿Verdad? Pues voy a procurar mostrar soluciones que puedan ayudarte en tu tarea como desarrollador web.

Botón deslizante o switch toggle button

Te traigo esta aplicación para incluiir un botón deslizante en cualquier página web. Es el típico toggle switch button creado aprovechando la pseudo clase :checked de CSS

Un corazón palpitante

Para San Valentín este sencillo corazón rojo y palpitante. Lo interesante es que no está hecho con Javascript, es solo HTML, CSS y un SVG animado. Una muestra de la potencia de los elementos SVG en una págna HTML

Como crear una zona transparente en un bloque HTML

Esta aplicación es un ejemplo de uso de clip-path, la propiedad de CSS que permite definir formas para bloques de HTML. Esta aplicación permite ver a través de un bloque, como unos rayosX Mira como hacerlo

Como plegar desplegar un bloque con CSS/HTML

Esta aplicación es otra muestra de como hacer que un bloque se enrolle o desenrrolle de forma suave mediante CSS y HTML, sin programar nada y usando el layout Grid Mira como hacerlo

Como extender el enlace a su contendor (stretch)

Este efecto consiste en lograr que al pulsar con el ratón en un bloque continedo un enlace la página responda como si hubieramos hecho click en el enlace. Es convertir cualqueir contendor de un enlace en un botón. Puede que lo hayas visto como clase stretch en bootstrap. Y todo con HTML y CSS, sin nada de javascript. Es un efecto stretch

Como crear una card con dos caras

Este efecto consiste en una card o tarjeta con dos caras: ambas con una imagen distinta, o una imagen en una cara y un texto en la otra. Al pasar el ratón e produce un giro animado y pasa de mostrar una cara a mostrar la otra. Y solo con HTML y CSS, sin nada de javascript. Es una animación muy fácil

Como crear un efecto glassmorphism

Este efecto consiste en mostrar un contenido en capas de manera que la capaa superior se comporte como un vidrio a través del cual se ve lo que hay detrás. Es como un poner filtro por encima de un fondo. Se le podría llamar efecto filtro o efecto vidrio y se afianza como tendencia para 2024. Aprende aquí como crear un efecto glasmorphism.

Como crear una linea de tiempo simple

Cuando presentas un currículum siemrpe hay al menos un apartado para una lista de eventos en el tiempo: proceso educativo, cursos de formación, etapas laborales. Estos evetnos pueden presentarse como una lista pero también podemos darle algo de diseño para hacrla más atractiva y útil. Es un elemento muy simple de crear. Aquí mte mustro una manera de oo más sencilla apra una linea temporal básica, partiendo de ella puedes personalizarla con efectos más llamativos o usarla tal cual. Mira como crear una linea de tiempo

Como crear efecto de texto deslizante

Los efectos de cambio de color, tipo o fondos cuando pasamos el ratón por un enlace son muy simples y comunes. Si quires destacar necesitas efectos más

(pasa el ratón por aquí)

como éste por en el que el enlace se desliza hacia abajo empujado por un copia del mismo ¿Lioso? Mira como crear este enlace deslizante

Como crear una Card horizontal

Otra forma de presentar las cards es en formato apaisado u horizontal. Puede usarse con una imagen a un aldo y el texto (titular, descripción, enlaces) en la otra mitad. Mira el código HTML y CSS para conseguir crear una card horizontal

Como crear una Card con texto deslizante

Esta card no tiene texto visible, pero si pasas el ratón por encima veras como sale de detrás e la imagen.. Y el efecto se logra solo HTML y CSS. Card con panel deslizante

Como crear grupos de Cards

Las cards son habituales para presentar información en HTML. Estas tarjetas o cards suelen utilizarse webs para mostrar opciones o versiones de un producto. En esta página puedes ver como crear grupos de cards con CSS y HTML

Como crear tablas responsive

Las tablas, por su anchura, son difíciles de convertir en responsive. Habitualmente aparece una barra de scroll horizontal cuando se ven en pantallas estrechas. Esto se puede solucinoar con esta aplicación usando CSS y un poco de Javascript. Aprende aquí como crear estas tablas responsive

Como crear accordions usando solo CSS y HTML

Los cuadros desplegables (en inglés accordions) permiten crear mostrar u ocultar un bloque de contenido den ro de la página plegándolos o desplegándolos, de ahí lo de acordions. Aprende aquí como crear este efecto accordion sólo con CSS y HTML

Como rodear un botón con un anillo girando

Los botones call to action y otros se deben destacar para animar al visitante a hacer click sobre él, bien sea para enviar un formulario o para acceder a una página. Con este efecto llamarás la atención se trata de poner un anillo girando alrededor del botón

Como lograr el efecto cortina en un botón

Mediante los pseudo selectores es posible lograr ese efecto cortina al pasar el ratón por encima de un botón: es como una capa que se desplaza cubriendo el fondo de otro color. La solución es muy simple y solo necesitas CSScomo ves aquí

Como aplicar estilos a filas alternas de un tabla

Mediante los pseudo selectores o modificadores jerárquicos es posible aplicar estilos a un subconjunto de los elementos de una determinada clase. En este caso lo aplicamos para facillitar la lectura de las filas de una tabla aplicandoles estilos distintos a las filas pares y las impares Mira esta solución

Como centrar elementos horizontal y verticalmente en una página web

Centrar elementos en una página web suele ser fácil si se trata de centrados horizontales, pero en vertical el centrado es algo distinto. Para lograr ambos centrados podemos echar mano del modelo flexbox definido en CSS Mira esta solución

Como crear un hover con efecto zoom sobre una imagen

Con este efecto al pasar el ratón sobre una imagen hace que ésta se expanda dentro de su marco, mientras se cubre con una capa que la oscurece mientras aparece un texto para señalar que es un enlace. Es un Hover con zoom

Como crear una barra de menú responsive

Primera solución a un elemento que la mayoría usamos en nuestras páginas: menus responsive. Pues aquí puedes ver como se hace una barra de menú responsive usando el modelo Flexbox de CSS y algo de Javascript. Sencillo y explicado para que la puedas usar al momento.  Ir a la página

Como crear cards

¿qué son las cards? Las cards son el nombre en inglés que se da a un contenedor HTML con opciones para colocar un titulo, un pie y un contenido variado bien sea un texto o imágenes. Suelen llevar un borde y algún efecto para separarla del resto del contenido de la página. ¿Como se crea una card en HTML? Aprende aquí a crearla con HTML y CSS

Como hacer un formulario a correo

Los formularios permiten recopilar datos de los usuarios y procesarlos mediante algún programa que se ejecuta en el servidor. Este ejemplo muestra como procesar esos datos utilizando un programa escrito en PHP que envía la información a un correo electrónico. Ir a la página

Como crear una barra de navegación fija

Cuando una página web es muy larga inevitablemente aparece la barra de scroll y al movernos por ella la barra de navegación desaparece de nuestra vista. Si no te gusta este efecto puedes dejar que esta barra se mantenga fija en la parte superior de la pantalla. Mira como hacerlo

Como crear una barra lateral fija

En los diseños de las páginas es habitual usar barras laterales. A veces necesitamos que esas barras permanezcan fijas a la vista aunque se haga un scroll vertical. Pues mira aquí como hacerlo

Como hacer un bloque desplegable con HTML y CSS

En muchos lugares vemos que al pul lsar una determinada palabra se despliega un bloque con un menú o cun una ayuda... esto es muy fácil de conseguir usando solo HTML y CSS, sin necesisas de Javascript. mira aquí como hacerlo

Como crear una navegador de tabs

Es muy común usar un sistema de pestañas para mostrar contenido oculto: al seleccionar cada pestaña se muestra un contenido diferente, sin necesidad de recargar la pa´gina o usar iframes. Esto no necesita tampoco nada de javascirpt. El propio comportamiento del HTML y del CSS permite usar pestañas de navegación sin programar

Como crear una lightBox

Una ventana emergente tipo lightbox puede construirse solo con HTML y CSS sin necesidad de usar Javascript est muy simple y utliza el psuedo elemento :frame para mostrar u ocultar el contenido que quieras poner en esa ventana: imanges, un carrusel, un video, texto...Puedes crearla como te indico aquí

Como crear un bloque popup

Esta es otra forma para crear un bloque emergente construído con un mínimo de Javascript. Este bloque actúa como una ventana no modal, el resto de la página es accesible y un click cierra la ventana del popupcomo te indico aquí

Como crear un efecto parallax simple

El efeccto parallax simula la perspectiva real en fomra de capas visualizadas en 3D, puede ser muy completo o puede hacers son un poco de CSS. Este ejemplo es un parallax de fondo muy simple

Como crear un efecto parallax por capas

En esta aplicación creamos un efecto parallax solo con HTML y CSS. Tres capas con imágnes que se desplzan con scroll relativos. Parallax con capas