JASoft.org

Cómo crear checkboxes personalizados espectaculares con tan solo CSS

Cómo crear checkboxes personalizados espectaculares con tan solo CSS
Los checkboxes son un tipo de control muy útil. Se trata de esos pequeños cuadraditos que nos permiten marcar opciones para decidir si las activamos o las desactivamos. Su mayor problema es que son pequeños y no son especialmente bonitos. Y para acabar de denigrarlos, cuando Apple lanzó el iPhone cambió el aspecto de este tipo de selectores para que, en vez de ser una simple caja, se comportasen como una clavija, deslizándose de un lado a otro. El caso es que en HTML no están disponibles controles como este switch de iOS, y nos tenemos que conformar con el humilde pero efectivo checkbox. En este artículo te voy a explicar paso a paso y con detalle cómo conseguir el aspecto que desees. [Más]

Nueva funcionalidad "Informe CSS" en Chrome

Nueva funcionalidad "Informe CSS" en Chrome
Ya he hablado en otras ocasiones sobre cómo podemos averiguar qué partes de las hojas de estilo de una página no se están usando y también de cómo podemos, incluso, limpiarlas automáticamente. Google Chrome y los navegadores basados en él (Edge, Opera, Brave...) ofrecen de serie algunas herramientas, como la de cobertura, para poder lograr esto. Hace unos meses que en las versiones preliminares (Canary , Dev y Beta) se incluye una característica experimental que nos ayuda todavía más a comprender cómo funcionan nuestras hojas de estilo (¡o las de otros!): el Informe CSS. Te cuento cómo activarlo y qué te ofrece. [Más]

Cómo centrar un elemento <picture> de HTML5

Cómo centrar un elemento <picture> de HTML5
El clásico elemento para colocar imágenes en HTML, , poco a poco ha sido sustituido por el más moderno y capaz elemento que permite definir diferentes imágenes y formatos en función del ancho de pantalla y el soporte, y combinarlo con subelementos y para un control total. Esto no sólo sirve para lo obvio, que es mostrar imágenes a diferentes tamaños y resoluciones, sino que se pueden conseguir cosas más avanzadas, como por ejemplo, hacer que según el tamaño de la pantalla se centre la imagen en determinado detalle, en lugar de que se vean otras partes menos interesantes. Bien, el caso es que una duda sencilla pero que a más de uno le puede traer de cabeza (lo sé porque me lo preguntan mucho los alumnos) es ¿cómo hago para centrar los contenidos de un elemento en mi página o aplicación web? [Más]

Cómo cambiar los valores de variables CSS desde código JavaScript

Cómo cambiar los valores de variables CSS desde código JavaScript
Ya he hablado en este blog hace mucho tiempo acerca de las variables CSS y cómo nos permiten obtener una gran potencia sin necesidad de recurrir a metalenguajes como Sass/SCSS o similares solo para parametrizar los diseños. Hoy voy a comentar brevemente cómo podemos modificar dinámicamente los valores de estas variables CSS mediante JavaScript, por ejemplo para cambiar los colores de la página, sin recargarla, cambiando tan sólo el valor de las variables CSS que controlan su aspecto. [Más]

JavaScript: cómo acceder y modificar pseudo-elementos como ::after y ::before

JavaScript: cómo acceder y modificar pseudo-elementos como ::after y ::before
Acceder a un elemento del DOM con JavaScript es muy sencillo. Mientras esté definido en el HTML tiene un elemento JavaScript correspondiente en el DOM y hay métodos para acceder a ellos. Sin embargo, cuando se trata de un pseudo-elemento, al tratarse de elementos ficticios, la cosa cambia por completo. No somos capaces de acceder a ellos de manera directa y presentan además otros retos. En este artículo vamos a ver qué son estos pseudo-elementos, como podemos acceder a sus propiedades para leerlas o modificarlas y cómo podemos usar un "hack" para modificar una propiedad especial que, en principio, no es posible modificar. [Más]

line-height sin unidades en CSS: ¿para qué se utiliza?

line-height sin unidades en CSS: ¿para qué se utiliza?
La propiedad CSS llamada line-height, tiene un "truco" importante que afecta a los elementos que heredan el valor de esta propiedad y que, si no lo conoces, puede hacer que obtengas resultados inesperados o que tengas que estar ajustando a mano individualmente la altura de las líneas y retocándolo en varios sitios cada vez que cambies este valor. Te cuento por qué pasa esto y cómo puedes sacarle partido. [Más]

¿Cómo utilizar las fuentes de Google desde tu propio servidor en vez de desde Google?

¿Cómo utilizar las fuentes de Google desde tu propio servidor en vez de desde Google?
Google Fonts es un recurso maravilloso y gratuito para acceder a decenas o centenares de fuentes tipográficas de manera rápida y con rendimiento, ya que además se sirven desde la CDN de Google. Sin embargo algunas personas prefieren servir las fuentes desde su propio servidor, sin depender de los servidores de Google. Aunque yo te recomiendo encarecidamente que uses las fuentes desde los servidores de Google y no desde el tuyo propio, dado que me lo han preguntado, voy a explicar cómo conseguir "gorronear" esas fuentes y utilizarlas desde tu propio servidor o en local. [Más]

Diferencias entre RGB y HSL: ¿cuál es mejor para manejar colores CSS para la Web?

Diferencias entre RGB y HSL: ¿cuál es mejor para manejar colores CSS para la Web?
En CSS se expresan los colores de diversas maneras, pero las más comunes son dos: RGB y HSL. Tradicionalmente todos hemos aprendido a manejar colores basándonos en un principio muy simple sacado de la naturaleza: la combinación de colores. En el colegio aprendimos que todo color se puede expresar como la combinación de otros tres colores básicos: el rojo, el verde y el azul. En esto es en lo que se basa la notación RGB. Sin embargo esta notación presenta varios problemas, entre ellos que no es nada intuitiva. La notación HSL, por el contrario, es mucho más fácil de visualizar y utilizar en el día a día. En este post te explico en qué consiste cada una de ellas y cómo sacarles partido. [Más]

CSS: cómo cambiar los estilos de un conjunto de elementos cuando haya más de un número determinado de ellos

CSS: cómo cambiar los estilos de un conjunto de elementos cuando haya más de un número determinado de ellos
Imagina que en una aplicación web tienes un listado de fichas de producto en el que cada elemento es una pequeña estructura HTML para mostrar toda la info de cada uno de los productos del listado: foto, nombre, descripción, tamaños, colores, precio... Además, ese conjunto de elementos de información se generan desde una aplicación en el lado servidor, en función de alguna búsqueda o filtro de la base de datos, de modo que *no puedes saber de antemano* desde tu HTML cuántos elementos hay en la lista. Dependiendo de cuántos haya, quieres cambiar el diseño del listado de resultados. Por ejemplo, si hay muy pocos (3 o menos) quieres que se vean más grandes y resaltándolos todo lo que puedas. Sin embargo si hay más 4 o más la ficha de cada producto en el listado será menos llamativa. En este post vamos a ver como conseguir esto *tan solo usando CSS* sin necesidad de programación ni en cliente ni en servidor. Tiene más miga de lo que parece. [Más]

CSS: Cómo igualar la altura de dos cajas flotadas para que sean iguales

CSS: Cómo igualar la altura de dos cajas flotadas para que sean iguales
Imagina que tienes una maquetación básica de un sitio web que tiene una estructura típica: cabecera, cuerpo con dos secciones (lateral y principal) y pie. Para maquetar esto tenemos infinidad de posibilidades, pero supongamos que hemos utilizado cajas flotadas (con float) para definir la sección central, donde está la barra de navegación lateral y el contenido principal de la página. Un efecto negativo habitual de maquetar de esta manera es que si las dos cajas que están una al lado de la otra tienen contenidos muy diferentes en tamaño (lo más habitual de hecho) no tienen la misma altura y quedan descompensadas, creando un efecto muy feo. Te explico cómo solucionarlo usando CSS y un poco de imaginación. [Más]

Este soy yo y este es mi blog técnico, dedicado al software y a la programación.

¡Sígueme en Twitter!

Mis otros blogs

- JM Alarcón @ campusMVP.es
Contenido técnico en español orientado a desarrolladores
- JMAlarcon.es
Blog personal no técnico: sociedad, innovación, empresa...

Krasis

- campusMVP.es:
Los mejores cursos online de programación en español

- SELF LMS:
La plataforma de elearning más potente del mercado.

Histórico