CSS: rgba() en variables SASS + custom properties 29 Mar 2022 10:46 AM (3 years ago)

Para poder usar rgba() junto a variables sass y custom properties hay que transformar el valor del color a rgb, no es válido en hexadecimal.

A continuación 2 formas de usar variables SASS + custom properties en colores rgba y poder hacer uso de la transparencia principalmente.

A). Usando solo un mixin:

@function hexToRGB($hex) { 
  @return red($hex), green($hex), blue($hex); 
}

$color-primary: #ff0000;

:root { 
  --color-primary-rgb: #{hexToRGB($color-primary)};
}

h1{
  color: rgba(var(--color-primary-rgb), 0.5);
}

2. Haciendo uso de la función color de SASS:

@use "sass:color";

$color-primary: #ff0000;

:root { 
  --color-primary-rgb: #{color.adjust($color-primary, $alpha: -0.5)};
}

h1{
  color: var(--color-primary-rgb);
}

Personalmente creo que resulta más cómoda y flexible la opción de usar un mixin.

SASS y custom properties 28 Mar 2022 7:17 AM (3 years ago)

Ejemplos de uso de las custom properties (o tambien conocidas como variables css) de css junto con las variables de SASS.

$color-principal: #222;
$color-secundario: #f02;

:root {
  --color-uno: #{$color-principal};
  --color-dos: #{$color-secundario};
}

Para insertar el valor de variable SASS al de una custom property hay que usar la expresión #{$nombre-de-variable}.

Al hacer esa interpolación se eliminan las comillas de las cadenas, por lo que si tenemos una variable con algún valor entre comillas (como puede ser en una font-family…) tendríamos que usar la función meta.inspect() de sass:

@use "sass:meta";

$fuente-principal: Arial, "Segoe UI", Roboto;

:root {
  --fuente-principal: #{meta.inspect($fuente-principal)};
}

Eliminar la «x» de los input search 26 Mar 2022 7:07 AM (3 years ago)

Si usas chrome/safari y tienes algún input type=»search», este monstrará una «x» a la derecha (que tiene el fin de que al pinchar en ella se borre el texto que haya escrito en el input en ese momento)…. para borrarla puedes insertar las siguientes líneas de css:

input[type="search"]::::-webkit-search-decoration,
input[type="search"]::::-webkit-search-cancel-button,
input[type="search"]::::-webkit-search-results-button,
input[type="search"]::::-webkit-search-results-decoration {
    display: none;
}

cmder: añadir acceso con botón derecho al menu de Windows 14 Mar 2022 10:31 AM (3 years ago)

Entremos en la carpeta de instalación de cmder ejecutar el comando:

Cmder.exe /register

Y a partir de ese momento ya aparecerá el icono de la aplicación de cmder la hacer click con botón derecho en el menu contextual de windows.

Y si quieres quitarlo del menu:

Cmder.exe /unregister

Javascript: Detectar cuando dejas de hacer scroll 6 Mar 2022 7:52 AM (3 years ago)

Función javascript para averiguar el momento en el que el usuario dejar de scrollear en la página web, pudiéndole pasar el tiempo de refresco que más nos interese. por defecto 100 milisegundos.

function noScroll (callback, refresh = 100) {
  if (!callback || typeof callback !== 'function') return;
  let isScrolling;
  window.addEventListener('scroll', function (event) {
    window.clearTimeout(isScrolling);
    isScrolling = setTimeout(callback, refresh);
  }, false);
}

Ejemplo:

See the Pen

Vanilla JS: FadeOut() 18 Feb 2022 1:54 AM (3 years ago)

Simular el efecto FadeOut de jQuery usando solo Vanilla JS. La siguiente función javascript fadeOut() consta de 2 parámetros: elemento y duración (este ultimo opcional) para controlar el tiempo que quermeos que dure la animación.

function fadeOut(element, duration = 600) {
  element.style.display = '';
  element.style.opacity = 1;
  var last = +new Date();
  var tick = function() {
    element.style.opacity = Number(+element.style.opacity - (new Date() - last) / duration).toFixed(4);
    last = +new Date();
    if (-element.style.opacity <= 0) {
      (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16);
    }
  };
  tick();
}

Demo:

Y para el efecto contrario puedes ver: https://www.bufa.es/vanilla-js-fadein/

Composer: actualizar versión en Windows 26 Jan 2022 6:38 AM (3 years ago)

Para actualizar composer a la última versión en Windows, puedes usar el siguiente comando:

composer self-update

CSS: tema claro/oscuro en función de la configuración del usuario en su sistema operativo 12 Jan 2022 9:21 AM (3 years ago)

Para cargar los estilos light/dark automaticamwnte en función de la congifuración que tenga el usuario en su sistema operativo podemos hacer uso de la propiedad media prefers-color-scheme:

A. Por medio de link en el head del documento cargando los archivos de css correspondientes:

<link rel="stylesheet" href="/light-theme.css" media="(prefers-color-scheme: light)" />
<link rel="stylesheet" href="/dark-theme.css" media="(prefers-color-scheme: dark)" />

B. Directamente en el CSS principal:

@media (prefers-color-scheme: dark) {
  /* estilos para tema oscuro */
}

@media (prefers-color-scheme: light) {
  /* estilos para tema tema claro */
}

CSS: botón redondeado con borde exterior 25 Oct 2021 10:58 AM (3 years ago)

Ahora es muy sencillo conseguir ese diseño de botón o elemento con un borde redondeado externo separado x pixeles. Usando la propiedad outline-offset podemos establecer un espacio entre un contorno outline y el límite del elemento.

Antes para conseguir este aspecto teníamos que recurrir a usar otras propiedades menos naturales como box-shadow, y pseudoelementos.

Con outline:

outline: 2px solid black;
outline-offset: 3px;