[CSS] Créer des boîtes des types Pokémons

[Dakin Quelia]

» Créer des boîtes des types Pokémons

Dans cette documentation, je vais vous expliquer comment créer en CSS des boîtes pour les types des Pokémons comme dans le Pokédex.

Cette documentation vous sera utile si vous comptez faire un mini-site sur Pokémon. Toutefois, les codes peuvent être adaptés pour autre chose, bien évidemment.

Créons un fichier que l'on nommera « types.css » dont le contenu sera :

Code : Tout sélectionner

/* Type Pokemon
------------------------------------------- */
.typeContent {
	font-size: 1.3em; 
	line-height: 0.9em;
}

.typeImage {
    font-size: 10px;
    color: #FFF;
    background-color: #AAA;
    border-radius: 8px;
    border-width: 1.5px;
    border-style: solid;
    border-color: rgba(255, 255, 255, 0.8);
    box-shadow: 0px 0px 2px #666;
    position: relative;
    top: -4px;
    display: inline-block;
	margin-top: 5px;
    margin-left: 5px;
    min-width: 55px;
    padding: 0px 5px;
    font-weight: 500;
    text-shadow: 0px 0px 0px transparent, 1px 1px 2px #000;
    text-align: center;
	text-transform: uppercase;
}

.type-fee {
    background-color: #E1A1E7;
}

.type-acier {
    background-color: #BAB9CA;
}

.type-fantome {
    background-color: #7A76C3;
}

.type-psy {
    background-color: #DF59AA;
}

.type-electrik {
    background-color: #F3D765;
}

.type-feu {
    background-color: #DB4A4C;
}

.type-vol {
    background-color: #82A2EF;
}

.type-combat {
    background-color: #AE5D51;
}

.type-eau {
    background-color: #65AEF8;
}

.type-normal {
    background-color: #B8B8AB;
}

.type-roche {
    background-color: #BFB77C;
}

.type-glace {
    background-color: #9BE7F9;
}

.type-insecte {
    background-color: #B9CF50;
}

.type-tenebre {
    /*background-color: #89695C;*/
	background-color: #2C2A2A;
}

.type-dragon {
    background-color: #8A75EB;
}

.type-plante {
	background-color: #92D769;
}

Ensuite, il suffit simplement dans votre fichier HTML d'y placer ce code :

Code : Tout sélectionner

<div class="typeContent">
	<span class="typeImage type-eau"><span>Eau</span></span> 
	<span class="typeImage type-dragon"><span>Dragon</span></span> 
	<span class="typeImage type-feu"><span>Feu</span></span> 
	<span class="typeImage type-electrik"><span>Electrique</span></span> 
	<span class="typeImage type-plante"><span>Plante</span></span> 
	<span class="typeImage type-psy"><span>Psy</span></span> 
	<span class="typeImage type-tenebre"><span>Ténèbre</span></span> 
	<span class="typeImage type-fee"><span>Fée</span></span> 
	<span class="typeImage type-fantome"><span>Fantôme</span></span> 
	<span class="typeImage type-normal"><span>Normal</span></span> 
	<span class="typeImage type-vol"><span>Vol</span></span>
</div>

Evidemment, vous utilisez ceux dont vous avez besoin au bon endroit. Mais attention la <div> doit être conservée.

Voici ce que cela peut donner comme résultat :

Il ne vous reste plus qu'à adapter ceci comme bon vous semble.

» Mot de la fin

Cette documentation peut vous servir à une autre utilité que celle prévue initialement. Ces petites boîtes peuvent être utilisées comme « tag ».