JeuWeb Créez votre jeu par navigateur !

starmindfr · 12-03-2015, 10:32 AM

ok merci je vais faire un test avec l'interface 1 et la 2eme map pour voir ce que cela donne.

@lucard · 12-03-2015, 10:33 AM

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é.

click to enlarge.

**Sephi-Chan** · 12-03-2015, 11:46 AM

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.

starmindfr · 12-03-2015, 02:24 PM

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 ? Smile

@lucard · (Modification du message : 12-03-2015, 02:49 PM par @lucard.)

@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 Confused

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 =)

starmindfr · (Modification du message : 12-03-2015, 02:48 PM par starmindfr.)

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.

@lucard · (Modification du message : 12-03-2015, 03:21 PM par @lucard.)

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 :

Click to enlarge

starmindfr · (Modification du message : 12-03-2015, 03:48 PM par starmindfr.)

Je regarde tout ca merci, c'est super joli le vert qui clignote Smile

Pour le css en effet j'ai pris la mauvaise habitude d'en mettre a la volée en dehors des feuilles de style Smile

Je les reprends de temps en temps.

starmindfr · (Modification du message : 12-03-2015, 03:50 PM par starmindfr.)

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 ?

@lucard · 12-03-2015, 05:10 PM

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.