CSS - 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 :)

mercredi 30 janvier 2008

Des centaines de ressources pour webdeveloppers

mercredi 30 janvier 2008 - 11:07 | Catégorie : Webdesign | 5 commentaires | aucun rétrolien

Web Developper's Field Guide est un site qui regroupe des centaines et des centaines de ressources afin d'accompagner les webdeveloppers dans leurs créations web.