Cursos online y materiales digitales para estudiantes y desarrolladores web

snippet

Snippet: pasar un color de hexadecimal a RGB en PHP

Publicado el por Leave a Comment

En CSS tenemos muchas posibilidades de trabajar con imágenes sobre las que superponemos colores, degradados, etc. Se conoce como “color overlay”.

Pero hay determinadas propiedades CSS que no admiten colores en hexadecimal y necesitamos pasarlos, sí o sí, en formato RGB, es decir, con las tres componentes en decimal.

Por ejemplo, el color rojo se define como #FF0000 en hexadecimal y en RGB sería (255, 0, 0). Además, muchas de las las reglas CSS que requieren del color en RGB añaden un cuarto parámetro para la transparencia/opacidad, quedando el valor de la siguiente forma: rgb(255, 255, 255, 0.5).

Recientemente he necesitado trabajar con datos dinámicos en el lado del servidor que almacenan un valor de color que posteriormente debo pasar a una hoja de estilos CSS mediante una variable. Eso, quizá, lo dejamos para el próximo artículo.

El caso es que necesitaba una función para pasar de hexadecimal a RGB en PHP que fuera “fácil, sencilla, y para toda la familia”. ¿Se puede hacer más comprimida? ¡Claro! Pero así puedes entender en detalle cada instrucción.

He aquí la función:

$opacidad = "0.5"; //Equivale al 50%
$colorHexadecimal = "#FF0000";
$split = str_split(substr($colorHexadecimal,1), 2);
  $r = hexdec($split[0]);
  $g = hexdec($split[1]);
  $b = hexdec($split[2]);
$colorRGB= "rgb(" . $r . ", " . $g . ", " . $b . ", $opacidad)";

¡Veamos paso a paso!

  1. Almacenamos en dos variables la opacidad y el color en hexadecimal.
  2. Con substr nos quedamos con los 6 dígitos que hay a partir de la almohadilla.
  3. Mediante str_split dividimos la cadena en un array de trocitos de 2 caracteres, tal y como indica el segundo parámetro.
  4. Pasamos el valor de cada elemento del array de hexadecimal a decimal con hexdec y lo almacenamos en una variable de color.
  5. Creamos una variable colorRGB a la que le pasamos literalmente el texto rgb y los paréntesis, y como parámetros las tres componentes de color y la variable opacidad.

¿Tienes una propuesta mejor? ¡Compártela! Para ello te recomiendo que utilices alguna herramienta online de testing de código como Codepen, JSFiddle, PlayCode, etc. o repositorios como GitHub, GitLab, BitBucket…

Snippet: hacer una ventana modal (modal box) con Javascript

Publicado el por Leave a Comment

Una ventana modal o modal box es un recuadro que aparece sobre la página, con la particularidad de que bloquea todas las funciones y concentra el foco en una acción particular, de modo que el usuario solamente puede hacer esa acción o cerrar la ventana.

Las ventanas modales se activan cuando el usuario hace clic en un botón, un link, etc. (si apareciera automáticamente se consideraría un pop-up).

Hay mil maneras de crear una ventana modal: sólo con CSS, con CSS y Javascript, con librerías…

En esta ocasión os traigo un snippet para crear una ventana modal, o modal box, utilizando HTML, CSS y Javascript.

Comenzamos por el HTML, que será el siguiente:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <h2>Ventana modal</h2>

  <button id="abrirModal">Abrir Modal</button>

  <!-- Ventana modal, por defecto no visiblel -->
  <div id="ventanaModal" class="modal">
    <div class="modal-content">
        <span class="cerrar">&times;</span>
        <h2>Ventana modal</h2>
        <p>Esto es el texto de la ventana</p>
    </div>
  </div>
</body>
</html>

Como puedes comprobar, tenemos un botón con un identificador abrirModal que nos permitirá utilizarlo en Javascript para asociarle el evento que abrirá la ventana modal.

Y, además, tenemos la ventana modal que, por defecto, no será visible, ya que en CSS hemos utilizado la propiedad correspondiente para ocultarla.

El primer div, llamado ventanaModal, lo utilizaremos para ocultar toda la página principal con un fondo negro con opacidad del 50%; el segundo, llamado contenidoModal, hace referencia a la ventana o caja, propiamente dicha.

Veamos ahora el CSS, paso a paso:

body {font-family: Arial, Helvetica, sans-serif;}

/* Fondo modal: negro con opacidad al 50% */
.modal {
  display: none; /* Por defecto, estará oculto */
  position: fixed; /* Posición fija */
  z-index: 1; /* Se situará por encima de otros elementos de la página*/
  padding-top: 200px; /* El contenido estará situado a 200px de la parte superior */
  left: 0;
  top: 0;
  width: 100%; /* Ancho completo */
  height: 100%; /* Algura completa */
  overflow: auto; /* Se activará el scroll si es necesario */
  background-color: rgba(0,0,0,0.5); /* Color negro con opacidad del 50% */
}

Como puedes ver, inicialmente establecemos la fuente de la página en el body a Arial, Helvetica o cualquier fuente sin serifa en caso de que las dos anteriores no existieran.

Y seguidamente, creamos el modal, es decir, el color negro con opacidad que se superpone sobre la pantalla evitando hacer clic sobre nada que haya por debajo. Podrás ver que inicialmente está oculto mediante display: none; que cuando se visualice se situará por encima del resto de elementos de la pantalla gracias al z-index: 1; y que necesitaremos utilizar el modo rgba para indicar la opacidad en la propiedad background-color.

Veamos ahora la ventana o caja modal, propiamente dicha:

.contenido-modal {
  position: relative; /* Relativo con respecto al contenedor -modal- */
  background-color: white;
  margin: auto; /* Centrada */
  padding: 20px;
  width: 60%;
  -webkit-animation-name: animarsuperior;
  -webkit-animation-duration: 0.5s;
  animation-name: animarsuperior;
  animation-duration: 0.5s
}

Como puedes ver, se sitúa con una posición relativa sobre el contenedor, por lo que como hemos indicado anteriormente que tendrá un padding-top de 200px, esta ventana se verá 200px por debajo del borde.

Además, será de color blanco, centrada gracias al margin: auto, tendrá un padding en todos los bordes de 20px y un ancho con respecto al contenedor del 60%.

Por último, estamos incluyendo una pequeña animación llamada animarsuperior que tiene una duración de 0,5 segundos. Añadimos el prefijo -webkit- para navegadores basados en Chromium, como Chrome o Safari. Veamos esa animación:

/* Add Animation */
@-webkit-keyframes animatetop {
  from {top:-300px; opacity:0} 
  to {top:0; opacity:1}
}

@keyframes animarsuperior {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}

Como puedes comprobar, para definir la animación utilizamos @keyframes, e indicamos que partiremos de una posición de -300 con opacidad 0, y terminaremos con una posición de 0 con opacidad 1. Utilizamos el mismo prefijo que en el caso anterior para asegurarnos que funciona en navegadores Chrome y Safari.

.close {
  color: black;
  float: right;
  font-size: 30px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

En este último código CSS añadimos los estilos del elemento que contiene la X de cierre de la ventana: en color negro, alineado a la derecha… y cuando nos colocamos sobre ella o toma el foco, no tendrá subrayado y el cursor tomará el valor de una mano.

Visto esto, solamente nos queda la parte de Javascript. Comenzamos guardando en variables los tres elementos que utilizaremos: la ventana modal, el botón que la ejecuta y el span que la cierra.

// Ventana modal
var modal = document.getElementById("ventanaModal");

// Botón que abre el modal
var boton = document.getElementById("abrirModal");

// Hace referencia al elemento <span> que tiene la X que cierra la ventana
var span = document.getElementsByClassName("cerrar")[0];

A continuación puedes ver los tres eventos que vamos a ejecutar. Cuando el usuario hace clic en el botón, cambiamos el valor del display a block, mostrando la ventana modal.

Y en el caso de que el usuario haga clic en la X o en cualquier parte del fondo negro, la ventana volverá a ocultarse, ya que cambiamos el valor del display a none.

// Cuando el usuario hace clic en el botón, se abre la ventana
boton.addEventListener("click",function() {
  modal.style.display = "block";
});

// Si el usuario hace clic en la x, la ventana se cierra
span.addEventListener("click",function() {
  modal.style.display = "none";
});

// Si el usuario hace clic fuera de la ventana, se cierra.
window.addEventListener("click",function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
});

¡Y eso es todo! ¿A que es más sencillo de lo que parece? ¡Echa un ojo en el código fuente en funcionamiento!

Snippet: cambiar el texto de un botón al hacer click

Publicado el por Leave a Comment

Os traigo un sencillo snippet que nos permite modificar el texto de un botón al hacer click sobre él, en respuesta a la duda que nos planteó Cristian en el canal de Youtube:

Duda Yutube - Cambiar texto botón al hacer click
Duda en Youtube – Cambiar texto de un botón al hacer click sobre él

La solución es muy sencilla: simplemente hay que asociar una función al evento “click” del botón en la que cambiamos el valor de su atributo “value” al que necesitemos.

¡Os dejo el snippet donde podéis verlo!