-
Notifications
You must be signed in to change notification settings - Fork 3
/
css-text-rotation-and-mister-frown.html
64 lines (27 loc) · 3.22 KB
/
css-text-rotation-and-mister-frown.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!--config
Title: "Gist de la semaine: CSS text rotation and Mr. Frown"
Author: Mickael Daniel
Date: Nov 13 2010 19:12:00 GMT-0500 (CDT)
Note: This post is an import from an older wordpress post, as a results not markdown formated
Categories: javascript, css3
config-->
Avec ce billet, j'initie une petite série intitulée Gist de la semaine (qui risque fortement de ne pas se faire toute les semaines <span class="rt-90">:)</span>)
J'essaierais de vous fournir, régulièrement, des extraits de codes qui m'ont amusé ou intrigué. Celui-ci parlera des rotations de texte en CSS et du bout de code que j'ai écrit pour faciliter le processus pour la nouvelle page <a href="/aha-nothing-to-see-there-well-maybe-a-little/">404 de ce blog</a> et le "logo" (pas vraiment un, juste du texte). Cela s'accompagne d'un léger lifting sur le thème utilisé, avec l'adoption d'un ton plus "darky" et un peu d'exotisme sur les liens (text-shadow) mais tout ceci est un peu hors du propos de ce billet.
<h2>Mr. Frown</h2>
Il y a vraiment plein de bonnes choses dans HTML5 Boilerplate. Mon coup de coeur reste la page 404.html, là ou j'ai fait la connaissance de Mr. Frown (qui se cache aussi <a href="/mr-frown-waiting-for-you-there/">ici</a> ou <a href="/dont-click-too-many-times-on-mr-frown-he-doesnt-like-it-so-much/">là</a> le bougre) (Edit 27/12/10: Plus vraiment à jour, le nouveau moteur de blog étant Wheat, les erreurs 404 sont configurés pour retourner la réponse de l'index, plus de Mr Frown donc sur une mauvaise URL, mais il reste ci-dessous...)
Sans plus attendre, un extrait de ce fameux fichier 404 :
<script src="https://gist.github.com/675333.js"></script>
La partie nous intéressant le plus étant:
<script src="https://gist.github.com/675338.js"></script>
Je ne sais pas si cela voulu de la part des auteurs ou s'il s'agit d'un "bug", mais j'ai du ajouter ces préfixes (-webkit; -moz) pour permettre à la rotation de se faire sur les navigateurs webkit et gecko.
Cela nous permet d'inviter la Frown Family (et même de les amener en soirée):
<div class="mk-blog-demo-frown-family">
<p><a href="#do-you-frawn"><span class="frown">:( </span></a></p>
<p><span class="rt-0">*_*</span><span class="rt-0">o_O</span></p>
<p><span class="rt-90">:)</span><span class="rt-90">;)</span><span class="rt-90">X)</span></p>
<p><span class="rt-90">:D</span><span class="rt-90">:P</span><span class="rt-90">;p </span><span class="rt-90">:s</span></p>
<p><span class="rt-90">:(</span><span class="rt-90">:'(</span><span class="rt-90">:(</span><span class="rt-90">=/</span><span class="rt-0">>_<</span></p>
<p class="uncle-O"><span class="rt-90">:O</span></p>
</div>
Ces "smileys", par rapport à des images, ont l'avantage de n'avoir pratiquement aucun poids sur la page, aucune requête http, complètement intégré dans votre sémantique, leur taille peut-être changée à volonté, le spectre de couleur est infini et le tout est entièrement scriptable. Si vous êtes assez fou pour cliquer sur Mr. Frown (le patriarche en haut), vous pourrez vous en rendre compte <span style="margin-left: 0.2em;" frown>;)</span>
Vous pourrez trouver l'ensemble du code relatif à ce post sur ce <a href="https://gist.github.com/675490">gist</a>.