Trucsweb.com

Trucsweb 1997-2017

Le site des Trucsweb a maintenant 20 ans! 20 ans de gratuit mur-à-mur, peu importe que vous soyez à Montréal, Paris ou Ouagadougou, que vous soyez riche, pauvre ou éducateur ; -). « C’est un endroit que chacun peut visiter pour apprendre et partager ses connaissances » pour paraphraser Wikipédia. C’est aussi des milliers de dollars déboursés pour les couts d’un serveur Web. La publicité c’est bien, mais trop peu pour payer les frais d’hébergement toujours plus cher.

Il va sans dire que je m'adresse beaucoup aux institutions d'enseignement et aux corporations, particulièrement les géants de ce monde qui bénéficie de PROMOTION GRATUITE sur les sites des webmestres comme celui des Trucsweb! Les Google et Microsoft de ce monde. Le fournisseur d'hébergement des Trucsweb qui a bénéficié d'une grande visibilité certainement pas étrangère a son succès. Mais aussi l'Organisation internationale de la Francophonie par exemple. Car la majorité des visiteurs des Trucsweb proviennent de l'ensemble des pays de la francophonie. Pays pour la plupart, outre L'Europe (80%), berceau de l'humanité et surtout des plus pauvres de notre brillante civilisation.

jours restants pour la campagne de financement 2017-2037 ;- )
Objectif : 5000 €

Je vous remercie d’envisager de faire un don afin de perpétuer cette longue tradition francophone qui a maintenant 20 ans.

Merci,
Django Blais, L’Isle-Verte (Québec)


CSS

Pure CSS3

RDFFav

Notification en pure CSS3

Il n’y a pas de plus simple usage du sélecteur « :target ».notification, popup, pure css, css3, sélecteur, animation

Exemple « erreur » Exemple « avertissement » Exemple « succès »

Le plus simple exemple de la série « Pure CSS3 » avec le sélecteur :target! Pourquoi s’en passer! Tellement simple qu’on aurait pensé le retrouver dans un Bootstrap, mais non. Voilà un exemple de notification fixe en haut de la page ouverte à l’aide du sélecteur :target ...avec les couleurs Bootstrap.

/* CSS */
.cNote {
  ...
  opacity:0;
}

.cNote:target{
  ...
  opacity:1;
}

Exemples
CSS
<style>
  body{-webkit-backface-visibility:hidden}
  .cNote{
    position:fixed;
    top:0;
    left:0;
    min-height:60px;
    line-height:60px;
    width:100%;
    z-index:1000;
    text-align:center;
    font-size:18px;color:#fff;
    background: rgba(0, 0, 0, 0.8);
    opacity:0;
    -webkit-transition: opacity 200ms ease-in;
    -moz-transition: opacity 200ms ease-in;
    transition: opacity 200ms ease-in;
    pointer-events: none;
  }
  .cNote:target{
    opacity:1;
    pointer-events: auto;
  }
  .cNote .erreur{background-color: rgba(246, 71, 71, 0.7) }
  .cNote .succes{background-color:rgba(3, 201, 169, 0.7)}
  .cNote .attention{background-color: rgba(247, 202, 24, 0.7)}
  .cNote a.cFerme {color:#ffffff;margin:0 10px 0 10px;float:right;}
</style>
  
HTML
    <div class="cNote" id="oNote">
      <div class="erreur"><a href="#fermer" title="Fermer la fenêtre" class="cFerme">X</a> Note 1</div>
    </div>
    <div class="cNote" id="oNote2">
      <div><a href="#fermer" title="Fermer la fenêtre" class="cFerme">X</a> Note 2</div>
    </div>
    <div class="cNote" id="oNote3">
      <div class="attention"><a href="#fermer" title="Fermer la fenêtre" class="cFerme">X</a> Note 3</div>
    </div>
    <div class="cNote" id="oNote4">
      <div class="succes"><a href="#fermer" title="Fermer la fenêtre" class="cFerme">X</a> Note 4</div>
    </div>
    <div class="container">
      <a href="#oNote">Bouton erreur</a> - <a href="#oNote2">Bouton message</a> - <a href="#oNote3">Bouton attention</a> - <a href="#oNote4">Bouton succès</a>
    </div>
  

Manipulation JavaScript

Quel ironique d’utiliser le JavaScript dans une technique en pure CSS. Il s’agit seulement de changer l’opacité, que le JavaScript peut aussi faire. Mais si le besoin se fait sentir, c’est aussi simple que d’ouvrir le lien ou plutôt la cible #oNote:

<script>
  window.location = "#oNote";
</script>
À l’ouverture de la page
<script>
document.addEventListener('DOMContentLoaded', function () {
  window.location = "#oNote";
});
</script>
Avec un délai de 5 secondes

<script>
setTimeout(function() {window.location = "#oNote";}, 5000);
</script>
Avec un délai de fermeture
C’est exactement la même chose, mais en ciblant #fermer. Par exemple ici après un délai de 5 secondes :

<script>
setTimeout(function() {window.location = "#fermer";}, 5000);
</script>

X Une erreur est survenue !
X Note 2
X Attention, veuillez lire attentivement !
X Wow, ça c’est de la note !
, Analyste programmeurConception oznogco multimédia (http://oznogco.com), Trucsweb
Dernière mise à jour :

Commentaires

8/10 sur 1 revues.
       Visites : 1932 - Pages vues : 2161
X

Trucsweb.com Connexion

Connexion

X

Trucsweb.com Mot de passe perdu

Connexion

X

Trucsweb.com Conditions générales

Conditions

Responsabilité

La responsabilité des Trucsweb.com ne pourra être engagée en cas de faits indépendants de sa volonté. Les informations mises à disposition sur ce site le sont uniquement à titre purement informatif et ne sauraient constituer en aucun cas un conseil ou une recommandation de quelque nature que ce soit.

Aucun contrôle n'est exercé sur les références et ressources externes, l'utilisateur reconnaît que les Trucsweb.com n'assume aucune responsabilité relative à la mise à disposition de ces ressources, et ne peut être tenue responsable quant à leur contenu.

Droit applicable et juridiction compétente

Les règles en matière de droit, applicables aux contenus et aux transmissions de données sur et autour du site, sont déterminées par la loi canadienne. En cas de litige, n'ayant pu faire l'objet d'un accord à l'amiable, seuls les tribunaux canadien sont compétents.

X

Trucsweb.com Trucsweb

X

Trucsweb.com Glossaire

X

Trucsweb.com Trucsweb

X

Trucsweb.com Trucsweb

Conditions

Aucun message!

Merci.

X
Aucun message!
X

Trucsweb.com Créer un compte

Créer un compte

.
@