Xhtml - Guillaume Bizet's Blog | Blogging, Web2.0, Dotclear et Dotclear2

lundi 21 avril 2008

Calculatrice em / px

lundi 21 avril 2008 - 09:12 | Catégorie : Xhtml / CSS | 2 commentaires | aucun rétrolien

CSS
Xhtml

Logo Calculator

Dans la construction d'un site et d'une feuille de style, il est très important de faire attention aux unités employées pour la police d'écriture car cela impacte directement sur les propriétés css enfants de la balise parent.
Je m'explique :


body { font-size : 0.8em; }

p {font-size: 0.6em;}

Ainsi la police d'écriture du paragraphe p est directement liée à celle de body. Par contre il est difficile de savoir, quand on construit sa feuille de style, cmment convertir une police en pixels vers sont équivalent en unité em.

L'Em calculator va vous faciliter le travail. Elle vous permet de faire la conversion entre ces unités et de voir quels seront les conséquences d'un changement de taille au niveau de la balise parent.

Screenshots :

Cliquez sur les images pour les voir en grand

A vos calculettes ...

vendredi 15 février 2008

Un effet gradient sur du texte en CSS

vendredi 15 février 2008 - 11:19 | Catégorie : Xhtml / CSS | 9 commentaires | aucun rétrolien

Je trouve cette solution très ingénieuse pour pouvoir appliquer un effet de gradient sur du texte et en CSS.
Cela peut paraitre compliqué, et pourtant !!! C'est là que l'on voit la puissance des CSS

Voici comme le réaliser.
Code xhtml

[html4strict]
<h1><span></span>CSS Gradient Text</h1>

et code CSS

[html4strict]
h1 {
  font: bold 330%/100% "Lucida Grande";
  position: relative;
  color: #464646;
}
h1 span {
  background: url(gradient.png) repeat-x;
  position: absolute;
  display: block;
  width: 100%;
  height: 31px;
}

la clé du succès se situe dans les paramètres h1 { position: relative } et h1 span { position: absolute }

Si vous le souhaitez vous pouvez très bien adapter ce système pour donner un effet web2.0 à tous vos titres.
Pour cela réalisez le png qui va bien ;)

Les avantages de cette technique :

technique valide pour tous les navigateurs puisqu'elle n'intègre pas de javascript ou de flash
vous pouvez utiliser la police que vous souhaitez

Voir des démonstrations
Télécharger un package de test

Merci WebDesignerWall

samedi 2 février 2008

Vrak de blogs #11

samedi 2 février 2008 - 10:02 | Catégorie : Vrak de blogs | 2 commentaires | aucun rétrolien

Les "Vrak de blogs" sont pour moi l'occasion de partager avec vous les liens intéressant que j'ai pu trouver sur les différents blogs que je lis régulièrement.
Ces liens, pour la plupart, j'aurais pu en parler et faire un billet sur mon blog mais soit je n'ai pas eu le temps de le faire, soit l'information a été tellement diffusée qu'il n'y avait aucun intérêt à le faire une nouvelle fois.

Voici mon vrak de blog édition n°11

20 Resources for Freelancers et Freelancers: Track your time- via Tutorial blog
5 astuces pour améliorer la compatibilité CSS de Internet Explorer - via chris sur Smashing Coding
Avec Clipmarks, mettez de côté des morceaux de web pour les consommer plus tard - via Presse Citron
Plus de 60 tutoriels Web Design 2.0 - via chris sur Smashing Coding
wSlide, plugin jquery qui va faire glisser vos listes - via K-ny
Corriger les bug de IE avec un Fichier CSS - via Jarodxxx
Les regie publicitaires - via Le blog Vendeesign
The book is open - via MyBlogLog : le blog
Petit ménage des dossiers vides - via Jean-François
Readburner évolue dans le bon sens - via nioumedia
Téléchargez de la musique avec Woonz... - via Fredzone
Google Maps 250 ans en arrière ! - via Koops
La HD débarque sur Dailymotion! - via Stagueve
Sprout Builder, un éditeur de widget en ligne - via Fred Cavazza
Wordpress: réussir son changement d’hébergement en 7 étapes ! - via Fran6
Morning Café pour Firefox : les agrégateurs ne lui disent pas merci - via Presse Citron
Design CSS liquide (ou fluide) encadré d’images répétées… sans table - via Bruno sur css4design
Une extension Dreamweaver qui facilite l’utilisation de Jquery. - via Julien Verkest
CSS with a better approach - via Dezinerfolio
Sleep.fm, le réveil communautaire - via Christophe de Homo Sapiens Internetus
Télécharger Qtrax : le P2P gratuit et légal - via Vincent Abry
Etes-vous indexé rapidement ? - via Papy Geek
gDocsBar - tout le contenu de votre Google Document dans la sidebar de Firefox - via Accessoweb
Des tonnes de fonds d’écrans gratuits - via Nicolargo
Pour les amoureux du tennis - via caledosphere

Enjoy, stay tuned et bonne fin de week-end :)

vendredi 18 janvier 2008

101 Techniques CSS

vendredi 18 janvier 2008 - 09:07 | Catégorie : Xhtml / CSS | un commentaire | aucun rétrolien

Mémento CSS

Le blog noupe a regroupé dans un billet 101 techniques CSS qui méritent d'être mieux connues.
Elle sont classées par catégories :

CSS Sprites
Coins arrondis
Technique de remplacement d'images
Portes coulissantes
Technique d'encadrement d'une image par du texte
Colonnes de même taille
Transformer une liste en barre de navigation
Stylisation des titres
Ombres en CSS
Transparence CSS
Différentes techniques sur les liens

Vous trouverez tout sur ce billet ... en anglais ;)

Si avec ça vous avez pas des sites/blogs au cordeau !!!

mercredi 19 décembre 2007

Validez html et css en même temps

mercredi 19 décembre 2007 - 09:07 | Catégorie : Xhtml / CSS (188 lectures) | 4 commentaires | aucun rétrolien

Xhtml CSS vlidator : logo

Vous connaissez bien sur les sites officiels pour faire valider la sémantique de votre site web :

validator.w3.org pour contrôler la partie HTML de votre site/blog
et jigsaw.w3.org/css-validator/ pour contrôler la partie CSS

et bien le site Xhtml CSS validator va vous faciliter la tâche puisqu'il fait les 2 validations en même temps.

Cliquez sur l'image pour la voir en grand

J'ai fait le test pour mon blog et voici le résultat

Cliquez sur l'image pour la voir en grand

Au passage si quelqu'un peut m'expliquer cette erreur CSS qui me fait ch***, je serai ravi de comprendre d'où elle vient puisque je ne trouve pas cette ligne dans mes fichiers CSS !!!

Vous pourrez même trouver sur ce site une extension pour firefox appelée BeValid! spécialement développée pour vérifier la validité Xhtml et CSS de l'url dans la barre d'adresse.

Alors, pratique non ?