Crea tu web, tutor html, css
 

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

Seguro que  mientras estas construyendo una página web, te has encontrado en alguna de las situaciones que aparecen en esta sección. ¿Verdad? y te has preguntado ¿Cómo se hace esto? Pues voy a procurar mostrar soluciones para que resuelvas esos problemas de diseño en tus páginas web.

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

Y si quieres puedes preguntar como se hace eso que necesitas para tu página. Seguro que ahy respuesta.

Espero que saques provecho a estas páginas y compartas este recurso.

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 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 este efecto accordion sólo con CSS y HTML
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