ASTUCE: Body qui apparait après chargement en 2 lignes

Un truc que je teste sur ma page de générateur de comics pour masquer le chargement de la page...

Minimaliste...


/* Dans le Head */
<style type="text/css">body{opacity: 0;transition: opacity 1s}
/* balise body */
<body onload="document.body.style.opacity=1" >

Nouvel article

Je n'ai pas lu le contenu du lien mais ça ne me paraît pas si contre intuitif que ça : quand ton appli commence à avoir du succès auprès des utilisateurs, les demandes d'amélioration ne se font pas attendre dont certaines, n'étant pas du tout envisagées au départ, peuvent entraîner soit une réécriture plus complexe de l'appli, soit - pire - un patch à la scie sauteuse et au pistolet à colle qui complique l'appli, son usage et son architecture... (#sansdeconner)

Via https://nicolas-delsaux.hd.free.fr/Shaarli/?9O0OvQ

- HTML (HyperText Markup Language) | MDN

Le jour où tu t'aperçois comme un abruti que l'input de type range prévoit la possibilité d'ajouter des repères et même des repères avec des labels !

Genre:

<input type="range" list="tickmarks">
<datalist id="tickmarks">
  <option value="0" label="0%">
  <option value="10">
  <option value="20">
  <option value="30">
  <option value="40">
  <option value="50" label="50%">
  <option value="60">
  <option value="70">
  <option value="80">
  <option value="90">
  <option value="100" label="100%">
</datalist>
Est-ce que je deviens trop   vieux pour tout ça ?!

EDIT: Ha mais c'est pas standardisé, tous les navigateurs ne l'utilisent pas... firefox par exemple...

OUF !  C'est pas moi le problème !

CSS Tips - Marko Denic - Web Developer

Je suis fan de ces astuces minimalistes...

  • filter:drop-shadow(2px 4px 8px #585858); pour faire une ombre sur des images à fond transparent.
  • scroll-behavior: smooth; pour activer le smooth scroll
  • .center { display: flex; align-items: center; justify-content: center; } pour centrer horizontalement et verticalement
  • white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pour tronquer un texte
  • caret-color:red pour changer la couleur du curseur de texte

Ou encore la fenêtre modale SANS javascript:


/* If you like this, be sure to ❤️ it. */
.wrapper {
  height: 100vh;
  /* This part is important for centering the content */
  display: flex;
  align-items: center;
  justify-content: center;
  /* End center */
  background: -webkit-linear-gradient(to right, #834d9b, #d04ed6);
  background: linear-gradient(to right, #834d9b, #d04ed6);
}

.wrapper a {
  display: inline-block;
  text-decoration: none;
  padding: 15px;
  background-color: #fff;
  border-radius: 3px;
  text-transform: uppercase;
  color: #585858;
  font-family: 'Roboto', sans-serif;
}

.modal {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(77, 77, 77, .7);
  transition: all .4s;
}

.modal:target {
  visibility: visible;
  opacity: 1;
}

.modal__content {
  border-radius: 4px;
  position: relative;
  width: 500px;
  max-width: 90%;
  background: #fff;
  padding: 1em 2em;
}

.modal__footer {
  text-align: right;
  a {
    color: #585858;
  }
  i {
    color: #d02d2c;
  }
}
.modal__close {
  position: absolute;
  top: 10px;
  right: 10px;
  color: #585858;
  text-decoration: none;
}
Via https://sebsauvage.net/links/

Le dimanche, c'est cadeau: T'as pas de ball...

Moi quand je serai grand  je serai comique  pasque  moi  je fais des jeux de mots rigolos

Oui  ben en attendant  si tu pouvais arrêter de me pourrir systématiquement TOUS mes titres

Le confinement nouveau est arrivé et avec lui plein de nouvelles raisons de se poser des questions exitentielles (non, j'ai pas fait de faute) (GAG)

Pour y répondre et vous guider dans vos choix, plutôt que de vous fier aux oracles, haruspices et autres politiciens qui vous noieront sous des mensonges, des billevesées voire même des promesses électorales, pourquoi ne pas utiliser la bonne vieille 8 ball magique ?

Du coup, je vous en propose une. Sous forme d'API. Oui.

Tu poses ta question dans ta tête, tu vas sur https://api.warriordudimanche.net/8ball et tu as ta réponse. Par contre, elle est parfois un peu franche...

Fil RSS des articles