logo W3C en CSS
-
- Iguane
- Messages : 979
- Inscription : 09 juil. 2004, 15:41
logo W3C en CSS
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à ...
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à ...
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 !
userContent.css : modifiez l'apparence et le contenu des sites visités !
à 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>
-
- Iguane
- Messages : 979
- Inscription : 09 juil. 2004, 15:41
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 !
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 !
userContent.css : modifiez l'apparence et le contenu des sites visités !
Si tu veux vraiment t'amuser avec ça :
http://blog.alsacreations.com/2004/06/0 ... -css-suite
http://blog.alsacreations.com/2004/06/0 ... -css-suite
Tutoriels et blog (X)HTML / CSS : css.alsacreations.com
Forum Standards / CSS : forum.alsacreations.com
Forum Standards / CSS : forum.alsacreations.com
-
- Iguane
- Messages : 979
- Inscription : 09 juil. 2004, 15:41
Houlà, ça prend une tout autre dimension, là ...SIBELIUS a écrit :Si tu veux vraiment t'amuser avec ça :
http://blog.alsacreations.com/2004/06/0 ... -css-suite
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 !
userContent.css : modifiez l'apparence et le contenu des sites visités !
-
- Iguane
- Messages : 979
- Inscription : 09 juil. 2004, 15:41
Je trouve ça déjà fort bien, il y a moyen d'extrapoler pas mal de trucs plus ou moins design avec ça ...martin a écrit :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)j'ai saisi l'astuce pour l'ombre du «C».
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 !
userContent.css : modifiez l'apparence et le contenu des sites visités !
Et surtout un autre poids !!!FF_Olivier a écrit :Houlà, ça prend une tout autre dimension, là ...SIBELIUS a écrit :Si tu veux vraiment t'amuser avec ça :
http://blog.alsacreations.com/2004/06/0 ... -css-suite
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
Forum Standards / CSS : forum.alsacreations.com
-
- Iguane
- Messages : 979
- Inscription : 09 juil. 2004, 15:41
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.calimo a écrit :Sinon il y a le SVG que je ne connais pas mais qui permet surement le même genre de choses
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 !
userContent.css : modifiez l'apparence et le contenu des sites visités !
Surement encore à améliorer, mais j'ai trouvé un truc pour ne pas doubler le C dans le texte :
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.
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>
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.
-
- Iguane
- Messages : 979
- Inscription : 09 juil. 2004, 15:41
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 !
userContent.css : modifiez l'apparence et le contenu des sites visités !
Qui est en ligne ?
Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 1 invité