Page 1 sur 1
logo W3C en CSS
Publié : 18 mai 2005, 02:23
par FF_Olivier
Petit exercice
:
est-ce quelqu'un sait comment afficher le plus fidèlement possible avec FF une version pure (X)HTML+CSS du logo du W3C ? Donc pas une image mais bien en texte formaté ? Une idée déjà de la police à utiliser ?
J'ai cherché "W3C en CSS" sur Google, mais c'est trop vague, je n'ai rien de probant...
PS : ça devrait donc s'approcher de ça :
...mais ça, vous le saviez déjà
...
Publié : 18 mai 2005, 03:25
par arno.
Publié : 18 mai 2005, 05:46
par martin
à améliorer surement...
Code : Tout sélectionner
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Document sans titre</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
#logo {
font-family: GillSans, Arial, Helvetica, sans-serif;
color: #0C479D;
font-size: 2.7em;
font-weight: 100;
text-decoration: none;
letter-spacing: -0.15em;
border-color: #000;
border-style: solid;
border-width: 1px 0;
}
#c1 {
color: black;
letter-spacing: -0.5em;
}
#c2 {
color: white;
position: relative;
top: -0.1em;
left:-0.2em;
}
#r {
font-family: Arial, Helvetica, sans-serif;
font-size: 0.3em;
color: black;
}
//-->
</style>
</head>
<body>
<img src="w3c_home.png" alt="w3c_home.png, 1 kB" title="w3c_home" height="48" width="72">
<a id="logo" href="#">
<span id="w">W</span><span id="n3">3</span><span id="c1">C</span><span id="c2">C</span><sup id="r">®</sup>
</a>
</body>
</html>
Publié : 18 mai 2005, 11:18
par FF_Olivier
Ah oui, c'est effectivement déjà une bonne base de travail, je n'avais pas pensé à celui qu'.arno présente mais pourquoi pas, c'est une belle réalisation, et grâce au code de martin j'ai saisi l'astuce pour l'ombre du «C».
Merci beaucoup à tous les deux
!
Publié : 18 mai 2005, 12:05
par SIBELIUS
Publié : 18 mai 2005, 12:10
par martin
j'ai saisi l'astuce pour l'ombre du «C».
Enfin çà ne convient pas plus que çà, le résultat en texte est " W3CC®", mais sur l'instant je n'ai trouvé que cette idée. Si quelqu'un trouve quelque chose de plus pertinent... (text-shadow ne fait plus partie de css2.1)
Publié : 18 mai 2005, 12:25
par FF_Olivier
Houlà, ça prend une tout autre dimension, là
...
Publié : 18 mai 2005, 12:28
par FF_Olivier
martin a écrit : j'ai saisi l'astuce pour l'ombre du «C».
Enfin çà ne convient pas plus que çà, le résultat en texte est " W3CC®", mais sur l'instant je n'ai trouvé que cette idée. Si quelqu'un trouve quelque chose de plus pertinent... (text-shadow ne fait plus partie de css2.1)
Je trouve ça déjà fort bien, il y a moyen d'extrapoler pas mal de trucs plus ou moins design avec ça
...
Publié : 18 mai 2005, 12:28
par SIBELIUS
FF_Olivier a écrit :
Houlà, ça prend une tout autre dimension, là
...
Et surtout un autre poids !!!
Bon, tu t'en doutes, ce n'est pas très exploitable en pratique, je t'ai donné le llien pour amusement
Publié : 18 mai 2005, 13:37
par calimo
Sinon il y a le SVG que je ne connais pas mais qui permet surement le même genre de choses
Publié : 18 mai 2005, 14:42
par FF_Olivier
calimo a écrit :Sinon il y a le SVG que je ne connais pas mais qui permet surement le même genre de choses
Oui sûrement, en plus sous linux j'ai «hérité» je ne sais plus trop comment d'un plugin SVG
libmozsvgdec.so, et j'étais allé voir sur une page de démo, ça donnait déjà pas trop mal pour une version alpha.
Publié : 19 mai 2005, 18:51
par martin
Surement encore à améliorer, mais j'ai trouvé un truc pour ne pas doubler le C dans le texte :
Code : Tout sélectionner
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Document sans titre</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
#logo {
font-family: GillSans, Arial, Helvetica, sans-serif;
color: #0C479D;
font-size: 2.7em;
font-weight: 100;
text-decoration: none;
letter-spacing: -0.15em;
border-color: #000;
border-style: solid;
border-width: 1px 0;
}
#n3 {
}
#c {
color: black;
letter-spacing: -0.69em;
}
#c:after {
content: "C";
color: white;
vertical-align: 0.06em;
letter-spacing: normal;
}
#r {
font-family: Arial, Helvetica, sans-serif;
font-size: 0.3em;
color: black;
letter-spacing: normal;
}
//-->
</style>
</head>
<body>
<img src="w3c_home.png" alt="w3c_home.png, 1 kB" title="w3c_home" height="48" width="72">
<a id="logo" href="#">
<span id="w">W</span><span id="n3">3</span><span id="c">C</span><sup id="r">®</sup>
</a>
</body>
</html>
Attention avec la propriété 'letter-spacing' de #c, si on la pousse trop, son contenu disparait à l'écran.
Evidemment IE n'en connait pas tant, le C n'a simplement pas d'ombrage et reste noir.
Le résultat "texte" (sans css), est W3C®
, c'est plus propre que l'essai précédent.
Publié : 19 mai 2005, 22:27
par FF_Olivier
De mieux en mieux, bravo
!
