Cómo poner texto encima de una imagen html css

Una forma sencilla para insertar texto encima de una imagen, para cualquier proyecto de trabajo web, este es un ejemplo muy simple.

Para confeccionar la estructura HTML usaremos los siguientes elementos:

• header: elemento de ayuda de navegación, donde se coloca el encabezado.
• div: un contenedor de class «caja».
• img: una imagen.
• div: un texto de class «texto1».
• div: un texto de class «texto2»

Siguiendo el anterior html y sin ningún css el resultado sería así.

Una imagen y los dos textos.

Ahora confeccionamos la estructura CSS para poder lograr poner el texto sobre la imagen. 

• contenedor «caja»: le aplicamos una posición relativa, esto es, el punto de referencia es la esquina superior izquierda de su elemento. inline-block los elementos con este estilo se ponen horizontalmente y  respeta el ancho y altura (width, height) esté es el estilo por defecto de las imágenes.
• texto1: le aplicamos una posición absoluta, el punto de referencia para medir el desplazamiento está en la ventana del navegador. Así con los márgenes superior e izquierda posicionamos el texto1. top 10px y left 10% los valores pueden ser de medida o de porcentaje, una clase de letra, color y tamaño.
• texto2: le aplicamos también una posición absoluta, altura y margen, en este caso todo en porcentajes, un color y tamaño de la fuente. 

El resultado es texto1 «Playa de las Catedrales» en la parte superior izquierda y el texto2 «Lugo-Galicia» en la parte inferior derecha de la imagen.

Diseño de tabla html/css

Diseño tabla html_css

La confección de una tabla, es una cuadricula de celdas, divididas en columnas y ficas, con datos para la visualización en la web,  con una simple escructura clasica, con las etiquetas  <table>,  <thead>,<th>, <tr>, <td>. Para que la visualización usamos el CSS por medio de etiquetas generadas a tal fin. El siguiente ejemplo, es una encuesta, el titulo va con una etiqueta <h3> y la tabla de tres columnas y 10 filas.

• <table> Definición de una tabla </table>
• <thead>Define la cabecera de la tabla </thead>
• <th> Definición cabecera celdas </th>
• <tr> Define una fila de la tabla </tr>
• <td> Define una celda de la tabla</td>

Texto en columnas CSS

Esta práctica consiste en la maquetación de un texto en columnas, no muy utilizado en las páginas web, pero a veces necesario. Con las siguientes propiedades damos forma y tamaño que se ajuste al espacio que tenemos. Fácil no lo siguiente.

• column-count: Número de columnas.
• column-gap: Espacio entre cada columna.
• column-width: Ancho de cada columna.

Rejilla html

Es una ayuda en el creación de diseño web, la rejilla puede contener un número ilimitado de filas y columnas que permite de  una manera ordenada, la colocación de todo tipo de contenido.  Lo siguiente es otro simple ejemplo de rejilla. Las filas, columnas y ancho se indican con medidas, la altura se adapta automáticamente al contenido.

Ejemplo de diseño tipo rejilla

Formulario parpadee

El objetivo del ejercicio es llamar la atención en una página web, hacer que los bordes del formulario o menú, parpadee para que el usuario tenga la curiosidad de llevar el cursor.

 

Mediante un diseño css le aplicamos una sombra que estará pasando continuamente de rojo a verde, con un movimiento continuo, esto hace un efecto llamada. Os dejo el html y css.

formulario_parpadeo_html

formulario_parpadeo_css