Snippets Collections

Recent | Popular

view_listList view view_moduleGrid view
content_copy

#html5 #"title #tooltip

Código html5 que reproduce un tooltip situado en cada uno de los 4 puntos cardinales principales. 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;

  /* Position the tooltip text */
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;

  /* Fade in tooltip */
  opacity: 0;
  transition: opacity 0.3s;
}

/* Tooltip arrow */
.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

    </style>
</head>
<body>
    <div class="tooltip">Hover over me
        <span class="tooltiptext">Tooltip text</span>
      </div>
</body>
</html>
content_copy

#html5 #css

Estilos css para la fecha o calendario de texto 
#fecha {
    font-family: 'frijole';
    color: navy;
    background-image: linear-gradient(orange,
            fuchsia,
            springgreen,
            fuchsia,
            dodgerblue,
            springgreen,
            fuchsia,
            orange,
            orange,
            fuchsia,
            springgreen);
    background-repeat: no-repeat;
    background-size: cover;
    background-size: cover;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}
content_copy

#html5 #javascript

Código html para mostrar la fecha 
<div id="fecha"></div>

<script src="js/fecha.js"></script>
content_copy

#html5 #javascript

Función javascript que obtiene y muestra la fecha actual 
function fetxa() {
    const diasSemana = ["Domingo", "Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado"];
    const meses = ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Júnio", "Júlio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"];
    var fexa = new Date();
    var hoy = diasSemana[fexa.getUTCDay()];
    var dia = fexa.getUTCDate();
    var mes = meses[fexa.getUTCMonth()];
    var any = fexa.getUTCFullYear();

    document.getElementById("fecha").innerHTML = `<span>${hoy} ${dia}, del mes de ${mes} del ${any}</span>`;
    
}
content_copy

#css #html5

Código css para obtener texto, letras o frases multicolor o de varios colores 
[selector] {
    font-family: 'frijole';
    color: navy;
    background-image: linear-gradient(rgb(44, 42, 42),
            rgba(240, 255, 255, 0.767),
            rgb(44, 42, 42),
            rgba(245, 245, 220, 0.747),
            rgb(44, 42, 42),
            rgba(255, 166, 0, 0.89),
            rgb(44, 42, 42),
            rgba(220, 20, 60, 0.822),
            rgb(44, 42, 42));
    background-repeat: no-repeat;
    background-size: cover;
    background-size: cover;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}
content_copy

#html #css #javascript #html5

link del cdn cdnfonts.com para conseguir la tipografía DS-Digital 
<link href="https://fonts.cdnfonts.com/css/ds-digital" rel="stylesheet">
content_copy

#html #css #javascript #html5

Código javascript para crear un reloj digital formato 24h sombra-1 
function digital() {
    let laHora = new Date();

    let horas = laHora.getHours();

    if (horas < 10) {
        horas = "0" + horas;
    }


    let minutos = laHora.getMinutes();

    if (minutos < 10) {
        minutos = "0" + minutos;
    }


    let segundos = laHora.getSeconds();

    if (segundos < 10) {
        segundos = "0" + segundos;
    }


    const reloj = `<aside id="relojillo"><h1>${horas} : </h1> <h2>${minutos}</h2><sup><h3> : ${segundos}</h3></sup></aside>`;

    const salida = document.getElementById("elReloj").innerHTML = reloj;

    setTimeout(digital, 1000);


    return salida;
}
digital();
content_copy

#html #css #javascript #html5

Código html necesario para insertar el reloj digital sombra-1 
<body>
    <aside id="elReloj"></aside>
    <script src="js/digital02.js"></script>
</body>
content_copy

#html #css #javascript #html5

Código css para un estilo general del reloj digital sombra-1 
  <style>
      * {
          box-sizing: border-box;
      }
      
      @font-face {
          font-family: 'ds-digital';
          src: url('./ds_digital/DS-DIGII.TTF');
      }
      body {
          
      }
      #relojillo {
          width: fit-content;
          height: auto;
          position: relative;
          background-image: linear-gradient(232deg, #888, #888, #888);
          margin: auto auto;
          text-align: center;
          background-color: transparent;
          padding: 10% 10%;
      }
      
      #relojillo h1,
      #relojillo h2,
      #relojillo h3 {
          display: inline-block;
          font-family: 'ds-digital';
          font-size: 43pt;
          text-shadow: 0vw -3vw .1vw #999, -.3vw 4vw .1vw #f0f8ff;
          color: khaki;
          padding: 0vw .2vw;
      }
      #relojillo h3 {
          font-size: 21pt !important;
          text-shadow: 0vw -3vw .1vw orange, -.3vw 4vw .1vw orange;
      }
  </style>
content_copy

#html5 #css

NOT A CODE BUT A REMINDER FOR RESPONSIVE WEBSITE 
Pixels are static values which may work for certain dimensions but will cause problems and hinder design at different dimensions/views(mobile-desktop)

For responsive web design it is a must to follow certain design practices :

1- No Pinch Zoom: Solved by applying viewport correctly.
2- No Horizontal Scrolling: Solved by using relative sizing and positioning and instead of absolute positioning.
3- Font-size Handling: Use em and rems instead of pixels.
4- Layout: Use Media Queries,Flexboxes, Bootstrap etc.
content_copy

#html #htmltags #webdev #basics #html5

Image tag <img> to insert images 
<img 
	src="example.com/cat.png" 
    alt="Photo of a cat" 
    height="50" 
    width="100"
    longdesc="#catDetails"
 >

Código html5 que reproduce un tooltip situado en cada uno de los 4 puntos cardinales principales.
star

Thu Jun 22 2023 22:11:33 GMT+0000 (Coordinated Universal Time)

#html5 #"title #tooltip

Estilos css para la fecha o calendario de texto
star

Thu Jun 22 2023 21:43:50 GMT+0000 (Coordinated Universal Time)

#html5 #css

Código html para mostrar la fecha
star

Thu Jun 22 2023 21:39:29 GMT+0000 (Coordinated Universal Time)

#html5 #javascript

Función javascript que obtiene y muestra la fecha actual
star

Thu Jun 22 2023 21:37:02 GMT+0000 (Coordinated Universal Time)

#html5 #javascript

Código css para obtener texto, letras o frases multicolor o de varios colores
star

Thu Jun 22 2023 21:33:16 GMT+0000 (Coordinated Universal Time)

#css #html5

link del cdn cdnfonts.com para conseguir la tipografía DS-Digital
star

Thu Jun 22 2023 21:25:35 GMT+0000 (Coordinated Universal Time)

#html #css #javascript #html5

Código javascript para crear un reloj digital formato 24h sombra-1
star

Thu Jun 22 2023 21:12:00 GMT+0000 (Coordinated Universal Time)

#html #css #javascript #html5

Código html necesario para insertar el reloj digital sombra-1
star

Thu Jun 22 2023 21:10:29 GMT+0000 (Coordinated Universal Time)

#html #css #javascript #html5

Código css para un estilo general del reloj digital sombra-1
star

Thu Jun 22 2023 21:08:09 GMT+0000 (Coordinated Universal Time)

#html #css #javascript #html5

NOT A CODE BUT A REMINDER FOR RESPONSIVE WEBSITE
star

Wed Oct 21 2020 11:42:38 GMT+0000 (Coordinated Universal Time) https://stackoverflow.com/questions/59611088/is-it-good-practice-to-use-vh-and-vw-for-applying-padding-margin-width-and-heigh

#html5 #css

Image tag <img> to insert images
star

Tue Jan 07 2020 19:00:00 GMT+0000 (Coordinated Universal Time)

#html #htmltags #webdev #basics #html5

Save snippets that work with our extensions

Available in the Chrome Web Store Get Firefox Add-on Get VS Code extension