Manual práctico Web 'How to' - HTML5 · CSS3 · JavaScript

Tabla de contenidos

1 Tareas comunes de formato
- 1.1 Ocultar elementos con la propiedad display
- 1.2 La propiedad shape-outside, o como ubicar texto alrededor de una imagen
2 Media Queries CSS
3 Animaciones
- 3.1 Efecto zoom al hacer hover sobre una imagen (al pasar el puntero del ratón) CSS
4 Multimedia
- 4.1 Inserción de vídeos

Tareas comunes de formato

Ocultar elementos con la propiedad display

display: none. Oculta un elemento, produciendo el efecto de que este simplemente desaparece, junto con el espacio que ocupaba. visibility: hidden. Oculta un elemento, sin embargo este,aunque invisible, continua ocupando el mismo espacio que antes.

La propiedad shape-outside, o como ubicar texto alrededor de una imagen

En el sitio MDN nos explican la propiedad shape-outside al detalle.

Media Queries CSS

Las media queries pueden ser usadas para verificar diferentes cosas, como el ancho y alto del visor/pantalla, del dispositivo, orientación (apaisado o retrato), resolución. Se trata de una técnica común que permite crear hojas de estilos personalizadas para cada dispositivo: móvil (iphone, Android, …), tablet, portátiles, de escriotrio, …

Sintaxis:

@media <media_query> { <grupo_de_reglas> }

Tipos de medios

all. Aplicable a todos los dispositivos.
print. Destinado a páginas en modo vista previa de impresión
screen. Destinado a pantallas de computadora en color.
speech. Destinado a sintetizadores de voz

Crear páginas web imprimibles con las media Queries CSS (@media print)

El siguiente es un ejemplo de fragmento CSS que se aplica al tema DIVI/Extra de ElegantThemes de WordPress. Solo afecta a la vista previa de impresión y corrige algunos problemas de visualización:

@media print { header.header, .post-footer, .post-nav, #footer, .related-posts, .wpml-ls-statics-post_translations { display: none; } .container { max-width: none; width: 100%; } }

El código: ‘.wpml-ls-statics-post_translations’ se aplica solo a sitios con el plugin WPML instalado.

[WordPressDoc] Styling for Print

Animaciones

Efecto zoom al hacer hover sobre una imagen (al pasar el puntero del ratón) CSS

CSS. En HTML, la capa hijo está dentro de la capa padre:
.padre	{
  padding: 0;
  overflow: hidden;
}
.hijo {
  background-image: url("ruta/imagen.jpg");
  background-position: center;
  background-size: cover;
  height: 100%;
}
.padre:hover .hijo  {
transform: scale(1.2); /* Produce el zoom */
transition: all .5s;  /* Procude que la transición de zoom sea suave */
}

Multimedia

Inserción de vídeos

La forma más fácil de insertar vídeos en páginas web es a través de YouTube.

Clic con el botón derecho ratón sobre el vídeo de YouTube deseado > opción «Copiar código de inserción» > pegar ese texto HTML en la página deseada.

Fuentes ❯

Diseño responsive ❯