Tabla de contenidos
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.
Deja una respuesta