Rappel du premier message :
Ceci est un code de Races crée suite à la Demande d'Eternal Moon, ici.
On ne voit pas très bien, mais au passage de la souris sur la 1ère alternative, l'image "glisse" pour laisser voir le texte (si le groupe est ouvert, prioritaire ou fermé), sur la deuxième c'est le même effet mais sur le nom du groupe. Pour la troisième, le texte est visible sous le titre (il n'y a donc pas de mouvement) mais le nom de race se déplace horizontalement au passage de la souris.
L'image de Titre est en 700px*200px.
Les images du haut pour chaque race sont en 500px*100px.
Les images de gauche/droite de chaque texte de race sont en 200px*400px.
Vous pouvez modifier la police des titres en changeant le link présent dans le code (ou en le retirant) et en changeant toutes les occurrences de la police (ici Calligraffitti) dans le CSS.
HTML:
CSS:
HTML:
CSS:
HTML:
CSS:
Fiche de Races
Ceci est un code de Races crée suite à la Demande d'Eternal Moon, ici.
CSS3 & HTML5 ▬ Code mit sous hide ▬ Alternative 1 (mouvement sur image) ▬ Alternative 2 (mouvement sur nom de race) ▬ Alternative 3 (aucun mouvement)
On ne voit pas très bien, mais au passage de la souris sur la 1ère alternative, l'image "glisse" pour laisser voir le texte (si le groupe est ouvert, prioritaire ou fermé), sur la deuxième c'est le même effet mais sur le nom du groupe. Pour la troisième, le texte est visible sous le titre (il n'y a donc pas de mouvement) mais le nom de race se déplace horizontalement au passage de la souris.
Dimension des images
L'image de Titre est en 700px*200px.
Les images du haut pour chaque race sont en 500px*100px.
Les images de gauche/droite de chaque texte de race sont en 200px*400px.
Vous pouvez modifier la police des titres en changeant le link présent dans le code (ou en le retirant) et en changeant toutes les occurrences de la police (ici Calligraffitti) dans le CSS.
Alternative 1
HTML:
CSS:
Alternative 2
HTML:
CSS:
Alternative 3
HTML:
CSS:
Dernière édition par NyoTheNeko le Jeu 12 Juin 2014 - 13:08, édité 2 fois
Et merci du partage :)
