logo W3C en CSS

HTML5, CSS3, Javascript, support des mobiles... Que penser de votre site ? Vous manquez d'informations pour la construction d'un site qui puisse s'afficher correctement partout ? C'est un problème simple, un peu complexe ? Venez ici !
Répondre
FF_Olivier
Iguane
Messages : 979
Inscription : 09 juil. 2004, 15:41

logo W3C en CSS

Message 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 :

Image

...mais ça, vous le saviez déjà ;) ...
openSUSE 12.2 - FF v24.0 FR - TB v24.0 FR ma config en détails - Décrivez la vôtre ici ;)
userContent.css : modifiez l'apparence et le contenu des sites visités !
arno.
Varan
Messages : 1347
Inscription : 19 août 2004, 12:26

Message par arno. »

martin
Varan
Messages : 1074
Inscription : 21 janv. 2004, 16:23

Message 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>
FF_Olivier
Iguane
Messages : 979
Inscription : 09 juil. 2004, 15:41

Message 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 ;) !
openSUSE 12.2 - FF v24.0 FR - TB v24.0 FR ma config en détails - Décrivez la vôtre ici ;)
userContent.css : modifiez l'apparence et le contenu des sites visités !
SIBELIUS
Lézard vert
Messages : 146
Inscription : 09 sept. 2003, 23:21

Message par SIBELIUS »

Si tu veux vraiment t'amuser avec ça :
http://blog.alsacreations.com/2004/06/0 ... -css-suite :)
Tutoriels et blog (X)HTML / CSS : css.alsacreations.com
Forum Standards / CSS : forum.alsacreations.com
martin
Varan
Messages : 1074
Inscription : 21 janv. 2004, 16:23

Message 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)
FF_Olivier
Iguane
Messages : 979
Inscription : 09 juil. 2004, 15:41

Message par FF_Olivier »

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à :lol: ...
openSUSE 12.2 - FF v24.0 FR - TB v24.0 FR ma config en détails - Décrivez la vôtre ici ;)
userContent.css : modifiez l'apparence et le contenu des sites visités !
FF_Olivier
Iguane
Messages : 979
Inscription : 09 juil. 2004, 15:41

Message 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 ;) ...
openSUSE 12.2 - FF v24.0 FR - TB v24.0 FR ma config en détails - Décrivez la vôtre ici ;)
userContent.css : modifiez l'apparence et le contenu des sites visités !
SIBELIUS
Lézard vert
Messages : 146
Inscription : 09 sept. 2003, 23:21

Message par SIBELIUS »

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à :lol: ...
Et surtout un autre poids !!! :lol:
Bon, tu t'en doutes, ce n'est pas très exploitable en pratique, je t'ai donné le llien pour amusement :)
Tutoriels et blog (X)HTML / CSS : css.alsacreations.com
Forum Standards / CSS : forum.alsacreations.com
calimo
Animal mythique
Messages : 14118
Inscription : 26 déc. 2003, 11:51

Message par calimo »

Sinon il y a le SVG que je ne connais pas mais qui permet surement le même genre de choses :wink:
FF_Olivier
Iguane
Messages : 979
Inscription : 09 juil. 2004, 15:41

Message 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 :wink:
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.
openSUSE 12.2 - FF v24.0 FR - TB v24.0 FR ma config en détails - Décrivez la vôtre ici ;)
userContent.css : modifiez l'apparence et le contenu des sites visités !
martin
Varan
Messages : 1074
Inscription : 21 janv. 2004, 16:23

Message 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">&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® :D , c'est plus propre que l'essai précédent.
FF_Olivier
Iguane
Messages : 979
Inscription : 09 juil. 2004, 15:41

Message par FF_Olivier »

De mieux en mieux, bravo ;) !
openSUSE 12.2 - FF v24.0 FR - TB v24.0 FR ma config en détails - Décrivez la vôtre ici ;)
userContent.css : modifiez l'apparence et le contenu des sites visités !
Répondre

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 1 invité