+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Les réalisations de la communauté (https://jeuweb.org/forumdisplay.php?fid=39)
+--- Forum : Jeux jouables (https://jeuweb.org/forumdisplay.php?fid=52)
+--- Sujet : [MMO WEB] Mechas War - Un jeu de ROBOTS avec des boulons dedans! (/showthread.php?tid=6385)
RE: [MMO WEB] Mechas War - Un jeu de ROBOTS avec des boulons dedans! - starmindfr - 12-03-2015
ok merci je vais faire un test avec l'interface 1 et la 2eme map pour voir ce que cela donne.
RE: [MMO WEB] Mechas War - Un jeu de ROBOTS avec des boulons dedans! - @lucard - 12-03-2015
Idem que Θττ, un mixe des 2 serait bienvenu.
Un truc du genre pour ma part.
avec la possibilité de masquer les "blocs" sur le côté.
![[Image: MECHA.png]](http://upload.dinhosting.fr/6/a/0/MECHA.png)
click to enlarge.
RE: [MMO WEB] Mechas War - Un jeu de ROBOTS avec des boulons dedans! - Sephi-Chan - 12-03-2015
Je préfère la première carte. Les couleurs sont plus sympas et le quadrillage rend bien. Il n'y a que les disques représentant les planètes qui sont moins jolis.
RE: [MMO WEB] Mechas War - Un jeu de ROBOTS avec des boulons dedans! - starmindfr - 12-03-2015
oui en effet, la 2eme est juste en nuances de gris ce qui a l'air assez penalisant, et regrouper les icones sur 1 ligne en haut est assez sympa comme idée merci.
A voir apres si le "fractionnement" de l'info sur gauche / droite du 1er ecran qui laisse le haut vierge rend l'ensemble plus aéré ?
PS : @Lucard avec quel outil as tu fais la maquette d’écran ?
RE: [MMO WEB] Mechas War - Un jeu de ROBOTS avec des boulons dedans! - @lucard - 12-03-2015
@starmindfr
Photoshop est mon ami. =)
Je viens de m'inscrire et je trouve dommage que certaine page html soient lourdement codée.
<div style="position: relative; top: 55px; float: right; width: 8px; height: 407px; border: 1px solid rgb(255, 255, 255); border-radius: 5px; background-color: rgb(0, 0, 255); background-clip: padding-box;"></div>tu as des redondances dans tes codes, utilise un fichier css plutôt que de tout marquer sur tes balises html.
(certe si tu n'as pas de "viewer direct" c'est chiant, mais ce n'est pas propre
de plus, si tu veux modifié un peu ton design, ça sera 100 fois plus galère à gérer quand tout est dans le fichier HTML à moitié dans une partie <style> dans une deuxième <style> puis dans les balises en elles-même.
N'hésite pas non plus à utiliser le RGBA qui sera plus approprié au thème SF. =)
le fait d'avoir de la transparence donnera un peu de profondeur =)
RE: [MMO WEB] Mechas War - Un jeu de ROBOTS avec des boulons dedans! - starmindfr - 12-03-2015
ha ok merci je vais aller y jetter un oeil pour repêcher quelques filtres, par exemple c'est pas super visible mais la grille de la 1ere image il y a un petit effet blanc a chaque intersection de la grille que je n'ai pas récupéré avec Photofiltre.
RE: [MMO WEB] Mechas War - Un jeu de ROBOTS avec des boulons dedans! - @lucard - 12-03-2015
je n'ai pas utiliser de filtre... si ce n'est l'équivalent de "border" et "box-shadow"
tout peut-être fait en CSS3 et le découpage reste simple ici.
Ton thème est en Bleu et Orange, ce sont des couleurs complémentaires.
L'une chaude (orange) l'autre froide (bleue forcément !).
alors ne mets pas de vert !!! S'il te plait ! ( tout comme le jaune → blanc)
dans le choix du perso au début :
.boxlignes{
margin:auto;
padding:0 15px; /* on s'eloigne du bord */
border: 2px #0C9DE7 solid; /* couleur du cadre bleu */
border-left: 4px double orange; /*Un peu de couleur orange pour augmenter le contrast, et en double pour faire futurist */
border-radius: 5px;
background-color:rgba(50,150,255,0.1) !important; /*mettre le la transparence c'est chouette ! */
color:white;
/* pas d'"opacity", ça fait de la transparence sur tout, y compris le texte */
}avant /Après :
![[Image: MECHA.gif]](http://upload.dinhosting.fr/Y/c/f/MECHA.gif)
Click to enlarge
RE: [MMO WEB] Mechas War - Un jeu de ROBOTS avec des boulons dedans! - starmindfr - 12-03-2015
Je regarde tout ca merci, c'est super joli le vert qui clignote
Pour le css en effet j'ai pris la mauvaise habitude d'en mettre a la volée en dehors des feuilles de style
Je les reprends de temps en temps.
RE: [MMO WEB] Mechas War - Un jeu de ROBOTS avec des boulons dedans! - starmindfr - 12-03-2015
Sinon je regarde aussi pour faire le bandeau du menu haut en css avec quelque chose de bien supporté, et qui s'adapte aux ecrans, il faudrait que je fasse 2 rectangles et 2 triangles avec un :after ?
RE: [MMO WEB] Mechas War - Un jeu de ROBOTS avec des boulons dedans! - @lucard - 12-03-2015
Le problème des triangle css, c'est qu'on ne peut pas mettre un border dessus. (puisque c'en est déjà)
petit exemple :
<html>
<div class="header">
<div class="top">Title</div>
<div class="bottom">test</div>
</div>
</html>*{
margin:0;
padding:0;
}
html{
background-color:black;
}
div{
text-align:center;
color:white;
}
div.top{
height :50px;
background-color:rgba(0,150,255,0.5);
}
div.bottom{
margin:auto;
height:20px;
width:500px;
background-color:rgba(0,150,255,0.5);
}
div.bottom::before{
content:"";
display:block;
float:right;
height:0px;
width:0px;
margin-right:-20px;
background-color:transparent;
border-top: 10px rgba(0,150,255,0.5) solid;
border-left: 10px rgba(0,150,255,0.5) solid;
border-right: 10px transparent solid;
border-bottom: 10px transparent solid;
}
div.bottom::after{
content:"";
display:block;
float:left;
height:0px;
width:0px;
margin-left:-20px;
background-color:transparent;
border-right: 10px rgba(0,150,255,0.5) solid;
border-top: 10px rgba(0,150,255,0.5) solid;
border-left: 10px transparent solid;
border-bottom: 10px transparent solid;
}à voir si une image en png (avec un repeat-x) ne serait pas plus judicieux.