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

Ceci répertorie ce qui n'entre pas dans ls autres catégories.
Verrouillé
Avatar du membre
Dakin Quelia
Webmaster
Webmaster
Messages : 565
Enregistré le : ven. 27 nov. 2009 05:47
Localisation : Belgique
Contact :

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

Message par 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 :
css_box_pokemon_style.png
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 ».

Verrouillé

Qui est en ligne

Utilisateurs parcourant ce forum : Aucun utilisateur enregistré et 2 invités