¿Como se hace? Snippets y Widgets para webs
Seguro que mientras estas construyendo una página web has querido incorporar efectos llamativos como animaciones, menus desplegables y otros o elementos indispensables en cualquier diseño como barras de navegación y un largo etcétera que hacen más atractiva y funcional el diseño.
Pues en esta sección de ¿Como se hace? te ofrezco una lista de fragmentos de código (snippets) y aplicaciones (widgets) que puedes utilizar en tu página web.
Son elementos desarrollados mayormente con HTML y CSS, aunque en algun caso puede ser necesario un poquito de Javasript o PHP.
En todos se intenta explicar el funcionamiento y también puedes su funcionamiento en nuestro editor online o ejercer el tradiconal copia y pega para incorporarlas a tus diseños o a tu caja de herramientas.
Como es habitual en el diseño web un mismo objetivo puede alcanzarse por distintos caminos, aquí vas a encontrar algunos de esos caminos, pero seguro que hay más. Si encuentras otras formas de crear estos widgets puedes compartirlas con el resto de diseñadores. Toda ayuda es poca.
Estomos abiertos a oirte: puedes preguntar como se hace eso que necesitas para tu página o que te aclaremos alguna duda o sugerir alguna apllicación de interés general. Seguro que hay respuesta.
Espero que aproveches estas páginas y, si te gustan, compártelas.
Otra versión de borde animado para un botón o cualquier elemento que quieras destacar por cualquier razón. Este efecto decorativo es ideal para enlaces call to action, pero no solo valae para ellos. Es similar al botón con anillo girando alrededor pero más simple de construir
Un interruptor deslizante tipo on/off en la que el fondo se desplaza junto al botón cuando se desplaza para pasar de un estado o a otro (on - off). Como es habitual en ese tipo de aplicaciones en que se juega con estados de un elemento, se aprovecha la pseudo clase :checked de CSS aplicada a un control input check
Este widget es una simulación de botón deslizante para tu página. Simula un interruptor on off done un botón se desliza de un lado a otro mostrando un estoda encendido apagado mediante el cambio de color del fondo. Esta aplicación hace uso de la pseudo clase :checked aplicada a un control input tipo check
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
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
En muchos lugares vemos que al pulsar 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
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
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
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 cualquier 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
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.
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 comocrear una linea de tiempo
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
como éste por en el que el enlace se desliza hacia abajo empujado por un copia del mismo ¿Lioso? Mira comocrear este enlace deslizante
(pasa el ratón por aquí)
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
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
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
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
¿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
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
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í
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 solucionar con esta aplicación usando CSS y un poco de Javascript. Aprende aquí como crear estas tablas responsive
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
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
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
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
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
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
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
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 pá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
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í
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í
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
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