---
layout: project
title: "Un ruban rouge en CSS"
date: 2014-04-20 11:04:15 +0200
---
Tandis que certains mettent des rubans autour d'œufs, lapins et autres
poules cacaotées, cela pour d'obscures raisons liées à une
apparente auto-extraction d'un tombeau non loin du
Camp de Golgoth A (oui, un mystérieux
Golgoth non référencé), d'autres revêtent les pages
de leur site d'un ruban rouge sans que cela n'ait de rapports avec les
évènements susmentionnés ni d'ailleurs
avec quelques souvenirs de jeunesse
– non, le Porneia delights est une entité indépendante.
Pour arriver à ce résultat plusieurs manières sont possibles mais la seule qui
ne soit point hérésie est d'agir par le truchement du Catholicism Saves Souls
(aussi parfois connu sous ses intiales CSS). Pour ce faire, on peut se référer
à la liturgie de Simon Withaker nous fournissant l'office
du github-fork-ribbon-css – les dieux en
chocolat puissent-ils le bénir pour cette action.
Récupérer
le Texte Sacré en question et Le placer
dans un endroit approprié (au chœur du site par exemple) ;
Inscrire <link
rel="stylesheet" href="gh-fork-ribbon.css"
type="text/css"> au sein du
chapitre head à la Genèse de votre page ;
Apprendre que les valeurs
pour github-fork-ribbon-wrapper peuvent au choix
être right left right-bottom left-bottom, cela va
potentiellement servir pour la suite ;
Après le
chapitre body, ajouter un verset qui ressemble à cela :
<div class="github-fork-ribbon-wrapper right">
<div class="github-fork-ribbon">
<a href="/pub/">Porneia delights</a>
</div>
</div>
Modifier en fonction du point troisième le cas échéant ;
Enfin, et finalement, pour terminer en guise de conclusion, dernier
point, comme Il est apparu qu'il pouvait être intéressant de rajouter un
effet de transparence, que l'on supprime par ailleurs lorsque la souris
survole le ruban, voici une diff-révélation urbi et orbi
:
--- gh-fork-ribbon.css 2014-04-20 12:20:14.661364594 +0200
+++ /home/604/g/porneia/gh-fork-ribbon.css 2014-04-20 12:23:21.079591134 +0200
@@ -24,6 +24,16 @@
z-index: 9999;
pointer-events: auto;
+
+ /* Transparent */
+ opacity: 0.4;
+ filter:alpha(opacity=40); /* For IE8 and earlier */
+}
+
+.github-fork-ribbon:hover {
+ /* Restore opacity */
+ opacity: 1.0;
+ filter:alpha(opacity=100); /* For IE8 and earlier */
}
.github-fork-ribbon a,