Tag Archives: html

Cómo poner texto encima de una imagen html css

11 May

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 tabla html_css

7 May

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

20 Abr

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

10 Abr

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

8 Abr

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

Ventana modal

7 Abr

Una ventana que se abre en página web, en una capa superior del contenido, dicha ventana generará otra ventana donde mostrará la información,  que luego podemos cerrar haciendo clic con el ratón.

El navegador cuando cargue la página aparecera la ventana “Abrir la ventana Modal” al hacer clic con el ratón, mostrara la información que desaparecerá al cerrarla en el botón de cierre.

html_diseño.pdf

css_diseño.pdf

Menú con cajones

31 Mar

El fácil objetivo es confeccionar un menú de navegación con cajones, que irán apareciendo cuando el cursor pase por encima de un elemento del menú, la esctructura del html es similar al menú anterior y en css tenemos que incorporar el diseño y transición de los cajones, formato y tiempo que esten visibles al parar el cursor para el inicio de la transición. Más fácil aún!!!

menu_cajones_html

menu_cajones_css

>> Eliart <<

Ilustradora y diseñadora gráfica.

Verónica Mas

Escribir es un modo de vida.

Todas las notas

Oda a la vida, a la muerte, al amor, a la melancolía

Martín Gómez

Poemas, Canciones y Otros

Mi mamá tiene cáncer

Qué pasa con la vida de la familia de un persona con cáncer

TEJIENDO LAS PALABRAS

CON LOS HILOS INVISIBLES DEL ALMA

EL ECO DE TUS PALABRAS

"Todo cuanto me llegue yo tambien lo haré llegar"

Mariposas de Cris

Autora de "Dime con quién hablas y te diré si estás loca" y "No me busquéis"

LA INFORMÁTICA Y YO

Aprender el mundo de la informática

Remigio Sol

¡Viva la Música!

El blog de una empleada doméstica

Aventuras de una chacha

la recacha

Una recacha es un sitio donde uno se siente a gusto, protegido. Un entorno adecuado para reflexionar sobre la vida...

VIAJES AL FONDO DEL ALSA

“Quizás viajar no sea suficiente para prevenir la intolerancia, pero si logra demostrarnos que todas las personas lloran, ríen, comen, se preocupan y mueren, puede entonces introducir la idea de que si tratamos de entendernos los unos a los otros, quizás hasta nos hagamos amigos” – Maya Angelou

A %d blogueros les gusta esto: