Tabla responsiva con Bulma 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. ...

febrero 27, 2020 · 2 min · 252 palabras · Parzibyte

Bootstrap 4 con Angular 2 y ng-bootstrap

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. ...

enero 7, 2020 · 3 min · 606 palabras · Parzibyte

CSS - Ocultar elemento pero mantener espacio

Resumen: usar CSS para hacer un elemento invisible pero que siga en el DOM ocupando su espacio. ...

noviembre 27, 2019 · 1 min · 142 palabras · Parzibyte

Menú de navegación con Angular Material

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: Mat Toolbar: la barra que estará en la parte superior y tendrá el título de la app de Angular así como un botón para mostrar/ocultar el cajón de navegación Mat Sidenav Container: el contenedor de lo que veremos a continuación Mat Sidenav: el menú con los enlaces, es decir, el cajón de navegación Mat Sidenav Content: el contenido que se irá mostrando e inyectando dependiendo de la sección 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í. ...

noviembre 5, 2019 · 8 min · 1672 palabras · Parzibyte

Agregar Angular Material a app de Angular

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: Agregar @angular/material a proyecto Utilizar un tema presideñado Configurar componente contenedor Usar algunos componentes Nota: para esto necesitas un proyecto existente. Si no lo tienes, mira aquí cómo comenzar con Angular. ...

noviembre 4, 2019 · 3 min · 518 palabras · Parzibyte

Variables CSS con var() - Tutorial y ejemplos

Introducción a las variables CSS 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. ...

septiembre 26, 2019 · 3 min · 541 palabras · Parzibyte

word wrap en CSS - Ejemplos de estilo

Propiedad word-wrap en CSS 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. ...

agosto 20, 2019 · 3 min · 437 palabras · Parzibyte

Dibujar líneas y separadores en HTML usando CSS

Resumen 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. ...

agosto 19, 2019 · 4 min · 705 palabras · Parzibyte

Javascript - mostrar solo algunos elementos al imprimir página web

Resumen En este post te voy a mostrar a ocultar elementos al imprimir una página web, exceptuando algún elemento como un párrafo, imagen o encabezado. Por ejemplo, imprimir algo con Javascript y CSS pero quitando algunos elementos excepto un contenedor o elementos que cumplan cierto criterio. Para lograrlo vamos a usar CSS y Javascript. El CSS será usado para ocultar al imprimir, y el JavaScript para agregar y remover algunas clases al momento de imprimir. ...

agosto 19, 2019 · 4 min · 730 palabras · Parzibyte

Juego de Memorama en JavaScript - Tutorial

Resumen: en este post te voy a explicar cómo hacer el juego de memorama en JavaScript. Pondré el código fuente y una demostración en línea. Este juego también es conocido como “Memoria”. Características del memorama con JavaScript Este juego de memorama en JS que vengo a presentar tiene las siguientes características: Totalmente responsivo, es decir, se adapta a cualquier pantalla Las imágenes se pueden cambiar Intentos máximos modificables Alerta para cuando ganas y cuando pierdes Código fuente modificable Nota: otro videojuego que desarrollé con JavaScript fue el de snake. ...

agosto 7, 2019 · 8 min · 1503 palabras · Parzibyte