logo W3C en CSS

FF_Olivier · Message par **FF_Olivier** » 18 mai 2005, 02:23

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à

...

arno. · Message par **arno.** » 18 mai 2005, 03:25

qqc chose comme ça

http://infomesh.net/2000/12/wcaglogo/

martin · Message par **martin** » 18 mai 2005, 05:46

à 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>

FF_Olivier · Message par **FF_Olivier** » 18 mai 2005, 11:18

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

!

SIBELIUS · Message par **SIBELIUS** » 18 mai 2005, 12:05

Si tu veux vraiment t'amuser avec ça :
http://blog.alsacreations.com/2004/06/0 ... -css-suite

martin · Message par **martin** » 18 mai 2005, 12:10

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)

FF_Olivier · Message par **FF_Olivier** » 18 mai 2005, 12:25

SIBELIUS a écrit :Si tu veux vraiment t'amuser avec ça :
http://blog.alsacreations.com/2004/06/0 ... -css-suite

Houlà, ça prend une tout autre dimension, là

...

FF_Olivier · Message par **FF_Olivier** » 18 mai 2005, 12:28

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

...

SIBELIUS · Message par **SIBELIUS** » 18 mai 2005, 12:28

FF_Olivier a écrit :
SIBELIUS a écrit :Si tu veux vraiment t'amuser avec ça :
http://blog.alsacreations.com/2004/06/0 ... -css-suite
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

calimo · Message par **calimo** » 18 mai 2005, 13:37

Sinon il y a le SVG que je ne connais pas mais qui permet surement le même genre de choses

FF_Olivier · Message par **FF_Olivier** » 18 mai 2005, 14:42

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.

martin · Message par **martin** » 19 mai 2005, 18:51

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">&reg;</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.

FF_Olivier · Message par **FF_Olivier** » 19 mai 2005, 22:27

De mieux en mieux, bravo

!

Geckozone

logo W3C en CSS

logo W3C en CSS

Qui est en ligne ?