XHTML-CSS

2000 Templates de site XHTML et CSS gratuits

29/01/10

Posté par Claude BUENO dans XHTML-CSS

Aucun commentaire

2000 Templates de site XHTML et CSS gratuits

Le site Open Source Web Design propose plus de 2000 Templates de site XHTML et CSS à télécharger gratuitement. Vous pouvez soit les utiliser tel quel ou bien vous en inspirer pour vos créations.

,

Transformer une maquette Photoshop en Template XHTML/CSS

28/01/10

Posté par Claude BUENO dans XHTML-CSS

1 commentaire

Transformer une maquette Photoshop en Template XHTML/CSS
Dans ce tutorial consacré à la conception web, vous verrez les différentes étapes pour convertir une maquette Photoshop en modèle HTML/CSS.

Ce tutorial est composé de deux parties :

  1. Concevoir la maquette avec Photoshop
  2. Convertir la maquette en XHTML/CSS

Site de Six Revisions : http://sixrevisions.com

, ,

Outils de compression CSS en ligne

8/06/09

Posté par Claude BUENO dans XHTML-CSS

3 commentaires

Atelier xhtml cssDans le but d’optimiser les temps de chargement de vos pages, il peut être très intéressant de compresser votre fichier contenant les styles. La méthode consiste à fusionner les sélecteurs et les propriétés identiques.

Une fois que votre feuille de styles (CSS) est finalisée et que vous avez validé sa conformité avec le W3C Validator, vous pouvez la soumettre à la moulinette de ces outils de compression CSS.

Mon préféré : CLEANCSS car il propose plusieurs niveaux de compression.
CleanCSS

D’autres outils en ligne :

Si vous utilisez un tel outil et que vous souhaitez nous le faire partager, laissez-nous un commentaire.

Gérer la transparence des images en CSS

14/04/09

Posté par Claude BUENO dans XHTML-CSS

3 commentaires

Atelier xhtml css

Dans la conception de votre nouveau projet web vous avez besoin de mettre en place un effet de transparence. Pour mettre en place cet effet, vous avez deux possibilités : utiliser une image intégrant la transparence ou bien utiliser CSS. La mise en place de la seconde solution semble être la meilleure car vous pouvez régler le niveau de transparence plus facilement, ce qui n’est pas le cas avec une image pré-produite.

La mise en place de cette transparence en CSS s’effectue grâce à la propriété Microsoft filter s’appliquant à un élément HTML.

Syntaxe :

filter:alpha(opacity=50);
/* Réduit l'opacité à 50% */

Seulement voilà, cette propriété n’est reconnue que par Internet Explorer et la valeur de la transparence doit être comprise entre 0 et 100. Il faut donc compléter cette prise en compte pour Firefox, Safari et les recommandations W3C. Pour ce faire, il existe d’autres propriétés à utiliser :

  • Pour Firefox : -moz-opacity:XX;   (0<XX<1)
  • Pour Safari : -khtml-opacity:XX;   (0<XX<1)
  • Pour W3C : opacity:XX;   (0<XX<1)

XX est la valeur de la transparence à utiliser.

Pour illustrer cette mise en place de la transparence, nous allons mettre en place un CSS prenant en charge les différents cas de figure. Voici la classe monbloc :

Code CSS

.monbloc {
    background : #010415;
    filter:alpha(opacity=50);
   -moz-opacity:0.5;
   -khtml-opacity: 0.5;
   opacity: 0.5;
}

Code HTML

<div class="monbloc">
<p>Lorem ipsum eam odio qualisque efficiantur cu, propriae...</p>
</div>

Il ne vous restera plus qu’à régler le degré de transparence à votre convenance et rien ne vous empêche de mettre en place un effet différent suivant le navigateur qui ouvrira le site.

Effet transparence sous IE8

Effet transparence sous IE8

Insérer une animation flash valide W3C

9/02/09

Posté par Claude BUENO dans XHTML-CSS

Aucun commentaire

Nous allons voir la méthode permettant d’insérer une animation Adobe Flash à une page HTML tout en étant respectueux des recommandations du W3C.

Le W3C (World Wide Web Consortium) émet des recommandations qui ont valeur de standards garantissant la compatibilité des technologies WWW.

Dans le cas où vous devez insérer une animation Flash dans une page HTML, il y a de fortes chances que le code que vous allez générer à partir de votre éditeur favori ressemble à l’exemple ci-dessous. Dans lequel, nous souhaitons afficher l’animation Flash nommée « ref-clients.swf » ayant pour dimensions 350 pixels de large pour 132 pixels de hauteur.

Ce code commence par vérifier si le visiteur est capable de visualiser l’animation. Dans le cas contraire, il sera redirigé vers la page de téléchargement du plugin Flash Player de chez Adobe. Ensuite l’animation est chargée et est visualisée grâce au Flash Player intégré au navigateur.

Jusque là aucun problème : vous pouvez ouvrir avec votre navigateur la page HTML fraichement créée et vous verrez bien l’animation Flash.

Les choses se compliquent lors de la soumission de votre page à la validation du W3C. En effet, la balise « embed » n’a plus lieu d’être. Il faut donc contourner le problème en utilisant une balise reconnue par le W3C et qui aura pour effet de lancer l’animation Flash. Dans ce cas il faut mettre en pratique la balise « object type » qui annonce le type d’objet qui devra être lu. Puis on donne les précisions suivantes : le nom du fichier et ses dimensions.

Petite astuce qui peut-être utile pour que les moteurs de recherche puissent identifier de quoi il en retourne : il est possible de mettre une description de l’animation juste avant de fermer la balise « object« .

J’espère que ce billet donnera un petit coup de main aux « codeurs » et si vous aussi, vous avez une bonne pratique sur ce sujet, laissez-nous un commentaire :nous partagerons notre expérience.

12»