Crea tu web, tutor html, css

How to: ¿Cómo se hace?...

Seguro alguna vez, mientras estas construyendo una página web, te has encontrado en alguna de las situaciones que aparecen en esta sección. ¿Verdad? Pues voy a procurar mostrar poner soluciones a esas situaciones

Como es habitual un mismo problema puede tener varias soluciones, aquí te vamos a poner algunas de ellas, pero si encuentras otras y quieres puedes compartirlas con el resto de diseñadores. Toda ayuda es poca.

Y si queires puedes preguntar como se hace eso que necesitas para tu página

Códigos y soluciones

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.

Como crear un hover 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
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. Aprende aquí a crearla en HTML
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