En esta corta entrada te mostraré cómo insertar un botón flotante en una esquina de la página web, usando JavaScript. Es decir, crear el botón de manera dinámica y colocarlo en una de las esquinas, de manera que se vea que “flota” y que está fijo.
Botón flotante en esquina – Insertado con JavaScript
En este post sobre diseño responsivo en CSS te mostraré cómo hacer que una imagen sea responsiva o responsive. Es decir, que se adapte a cualquier tamaño de pantalla.
Hacer una imagen adaptable es útil cuando no usamos frameworks de diseño como Bootstrap, Bulma, etcétera, y queremos que la imagen sea responsiva.
En este post sobre estilos CSS y el framework Bootstrap 4 te mostraré cómo ocultar y mostrar ciertos elementos al momento de imprimir la página web.
De este modo puedes imprimir la página web ajustando solo ciertas características. Por ejemplo, mostrar el botón de impresión en la pantalla, pero ocultarlo al imprimir.
Todo esto lo haremos con clases que ya vienen en Bootstrap. No vamos a programar nada manualmente, aunque si quieres, puedes hacerlo de manera nativa.
Este post es muy corto. Solo vamos a ver cómo centrar una tabla en una página web, usando CSS.
En este artículo te explicaré un problema que me pasó hace algún tiempo usando la librería Awesomplete y el framework Bootstrap.
Pasa que al hacer un autocompletado con AJAX, el input perdía su estilo y se mostraba a la derecha de la etiqueta. Algo así:
Awesomplete con Bootstrap – Cambiando estilo de input
Cuando en realidad, debería mostrarse así:
Input correcto con awesomplete y Bootstrap
Hoy te voy a mostrar cómo solucionar el siguiente problema: al preparar aplicación web de angular para producción con ng build --prod los estilos CSS se cambian y en la opacidad se obtienen distintos resultados.
Quiero aclarar que esto no es problema de Angular, sino de cssnano, una herramienta que utiliza Angular para optimizar los estilos CSS.
El framework CSS de Bulma provee clases para agregar estilos a las tablas, así como contenedores de las mismas.
Hoy vamos a ver cómo hacer una tabla responsiva utilizando la clase table-responsive, clase que funciona pero para que lo haga debemos hacer algunos cambios con los div padres.
En este post te mostraré cómo comenzar a usar los estilos de Boostrap 4 en una app de Angular 2 gracias a ng-bootstrap.
Resumen: usar CSS para hacer un elemento invisible pero que siga en el DOM ocupando su espacio.
Resumen: mostrar cómo crear un menú de navegación con Angular Material; es decir, implementar un navigation drawer con el menú a la izquierda (que se puede ocultar y mostrar con un botón) y el contenido a la derecha.
Para implementar un navigation drawer o cajón de navegación en Angular Material vamos a usar combinar algunos componentes. Entre ellos:
Nota: recuerda que para esto debes tener un proyecto de Angular y haberle agregado Angular Material.
Si quieres ver el ejemplo terminado haz click aquí.
En este post te muestro cómo agregar y utilizar los estilos de Material Design o Angular Material a una aplicación de Angular. Vamos a ver cómo:
@angular/material a proyectoNota: para esto necesitas un proyecto existente. Si no lo tienes, mira aquí cómo comenzar con Angular.
Las variables CSS sirven para definir variables dentro del lenguaje (si se le puede llamar así) CSS. Permite reutilizar esos valores y tener una única fuente de la verdad.
De este modo, si después queremos cambiar el estilo de todos los elementos que usen nuestras variables, lo podemos hacer en una sola línea.
Cabe mencionar que para que las variables CSS funcionen no necesitamos un preprocesador, lo podemos hacer con CSS puro.
En este post te mostraré a usar la propiedad word-wrap en CSS para romper palabras en un párrafo o texto.
Veremos los 3 métodos de word-wrap en CSS: break-all, normal y break-word.
En este post te mostraré a dibujar una línea horizontal en un documento HTML ya que sirve como un remplazo para la etiqueta hr.
Esta línea de la que hablo también sirve para cuando debemos imprimir algo y la persona debe poner una firma. Por ejemplo.
Veremos cómo dibujar una línea que ocupa todo el ancho o que ocupa una longitud fija.
No vamos a usar JavaScript, solo un elemento div y estilos CSS.
