Liste des Tutos CSS

Voici tous les tutoriaux réalisés sur les css.
Mais avant de balancer la liste des liens, voici mon point de vue sur les feuilles de styles.

Il y a encore peu, la mode était à la decoupe des design via photoshop ou fireworks, mais depuis peu les CSS ont pris l'avantage (qu'ils méritent).

Pour les novices, les feuilles de styles sont un fichier externe permettant de mettre en forme son site (x)html. On applique ainsi des couleurs, des bordures, des effets de textes aux balises HTML.

Même si elles sont assez dures à maitriser (à cause des différentes compatibilités navigateur), une fois la logique comprise, on s'étonne de la souplesse et de la puissance qu'apporte ce nouvel outil.

Changer la charte graphique de son site devient un jeu d'enfant. Je vous invite d'ailleurs à visiter le site CssZENgarDen qui est un parfait exemple de la souplesse des CSS.
Ce site est une déclinaison d'UN SEUL ET UNIQUE code html en plus de 150 design différents et originaux. (C'est là que je m'inspire pour narutotrad, desolé).

Pourtant, les CSS ont le défaut de leur qualité. Il devient tellement simple d'appliquer un style que l'on oublie que HTML fournit des balises spécifiques à certaines utilisations (ABBR, ACRONYM, BIG, BLOCKQUOTE,CITE...). Par exemple, la balise ABBR permet de définir une abréviation : <abbr title="Naruto Manga Traduction">NMT</abbr>Cela sera utile dans les futurs (et actuels) moteurs de recherhce, navigateurs et système de synthétisation vocale.

Je vous invite à visiter ce site pour les utilités des différentes balises HTML

Listes des tutos CSS :

• CSS : Un effet de Lettrine


• Precharger ses images sans Javascript

Cette liste s'ettofera (normalement) au fil du temps.

Precharger ses images sans Javascript

Depuis le début de la fin des connexions bas débit, l'optimisation des chargements d'un site est devenue optionnelle. Elle s'est écartée de notre mémoire aussi vite que la monté en puissance de l'ADSL. Mais comme certaines personnes comme moi ce trainent encore avec du 56k, et qu'il est quand même préférable d'optimiser un maximum son site, voici une petite astuce très simple qui vous permettra de précharger vos images sans passer par une tonne de code javascript.

Ici, nous allons utiliser les CSS, comme elles étaient utilisées à une certaine époque pour référencer au mieux son site. Je m'explique.
Afin d'apparaitre au plus haut dans les moteurs de recherches, certains malins utilisaient une astuce toute simple. Créer une calque invisible remplit de mots pertinents pour son site.

Exemple :
Pour Narutotrad, j'aurai pu créer un calque invisible contenant 1000 fois le mots "naruto". Mais cette technique trop utilisée a été contournée par google et autres moteurs de recherches qui ont modifié leur algorithme afin de desceller ces méthodes peu glorieuses.

Et pourtant, c'est cette méthode que nous allons utiliser pour précharger nos images. En effet, une fois chargée, l'image peu être réutiliser X fois sur la même page sans être rechargée.

LE CODE SOURCE :

Dans votre feuille de styles CSS, créer un style nomé "prechargement" :

.prechargement {
display:none; // c'est cette ligne qui specifie que l'on affiche pas le calque
}


Le style ainsi crée, allons dans notre page html. Juste après la balise body, insérer ce code :


<div class="prechargement">
<img src="http://www.narutotrad.com/blog/exemple1.jpg" />
<img src="http://www.narutotrad.com/blog/exemple2.jpg" />
</div>


Voilà, vos images seront affichées de manière invisible, et seront donc préchargées. Avouez que c'est plus facile que du code javascript. Il suffit donc d'insérer les images à précharger entre ces balises div et le tour est joué.

Ce tutorial m'a donné une idée quand à l'optimisation des pages. Un prochain tutorial vous montrera comment utiliser une seule image pour plusieurs boutons de menu. Optimisation, quand tu nous tiens.

Javascript simple : Survol d'image

Ce nouveau post va une nouvelle fois tenter de vous expliquer comment faire quelque chose de compliquer de manière simple. Aujourd'hui c'est le changement d'une image lors de son survol avec la souris.
Il faut souvent écrire des lignes de codes interminables. Ici, avec un code simple, vous n'aurez seulement besoin que d'une ligne de code javascript.

EXEMPLE :


Comment ça marche ?

En fait c'est très simple, on créer une fonction javascript qui specifie une image différente suivant qu'on passe sur l'image ou qu'on en sorte.

Voici le code javascript à insérer entre les balises <head> et </head> :


<script>
function img_hover(id,img)
{
img1 = document.getElementById(id); //image que l'on affiche
img1.src = img;
}
</script>


Cette fonction ci-dessous prend en paramètre l'attribut id de la balise src. Elle prend également le chemin de l'image à afficher.

Voici le code de l'image à mettre dans le body, à l'endroit où vous la voulez :


<img src="http://www.narutotrad.com/blog/exemple1.jpg" id="exemple" onmouseover="img_hover('exemple','http://www.narutotrad.com/blog/exemple2.jpg')" onmouseout="img_hover('exemple','http://www.narutotrad.com/blog/exemple1.jpg')" />



Ici on specifie donc 2 comportements appelant la même fonction mais avec seulement le chemin de l'image qui change.

Je vous conseille tout de même de précharger vos images avant, afin que le rollOver ne rame pas la première fois. Pour précharger facilement vos images, référez vous à ce tutorial.
Vous y découvrirez comment précharger vos images avec les CSS

Vous pouvez laisser vos commentaires.

CSS : Un effet de Lettrine

Commençons se blog avec une explication simple. Vous voyez que le premier message de mon blog, ainsi que la première lettre de chaque post à un effet de lettrine.

Pour le créer, j'utilise une technique très simple via la mise en forme CSS. En gros, on applique à la première lettre d'une balise p une taille de police plus importante, un float gauche et une couleur.

Ca donne ça :

p:first-letter { //Vous remarquerez que first-letter ressemble aux attributs du style a (:hover,:visited, :active)
float:left; //alignement de la lettrine à gauche
font-size:400%;//Taille de la lettrine
color:FF6600;//Couleur de la lettrine
}

Maintenant, ça chaque fois que vous créer un paragraphe via la balise p, la première lettre se transformera en lettrine. Vous pouvez améliorer le script en changeant la police par rapport à celle du paragraphe, en ajoutant un contour, ou un arrière plan.

Vous voyez bien que ce n'est pas compliqué.
Pour l'appliquer à un style en particulier ajouter le nom du style dans la css.

.votrestyle p:first-letter
{
float:left;
font-size:400%;
color:FF6600;
}

Voilà, j'espère que ce premier tutorial vous servira.
Je vous conseille fortement d'apprendre les rudiments des css, car ceux si vous offriront une bien plus grande souplesse que des tableaux ou des assistants de mise en forme tel que dreamweaver.

Je vous invite d'ailleur à télécharger le logiciel Topstyle pour vous aider dans la création de vos CSS.

Ouverture du blog CreactiveX

Bien que critiquant énormémemnt les blogs, j'ai décidé d'en créer un afin de proposer ici toutes mes astuces de développement ou de création graphique. Etant webmaster de Narutotrad.com, site consacré au scantrad Naruto, je suis quotidienement confrontée à tout ceux qui touche la retouche d'image et le développement d'application web pour le site.
Pour ceux qui voit ici de l'amateurisme, je tiens juste à préciser que j'ai une formation de chef de projet multimédia.

Ce blog contiendra donc des outils simples pour vos sites, et des techniques de retouches abordables pour tous ceux qui veulent prendre la peine de prendre 5 minutes.

J'espère que mon blog vous intéressera, et qu'il se distinguera de ses nouveaux journaux intimes dont tout le monde se désintéressent.

A bientôt sur le Blog de CreactiveX ou sur Narutotrad