Comment il font ?

[phelibre]

Bonjour,

Mon petite perso sur quelques modestes créations d'infographies n'est plu au goût du jour il me semble. Sa structure est vieille de plus de 5 ans http://phelibre.free.fr ... et je cherche un peu d'inspiation :zen:

J'ai remarqué le site http://www.alsacreations.com/ et j'ai quelques interrogations.
- Comment ils font pour faire l'effet de lumière sous les gros icônes du menu ?
- Je n'ai trouvé comment il ont fait les dégradés verts du menu ?

Merci,

 

[ntx]

Pose la question sur leur forum, je pense que le créateur du site te répondra.
Sinon, pour inspecter une page, active le menu "Développement" de Safari via les préférences "Avancées". C'est bien pratique

 

[GraphiqueDesign]

... peut être déjà commencer par laisser tomber la mise en page à l'aide des tableaux imbriqués (très limités graphiquement) et leurs préférer les CSS ... d'ailleurs, sur alsacréations, on explique excellemment bien ce que sont les CSS et leurs avantages !!!

 

[phelibre]

Oui Oui, on me l'a dit et justement je voulais reprendre ou supprimer mes tableaux et utiliser <div> Mais après réflexion je me demande si je ne ferais pas mieux de reprendre complètement le design de mon site ?

 

[GraphiqueDesign]

Oui Oui, on me l'a dit et justement je voulais reprendre ou supprimer mes tableaux et utiliser <div> Mais après réflexion je me demande si je ne ferais pas mieux de reprendre complètement le design de mon site ?

... Phelibre, quand j'ai fait la connaissance des CSS, ça m'a tellement ouvert de nouveaux horizons que j'ai complètement revu en profondeur ma manière de concevoir les sites Internet. Les possibilités par rapport au table sont quasi sans limite, de toute façon, l'apprentissage des CSS, tu n'en sortira pas indemne

 

[phelibre]

Bien compris,

Sans vouloir d'éterniser, pour bien appréhender les css pour le web design, quelques sont les sites qui seraient les plus simples aux niveaux des tutoriels ?

 

[momo-fr]

La structure du menu est une liste classique :

  <ul id="menu">
    <li id="menu-apprendre"><a href="http://www.alsacreations.com/apprendre/"><img alt="Apprendre" src="http://www.alsacreations.com/css/img/menu-apprendre.png" width="102" height="111" /></a></li>

    <li id="menu-forum"><a href="http://forum.alsacreations.com/"><img alt="Forum" src="http://www.alsacreations.com/css/img/menu-forum.png" width="105" height="114" /></a></li>
    <li id="menu-emploi"><a href="http://emploi.alsacreations.com/"><img alt="Emploi" src="http://www.alsacreations.com/css/img/menu-emploi.png" width="122" height="105" /></a></li>
  </ul>

Les images sont en .png transparent, on ajoute un comportement au survol de la <li> du menu (et aussi au focus) avec le style suivant (cela aoute une image en background de la <li> soit sous l'image .png) :

ul#menu li:hover, ul#menu li:focus {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(img/halo.png) no-repeat scroll 0 35px;
}

Cela permet de faire un menu sur différents fonds de couleur (bandeau) avec les même icônes.

Vive le .png transparent.

Si souci avec ie6 on passe par un hack ou une solution javascript pour simuler. ceci dit ie6 c'est fini pour moi, plus un seul hack sauf réel souci avec un client (facturation en sus pour la compatibilité).

Pour le fond du header les styles sont les suivants :

#header {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:black url(img/header-bg-green.jpg) no-repeat scroll 50% 35px;
}

Soit cette image en background du <header>.

Pour découvrir et comprendre les feuilles de styles des sites je te conseille la configuration suivante :

Firefox + plug-in Web Developper + plug-in FireBug, tu pourras ainsi comprendre la structure (squelette CSS) et les styles via Firebug.