Google propose un service permettant d'afficher automatiquement le favicon (définition sur  Wikipédia) d'un site, converti au format png.

Il suffit d'afficher l'image suivante :

<img src="http://www.google.com/s2/favicons?domain=domaine.extension" />

en remplaçant domaine.extension par ceux correspondant au site (sans http://).

Par exemple :

<ul>
    <li><img src="http://www.google.com/s2/favicons?domain=google.fr" alt="" />&nbsp;<a href="http://www.google.fr">http://www.google.fr</a></li>
    <li><img src="http://www.google.com/s2/favicons?domain=cowblog.fr" alt="" />&nbsp;<a href="http://www.cowblog.fr">http://www.cowblog.fr</a></li>
    <li><img src="http://www.google.com/s2/favicons?domain=facebook.com" alt="" />&nbsp;<a href="http://www.facebook.com">http://www.facebook.com</a></li>
</ul>

•  http://www.google.fr
•  http://www.cowblog.fr
•  http://www.facebook.com

text-shadow : nouvelle propriété css qui permet d'appliquer une ombre à un texte (pas si nouvelle que ça puisqu'elle était déjà présente dans la norme CSS 2 mais pas reprise par les navigateurs à l'exception de Safari).

Syntaxe :

	 text-shadow: [-]décalage_horizontal [-]décalage_vertical flou couleur; 	

text-shadow: [-]décalage_horizontal [-]décalage_vertical flou couleur;

1. le décalage horizontal peut être positif (vers la droite) ou négatif (vers la gauche)
2. le décalage vertical peut être positif (vers le bas) ou négatif (vers le haut)
3. il est possible d'ajouter plusieurs ombres en les séparant par une virgule.

Exemples :

	 <p style="text-shadow: 2px 2px 2px #000;>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 	

<p style="text-shadow: 2px 2px 2px #000;>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

	 <p style="text-shadow: 2px 2px 2px #0000ff, 4px 4px 2px red, 6px 6px 2px #ffff00;>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 	

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

	 <h1 style="text-shadow: 5px 5px 5px #000;">Titre d'un article</h1> 	

Lorem ipsum dolor sit amet

	 <h1 style="text-shadow: 5px -5px 5px #000;">Lorem ipsum dolor sit amet</h1> 	

Lorem ipsum dolor sit amet

	 <h1 style="text-align: center; color: #fff; text-shadow: 3px 3px 5px #0000ff, -3px -3px 5px #0000ff, -3px 3px 5px #0000ff, 3px -3px 5px #0000ff;">Lorem ipsum dolor sit amet</h1> 	

Lorem ipsum dolor sit amet

Si vous utilisez toujours Internet Explorer, même dans sa dernière version, voici l'image de ce que vous verriez si vous utilisiez un navigateur moderne digne de ce nom (Mozilla Firefox 3.5, Safari 3, Opera 9.5, Google Chrome) :

Nécessite : modification de la feuille css (offre Premium/Premium+)

Par défaut, le bouton « Ajouter ce commentaire » est aligné à gauche.

Certains sont parvenus à le centrer en utilisant des margin ce qui n'est pas l'idéal, puisqu'il n'est pas centré mais décalé.

Pour le centrer correctement, la solution est de le transformer en "bloc", en utilisant la propriété css « display: block; » et ensuite les propriétés qui permettent de centrer un bloc.

	 #commentsub {
	display: block;
	position: relative;
	margin-left: auto;
	margin-right: auto;
}

Seul petit problème, un saut de ligne supplémentaire apparaît maintenant sous le bouton. S'il vous gêne, il suffit de le cacher :

	#commentsub + br {
	display: none;
}

Notre bouton est bien aligné et le saut de ligne a disparu \o/

Il était assez difficile d'insérer une playlist de Jiwa sur Cowblog dans la mesure où elle utilisait des balises <table> qui ne sont pas autorisées.

Ce n'est plus le cas de la nouvelle version, parfaitement utilisable aussi bien dans le code html libre que dans un article.

Nouvel article publié sur Sakatruc.